Merge pull request #559 from components-ai/combobox-improvement

Improve enter handling for combobox

Author: johno

.changeset/brown-steaks-sit.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Improve enter handling for combobox

packages/gui/src/components/primitives/Combobox.tsx

@@ -1,5 +1,12 @@
 import { useCombobox } from 'downshift'
-import { useEffect, useId, useRef, useState } from 'react'
+import {
+  ChangeEvent,
+  KeyboardEvent,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
 
 interface ComboboxInterface {
   onFilterItems: (filterValue: string) => string[]
@@ -59,21 +66,42 @@ export function Combobox({
     setFilterValue(clearOnSelect ? '' : selectedItem)
   }
 
+  const handleEnter = () => {
+    if (items.includes(filterValue)) {
+      handleItemSelected(filterValue)
+      toggleMenu()
+    }
+  }
+
   return (
     <div {...getComboboxProps()}>
       <input
         type="text"
         {...getInputProps({
           ref: inputRef,
-          onChange: (e: any) => setFilterValue(e.target.value),
+          onChange: (e: ChangeEvent<HTMLInputElement>) => {
+            setFilterValue(e.target.value)
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
+            if (e.key === 'Enter') {
+              handleEnter()
+            }
+          },
         })}
         onFocus={() => {
           if (!isOpen) {
             toggleMenu()
             handleFilterItems('')
           }
         }}
-        sx={{ WebkitAppearance: 'none', appearance: 'none', width: '100%', border: '1px solid', borderRadius: '6px', p: 1 }}
+        sx={{
+          WebkitAppearance: 'none',
+          appearance: 'none',
+          width: '100%',
+          border: '1px solid',
+          borderRadius: '6px',
+          p: 1,
+        }}
       />
       <div
         sx={{