Don’t drop initial character when searching in Combobox (#1223)

* Don’t drop initial character when searching in Combobox * Update changelog
tailwindlabs · Mar 9, 2022 · 236482a · 236482a
1 parent 07c3a61
commit 236482a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -48,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ignore "outside click" on removed elements ([#1193](https://github.com/tailwindlabs/headlessui/pull/1193))
 - Remove `focus()` from Listbox Option ([#1218](https://github.com/tailwindlabs/headlessui/pull/1218))
 - Improve some internal code ([#1221](https://github.com/tailwindlabs/headlessui/pull/1221))
+- Don’t drop initial character when searching in Combobox ([#1223](https://github.com/tailwindlabs/headlessui/pull/1223))
 
 ### Added
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -261,10 +261,25 @@ export let Combobox = defineComponent({
       api.closeCombobox()
     })
 
-    watch([api.value, api.inputRef, api.comboboxState], () => api.syncInputValue(), {
+    watch([api.value, api.inputRef], () => api.syncInputValue(), {
       immediate: true,
     })
 
+    // Only sync the input value on close as typing into the input will trigger it to open
+    // causing a resync of the input value with the currently stored, stale value that is
+    // one character behind since the input's value has just been updated by the browser
+    watch(
+      api.comboboxState,
+      (state) => {
+        if (state === ComboboxStates.Closed) {
+          api.syncInputValue()
+        }
+      },
+      {
+        immediate: true,
+      }
+    )
+
     // @ts-expect-error Types of property 'dataRef' are incompatible.
     provide(ComboboxContext, api)
     useOpenClosedProvider(