219
return () => {};
220
}
221
222
- const handleDocumentKeyDown = (event: any) => {
222
+ const handleRootNodeKeyDown = (event: KeyboardEvent) => {
223
if (event.key === 'Escape') {
224
dismissCallback();
225
}
226
};
227
228
- const handleDocumentClick = (event: any) => {
228
+ const handleRootNodeClick: MouseEventHandler = event => {
229
if (
230
modalRef.current !== null &&
231
+ /* $FlowExpectedError[incompatible-call] Instead of dealing with possibly multiple realms
232
+ and multiple Node references to comply with Flow (e.g. checking with `event.target instanceof Node`)
233
+ just delegate it to contains call */
234
!modalRef.current.contains(event.target)
235
) {
236
event.stopPropagation();
240
}
241
};
242
240
- let ownerDocument = null;
243
+ let modalRootNode = null;
244
245
// Delay until after the current call stack is empty,
246
// in case this effect is being run while an event is currently bubbling.
251
// It's important to listen to the ownerDocument to support the browser extension.
252
// Here we use portals to render individual tabs (e.g. Profiler),
253
// and the root document might belong to a different window.
251
- const div = modalRef.current;
252
- if (div != null) {
253
- ownerDocument = div.ownerDocument;
254
- ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
254
+ const modalDOMElement = modalRef.current;
255
+ if (modalDOMElement != null) {
256
+ modalRootNode = modalDOMElement.getRootNode();
257
+ modalRootNode.addEventListener('keydown', handleRootNodeKeyDown);
258
if (dismissOnClickOutside) {
256
- ownerDocument.addEventListener('click', handleDocumentClick, true);
259
+ modalRootNode.addEventListener('click', handleRootNodeClick, true);
260
}
261
}
262
}, 0);
266
clearTimeout(timeoutID);
267
}
268
266
- if (ownerDocument !== null) {
267
- ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
268
- ownerDocument.removeEventListener('click', handleDocumentClick, true);
269
+ if (modalRootNode !== null) {
270
+ modalRootNode.removeEventListener('keydown', handleRootNodeKeyDown);
271
+ modalRootNode.removeEventListener('click', handleRootNodeClick, true);
272
}
273
};
274
}, [modalRef, dismissCallback, dismissOnClickOutside]);