fix(Combobox): onInputEnter handler should not be triggered when isCo…

…mposing true (#1431) * fix(Combobox): onInputEnter handler should not be triggered when isComposing true * fix(Combobox): use compositonstart and compositionend instead of event.isComposing
unovue · Nov 19, 2024 · 00adf3f · 00adf3f
1 parent 0cf78ab
commit 00adf3f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git 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']
 </script>
 

diff --git 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"
   >
     <slot />
   </Primitive>

diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -25,6 +25,8 @@ type ComboboxRootContext<T> = {
   onInputElementChange: (el: HTMLInputElement) => void
   onInputNavigation: (dir: 'up' | 'down' | 'home' | 'end') => void
   onInputEnter: (event: InputEvent) => void
+  onCompositionStart: () => void
+  onCompositionEnd: () => void
   selectedValue: Ref<T | undefined>
   selectedElement: ComputedRef<HTMLElement | undefined>
   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,