From 033424401d355878ab87ba62982697a525b6b224 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 09:40:18 +0200
Subject: [PATCH 1/8] test: Add current behavior for event types of
 onFocus/onBlur

---
 .../__tests__/SyntheticFocusEvent-test.js     | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js

diff --git a/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
new file mode 100644
index 000000000000..c455b38b9e76
--- /dev/null
+++ b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+describe('SyntheticFocusEvent', () => {
+  let React;
+  let ReactDOM;
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  test('onFocus events have the focus type', () => {
+    const log = [];
+    ReactDOM.render(
+      <button
+        onFocus={event => log.push(`onFocus: ${event.type}`)}
+        onFocusCapture={event => log.push(`onFocusCapture: ${event.type}`)}
+      />,
+      container,
+    );
+    const button = container.querySelector('button');
+
+    button.dispatchEvent(
+      new FocusEvent('focusin', {
+        bubbles: true,
+        cancelable: false,
+      }),
+    );
+
+    expect(log).toEqual(['onFocusCapture: focusin', 'onFocus: focusin']);
+  });
+
+  test('onBlur events have the blur type', () => {
+    const log = [];
+    ReactDOM.render(
+      <button
+        onBlur={event => log.push(`onBlur: ${event.type}`)}
+        onBlurCapture={event => log.push(`onBlurCapture: ${event.type}`)}
+      />,
+      container,
+    );
+    const button = container.querySelector('button');
+
+    button.dispatchEvent(
+      new FocusEvent('focusout', {
+        bubbles: true,
+        cancelable: false,
+      }),
+    );
+
+    expect(log).toEqual(['onBlurCapture: focusout', 'onBlur: focusout']);
+  });
+});

From b6856b24576518c2f5c5092a2c5c2aff67256318 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 09:44:30 +0200
Subject: [PATCH 2/8] fix: onFocus/onBlur have a matching event type

---
 .../src/events/__tests__/SyntheticFocusEvent-test.js       | 4 ++--
 packages/react-dom/src/events/plugins/SimpleEventPlugin.js | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
index c455b38b9e76..1b63e5c3b665 100644
--- a/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
+++ b/packages/react-dom/src/events/__tests__/SyntheticFocusEvent-test.js
@@ -44,7 +44,7 @@ describe('SyntheticFocusEvent', () => {
       }),
     );
 
-    expect(log).toEqual(['onFocusCapture: focusin', 'onFocus: focusin']);
+    expect(log).toEqual(['onFocusCapture: focus', 'onFocus: focus']);
   });
 
   test('onBlur events have the blur type', () => {
@@ -65,6 +65,6 @@ describe('SyntheticFocusEvent', () => {
       }),
     );
 
-    expect(log).toEqual(['onBlurCapture: focusout', 'onBlur: focusout']);
+    expect(log).toEqual(['onBlurCapture: blur', 'onBlur: blur']);
   });
 });
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index 558cd15bca11..28d7d70d0323 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -158,6 +158,13 @@ function extractEvents(
     EventInterface,
   );
 
