diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts index 51984fc65..9b781f03d 100644 --- a/src/hooks/usePickerInput.ts +++ b/src/hooks/usePickerInput.ts @@ -30,7 +30,7 @@ export default function usePickerInput({ onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; currentFocusedKey?: React.MutableRefObject; - key: string; + key?: string; }): [React.DOMAttributes, { focused: boolean; typing: boolean }] { const [typing, setTyping] = useState(false); const [focused, setFocused] = useState(false); @@ -104,7 +104,9 @@ export default function usePickerInput({ setTyping(true); setFocused(true); - currentFocusedKey.current = key; + if (currentFocusedKey) { + currentFocusedKey.current = key; + } clearTimeout(delayBlurTimer.current); if (onFocus) { onFocus(e); @@ -136,16 +138,19 @@ export default function usePickerInput({ } } setFocused(false); - - currentFocusedKey.current = ''; - // Delay to prevent 'range' focus transitions from firing resulting in incorrect out-of-focus events - delayBlurTimer.current = setTimeout(() => { - // Prevent the 'blur' event from firing when there is currently a focused input - if (currentFocusedKey.current) return; - if (onBlur) { - onBlur(e); - } - }, 100); + if (currentFocusedKey) { + currentFocusedKey.current = ''; + // Delay to prevent 'range' focus transitions from firing resulting in incorrect out-of-focus events + delayBlurTimer.current = setTimeout(() => { + // Prevent the 'blur' event from firing when there is currently a focused input + if (currentFocusedKey.current) { + return; + } + onBlur?.(e); + }, 100); + } else { + onBlur?.(e); + } }, };