Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Restore selection in useDialogFocus and useMenuFocus
Restore selection in focus hooks when target focus is invalid,
i.e. not in the original focus target.
+11
-1
+5
src/useDialogFocus.ts
+5
src/useDialogFocus.ts
···
179
179
document.addEventListener('keydown', onKey);
180
180
181
181
return () => {
182
+
const active = document.activeElement as HTMLElement;
183
+
if (!active || contains(element, active)) {
184
+
restoreSelection(selection);
185
+
}
186
+
182
187
element.removeEventListener('mousedown', onClick);
183
188
document.body.removeEventListener('focusin', onFocus);
184
189
document.removeEventListener('keydown', onKey);
+5
src/useMenuFocus.ts
+5
src/useMenuFocus.ts
···
135
135
document.addEventListener('keydown', onKey);
136
136
137
137
return () => {
138
+
const active = document.activeElement as HTMLElement;
139
+
if (!active || contains(element, active)) {
140
+
restoreSelection(selection);
141
+
}
142
+
138
143
document.body.removeEventListener('focusin', onFocus);
139
144
document.removeEventListener('keydown', onKey);
140
145
};
+1
-1
src/utils/selection.ts
+1
-1
src/utils/selection.ts
···
50
50
const selection = window.getSelection && window.getSelection();
51
51
if (selection && selection.rangeCount) {
52
52
const range = selection.getRangeAt(0);
53
-
if (contains(target, range.startContainer)) {
53
+
if (range.startContainer && contains(target, range.startContainer)) {
54
54
return { element, method: 'range', range };
55
55
}
56
56
}