feat: place focus on search when select #163

src/Multiselect.vue

@@ -464,6 +464,7 @@
         pointer: pointer.pointer,
         clearPointer: pointer.clearPointer,
         blur: multiselect.blur,
+        focus: multiselect.focus,
         deactivate: multiselect.deactivate,
       })
 

src/composables/useMultiselect.js

@@ -33,12 +33,16 @@ export default function useMultiselect (props, context, dep)
     multiselect.value.blur()
   }
 
-  const handleFocus = () => {
+  const focus = () => {
     if (searchable.value && !disabled.value) {
       input.value.focus()
     }
   }
 
+  const handleFocus = () => {
+    focus()
+  }
+
   const activate = () => {
     if (disabled.value) {
       return
@@ -70,6 +74,7 @@ export default function useMultiselect (props, context, dep)
     tabindex,
     isActive,
     blur,
+    focus,
     handleFocus,
     activate,
     deactivate,

src/composables/useOptions.js

@@ -24,6 +24,7 @@ export default function useOptions (props, context, dep)
   const pointer = dep.pointer
   const clearPointer = dep.clearPointer
   const blur = dep.blur
+  const focus = dep.focus
   const deactivate = dep.deactivate
 
   // ================ DATA ================
@@ -338,6 +339,8 @@ export default function useOptions (props, context, dep)
 
     if (closeOnSelect.value) {
       deactivate()
+    } else {
+      focus()
     }
   }
 

tests/unit/composables/useOptions.spec.js

@@ -1953,6 +1953,48 @@ describe('useOptions', () => {
       jest.advanceTimersByTime(1)
       expect(select.vm.isOpen).toBe(true)
     })
+
+    it('should focus input on select when closeOnSelect=false and has search', async () => {
+      let select = createSelect({
+        value: null,
+        options: [1,2,3],
+        closeOnSelect: false,
+        searchable: true,
+      }, {
+        attach: true,
+      })
+
+      select.vm.open()
+      expect(select.vm.isOpen).toBe(true)
+
+      select.vm.handleOptionClick(select.vm.getOption(2))
+
+      jest.advanceTimersByTime(1)
+      expect(document.activeElement == select.vm.input).toBe(true)
+
+      destroy(select)
+    })
+
+    it('should not focus input on select when closeOnSelect=true and has search', async () => {
+      let select = createSelect({
+        value: null,
+        options: [1,2,3],
+        closeOnSelect: true,
+        searchable: true,
+      }, {
+        attach: true,
+      })
+
+      select.vm.open()
+      expect(select.vm.isOpen).toBe(true)
+
+      select.vm.handleOptionClick(select.vm.getOption(2))
+
+      jest.advanceTimersByTime(1)
+      expect(document.activeElement == select.vm.input).toBe(false)
+
+      destroy(select)
+    })
   })
 
   describe('handleGroupClick', () => {