Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Remove useDismissable triggering on focus contains
Nested useDismissable's would still trigger if the nested element
contains focus, since they're nested. This would trigger an
unintentional cascade dismiss.
+2
-33
-25
src/__tests__/useDismissable.test.tsx
-25
src/__tests__/useDismissable.test.tsx
···
94
94
cy.get('@inside').should('not.be.visible');
95
95
});
96
96
97
-
it('is dismissed without priority when it has focus', () => {
98
-
const Second = () => {
99
-
const ref = useRef<HTMLDivElement>(null);
100
-
useDismissable(ref, () => {});
101
-
return <div ref={ref} />;
102
-
};
103
-
104
-
mount(
105
-
<main>
106
-
<button className="outside">outside</button>
107
-
<Dialog />
108
-
<Second />
109
-
</main>
110
-
);
111
-
112
-
cy.get('.inside').as('inside').should('be.visible');
113
-
// not dismissed with escape press
114
-
cy.realPress('Escape');
115
-
cy.get('@inside').should('be.visible');
116
-
// is dismissed when it has focus
117
-
cy.get('@inside').focus();
118
-
cy.realPress('Escape');
119
-
cy.get('@inside').should('not.be.visible');
120
-
});
121
-
122
97
it('is dismissed when focus moves out of it, with focus loss active', () => {
123
98
mount(
124
99
<main>
+2
-8
src/useDismissable.ts
+2
-8
src/useDismissable.ts
···
56
56
return;
57
57
}
58
58
59
-
const active = document.activeElement;
60
-
if (
61
-
event.code === 'Escape' &&
62
-
(hasPriority.current || (active && contains(element, active)))
63
-
) {
59
+
if (event.code === 'Escape' && hasPriority.current) {
64
60
// The current dialog can be dismissed by pressing escape if it either has focus
65
61
// or it has priority
66
62
event.preventDefault();
···
72
68
73
69
function onClick(event: MouseEvent | TouchEvent) {
74
70
const { target } = event;
75
-
const active = document.activeElement;
76
71
if (event.defaultPrevented) {
77
72
return;
78
73
} else if (contains(element, target)) {
79
74
willLoseFocus = false;
80
75
return;
81
-
} else if (hasPriority || (active && contains(element, active))) {
76
+
} else if (hasPriority.current) {
82
77
// The current dialog can be dismissed by pressing outside of it if it either has
83
78
// focus or it has priority
84
-
event.preventDefault();
85
79
onDismissRef.current();
86
80
}
87
81
}