Correctly handle IME composition in <Combobox.Input> (#2426)

* Don’t try to open combobox when composing characters

* wip

* Delay IME composition end until after keydown events

* Use `d.nextFrame` to handle `compositionend` event

* Update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `className` hydration for `<Transition appear>` ([#2390](https://github.com/tailwindlabs/headlessui/pull/2390))
 - Improve `Combobox` types to improve false positives ([#2411](https://github.com/tailwindlabs/headlessui/pull/2411))
 - Merge `className` correctly when it’s a function ([#2412](https://github.com/tailwindlabs/headlessui/pull/2412))
+- Correctly handle IME composition in `<Combobox.Input>` ([#2426](https://github.com/tailwindlabs/headlessui/pull/2426))
 
 ### Added
 

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(() => {
+    d.nextFrame(() => {
       isComposing.current = false
+
+      if (composedChangeEvent.current) {
+        actions.openCombobox()
+        onChange?.(composedChangeEvent.current)
+        composedChangeEvent.current = null
+      }
     })
   })
 
@@ -953,6 +960,10 @@ function InputFn<
   })
 
   let handleChange = useEvent((event: React.ChangeEvent<HTMLInputElement>) => {
+    if (isComposing.current) {
+      composedChangeEvent.current = event
+      return
+    }
     actions.openCombobox()
     onChange?.(event)
   })

packages/@headlessui-vue/CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `FocusTrap` event listeners once document has loaded ([#2389](https://github.com/tailwindlabs/headlessui/pull/2389))
 - Don't scroll-lock `<Dialog>` when wrapping transition isn't showing ([#2422](https://github.com/tailwindlabs/headlessui/pull/2422))
 - Ensure DOM `ref` is properly handled in the `RadioGroup` component ([#2424](https://github.com/tailwindlabs/headlessui/pull/2424))
+- Correctly handle IME composition in `<Combobox.Input>` ([#2426](https://github.com/tailwindlabs/headlessui/pull/2426))
 
 ### Added
 

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

@@ -37,6 +37,7 @@ import { objectToFormEntries } from '../../utils/form'
 import { useControllable } from '../../hooks/use-controllable'
 import { useTrackedPointer } from '../../hooks/use-tracked-pointer'
 import { isMobile } from '../../utils/platform'
+import { disposables } from '../../utils/disposables'
 
 function defaultComparator<T>(a: T, z: T): boolean {
   return a === z
@@ -763,12 +764,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(() => {
+      disposables().nextFrame(() => {
         isComposing.value = false
+
+        if (composedChangeEvent.value) {
+          api.openCombobox()
+          emit('change', composedChangeEvent.value)
+          composedChangeEvent.value = null
+        }
       })
     }
 
@@ -891,6 +899,10 @@ export let ComboboxInput = defineComponent({
     }
 
     function handleInput(event: Event & { target: HTMLInputElement }) {
+      if (isComposing.value) {
+        composedChangeEvent.value = event
+        return
+      }
       api.openCombobox()
       emit('change', event)
     }