useEvent: Small tweaks and changes (#18328)
Dominic Gannaway committed
Mar 17, 2020 at 15:32 UTC
3a0076e0e8ee0e30f90b11a280539c8b1999fe5b
4 files changed
+53
-4
packages/react-dom/src/client/ReactDOMHostConfig.js
+2
-2
@@ -1172,8 +1172,8 @@ export function validateEventListenerTarget(
1172
console.warn(
1173
'Event listener method setListener() from useEvent() hook requires the first argument to be either:' +
1174
'\n\n' +
1175
- '1. A valid DOM node that was rendered and managed by React' +
1176
- '2. The "window" object' +
1175
+ '1. A valid DOM node that was rendered and managed by React\n' +
1176
+ '2. The "window" object\n' +
1177
'3. The "document" object',
1178
);
1179
}
packages/react-dom/src/client/ReactDOMUseEvent.js
+1
-1
@@ -46,7 +46,7 @@ export function useEvent(
46
): ReactDOMListenerMap {
47
const dispatcher = resolveDispatcher();
48
let capture = false;
49
- let passive = false;
49
+ let passive = undefined; // Undefined means to use the browser default
50
let priority = getEventPriorityForListenerSystem((type: any));
51
52
if (options != null) {
packages/react-dom/src/events/__tests__/DOMModernPluginEventSystem-test.internal.js
+49
@@ -1318,6 +1318,55 @@ describe('DOMModernPluginEventSystem', () => {
1318
expect(log[5]).toEqual(['bubble', buttonElement]);
1319
});
1320
1321
+ it('handle propagation of click events mixed with onClick events', () => {
1322
+ const buttonRef = React.createRef();
1323
+ const divRef = React.createRef();
1324
+ const log = [];
1325
+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));
1326
+ const onClickCapture = jest.fn(e =>
1327
+ log.push(['capture', e.currentTarget]),
1328
+ );
1329
+
1330
+ function Test() {
1331
+ const click = ReactDOM.unstable_useEvent('click');
1332
+ const clickCapture = ReactDOM.unstable_useEvent('click', {
1333
+ capture: true,
1334
+ });
1335
+
1336
+ React.useEffect(() => {
1337
+ click.setListener(buttonRef.current, onClick);
1338
+ clickCapture.setListener(buttonRef.current, onClickCapture);
1339
+ });
1340
+
1341
+ return (
1342
+ <button ref={buttonRef}>
1343
+ <div ref={divRef} onClick={onClick} onClickCapture={onClickCapture}>
1344
+ Click me!
1345
+ </div>
1346
+ </button>
1347
+ );
1348
+ }
1349
+
1350
+ ReactDOM.render(<Test />, container);
1351
+ Scheduler.unstable_flushAll();
1352
+
1353
+ let buttonElement = buttonRef.current;
1354
+ dispatchClickEvent(buttonElement);
1355
+ expect(onClick).toHaveBeenCalledTimes(1);
1356
+ expect(onClickCapture).toHaveBeenCalledTimes(1);
1357
+ expect(log[0]).toEqual(['capture', buttonElement]);
1358
+ expect(log[1]).toEqual(['bubble', buttonElement]);
1359
+
1360
+ let divElement = divRef.current;
1361
+ dispatchClickEvent(divElement);
1362
+ expect(onClick).toHaveBeenCalledTimes(3);
1363
+ expect(onClickCapture).toHaveBeenCalledTimes(3);
1364
+ expect(log[2]).toEqual(['capture', buttonElement]);
1365
+ expect(log[3]).toEqual(['capture', divElement]);
1366
+ expect(log[4]).toEqual(['bubble', divElement]);
1367
+ expect(log[5]).toEqual(['bubble', buttonElement]);
1368
+ });
1369
+
1370
it('should correctly work for a basic "click" listener on the outer target', () => {
1371
const log = [];
1372
const clickEvent = jest.fn(event => {
packages/shared/ReactDOMTypes.js
+1
-1
@@ -78,7 +78,7 @@ export type ReactDOMResponderContext = {
78
79
export type ReactDOMListenerEvent = {|
80
capture: boolean,
81
- passive: boolean,
81
+ passive: void | boolean,
82
priority: EventPriority,
83
type: string,
84
|};