Skip to content

Commit

Permalink
Allow default input behavior when there's a value
Browse files Browse the repository at this point in the history
  • Loading branch information
michgeek committed Oct 2, 2024
1 parent 7a43766 commit a99e8e3
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 46 deletions.
4 changes: 2 additions & 2 deletions packages/radix-vue/src/Combobox/ComboboxInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ function handleKeyDown(ev: KeyboardEvent) {
}
function handleHomeEnd(ev: KeyboardEvent) {
// allow text selection while maintaining `shift` key
if(ev.shiftKey)
// allow default input behavior when element has a value
if(ev.target.value?.length > 0)
return
ev.preventDefault()
Expand Down
38 changes: 0 additions & 38 deletions packages/radix-vue/src/TagsInput/TagsInput.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,15 +72,6 @@ describe('given default TagsInput', () => {
expect(tags[tags.length - 2].attributes('data-state')).toBe('active')
})

it('should not select the previous tag when press Shift + ArrowLeft', async () => {
await input.trigger('keydown', {
key: 'ArrowLeft',
shiftKey: true,
})
expect(tags[tags.length - 1].attributes('data-state')).not.toBe('inactive')
expect(tags[tags.length - 2].attributes('data-state')).not.toBe('active')
})

it('should select the first item when press Home', async () => {
await input.trigger('keydown', {
key: 'Home',
Expand All @@ -89,15 +80,6 @@ describe('given default TagsInput', () => {
expect(tags[tags.length - 1].attributes('data-state')).toBe('inactive')
})

it('should not select the first item when press Shift + Home', async () => {
await input.trigger('keydown', {
key: 'Home',
shiftKey: true,
})
expect(tags[0].attributes('data-state')).not.toBe('active');
expect(tags[tags.length - 1].attributes('data-state')).not.toBe('inactive')
})

it('should select the last item when press End', async () => {
await input.trigger('keydown', {
key: 'Home',
Expand All @@ -109,33 +91,13 @@ describe('given default TagsInput', () => {
expect(tags[tags.length - 1].attributes('data-state')).toBe('active')
})

it('should not select the last item when press Shift + End', async () => {
await input.trigger('keydown', {
key: 'Home',
})
await input.trigger('keydown', {
key: 'End',
shiftKey: true,
})
expect(tags[0].attributes('data-state')).not.toBe('inactive');
expect(tags[tags.length - 1].attributes('data-state')).not.toBe('active');
})

it('should remove active state when press ArrowRight', async () => {
await input.trigger('keydown', {
key: 'ArrowRight',
})
expect(tags[tags.length - 1].attributes('data-state')).toBe('inactive')
})

it('should not remove active state when press Shift + ArrowRight', async () => {
await input.trigger('keydown', {
key: 'ArrowRight',
shiftKey: true,
})
expect(tags[tags.length - 1].attributes('data-state')).not.toBe('inactive')
})

describe('after pressing on Backspace', () => {
let prevTag: DOMWrapper<HTMLElement>
beforeEach(async () => {
Expand Down
10 changes: 4 additions & 6 deletions packages/radix-vue/src/TagsInput/TagsInputRoot.vue
Original file line number Diff line number Diff line change
Expand Up @@ -172,14 +172,12 @@ provideTagsInputRootContext({
case 'End':
case 'ArrowRight':
case 'ArrowLeft': {
// allow text selection while maintaining `shift` key
if(event.shiftKey)
break
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
Expand Down

0 comments on commit a99e8e3

Please sign in to comment.