From 336faabcabdeaa2eb75ff1af60ec33caef8d2d1e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Thu, 24 Feb 2022 14:43:08 +0100
Subject: [PATCH] Ensure that you can close the Combobox initially (#1148)

* ensure that you can close the combobox initially

The issue is that `onInput` fires on every keystroke, and we also
handled `onChange` which is triggered on blur in Vue.

This means that the moment we blur, we also called the `handleChange`
code to re-open the combobox because we want to open the combobox if
something changes when the user starts typing.

To fix this, we will splitup the logic so that it will only open the
combobox on input but not on change.

* update changelog
---
 CHANGELOG.md                                                | 1 +
 .../@headlessui-vue/src/components/combobox/combobox.ts     | 6 +++++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 471b1f4..8995721 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Make sure that the input syncs when the combobox closes ([#1137](https://github.com/tailwindlabs/headlessui/pull/1137))
+- Ensure that you can close the combobox initially ([#1148](https://github.com/tailwindlabs/headlessui/pull/1148))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 
diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
index f7a240d..24b32be 100644
--- a/packages/@headlessui-vue/src/components/combobox/combobox.ts
+++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -499,6 +499,10 @@ export let ComboboxInput = defineComponent({
     }
 
     function handleChange(event: Event & { target: HTMLInputElement }) {
+      emit('change', event)
+    }
+
+    function handleInput(event: Event & { target: HTMLInputElement }) {
       api.openCombobox()
       emit('change', event)
     }
@@ -516,7 +520,7 @@ export let ComboboxInput = defineComponent({
         id,
         onKeydown: handleKeyDown,
         onChange: handleChange,
-        onInput: handleChange,
+        onInput: handleInput,
         role: 'combobox',
         type: 'text',
         tabIndex: 0,