Allow default input behavior when there's a value

unovue · Oct 2, 2024 · a99e8e3 · a99e8e3
1 parent 7a43766
commit a99e8e3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 46 deletions.
diff --git a/packages/radix-vue/src/Combobox/ComboboxInput.vue b/packages/radix-vue/src/Combobox/ComboboxInput.vue
@@ -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()

diff --git a/packages/radix-vue/src/TagsInput/TagsInput.test.ts b/packages/radix-vue/src/TagsInput/TagsInput.test.ts
@@ -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',
@@ -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',
@@ -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 () => {

diff --git a/packages/radix-vue/src/TagsInput/TagsInputRoot.vue b/packages/radix-vue/src/TagsInput/TagsInputRoot.vue
@@ -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