Skip to content

Prevent BeforeInputPlugin from returning [null, null] #11848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 14, 2017
Merged

Prevent BeforeInputPlugin from returning [null, null] #11848

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 23 additions & 14 deletions packages/react-dom/src/events/BeforeInputEventPlugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,20 +453,29 @@ const BeforeInputEventPlugin = {
nativeEvent,
nativeEventTarget,
) {
return [
extractCompositionEvent(
topLevelType,
targetInst,
nativeEvent,
nativeEventTarget,
),
extractBeforeInputEvent(
topLevelType,
targetInst,
nativeEvent,
nativeEventTarget,
),
];
const composition = extractCompositionEvent(
topLevelType,
targetInst,
nativeEvent,
nativeEventTarget,
);

const beforeInput = extractBeforeInputEvent(
topLevelType,
targetInst,
nativeEvent,
nativeEventTarget,
);

if (composition === null) {
return beforeInput;
}

if (beforeInput === null) {
return composition;
}

return [composition, beforeInput];
},
};

Expand Down
69 changes: 21 additions & 48 deletions packages/react-dom/src/events/__tests__/BeforeInputEventPlugin-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,12 @@ describe('BeforeInputEventPlugin', function() {
return function() {
const newArgs = [node].concat(Array.prototype.slice.call(arguments));
const newEvents = extract.apply(this, newArgs);
Array.prototype.push.apply(events, newEvents);

if (Array.isArray(newEvents)) {
Array.prototype.push.apply(events, newEvents);
} else if (newEvents) {
events.push(newEvents);
}
};
}

Expand Down Expand Up @@ -156,32 +161,17 @@ describe('BeforeInputEventPlugin', function() {
// keyUp.
const Expected_Webkit = () => [
{type: ModuleCache.SyntheticCompositionEvent, data: {}},
{type: null},
{type: null},
{type: ModuleCache.SyntheticInputEvent, data: {data: 'A'}},
{type: null},
{type: null}, // textinput of A
{type: null},
{type: null}, // keyUp of 65
{type: null},
// textinput of A
// keyUp of 65
{type: ModuleCache.SyntheticInputEvent, data: {data: 'abc'}},
{type: null},
{type: null}, // textinput of abc
{type: null},
{type: null}, // keyUp of 32
{type: null},
// textinput of abc
// keyUp of 32
{type: ModuleCache.SyntheticInputEvent, data: {data: 'xyz'}},
{type: null},
{type: null}, // textinput of xyz
{type: null},
{type: null}, // keyUp of 32
// textinput of xyz
// keyUp of 32
{type: ModuleCache.SyntheticCompositionEvent, data: {data: 'Hello'}},
{type: null},

// Emoji test
{type: null},
{type: null},
{type: null},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can tell, type: null are all of the null values from extractEvents, which could be a permutation of:

[null, null] // (neither a composition or beforeinput event)
[composition, beforeInput]
[null, beforeInput]
[composition, null]

So my change makes this change one of:

null
composition
beforeinput
[composition, beforeinput]

null gets filtered out by the EventPluginHub.extractEvents. It just does a basic null check, so [null, null] gets through.

{type: ModuleCache.SyntheticInputEvent, data: {data: '\uD83D\uDE0A'}},
];

Expand All @@ -191,39 +181,22 @@ describe('BeforeInputEventPlugin', function() {
// element, not event data.
const Expected_IE11 = () => [
{type: ModuleCache.SyntheticCompositionEvent, data: {}},
{type: null},
{type: null},
{type: null}, // textInput of A
{type: null},
{type: null}, // textinput of A
{type: null},
{type: null}, // keyUp of 65
{type: null},
{type: null}, // textInput of abc
{type: null},
{type: null}, // textinput of abc

// textInput of A
// textinput of A
// keyUp of 65
// textInput of abc
// textinput of abc
// fallbackData should NOT be set at keyUp with any of END_KEYCODES
{type: null},
{type: null}, // keyUp of 32

{type: null},
{type: null}, // textInput of xyz
{type: null},
{type: null}, // textinput of xyz
{type: null},
{type: null}, // keyUp of 32

// keyUp of 32
// textInput of xyz
// textinput of xyz
// keyUp of 32
// fallbackData is retrieved from the element, which is XYZ,
// at a time of compositionend
{type: ModuleCache.SyntheticCompositionEvent, data: {}},
{type: ModuleCache.SyntheticInputEvent, data: {data: 'XYZ'}},

// Emoji test
{type: null},
{type: ModuleCache.SyntheticInputEvent, data: {data: '\uD83D\uDE0A'}},
{type: null},
{type: null},
];

function TestEditableReactComponent(Emulator, Scenario, ExpectedResult) {
Expand Down