Reset Combobox Input when the value gets reset

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) {