Add support for HostText being target

facebook · Mar 31, 2020 · b9266b1 · b9266b1
1 parent 6d5e3ad
commit b9266b1
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js
@@ -1317,6 +1317,34 @@ describe('DOMModernPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(0);
           });
 
+          it('should handle the target being a text node', () => {
+            const clickEvent = jest.fn();
+            const buttonRef = React.createRef();
+
+            function Test({off}) {
+              const click = ReactDOM.unstable_useEvent('click');
+
+              React.useEffect(() => {
+                click.setListener(buttonRef.current, clickEvent);
+              });
+
+              React.useEffect(() => {
+                if (off) {
+                  click.setListener(buttonRef.current, null);
+                }
+              }, [off]);
+
+              return <button ref={buttonRef}>Click me!</button>;
+            }
+
+            ReactDOM.render(<Test off={false} />, container);
+            Scheduler.unstable_flushAll();
+
+            let textNode = buttonRef.current.firstChild;
+            dispatchClickEvent(textNode);
+            expect(clickEvent).toBeCalledTimes(1);
+          });
+
           it('handle propagation of click events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();

diff --git a/packages/react-dom/src/events/accumulateTwoPhaseListeners.js b/packages/react-dom/src/events/accumulateTwoPhaseListeners.js
@@ -14,6 +14,7 @@ import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
 import {
   HostComponent,
   ScopeComponent,
+  HostText,
 } from 'react-reconciler/src/ReactWorkTags';
 import {
   enableUseEventAPI,
@@ -90,8 +91,9 @@ export default function accumulateTwoPhaseListeners(
 
     // Accumulate all instances and listeners via the target -> root path.
     while (node !== null) {
+      const tag = node.tag;
       // Handle listeners that are on HostComponents (i.e. <div>)
-      if (node.tag === HostComponent) {
+      if (tag === HostComponent) {
         const instance = node.stateNode;
         // For useEvent listenrs
         if (
@@ -144,12 +146,22 @@ export default function accumulateTwoPhaseListeners(
             dispatchInstances.push(node);
           }
         }
+      } else if (
+        enableModernEventSystem &&
+        enableUseEventAPI &&
+        accumulateUseEventListeners &&
+        tag === HostText
+      ) {
+        const instance = node.stateNode;
+        if (instance !== null) {
+          lastHostComponent = instance;
+        }
       } else if (
         enableModernEventSystem &&
         enableUseEventAPI &&
         enableScopeAPI &&
         accumulateUseEventListeners &&
-        node.tag === ScopeComponent &&
+        tag === ScopeComponent &&
         lastHostComponent !== null
       ) {
         const reactScope = node.stateNode.methods;