From 15f2ed156baa8dafe28fffe44280e6b56870cd2a Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 26 Feb 2025 16:15:01 +0000
Subject: [PATCH 1/2] Support beforetoggle/toggle events for dialog

---
 packages/react-dom-bindings/src/client/ReactDOMComponent.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 15a4ba675b5e..ad102425f4b3 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -1269,6 +1269,8 @@ export function setInitialProperties(
       return;
     }
     case 'dialog': {
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
       listenToNonDelegatedEvent('cancel', domElement);
       listenToNonDelegatedEvent('close', domElement);
       break;

From 9dc9602e0176cb7a52afd855890e45393ef17d48 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 26 Feb 2025 16:24:19 +0000
Subject: [PATCH 2/2] probably some tests

---
 .../ReactDOMEventPropagation-test.js          | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index 159832934007..ebd3f9a54011 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -1302,6 +1302,38 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onBeforeToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        reactEvent: 'onBeforeToggle',
+        reactEventType: 'beforetoggle',
+        nativeEvent: 'beforetoggle',
+        dispatch(node) {
+          const e = new Event('beforetoggle', {
+            bubbles: false,
+            cancelable: true,
+          });
+          node.dispatchEvent(e);
+        },
+      });
+    });
+
+    it('onToggle Dialog API', async () => {
+      await testEmulatedBubblingEvent({
+        type: 'dialog',
+        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',