Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revise comment + add non-bubbling event test #19432

Merged
merged 2 commits into from Jul 22, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 56 additions & 0 deletions packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
Expand Up @@ -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(
<div
onPlay={onPlay}
onScroll={onScroll}
onCancel={onCancel}
onClose={onClose}>
<div
ref={ref}
onPlay={onPlay}
onScroll={onScroll}
onCancel={onCancel}
onClose={onClose}
/>
</div>,
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);
}
});
});
6 changes: 3 additions & 3 deletions packages/react-dom/src/events/DOMModernPluginEventSystem.js
Expand Up @@ -245,9 +245,9 @@ export const nonDelegatedEvents: Set<DOMTopLevelEventType> = 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,
]);

Expand Down