Modern event system: fix selectionchange bug (facebook#18680)

Author: trueadm

packages/react-dom/src/events/DOMEventListenerMap.js

@@ -43,14 +43,28 @@ export function isListeningToAllDependencies(
   registrationName: string,
   mountAt: Document | Element,
 ): boolean {
-  const listenerMap = getListenerMapForElement(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
+  return isListeningToEvents(dependencies, mountAt);
+}
 
-  for (let i = 0; i < dependencies.length; i++) {
-    const dependency = dependencies[i];
-    if (!listenerMap.has(dependency)) {
+export function isListeningToEvents(
+  events: Array<string>,
+  mountAt: Document | Element,
+): boolean {
+  const listenerMap = getListenerMapForElement(mountAt);
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    if (!listenerMap.has(event)) {
       return false;
     }
   }
   return true;
 }
+
+export function isListeningToEvent(
+  registrationName: string,
+  mountAt: Document | Element,
+): boolean {
+  const listenerMap = getListenerMapForElement(mountAt);
+  return listenerMap.has(registrationName);
+}

packages/react-dom/src/events/DOMModernPluginEventSystem.js

@@ -82,6 +82,7 @@ import {
   TOP_CLICK,
   TOP_BEFORE_BLUR,
   TOP_AFTER_BLUR,
+  TOP_SELECTION_CHANGE,
 } from './DOMTopLevelEventTypes';
 import {
   getClosestInstanceFromNode,
@@ -250,23 +251,21 @@ function dispatchEventsForPlugins(
 
   for (let i = 0; i < plugins.length; i++) {
     const possiblePlugin: PluginModule<AnyNativeEvent> = plugins[i];
-    if (possiblePlugin !== undefined) {
-      const extractedEvents = possiblePlugin.extractEvents(
-        topLevelType,
-        targetInst,
-        nativeEvent,
-        nativeEventTarget,
-        eventSystemFlags,
-        targetContainer,
-      );
-      if (isArray(extractedEvents)) {
-        // Flow complains about @@iterator being missing in ReactSyntheticEvent,
-        // so we cast to avoid the Flow error.
-        const arrOfExtractedEvents = ((extractedEvents: any): Array<ReactSyntheticEvent>);
-        syntheticEvents.push(...arrOfExtractedEvents);
-      } else if (extractedEvents != null) {
-        syntheticEvents.push(extractedEvents);
-      }
+    const extractedEvents = possiblePlugin.extractEvents(
+      topLevelType,
+      targetInst,
+      nativeEvent,
+      nativeEventTarget,
+      eventSystemFlags,
+      targetContainer,
+    );
+    if (isArray(extractedEvents)) {
+      // Flow complains about @@iterator being missing in ReactSyntheticEvent,
+      // so we cast to avoid the Flow error.
+      const arrOfExtractedEvents = ((extractedEvents: any): Array<ReactSyntheticEvent>);
+      syntheticEvents.push(...arrOfExtractedEvents);
+    } else if (extractedEvents != null) {
+      syntheticEvents.push(extractedEvents);
     }
   }
   dispatchEventsInBatch(syntheticEvents);
@@ -314,6 +313,14 @@ export function listenToTopLevelEvent(
     capture === undefined
       ? topLevelType
       : `${typeStr}_${capture ? 'capture' : 'bubble'}`;
+
+  // TOP_SELECTION_CHANGE needs to be attached to the document
+  // otherwise it won't capture incoming events that are only
+  // triggered on the document directly.
+  if (topLevelType === TOP_SELECTION_CHANGE) {
+    targetContainer = (targetContainer: any).ownerDocument || targetContainer;
+    listenerMap = getListenerMapForElement(targetContainer);
+  }
   const listenerEntry = listenerMap.get(listenerMapKey);
   const shouldUpgrade = shouldUpgradeListener(listenerEntry, passive);
   if (listenerEntry === undefined || shouldUpgrade) {

packages/react-dom/src/events/plugins/ModernSelectEventPlugin.js

@@ -25,29 +25,30 @@ import getActiveElement from '../../client/getActiveElement';
 import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
 import {hasSelectionCapabilities} from '../../client/ReactInputSelection';
 import {DOCUMENT_NODE} from '../../shared/HTMLNodeType';
-import {isListeningToAllDependencies} from '../DOMEventListenerMap';
+import {isListeningToEvent, isListeningToEvents} from '../DOMEventListenerMap';
 import {accumulateTwoPhaseListeners} from '../DOMModernPluginEventSystem';
 
 const skipSelectionChangeEvent =
   canUseDOM && 'documentMode' in document && document.documentMode <= 11;
 
+const rootTargetDependencies = [
+  TOP_BLUR,
+  TOP_CONTEXT_MENU,
+  TOP_DRAG_END,
+  TOP_FOCUS,
+  TOP_KEY_DOWN,
+  TOP_KEY_UP,
+  TOP_MOUSE_DOWN,
+  TOP_MOUSE_UP,
+];
+
 const eventTypes = {
   select: {
     phasedRegistrationNames: {
       bubbled: 'onSelect',
       captured: 'onSelectCapture',
     },
-    dependencies: [
-      TOP_BLUR,
-      TOP_CONTEXT_MENU,
-      TOP_DRAG_END,
-      TOP_FOCUS,
-      TOP_KEY_DOWN,
-      TOP_KEY_UP,
-      TOP_MOUSE_DOWN,
-      TOP_MOUSE_UP,
-      TOP_SELECTION_CHANGE,
-    ],
+    dependencies: [...rootTargetDependencies, TOP_SELECTION_CHANGE],
   },
 };
 
@@ -168,13 +169,19 @@ const SelectEventPlugin = {
     eventSystemFlags,
     container,
   ) {
-    const containerOrDoc =
-      container || getEventTargetDocument(nativeEventTarget);
+    const doc = getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do
     // not extract events. See #3639.
     if (
-      !containerOrDoc ||
-      !isListeningToAllDependencies('onSelect', containerOrDoc)
+      // We only listen to TOP_SELECTION_CHANGE on the document, never the
+      // root.
+      !isListeningToEvent(TOP_SELECTION_CHANGE, doc) ||
+      // If we are handling TOP_SELECTION_CHANGE, then we don't need to
+      // check for the other dependencies, as TOP_SELECTION_CHANGE is only
+      // event attached from the onChange plugin and we don't expose an
+      // onSelectionChange event from React.
+      (topLevelType !== TOP_SELECTION_CHANGE &&
+        !isListeningToEvents(rootTargetDependencies, container))
     ) {
       return null;
     }

packages/react-dom/src/events/plugins/__tests__/LegacySelectEventPlugin-test.js

@@ -142,4 +142,23 @@ describe('SelectEventPlugin', () => {
     node.dispatchEvent(nativeEvent);
     expect(select).toHaveBeenCalledTimes(1);
   });
+
+  it('should handle selectionchange events', function() {
+    const onSelect = jest.fn();
+    const node = ReactDOM.render(
+      <input type="text" onSelect={onSelect} />,
+      container,
+    );
+    node.focus();
+
+    // Make sure the event was not called before we emit the selection change event
+    expect(onSelect).toHaveBeenCalledTimes(0);
+
+    // This is dispatched e.g. when using CMD+a on macOS
+    document.dispatchEvent(
+      new Event('selectionchange', {bubbles: false, cancelable: false}),
+    );
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
 });

packages/react-dom/src/events/plugins/__tests__/ModernBeforeInputEventPlugin-test.internal.js

@@ -21,6 +21,8 @@ describe('BeforeInputEventPlugin', () => {
     if (envSimulator) {
       envSimulator();
     }
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableModernEventSystem = true;
     return require('react-dom');
   }
 
@@ -78,8 +80,6 @@ describe('BeforeInputEventPlugin', () => {
   }
 
   beforeEach(() => {
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableModernEventSystem = true;
     React = require('react');
     container = document.createElement('div');
     document.body.appendChild(container);

packages/react-dom/src/events/plugins/__tests__/ModernSelectEventPlugin-test.internal.js

@@ -145,4 +145,23 @@ describe('SelectEventPlugin', () => {
     node.dispatchEvent(nativeEvent);
     expect(select).toHaveBeenCalledTimes(1);
   });
+
+  it('should handle selectionchange events', function() {
+    const onSelect = jest.fn();
+    const node = ReactDOM.render(
+      <input type="text" onSelect={onSelect} />,
+      container,
+    );
+    node.focus();
+
+    // Make sure the event was not called before we emit the selection change event
+    expect(onSelect).toHaveBeenCalledTimes(0);
+
+    // This is dispatched e.g. when using CMD+a on macOS
+    document.dispatchEvent(
+      new Event('selectionchange', {bubbles: false, cancelable: false}),
+    );
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
 });