Always pass React event type and fix beforeinput

facebook · Aug 10, 2020 · f98cb9b · f98cb9b
1 parent 1f4866d
commit f98cb9b
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 15 deletions.
diff --git 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
@@ -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,13 +47,15 @@ function functionThatReturnsFalse() {
  */
 export function SyntheticEvent(
   reactName,
+  reactEventType,
   targetInst,
   nativeEvent,
   nativeEventTarget,
   Interface = EventInterface,
 ) {
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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,