Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
Add Enter key handling
+20
-4
+10
-2
src/useDialogFocus.ts
+10
-2
src/useDialogFocus.ts
···
1
1
import { snapshotSelection, restoreSelection } from './utils/selection';
2
-
import { getFocusTargets, getNextFocusTarget } from './utils/focus';
2
+
import { getFirstFocusTarget, getFocusTargets, getNextFocusTarget } from './utils/focus';
3
3
import { useLayoutEffect } from './utils/react';
4
4
import { contains, isInputElement } from './utils/element';
5
5
import { makePriorityHook } from './usePriority';
···
113
113
event.preventDefault();
114
114
willReceiveFocus = false;
115
115
restoreSelection(selection);
116
+
} else if (owner && isInputElement(owner) && contains(owner, active) && event.code === 'Enter') {
117
+
// Move focus to first target when enter is pressed
118
+
event.preventDefault();
119
+
const newTarget = getFirstFocusTarget(ref.current);
120
+
if (newTarget) {
121
+
selection = snapshotSelection(owner);
122
+
newTarget.focus();
123
+
}
116
124
} else if (
117
125
owner &&
118
-
active !== owner &&
126
+
contains(owner, active) &&
119
127
isInputElement(owner) &&
120
128
/^(?:Key|Digit)/.test(event.code)
121
129
) {
+10
-2
src/useMenuFocus.ts
+10
-2
src/useMenuFocus.ts
···
1
1
import { RestoreSelection, snapshotSelection, restoreSelection } from './utils/selection';
2
-
import { getFocusTargets } from './utils/focus';
2
+
import { getFirstFocusTarget, getFocusTargets } from './utils/focus';
3
3
import { useLayoutEffect } from './utils/react';
4
4
import { contains, isInputElement } from './utils/element';
5
5
import { Ref } from './types';
···
72
72
// Implement End => last item
73
73
event.preventDefault();
74
74
focusTargets[focusTargets.length - 1].focus();
75
-
} else if (owner && active !== owner && event.code === 'Escape') {
75
+
} else if (owner && isInputElement(owner) && contains(owner, active) && event.code === 'Enter') {
76
+
// Move focus to first target when enter is pressed
77
+
event.preventDefault();
78
+
const newTarget = getFirstFocusTarget(ref.current);
79
+
if (newTarget) {
80
+
selection = snapshotSelection(owner);
81
+
newTarget.focus();
82
+
}
83
+
} else if (owner && !contains(owner, active) && event.code === 'Escape') {
76
84
// Restore selection if escape is pressed
77
85
event.preventDefault();
78
86
restoreSelection(selection);