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,