Trigger a fragment instances own listeners with dispatchEvent

jackpope · jackpope · commit fc9cdaba7a9e · 2025-05-06T13:04:14.000-04:00
diff --git a/fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js b/fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js
@@ -8,11 +8,6 @@ function WrapperComponent(props) {
   return props.children;
 }
 
-function handler(e) {
-  const text = e.currentTarget.innerText;
-  alert('You clicked: ' + text);
-}
-
 const initialState = {
   child: false,
   parent: false,
@@ -22,67 +17,133 @@ const initialState = {
 export default function EventListenerCase() {
   const fragmentRef = useRef(null);
   const [clickedState, setClickedState] = useState({...initialState});
+  const [fragmentEventFired, setFragmentEventFired] = useState(false);
+  const [bubblesState, setBubblesState] = useState(true);
+
+  function setClick(id) {
+    setClickedState(prev => ({...prev, [id]: true}));
+  }
+
+  function fragmentClickHandler(e) {
+    setFragmentEventFired(true);
+  }
 
   return (
     <TestCase title="Event Dispatch">
       <TestCase.Steps>
         <li>
-          Each div has regular click handlers, you can click each one to observe
-          the status changing
+          Each box has regular click handlers, you can click each one to observe
+          the status changing through standard bubbling.
         </li>
         <li>Clear the clicked state</li>
         <li>
           Click the "Dispatch click event" button to dispatch a click event on
-          the Fragment
+          the Fragment. The event will be dispatched on the Fragment's parent,
+          so the child will not change state.
+        </li>
+        <li>
+          Click the "Add event listener" button to add a click event listener on
+          the Fragment. This registers a handler that will turn the child blue
+          on click.
+        </li>
+        <li>
+          Now click the "Dispatch click event" button again. You can see that it
+          will fire the Fragment's event handler in addition to bubbling the
+          click from the parent.
+        </li>
+        <li>
+          If you turn off bubbling, only the Fragment's event handler will be
+          called.
         </li>
       </TestCase.Steps>
 
       <TestCase.ExpectedResult>
-        Dispatching an event on a Fragment will forward the dispatch to its
-        parent. You can observe when dispatching that the parent handler is
-        called in additional to bubbling from there. A delay is added to make
-        the bubbling more clear.
+        <p>
+          Dispatching an event on a Fragment will forward the dispatch to its
+          parent for the standard case. You can observe when dispatching that
+          the parent handler is called in additional to bubbling from there. A
+          delay is added to make the bubbling more clear.{' '}
+        </p>
+        <p>
+          When there have been event handlers added to the Fragment, the
+          Fragment's event handler will be called in addition to bubbling from
+          the parent. Without bubbling, only the Fragment's event handler will
+          be called.
+        </p>
       </TestCase.ExpectedResult>
 
       <Fixture>
         <Fixture.Controls>
+          <select
+            value={bubblesState ? 'true' : 'false'}
+            onChange={e => {
+              setBubblesState(e.target.value === 'true');
+            }}>
+            <option value="true">Bubbles: true</option>
+            <option value="false">Bubbles: false</option>
+          </select>
           <button
             onClick={() => {
               fragmentRef.current.dispatchEvent(
-                new MouseEvent('click', {bubbles: true})
+                new MouseEvent('click', {bubbles: bubblesState})
               );
             }}>
             Dispatch click event
           </button>
           <button
             onClick={() => {
               setClickedState({...initialState});
+              setFragmentEventFired(false);
             }}>
             Reset clicked state
           </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.addEventListener(
+                'click',
+                fragmentClickHandler
+              );
+            }}>
+            Add event listener
+          </button>
+          <button
+            onClick={() => {
+              fragmentRef.current.removeEventListener(
+                'click',
+                fragmentClickHandler
+              );
+            }}>
+            Remove event listener
+          </button>
         </Fixture.Controls>
         <div
-          onClick={() => {
+          id="grandparent"
+          onClick={e => {
             setTimeout(() => {
-              setClickedState(prev => ({...prev, grandparent: true}));
+              setClick('grandparent');
             }, 200);
           }}
           className="card">
           Fragment grandparent - clicked:{' '}
           {clickedState.grandparent ? 'true' : 'false'}
           <div
-            onClick={() => {
+            id="parent"
+            onClick={e => {
               setTimeout(() => {
-                setClickedState(prev => ({...prev, parent: true}));
+                setClick('parent');
               }, 100);
             }}
             className="card">
             Fragment parent - clicked: {clickedState.parent ? 'true' : 'false'}
             <Fragment ref={fragmentRef}>
               <div
+                style={{
+                  backgroundColor: fragmentEventFired ? 'lightblue' : 'inherit',
+                }}
+                id="child"
                 className="card"
-                onClick={() => {
-                  setClickedState(prev => ({...prev, child: true}));
+                onClick={e => {
+                  setClick('child');
                 }}>
                 Fragment child - clicked:{' '}
                 {clickedState.child ? 'true' : 'false'}
diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
@@ -2699,17 +2699,36 @@ FragmentInstance.prototype.dispatchEvent = function (
   this: FragmentInstanceType,
   event: Event,
 ): boolean {
-  const parentHostInstance = getFragmentParentHostInstance(this._fragmentFiber);
-  if (parentHostInstance === null) {
-    if (__DEV__) {
-      console.error(
-        'You are attempting to dispatch an event on a disconnected ' +
-          'FragmentInstance. No event was dispatched.',
-      );
-    }
+  const parentHostFiber = getFragmentParentHostFiber(this._fragmentFiber);
+  if (parentHostFiber === null) {
     return true;
   }
-  return parentHostInstance.dispatchEvent(event);
+  const parentHostInstance = getInstanceFromHostFiber(parentHostFiber);
+  const eventListeners = this._eventListeners;
+  if (
+    (eventListeners !== null && eventListeners.length > 0) ||
+    !event.bubbles
+  ) {
+    const temp = document.createTextNode('');
+    if (eventListeners) {
+      for (let i = 0; i < eventListeners.length; i++) {
+        const {type, listener, optionsOrUseCapture} = eventListeners[i];
+        temp.addEventListener(type, listener, optionsOrUseCapture);
+      }
+    }
+    parentHostInstance.appendChild(temp);
+    const cancelable = temp.dispatchEvent(event);
+    if (eventListeners) {
+      for (let i = 0; i < eventListeners.length; i++) {
+        const {type, listener, optionsOrUseCapture} = eventListeners[i];
+        temp.removeEventListener(type, listener, optionsOrUseCapture);
+      }
+    }
+    parentHostInstance.removeChild(temp);
+    return cancelable;
+  } else {
+    return parentHostInstance.dispatchEvent(event);
+  }
 };
 // $FlowFixMe[prop-missing]
 FragmentInstance.prototype.focus = function (
diff --git a/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js b/packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js
@@ -789,7 +789,7 @@ describe('FragmentRefs', () => {
 
     describe('dispatchEvent()', () => {
       // @gate enableFragmentRefs
-      it('fires events on the host parent', async () => {
+      it('fires events on the host parent if bubbles=true', async () => {
         const fragmentRef = React.createRef();
         const root = ReactDOMClient.createRoot(container);
         let logs = [];
@@ -835,16 +835,56 @@ describe('FragmentRefs', () => {
         isCancelable = !fragmentInstanceHandle.dispatchEvent(
           new MouseEvent('click', {bubbles: true}),
         );
-        assertConsoleErrorDev(
-          [
-            'You are attempting to dispatch an event on a disconnected ' +
-              'FragmentInstance. No event was dispatched.',
-          ],
-          {withoutStack: true},
+        expect(logs).toEqual([]);
+        expect(isCancelable).toBe(false);
+
+        logs = [];
+        isCancelable = !fragmentInstanceHandle.dispatchEvent(
+          new MouseEvent('click', {bubbles: false}),
         );
         expect(logs).toEqual([]);
         expect(isCancelable).toBe(false);
       });
+
+      // @gate enableFragmentRefs
+      it('fires events on self, and only self if bubbles=false', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(container);
+        let logs = [];
+
+        function handleClick(e) {
+          logs.push([e.type, e.target.id, e.currentTarget.id]);
+        }
+
+        function Test() {
+          return (
+            <div id="parent" onClick={handleClick}>
+              <Fragment ref={fragmentRef} />
+            </div>
+          );
+        }
+
+        await act(() => {
+          root.render(<Test />);
+        });
+
+        fragmentRef.current.addEventListener('click', handleClick);
+
+        fragmentRef.current.dispatchEvent(
+          new MouseEvent('click', {bubbles: true}),
+        );
+        expect(logs).toEqual([
+          ['click', undefined, undefined],
+          ['click', 'parent', 'parent'],
+        ]);
+
+        logs = [];
+
+        fragmentRef.current.dispatchEvent(
+          new MouseEvent('click', {bubbles: false}),
+        );
+        expect(logs).toEqual([['click', undefined, undefined]]);
+      });
     });
   });
 
