Revise comment + add non-bubbling event test (#19432)
Dominic Gannaway committed
Jul 22, 2020 at 21:41 UTC
1aae05c4364ca8553c62b46a8df70ebe8fa574f0
2 files changed
+59
-3
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+56
@@ -501,4 +501,60 @@ describe('ReactDOMEventListener', () => {
501
document.body.removeChild(container);
502
}
503
});
504
+
505
+ it('should bubble non-native bubbling events', () => {
506
+ const container = document.createElement('div');
507
+ const ref = React.createRef();
508
+ const onPlay = jest.fn();
509
+ const onScroll = jest.fn();
510
+ const onCancel = jest.fn();
511
+ const onClose = jest.fn();
512
+ document.body.appendChild(container);
513
+ try {
514
+ ReactDOM.render(
515
+ <div
516
+ onPlay={onPlay}
517
+ onScroll={onScroll}
518
+ onCancel={onCancel}
519
+ onClose={onClose}>
520
+ <div
521
+ ref={ref}
522
+ onPlay={onPlay}
523
+ onScroll={onScroll}
524
+ onCancel={onCancel}
525
+ onClose={onClose}
526
+ />
527
+ </div>,
528
+ container,
529
+ );
530
+ ref.current.dispatchEvent(
531
+ new Event('play', {
532
+ bubbles: false,
533
+ }),
534
+ );
535
+ ref.current.dispatchEvent(
536
+ new Event('scroll', {
537
+ bubbles: false,
538
+ }),
539
+ );
540
+ ref.current.dispatchEvent(
541
+ new Event('cancel', {
542
+ bubbles: false,
543
+ }),
544
+ );
545
+ ref.current.dispatchEvent(
546
+ new Event('close', {
547
+ bubbles: false,
548
+ }),
549
+ );
550
+ // Regression test: ensure we still emulate bubbling with non-bubbling
551
+ // media
552
+ expect(onPlay).toHaveBeenCalledTimes(2);
553
+ expect(onScroll).toHaveBeenCalledTimes(2);
554
+ expect(onCancel).toHaveBeenCalledTimes(2);
555
+ expect(onClose).toHaveBeenCalledTimes(2);
556
+ } finally {
557
+ document.body.removeChild(container);
558
+ }
559
+ });
560
});
packages/react-dom/src/events/DOMModernPluginEventSystem.js
+3
-3
@@ -245,9 +245,9 @@ export const nonDelegatedEvents: Set<DOMTopLevelEventType> = new Set([
245
TOP_CLOSE,
246
TOP_INVALID,
247
// In order to reduce bytes, we insert the above array of media events
248
- // into this Set. Note: some events like "load" and "error" aren't
249
- // exclusively media events, but rather than duplicate them, we just
250
- // take them from the media events array.
248
+ // into this Set. Note: the "error" event isn't an exclusive media event,
249
+ // and can occur on other elements too. Rather than duplicate that event,
250
+ // we just take it from the media events array.
251
...mediaEventTypes,
252
]);
253