Prevent BeforeInputPlugin from returning [null, null] (#11848)
The BeforeInputPlugin dispatches null elements in an array if composition or beforeInput events are not extracted. This causes a an extra array allocation, but more importantly creates null states in later event dispatch methods that are annoying to account for. This commit makes it so that BeforeInputPlugin never returns a null element inside an array.
This commit is contained in:
parent
8ec146c38e
commit
cc52e06b49
|
@ -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];
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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},
|
||||
{type: ModuleCache.SyntheticInputEvent, data: {data: '\uD83D\uDE0A'}},
|
||||
];
|
||||
|
||||
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue