Add support of onBeforeToggle and onToggle

facebook · Feb 18, 2024 · 28f640d · 28f640d
1 parent 9336bf3
commit 28f640d
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 5 deletions.
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -796,6 +796,11 @@ function setProp(
       }
       break;
     }
+    case 'popover':
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
+      setValueForAttribute(domElement, 'popover', value);
+      break;
     case 'xlinkActuate':
       setValueForNamespacedAttribute(
         domElement,
@@ -2835,6 +2840,13 @@ export function diffHydratedProperties(
     }
   }
 
+  if (props.popover != null) {
+    // We listen to this event in case to ensure emulated bubble
+    // listeners still fire for the toggle event.
+    listenToNonDelegatedEvent('beforetoggle', domElement);
+    listenToNonDelegatedEvent('toggle', domElement);
+  }
+
   if (props.onScroll != null) {
     listenToNonDelegatedEvent('scroll', domElement);
   }

diff --git a/packages/react-dom-bindings/src/events/DOMEventNames.js b/packages/react-dom-bindings/src/events/DOMEventNames.js
@@ -18,6 +18,7 @@ export type DOMEventName =
   // 'animationstart' |
   | 'beforeblur' // Not a real event. This is used by event experiments.
   | 'beforeinput'
+  | 'beforetoggle'
   | 'blur'
   | 'canplay'
   | 'canplaythrough'

diff --git a/packages/react-dom-bindings/src/events/DOMEventProperties.js b/packages/react-dom-bindings/src/events/DOMEventProperties.js
@@ -34,6 +34,7 @@ export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
 const simpleEventPluginEvents = [
   'abort',
   'auxClick',
+  'beforeToggle',
   'cancel',
   'canPlay',
   'canPlayThrough',

diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js
@@ -220,6 +220,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
 // set them on the actual target element itself. This is primarily
 // because these events do not consistently bubble in the DOM.
 export const nonDelegatedEvents: Set<DOMEventName> = new Set([
+  'beforetoggle',
   'cancel',
   'close',
   'invalid',

diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js
@@ -345,6 +345,7 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
     case 'select':
     case 'selectstart':
       return DiscreteEventPriority;
+    case 'beforetoggle':
     case 'drag':
     case 'dragenter':
     case 'dragexit':

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -1217,6 +1217,40 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onBeforeToggle Popover API', () => {
+      testEmulatedBubblingEvent({
+        type: 'div',
+        targetProps: {popover: 'any'},
+        reactEvent: 'onBeforeToggle',
+        reactEventType: 'beforetoggle',
+        nativeEvent: 'beforetoggle',
+        dispatch(node) {
+          const e = new Event('beforetoggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle Popover API', () => {
+      testEmulatedBubblingEvent({
+        type: 'div',
+        targetProps: {popover: 'any'},
+        reactEvent: 'onToggle',
+        reactEventType: 'toggle',
+        nativeEvent: 'toggle',
+        dispatch(node) {
+          const e = new Event('toggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
     it('onVolumeChange', async () => {
       await testEmulatedBubblingEvent({
         type: 'video',
@@ -1918,6 +1952,7 @@ describe('ReactDOMEventListener', () => {
         type={eventConfig.type}
         targetRef={targetRef}
         targetProps={{
+          ...eventConfig.targetProps,
           [eventConfig.reactEvent]: e => {
             log.push('---- inner');
           },
@@ -2084,11 +2119,10 @@ describe('ReactDOMEventListener', () => {
       <Fixture
         type={eventConfig.type}
         targetRef={targetRef}
-        targetProps={
-          {
-            // No listener on the target itself.
-          }
-        }
+        targetProps={{
+          ...eventConfig.targetProps,
+          // No listener on the target itself.
+        }}
         parentProps={{
           [eventConfig.reactEvent]: e => {
             log.push('--- inner parent');
@@ -2317,6 +2351,7 @@ describe('ReactDOMEventListener', () => {
         type={eventConfig.type}
         targetRef={targetRef}
         targetProps={{
+          ...eventConfig.targetProps,
           [eventConfig.reactEvent]: e => {
             e.stopPropagation(); // <---------
             log.push('---- inner');
@@ -2654,6 +2689,7 @@ describe('ReactDOMEventListener', () => {
           }
         }}
         targetProps={{
+          ...eventConfig.targetProps,
           [eventConfig.reactEvent]: e => {
             log.push('---- inner');
           },

diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -627,6 +627,7 @@ function makeSimulator(eventType) {
 
 // A one-time snapshot with no plans to update. We'll probably want to deprecate Simulate API.
 const simulatedEventTypes = [
+  'beforeToggle',
   'blur',
   'cancel',
   'click',