[react-interactions] Remove responder root event types + revert commit phase change (#17577)

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -52,7 +52,6 @@ import type {
   ReactDOMFundamentalComponentInstance,
 } from 'shared/ReactDOMTypes';
 import {
-  addRootEventTypesForResponderInstance,
   mountEventResponder,
   unmountEventResponder,
   dispatchEventForResponderEventSystem,
@@ -954,17 +953,10 @@ export function mountResponderInstance(
 ): ReactDOMEventResponderInstance {
   // Listen to events
   const doc = instance.ownerDocument;
-  const {
-    rootEventTypes,
-    targetEventTypes,
-  } = ((responder: any): ReactDOMEventResponder);
+  const {targetEventTypes} = ((responder: any): ReactDOMEventResponder);
   if (targetEventTypes !== null) {
     listenToEventResponderEventTypes(targetEventTypes, doc);
   }
-  if (rootEventTypes !== null) {
-    addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
-    listenToEventResponderEventTypes(rootEventTypes, doc);
-  }
   mountEventResponder(
     responder,
     responderInstance,

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

@@ -23,7 +23,6 @@ const DiscreteEvent = 0;
 function createEventResponder({
   onEvent,
   onRootEvent,
-  rootEventTypes,
   targetEventTypes,
   onMount,
   onUnmount,
@@ -32,7 +31,6 @@ function createEventResponder({
 }) {
   return React.unstable_createResponder('TestEventResponder', {
     targetEventTypes,
-    rootEventTypes,
     onEvent,
     onRootEvent,
     onMount,
@@ -616,43 +614,6 @@ describe('DOMEventResponderSystem', () => {
     expect(counter).toEqual(5);
   });
 
-  it('the event responder root listeners should fire on a root click event', () => {
-    let eventResponderFiredCount = 0;
-    let eventLog = [];
-
-    const TestResponder = createEventResponder({
-      rootEventTypes: ['click'],
-      onRootEvent: event => {
-        eventResponderFiredCount++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-          phase: 'root',
-        });
-      },
-    });
-
-    const Test = () => {
-      const listener = React.unstable_useResponder(TestResponder, {});
-      return <button DEPRECATED_flareListeners={listener}>Click me!</button>;
-    };
-
-    ReactDOM.render(<Test />, container);
-    expect(container.innerHTML).toBe('<button>Click me!</button>');
-
-    // Clicking the button should trigger the event responder onEvent() twice
-    dispatchClickEvent(document.body);
-    expect(eventResponderFiredCount).toBe(1);
-    expect(eventLog.length).toBe(1);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-        phase: 'root',
-      },
-    ]);
-  });
-
   it('the event responder target listeners should correctly fire for only their events', () => {
     let clickEventComponent1Fired = 0;
     let clickEventComponent2Fired = 0;
@@ -714,65 +675,6 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
-  it('the event responder root listeners should correctly fire for only their events', () => {
-    let clickEventComponent1Fired = 0;
-    let clickEventComponent2Fired = 0;
-    let eventLog = [];
-
-    const TestResponderA = createEventResponder({
-      rootEventTypes: ['click_active'],
-      onRootEvent: event => {
-        clickEventComponent1Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-        });
-      },
-    });
-
-    const TestResponderB = createEventResponder({
-      rootEventTypes: ['click'],
-      onRootEvent: event => {
-        clickEventComponent2Fired++;
-        eventLog.push({
-          name: event.type,
-          passive: event.passive,
-        });
-      },
-    });
-
-    const Test = () => {
-      const listener = React.unstable_useResponder(TestResponderA, {});
-      const listener2 = React.unstable_useResponder(TestResponderB, {});
-
-      return (
-        <div DEPRECATED_flareListeners={listener}>
-          <button DEPRECATED_flareListeners={listener2}>Click me!</button>
-        </div>
-      );
-    };
-
-    ReactDOM.render(<Test />, container);
-
-    dispatchClickEvent(document.body);
-
-    expect(clickEventComponent1Fired).toBe(1);
-    expect(clickEventComponent2Fired).toBe(1);
-    expect(eventLog.length).toBe(2);
-    expect(eventLog).toEqual([
-      {
-        name: 'click',
-        passive: false,
-      },
-      {
-        name: 'click',
-        passive: false,
-      },
-    ]);
-
-    ReactDOM.render(<Test />, container);
-  });
-
   it('the event responder system should warn on accessing invalid properties', () => {
     const TestResponder = createEventResponder({
       targetEventTypes: ['click'],

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -29,7 +29,6 @@ import warningWithoutStack from 'shared/warningWithoutStack';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 import {
-  addRootEventTypesForResponderInstance,
   mountEventResponder,
   unmountEventResponder,
 } from './ReactFabricEventResponderSystem';
@@ -453,10 +452,6 @@ export function mountResponderInstance(
   instance: Instance,
 ) {
   if (enableFlareAPI) {
-    const {rootEventTypes} = responder;
-    if (rootEventTypes !== null) {
-      addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
-    }
     mountEventResponder(responder, responderInstance, props, state);
   }
 }

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -1357,7 +1357,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         if (enableFlareAPI) {
           const prevListeners = oldProps.DEPRECATED_flareListeners;
           const nextListeners = newProps.DEPRECATED_flareListeners;
-          if (prevListeners !== nextListeners || current === null) {
+          if (prevListeners !== nextListeners) {
             updateLegacyEventListeners(nextListeners, finishedWork, null);
           }
         }

packages/react-reconciler/src/ReactFiberCompleteWork.js

@@ -128,6 +128,7 @@ import {
 import {createFundamentalStateInstance} from './ReactFiberFundamental';
 import {Never} from './ReactFiberExpirationTime';
 import {resetChildFibers} from './ReactChildFiber';
+import {updateLegacyEventListeners} from './ReactFiberEvents';
 import {createScopeMethods} from './ReactFiberScope';
 
 function markUpdate(workInProgress: Fiber) {
@@ -729,7 +730,11 @@ function completeWork(
           if (enableFlareAPI) {
             const listeners = newProps.DEPRECATED_flareListeners;
             if (listeners != null) {
-              markUpdate(workInProgress);
+              updateLegacyEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
             }
           }
         } else {
@@ -749,7 +754,11 @@ function completeWork(
           if (enableFlareAPI) {
             const listeners = newProps.DEPRECATED_flareListeners;
             if (listeners != null) {
-              markUpdate(workInProgress);
+              updateLegacyEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
             }
           }
 
@@ -1255,7 +1264,12 @@ function completeWork(
           if (enableFlareAPI) {
             const listeners = newProps.DEPRECATED_flareListeners;
             if (listeners != null) {
-              markUpdate(workInProgress);
+              const rootContainerInstance = getRootHostContainer();
+              updateLegacyEventListeners(
+                listeners,
+                workInProgress,
+                rootContainerInstance,
+              );
             }
           }
           if (workInProgress.ref !== null) {

packages/shared/ReactTypes.js

@@ -97,7 +97,6 @@ export type ReactEventResponder<E, C> = {
   displayName: string,
   targetEventTypes: null | Array<string>,
   targetPortalPropagation: boolean,
-  rootEventTypes: null | Array<string>,
   getInitialState: null | ((props: Object) => Object),
   onEvent:
     | null