+  if (domEventName === 'focusin') {
+    event.type = 'focus';
+  }
+  if (domEventName === 'focusout') {
+    event.type = 'blur';
+  }
+
   const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
   if (
     enableCreateEventHandleAPI &&

From 0e984462d984cd7910ee85d0f5afd2c6efb29f01 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 10:50:25 +0200
Subject: [PATCH 3/8] fix useFocus

---
 .../events/src/dom/create-event-handle/Focus.js      |  8 ++++----
 .../__tests__/useFocus-test.internal.js              | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index 53e04c1ca846..bcac5e6d93c1 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -200,8 +200,8 @@ export function useFocus(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focus', passiveObjectWithPriority);
+  const blurHandle = useEvent('blur', passiveObjectWithPriority);
   const focusVisibleHandles = useFocusVisibleInputHandles();
 
   useLayoutEffect(() => {
@@ -297,8 +297,8 @@ export function useFocusWithin<T>(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
-  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
+  const focusHandle = useEvent('focus', passiveObjectWithPriority);
+  const blurHandle = useEvent('blur', passiveObjectWithPriority);
   const afterBlurHandle = useEvent('afterblur', passiveObject);
   const beforeBlurHandle = useEvent('beforeblur', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
index a2745cbe62c2..f3bae7717b8c 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
@@ -36,7 +36,7 @@ function initializeModules(hasPointerEvents) {
 const forcePointerEvents = true;
 const table = [[forcePointerEvents], [!forcePointerEvents]];
 
-describe.each(table)(`useFocus`, hasPointerEvents => {
+describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
   let container;
 
   beforeEach(() => {
@@ -91,7 +91,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         useFocus(ref, {
           onBlur,
         });
-        return <div ref={ref} />;
+        return <div ref={ref} onBlur={() => {}} onFocus={() => {}} />;
       };
       ReactDOM.render(<Component />, container);
       Scheduler.unstable_flushAll();
@@ -119,7 +119,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocus,
         });
         return (
-          <div ref={ref}>
+          <div ref={ref} onFocus={() => {}}>
             <a ref={innerRef} />
           </div>
         );
@@ -158,7 +158,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         });
         return (
           <div ref={ref}>
-            <div ref={innerRef} />
+            <div ref={innerRef} onBlur={() => {}} onFocus={() => {}} />
           </div>
         );
       };
@@ -201,7 +201,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocusVisibleChange,
         });
         return (
-          <div ref={ref}>
+          <div ref={ref} onBlur={() => {}} onFocus={() => {}}>
             <div ref={innerRef} />
           </div>
         );
@@ -295,7 +295,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
           onFocusChange: createEventHandler('outer: onFocusChange'),
         });
         return (
-          <div ref={outerRef}>
+          <div ref={outerRef} onBlur={() => {}} onFocus={() => {}}>
             <Inner />
           </div>
         );

From cc2ae0ca2890de9b93674f5671300e0f2c80567f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 11:57:49 +0200
Subject: [PATCH 4/8] fix: don't compare native event types with react event
 types

---
 packages/react-dom/src/events/DOMPluginEventSystem.js  |  2 +-
 .../react-dom/src/events/ReactSyntheticEventType.js    |  1 +
 .../events/src/dom/create-event-handle/Focus.js        |  8 ++++----
 .../__tests__/useFocus-test.internal.js                | 10 +++++-----
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 1b23cde2f35a..b11807fdca3e 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -709,7 +709,7 @@ export function accumulateSinglePhaseListeners(
 
   let instance = targetFiber;
   let lastHostComponent = null;
-  const targetType = event.type;
+  const targetType = event.nativeEvent.type;
 
   // Accumulate all instances and listeners via the target -> root path.
   while (instance !== null) {
diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
index f68fad1e0b6d..e37af02d162d 100644
--- a/packages/react-dom/src/events/ReactSyntheticEventType.js
+++ b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -29,6 +29,7 @@ export type ReactSyntheticEvent = {|
   _dispatchListeners?: null | Array<Function> | Function,
   _reactName: string,
   _targetInst: Fiber,
+  nativeEvent: Event,
   type: string,
   currentTarget: null | EventTarget,
 |};
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index bcac5e6d93c1..53e04c1ca846 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -200,8 +200,8 @@ export function useFocus(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focus', passiveObjectWithPriority);
-  const blurHandle = useEvent('blur', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
+  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
   const focusVisibleHandles = useFocusVisibleInputHandles();
 
   useLayoutEffect(() => {
@@ -297,8 +297,8 @@ export function useFocusWithin<T>(
   const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
     {isFocused: false, isFocusVisible: false},
   );
-  const focusHandle = useEvent('focus', passiveObjectWithPriority);
-  const blurHandle = useEvent('blur', passiveObjectWithPriority);
+  const focusHandle = useEvent('focusin', passiveObjectWithPriority);
+  const blurHandle = useEvent('focusout', passiveObjectWithPriority);
   const afterBlurHandle = useEvent('afterblur', passiveObject);
   const beforeBlurHandle = useEvent('beforeblur', passiveObject);
   const focusVisibleHandles = useFocusVisibleInputHandles();
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
index f3bae7717b8c..d8f8f3c7d31b 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
@@ -91,7 +91,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
         useFocus(ref, {
           onBlur,
         });
-        return <div ref={ref} onBlur={() => {}} onFocus={() => {}} />;
+        return <div ref={ref} />;
       };
       ReactDOM.render(<Component />, container);
       Scheduler.unstable_flushAll();
@@ -119,7 +119,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocus,
         });
         return (
-          <div ref={ref} onFocus={() => {}}>
+          <div ref={ref}>
             <a ref={innerRef} />
           </div>
         );
@@ -158,7 +158,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
         });
         return (
           <div ref={ref}>
-            <div ref={innerRef} onBlur={() => {}} onFocus={() => {}} />
+            <div ref={innerRef} />
           </div>
         );
       };
@@ -201,7 +201,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocusVisibleChange,
         });
         return (
-          <div ref={ref} onBlur={() => {}} onFocus={() => {}}>
+          <div ref={ref}>
             <div ref={innerRef} />
           </div>
         );
@@ -295,7 +295,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
           onFocusChange: createEventHandler('outer: onFocusChange'),
         });
         return (
-          <div ref={outerRef} onBlur={() => {}} onFocus={() => {}}>
+          <div ref={outerRef}>
             <Inner />
           </div>
         );

From 16d30a72a4a3da35db0cbb3ce1c47e03a738c8d5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Sat, 8 Aug 2020 14:02:05 +0200
Subject: [PATCH 5/8] Add FocusIn/FocusOutEventInterface

