diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 7189dd7acf94d..df383d88fbee9 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -219,15 +219,16 @@ export function useModalDismissSignal( return () => {}; } - const handleDocumentKeyDown = (event: any) => { + const handleRootNodeKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { dismissCallback(); } }; - const handleDocumentClick = (event: any) => { + const handleRootNodeClick: MouseEventHandler = event => { if ( modalRef.current !== null && + event.target instanceof Node && !modalRef.current.contains(event.target) ) { event.stopPropagation(); @@ -237,7 +238,7 @@ export function useModalDismissSignal( } }; - let ownerDocument = null; + let modalRootNode = null; // Delay until after the current call stack is empty, // in case this effect is being run while an event is currently bubbling. @@ -248,12 +249,12 @@ export function useModalDismissSignal( // It's important to listen to the ownerDocument to support the browser extension. // Here we use portals to render individual tabs (e.g. Profiler), // and the root document might belong to a different window. - const div = modalRef.current; - if (div != null) { - ownerDocument = div.ownerDocument; - ownerDocument.addEventListener('keydown', handleDocumentKeyDown); + const modalDOMElement = modalRef.current; + if (modalDOMElement != null) { + modalRootNode = modalDOMElement.getRootNode(); + modalRootNode.addEventListener('keydown', handleRootNodeKeyDown); if (dismissOnClickOutside) { - ownerDocument.addEventListener('click', handleDocumentClick, true); + modalRootNode.addEventListener('click', handleRootNodeClick, true); } } }, 0); @@ -263,9 +264,9 @@ export function useModalDismissSignal( clearTimeout(timeoutID); } - if (ownerDocument !== null) { - ownerDocument.removeEventListener('keydown', handleDocumentKeyDown); - ownerDocument.removeEventListener('click', handleDocumentClick, true); + if (modalRootNode !== null) { + modalRootNode.removeEventListener('keydown', handleRootNodeKeyDown); + modalRootNode.removeEventListener('click', handleRootNodeClick, true); } }; }, [modalRef, dismissCallback, dismissOnClickOutside]);