diff --git a/packages/radix-vue/src/Combobox/ComboboxInput.vue b/packages/radix-vue/src/Combobox/ComboboxInput.vue index 8d3f4b68f..a9e0b4f46 100644 --- a/packages/radix-vue/src/Combobox/ComboboxInput.vue +++ b/packages/radix-vue/src/Combobox/ComboboxInput.vue @@ -55,6 +55,12 @@ function handleKeyDown(ev: KeyboardEvent) { } function handleHomeEnd(ev: KeyboardEvent) { + // allow default input behavior when element has a value + if(ev.target.value?.length > 0) + return + + ev.preventDefault() + if (!rootContext.open.value) return rootContext.onInputNavigation(ev.key === 'Home' ? 'home' : 'end') @@ -87,7 +93,7 @@ function handleInput(event: Event) { @input="handleInput" @keydown.down.up.prevent="handleKeyDown" @keydown.enter="rootContext.onInputEnter" - @keydown.home.end.prevent="handleHomeEnd" + @keydown.home.end="handleHomeEnd" > diff --git a/packages/radix-vue/src/TagsInput/TagsInputRoot.vue b/packages/radix-vue/src/TagsInput/TagsInputRoot.vue index 48e545110..19eb70013 100644 --- a/packages/radix-vue/src/TagsInput/TagsInputRoot.vue +++ b/packages/radix-vue/src/TagsInput/TagsInputRoot.vue @@ -174,8 +174,10 @@ provideTagsInputRootContext({ case 'ArrowLeft': { const isArrowRight = (event.key === 'ArrowRight' && dir.value === 'ltr') || (event.key === 'ArrowLeft' && dir.value === 'rtl') const isArrowLeft = !isArrowRight - // only focus on tags when cursor is at the first position - if (target.selectionStart !== 0 || target.selectionEnd !== 0) + + // prevent tag focus when there's something in the input + // the user must clear the input if he needs to clear already added tags + if (target.value.length > 0) break // if you press ArrowLeft, then we last tag