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.

Update selection restore handling for modals

+19 -15
+4 -4
src/useDialogFocus.ts
··· 179 179 document.addEventListener('keydown', onKey); 180 180 181 181 return () => { 182 + element.removeEventListener('mousedown', onClick); 183 + document.body.removeEventListener('focusin', onFocus); 184 + document.removeEventListener('keydown', onKey); 185 + 182 186 const active = document.activeElement as HTMLElement; 183 187 if (!active || contains(element, active)) { 184 188 restoreSelection(selection); 185 189 } 186 - 187 - element.removeEventListener('mousedown', onClick); 188 - document.body.removeEventListener('focusin', onFocus); 189 - document.removeEventListener('keydown', onKey); 190 190 }; 191 191 }, [ref.current, disabled]); 192 192 }
+3 -3
src/useMenuFocus.ts
··· 135 135 document.addEventListener('keydown', onKey); 136 136 137 137 return () => { 138 + document.body.removeEventListener('focusin', onFocus); 139 + document.removeEventListener('keydown', onKey); 140 + 138 141 const active = document.activeElement as HTMLElement; 139 142 if (!active || contains(element, active)) { 140 143 restoreSelection(selection); 141 144 } 142 - 143 - document.body.removeEventListener('focusin', onFocus); 144 - document.removeEventListener('keydown', onKey); 145 145 }; 146 146 }, [ref.current, disabled]); 147 147 }
+12 -8
src/useModalFocus.ts
··· 29 29 const hasPriority = usePriority(ref, disabled); 30 30 31 31 useLayoutEffect(() => { 32 - const { current: element } = ref; 33 - if (!element || disabled) return; 32 + if (disabled) return; 34 33 35 34 let selection: RestoreSelection | null = null; 36 - if (!document.activeElement || !contains(element, document.activeElement)) { 37 - const newTarget = getAutofocusTarget(element); 38 - selection = snapshotSelection(element); 39 - newTarget.focus(); 35 + if ( 36 + !document.activeElement || 37 + !contains(ref.current, document.activeElement) 38 + ) { 39 + const newTarget = ref.current ? getAutofocusTarget(ref.current) : null; 40 + selection = snapshotSelection(); 41 + if (newTarget) newTarget.focus(); 40 42 } 41 43 42 44 function onBlur(event: FocusEvent) { 45 + const { current: element } = ref; 43 46 if (!hasPriority.current || !element || event.defaultPrevented) return; 44 47 45 48 if ( ··· 52 55 } 53 56 54 57 function onKeyDown(event: KeyboardEvent) { 58 + const { current: element } = ref; 55 59 if (!hasPriority.current || !element || event.defaultPrevented) return; 56 60 57 61 if (event.code === 'Tab') { ··· 72 76 document.addEventListener('keydown', onKeyDown); 73 77 74 78 return () => { 75 - restoreSelection(selection); 76 79 document.body.removeEventListener('focusout', onBlur); 77 80 document.removeEventListener('keydown', onKeyDown); 81 + restoreSelection(selection); 78 82 }; 79 - }, [ref.current, hasPriority, disabled]); 83 + }, [ref, hasPriority, disabled]); 80 84 }