+7

src/__tests__/useDialogFocus.tsx

reviewed

··· 1 1 + import React, { useRef } from 'react'; 2 2 + import { mount } from '@cypress/react'; 3 3 + 4 4 + import { useDialogFocus } from '../useDialogFocus'; 5 5 + 6 6 + it('allows dialogs to be navigated', () => { 7 7 + });

+8 -4

src/useDialogFocus.ts

reviewed

··· 23 23 const ownerRef = options && options.ownerRef; 24 24 const disabled = !!(options && options.disabled); 25 25 const hasPriority = usePriority(ref, disabled); 26 26 - const isActive = !disabled && !!hasPriority; 27 26 28 27 useLayoutEffect(() => { 29 29 - if (!ref.current || !isActive) return; 28 28 + if (!ref.current || disabled) return; 30 29 31 30 let selection = snapshotSelection(ownerRef && ownerRef.current); 32 31 let willReceiveFocus = false; ··· 49 48 const owner = 50 49 (ownerRef && ownerRef.current) || (selection && selection.element); 51 50 52 52 - if (willReceiveFocus || (owner && event.target === owner)) { 51 51 + if ( 52 52 + willReceiveFocus || 53 53 + (hasPriority && owner && event.target === owner) 54 54 + ) { 53 55 if (!contains(ref.current, active)) 54 56 selection = snapshotSelection(owner); 55 57 willReceiveFocus = false; ··· 78 80 // Mark whether focus is moving forward for the `onFocus` handler 79 81 if (event.code === 'Tab') { 80 82 focusMovesForward = !event.shiftKey; 83 83 + } else if (!hasPriority) { 84 84 + return; 81 85 } 82 86 83 87 const active = document.activeElement as HTMLElement; ··· 175 179 document.body.removeEventListener('focusin', onFocus); 176 180 document.removeEventListener('keydown', onKey); 177 181 }; 178 178 - }, [ref, isActive]); 182 182 + }, [ref, disabled, hasPriority]); 179 183 }