fix: keep search field in Select focused

treely · Jan 30, 2025 · 014963d · 014963d
1 parent c63e84a
commit 014963d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -8,6 +8,9 @@ const commonOptions = [
   { label: 'Option 3', value: 'option_3' },
   { label: 'Option 4', value: 'option_4' },
   { label: 'Option 5', value: 'option_5' },
+  { label: 'Option 5', value: 'option_5' },
+  { label: 'Option 5', value: 'option_5' },
+  { label: 'Option 5', value: 'option_5' },
 ];
 
 export default {

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -98,9 +98,13 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
 
   useEffect(() => {
     if (isOpen && isSearchable && inputRef.current) {
-      inputRef.current.focus();
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      });
     }
-  }, [isOpen, isSearchable]);
+  }, [filteredOptions.length, isOpen, isSearchable]);
 
   // Handle selecting an option
   const handleOptionSelect = useCallback(