diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js index 410e1006ed..81bbeadf32 100644 --- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js @@ -501,4 +501,60 @@ describe('ReactDOMEventListener', () => { document.body.removeChild(container); } }); + + it('should bubble non-native bubbling events', () => { + const container = document.createElement('div'); + const ref = React.createRef(); + const onPlay = jest.fn(); + const onScroll = jest.fn(); + const onCancel = jest.fn(); + const onClose = jest.fn(); + document.body.appendChild(container); + try { + ReactDOM.render( +
+
+
, + container, + ); + ref.current.dispatchEvent( + new Event('play', { + bubbles: false, + }), + ); + ref.current.dispatchEvent( + new Event('scroll', { + bubbles: false, + }), + ); + ref.current.dispatchEvent( + new Event('cancel', { + bubbles: false, + }), + ); + ref.current.dispatchEvent( + new Event('close', { + bubbles: false, + }), + ); + // Regression test: ensure we still emulate bubbling with non-bubbling + // media + expect(onPlay).toHaveBeenCalledTimes(2); + expect(onScroll).toHaveBeenCalledTimes(2); + expect(onCancel).toHaveBeenCalledTimes(2); + expect(onClose).toHaveBeenCalledTimes(2); + } finally { + document.body.removeChild(container); + } + }); }); diff --git a/packages/react-dom/src/events/DOMModernPluginEventSystem.js b/packages/react-dom/src/events/DOMModernPluginEventSystem.js index 732840b508..106c85d802 100644 --- a/packages/react-dom/src/events/DOMModernPluginEventSystem.js +++ b/packages/react-dom/src/events/DOMModernPluginEventSystem.js @@ -245,9 +245,9 @@ export const nonDelegatedEvents: Set = new Set([ TOP_CLOSE, TOP_INVALID, // In order to reduce bytes, we insert the above array of media events - // into this Set. Note: some events like "load" and "error" aren't - // exclusively media events, but rather than duplicate them, we just - // take them from the media events array. + // into this Set. Note: the "error" event isn't an exclusive media event, + // and can occur on other elements too. Rather than duplicate that event, + // we just take it from the media events array. ...mediaEventTypes, ]);