diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index a71c97555a06..f40e3c2034de 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -531,16 +531,22 @@ const Dropdown = React.forwardRef( const onKeyDownHandler = useCallback( (evt: React.KeyboardEvent) => { - if ( - evt.code !== 'Space' || - !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key) - ) { + const navigationKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; + + // If the key is not a navigation key, the user is typing + if (!navigationKeys.includes(evt.key)) { setIsTyping(true); - } - if ( - (isTyping && evt.code === 'Space') || - !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key) - ) { + // Reset the timer for typing timeout + if (currTimer) { + clearTimeout(currTimer); + } + setCurrTimer( + setTimeout(() => { + setIsTyping(false); + }, 3000) + ); + } else if (isTyping && evt.key === ' ') { + // If user is typing and presses space, reset the timer if (currTimer) { clearTimeout(currTimer); } @@ -550,6 +556,7 @@ const Dropdown = React.forwardRef( }, 3000) ); } + if (['ArrowDown'].includes(evt.key)) { setIsFocused(false); }