Fixed an unpleasant interaction with owners modal "..." button
Brian Vaughn committed
Apr 8, 2019 at 12:20 UTC
44ecff31e3b8d6963711dd375045e5deca068fc7
1 file changed
+10
-6
src/devtools/views/hooks.js
+10
-6
@@ -101,9 +101,15 @@ export function useModalDismissSignal(
101
}
102
};
103
104
- const handleMouseOrTouch = ({ target }: any) => {
104
+ const handleClick = (event: any) => {
105
// $FlowFixMe
106
- if (modalRef.current !== null && !modalRef.current.contains(target)) {
106
+ if (
107
+ modalRef.current !== null &&
108
+ !modalRef.current.contains(event.target)
109
+ ) {
110
+ event.stopPropagation();
111
+ event.preventDefault();
112
+
113
dismissCallback();
114
}
115
};
@@ -113,13 +119,11 @@ export function useModalDismissSignal(
119
// and the root document might belong to a different window.
120
const ownerDocument = modalRef.current.ownerDocument;
121
ownerDocument.addEventListener('keydown', handleKeyDown);
116
- ownerDocument.addEventListener('mousedown', handleMouseOrTouch);
117
- ownerDocument.addEventListener('touchstart', handleMouseOrTouch);
122
+ ownerDocument.addEventListener('click', handleClick);
123
124
return () => {
125
ownerDocument.removeEventListener('keydown', handleKeyDown);
121
- ownerDocument.removeEventListener('mousedown', handleMouseOrTouch);
122
- ownerDocument.removeEventListener('touchstart', handleMouseOrTouch);
126
+ ownerDocument.removeEventListener('click', handleClick);
127
};
128
}, [modalRef, dismissCallback]);
129
}