Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add Enter key handling

+20 -4
+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
··· 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);