{"body":"","parents":["c12c2c4c8c24e7b7456628e327c5d80ca4ec5377"],"commit":{"shortRevision":"31977d1bb3","authorName":"Dominic Gannaway","subject":"Create copy of Legacy event plugins for Modern system (#18637)","authorEmail":"trueadm@users.noreply.github.com","revision":"31977d1bb3eb1b144a45cafa133cfd17341490ab","authoredAt":"2020-04-16T16:09:05+01:00"},"files":[{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMClientInjection.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js"},{"status":"R100","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyBeforeInputEventPlugin-test.js","previousPath":"packages\/react-dom\/src\/events\/plugins\/__tests__\/BeforeInputEventPlugin-test.js"},{"status":"R100","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyChangeEventPlugin-test.js","previousPath":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js"},{"status":"R100","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyEnterLeaveEventPlugin-test.js","previousPath":"packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js"},{"status":"R100","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySelectEventPlugin-test.js","previousPath":"packages\/react-dom\/src\/events\/plugins\/__tests__\/SelectEventPlugin-test.js"},{"status":"R100","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySimpleEventPlugin-test.js","previousPath":"packages\/react-dom\/src\/events\/plugins\/__tests__\/SimpleEventPlugin-test.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernBeforeInputEventPlugin-test.internal.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.internal.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernEnterLeaveEventPlugin-test.internal.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.internal.js"},{"status":"A","path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSimpleEventPlugin-test.internal.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js b\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\nindex 8a96eabbda..507e9c4625 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMClientInjection.js\n@@ -12,11 +12,19 @@ import {\n getInstanceFromNode,\n getNodeFromInstance,\n } from '.\/ReactDOMComponentTree';\n-import BeforeInputEventPlugin from '..\/events\/plugins\/LegacyBeforeInputEventPlugin';\n-import ChangeEventPlugin from '..\/events\/plugins\/LegacyChangeEventPlugin';\n-import EnterLeaveEventPlugin from '..\/events\/plugins\/LegacyEnterLeaveEventPlugin';\n-import SelectEventPlugin from '..\/events\/plugins\/LegacySelectEventPlugin';\n-import SimpleEventPlugin from '..\/events\/plugins\/LegacySimpleEventPlugin';\n+\n+import LegacyBeforeInputEventPlugin from '..\/events\/plugins\/LegacyBeforeInputEventPlugin';\n+import LegacyChangeEventPlugin from '..\/events\/plugins\/LegacyChangeEventPlugin';\n+import LegacyEnterLeaveEventPlugin from '..\/events\/plugins\/LegacyEnterLeaveEventPlugin';\n+import LegacySelectEventPlugin from '..\/events\/plugins\/LegacySelectEventPlugin';\n+import LegacySimpleEventPlugin from '..\/events\/plugins\/LegacySimpleEventPlugin';\n+\n+import ModernBeforeInputEventPlugin from '..\/events\/plugins\/ModernBeforeInputEventPlugin';\n+import ModernChangeEventPlugin from '..\/events\/plugins\/ModernChangeEventPlugin';\n+import ModernEnterLeaveEventPlugin from '..\/events\/plugins\/ModernEnterLeaveEventPlugin';\n+import ModernSelectEventPlugin from '..\/events\/plugins\/ModernSelectEventPlugin';\n+import ModernSimpleEventPlugin from '..\/events\/plugins\/ModernSimpleEventPlugin';\n+\n import {\n injectEventPluginOrder,\n injectEventPluginsByName,\n@@ -26,11 +34,11 @@ import {enableModernEventSystem} from 'shared\/ReactFeatureFlags';\n \n if (enableModernEventSystem) {\n injectEventPlugins([\n- SimpleEventPlugin,\n- EnterLeaveEventPlugin,\n- ChangeEventPlugin,\n- SelectEventPlugin,\n- BeforeInputEventPlugin,\n+ ModernSimpleEventPlugin,\n+ ModernEnterLeaveEventPlugin,\n+ ModernChangeEventPlugin,\n+ ModernSelectEventPlugin,\n+ ModernBeforeInputEventPlugin,\n ]);\n } else {\n \/**\n@@ -65,10 +73,10 @@ if (enableModernEventSystem) {\n * them).\n *\/\n injectEventPluginsByName({\n- SimpleEventPlugin: SimpleEventPlugin,\n- EnterLeaveEventPlugin: EnterLeaveEventPlugin,\n- ChangeEventPlugin: ChangeEventPlugin,\n- SelectEventPlugin: SelectEventPlugin,\n- BeforeInputEventPlugin: BeforeInputEventPlugin,\n+ SimpleEventPlugin: LegacySimpleEventPlugin,\n+ EnterLeaveEventPlugin: LegacyEnterLeaveEventPlugin,\n+ ChangeEventPlugin: LegacyChangeEventPlugin,\n+ SelectEventPlugin: LegacySelectEventPlugin,\n+ BeforeInputEventPlugin: LegacyBeforeInputEventPlugin,\n });\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js\nnew file mode 100644\nindex 0000000000..96685f7c81\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernBeforeInputEventPlugin.js\n@@ -0,0 +1,498 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import type {TopLevelType} from 'legacy-events\/TopLevelEventTypes';\n+\n+import {canUseDOM} from 'shared\/ExecutionEnvironment';\n+\n+import {\n+ TOP_BLUR,\n+ TOP_COMPOSITION_START,\n+ TOP_COMPOSITION_END,\n+ TOP_COMPOSITION_UPDATE,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_PRESS,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ TOP_TEXT_INPUT,\n+ TOP_PASTE,\n+} from '..\/DOMTopLevelEventTypes';\n+import {\n+ getData as FallbackCompositionStateGetData,\n+ initialize as FallbackCompositionStateInitialize,\n+ reset as FallbackCompositionStateReset,\n+} from '..\/FallbackCompositionState';\n+import SyntheticCompositionEvent from '..\/SyntheticCompositionEvent';\n+import SyntheticInputEvent from '..\/SyntheticInputEvent';\n+import accumulateTwoPhaseListeners from '..\/accumulateTwoPhaseListeners';\n+\n+const END_KEYCODES = [9, 13, 27, 32]; \/\/ Tab, Return, Esc, Space\n+const START_KEYCODE = 229;\n+\n+const canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;\n+\n+let documentMode = null;\n+if (canUseDOM && 'documentMode' in document) {\n+ documentMode = document.documentMode;\n+}\n+\n+\/\/ Webkit offers a very useful `textInput` event that can be used to\n+\/\/ directly represent `beforeInput`. The IE `textinput` event is not as\n+\/\/ useful, so we don't use it.\n+const canUseTextInputEvent =\n+ canUseDOM && 'TextEvent' in window && !documentMode;\n+\n+\/\/ In IE9+, we have access to composition events, but the data supplied\n+\/\/ by the native compositionend event may be incorrect. Japanese ideographic\n+\/\/ spaces, for instance (\\u3000) are not recorded correctly.\n+const useFallbackCompositionData =\n+ canUseDOM &&\n+ (!canUseCompositionEvent ||\n+ (documentMode && documentMode > 8 && documentMode <= 11));\n+\n+const SPACEBAR_CODE = 32;\n+const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);\n+\n+\/\/ Events and their corresponding property names.\n+const eventTypes = {\n+ beforeInput: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onBeforeInput',\n+ captured: 'onBeforeInputCapture',\n+ },\n+ dependencies: [\n+ TOP_COMPOSITION_END,\n+ TOP_KEY_PRESS,\n+ TOP_TEXT_INPUT,\n+ TOP_PASTE,\n+ ],\n+ },\n+ compositionEnd: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onCompositionEnd',\n+ captured: 'onCompositionEndCapture',\n+ },\n+ dependencies: [\n+ TOP_BLUR,\n+ TOP_COMPOSITION_END,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_PRESS,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ ],\n+ },\n+ compositionStart: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onCompositionStart',\n+ captured: 'onCompositionStartCapture',\n+ },\n+ dependencies: [\n+ TOP_BLUR,\n+ TOP_COMPOSITION_START,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_PRESS,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ ],\n+ },\n+ compositionUpdate: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onCompositionUpdate',\n+ captured: 'onCompositionUpdateCapture',\n+ },\n+ dependencies: [\n+ TOP_BLUR,\n+ TOP_COMPOSITION_UPDATE,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_PRESS,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ ],\n+ },\n+};\n+\n+\/\/ Track whether we've ever handled a keypress on the space key.\n+let hasSpaceKeypress = false;\n+\n+\/**\n+ * Return whether a native keypress event is assumed to be a command.\n+ * This is required because Firefox fires `keypress` events for key commands\n+ * (cut, copy, select-all, etc.) even though no character is inserted.\n+ *\/\n+function isKeypressCommand(nativeEvent) {\n+ return (\n+ (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&\n+ \/\/ ctrlKey && altKey is equivalent to AltGr, and is not a command.\n+ !(nativeEvent.ctrlKey && nativeEvent.altKey)\n+ );\n+}\n+\n+\/**\n+ * Translate native top level events into event types.\n+ *\n+ * @param {string} topLevelType\n+ * @return {object}\n+ *\/\n+function getCompositionEventType(topLevelType) {\n+ switch (topLevelType) {\n+ case TOP_COMPOSITION_START:\n+ return eventTypes.compositionStart;\n+ case TOP_COMPOSITION_END:\n+ return eventTypes.compositionEnd;\n+ case TOP_COMPOSITION_UPDATE:\n+ return eventTypes.compositionUpdate;\n+ }\n+}\n+\n+\/**\n+ * Does our fallback best-guess model think this event signifies that\n+ * composition has begun?\n+ *\n+ * @param {string} topLevelType\n+ * @param {object} nativeEvent\n+ * @return {boolean}\n+ *\/\n+function isFallbackCompositionStart(topLevelType, nativeEvent) {\n+ return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;\n+}\n+\n+\/**\n+ * Does our fallback mode think that this event is the end of composition?\n+ *\n+ * @param {string} topLevelType\n+ * @param {object} nativeEvent\n+ * @return {boolean}\n+ *\/\n+function isFallbackCompositionEnd(topLevelType, nativeEvent) {\n+ switch (topLevelType) {\n+ case TOP_KEY_UP:\n+ \/\/ Command keys insert or clear IME input.\n+ return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;\n+ case TOP_KEY_DOWN:\n+ \/\/ Expect IME keyCode on each keydown. If we get any other\n+ \/\/ code we must have exited earlier.\n+ return nativeEvent.keyCode !== START_KEYCODE;\n+ case TOP_KEY_PRESS:\n+ case TOP_MOUSE_DOWN:\n+ case TOP_BLUR:\n+ \/\/ Events are not possible without cancelling IME.\n+ return true;\n+ default:\n+ return false;\n+ }\n+}\n+\n+\/**\n+ * Google Input Tools provides composition data via a CustomEvent,\n+ * with the `data` property populated in the `detail` object. If this\n+ * is available on the event object, use it. If not, this is a plain\n+ * composition event and we have nothing special to extract.\n+ *\n+ * @param {object} nativeEvent\n+ * @return {?string}\n+ *\/\n+function getDataFromCustomEvent(nativeEvent) {\n+ const detail = nativeEvent.detail;\n+ if (typeof detail === 'object' && 'data' in detail) {\n+ return detail.data;\n+ }\n+ return null;\n+}\n+\n+\/**\n+ * Check if a composition event was triggered by Korean IME.\n+ * Our fallback mode does not work well with IE's Korean IME,\n+ * so just use native composition events when Korean IME is used.\n+ * Although CompositionEvent.locale property is deprecated,\n+ * it is available in IE, where our fallback mode is enabled.\n+ *\n+ * @param {object} nativeEvent\n+ * @return {boolean}\n+ *\/\n+function isUsingKoreanIME(nativeEvent) {\n+ return nativeEvent.locale === 'ko';\n+}\n+\n+\/\/ Track the current IME composition status, if any.\n+let isComposing = false;\n+\n+\/**\n+ * @return {?object} A SyntheticCompositionEvent.\n+ *\/\n+function extractCompositionEvent(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+) {\n+ let eventType;\n+ let fallbackData;\n+\n+ if (canUseCompositionEvent) {\n+ eventType = getCompositionEventType(topLevelType);\n+ } else if (!isComposing) {\n+ if (isFallbackCompositionStart(topLevelType, nativeEvent)) {\n+ eventType = eventTypes.compositionStart;\n+ }\n+ } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {\n+ eventType = eventTypes.compositionEnd;\n+ }\n+\n+ if (!eventType) {\n+ return null;\n+ }\n+\n+ if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {\n+ \/\/ The current composition is stored statically and must not be\n+ \/\/ overwritten while composition continues.\n+ if (!isComposing && eventType === eventTypes.compositionStart) {\n+ isComposing = FallbackCompositionStateInitialize(nativeEventTarget);\n+ } else if (eventType === eventTypes.compositionEnd) {\n+ if (isComposing) {\n+ fallbackData = FallbackCompositionStateGetData();\n+ }\n+ }\n+ }\n+\n+ const event = SyntheticCompositionEvent.getPooled(\n+ eventType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ if (fallbackData) {\n+ \/\/ Inject data generated from fallback path into the synthetic event.\n+ \/\/ This matches the property of native CompositionEventInterface.\n+ event.data = fallbackData;\n+ } else {\n+ const customData = getDataFromCustomEvent(nativeEvent);\n+ if (customData !== null) {\n+ event.data = customData;\n+ }\n+ }\n+\n+ accumulateTwoPhaseListeners(event);\n+ return event;\n+}\n+\n+\/**\n+ * @param {TopLevelType} topLevelType Number from `TopLevelType`.\n+ * @param {object} nativeEvent Native browser event.\n+ * @return {?string} The string corresponding to this `beforeInput` event.\n+ *\/\n+function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n+ switch (topLevelType) {\n+ case TOP_COMPOSITION_END:\n+ return getDataFromCustomEvent(nativeEvent);\n+ case TOP_KEY_PRESS:\n+ \/**\n+ * If native `textInput` events are available, our goal is to make\n+ * use of them. However, there is a special case: the spacebar key.\n+ * In Webkit, preventing default on a spacebar `textInput` event\n+ * cancels character insertion, but it *also* causes the browser\n+ * to fall back to its default spacebar behavior of scrolling the\n+ * page.\n+ *\n+ * Tracking at:\n+ * https:\/\/code.google.com\/p\/chromium\/issues\/detail?id=355103\n+ *\n+ * To avoid this issue, use the keypress event as if no `textInput`\n+ * event is available.\n+ *\/\n+ const which = nativeEvent.which;\n+ if (which !== SPACEBAR_CODE) {\n+ return null;\n+ }\n+\n+ hasSpaceKeypress = true;\n+ return SPACEBAR_CHAR;\n+\n+ case TOP_TEXT_INPUT:\n+ \/\/ Record the characters to be added to the DOM.\n+ const chars = nativeEvent.data;\n+\n+ \/\/ If it's a spacebar character, assume that we have already handled\n+ \/\/ it at the keypress level and bail immediately. Android Chrome\n+ \/\/ doesn't give us keycodes, so we need to ignore it.\n+ if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {\n+ return null;\n+ }\n+\n+ return chars;\n+\n+ default:\n+ \/\/ For other native event types, do nothing.\n+ return null;\n+ }\n+}\n+\n+\/**\n+ * For browsers that do not provide the `textInput` event, extract the\n+ * appropriate string to use for SyntheticInputEvent.\n+ *\n+ * @param {number} topLevelType Number from `TopLevelEventTypes`.\n+ * @param {object} nativeEvent Native browser event.\n+ * @return {?string} The fallback string for this `beforeInput` event.\n+ *\/\n+function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {\n+ \/\/ If we are currently composing (IME) and using a fallback to do so,\n+ \/\/ try to extract the composed characters from the fallback object.\n+ \/\/ If composition event is available, we extract a string only at\n+ \/\/ compositionevent, otherwise extract it at fallback events.\n+ if (isComposing) {\n+ if (\n+ topLevelType === TOP_COMPOSITION_END ||\n+ (!canUseCompositionEvent &&\n+ isFallbackCompositionEnd(topLevelType, nativeEvent))\n+ ) {\n+ const chars = FallbackCompositionStateGetData();\n+ FallbackCompositionStateReset();\n+ isComposing = false;\n+ return chars;\n+ }\n+ return null;\n+ }\n+\n+ switch (topLevelType) {\n+ case TOP_PASTE:\n+ \/\/ If a paste event occurs after a keypress, throw out the input\n+ \/\/ chars. Paste events should not lead to BeforeInput events.\n+ return null;\n+ case TOP_KEY_PRESS:\n+ \/**\n+ * As of v27, Firefox may fire keypress events even when no character\n+ * will be inserted. A few possibilities:\n+ *\n+ * - `which` is `0`. Arrow keys, Esc key, etc.\n+ *\n+ * - `which` is the pressed key code, but no char is available.\n+ * Ex: 'AltGr + d` in Polish. There is no modified character for\n+ * this key combination and no character is inserted into the\n+ * document, but FF fires the keypress for char code `100` anyway.\n+ * No `input` event will occur.\n+ *\n+ * - `which` is the pressed key code, but a command combination is\n+ * being used. Ex: `Cmd+C`. No character is inserted, and no\n+ * `input` event will occur.\n+ *\/\n+ if (!isKeypressCommand(nativeEvent)) {\n+ \/\/ IE fires the `keypress` event when a user types an emoji via\n+ \/\/ Touch keyboard of Windows. In such a case, the `char` property\n+ \/\/ holds an emoji character like `\\uD83D\\uDE0A`. Because its length\n+ \/\/ is 2, the property `which` does not represent an emoji correctly.\n+ \/\/ In such a case, we directly return the `char` property instead of\n+ \/\/ using `which`.\n+ if (nativeEvent.char && nativeEvent.char.length > 1) {\n+ return nativeEvent.char;\n+ } else if (nativeEvent.which) {\n+ return String.fromCharCode(nativeEvent.which);\n+ }\n+ }\n+ return null;\n+ case TOP_COMPOSITION_END:\n+ return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)\n+ ? null\n+ : nativeEvent.data;\n+ default:\n+ return null;\n+ }\n+}\n+\n+\/**\n+ * Extract a SyntheticInputEvent for `beforeInput`, based on either native\n+ * `textInput` or fallback behavior.\n+ *\n+ * @return {?object} A SyntheticInputEvent.\n+ *\/\n+function extractBeforeInputEvent(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+) {\n+ let chars;\n+\n+ if (canUseTextInputEvent) {\n+ chars = getNativeBeforeInputChars(topLevelType, nativeEvent);\n+ } else {\n+ chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);\n+ }\n+\n+ \/\/ If no characters are being inserted, no BeforeInput event should\n+ \/\/ be fired.\n+ if (!chars) {\n+ return null;\n+ }\n+\n+ const event = SyntheticInputEvent.getPooled(\n+ eventTypes.beforeInput,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ event.data = chars;\n+ accumulateTwoPhaseListeners(event);\n+ return event;\n+}\n+\n+\/**\n+ * Create an `onBeforeInput` event to match\n+ * http:\/\/www.w3.org\/TR\/2013\/WD-DOM-Level-3-Events-20131105\/#events-inputevents.\n+ *\n+ * This event plugin is based on the native `textInput` event\n+ * available in Chrome, Safari, Opera, and IE. This event fires after\n+ * `onKeyPress` and `onCompositionEnd`, but before `onInput`.\n+ *\n+ * `beforeInput` is spec'd but not implemented in any browsers, and\n+ * the `input` event does not provide any useful information about what has\n+ * actually been added, contrary to the spec. Thus, `textInput` is the best\n+ * available event to identify the characters that have actually been inserted\n+ * into the target node.\n+ *\n+ * This plugin is also responsible for emitting `composition` events, thus\n+ * allowing us to share composition fallback code for both `beforeInput` and\n+ * `composition` event types.\n+ *\/\n+const BeforeInputEventPlugin = {\n+ eventTypes: eventTypes,\n+\n+ extractEvents: function(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ ) {\n+ const composition = extractCompositionEvent(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ const beforeInput = extractBeforeInputEvent(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ if (composition === null) {\n+ return beforeInput;\n+ }\n+\n+ if (beforeInput === null) {\n+ return composition;\n+ }\n+\n+ return [composition, beforeInput];\n+ },\n+};\n+\n+export default BeforeInputEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\nnew file mode 100644\nindex 0000000000..dbe3685f36\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\n@@ -0,0 +1,318 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import {runEventsInBatch} from 'legacy-events\/EventBatching';\n+import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n+import isTextInputElement from '..\/isTextInputElement';\n+import {canUseDOM} from 'shared\/ExecutionEnvironment';\n+\n+import {\n+ TOP_BLUR,\n+ TOP_CHANGE,\n+ TOP_CLICK,\n+ TOP_FOCUS,\n+ TOP_INPUT,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_UP,\n+ TOP_SELECTION_CHANGE,\n+} from '..\/DOMTopLevelEventTypes';\n+import getEventTarget from '..\/getEventTarget';\n+import isEventSupported from '..\/isEventSupported';\n+import {getNodeFromInstance} from '..\/..\/client\/ReactDOMComponentTree';\n+import {updateValueIfChanged} from '..\/..\/client\/inputValueTracking';\n+import {setDefaultValue} from '..\/..\/client\/ReactDOMInput';\n+import {enqueueStateRestore} from '..\/ReactDOMControlledComponent';\n+\n+import {\n+ disableInputAttributeSyncing,\n+ enableModernEventSystem,\n+} from 'shared\/ReactFeatureFlags';\n+import accumulateTwoPhaseListeners from '..\/accumulateTwoPhaseListeners';\n+import {batchedUpdates} from '..\/ReactDOMUpdateBatching';\n+import {dispatchEventsInBatch} from '..\/DOMModernPluginEventSystem';\n+\n+const eventTypes = {\n+ change: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onChange',\n+ captured: 'onChangeCapture',\n+ },\n+ dependencies: [\n+ TOP_BLUR,\n+ TOP_CHANGE,\n+ TOP_CLICK,\n+ TOP_FOCUS,\n+ TOP_INPUT,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_UP,\n+ TOP_SELECTION_CHANGE,\n+ ],\n+ },\n+};\n+\n+function createAndAccumulateChangeEvent(inst, nativeEvent, target) {\n+ const event = SyntheticEvent.getPooled(\n+ eventTypes.change,\n+ inst,\n+ nativeEvent,\n+ target,\n+ );\n+ event.type = 'change';\n+ \/\/ Flag this event loop as needing state restore.\n+ enqueueStateRestore(target);\n+ accumulateTwoPhaseListeners(event);\n+ return event;\n+}\n+\/**\n+ * For IE shims\n+ *\/\n+let activeElement = null;\n+let activeElementInst = null;\n+\n+\/**\n+ * SECTION: handle `change` event\n+ *\/\n+function shouldUseChangeEvent(elem) {\n+ const nodeName = elem.nodeName && elem.nodeName.toLowerCase();\n+ return (\n+ nodeName === 'select' || (nodeName === 'input' && elem.type === 'file')\n+ );\n+}\n+\n+function manualDispatchChangeEvent(nativeEvent) {\n+ const event = createAndAccumulateChangeEvent(\n+ activeElementInst,\n+ nativeEvent,\n+ getEventTarget(nativeEvent),\n+ );\n+\n+ \/\/ If change and propertychange bubbled, we'd just bind to it like all the\n+ \/\/ other events and have it go through ReactBrowserEventEmitter. Since it\n+ \/\/ doesn't, we manually listen for the events and so we have to enqueue and\n+ \/\/ process the abstract event manually.\n+ \/\/\n+ \/\/ Batching is necessary here in order to ensure that all event handlers run\n+ \/\/ before the next rerender (including event handlers attached to ancestor\n+ \/\/ elements instead of directly on the input). Without this, controlled\n+ \/\/ components don't work properly in conjunction with event bubbling because\n+ \/\/ the component is rerendered and the value reverted before all the event\n+ \/\/ handlers can run. See https:\/\/github.com\/facebook\/react\/issues\/708.\n+ batchedUpdates(runEventInBatch, event);\n+}\n+\n+function runEventInBatch(event) {\n+ if (enableModernEventSystem) {\n+ dispatchEventsInBatch([event]);\n+ } else {\n+ runEventsInBatch(event);\n+ }\n+}\n+\n+function getInstIfValueChanged(targetInst) {\n+ const targetNode = getNodeFromInstance(targetInst);\n+ if (updateValueIfChanged(targetNode)) {\n+ return targetInst;\n+ }\n+}\n+\n+function getTargetInstForChangeEvent(topLevelType, targetInst) {\n+ if (topLevelType === TOP_CHANGE) {\n+ return targetInst;\n+ }\n+}\n+\n+\/**\n+ * SECTION: handle `input` event\n+ *\/\n+let isInputEventSupported = false;\n+if (canUseDOM) {\n+ \/\/ IE9 claims to support the input event but fails to trigger it when\n+ \/\/ deleting text, so we ignore its input events.\n+ isInputEventSupported =\n+ isEventSupported('input') &&\n+ (!document.documentMode || document.documentMode > 9);\n+}\n+\n+\/**\n+ * (For IE <=9) Starts tracking propertychange events on the passed-in element\n+ * and override the value property so that we can distinguish user events from\n+ * value changes in JS.\n+ *\/\n+function startWatchingForValueChange(target, targetInst) {\n+ activeElement = target;\n+ activeElementInst = targetInst;\n+ activeElement.attachEvent('onpropertychange', handlePropertyChange);\n+}\n+\n+\/**\n+ * (For IE <=9) Removes the event listeners from the currently-tracked element,\n+ * if any exists.\n+ *\/\n+function stopWatchingForValueChange() {\n+ if (!activeElement) {\n+ return;\n+ }\n+ activeElement.detachEvent('onpropertychange', handlePropertyChange);\n+ activeElement = null;\n+ activeElementInst = null;\n+}\n+\n+\/**\n+ * (For IE <=9) Handles a propertychange event, sending a `change` event if\n+ * the value of the active element has changed.\n+ *\/\n+function handlePropertyChange(nativeEvent) {\n+ if (nativeEvent.propertyName !== 'value') {\n+ return;\n+ }\n+ if (getInstIfValueChanged(activeElementInst)) {\n+ manualDispatchChangeEvent(nativeEvent);\n+ }\n+}\n+\n+function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {\n+ if (topLevelType === TOP_FOCUS) {\n+ \/\/ In IE9, propertychange fires for most input events but is buggy and\n+ \/\/ doesn't fire when text is deleted, but conveniently, selectionchange\n+ \/\/ appears to fire in all of the remaining cases so we catch those and\n+ \/\/ forward the event if the value has changed\n+ \/\/ In either case, we don't want to call the event handler if the value\n+ \/\/ is changed from JS so we redefine a setter for `.value` that updates\n+ \/\/ our activeElementValue variable, allowing us to ignore those changes\n+ \/\/\n+ \/\/ stopWatching() should be a noop here but we call it just in case we\n+ \/\/ missed a blur event somehow.\n+ stopWatchingForValueChange();\n+ startWatchingForValueChange(target, targetInst);\n+ } else if (topLevelType === TOP_BLUR) {\n+ stopWatchingForValueChange();\n+ }\n+}\n+\n+\/\/ For IE8 and IE9.\n+function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {\n+ if (\n+ topLevelType === TOP_SELECTION_CHANGE ||\n+ topLevelType === TOP_KEY_UP ||\n+ topLevelType === TOP_KEY_DOWN\n+ ) {\n+ \/\/ On the selectionchange event, the target is just document which isn't\n+ \/\/ helpful for us so just check activeElement instead.\n+ \/\/\n+ \/\/ 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire\n+ \/\/ propertychange on the first input event after setting `value` from a\n+ \/\/ script and fires only keydown, keypress, keyup. Catching keyup usually\n+ \/\/ gets it and catching keydown lets us fire an event for the first\n+ \/\/ keystroke if user does a key repeat (it'll be a little delayed: right\n+ \/\/ before the second keystroke). Other input methods (e.g., paste) seem to\n+ \/\/ fire selectionchange normally.\n+ return getInstIfValueChanged(activeElementInst);\n+ }\n+}\n+\n+\/**\n+ * SECTION: handle `click` event\n+ *\/\n+function shouldUseClickEvent(elem) {\n+ \/\/ Use the `click` event to detect changes to checkbox and radio inputs.\n+ \/\/ This approach works across all browsers, whereas `change` does not fire\n+ \/\/ until `blur` in IE8.\n+ const nodeName = elem.nodeName;\n+ return (\n+ nodeName &&\n+ nodeName.toLowerCase() === 'input' &&\n+ (elem.type === 'checkbox' || elem.type === 'radio')\n+ );\n+}\n+\n+function getTargetInstForClickEvent(topLevelType, targetInst) {\n+ if (topLevelType === TOP_CLICK) {\n+ return getInstIfValueChanged(targetInst);\n+ }\n+}\n+\n+function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {\n+ if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {\n+ return getInstIfValueChanged(targetInst);\n+ }\n+}\n+\n+function handleControlledInputBlur(node) {\n+ const state = node._wrapperState;\n+\n+ if (!state || !state.controlled || node.type !== 'number') {\n+ return;\n+ }\n+\n+ if (!disableInputAttributeSyncing) {\n+ \/\/ If controlled, assign the value attribute to the current value on blur\n+ setDefaultValue(node, 'number', node.value);\n+ }\n+}\n+\n+\/**\n+ * This plugin creates an `onChange` event that normalizes change events\n+ * across form elements. This event fires at a time when it's possible to\n+ * change the element's value without seeing a flicker.\n+ *\n+ * Supported elements are:\n+ * - input (see `isTextInputElement`)\n+ * - textarea\n+ * - select\n+ *\/\n+const ChangeEventPlugin = {\n+ eventTypes: eventTypes,\n+\n+ _isInputEventSupported: isInputEventSupported,\n+\n+ extractEvents: function(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ ) {\n+ const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;\n+\n+ let getTargetInstFunc, handleEventFunc;\n+ if (shouldUseChangeEvent(targetNode)) {\n+ getTargetInstFunc = getTargetInstForChangeEvent;\n+ } else if (isTextInputElement(targetNode)) {\n+ if (isInputEventSupported) {\n+ getTargetInstFunc = getTargetInstForInputOrChangeEvent;\n+ } else {\n+ getTargetInstFunc = getTargetInstForInputEventPolyfill;\n+ handleEventFunc = handleEventsForInputEventPolyfill;\n+ }\n+ } else if (shouldUseClickEvent(targetNode)) {\n+ getTargetInstFunc = getTargetInstForClickEvent;\n+ }\n+\n+ if (getTargetInstFunc) {\n+ const inst = getTargetInstFunc(topLevelType, targetInst);\n+ if (inst) {\n+ const event = createAndAccumulateChangeEvent(\n+ inst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+ return event;\n+ }\n+ }\n+\n+ if (handleEventFunc) {\n+ handleEventFunc(topLevelType, targetNode, targetInst);\n+ }\n+\n+ \/\/ When blurring, set the value attribute for number inputs\n+ if (topLevelType === TOP_BLUR) {\n+ handleControlledInputBlur(targetNode);\n+ }\n+ },\n+};\n+\n+export default ChangeEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\nnew file mode 100644\nindex 0000000000..cb51ed4546\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\n@@ -0,0 +1,192 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import {\n+ TOP_MOUSE_OUT,\n+ TOP_MOUSE_OVER,\n+ TOP_POINTER_OUT,\n+ TOP_POINTER_OVER,\n+} from '..\/DOMTopLevelEventTypes';\n+import {\n+ IS_REPLAYED,\n+ IS_FIRST_ANCESTOR,\n+} from 'react-dom\/src\/events\/EventSystemFlags';\n+import SyntheticMouseEvent from '..\/SyntheticMouseEvent';\n+import SyntheticPointerEvent from '..\/SyntheticPointerEvent';\n+import {\n+ getClosestInstanceFromNode,\n+ getNodeFromInstance,\n+} from '..\/..\/client\/ReactDOMComponentTree';\n+import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n+import {getNearestMountedFiber} from 'react-reconciler\/src\/ReactFiberTreeReflection';\n+import {enableModernEventSystem} from 'shared\/ReactFeatureFlags';\n+import accumulateEnterLeaveListeners from '..\/accumulateEnterLeaveListeners';\n+\n+const eventTypes = {\n+ mouseEnter: {\n+ registrationName: 'onMouseEnter',\n+ dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER],\n+ },\n+ mouseLeave: {\n+ registrationName: 'onMouseLeave',\n+ dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER],\n+ },\n+ pointerEnter: {\n+ registrationName: 'onPointerEnter',\n+ dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER],\n+ },\n+ pointerLeave: {\n+ registrationName: 'onPointerLeave',\n+ dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER],\n+ },\n+};\n+\n+const EnterLeaveEventPlugin = {\n+ eventTypes: eventTypes,\n+\n+ \/**\n+ * For almost every interaction we care about, there will be both a top-level\n+ * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that\n+ * we do not extract duplicate events. However, moving the mouse into the\n+ * browser from outside will not fire a `mouseout` event. In this case, we use\n+ * the `mouseover` top-level event.\n+ *\/\n+ extractEvents: function(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ ) {\n+ const isOverEvent =\n+ topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;\n+ const isOutEvent =\n+ topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;\n+\n+ if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {\n+ const related = nativeEvent.relatedTarget || nativeEvent.fromElement;\n+ if (related) {\n+ if (enableModernEventSystem) {\n+ \/\/ Due to the fact we don't add listeners to the document with the\n+ \/\/ modern event system and instead attach listeners to roots, we\n+ \/\/ need to handle the over event case. To ensure this, we just need to\n+ \/\/ make sure the node that we're coming from is managed by React.\n+ const inst = getClosestInstanceFromNode(related);\n+ if (inst !== null) {\n+ return null;\n+ }\n+ } else {\n+ \/\/ If this is an over event with a target, then we've already dispatched\n+ \/\/ the event in the out event of the other target. If this is replayed,\n+ \/\/ then it's because we couldn't dispatch against this target previously\n+ \/\/ so we have to do it now instead.\n+ return null;\n+ }\n+ }\n+ }\n+\n+ if (!isOutEvent && !isOverEvent) {\n+ \/\/ Must not be a mouse or pointer in or out - ignoring.\n+ return null;\n+ }\n+\n+ let win;\n+ if (nativeEventTarget.window === nativeEventTarget) {\n+ \/\/ `nativeEventTarget` is probably a window object.\n+ win = nativeEventTarget;\n+ } else {\n+ \/\/ TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.\n+ const doc = nativeEventTarget.ownerDocument;\n+ if (doc) {\n+ win = doc.defaultView || doc.parentWindow;\n+ } else {\n+ win = window;\n+ }\n+ }\n+\n+ let from;\n+ let to;\n+ if (isOutEvent) {\n+ from = targetInst;\n+ const related = nativeEvent.relatedTarget || nativeEvent.toElement;\n+ to = related ? getClosestInstanceFromNode(related) : null;\n+ if (to !== null) {\n+ const nearestMounted = getNearestMountedFiber(to);\n+ if (\n+ to !== nearestMounted ||\n+ (to.tag !== HostComponent && to.tag !== HostText)\n+ ) {\n+ to = null;\n+ }\n+ }\n+ } else {\n+ \/\/ Moving to a node from outside the window.\n+ from = null;\n+ to = targetInst;\n+ }\n+\n+ if (from === to) {\n+ \/\/ Nothing pertains to our managed components.\n+ return null;\n+ }\n+\n+ let eventInterface, leaveEventType, enterEventType, eventTypePrefix;\n+\n+ if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {\n+ eventInterface = SyntheticMouseEvent;\n+ leaveEventType = eventTypes.mouseLeave;\n+ enterEventType = eventTypes.mouseEnter;\n+ eventTypePrefix = 'mouse';\n+ } else if (\n+ topLevelType === TOP_POINTER_OUT ||\n+ topLevelType === TOP_POINTER_OVER\n+ ) {\n+ eventInterface = SyntheticPointerEvent;\n+ leaveEventType = eventTypes.pointerLeave;\n+ enterEventType = eventTypes.pointerEnter;\n+ eventTypePrefix = 'pointer';\n+ }\n+\n+ const fromNode = from == null ? win : getNodeFromInstance(from);\n+ const toNode = to == null ? win : getNodeFromInstance(to);\n+\n+ const leave = eventInterface.getPooled(\n+ leaveEventType,\n+ from,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+ leave.type = eventTypePrefix + 'leave';\n+ leave.target = fromNode;\n+ leave.relatedTarget = toNode;\n+\n+ const enter = eventInterface.getPooled(\n+ enterEventType,\n+ to,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+ enter.type = eventTypePrefix + 'enter';\n+ enter.target = toNode;\n+ enter.relatedTarget = fromNode;\n+\n+ accumulateEnterLeaveListeners(leave, enter, from, to);\n+\n+ if (!enableModernEventSystem) {\n+ \/\/ If we are not processing the first ancestor, then we\n+ \/\/ should not process the same nativeEvent again, as we\n+ \/\/ will have already processed it in the first ancestor.\n+ if ((eventSystemFlags & IS_FIRST_ANCESTOR) === 0) {\n+ return [leave];\n+ }\n+ }\n+\n+ return [leave, enter];\n+ },\n+};\n+\n+export default EnterLeaveEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\nnew file mode 100644\nindex 0000000000..0d1266b0bc\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSelectEventPlugin.js\n@@ -0,0 +1,234 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+import {canUseDOM} from 'shared\/ExecutionEnvironment';\n+import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n+import isTextInputElement from '..\/isTextInputElement';\n+import shallowEqual from 'shared\/shallowEqual';\n+\n+import {\n+ TOP_BLUR,\n+ TOP_CONTEXT_MENU,\n+ TOP_DRAG_END,\n+ TOP_FOCUS,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ TOP_MOUSE_UP,\n+ TOP_SELECTION_CHANGE,\n+} from '..\/DOMTopLevelEventTypes';\n+import getActiveElement from '..\/..\/client\/getActiveElement';\n+import {getNodeFromInstance} from '..\/..\/client\/ReactDOMComponentTree';\n+import {hasSelectionCapabilities} from '..\/..\/client\/ReactInputSelection';\n+import {DOCUMENT_NODE} from '..\/..\/shared\/HTMLNodeType';\n+import {isListeningToAllDependencies} from '..\/DOMEventListenerMap';\n+import accumulateTwoPhaseListeners from '..\/accumulateTwoPhaseListeners';\n+\n+const skipSelectionChangeEvent =\n+ canUseDOM && 'documentMode' in document && document.documentMode <= 11;\n+\n+const eventTypes = {\n+ select: {\n+ phasedRegistrationNames: {\n+ bubbled: 'onSelect',\n+ captured: 'onSelectCapture',\n+ },\n+ dependencies: [\n+ TOP_BLUR,\n+ TOP_CONTEXT_MENU,\n+ TOP_DRAG_END,\n+ TOP_FOCUS,\n+ TOP_KEY_DOWN,\n+ TOP_KEY_UP,\n+ TOP_MOUSE_DOWN,\n+ TOP_MOUSE_UP,\n+ TOP_SELECTION_CHANGE,\n+ ],\n+ },\n+};\n+\n+let activeElement = null;\n+let activeElementInst = null;\n+let lastSelection = null;\n+let mouseDown = false;\n+\n+\/**\n+ * Get an object which is a unique representation of the current selection.\n+ *\n+ * The return value will not be consistent across nodes or browsers, but\n+ * two identical selections on the same node will return identical objects.\n+ *\n+ * @param {DOMElement} node\n+ * @return {object}\n+ *\/\n+function getSelection(node) {\n+ if ('selectionStart' in node && hasSelectionCapabilities(node)) {\n+ return {\n+ start: node.selectionStart,\n+ end: node.selectionEnd,\n+ };\n+ } else {\n+ const win =\n+ (node.ownerDocument && node.ownerDocument.defaultView) || window;\n+ const selection = win.getSelection();\n+ return {\n+ anchorNode: selection.anchorNode,\n+ anchorOffset: selection.anchorOffset,\n+ focusNode: selection.focusNode,\n+ focusOffset: selection.focusOffset,\n+ };\n+ }\n+}\n+\n+\/**\n+ * Get document associated with the event target.\n+ *\n+ * @param {object} nativeEventTarget\n+ * @return {Document}\n+ *\/\n+function getEventTargetDocument(eventTarget) {\n+ return eventTarget.window === eventTarget\n+ ? eventTarget.document\n+ : eventTarget.nodeType === DOCUMENT_NODE\n+ ? eventTarget\n+ : eventTarget.ownerDocument;\n+}\n+\n+\/**\n+ * Poll selection to see whether it's changed.\n+ *\n+ * @param {object} nativeEvent\n+ * @param {object} nativeEventTarget\n+ * @return {?SyntheticEvent}\n+ *\/\n+function constructSelectEvent(nativeEvent, nativeEventTarget) {\n+ \/\/ Ensure we have the right element, and that the user is not dragging a\n+ \/\/ selection (this matches native `select` event behavior). In HTML5, select\n+ \/\/ fires only on input and textarea thus if there's no focused element we\n+ \/\/ won't dispatch.\n+ const doc = getEventTargetDocument(nativeEventTarget);\n+\n+ if (\n+ mouseDown ||\n+ activeElement == null ||\n+ activeElement !== getActiveElement(doc)\n+ ) {\n+ return null;\n+ }\n+\n+ \/\/ Only fire when selection has actually changed.\n+ const currentSelection = getSelection(activeElement);\n+ if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {\n+ lastSelection = currentSelection;\n+\n+ const syntheticEvent = SyntheticEvent.getPooled(\n+ eventTypes.select,\n+ activeElementInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ syntheticEvent.type = 'select';\n+ syntheticEvent.target = activeElement;\n+\n+ accumulateTwoPhaseListeners(syntheticEvent);\n+\n+ return syntheticEvent;\n+ }\n+\n+ return null;\n+}\n+\n+\/**\n+ * This plugin creates an `onSelect` event that normalizes select events\n+ * across form elements.\n+ *\n+ * Supported elements are:\n+ * - input (see `isTextInputElement`)\n+ * - textarea\n+ * - contentEditable\n+ *\n+ * This differs from native browser implementations in the following ways:\n+ * - Fires on contentEditable fields as well as inputs.\n+ * - Fires for collapsed selection.\n+ * - Fires after user input.\n+ *\/\n+const SelectEventPlugin = {\n+ eventTypes: eventTypes,\n+\n+ extractEvents: function(\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ container,\n+ ) {\n+ const containerOrDoc =\n+ container || getEventTargetDocument(nativeEventTarget);\n+ \/\/ Track whether all listeners exists for this plugin. If none exist, we do\n+ \/\/ not extract events. See #3639.\n+ if (\n+ !containerOrDoc ||\n+ !isListeningToAllDependencies('onSelect', containerOrDoc)\n+ ) {\n+ return null;\n+ }\n+\n+ const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;\n+\n+ switch (topLevelType) {\n+ \/\/ Track the input node that has focus.\n+ case TOP_FOCUS:\n+ if (\n+ isTextInputElement(targetNode) ||\n+ targetNode.contentEditable === 'true'\n+ ) {\n+ activeElement = targetNode;\n+ activeElementInst = targetInst;\n+ lastSelection = null;\n+ }\n+ break;\n+ case TOP_BLUR:\n+ activeElement = null;\n+ activeElementInst = null;\n+ lastSelection = null;\n+ break;\n+ \/\/ Don't fire the event while the user is dragging. This matches the\n+ \/\/ semantics of the native select event.\n+ case TOP_MOUSE_DOWN:\n+ mouseDown = true;\n+ break;\n+ case TOP_CONTEXT_MENU:\n+ case TOP_MOUSE_UP:\n+ case TOP_DRAG_END:\n+ mouseDown = false;\n+ return constructSelectEvent(nativeEvent, nativeEventTarget);\n+ \/\/ Chrome and IE fire non-standard event when selection is changed (and\n+ \/\/ sometimes when it hasn't). IE's event fires out of order with respect\n+ \/\/ to key and input events on deletion, so we discard it.\n+ \/\/\n+ \/\/ Firefox doesn't support selectionchange, so check selection status\n+ \/\/ after each key entry. The selection changes after keydown and before\n+ \/\/ keyup, but we check on keydown as well in the case of holding down a\n+ \/\/ key, when multiple keydown events are fired but only one keyup is.\n+ \/\/ This is also our approach for IE handling, for the reason above.\n+ case TOP_SELECTION_CHANGE:\n+ if (skipSelectionChangeEvent) {\n+ break;\n+ }\n+ \/\/ falls through\n+ case TOP_KEY_DOWN:\n+ case TOP_KEY_UP:\n+ return constructSelectEvent(nativeEvent, nativeEventTarget);\n+ }\n+\n+ return null;\n+ },\n+};\n+\n+export default SelectEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\nnew file mode 100644\nindex 0000000000..cd61625518\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n@@ -0,0 +1,225 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {\n+ TopLevelType,\n+ DOMTopLevelEventType,\n+} from 'legacy-events\/TopLevelEventTypes';\n+import type {ReactSyntheticEvent} from 'legacy-events\/ReactSyntheticEventType';\n+import type {Fiber} from 'react-reconciler\/src\/ReactInternalTypes';\n+import type {PluginModule} from 'legacy-events\/PluginModuleType';\n+import type {EventSystemFlags} from '..\/EventSystemFlags';\n+\n+import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n+import {IS_TARGET_PHASE_ONLY} from '..\/EventSystemFlags';\n+\n+import * as DOMTopLevelEventTypes from '..\/DOMTopLevelEventTypes';\n+import {\n+ topLevelEventsToDispatchConfig,\n+ simpleEventPluginEventTypes,\n+} from '..\/DOMEventProperties';\n+\n+import SyntheticAnimationEvent from '..\/SyntheticAnimationEvent';\n+import SyntheticClipboardEvent from '..\/SyntheticClipboardEvent';\n+import SyntheticFocusEvent from '..\/SyntheticFocusEvent';\n+import SyntheticKeyboardEvent from '..\/SyntheticKeyboardEvent';\n+import SyntheticMouseEvent from '..\/SyntheticMouseEvent';\n+import SyntheticPointerEvent from '..\/SyntheticPointerEvent';\n+import SyntheticDragEvent from '..\/SyntheticDragEvent';\n+import SyntheticTouchEvent from '..\/SyntheticTouchEvent';\n+import SyntheticTransitionEvent from '..\/SyntheticTransitionEvent';\n+import SyntheticUIEvent from '..\/SyntheticUIEvent';\n+import SyntheticWheelEvent from '..\/SyntheticWheelEvent';\n+import getEventCharCode from '..\/getEventCharCode';\n+import accumulateTwoPhaseListeners from '..\/accumulateTwoPhaseListeners';\n+import accumulateEventTargetListeners from '..\/accumulateEventTargetListeners';\n+\n+import {enableUseEventAPI} from 'shared\/ReactFeatureFlags';\n+\n+\/\/ Only used in DEV for exhaustiveness validation.\n+const knownHTMLTopLevelTypes: Array = [\n+ DOMTopLevelEventTypes.TOP_ABORT,\n+ DOMTopLevelEventTypes.TOP_CANCEL,\n+ DOMTopLevelEventTypes.TOP_CAN_PLAY,\n+ DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH,\n+ DOMTopLevelEventTypes.TOP_CLOSE,\n+ DOMTopLevelEventTypes.TOP_DURATION_CHANGE,\n+ DOMTopLevelEventTypes.TOP_EMPTIED,\n+ DOMTopLevelEventTypes.TOP_ENCRYPTED,\n+ DOMTopLevelEventTypes.TOP_ENDED,\n+ DOMTopLevelEventTypes.TOP_ERROR,\n+ DOMTopLevelEventTypes.TOP_INPUT,\n+ DOMTopLevelEventTypes.TOP_INVALID,\n+ DOMTopLevelEventTypes.TOP_LOAD,\n+ DOMTopLevelEventTypes.TOP_LOADED_DATA,\n+ DOMTopLevelEventTypes.TOP_LOADED_METADATA,\n+ DOMTopLevelEventTypes.TOP_LOAD_START,\n+ DOMTopLevelEventTypes.TOP_PAUSE,\n+ DOMTopLevelEventTypes.TOP_PLAY,\n+ DOMTopLevelEventTypes.TOP_PLAYING,\n+ DOMTopLevelEventTypes.TOP_PROGRESS,\n+ DOMTopLevelEventTypes.TOP_RATE_CHANGE,\n+ DOMTopLevelEventTypes.TOP_RESET,\n+ DOMTopLevelEventTypes.TOP_SEEKED,\n+ DOMTopLevelEventTypes.TOP_SEEKING,\n+ DOMTopLevelEventTypes.TOP_STALLED,\n+ DOMTopLevelEventTypes.TOP_SUBMIT,\n+ DOMTopLevelEventTypes.TOP_SUSPEND,\n+ DOMTopLevelEventTypes.TOP_TIME_UPDATE,\n+ DOMTopLevelEventTypes.TOP_TOGGLE,\n+ DOMTopLevelEventTypes.TOP_VOLUME_CHANGE,\n+ DOMTopLevelEventTypes.TOP_WAITING,\n+];\n+\n+const SimpleEventPlugin: PluginModule = {\n+ \/\/ simpleEventPluginEventTypes gets populated from\n+ \/\/ the DOMEventProperties module.\n+ eventTypes: simpleEventPluginEventTypes,\n+ extractEvents: function(\n+ topLevelType: TopLevelType,\n+ targetInst: null | Fiber,\n+ nativeEvent: MouseEvent,\n+ nativeEventTarget: null | EventTarget,\n+ eventSystemFlags?: EventSystemFlags,\n+ targetContainer?: null | EventTarget,\n+ ): null | ReactSyntheticEvent {\n+ const dispatchConfig = topLevelEventsToDispatchConfig.get(topLevelType);\n+ if (!dispatchConfig) {\n+ return null;\n+ }\n+ let EventConstructor;\n+ switch (topLevelType) {\n+ case DOMTopLevelEventTypes.TOP_KEY_PRESS:\n+ \/\/ Firefox creates a keypress event for function keys too. This removes\n+ \/\/ the unwanted keypress events. Enter is however both printable and\n+ \/\/ non-printable. One would expect Tab to be as well (but it isn't).\n+ if (getEventCharCode(nativeEvent) === 0) {\n+ return null;\n+ }\n+ \/* falls through *\/\n+ case DOMTopLevelEventTypes.TOP_KEY_DOWN:\n+ case DOMTopLevelEventTypes.TOP_KEY_UP:\n+ EventConstructor = SyntheticKeyboardEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_BLUR:\n+ case DOMTopLevelEventTypes.TOP_FOCUS:\n+ case DOMTopLevelEventTypes.TOP_BEFORE_BLUR:\n+ case DOMTopLevelEventTypes.TOP_AFTER_BLUR:\n+ EventConstructor = SyntheticFocusEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_CLICK:\n+ \/\/ Firefox creates a click event on right mouse clicks. This removes the\n+ \/\/ unwanted click events.\n+ if (nativeEvent.button === 2) {\n+ return null;\n+ }\n+ \/* falls through *\/\n+ case DOMTopLevelEventTypes.TOP_AUX_CLICK:\n+ case DOMTopLevelEventTypes.TOP_DOUBLE_CLICK:\n+ case DOMTopLevelEventTypes.TOP_MOUSE_DOWN:\n+ case DOMTopLevelEventTypes.TOP_MOUSE_MOVE:\n+ case DOMTopLevelEventTypes.TOP_MOUSE_UP:\n+ \/\/ TODO: Disabled elements should not respond to mouse events\n+ \/* falls through *\/\n+ case DOMTopLevelEventTypes.TOP_MOUSE_OUT:\n+ case DOMTopLevelEventTypes.TOP_MOUSE_OVER:\n+ case DOMTopLevelEventTypes.TOP_CONTEXT_MENU:\n+ EventConstructor = SyntheticMouseEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_DRAG:\n+ case DOMTopLevelEventTypes.TOP_DRAG_END:\n+ case DOMTopLevelEventTypes.TOP_DRAG_ENTER:\n+ case DOMTopLevelEventTypes.TOP_DRAG_EXIT:\n+ case DOMTopLevelEventTypes.TOP_DRAG_LEAVE:\n+ case DOMTopLevelEventTypes.TOP_DRAG_OVER:\n+ case DOMTopLevelEventTypes.TOP_DRAG_START:\n+ case DOMTopLevelEventTypes.TOP_DROP:\n+ EventConstructor = SyntheticDragEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_TOUCH_CANCEL:\n+ case DOMTopLevelEventTypes.TOP_TOUCH_END:\n+ case DOMTopLevelEventTypes.TOP_TOUCH_MOVE:\n+ case DOMTopLevelEventTypes.TOP_TOUCH_START:\n+ EventConstructor = SyntheticTouchEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_ANIMATION_END:\n+ case DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION:\n+ case DOMTopLevelEventTypes.TOP_ANIMATION_START:\n+ EventConstructor = SyntheticAnimationEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_TRANSITION_END:\n+ EventConstructor = SyntheticTransitionEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_SCROLL:\n+ EventConstructor = SyntheticUIEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_WHEEL:\n+ EventConstructor = SyntheticWheelEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_COPY:\n+ case DOMTopLevelEventTypes.TOP_CUT:\n+ case DOMTopLevelEventTypes.TOP_PASTE:\n+ EventConstructor = SyntheticClipboardEvent;\n+ break;\n+ case DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE:\n+ case DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE:\n+ case DOMTopLevelEventTypes.TOP_POINTER_CANCEL:\n+ case DOMTopLevelEventTypes.TOP_POINTER_DOWN:\n+ case DOMTopLevelEventTypes.TOP_POINTER_MOVE:\n+ case DOMTopLevelEventTypes.TOP_POINTER_OUT:\n+ case DOMTopLevelEventTypes.TOP_POINTER_OVER:\n+ case DOMTopLevelEventTypes.TOP_POINTER_UP:\n+ EventConstructor = SyntheticPointerEvent;\n+ break;\n+ default:\n+ if (__DEV__) {\n+ if (\n+ knownHTMLTopLevelTypes.indexOf(topLevelType) === -1 &&\n+ dispatchConfig.customEvent !== true\n+ ) {\n+ console.error(\n+ 'SimpleEventPlugin: Unhandled event type, `%s`. This warning ' +\n+ 'is likely caused by a bug in React. Please file an issue.',\n+ topLevelType,\n+ );\n+ }\n+ }\n+ \/\/ HTML Events\n+ \/\/ @see http:\/\/www.w3.org\/TR\/html5\/index.html#events-0\n+ EventConstructor = SyntheticEvent;\n+ break;\n+ }\n+ const event = EventConstructor.getPooled(\n+ dispatchConfig,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ );\n+\n+ \/\/ For TargetEvent only accumulation, we do not traverse through\n+ \/\/ the React tree looking for managed React DOM elements that have\n+ \/\/ events. Instead we only check the EventTarget Store Map to see\n+ \/\/ if the container has listeners for the particular phase we're\n+ \/\/ interested in. This is because we attach the native event listener\n+ \/\/ only in the given phase.\n+ if (\n+ enableUseEventAPI &&\n+ eventSystemFlags !== undefined &&\n+ eventSystemFlags & IS_TARGET_PHASE_ONLY &&\n+ targetContainer != null\n+ ) {\n+ accumulateEventTargetListeners(event, targetContainer);\n+ } else {\n+ accumulateTwoPhaseListeners(event, true);\n+ }\n+ return event;\n+ },\n+};\n+\n+export default SimpleEventPlugin;\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/BeforeInputEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyBeforeInputEventPlugin-test.js\nsimilarity index 100%\nrename from packages\/react-dom\/src\/events\/plugins\/__tests__\/BeforeInputEventPlugin-test.js\nrename to packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyBeforeInputEventPlugin-test.js\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyChangeEventPlugin-test.js\nsimilarity index 100%\nrename from packages\/react-dom\/src\/events\/plugins\/__tests__\/ChangeEventPlugin-test.js\nrename to packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyChangeEventPlugin-test.js\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyEnterLeaveEventPlugin-test.js\nsimilarity index 100%\nrename from packages\/react-dom\/src\/events\/plugins\/__tests__\/EnterLeaveEventPlugin-test.js\nrename to packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacyEnterLeaveEventPlugin-test.js\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/SelectEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySelectEventPlugin-test.js\nsimilarity index 100%\nrename from packages\/react-dom\/src\/events\/plugins\/__tests__\/SelectEventPlugin-test.js\nrename to packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySelectEventPlugin-test.js\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/SimpleEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySimpleEventPlugin-test.js\nsimilarity index 100%\nrename from packages\/react-dom\/src\/events\/plugins\/__tests__\/SimpleEventPlugin-test.js\nrename to packages\/react-dom\/src\/events\/plugins\/__tests__\/LegacySimpleEventPlugin-test.js\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernBeforeInputEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernBeforeInputEventPlugin-test.internal.js\nnew file mode 100644\nindex 0000000000..ad4ecd7b81\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernBeforeInputEventPlugin-test.internal.js\n@@ -0,0 +1,828 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactDOM;\n+\n+describe('BeforeInputEventPlugin', () => {\n+ let container;\n+\n+ function loadReactDOM(envSimulator) {\n+ jest.resetModules();\n+ if (envSimulator) {\n+ envSimulator();\n+ }\n+ return require('react-dom');\n+ }\n+\n+ function simulateIE11() {\n+ document.documentMode = 11;\n+ window.CompositionEvent = {};\n+ }\n+\n+ function simulateWebkit() {\n+ window.CompositionEvent = {};\n+ window.TextEvent = {};\n+ }\n+\n+ function simulateComposition() {\n+ window.CompositionEvent = {};\n+ }\n+\n+ function simulateNoComposition() {\n+ \/\/ no composition event in Window - will use fallback\n+ }\n+\n+ function simulateEvent(elem, type, data) {\n+ const event = new Event(type, {bubbles: true});\n+ Object.assign(event, data);\n+ elem.dispatchEvent(event);\n+ }\n+\n+ function simulateKeyboardEvent(elem, type, data) {\n+ const {char, value, ...rest} = data;\n+ const event = new KeyboardEvent(type, {\n+ bubbles: true,\n+ ...rest,\n+ });\n+ if (char) {\n+ event.char = char;\n+ }\n+ if (value) {\n+ elem.value = value;\n+ }\n+ elem.dispatchEvent(event);\n+ }\n+\n+ function simulatePaste(elem) {\n+ const pasteEvent = new Event('paste', {\n+ bubbles: true,\n+ });\n+ pasteEvent.clipboardData = {\n+ dropEffect: null,\n+ effectAllowed: null,\n+ files: null,\n+ items: null,\n+ types: null,\n+ };\n+ elem.dispatchEvent(pasteEvent);\n+ }\n+\n+ beforeEach(() => {\n+ React = require('react');\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ delete document.documentMode;\n+ delete window.CompositionEvent;\n+ delete window.TextEvent;\n+ delete window.opera;\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ function keyCode(char) {\n+ return char.charCodeAt(0);\n+ }\n+\n+ const scenarios = [\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: [\n+ 'compositionstart',\n+ {detail: {data: 'test'}, data: 'test'},\n+ ],\n+ },\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: [\n+ 'compositionupdate',\n+ {detail: {data: 'test string'}, data: 'test string'},\n+ ],\n+ },\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: [\n+ 'compositionend',\n+ {detail: {data: 'test string 3'}, data: 'test string 3'},\n+ ],\n+ },\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: ['textInput', {data: 'abcß'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keypress', {which: keyCode('a')}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keypress', {which: keyCode(' ')}, ' '],\n+ },\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: ['textInput', {data: ' '}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keypress', {which: keyCode('a'), ctrlKey: true}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keypress', {which: keyCode('b'), altKey: true}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: [\n+ 'keypress',\n+ {which: keyCode('c'), altKey: true, ctrlKey: true},\n+ ],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: [\n+ 'keypress',\n+ {which: keyCode('X'), char: '\\uD83D\\uDE0A'},\n+ ],\n+ },\n+ {\n+ eventSimulator: simulateEvent,\n+ eventSimulatorArgs: ['textInput', {data: '\\uD83D\\uDE0A'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foo'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keydown', {keyCode: 9, value: 'foobar'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foofoo'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keyup', {keyCode: 9, value: 'fooBARfoo'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keydown', {keyCode: 229, value: 'foofoo'}],\n+ },\n+ {\n+ eventSimulator: simulateKeyboardEvent,\n+ eventSimulatorArgs: ['keypress', {keyCode: 60, value: 'Barfoofoo'}],\n+ },\n+ {\n+ eventSimulator: simulatePaste,\n+ eventSimulatorArgs: [],\n+ },\n+ ];\n+\n+ const environments = [\n+ {\n+ emulator: simulateWebkit,\n+ assertions: [\n+ {\n+ run: ({\n+ beforeInputEvent,\n+ compositionStartEvent,\n+ spyOnBeforeInput,\n+ spyOnCompositionStart,\n+ }) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ expect(spyOnCompositionStart).toHaveBeenCalledTimes(1);\n+ expect(compositionStartEvent.type).toBe('compositionstart');\n+ expect(compositionStartEvent.data).toBe('test');\n+ },\n+ },\n+ {\n+ run: ({\n+ beforeInputEvent,\n+ compositionUpdateEvent,\n+ spyOnBeforeInput,\n+ spyOnCompositionUpdate,\n+ }) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ expect(spyOnCompositionUpdate).toHaveBeenCalledTimes(1);\n+ expect(compositionUpdateEvent.type).toBe('compositionupdate');\n+ expect(compositionUpdateEvent.data).toBe('test string');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('compositionend');\n+ expect(beforeInputEvent.data).toBe('test string 3');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('textInput');\n+ expect(beforeInputEvent.data).toBe('abcß');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe(' ');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('textInput');\n+ expect(beforeInputEvent.data).toBe('\\uD83D\\uDE0A');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ ],\n+ },\n+ {\n+ emulator: simulateIE11,\n+ assertions: [\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('a');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe(' ');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('c');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('\\uD83D\\uDE0A');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ ],\n+ },\n+ {\n+ emulator: simulateNoComposition,\n+ assertions: [\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('a');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe(' ');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('c');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('\\uD83D\\uDE0A');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keydown');\n+ expect(beforeInputEvent.data).toBe('bar');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keyup');\n+ expect(beforeInputEvent.data).toBe('BAR');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('Bar');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ ],\n+ },\n+ {\n+ emulator: simulateComposition,\n+ assertions: [\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('compositionend');\n+ expect(beforeInputEvent.data).toBe('test string 3');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('a');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe(' ');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('c');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(1);\n+ expect(beforeInputEvent.type).toBe('keypress');\n+ expect(beforeInputEvent.data).toBe('\\uD83D\\uDE0A');\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ {\n+ run: ({beforeInputEvent, spyOnBeforeInput}) => {\n+ expect(spyOnBeforeInput).toHaveBeenCalledTimes(0);\n+ expect(beforeInputEvent).toBeNull();\n+ },\n+ },\n+ ],\n+ },\n+ ];\n+\n+ const testInputComponent = (env, scenes) => {\n+ let beforeInputEvent;\n+ let compositionStartEvent;\n+ let compositionUpdateEvent;\n+ let spyOnBeforeInput;\n+ let spyOnCompositionStart;\n+ let spyOnCompositionUpdate;\n+ ReactDOM = loadReactDOM(env.emulator);\n+ const node = ReactDOM.render(\n+ {\n+ spyOnBeforeInput();\n+ beforeInputEvent = {type, data};\n+ }}\n+ onCompositionStart={({type, data}) => {\n+ spyOnCompositionStart();\n+ compositionStartEvent = {type, data};\n+ }}\n+ onCompositionUpdate={({type, data}) => {\n+ spyOnCompositionUpdate();\n+ compositionUpdateEvent = {type, data};\n+ }}\n+ \/>,\n+ container,\n+ );\n+\n+ scenes.forEach((s, id) => {\n+ beforeInputEvent = null;\n+ compositionStartEvent = null;\n+ compositionUpdateEvent = null;\n+ spyOnBeforeInput = jest.fn();\n+ spyOnCompositionStart = jest.fn();\n+ spyOnCompositionUpdate = jest.fn();\n+ s.eventSimulator.apply(null, [node, ...s.eventSimulatorArgs]);\n+ env.assertions[id].run({\n+ beforeInputEvent,\n+ compositionStartEvent,\n+ compositionUpdateEvent,\n+ spyOnBeforeInput,\n+ spyOnCompositionStart,\n+ spyOnCompositionUpdate,\n+ });\n+ });\n+ };\n+\n+ const testContentEditableComponent = (env, scenes) => {\n+ let beforeInputEvent;\n+ let compositionStartEvent;\n+ let compositionUpdateEvent;\n+ let spyOnBeforeInput;\n+ let spyOnCompositionStart;\n+ let spyOnCompositionUpdate;\n+ ReactDOM = loadReactDOM(env.emulator);\n+ const node = ReactDOM.render(\n+ {\n+ spyOnBeforeInput();\n+ beforeInputEvent = {type, data};\n+ }}\n+ onCompositionStart={({type, data}) => {\n+ spyOnCompositionStart();\n+ compositionStartEvent = {type, data};\n+ }}\n+ onCompositionUpdate={({type, data}) => {\n+ spyOnCompositionUpdate();\n+ compositionUpdateEvent = {type, data};\n+ }}\n+ \/>,\n+ container,\n+ );\n+\n+ scenes.forEach((s, id) => {\n+ beforeInputEvent = null;\n+ compositionStartEvent = null;\n+ compositionUpdateEvent = null;\n+ spyOnBeforeInput = jest.fn();\n+ spyOnCompositionStart = jest.fn();\n+ spyOnCompositionUpdate = jest.fn();\n+ s.eventSimulator.apply(null, [node, ...s.eventSimulatorArgs]);\n+ env.assertions[id].run({\n+ beforeInputEvent,\n+ compositionStartEvent,\n+ compositionUpdateEvent,\n+ spyOnBeforeInput,\n+ spyOnCompositionStart,\n+ spyOnCompositionUpdate,\n+ });\n+ });\n+ };\n+\n+ it('should extract onBeforeInput when simulating in Webkit on input[type=text]', () => {\n+ testInputComponent(environments[0], scenarios);\n+ });\n+ it('should extract onBeforeInput when simulating in Webkit on contenteditable', () => {\n+ testContentEditableComponent(environments[0], scenarios);\n+ });\n+\n+ it('should extract onBeforeInput when simulating in IE11 on input[type=text]', () => {\n+ testInputComponent(environments[1], scenarios);\n+ });\n+ it('should extract onBeforeInput when simulating in IE11 on contenteditable', () => {\n+ testContentEditableComponent(environments[1], scenarios);\n+ });\n+\n+ it('should extract onBeforeInput when simulating in env with no CompositionEvent on input[type=text]', () => {\n+ testInputComponent(environments[2], scenarios);\n+ });\n+\n+ \/\/ in an environment using composition fallback onBeforeInput will not work\n+ \/\/ as expected on a contenteditable as keydown and keyup events are translated\n+ \/\/ to keypress events\n+\n+ it('should extract onBeforeInput when simulating in env with only CompositionEvent on input[type=text]', () => {\n+ testInputComponent(environments[3], scenarios);\n+ });\n+\n+ it('should extract onBeforeInput when simulating in env with only CompositionEvent on contenteditable', () => {\n+ testContentEditableComponent(environments[3], scenarios);\n+ });\n+});\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.internal.js\nnew file mode 100644\nindex 0000000000..c83cfc4548\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.internal.js\n@@ -0,0 +1,763 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React = require('react');\n+let ReactDOM = require('react-dom');\n+let TestUtils = require('react-dom\/test-utils');\n+let ReactFeatureFlags;\n+let Scheduler;\n+\n+const setUntrackedChecked = Object.getOwnPropertyDescriptor(\n+ HTMLInputElement.prototype,\n+ 'checked',\n+).set;\n+\n+const setUntrackedValue = Object.getOwnPropertyDescriptor(\n+ HTMLInputElement.prototype,\n+ 'value',\n+).set;\n+\n+const setUntrackedTextareaValue = Object.getOwnPropertyDescriptor(\n+ HTMLTextAreaElement.prototype,\n+ 'value',\n+).set;\n+\n+describe('ChangeEventPlugin', () => {\n+ let container;\n+\n+ beforeEach(() => {\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ \/\/ TODO pull this into helper method, reduce repetition.\n+ \/\/ mock the browser APIs which are used in schedule:\n+ \/\/ - calling 'window.postMessage' should actually fire postmessage handlers\n+ const originalAddEventListener = global.addEventListener;\n+ let postMessageCallback;\n+ global.addEventListener = function(eventName, callback, useCapture) {\n+ if (eventName === 'message') {\n+ postMessageCallback = callback;\n+ } else {\n+ originalAddEventListener(eventName, callback, useCapture);\n+ }\n+ };\n+ global.postMessage = function(messageKey, targetOrigin) {\n+ const postMessageEvent = {source: window, data: messageKey};\n+ if (postMessageCallback) {\n+ postMessageCallback(postMessageEvent);\n+ }\n+ };\n+ jest.resetModules();\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ \/\/ We try to avoid firing \"duplicate\" React change events.\n+ \/\/ However, to tell which events are \"duplicates\" and should be ignored,\n+ \/\/ we are tracking the \"current\" input value, and only respect events\n+ \/\/ that occur after it changes. In most of these tests, we verify that we\n+ \/\/ keep track of the \"current\" value and only fire events when it changes.\n+ \/\/ See https:\/\/github.com\/facebook\/react\/pull\/5746.\n+\n+ it('should consider initial text value to be current', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n+\n+ if (ReactFeatureFlags.disableInputAttributeSyncing) {\n+ \/\/ TODO: figure out why. This might be a bug.\n+ expect(called).toBe(1);\n+ } else {\n+ \/\/ There should be no React change events because the value stayed the same.\n+ expect(called).toBe(0);\n+ }\n+ });\n+\n+ it('should consider initial checkbox checked=true to be current', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ Secretly, set `checked` to false, so that dispatching the `click` will\n+ \/\/ make it `true` again. Thus, at the time of the event, React should not\n+ \/\/ consider it a change from the initial `true` value.\n+ setUntrackedChecked.call(node, false);\n+ node.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ There should be no React change events because the value stayed the same.\n+ expect(called).toBe(0);\n+ });\n+\n+ it('should consider initial checkbox checked=false to be current', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ Secretly, set `checked` to true, so that dispatching the `click` will\n+ \/\/ make it `false` again. Thus, at the time of the event, React should not\n+ \/\/ consider it a change from the initial `false` value.\n+ setUntrackedChecked.call(node, true);\n+ node.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ There should be no React change events because the value stayed the same.\n+ expect(called).toBe(0);\n+ });\n+\n+ it('should fire change for checkbox input', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ expect(node.checked).toBe(false);\n+ node.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Note: unlike with text input events, dispatching `click` actually\n+ \/\/ toggles the checkbox and updates its `checked` value.\n+ expect(node.checked).toBe(true);\n+ expect(called).toBe(1);\n+\n+ expect(node.checked).toBe(true);\n+ node.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ expect(node.checked).toBe(false);\n+ expect(called).toBe(2);\n+ });\n+\n+ it('should not fire change setting the value programmatically', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ Set it programmatically.\n+ input.value = 'bar';\n+ \/\/ Even if a DOM input event fires, React sees that the real input value now\n+ \/\/ ('bar') is the same as the \"current\" one we already recorded.\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ expect(input.value).toBe('bar');\n+ \/\/ In this case we don't expect to get a React event.\n+ expect(called).toBe(0);\n+\n+ \/\/ However, we can simulate user typing by calling the underlying setter.\n+ setUntrackedValue.call(input, 'foo');\n+ \/\/ Now, when the event fires, the real input value ('foo') differs from the\n+ \/\/ \"current\" one we previously recorded ('bar').\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ expect(input.value).toBe('foo');\n+ \/\/ In this case React should fire an event for it.\n+ expect(called).toBe(1);\n+\n+ \/\/ Verify again that extra events without real changes are ignored.\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ expect(called).toBe(1);\n+ });\n+\n+ it('should not distinguish equal string and number values', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ When we set `value` as a property, React updates the \"current\" value\n+ \/\/ that it tracks internally. The \"current\" value is later used to determine\n+ \/\/ whether a change event is a duplicate or not.\n+ \/\/ Even though we set value to a number, we still shouldn't get a change\n+ \/\/ event because as a string, it's equal to the initial value ('42').\n+ input.value = 42;\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ expect(input.value).toBe('42');\n+ expect(called).toBe(0);\n+ });\n+\n+ \/\/ See a similar input test above for a detailed description of why.\n+ it('should not fire change when setting checked programmatically', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ Set the value, updating the \"current\" value that React tracks to true.\n+ input.checked = true;\n+ \/\/ Under the hood, uncheck the box so that the click will \"check\" it again.\n+ setUntrackedChecked.call(input, false);\n+ input.click();\n+ expect(input.checked).toBe(true);\n+ \/\/ We don't expect a React event because at the time of the click, the real\n+ \/\/ checked value (true) was the same as the last recorded \"current\" value\n+ \/\/ (also true).\n+ expect(called).toBe(0);\n+\n+ \/\/ However, simulating a normal click should fire a React event because the\n+ \/\/ real value (false) would have changed from the last tracked value (true).\n+ input.click();\n+ expect(called).toBe(1);\n+ });\n+\n+ it('should unmount', () => {\n+ const input = ReactDOM.render(, container);\n+\n+ ReactDOM.unmountComponentAtNode(container);\n+ });\n+\n+ it('should only fire change for checked radio button once', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ setUntrackedChecked.call(input, true);\n+ input.dispatchEvent(new Event('click', {bubbles: true, cancelable: true}));\n+ input.dispatchEvent(new Event('click', {bubbles: true, cancelable: true}));\n+ expect(called).toBe(1);\n+ });\n+\n+ it('should track radio button cousins in a group', () => {\n+ let called1 = 0;\n+ let called2 = 0;\n+\n+ function cb1(e) {\n+ called1++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ function cb2(e) {\n+ called2++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const div = ReactDOM.render(\n+

\n+ \n+ \n+ <\/div>,\n+ container,\n+ );\n+ const option1 = div.childNodes[0];\n+ const option2 = div.childNodes[1];\n+\n+ \/\/ Select first option.\n+ option1.click();\n+ expect(called1).toBe(1);\n+ expect(called2).toBe(0);\n+\n+ \/\/ Select second option.\n+ option2.click();\n+ expect(called1).toBe(1);\n+ expect(called2).toBe(1);\n+\n+ \/\/ Select the first option.\n+ \/\/ It should receive the React change event again.\n+ option1.click();\n+ expect(called1).toBe(2);\n+ expect(called2).toBe(1);\n+ });\n+\n+ it('should deduplicate input value change events', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ let input;\n+ ['text', 'number', 'range'].forEach(type => {\n+ called = 0;\n+ input = ReactDOM.render(, container);\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ setUntrackedValue.call(input, '42');\n+ input.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ expect(called).toBe(1);\n+ ReactDOM.unmountComponentAtNode(container);\n+\n+ called = 0;\n+ input = ReactDOM.render(, container);\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ setUntrackedValue.call(input, '42');\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ expect(called).toBe(1);\n+ ReactDOM.unmountComponentAtNode(container);\n+\n+ called = 0;\n+ input = ReactDOM.render(, container);\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ setUntrackedValue.call(input, '42');\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Should be ignored (no change):\n+ input.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ expect(called).toBe(1);\n+ ReactDOM.unmountComponentAtNode(container);\n+ });\n+ });\n+\n+ it('should listen for both change and input events when supported', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ setUntrackedValue.call(input, 10);\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+\n+ setUntrackedValue.call(input, 20);\n+ input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n+\n+ expect(called).toBe(2);\n+ });\n+\n+ it('should only fire events when the value changes for range inputs', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const input = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ setUntrackedValue.call(input, '40');\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n+\n+ setUntrackedValue.call(input, 'foo');\n+ input.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ input.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n+\n+ expect(called).toBe(2);\n+ });\n+\n+ it('does not crash for nodes with custom value property', () => {\n+ let originalCreateElement;\n+ \/\/ https:\/\/github.com\/facebook\/react\/issues\/10196\n+ try {\n+ originalCreateElement = document.createElement;\n+ document.createElement = function() {\n+ const node = originalCreateElement.apply(this, arguments);\n+ Object.defineProperty(node, 'value', {\n+ get() {},\n+ set() {},\n+ });\n+ return node;\n+ };\n+ const div = document.createElement('div');\n+ \/\/ Mount\n+ const node = ReactDOM.render(, div);\n+ \/\/ Update\n+ ReactDOM.render(, div);\n+ \/\/ Change\n+ node.dispatchEvent(\n+ new Event('change', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Unmount\n+ ReactDOM.unmountComponentAtNode(div);\n+ } finally {\n+ document.createElement = originalCreateElement;\n+ }\n+ });\n+\n+ describe('concurrent mode', () => {\n+ beforeEach(() => {\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ Scheduler = require('scheduler');\n+ });\n+\n+ \/\/ @gate experimental\n+ it('text input', () => {\n+ const root = ReactDOM.createRoot(container);\n+ let input;\n+\n+ class ControlledInput extends React.Component {\n+ state = {value: 'initial'};\n+ onChange = event => this.setState({value: event.target.value});\n+ render() {\n+ Scheduler.unstable_yieldValue(`render: ${this.state.value}`);\n+ const controlledValue =\n+ this.state.value === 'changed' ? 'changed [!]' : this.state.value;\n+ return (\n+ (input = el)}\n+ type=\"text\"\n+ value={controlledValue}\n+ onChange={this.onChange}\n+ \/>\n+ );\n+ }\n+ }\n+\n+ \/\/ Initial mount. Test that this is async.\n+ root.render();\n+ \/\/ Should not have flushed yet.\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(input).toBe(undefined);\n+ \/\/ Flush callbacks.\n+ expect(Scheduler).toFlushAndYield(['render: initial']);\n+ expect(input.value).toBe('initial');\n+\n+ \/\/ Trigger a change event.\n+ setUntrackedValue.call(input, 'changed');\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Change should synchronously flush\n+ expect(Scheduler).toHaveYielded(['render: changed']);\n+ \/\/ Value should be the controlled value, not the original one\n+ expect(input.value).toBe('changed [!]');\n+ });\n+\n+ \/\/ @gate experimental\n+ it('checkbox input', () => {\n+ const root = ReactDOM.createRoot(container);\n+ let input;\n+\n+ class ControlledInput extends React.Component {\n+ state = {checked: false};\n+ onChange = event => {\n+ this.setState({checked: event.target.checked});\n+ };\n+ render() {\n+ Scheduler.unstable_yieldValue(`render: ${this.state.checked}`);\n+ const controlledValue = this.props.reverse\n+ ? !this.state.checked\n+ : this.state.checked;\n+ return (\n+ (input = el)}\n+ type=\"checkbox\"\n+ checked={controlledValue}\n+ onChange={this.onChange}\n+ \/>\n+ );\n+ }\n+ }\n+\n+ \/\/ Initial mount. Test that this is async.\n+ root.render();\n+ \/\/ Should not have flushed yet.\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(input).toBe(undefined);\n+ \/\/ Flush callbacks.\n+ expect(Scheduler).toFlushAndYield(['render: false']);\n+ expect(input.checked).toBe(false);\n+\n+ \/\/ Trigger a change event.\n+ input.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Change should synchronously flush\n+ expect(Scheduler).toHaveYielded(['render: true']);\n+ expect(input.checked).toBe(true);\n+\n+ \/\/ Now let's make sure we're using the controlled value.\n+ root.render();\n+ expect(Scheduler).toFlushAndYield(['render: true']);\n+\n+ \/\/ Trigger another change event.\n+ input.dispatchEvent(\n+ new MouseEvent('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Change should synchronously flush\n+ expect(Scheduler).toHaveYielded(['render: true']);\n+ expect(input.checked).toBe(false);\n+ });\n+\n+ \/\/ @gate experimental\n+ it('textarea', () => {\n+ const root = ReactDOM.createRoot(container);\n+ let textarea;\n+\n+ class ControlledTextarea extends React.Component {\n+ state = {value: 'initial'};\n+ onChange = event => this.setState({value: event.target.value});\n+ render() {\n+ Scheduler.unstable_yieldValue(`render: ${this.state.value}`);\n+ const controlledValue =\n+ this.state.value === 'changed' ? 'changed [!]' : this.state.value;\n+ return (\n+ (textarea = el)}\n+ type=\"text\"\n+ value={controlledValue}\n+ onChange={this.onChange}\n+ \/>\n+ );\n+ }\n+ }\n+\n+ \/\/ Initial mount. Test that this is async.\n+ root.render();\n+ \/\/ Should not have flushed yet.\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(textarea).toBe(undefined);\n+ \/\/ Flush callbacks.\n+ expect(Scheduler).toFlushAndYield(['render: initial']);\n+ expect(textarea.value).toBe('initial');\n+\n+ \/\/ Trigger a change event.\n+ setUntrackedTextareaValue.call(textarea, 'changed');\n+ textarea.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Change should synchronously flush\n+ expect(Scheduler).toHaveYielded(['render: changed']);\n+ \/\/ Value should be the controlled value, not the original one\n+ expect(textarea.value).toBe('changed [!]');\n+ });\n+\n+ \/\/ @gate experimental\n+ it('parent of input', () => {\n+ const root = ReactDOM.createRoot(container);\n+ let input;\n+\n+ class ControlledInput extends React.Component {\n+ state = {value: 'initial'};\n+ onChange = event => this.setState({value: event.target.value});\n+ render() {\n+ Scheduler.unstable_yieldValue(`render: ${this.state.value}`);\n+ const controlledValue =\n+ this.state.value === 'changed' ? 'changed [!]' : this.state.value;\n+ return (\n+

\n+ (input = el)}\n+ type=\"text\"\n+ value={controlledValue}\n+ onChange={() => {\n+ \/\/ Does nothing. Parent handler is responsible for updating.\n+ }}\n+ \/>\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ \/\/ Initial mount. Test that this is async.\n+ root.render();\n+ \/\/ Should not have flushed yet.\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(input).toBe(undefined);\n+ \/\/ Flush callbacks.\n+ expect(Scheduler).toFlushAndYield(['render: initial']);\n+ expect(input.value).toBe('initial');\n+\n+ \/\/ Trigger a change event.\n+ setUntrackedValue.call(input, 'changed');\n+ input.dispatchEvent(\n+ new Event('input', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Change should synchronously flush\n+ expect(Scheduler).toHaveYielded(['render: changed']);\n+ \/\/ Value should be the controlled value, not the original one\n+ expect(input.value).toBe('changed [!]');\n+ });\n+\n+ \/\/ @gate experimental\n+ it('is async for non-input events', () => {\n+ const root = ReactDOM.createRoot(container);\n+ let input;\n+\n+ class ControlledInput extends React.Component {\n+ state = {value: 'initial'};\n+ onChange = event => this.setState({value: event.target.value});\n+ reset = () => {\n+ this.setState({value: ''});\n+ };\n+ render() {\n+ Scheduler.unstable_yieldValue(`render: ${this.state.value}`);\n+ const controlledValue =\n+ this.state.value === 'changed' ? 'changed [!]' : this.state.value;\n+ return (\n+ (input = el)}\n+ type=\"text\"\n+ value={controlledValue}\n+ onChange={this.onChange}\n+ onClick={this.reset}\n+ \/>\n+ );\n+ }\n+ }\n+\n+ \/\/ Initial mount. Test that this is async.\n+ root.render();\n+ \/\/ Should not have flushed yet.\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(input).toBe(undefined);\n+ \/\/ Flush callbacks.\n+ expect(Scheduler).toFlushAndYield(['render: initial']);\n+ expect(input.value).toBe('initial');\n+\n+ \/\/ Trigger a click event\n+ input.dispatchEvent(\n+ new Event('click', {bubbles: true, cancelable: true}),\n+ );\n+ \/\/ Nothing should have changed\n+ expect(Scheduler).toHaveYielded([]);\n+ expect(input.value).toBe('initial');\n+\n+ \/\/ Flush callbacks.\n+ \/\/ Now the click update has flushed.\n+ expect(Scheduler).toFlushAndYield(['render: ']);\n+ expect(input.value).toBe('');\n+ });\n+\n+ \/\/ @gate experimental\n+ it('mouse enter\/leave should be user-blocking but not discrete', async () => {\n+ \/\/ This is currently behind a feature flag\n+ jest.resetModules();\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ TestUtils = require('react-dom\/test-utils');\n+ Scheduler = require('scheduler');\n+\n+ const {act} = TestUtils;\n+ const {useState} = React;\n+\n+ const root = ReactDOM.createRoot(container);\n+\n+ const target = React.createRef(null);\n+ function Foo() {\n+ const [isHover, setHover] = useState(false);\n+ return (\n+ setHover(true)}\n+ onMouseLeave={() => setHover(false)}>\n+ {isHover ? 'hovered' : 'not hovered'}\n+ <\/div>\n+ );\n+ }\n+\n+ await act(async () => {\n+ root.render();\n+ });\n+ expect(container.textContent).toEqual('not hovered');\n+\n+ await act(async () => {\n+ const mouseOverEvent = document.createEvent('MouseEvents');\n+ mouseOverEvent.initEvent('mouseover', true, true);\n+ target.current.dispatchEvent(mouseOverEvent);\n+\n+ \/\/ 3s should be enough to expire the updates\n+ Scheduler.unstable_advanceTime(3000);\n+ expect(Scheduler).toFlushExpired([]);\n+ expect(container.textContent).toEqual('hovered');\n+ });\n+ });\n+ });\n+});\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernEnterLeaveEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernEnterLeaveEventPlugin-test.internal.js\nnew file mode 100644\nindex 0000000000..b7dcab6142\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernEnterLeaveEventPlugin-test.internal.js\n@@ -0,0 +1,239 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactDOM;\n+\n+describe('EnterLeaveEventPlugin', () => {\n+ let container;\n+\n+ beforeEach(() => {\n+ jest.resetModules();\n+\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ \/\/ The container has to be attached for events to fire.\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ it('should set onMouseLeave relatedTarget properly in iframe', () => {\n+ const iframe = document.createElement('iframe');\n+ container.appendChild(iframe);\n+ const iframeDocument = iframe.contentDocument;\n+ iframeDocument.write(\n+ '<\/head>

<\/div><\/body><\/html>',\n+ );\n+ iframeDocument.close();\n+\n+ const leaveEvents = [];\n+ const node = ReactDOM.render(\n+ {\n+ e.persist();\n+ leaveEvents.push(e);\n+ }}\n+ \/>,\n+ iframeDocument.body.getElementsByTagName('div')[0],\n+ );\n+\n+ node.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: iframe.contentWindow,\n+ }),\n+ );\n+\n+ expect(leaveEvents.length).toBe(1);\n+ expect(leaveEvents[0].target).toBe(node);\n+ expect(leaveEvents[0].relatedTarget).toBe(iframe.contentWindow);\n+ });\n+\n+ it('should set onMouseEnter relatedTarget properly in iframe', () => {\n+ const iframe = document.createElement('iframe');\n+ container.appendChild(iframe);\n+ const iframeDocument = iframe.contentDocument;\n+ iframeDocument.write(\n+ '<\/head>

<\/div><\/body><\/html>',\n+ );\n+ iframeDocument.close();\n+\n+ const enterEvents = [];\n+ const node = ReactDOM.render(\n+ {\n+ e.persist();\n+ enterEvents.push(e);\n+ }}\n+ \/>,\n+ iframeDocument.body.getElementsByTagName('div')[0],\n+ );\n+\n+ node.dispatchEvent(\n+ new MouseEvent('mouseover', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: null,\n+ }),\n+ );\n+\n+ expect(enterEvents.length).toBe(1);\n+ expect(enterEvents[0].target).toBe(node);\n+ expect(enterEvents[0].relatedTarget).toBe(iframe.contentWindow);\n+ });\n+\n+ \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/10906.\n+ it('should find the common parent after updates', () => {\n+ let parentEnterCalls = 0;\n+ let childEnterCalls = 0;\n+ let parent = null;\n+\n+ class Parent extends React.Component {\n+ render() {\n+ return (\n+ parentEnterCalls++}\n+ ref={node => (parent = node)}>\n+ {this.props.showChild && (\n+

childEnterCalls++} \/>\n+ )}\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+ \/\/ The issue only reproduced on insertion during the first update.\n+ ReactDOM.render(, container);\n+\n+ \/\/ Enter from parent into the child.\n+ parent.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: parent.firstChild,\n+ }),\n+ );\n+\n+ \/\/ Entering a child should fire on the child, not on the parent.\n+ expect(childEnterCalls).toBe(1);\n+ expect(parentEnterCalls).toBe(0);\n+ });\n+\n+ \/\/ Test for https:\/\/github.com\/facebook\/react\/issues\/16763.\n+ it('should call mouseEnter once from sibling rendered inside a rendered component', done => {\n+ const mockFn = jest.fn();\n+\n+ class Parent extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ this.parentEl = React.createRef();\n+ }\n+\n+ componentDidMount() {\n+ ReactDOM.render(, this.parentEl.current);\n+ }\n+\n+ render() {\n+ return

;\n+ }\n+ }\n+\n+ class MouseEnterDetect extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ this.firstEl = React.createRef();\n+ this.siblingEl = React.createRef();\n+ }\n+\n+ componentDidMount() {\n+ this.siblingEl.current.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: this.firstEl.current,\n+ }),\n+ );\n+ expect(mockFn.mock.calls.length).toBe(1);\n+ done();\n+ }\n+\n+ render() {\n+ return (\n+ \n+

\n+

\n+ <\/React.Fragment>\n+ );\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+ });\n+\n+ it('should call mouseEnter when pressing a non tracked React node', done => {\n+ const mockFn = jest.fn();\n+\n+ class Parent extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ this.parentEl = React.createRef();\n+ }\n+\n+ componentDidMount() {\n+ ReactDOM.render(, this.parentEl.current);\n+ }\n+\n+ render() {\n+ return

;\n+ }\n+ }\n+\n+ class MouseEnterDetect extends React.Component {\n+ constructor(props) {\n+ super(props);\n+ this.divRef = React.createRef();\n+ this.siblingEl = React.createRef();\n+ }\n+\n+ componentDidMount() {\n+ const attachedNode = document.createElement('div');\n+ this.divRef.current.appendChild(attachedNode);\n+ attachedNode.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: this.siblingEl.current,\n+ }),\n+ );\n+ expect(mockFn.mock.calls.length).toBe(1);\n+ done();\n+ }\n+\n+ render() {\n+ return (\n+

\n+

\n+ <\/div>\n+ );\n+ }\n+ }\n+\n+ ReactDOM.render(, container);\n+ });\n+});\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.internal.js\nnew file mode 100644\nindex 0000000000..8ab7eccf75\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.internal.js\n@@ -0,0 +1,145 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+let React;\n+let ReactDOM;\n+\n+describe('SelectEventPlugin', () => {\n+ let container;\n+\n+ beforeEach(() => {\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ \/\/ See https:\/\/github.com\/facebook\/react\/pull\/3639 for details.\n+ it('does not get confused when dependent events are registered independently', () => {\n+ const select = jest.fn();\n+ const onSelect = event => {\n+ expect(typeof event).toBe('object');\n+ expect(event.type).toBe('select');\n+ expect(event.target).toBe(node);\n+ select(event.currentTarget);\n+ };\n+\n+ \/\/ Pass `onMouseDown` so React registers a top-level listener.\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+\n+ \/\/ Trigger `mousedown` and `mouseup`. Note that\n+ \/\/ React is not currently listening to `mouseup`.\n+ node.dispatchEvent(\n+ new MouseEvent('mousedown', {\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+ node.dispatchEvent(\n+ new MouseEvent('mouseup', {\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+\n+ \/\/ Now subscribe to `onSelect`.\n+ ReactDOM.render(, container);\n+ node.focus();\n+\n+ \/\/ This triggers a `select` event in our polyfill.\n+ node.dispatchEvent(\n+ new KeyboardEvent('keydown', {bubbles: true, cancelable: true}),\n+ );\n+\n+ \/\/ Verify that it doesn't get \"stuck\" waiting for\n+ \/\/ a `mouseup` event that it has \"missed\" because\n+ \/\/ a top-level listener didn't exist yet.\n+ expect(select).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('should fire `onSelect` when a listener is present', () => {\n+ const select = jest.fn();\n+ const onSelect = event => {\n+ expect(typeof event).toBe('object');\n+ expect(event.type).toBe('select');\n+ expect(event.target).toBe(node);\n+ select(event.currentTarget);\n+ };\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ node.focus();\n+\n+ let nativeEvent = new MouseEvent('focus', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('mousedown', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(1);\n+ });\n+\n+ \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/11379\n+ it('should not wait for `mouseup` after receiving `dragend`', () => {\n+ const select = jest.fn();\n+ const onSelect = event => {\n+ expect(typeof event).toBe('object');\n+ expect(event.type).toBe('select');\n+ expect(event.target).toBe(node);\n+ select(event.currentTarget);\n+ };\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ node.focus();\n+\n+ let nativeEvent = new MouseEvent('focus', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('mousedown', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('dragend', {bubbles: true, cancelable: true});\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(1);\n+ });\n+});\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSimpleEventPlugin-test.internal.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSimpleEventPlugin-test.internal.js\nnew file mode 100644\nindex 0000000000..f015689703\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSimpleEventPlugin-test.internal.js\n@@ -0,0 +1,489 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+describe('SimpleEventPlugin', function() {\n+ let React;\n+ let ReactDOM;\n+ let Scheduler;\n+\n+ let onClick;\n+ let container;\n+\n+ function expectClickThru(element) {\n+ element.click();\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ }\n+\n+ function expectNoClickThru(element) {\n+ element.click();\n+ expect(onClick).toHaveBeenCalledTimes(0);\n+ }\n+\n+ function mounted(element) {\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ element = ReactDOM.render(element, container);\n+ return element;\n+ }\n+\n+ beforeEach(function() {\n+ jest.resetModules();\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+\n+ onClick = jest.fn();\n+ });\n+\n+ afterEach(() => {\n+ if (container && document.body.contains(container)) {\n+ document.body.removeChild(container);\n+ container = null;\n+ }\n+ });\n+\n+ it('A non-interactive tags click when disabled', function() {\n+ const element =

;\n+ expectClickThru(mounted(element));\n+ });\n+\n+ it('A non-interactive tags clicks bubble when disabled', function() {\n+ const element = mounted(\n+

\n+

\n+ <\/div>,\n+ );\n+ const child = element.firstChild;\n+ child.click();\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('does not register a click when clicking a child of a disabled element', function() {\n+ const element = mounted(\n+

dillon1000/react

Files changed