wip

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -821,12 +821,19 @@ function InputFn<
   )
 
   let isComposing = useRef(false)
+  let composedChangeEvent = useRef<React.ChangeEvent<HTMLInputElement> | null>(null)
   let handleCompositionStart = useEvent(() => {
     isComposing.current = true
   })
   let handleCompositionEnd = useEvent(() => {
     setTimeout(() => {
       isComposing.current = false
+
+      if (composedChangeEvent.current) {
+        actions.openCombobox()
+        onChange?.(composedChangeEvent.current)
+        composedChangeEvent.current = null
+      }
     })
   })
 
@@ -953,7 +960,10 @@ function InputFn<
   })
 
   let handleChange = useEvent((event: React.ChangeEvent<HTMLInputElement>) => {
-    if (isComposing.current) return
+    if (isComposing.current) {
+      composedChangeEvent.current = event
+      return
+    }
     actions.openCombobox()
     onChange?.(event)
   })

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -763,12 +763,19 @@ export let ComboboxInput = defineComponent({
     })
 
     let isComposing = ref(false)
+    let composedChangeEvent = ref<(Event & { target: HTMLInputElement }) | null>(null)
     function handleCompositionstart() {
       isComposing.value = true
     }
     function handleCompositionend() {
       setTimeout(() => {
         isComposing.value = false
+
+        if (composedChangeEvent.value) {
+          api.openCombobox()
+          emit('change', composedChangeEvent.value)
+          composedChangeEvent.value = null
+        }
       })
     }
 
@@ -891,7 +898,10 @@ export let ComboboxInput = defineComponent({
     }
 
     function handleInput(event: Event & { target: HTMLInputElement }) {
-      if (isComposing.value) return
+      if (isComposing.value) {
+        composedChangeEvent.value = event
+        return
+      }
       api.openCombobox()
       emit('change', event)
     }