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

@@ -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
 

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,