---
 packages/react-dom/src/events/SyntheticEvent.js    | 14 ++++++++++++++
 .../src/events/plugins/SimpleEventPlugin.js        | 13 ++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 3edfae5f853f..1fa29fd6da19 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -226,6 +226,20 @@ export const FocusEventInterface = {
   relatedTarget: 0,
 };
 
+export const FocusInEventInterface = {
+  ...FocusEventInterface,
+  type: function() {
+    return 'focus';
+  },
+};
+
+export const FocusOutEventInterface = {
+  ...FocusEventInterface,
+  type: function() {
+    return 'blur';
+  },
+};
+
 /**
  * @interface Event
  * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index 28d7d70d0323..bc6e8c47a66a 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -18,6 +18,8 @@ import {
   AnimationEventInterface,
   ClipboardEventInterface,
   FocusEventInterface,
+  FocusInEventInterface,
+  FocusOutEventInterface,
   KeyboardEventInterface,
   MouseEventInterface,
   PointerEventInterface,
@@ -77,7 +79,11 @@ function extractEvents(
       EventInterface = KeyboardEventInterface;
       break;
     case 'focusin':
+      EventInterface = FocusInEventInterface;
+      break;
     case 'focusout':
+      EventInterface = FocusOutEventInterface;
+      break;
     case 'beforeblur':
     case 'afterblur':
       EventInterface = FocusEventInterface;
@@ -158,13 +164,6 @@ function extractEvents(
     EventInterface,
   );
 
-  if (domEventName === 'focusin') {
-    event.type = 'focus';
-  }
-  if (domEventName === 'focusout') {
-    event.type = 'blur';
-  }
-
   const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
   if (
     enableCreateEventHandleAPI &&

From 4781b27150fc0c556bf9be81e65809e9266a266d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Mon, 10 Aug 2020 12:26:37 +0100
Subject: [PATCH 6/8] A simpler alternative fix

---
 packages/react-dom/src/events/SyntheticEvent.js    | 14 --------------
 .../src/events/plugins/SimpleEventPlugin.js        | 12 ++++++++----
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 1fa29fd6da19..3edfae5f853f 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -226,20 +226,6 @@ export const FocusEventInterface = {
   relatedTarget: 0,
 };
 
-export const FocusInEventInterface = {
-  ...FocusEventInterface,
-  type: function() {
-    return 'focus';
-  },
-};
-
-export const FocusOutEventInterface = {
-  ...FocusEventInterface,
-  type: function() {
-    return 'blur';
-  },
-};
-
 /**
  * @interface Event
  * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index bc6e8c47a66a..a85f8ba99aeb 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -18,8 +18,6 @@ import {
   AnimationEventInterface,
   ClipboardEventInterface,
   FocusEventInterface,
-  FocusInEventInterface,
-  FocusOutEventInterface,
   KeyboardEventInterface,
   MouseEventInterface,
   PointerEventInterface,
@@ -65,6 +63,7 @@ function extractEvents(
     return;
   }
   let EventInterface;
+  let syntheticType;
   switch (domEventName) {
     case 'keypress':
       // Firefox creates a keypress event for function keys too. This removes
@@ -79,10 +78,12 @@ function extractEvents(
       EventInterface = KeyboardEventInterface;
       break;
     case 'focusin':
-      EventInterface = FocusInEventInterface;
+      syntheticType = 'focus';
+      EventInterface = FocusEventInterface;
       break;
     case 'focusout':
-      EventInterface = FocusOutEventInterface;
+      syntheticType = 'blur';
+      EventInterface = FocusEventInterface;
       break;
     case 'beforeblur':
     case 'afterblur':
@@ -163,6 +164,9 @@ function extractEvents(
     nativeEventTarget,
     EventInterface,
   );
+  if (syntheticType) {
+    event.type = syntheticType;
+  }
 
   const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
   if (

From 1f4866d85a1da7bca2e5c18de1ca659ee6fcef23 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Mon, 10 Aug 2020 12:26:46 +0100
Subject: [PATCH 7/8] Add regression tests

---
 .../ReactDOMEventPropagation-test.js          | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index 1c737df509fb..c47785d1ba74 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -50,6 +50,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onAnimationEnd',
+        reactEventType: 'animationend',
         nativeEvent: 'animationend',
         dispatch(node) {
           node.dispatchEvent(
@@ -66,6 +67,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onAnimationIteration',
+        reactEventType: 'animationiteration',
         nativeEvent: 'animationiteration',
         dispatch(node) {
           node.dispatchEvent(
@@ -82,6 +84,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onAnimationStart',
+        reactEventType: 'animationstart',
         nativeEvent: 'animationstart',
         dispatch(node) {
           node.dispatchEvent(
@@ -98,6 +101,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onAuxClick',
+        reactEventType: 'auxclick',
         nativeEvent: 'auxclick',
         dispatch(node) {
           node.dispatchEvent(
@@ -114,6 +118,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'input',
         reactEvent: 'onBlur',
+        reactEventType: 'blur',
         nativeEvent: 'focusout',
         dispatch(node) {
           const e = new Event('focusout', {
@@ -133,6 +138,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onClick',
+        reactEventType: 'click',
         nativeEvent: 'click',
         dispatch(node) {
           node.click();
@@ -144,6 +150,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onContextMenu',
+        reactEventType: 'contextmenu',
         nativeEvent: 'contextmenu',
         dispatch(node) {
           node.dispatchEvent(
@@ -160,6 +167,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onCopy',
+        reactEventType: 'copy',
         nativeEvent: 'copy',
         dispatch(node) {
           node.dispatchEvent(
@@ -176,6 +184,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onCut',
+        reactEventType: 'cut',
         nativeEvent: 'cut',
         dispatch(node) {
           node.dispatchEvent(
@@ -192,6 +201,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDoubleClick',
+        reactEventType: 'dblclick',
         nativeEvent: 'dblclick',
         dispatch(node) {
           node.dispatchEvent(
@@ -208,6 +218,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDrag',
+        reactEventType: 'drag',
         nativeEvent: 'drag',
         dispatch(node) {
           node.dispatchEvent(
@@ -224,6 +235,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragEnd',
+        reactEventType: 'dragend',
         nativeEvent: 'dragend',
         dispatch(node) {
           node.dispatchEvent(
@@ -240,6 +252,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragEnter',
+        reactEventType: 'dragenter',
         nativeEvent: 'dragenter',
         dispatch(node) {
           node.dispatchEvent(
@@ -256,6 +269,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragExit',
+        reactEventType: 'dragexit',
         nativeEvent: 'dragexit',
         dispatch(node) {
           node.dispatchEvent(
@@ -272,6 +286,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragLeave',
+        reactEventType: 'dragleave',
         nativeEvent: 'dragleave',
         dispatch(node) {
           node.dispatchEvent(
@@ -288,6 +303,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragOver',
+        reactEventType: 'dragover',
         nativeEvent: 'dragover',
         dispatch(node) {
           node.dispatchEvent(
@@ -304,6 +320,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDragStart',
+        reactEventType: 'dragstart',
         nativeEvent: 'dragstart',
         dispatch(node) {
           node.dispatchEvent(
@@ -320,6 +337,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onDrop',
+        reactEventType: 'drop',
         nativeEvent: 'drop',
         dispatch(node) {
           node.dispatchEvent(
@@ -336,6 +354,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'input',
         reactEvent: 'onFocus',
+        reactEventType: 'focus',
         nativeEvent: 'focusin',
         dispatch(node) {
           const e = new Event('focusin', {
@@ -351,6 +370,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onGotPointerCapture',
+        reactEventType: 'gotpointercapture',
         nativeEvent: 'gotpointercapture',
         dispatch(node) {
           node.dispatchEvent(
@@ -367,6 +387,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'input',
         reactEvent: 'onKeyDown',
+        reactEventType: 'keydown',
         nativeEvent: 'keydown',
         dispatch(node) {
           node.dispatchEvent(
@@ -383,6 +404,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'input',
         reactEvent: 'onKeyPress',
+        reactEventType: 'keypress',
         nativeEvent: 'keypress',
         dispatch(node) {
           node.dispatchEvent(
@@ -400,6 +422,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'input',
         reactEvent: 'onKeyUp',
+        reactEventType: 'keyup',
         nativeEvent: 'keyup',
         dispatch(node) {
           node.dispatchEvent(
@@ -416,6 +439,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onLostPointerCapture',
+        reactEventType: 'lostpointercapture',
         nativeEvent: 'lostpointercapture',
         dispatch(node) {
           node.dispatchEvent(
@@ -432,6 +456,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onMouseDown',
+        reactEventType: 'mousedown',
         nativeEvent: 'mousedown',
         dispatch(node) {
           node.dispatchEvent(
@@ -448,6 +473,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onMouseOut',
+        reactEventType: 'mouseout',
         nativeEvent: 'mouseout',
         dispatch(node) {
           node.dispatchEvent(
@@ -464,6 +490,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onMouseOver',
+        reactEventType: 'mouseover',
         nativeEvent: 'mouseover',
         dispatch(node) {
           node.dispatchEvent(
@@ -480,6 +507,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onMouseUp',
+        reactEventType: 'mouseup',
         nativeEvent: 'mouseup',
         dispatch(node) {
           node.dispatchEvent(
@@ -496,6 +524,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPaste',
+        reactEventType: 'paste',
         nativeEvent: 'paste',
         dispatch(node) {
           node.dispatchEvent(
@@ -512,6 +541,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerCancel',
+        reactEventType: 'pointercancel',
         nativeEvent: 'pointercancel',
         dispatch(node) {
           node.dispatchEvent(
@@ -528,6 +558,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerDown',
+        reactEventType: 'pointerdown',
         nativeEvent: 'pointerdown',
         dispatch(node) {
           node.dispatchEvent(
@@ -544,6 +575,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerMove',
+        reactEventType: 'pointermove',
         nativeEvent: 'pointermove',
         dispatch(node) {
           node.dispatchEvent(
@@ -560,6 +592,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerOut',
+        reactEventType: 'pointerout',
         nativeEvent: 'pointerout',
         dispatch(node) {
           node.dispatchEvent(
@@ -576,6 +609,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerOver',
+        reactEventType: 'pointerover',
         nativeEvent: 'pointerover',
         dispatch(node) {
           node.dispatchEvent(
@@ -592,6 +626,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onPointerUp',
+        reactEventType: 'pointerup',
         nativeEvent: 'pointerup',
         dispatch(node) {
           node.dispatchEvent(
@@ -608,6 +643,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'form',
         reactEvent: 'onReset',
+        reactEventType: 'reset',
         nativeEvent: 'reset',
         dispatch(node) {
           const e = new Event('reset', {
@@ -623,6 +659,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'form',
         reactEvent: 'onSubmit',
+        reactEventType: 'submit',
         nativeEvent: 'submit',
         dispatch(node) {
           const e = new Event('submit', {
@@ -638,6 +675,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onTouchCancel',
+        reactEventType: 'touchcancel',
         nativeEvent: 'touchcancel',
         dispatch(node) {
           node.dispatchEvent(
@@ -654,6 +692,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onTouchEnd',
+        reactEventType: 'touchend',
         nativeEvent: 'touchend',
         dispatch(node) {
           node.dispatchEvent(
@@ -670,6 +709,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onTouchMove',
+        reactEventType: 'touchmove',
         nativeEvent: 'touchmove',
         dispatch(node) {
           node.dispatchEvent(
@@ -686,6 +726,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onTouchStart',
+        reactEventType: 'touchstart',
         nativeEvent: 'touchstart',
         dispatch(node) {
           node.dispatchEvent(
@@ -702,6 +743,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onTransitionEnd',
+        reactEventType: 'transitionend',
         nativeEvent: 'transitionend',
         dispatch(node) {
           node.dispatchEvent(
@@ -718,6 +760,7 @@ describe('ReactDOMEventListener', () => {
       testNativeBubblingEvent({
         type: 'div',
         reactEvent: 'onWheel',
+        reactEventType: 'wheel',
         nativeEvent: 'wheel',
         dispatch(node) {
           node.dispatchEvent(
@@ -736,6 +779,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onAbort',
+        reactEventType: 'abort',
         nativeEvent: 'abort',
         dispatch(node) {
           const e = new Event('abort', {
@@ -751,6 +795,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'dialog',
         reactEvent: 'onCancel',
+        reactEventType: 'cancel',
         nativeEvent: 'cancel',
         dispatch(node) {
           const e = new Event('cancel', {
@@ -766,6 +811,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onCanPlay',
+        reactEventType: 'canplay',
         nativeEvent: 'canplay',
         dispatch(node) {
           const e = new Event('canplay', {
@@ -781,6 +827,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onCanPlayThrough',
+        reactEventType: 'canplaythrough',
         nativeEvent: 'canplaythrough',
         dispatch(node) {
           const e = new Event('canplaythrough', {
@@ -796,6 +843,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'dialog',
         reactEvent: 'onClose',
+        reactEventType: 'close',
         nativeEvent: 'close',
         dispatch(node) {
           const e = new Event('close', {
@@ -811,6 +859,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onDurationChange',
+        reactEventType: 'durationchange',
         nativeEvent: 'durationchange',
         dispatch(node) {
           const e = new Event('durationchange', {
@@ -826,6 +875,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onEmptied',
+        reactEventType: 'emptied',
         nativeEvent: 'emptied',
         dispatch(node) {
           const e = new Event('emptied', {
@@ -841,6 +891,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onEncrypted',
+        reactEventType: 'encrypted',
         nativeEvent: 'encrypted',
         dispatch(node) {
           const e = new Event('encrypted', {
@@ -856,6 +907,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onEnded',
+        reactEventType: 'ended',
         nativeEvent: 'ended',
         dispatch(node) {
           const e = new Event('ended', {
@@ -871,6 +923,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'img',
         reactEvent: 'onError',
+        reactEventType: 'error',
         nativeEvent: 'error',
         dispatch(node) {
           const e = new Event('error', {
@@ -886,6 +939,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'input',
         reactEvent: 'onInvalid',
+        reactEventType: 'invalid',
         nativeEvent: 'invalid',
         dispatch(node) {
           const e = new Event('invalid', {
@@ -901,6 +955,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'img',
         reactEvent: 'onLoad',
+        reactEventType: 'load',
         nativeEvent: 'load',
         dispatch(node) {
           const e = new Event('load', {
@@ -916,6 +971,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onLoadedData',
+        reactEventType: 'loadeddata',
         nativeEvent: 'loadeddata',
         dispatch(node) {
           const e = new Event('loadeddata', {
@@ -931,6 +987,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onLoadedMetadata',
+        reactEventType: 'loadedmetadata',
         nativeEvent: 'loadedmetadata',
         dispatch(node) {
           const e = new Event('loadedmetadata', {
@@ -946,6 +1003,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onLoadStart',
+        reactEventType: 'loadstart',
         nativeEvent: 'loadstart',
         dispatch(node) {
           const e = new Event('loadstart', {
@@ -961,6 +1019,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onPause',
+        reactEventType: 'pause',
         nativeEvent: 'pause',
         dispatch(node) {
           const e = new Event('pause', {
@@ -976,6 +1035,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onPlay',
+        reactEventType: 'play',
         nativeEvent: 'play',
         dispatch(node) {
           const e = new Event('play', {
@@ -991,6 +1051,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onPlaying',
+        reactEventType: 'playing',
         nativeEvent: 'playing',
         dispatch(node) {
           const e = new Event('playing', {
@@ -1006,6 +1067,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onProgress',
+        reactEventType: 'progress',
         nativeEvent: 'progress',
         dispatch(node) {
           const e = new Event('progress', {
@@ -1021,6 +1083,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onRateChange',
+        reactEventType: 'ratechange',
         nativeEvent: 'ratechange',
         dispatch(node) {
           const e = new Event('ratechange', {
@@ -1036,6 +1099,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onSeeked',
+        reactEventType: 'seeked',
         nativeEvent: 'seeked',
         dispatch(node) {
           const e = new Event('seeked', {
@@ -1051,6 +1115,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onSeeking',
+        reactEventType: 'seeking',
         nativeEvent: 'seeking',
         dispatch(node) {
           const e = new Event('seeking', {
@@ -1066,6 +1131,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onStalled',
+        reactEventType: 'stalled',
         nativeEvent: 'stalled',
         dispatch(node) {
           const e = new Event('stalled', {
@@ -1081,6 +1147,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onSuspend',
+        reactEventType: 'suspend',
         nativeEvent: 'suspend',
         dispatch(node) {
           const e = new Event('suspend', {
@@ -1096,6 +1163,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onTimeUpdate',
+        reactEventType: 'timeupdate',
         nativeEvent: 'timeupdate',
         dispatch(node) {
           const e = new Event('timeupdate', {
@@ -1111,6 +1179,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'details',
         reactEvent: 'onToggle',
+        reactEventType: 'toggle',
         nativeEvent: 'toggle',
         dispatch(node) {
           const e = new Event('toggle', {
@@ -1126,6 +1195,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onVolumeChange',
+        reactEventType: 'volumechange',
         nativeEvent: 'volumechange',
         dispatch(node) {
           const e = new Event('volumechange', {
@@ -1141,6 +1211,7 @@ describe('ReactDOMEventListener', () => {
       testEmulatedBubblingEvent({
         type: 'video',
         reactEvent: 'onWaiting',
+        reactEventType: 'waiting',
         nativeEvent: 'waiting',
         dispatch(node) {
           const e = new Event('waiting', {
@@ -1158,6 +1229,7 @@ describe('ReactDOMEventListener', () => {
       testNonBubblingEvent({
         type: 'div',
         reactEvent: 'onScroll',
+        reactEventType: 'scroll',
         nativeEvent: 'scroll',
         dispatch(node) {
           const e = new Event('scroll', {
@@ -1368,6 +1440,8 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onBeforeInputCapture: e => {
+              // FIXME: this should be beforeinput for consistency.
+              expect(e.type).toBe('textInput');
               log.push('- outer parent capture');
             },
           }}
@@ -1430,6 +1504,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onChangeCapture: e => {
+              expect(e.type).toBe('change');
               log.push('- outer parent capture');
             },
           }}
@@ -1488,6 +1563,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onCompositionStartCapture: e => {
+              expect(e.type).toBe('compositionstart');
               log.push('- outer parent capture');
             },
           }}
@@ -1549,6 +1625,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onCompositionEndCapture: e => {
+              expect(e.type).toBe('compositionend');
               log.push('- outer parent capture');
             },
           }}
@@ -1610,6 +1687,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onCompositionUpdateCapture: e => {
+              expect(e.type).toBe('compositionupdate');
               log.push('- outer parent capture');
             },
           }}
@@ -1671,6 +1749,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onSelectCapture: e => {
+              expect(e.type).toBe('select');
               log.push('- outer parent capture');
             },
           }}
@@ -1769,6 +1848,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -1825,6 +1905,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -1883,6 +1964,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -1935,6 +2017,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -1986,6 +2069,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2039,6 +2123,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2103,6 +2188,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2165,6 +2251,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2228,6 +2315,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2282,6 +2370,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2350,6 +2439,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2417,6 +2507,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2482,6 +2573,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2547,6 +2639,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}
@@ -2615,6 +2708,7 @@ describe('ReactDOMEventListener', () => {
             log.push('- outer parent');
           },
           [eventConfig.reactEvent + 'Capture']: e => {
+            expect(e.type).toBe(eventConfig.reactEventType);
             log.push('- outer parent capture');
           },
         }}

From 30c564b50a06c9070f8646c75232db7f581bd82a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Mon, 10 Aug 2020 12:31:48 +0100
Subject: [PATCH 8/8] Always pass React event type and fix beforeinput

---
 .../ReactDOMEventPropagation-test.js          |  3 +-
 .../react-dom/src/events/SyntheticEvent.js    |  3 +-
 .../events/plugins/BeforeInputEventPlugin.js  |  2 +
 .../src/events/plugins/ChangeEventPlugin.js   |  9 +-
 .../events/plugins/EnterLeaveEventPlugin.js   |  4 +-
 .../src/events/plugins/SelectEventPlugin.js   |  3 +-
 .../src/events/plugins/SimpleEventPlugin.js   | 10 +--
 .../ModernBeforeInputEventPlugin-test.js      | 84 ++++++++++++-------
 .../src/test-utils/ReactTestUtils.js          |  1 +
 9 files changed, 72 insertions(+), 47 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index c47785d1ba74..06fb65722784 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -1440,8 +1440,7 @@ describe('ReactDOMEventListener', () => {
               log.push('- outer parent');
             },
             onBeforeInputCapture: e => {
-              // FIXME: this should be beforeinput for consistency.
-              expect(e.type).toBe('textInput');
+              expect(e.type).toBe('beforeinput');
               log.push('- outer parent capture');
             },
           }}
diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 3edfae5f853f..a6c7e6041119 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -14,7 +14,6 @@ import getEventCharCode from './getEventCharCode';
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
 const EventInterface = {
-  type: 0,
   eventPhase: 0,
   bubbles: 0,
   cancelable: 0,
@@ -48,6 +47,7 @@ function functionThatReturnsFalse() {
  */
 export function SyntheticEvent(
   reactName,
+  reactEventType,
   targetInst,
   nativeEvent,
   nativeEventTarget,
@@ -55,6 +55,7 @@ export function SyntheticEvent(
 ) {
   this._reactName = reactName;
   this._targetInst = targetInst;
+  this.type = reactEventType;
   this.nativeEvent = nativeEvent;
   this.target = nativeEventTarget;
   this.currentTarget = null;
diff --git a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
index 30740f375622..3cd1825fd67d 100644
--- a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
@@ -229,6 +229,7 @@ function extractCompositionEvent(
 
   const event = new SyntheticEvent(
     eventType,
+    domEventName,
     null,
     nativeEvent,
     nativeEventTarget,
@@ -397,6 +398,7 @@ function extractBeforeInputEvent(
 
   const event = new SyntheticEvent(
     'onBeforeInput',
+    'beforeinput',
     null,
     nativeEvent,
     nativeEventTarget,
diff --git a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
index a20d9911dac7..e9308c583a44 100644
--- a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
@@ -49,8 +49,13 @@ function createAndAccumulateChangeEvent(
   nativeEvent,
   target,
 ) {
-  const event = new SyntheticEvent('onChange', null, nativeEvent, target);
-  event.type = 'change';
+  const event = new SyntheticEvent(
+    'onChange',
+    'change',
+    null,
+    nativeEvent,
+    target,
+  );
   // Flag this event loop as needing state restore.
   enqueueStateRestore(((target: any): Node));
   accumulateTwoPhaseListeners(inst, dispatchQueue, event);
diff --git a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
index 2e345b2bfa8b..1bf6aa3d78de 100644
--- a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
@@ -133,23 +133,23 @@ function extractEvents(
 
   const leave = new SyntheticEvent(
     leaveEventType,
+    eventTypePrefix + 'leave',
     from,
     nativeEvent,
     nativeEventTarget,
     eventInterface,
   );
-  leave.type = eventTypePrefix + 'leave';
   leave.target = fromNode;
   leave.relatedTarget = toNode;
 
   let enter = new SyntheticEvent(
     enterEventType,
+    eventTypePrefix + 'enter',
     to,
     nativeEvent,
     nativeEventTarget,
     eventInterface,
   );
-  enter.type = eventTypePrefix + 'enter';
   enter.target = toNode;
   enter.relatedTarget = fromNode;
 
diff --git a/packages/react-dom/src/events/plugins/SelectEventPlugin.js b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
index 2357361205b5..8b99dbe6dbc8 100644
--- a/packages/react-dom/src/events/plugins/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
@@ -114,12 +114,11 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
 
     const syntheticEvent = new SyntheticEvent(
       'onSelect',
+      'select',
       null,
       nativeEvent,
       nativeEventTarget,
     );
-
-    syntheticEvent.type = 'select';
     syntheticEvent.target = activeElement;
 
     accumulateTwoPhaseListeners(
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index a85f8ba99aeb..6a2b89f97942 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -63,7 +63,7 @@ function extractEvents(
     return;
   }
   let EventInterface;
-  let syntheticType;
+  let reactEventType = domEventName;
   switch (domEventName) {
     case 'keypress':
       // Firefox creates a keypress event for function keys too. This removes
@@ -78,11 +78,11 @@ function extractEvents(
       EventInterface = KeyboardEventInterface;
       break;
     case 'focusin':
-      syntheticType = 'focus';
+      reactEventType = 'focus';
       EventInterface = FocusEventInterface;
       break;
     case 'focusout':
-      syntheticType = 'blur';
+      reactEventType = 'blur';
       EventInterface = FocusEventInterface;
       break;
     case 'beforeblur':
@@ -159,14 +159,12 @@ function extractEvents(
   }
   const event = new SyntheticEvent(
     reactName,
+    reactEventType,
     null,
     nativeEvent,
     nativeEventTarget,
     EventInterface,
   );
-  if (syntheticType) {
-    event.type = syntheticType;
-  }
 
   const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
   if (
diff --git a/packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js
index ad4ecd7b81fe..59103e984ea4 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js
@@ -224,14 +224,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('test string 3');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('textInput');
+            expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('abcß');
           },
         },
@@ -244,7 +246,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe(' ');
           },
         },
@@ -281,7 +284,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('textInput');
+            expect(beforeInputEvent.nativeEvent.type).toBe('textInput');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
           },
         },
@@ -359,14 +363,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('a');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe(' ');
           },
         },
@@ -391,14 +397,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('c');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
           },
         },
@@ -482,14 +490,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('a');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe(' ');
           },
         },
