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( { + 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(
{ + 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,