Skip to content

Commit 82ce4f9

Browse files
author
Sebastian Silbermann
committed
Add support of onBeforeToggle and onToggle
1 parent b314e08 commit 82ce4f9

File tree

7 files changed

+58
-5
lines changed

7 files changed

+58
-5
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -792,6 +792,11 @@ function setProp(
792792
}
793793
break;
794794
}
795+
case 'popover':
796+
listenToNonDelegatedEvent('beforetoggle', domElement);
797+
listenToNonDelegatedEvent('toggle', domElement);
798+
setValueForAttribute(domElement, 'popover', value);
799+
break;
795800
case 'xlinkActuate':
796801
setValueForNamespacedAttribute(
797802
domElement,
@@ -2827,6 +2832,13 @@ export function diffHydratedProperties(
28272832
}
28282833
}
28292834

2835+
if (props.popover != null) {
2836+
// We listen to this event in case to ensure emulated bubble
2837+
// listeners still fire for the toggle event.
2838+
listenToNonDelegatedEvent('beforetoggle', domElement);
2839+
listenToNonDelegatedEvent('toggle', domElement);
2840+
}
2841+
28302842
if (props.onScroll != null) {
28312843
listenToNonDelegatedEvent('scroll', domElement);
28322844
}

packages/react-dom-bindings/src/events/DOMEventNames.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type DOMEventName =
1818
// 'animationstart' |
1919
| 'beforeblur' // Not a real event. This is used by event experiments.
2020
| 'beforeinput'
21+
| 'beforetoggle'
2122
| 'blur'
2223
| 'canplay'
2324
| 'canplaythrough'

packages/react-dom-bindings/src/events/DOMEventProperties.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const topLevelEventsToReactNames: Map<DOMEventName, string | null> =
3434
const simpleEventPluginEvents = [
3535
'abort',
3636
'auxClick',
37+
'beforeToggle',
3738
'cancel',
3839
'canPlay',
3940
'canPlayThrough',

packages/react-dom-bindings/src/events/DOMPluginEventSystem.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
220220
// set them on the actual target element itself. This is primarily
221221
// because these events do not consistently bubble in the DOM.
222222
export const nonDelegatedEvents: Set<DOMEventName> = new Set([
223+
'beforetoggle',
223224
'cancel',
224225
'close',
225226
'invalid',

packages/react-dom-bindings/src/events/ReactDOMEventListener.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,7 @@ export function getEventPriority(domEventName: DOMEventName): EventPriority {
345345
case 'select':
346346
case 'selectstart':
347347
return DiscreteEventPriority;
348+
case 'beforetoggle':
348349
case 'drag':
349350
case 'dragenter':
350351
case 'dragexit':

packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1207,6 +1207,40 @@ describe('ReactDOMEventListener', () => {
12071207
});
12081208
});
12091209

1210+
it('onBeforeToggle Popover API', () => {
1211+
testEmulatedBubblingEvent({
1212+
type: 'div',
1213+
targetProps: {popover: 'any'},
1214+
reactEvent: 'onBeforeToggle',
1215+
reactEventType: 'beforetoggle',
1216+
nativeEvent: 'beforetoggle',
1217+
dispatch(node) {
1218+
const e = new Event('beforetoggle', {
1219+
bubbles: false,
1220+
cancelable: true,
1221+
});
1222+
node.dispatchEvent(e);
1223+
},
1224+
});
1225+
});
1226+
1227+
it('onToggle Popover API', () => {
1228+
testEmulatedBubblingEvent({
1229+
type: 'div',
1230+
targetProps: {popover: 'any'},
1231+
reactEvent: 'onToggle',
1232+
reactEventType: 'toggle',
1233+
nativeEvent: 'toggle',
1234+
dispatch(node) {
1235+
const e = new Event('toggle', {
1236+
bubbles: false,
1237+
cancelable: true,
1238+
});
1239+
node.dispatchEvent(e);
1240+
},
1241+
});
1242+
});
1243+
12101244
it('onVolumeChange', () => {
12111245
testEmulatedBubblingEvent({
12121246
type: 'video',
@@ -1908,6 +1942,7 @@ describe('ReactDOMEventListener', () => {
19081942
type={eventConfig.type}
19091943
targetRef={targetRef}
19101944
targetProps={{
1945+
...eventConfig.targetProps,
19111946
[eventConfig.reactEvent]: e => {
19121947
log.push('---- inner');
19131948
},
@@ -2074,11 +2109,10 @@ describe('ReactDOMEventListener', () => {
20742109
<Fixture
20752110
type={eventConfig.type}
20762111
targetRef={targetRef}
2077-
targetProps={
2078-
{
2079-
// No listener on the target itself.
2080-
}
2081-
}
2112+
targetProps={{
2113+
...eventConfig.targetProps,
2114+
// No listener on the target itself.
2115+
}}
20822116
parentProps={{
20832117
[eventConfig.reactEvent]: e => {
20842118
log.push('--- inner parent');
@@ -2307,6 +2341,7 @@ describe('ReactDOMEventListener', () => {
23072341
type={eventConfig.type}
23082342
targetRef={targetRef}
23092343
targetProps={{
2344+
...eventConfig.targetProps,
23102345
[eventConfig.reactEvent]: e => {
23112346
e.stopPropagation(); // <---------
23122347
log.push('---- inner');
@@ -2642,6 +2677,7 @@ describe('ReactDOMEventListener', () => {
26422677
}
26432678
}}
26442679
targetProps={{
2680+
...eventConfig.targetProps,
26452681
[eventConfig.reactEvent]: e => {
26462682
log.push('---- inner');
26472683
},

packages/react-dom/src/test-utils/ReactTestUtils.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -625,6 +625,7 @@ function makeSimulator(eventType) {
625625

626626
// A one-time snapshot with no plans to update. We'll probably want to deprecate Simulate API.
627627
const simulatedEventTypes = [
628+
'beforeToggle',
628629
'blur',
629630
'cancel',
630631
'click',

0 commit comments

Comments
 (0)