feat(combobox): combobox input controlled behaviour

packages/components/combobox/src/Combobox.doc.mdx

@@ -105,9 +105,7 @@ Disable `autoFilter` to implement your own logic to filter out items depending o
 
 This example showcases case-sensitive filtering.
 
-<p>TODO (when controlled mode for Combobox.Input is implemented)</p>
-
-{/* <Canvas of={stories.FilteringManual} /> */}
+<Canvas of={stories.FilteringManual} />
 
 ### Custom value entry
 

packages/components/combobox/src/Combobox.stories.tsx

@@ -6,6 +6,7 @@ import { Chip } from '@spark-ui/chip'
 import { Dialog } from '@spark-ui/dialog'
 import { FormField } from '@spark-ui/form-field'
 import { PenOutline } from '@spark-ui/icons/dist/icons/PenOutline'
+import { Input } from '@spark-ui/input'
 import { RadioGroup } from '@spark-ui/radio-group'
 import { Switch } from '@spark-ui/switch'
 import { Tag } from '@spark-ui/tag'
@@ -52,8 +53,17 @@ export const Default: StoryFn = _args => {
 }
 
 export const Controlled: StoryFn = () => {
+  const books = {
+    'book-1': 'To Kill a Mockingbird',
+    'book-2': 'War and Peace',
+    'book-3': 'The Idiot',
+    'book-4': 'A Picture of Dorian Gray',
+    'book-5': '1984',
+    'book-6': 'Pride and Prejudice',
+  }
   const [value, setValue] = useState<string | undefined>('book-2')
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState<string>('')
 
   return (
     <div className="flex flex-wrap gap-lg pb-[300px]">
@@ -67,14 +77,26 @@ export const Controlled: StoryFn = () => {
         <FormField>
           <FormField.Label className="font-bold">Selected item:</FormField.Label>
           <RadioGroup value={value || ''} onValueChange={setValue}>
-            <RadioGroup.Radio value="book-1">To Kill a Mockingbird</RadioGroup.Radio>
-            <RadioGroup.Radio value="book-2">War and Peace</RadioGroup.Radio>
-            <RadioGroup.Radio value="book-3">The Idiot</RadioGroup.Radio>
-            <RadioGroup.Radio value="book-4">A Picture of Dorian Gray</RadioGroup.Radio>
-            <RadioGroup.Radio value="book-5">1984</RadioGroup.Radio>
-            <RadioGroup.Radio value="book-6">Pride and Prejudice</RadioGroup.Radio>
+            {Object.entries(books).map(([key, label]) => (
+              <RadioGroup.Radio key={key} value={key}>
+                {label}
+              </RadioGroup.Radio>
+            ))}
           </RadioGroup>
         </FormField>
+        <FormField>
+          <FormField.Label className="font-bold">Input value:</FormField.Label>
+          <Input
+            value={inputValue}
+            onValueChange={setInputValue}
+            placeholder="Combobox input value"
+            onBlur={() => {
+              setInputValue(
+                value ? Object.entries(books).find(([id]) => value === id)?.[1] || '' : ''
+              )
+            }}
+          ></Input>
+        </FormField>
       </div>
 
       <Combobox
@@ -88,20 +110,25 @@ export const Controlled: StoryFn = () => {
           <Combobox.LeadingIcon>
             <PenOutline />
           </Combobox.LeadingIcon>
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+            defaultValue={inputValue}
+          />
           <Combobox.ClearButton aria-label="Clear input" />
           <Combobox.Disclosure openedLabel="Close popup" closedLabel="Open popup" />
         </Combobox.Trigger>
 
         <Combobox.Popover>
           <Combobox.Items>
             <Combobox.Empty>No results found</Combobox.Empty>
-            <Combobox.Item value="book-1">To Kill a Mockingbird</Combobox.Item>
-            <Combobox.Item value="book-2">War and Peace</Combobox.Item>
-            <Combobox.Item value="book-3">The Idiot</Combobox.Item>
-            <Combobox.Item value="book-4">A Picture of Dorian Gray</Combobox.Item>
-            <Combobox.Item value="book-5">1984</Combobox.Item>
-            <Combobox.Item value="book-6">Pride and Prejudice</Combobox.Item>
+            {Object.entries(books).map(([key, label]) => (
+              <Combobox.Item key={key} value={key}>
+                {label}
+              </Combobox.Item>
+            ))}
           </Combobox.Items>
         </Combobox.Popover>
       </Combobox>
@@ -201,47 +228,53 @@ export const Disabled: StoryFn = _args => {
   )
 }
 
-// export const FilteringManual: StoryFn = () => {
-//   const items = {
-//     'book-1': 'To Kill a Mockingbird',
-//     'book-2': 'War and Peace',
-//     'book-3': 'The Idiot',
-//     'book-4': 'A Picture of Dorian Gray',
-//     'book-5': '1984',
-//     'book-6': 'Pride and Prejudice',
-//   }
-//   const [inputValue, setInputValue] = useState('')
-
-//   return (
-//     <div className="pb-[300px]">
-//       <Combobox autoFilter={false}>
-//         <Combobox.Trigger>
-//           <Combobox.Input
-//             aria-label="Book"
-//             placeholder="Pick a book"
-//             value={inputValue}
-//             onValueChange={setInputValue}
-//           />
-//         </Combobox.Trigger>
-
-//         <Combobox.Popover>
-//           <Combobox.Items>
-//             <Combobox.Empty>No results found</Combobox.Empty>
-//             {Object.entries(items).map(([value, text]) => {
-//               if (!text.includes(inputValue)) return null
-
-//               return (
-//                 <Combobox.Item value={value} key={value}>
-//                   {text}
-//                 </Combobox.Item>
-//               )
-//             })}
-//           </Combobox.Items>
-//         </Combobox.Popover>
-//       </Combobox>
-//     </div>
-//   )
-// }
+export const FilteringManual: StoryFn = () => {
+  const items = {
+    'book-1': 'To Kill a Mockingbird',
+    'book-2': 'War and Peace',
+    'book-3': 'The Idiot',
+    'book-4': 'A Picture of Dorian Gray',
+    'book-5': '1984',
+    'book-6': 'Pride and Prejudice',
+  } as const
+
+  const [inputValue, setInputValue] = useState('')
+
+  const filteredItems = Object.keys(items).reduce((acc: Record<string, string>, key: string) => {
+    const text: string = items[key as keyof typeof items]
+    const match = text.toLowerCase().includes(inputValue.toLowerCase())
+
+    return match ? { ...acc, [key]: text } : acc
+  }, {})
+
+  return (
+    <div className="pb-[300px]">
+      <Combobox autoFilter={false}>
+        <Combobox.Trigger>
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
+        </Combobox.Trigger>
+
+        <Combobox.Popover>
+          <Combobox.Items>
+            <Combobox.Empty>No results found</Combobox.Empty>
+            {Object.entries(filteredItems).map(([value, text]) => {
+              return (
+                <Combobox.Item value={value} key={value}>
+                  {text}
+                </Combobox.Item>
+              )
+            })}
+          </Combobox.Items>
+        </Combobox.Popover>
+      </Combobox>
+    </div>
+  )
+}
 
 export const ReadOnly: StoryFn = _args => {
   return (
@@ -464,6 +497,7 @@ export const MultipleSelection: StoryFn = _args => {
 export const MultipleSelectionControlled: StoryFn = () => {
   const [value, setValue] = useState<string[]>(['book-2'])
   const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState<string>('')
 
   return (
     <div className="flex flex-wrap gap-lg pb-[300px]">
@@ -485,6 +519,17 @@ export const MultipleSelectionControlled: StoryFn = () => {
             <Checkbox value="book-6">Pride and Prejudice</Checkbox>
           </CheckboxGroup>
         </FormField>
+        <FormField>
+          <FormField.Label className="font-bold">Input value:</FormField.Label>
+          <Input
+            value={inputValue}
+            onValueChange={setInputValue}
+            placeholder="Combobox input value"
+            onBlur={() => {
+              setInputValue('')
+            }}
+          ></Input>
+        </FormField>
       </div>
 
       <Combobox
@@ -497,7 +542,12 @@ export const MultipleSelectionControlled: StoryFn = () => {
       >
         <Combobox.Trigger>
           <Combobox.SelectedItems />
-          <Combobox.Input aria-label="Book" placeholder="Pick a book" />
+          <Combobox.Input
+            aria-label="Book"
+            placeholder="Pick a book"
+            value={inputValue}
+            onValueChange={setInputValue}
+          />
           <Combobox.ClearButton aria-label="Clear input" />
           <Combobox.Disclosure openedLabel="Close popup" closedLabel="Open popup" />
         </Combobox.Trigger>

packages/components/combobox/src/ComboboxContext.tsx

@@ -33,6 +33,7 @@ export interface ComboboxContextState extends DownshiftState {
   lastInteractionType: 'mouse' | 'keyboard'
   setHasPopover: Dispatch<SetStateAction<boolean>>
   setLastInteractionType: (type: 'mouse' | 'keyboard') => void
+  setOnInputValueChange: Dispatch<SetStateAction<((v: string) => void) | null>>
   innerInputRef: React.RefObject<HTMLInputElement>
   triggerAreaRef: React.RefObject<HTMLDivElement>
   isLoading?: boolean
@@ -158,6 +159,7 @@ export const ComboboxProvider = ({
   const [inputValue, setInputValue] = useState<string | undefined>('')
   const triggerAreaRef = useRef<HTMLDivElement>(null)
   const innerInputRef = useRef<HTMLInputElement>(null)
+  const [onInputValueChange, setOnInputValueChange] = useState<((v: string) => void) | null>(null)
 
   const [comboboxValue] = useCombinedState(controlledValue, defaultValue)
 
@@ -283,25 +285,39 @@ export const ComboboxProvider = ({
 
   const filteredItems = Array.from(filteredItemsMap.values())
 
+  useEffect(() => {
+    onInputValueChange?.(inputValue || '')
+  }, [inputValue])
+
   /**
    * - props: https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#basic-props
    * - state (for state reducer): https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#statechangetypes
    * - output: https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#returned-props
    */
   const downshift = useCombobox<ComboboxItem>({
     items: filteredItems,
-    selectedItem,
+    selectedItem: multiple ? undefined : selectedItem,
     id,
     labelId,
+    // Input
     inputValue,
+    onInputValueChange: ({ inputValue: newInputValue }) => {
+      setInputValue(newInputValue)
+
+      if (autoFilter) {
+        const filtered = getFilteredItemsMap(itemsMap, newInputValue || '')
+        setFilteredItems(filtered)
+      }
+    },
+    // Open
+    initialIsOpen: defaultOpen,
     ...(controlledOpen != null && { isOpen: controlledOpen }),
     onIsOpenChange: changes => {
       if (changes.isOpen != null) {
         onOpenChange?.(changes.isOpen)
       }
     },
-    initialIsOpen: defaultOpen,
-    ...(multiple && { selectedItem: undefined }),
+    // Custom Spark item object parsing
     itemToString: item => {
       return (item as ComboboxItem)?.text
     },
@@ -314,14 +330,7 @@ export const ComboboxProvider = ({
 
       return item.disabled || isFilteredOut
     },
-    onInputValueChange: ({ inputValue }) => {
-      setInputValue(inputValue)
-
-      if (autoFilter) {
-        const filtered = getFilteredItemsMap(itemsMap, inputValue || '')
-        setFilteredItems(filtered)
-      }
-    },
+    // Main reducer
     stateReducer: multiple
       ? multipleSelectionReducer({
           multiselect,
@@ -402,6 +411,7 @@ export const ComboboxProvider = ({
         selectItem: onInternalSelectedItemChange,
         setSelectedItems: onInternalSelectedItemsChange,
         isLoading,
+        setOnInputValueChange,
       }}
     >
       <WrapperComponent {...wrapperProps}>{children}</WrapperComponent>

packages/components/combobox/src/ComboboxInput.tsx

@@ -1,4 +1,5 @@
 import { Popover } from '@spark-ui/popover'
+import { useCombinedState } from '@spark-ui/use-combined-state'
 import { useMergeRefs } from '@spark-ui/use-merge-refs'
 import { VisuallyHidden } from '@spark-ui/visually-hidden'
 import { cx } from 'class-variance-authority'
@@ -11,16 +12,38 @@ type InputPrimitiveProps = ComponentPropsWithoutRef<'input'>
 interface InputProps extends Omit<InputPrimitiveProps, 'value' | 'placeholder'> {
   className?: string
   placeholder?: string
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
 }
 
 export const Input = forwardRef(
   (
-    { 'aria-label': ariaLabel, className, placeholder, ...props }: InputProps,
+    {
+      'aria-label': ariaLabel,
+      className,
+      placeholder,
+      value,
+      defaultValue,
+      onValueChange,
+      ...props
+    }: InputProps,
     forwardedRef: Ref<HTMLInputElement>
   ) => {
     const ctx = useComboboxContext()
+    const [inputValue] = useCombinedState(value, defaultValue)
 
     useEffect(() => {
+      if (inputValue != null) {
+        ctx.setInputValue(inputValue)
+      }
+    }, [inputValue])
+
+    useEffect(() => {
+      if (onValueChange) {
+        ctx.setOnInputValueChange(() => onValueChange)
+      }
+
       // Sync input with combobox default value
       if (!ctx.multiple && ctx.selectedItem) {
         ctx.setInputValue(ctx.selectedItem.text)

packages/components/combobox/src/ComboboxSelectedItems.tsx

@@ -7,7 +7,7 @@ import { useComboboxContext } from './ComboboxContext'
 export const SelectedItems = () => {
   const ctx = useComboboxContext()
 
-  if (!ctx.selectedItems.length) {
+  if (!ctx.selectedItems.length || !ctx.multiple) {
     return null
   }
 
@@ -26,7 +26,7 @@ export const SelectedItems = () => {
           const element = e.target as HTMLSpanElement
           if (ctx.lastInteractionType === 'keyboard') {
             element.scrollIntoView({
-              behavior: 'instant',
+              behavior: 'smooth',
               block: 'nearest',
               inline: 'nearest',
             })