Merge pull request #164 from lambda-curry/codegen-bot/type-to-open-select-f85f09

Author: jaruesink

packages/components/src/ui/select.tsx

@@ -57,7 +57,7 @@ export interface SelectProps<T extends React.Key = string>
 
 // Default search input built on top of CommandInput. Supports cmdk props at runtime.
 const DefaultSearchInput = forwardRef<HTMLInputElement, React.ComponentPropsWithoutRef<typeof CommandInput>>(
-  (props, _ref) => <CommandInput {...props} />,
+  (props, ref) => <CommandInput {...props} />,
 );
 DefaultSearchInput.displayName = 'SelectSearchInput';
 
@@ -84,17 +84,34 @@ export function Select<T extends React.Key = string>({
   const triggerRef = useRef<HTMLButtonElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const selectedItemRef = useRef<HTMLElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const [searchQuery, setSearchQuery] = useState('');
   // No need for JavaScript width measurement - Radix provides --radix-popover-trigger-width CSS variable
 
   // When opening, ensure the currently selected option is the active item for keyboard nav
+  // and focus the search input if searchable
   useEffect(() => {
-    if (!popoverState.isOpen) return;
+    if (!popoverState.isOpen) {
+      // Clear search query when closing
+      setSearchQuery('');
+      return;
+    }
     requestAnimationFrame(() => {
+      if (searchable) {
+        // Query for the input element since CommandInput uses asChild and ref forwarding is complex
+        const inputElement = popoverRef.current?.querySelector<HTMLInputElement>('input[type="text"]');
+        if (inputElement) {
+          inputElement.focus();
+          const selectionEnd = inputElement.value.length;
+          if (selectionEnd > 0) {
+            inputElement.setSelectionRange(selectionEnd, selectionEnd);
+          }
+        }
+      }
       const selectedEl = selectedItemRef.current as HTMLElement | null;
       if (selectedEl) selectedEl.scrollIntoView({ block: 'center' });
     });
-  }, [popoverState.isOpen]);
+  }, [popoverState.isOpen, searchable]);
 
   const selectedOption = options.find((o) => o.value === value);
 
@@ -116,6 +133,34 @@ export function Select<T extends React.Key = string>({
   const ChevronIcon = components?.ChevronIcon || DefaultChevronIcon;
   const SearchInput = components?.SearchInput || DefaultSearchInput;
 
+  // Handle keydown on trigger to open popover and start typing
+  const handleTriggerKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    // Allow normal keyboard navigation (Enter, Space, Arrow keys, etc.)
+    if (
+      e.key === 'Enter' ||
+      e.key === ' ' ||
+      e.key === 'ArrowDown' ||
+      e.key === 'ArrowUp' ||
+      e.key === 'Escape' ||
+      e.key === 'Tab'
+    ) {
+      return;
+    }
+
+    // If it's a printable character and searchable is enabled, open the popover and start typing
+    if (searchable && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      e.preventDefault();
+      if (!popoverState.isOpen) {
+        popoverState.open();
+      }
+      // Set the initial search query
+      setSearchQuery(e.key);
+    }
+
+    // Call the original onKeyDown if provided
+    buttonProps.onKeyDown?.(e);
+  };
+
   return (
     <Popover open={popoverState.isOpen} onOpenChange={popoverState.setOpen}>
       <PopoverTrigger asChild>
@@ -131,6 +176,7 @@ export function Select<T extends React.Key = string>({
           aria-haspopup="listbox"
           aria-expanded={popoverState.isOpen}
           aria-controls={listboxId}
+          onKeyDown={handleTriggerKeyDown}
           {...buttonProps}
         >
           {value != null && value !== '' ? (selectedOption?.label ?? String(value)) : placeholder}
@@ -159,6 +205,7 @@ export function Select<T extends React.Key = string>({
             {searchable && (
               <div className="px-1.5 pb-1.5 pt-1.5">
                 <SearchInput
+                  ref={searchInputRef}
                   placeholder="Search..."
                   value={searchQuery}
                   onValueChange={(v: string) => {