@@ -514,14 +524,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('c');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
           },
         },
@@ -540,7 +552,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keydown');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keydown');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('bar');
           },
         },
@@ -553,7 +566,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keyup');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keyup');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('BAR');
           },
         },
@@ -566,7 +580,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('Bar');
           },
         },
@@ -596,7 +611,8 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.nativeEvent.type).toBe('compositionend');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('test string 3');
           },
         },
@@ -609,14 +625,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('a');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe(' ');
           },
         },
@@ -641,14 +659,16 @@ describe('BeforeInputEventPlugin', () => {
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('c');
           },
         },
         {
           run: ({beforeInputEvent, spyOnBeforeInput}) => {
             expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);
-            expect(beforeInputEvent.type).toBe('keypress');
+            expect(beforeInputEvent.nativeEvent.type).toBe('keypress');
+            expect(beforeInputEvent.type).toBe('beforeinput');
             expect(beforeInputEvent.data).toBe('\uD83D\uDE0A');
           },
         },
@@ -715,17 +735,17 @@ describe('BeforeInputEventPlugin', () => {
     const node = ReactDOM.render(
       <input
         type="text"
-        onBeforeInput={({type, data}) => {
+        onBeforeInput={e => {
           spyOnBeforeInput();
-          beforeInputEvent = {type, data};
+          beforeInputEvent = e;
         }}
-        onCompositionStart={({type, data}) => {
+        onCompositionStart={e => {
           spyOnCompositionStart();
-          compositionStartEvent = {type, data};
+          compositionStartEvent = e;
         }}
-        onCompositionUpdate={({type, data}) => {
+        onCompositionUpdate={e => {
           spyOnCompositionUpdate();
-          compositionUpdateEvent = {type, data};
+          compositionUpdateEvent = e;
         }}
       />,
       container,
@@ -761,17 +781,17 @@ describe('BeforeInputEventPlugin', () => {
     const node = ReactDOM.render(
       <div
         contentEditable={true}
-        onBeforeInput={({type, data}) => {
+        onBeforeInput={e => {
           spyOnBeforeInput();
-          beforeInputEvent = {type, data};
+          beforeInputEvent = e;
         }}
-        onCompositionStart={({type, data}) => {
+        onCompositionStart={e => {
           spyOnCompositionStart();
-          compositionStartEvent = {type, data};
+          compositionStartEvent = e;
         }}
-        onCompositionUpdate={({type, data}) => {
+        onCompositionUpdate={e => {
           spyOnCompositionUpdate();
-          compositionUpdateEvent = {type, data};
+          compositionUpdateEvent = e;
         }}
       />,
       container,
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 248c82c5bae9..52ad2621cdeb 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -587,6 +587,7 @@ function makeSimulator(eventType) {
     const targetInst = getInstanceFromNode(domNode);
     const event = new SyntheticEvent(
       reactName,
+      fakeNativeEvent.type,
       targetInst,
       fakeNativeEvent,
       domNode,