Support beforetoggle/toggle events for dialog (#32479)
Keith Cirkel committed
Mar 5, 2025 at 18:45 UTC
aac177c48439ab294f72e8b5a85059daa3f8a5ee
2 files changed
+34
packages/react-dom-bindings/src/client/ReactDOMComponent.js
+2
@@ -1280,6 +1280,8 @@ export function setInitialProperties(
1280
return;
1281
}
1282
case 'dialog': {
1283
+ listenToNonDelegatedEvent('beforetoggle', domElement);
1284
+ listenToNonDelegatedEvent('toggle', domElement);
1285
listenToNonDelegatedEvent('cancel', domElement);
1286
listenToNonDelegatedEvent('close', domElement);
1287
break;
packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+32
@@ -1302,6 +1302,38 @@ describe('ReactDOMEventListener', () => {
1302
});
1303
});
1304
1305
+ it('onBeforeToggle Dialog API', async () => {
1306
+ await testEmulatedBubblingEvent({
1307
+ type: 'dialog',
1308
+ reactEvent: 'onBeforeToggle',
1309
+ reactEventType: 'beforetoggle',
1310
+ nativeEvent: 'beforetoggle',
1311
+ dispatch(node) {
1312
+ const e = new Event('beforetoggle', {
1313
+ bubbles: false,
1314
+ cancelable: true,
1315
+ });
1316
+ node.dispatchEvent(e);
1317
+ },
1318
+ });
1319
+ });
1320
+
1321
+ it('onToggle Dialog API', async () => {
1322
+ await testEmulatedBubblingEvent({
1323
+ type: 'dialog',
1324
+ reactEvent: 'onToggle',
1325
+ reactEventType: 'toggle',
1326
+ nativeEvent: 'toggle',
1327
+ dispatch(node) {
1328
+ const e = new Event('toggle', {
1329
+ bubbles: false,
1330
+ cancelable: true,
1331
+ });
1332
+ node.dispatchEvent(e);
1333
+ },
1334
+ });
1335
+ });
1336
+
1337
it('onVolumeChange', async () => {
1338
await testEmulatedBubblingEvent({
1339
type: 'video',