Make sure that the input syncs when the combobox closes (#1137)

* make sure that the input syncs when the combobox closes * update changelog
tailwindlabs · Feb 23, 2022 · 475568b · 475568b
1 parent 0c213b5
commit 475568b
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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)