Reset Combobox Input when the value gets reset (#1181)

* reset input if value is reset

Fixes: #1177

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `<Transition>` flickering issue ([#1118](https://github.com/tailwindlabs/headlessui/pull/1118))
 - Improve outside click support ([#1175](https://github.com/tailwindlabs/headlessui/pull/1175))
 - Ensure that `appear` works regardless of multiple rerenders ([#1179](https://github.com/tailwindlabs/headlessui/pull/1179))
+- Reset Combobox Input when the value gets reset ([#1181](https://github.com/tailwindlabs/headlessui/pull/1181))
 
 ## [Unreleased - @headlessui/vue]
 
@@ -29,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `hover` scroll ([#1161](https://github.com/tailwindlabs/headlessui/pull/1161))
 - Guarantee DOM sort order when performing actions ([#1168](https://github.com/tailwindlabs/headlessui/pull/1168))
 - Improve outside click support ([#1175](https://github.com/tailwindlabs/headlessui/pull/1175))
+- Reset Combobox Input when the value gets reset ([#1181](https://github.com/tailwindlabs/headlessui/pull/1181))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

packages/@headlessui-react/src/components/combobox/combobox.test.tsx

@@ -4349,4 +4349,46 @@ describe('Mouse interactions', () => {
       assertActiveComboboxOption(options[1])
     })
   )
+
+  it(
+    'should sync the input field correctly and reset it when resetting the value from outside',
+    suppressConsoleLogs(async () => {
+      function Example() {
+        let [value, setValue] = useState<string | null>('bob')
+
+        return (
+          <>
+            <Combobox value={value} onChange={setValue}>
+              <Combobox.Input onChange={NOOP} />
+              <Combobox.Button>Trigger</Combobox.Button>
+              <Combobox.Options>
+                <Combobox.Option value="alice">alice</Combobox.Option>
+                <Combobox.Option value="bob">bob</Combobox.Option>
+                <Combobox.Option value="charlie">charlie</Combobox.Option>
+              </Combobox.Options>
+            </Combobox>
+            <button onClick={() => setValue(null)}>reset</button>
+          </>
+        )
+      }
+
+      render(<Example />)
+
+      // Open combobox
+      await click(getComboboxButton())
+
+      // Verify the input has the selected value
+      expect(getComboboxInput()?.value).toBe('bob')
+
+      // Override the input by typing something
+      await type(word('test'), getComboboxInput())
+      expect(getComboboxInput()?.value).toBe('test')
+
+      // Reset from outside
+      await click(getByText('reset'))
+
+      // Verify the input is reset correctly
+      expect(getComboboxInput()?.value).toBe('')
+    })
+  )
 })

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -330,6 +330,8 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<
       inputRef.current.value = displayValue(value)
     } else if (typeof value === 'string') {
       inputRef.current.value = value
+    } else {
+      inputRef.current.value = ''
     }
   }, [value, inputRef, inputPropsRef])
 

packages/@headlessui-vue/src/components/combobox/combobox.test.ts

@@ -4576,4 +4576,41 @@ describe('Mouse interactions', () => {
       assertActiveComboboxOption(options[1])
     })
   )
+
+  it(
+    'should sync the input field correctly and reset it when resetting the value from outside',
+    suppressConsoleLogs(async () => {
+      renderTemplate({
+        template: html`
+          <Combobox v-model="value">
+            <ComboboxInput />
+            <ComboboxButton>Trigger</ComboboxButton>
+            <ComboboxOptions>
+              <ComboboxOption value="alice">alice</ComboboxOption>
+              <ComboboxOption value="bob">bob</ComboboxOption>
+              <ComboboxOption value="charlie">charlie</ComboboxOption>
+            </ComboboxOptions>
+          </Combobox>
+          <button @click="value = null">reset</button>
+        `,
+        setup: () => ({ value: ref('bob') }),
+      })
+
+      // Open combobox
+      await click(getComboboxButton())
+
+      // Verify the input has the selected value
+      expect(getComboboxInput()?.value).toBe('bob')
+
+      // Override the input by typing something
+      await type(word('test'), getComboboxInput())
+      expect(getComboboxInput()?.value).toBe('test')
+
+      // Reset from outside
+      await click(getByText('reset'))
+
+      // Verify the input is reset correctly
+      expect(getComboboxInput()?.value).toBe('')
+    })
+  )
 })

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -177,6 +177,8 @@ export let Combobox = defineComponent({
           api.inputRef!.value!.value = displayValue(value)
         } else if (typeof value === 'string') {
           api.inputRef!.value!.value = value
+        } else {
+          api.inputRef!.value!.value = ''
         }
       },
       selectOption(id: string) {