diff --git a/docs/components/demo/Combobox/tailwind/index.vue b/docs/components/demo/Combobox/tailwind/index.vue
index d00518d1d..bbb5056de 100644
--- a/docs/components/demo/Combobox/tailwind/index.vue
+++ b/docs/components/demo/Combobox/tailwind/index.vue
@@ -4,7 +4,7 @@ import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, Combobox
import { Icon } from '@iconify/vue'
const v = ref('')
-const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple']
+const options = ['Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple', 'りんご']
const vegetables = ['Aubergine', 'Broccoli', 'Carrot', 'Courgette', 'Leek']
diff --git a/packages/radix-vue/src/Combobox/ComboboxInput.vue b/packages/radix-vue/src/Combobox/ComboboxInput.vue
index 8d3f4b68f..dfc599b1f 100644
--- a/packages/radix-vue/src/Combobox/ComboboxInput.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxInput.vue
@@ -88,6 +88,8 @@ function handleInput(event: Event) {
@keydown.down.up.prevent="handleKeyDown"
@keydown.enter="rootContext.onInputEnter"
@keydown.home.end.prevent="handleHomeEnd"
+ @compositionstart="rootContext.onCompositionStart"
+ @compositionend="rootContext.onCompositionEnd"
>
diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
index 3eb0955e2..60f43d33f 100644
--- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -25,6 +25,8 @@ type ComboboxRootContext = {
onInputElementChange: (el: HTMLInputElement) => void
onInputNavigation: (dir: 'up' | 'down' | 'home' | 'end') => void
onInputEnter: (event: InputEvent) => void
+ onCompositionStart: () => void
+ onCompositionEnd: () => void
selectedValue: Ref
selectedElement: ComputedRef
onSelectedValueChange: (val: T) => void
@@ -246,6 +248,24 @@ function focusOnSelectedElement() {
selectedElement.value.focus()
}
+const isComposing = ref(false)
+function onCompositionStart() {
+ isComposing.value = true
+}
+function onCompositionEnd() {
+ requestAnimationFrame(() => {
+ isComposing.value = false
+ })
+}
+async function onInputEnter(event: InputEvent) {
+ if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element) {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!isComposing.value)
+ selectedElement.value?.click()
+ }
+}
+
provideComboboxRootContext({
searchTerm,
modelValue,
@@ -284,14 +304,9 @@ provideComboboxRootContext({
nextTick(() => inputElement.value?.focus({ preventScroll: true }))
},
- onInputEnter: async (event) => {
- if (filteredOptions.value.length && selectedValue.value && selectedElement.value instanceof Element) {
- event.preventDefault()
- event.stopPropagation()
-
- selectedElement.value?.click()
- }
- },
+ onInputEnter,
+ onCompositionEnd,
+ onCompositionStart,
selectedValue,
onSelectedValueChange: val => selectedValue.value = val as T,
parentElement,