Add dispatchEvent to fragment instances

Author: jackpope

fixtures/dom/src/components/fixtures/fragment-refs/EventDispatchCase.js

@@ -0,0 +1,96 @@
+import TestCase from '../../TestCase';
+import Fixture from '../../Fixture';
+
+const React = window.React;
+const {Fragment, useRef, useState} = React;
+
+function WrapperComponent(props) {
+  return props.children;
+}
+
+function handler(e) {
+  const text = e.currentTarget.innerText;
+  alert('You clicked: ' + text);
+}
+
+const initialState = {
+  child: false,
+  parent: false,
+  grandparent: false,
+};
+
+export default function EventListenerCase() {
+  const fragmentRef = useRef(null);
+  const [clickedState, setClickedState] = useState({...initialState});
+
+  return (
+    <TestCase title="Event Dispatch">
+      <TestCase.Steps>
+        <li>
+          Each div has regular click handlers, you can click each one to observe
+          the status changing
+        </li>
+        <li>Clear the clicked state</li>
+        <li>
+          Click the "Dispatch click event" button to dispatch a click event on
+          the Fragment
+        </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.
+      </TestCase.ExpectedResult>
+
+      <Fixture>
+        <Fixture.Controls>
+          <button
+            onClick={() => {
+              fragmentRef.current.dispatchEvent(
+                new MouseEvent('click', {bubbles: true})
+              );
+            }}>
+            Dispatch click event
+          </button>
+          <button
+            onClick={() => {
+              setClickedState({...initialState});
+            }}>
+            Reset clicked state
+          </button>
+        </Fixture.Controls>
+        <div
+          onClick={() => {
+            setTimeout(() => {
+              setClickedState(prev => ({...prev, grandparent: true}));
+            }, 200);
+          }}
+          className="card">
+          Fragment grandparent - clicked:{' '}
+          {clickedState.grandparent ? 'true' : 'false'}
+          <div
+            onClick={() => {
+              setTimeout(() => {
+                setClickedState(prev => ({...prev, parent: true}));
+              }, 100);
+            }}
+            className="card">
+            Fragment parent - clicked: {clickedState.parent ? 'true' : 'false'}
+            <Fragment ref={fragmentRef}>
+              <div
+                className="card"
+                onClick={() => {
+                  setClickedState(prev => ({...prev, child: true}));
+                }}>
+                Fragment child - clicked:{' '}
+                {clickedState.child ? 'true' : 'false'}
+              </div>
+            </Fragment>
+          </div>
+        </div>
+      </Fixture>
+    </TestCase>
+  );
+}

fixtures/dom/src/components/fixtures/fragment-refs/index.js

@@ -1,5 +1,6 @@
 import FixtureSet from '../../FixtureSet';
 import EventListenerCase from './EventListenerCase';
+import EventDispatchCase from './EventDispatchCase';
 import IntersectionObserverCase from './IntersectionObserverCase';
 import ResizeObserverCase from './ResizeObserverCase';
 import FocusCase from './FocusCase';
@@ -11,6 +12,7 @@ export default function FragmentRefsPage() {
   return (
     <FixtureSet title="Fragment Refs">
       <EventListenerCase />
+      <EventDispatchCase />
       <IntersectionObserverCase />
       <ResizeObserverCase />
       <FocusCase />

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2236,6 +2236,7 @@ export type FragmentInstanceType = {
     listener: EventListener,
     optionsOrUseCapture?: EventListenerOptionsOrUseCapture,
   ): void,
+  dispatchEvent(event: Event): boolean,
   focus(focusOptions?: FocusOptions): void,
   focusLast(focusOptions?: FocusOptions): void,
   blur(): void,
@@ -2331,6 +2332,23 @@ function removeEventListenerFromChild(
   return false;
 }
 // $FlowFixMe[prop-missing]
+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.',
+      );
+    }
+    return true;
+  }
+  return parentHostInstance.dispatchEvent(event);
+};
+// $FlowFixMe[prop-missing]
 FragmentInstance.prototype.focus = function (
   this: FragmentInstanceType,
   focusOptions?: FocusOptions,