Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Allow default input behavior for text selection on TagsInput and Combobox #1318

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow default input behavior for text selection on TagsInput and Combobox #1318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a43766
Allow text selection within `input` tag using `Shift + Home` or `Shif…
Sep 28, 2024
a99e8e3
Allow default input behavior when there's a value
Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/radix-vue/src/Combobox/ComboboxInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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"
>
<slot />
</Primitive>
Expand Down
6 changes: 4 additions & 2 deletions packages/radix-vue/src/TagsInput/TagsInputRoot.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Comment on lines +177 to +180
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not the behavior we want. We want to allow user to focus on tags even when there's input value.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand that's the behavior you intended. However, it's hijacking the default behavior of a text input. Its purpose is to allow a user to enter a new value or perform a search, therefore it is reasonable to expect it to behave like a normal text input.

From a user's perspective, typing indicates the intention of adding or searching.
Therefore while he is typing, he should be able to select it as he normally would. That intention should be prioritized over the intention of focusing tags that were already added.

I believe you should reconsider this behavior. Otherwise feel free to close the PR.

Many thanks

break

// if you press ArrowLeft, then we last tag
Expand Down