From 0732d369d5cf70334daeccc093b400172c692cb2 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 23 Feb 2022 11:24:31 +0100
Subject: [PATCH 1/2] make sure that the input syncs when the combobox closes

---
 .../src/components/combobox/combobox.test.tsx | 33 +++++++++++++++++
 .../src/components/combobox/combobox.test.ts  | 36 +++++++++++++++++++
 .../src/components/combobox/combobox.ts       |  4 ++-
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx
index b643d1d960..eb18766358 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(
+            <Combobox value="option-b" onChange={console.log}>
+              <Combobox.Input onChange={NOOP} />
+              <Combobox.Button>Trigger</Combobox.Button>
+              <Combobox.Options>
+                <Combobox.Option value="option-a">Option A</Combobox.Option>
+                <Combobox.Option value="option-b">Option B</Combobox.Option>
+                <Combobox.Option value="option-c">Option C</Combobox.Option>
+              </Combobox.Options>
+            </Combobox>
+          )
+
+          // 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 6c2f028f03..9d401dc1ee 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`
+              <Combobox v-model="value">
+                <ComboboxInput />
+                <ComboboxButton>Trigger</ComboboxButton>
+                <ComboboxOptions>
+                  <ComboboxOption value="option-a">Option A</ComboboxOption>
+                  <ComboboxOption value="option-b">Option B</ComboboxOption>
+                  <ComboboxOption value="option-c">Option C</ComboboxOption>
+                </ComboboxOptions>
+              </Combobox>
+            `,
+            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 5f0d9344e3..f7a240d848 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)

From d827f89b4d3e3cbd2e1ed4a7aefe5b46b8dc8821 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Wed, 23 Feb 2022 11:26:25 +0100
Subject: [PATCH 2/2] update changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e6aff15347..471b1f48d2 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