Skip to content

Commit

Permalink
Replaced event.timeStamp check with setTimeout
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Apr 5, 2021
1 parent aa03bee commit 8f1087e
Showing 1 changed file with 25 additions and 24 deletions.
49 changes: 25 additions & 24 deletions packages/react-devtools-shared/src/devtools/views/hooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,26 +207,13 @@ export function useModalDismissSignal(
return () => {};
}

const timeOfEffect = performance.now();

const handleDocumentKeyDown = (event: any) => {
if (timeOfEffect > event.timeStamp) {
// Don't let the same event that showed the dialog also hide it.
return;
}

if (event.key === 'Escape') {
dismissCallback();
}
};

const handleDocumentClick = (event: any) => {
if (timeOfEffect > event.timeStamp) {
// Don't let the same event that showed the dialog also hide it.
return;
}

// $FlowFixMe
if (
modalRef.current !== null &&
!modalRef.current.contains(event.target)
Expand All @@ -238,19 +225,33 @@ 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 ownerDocument = ((modalRef.current: any): HTMLDivElement)
.ownerDocument;
ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
if (dismissOnClickOutside) {
ownerDocument.addEventListener('click', handleDocumentClick);
}
let ownerDocument = null;

// Delay until after the current call stack is empty,
// in case this effect is being run while an event is currently bubbling.
// In that case, we don't want to listen to the pre-existing event.
let timeoutID = setTimeout(() => {
timeoutID = null;

// 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.
ownerDocument = ((modalRef.current: any): HTMLDivElement).ownerDocument;
ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
if (dismissOnClickOutside) {
ownerDocument.addEventListener('click', handleDocumentClick);
}
}, 0);

return () => {
ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
ownerDocument.removeEventListener('click', handleDocumentClick);
if (timeoutID !== null) {
clearTimeout(timeoutID);
}

if (ownerDocument !== null) {
ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
ownerDocument.removeEventListener('click', handleDocumentClick);
}
};
}, [modalRef, dismissCallback, dismissOnClickOutside]);
}
Expand Down

0 comments on commit 8f1087e

Please sign in to comment.