Skip to content

Commit

Permalink
Always pass React event type and fix beforeinput
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaearon
gaearon committed Aug 10, 2020
1 parent 1f4866d commit 30c564b
Show file tree
Hide file tree
Showing 9 changed files with 72 additions and 47 deletions.
3 changes: 1 addition & 2 deletions packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
View file
Expand Up @@ -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');
},
}}
Expand Down
3 changes: 2 additions & 1 deletion packages/react-dom/src/events/SyntheticEvent.js
View file
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
View file
Expand Up @@ -229,6 +229,7 @@ function extractCompositionEvent(

const event = new SyntheticEvent(
eventType,
domEventName,
null,
nativeEvent,
nativeEventTarget,
Expand Down Expand Up @@ -397,6 +398,7 @@ function extractBeforeInputEvent(

const event = new SyntheticEvent(
'onBeforeInput',
'beforeinput',
null,
nativeEvent,
nativeEventTarget,
Expand Down
9 changes: 7 additions & 2 deletions packages/react-dom/src/events/plugins/ChangeEventPlugin.js
View file
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
View file
Expand Up @@ -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;

Expand Down
3 changes: 1 addition & 2 deletions packages/react-dom/src/events/plugins/SelectEventPlugin.js
View file
Expand Up @@ -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(
Expand Down
10 changes: 4 additions & 6 deletions packages/react-dom/src/events/plugins/SimpleEventPlugin.js
View file
Expand Up @@ -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
Expand All @@ -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':
Expand Down Expand Up @@ -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 (
Expand Down
84 changes: 52 additions & 32 deletions packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.js
View file
Expand Up @@ -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ß');
},
},
Expand All @@ -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(' ');
},
},
Expand Down Expand Up @@ -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');
},
},
Expand Down Expand Up @@ -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(' ');
},
},
Expand All @@ -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');
},
},
Expand Down Expand Up @@ -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(' ');
},
},
Expand All @@ -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');
},
},
Expand All @@ -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');
},
},
Expand All @@ -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');
},
},
Expand All @@ -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');
},
},
Expand Down Expand Up @@ -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');
},
},
Expand All @@ -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(' ');
},
},
Expand All @@ -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');
},
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/react-dom/src/test-utils/ReactTestUtils.js
View file
Expand Up @@ -587,6 +587,7 @@ function makeSimulator(eventType) {
const targetInst = getInstanceFromNode(domNode);
const event = new SyntheticEvent(
reactName,
fakeNativeEvent.type,
targetInst,
fakeNativeEvent,
domNode,
Expand Down

0 comments on commit 30c564b

Please sign in to comment.