diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6aff15..471b1f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased - @headlessui/vue]
-- Nothing yet!
+### Fixed
+
+- Make sure that the input syncs when the combobox closes ([#1137](https://github.com/tailwindlabs/headlessui/pull/1137))
## [@headlessui/react@v1.5.0] - 2022-02-17
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
index b643d1d..eb18766 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
@@ -2053,6 +2053,39 @@ describe('Keyboard interactions', () => {
expect(spy).toHaveBeenCalledTimes(2)
})
)
+
+ it(
+ 'should sync the input field correctly and reset it when pressing Escape',
+ suppressConsoleLogs(async () => {
+ render(
+
+
+ Trigger
+
+ Option A
+ Option B
+ Option C
+
+
+ )
+
+ // Open combobox
+ await click(getComboboxButton())
+
+ // Verify the input has the selected value
+ expect(getComboboxInput()?.value).toBe('option-b')
+
+ // Override the input by typing something
+ await type(word('test'), getComboboxInput())
+ expect(getComboboxInput()?.value).toBe('test')
+
+ // Close combobox
+ await press(Keys.Escape)
+
+ // Verify the input is reset correctly
+ expect(getComboboxInput()?.value).toBe('option-b')
+ })
+ )
})
describe('`ArrowDown` key', () => {
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
index 6c2f028..9d401dc 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts
@@ -2195,6 +2195,42 @@ describe('Keyboard interactions', () => {
expect(spy).toHaveBeenCalledTimes(2)
})
)
+
+ it(
+ 'should sync the input field correctly and reset it when pressing Escape',
+ suppressConsoleLogs(async () => {
+ renderTemplate({
+ template: html`
+
+
+ Trigger
+
+ Option A
+ Option B
+ Option C
+
+
+ `,
+ setup: () => ({ value: ref('option-b') }),
+ })
+
+ // Open combobox
+ await click(getComboboxButton())
+
+ // Verify the input has the selected value
+ expect(getComboboxInput()?.value).toBe('option-b')
+
+ // Override the input by typing something
+ await type(word('test'), getComboboxInput())
+ expect(getComboboxInput()?.value).toBe('test')
+
+ // Close combobox
+ await press(Keys.Escape)
+
+ // Verify the input is reset correctly
+ expect(getComboboxInput()?.value).toBe('option-b')
+ })
+ )
})
describe('`ArrowDown` key', () => {
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
index 5f0d934..f7a240d 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -229,7 +229,9 @@ export let Combobox = defineComponent({
api.closeCombobox()
})
- watch([api.value, api.inputRef], () => api.syncInputValue(), { immediate: true })
+ watch([api.value, api.inputRef, api.comboboxState], () => api.syncInputValue(), {
+ immediate: true,
+ })
// @ts-expect-error Types of property 'dataRef' are incompatible.
provide(ComboboxContext, api)