From f98cb9b32b86781ccac258eccae69b79a8b8a765 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 10 Aug 2020 12:31:48 +0100 Subject: [PATCH] Always pass React event type and fix beforeinput --- .../src/__tests__/ReactDOMEventPropagation-test.js | 3 +-- packages/react-dom/src/events/SyntheticEvent.js | 3 ++- .../src/events/plugins/BeforeInputEventPlugin.js | 2 ++ .../react-dom/src/events/plugins/ChangeEventPlugin.js | 9 +++++++-- .../src/events/plugins/EnterLeaveEventPlugin.js | 4 ++-- .../react-dom/src/events/plugins/SelectEventPlugin.js | 3 +-- .../react-dom/src/events/plugins/SimpleEventPlugin.js | 10 ++++------ packages/react-dom/src/test-utils/ReactTestUtils.js | 1 + 8 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js index c47785d1ba740..06fb657227842 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 3edfae5f853ff..a6c7e60411198 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 30740f3756223..3cd1825fd67d4 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 a20d9911dac7a..e9308c583a444 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 2e345b2bfa8b7..1bf6aa3d78de5 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 2357361205b53..8b99dbe6dbc83 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 a85f8ba99aebe..6a2b89f97942f 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/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js index 248c82c5bae94..52ad2621cdebc 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,