Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Add hasPriority exception to click/touch events in useDialogDismiss
+11
-12
+11
-12
src/useDialogDismiss.ts
+11
-12
src/useDialogDismiss.ts
···
32
32
return;
33
33
}
34
34
35
-
event.preventDefault();
36
-
onDismiss();
35
+
// The current dialog can be dismissed by pressing outside of it if it either has
36
+
// focus or it has priority
37
+
const active = document.activeElement;
38
+
if (hasPriority || (active && contains(ref.current, active))) {
39
+
event.preventDefault();
40
+
onDismiss();
41
+
}
37
42
}
38
43
39
-
if (hasPriority) {
40
-
document.addEventListener('mousedown', onClick);
41
-
document.addEventListener('touchstart', onClick);
42
-
}
43
-
44
+
document.addEventListener('mousedown', onClick);
45
+
document.addEventListener('touchstart', onClick);
44
46
document.addEventListener('keydown', onKey);
45
47
46
48
return () => {
47
-
if (hasPriority) {
48
-
document.removeEventListener('mousedown', onClick);
49
-
document.removeEventListener('touchstart', onClick);
50
-
}
51
-
49
+
document.removeEventListener('mousedown', onClick);
50
+
document.removeEventListener('touchstart', onClick);
52
51
document.removeEventListener('keydown', onKey);
53
52
};
54
53
}, [ref, hasPriority, onDismiss]);