fix: allow typeAheadSelect only when option is selectable (#1529)

sagalbot · Feb 18, 2022 · 115f24a · 115f24a
1 parent 0c72638
commit 115f24a
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 13 deletions.
diff --git a/src/mixins/typeAheadPointer.js b/src/mixins/typeAheadPointer.js
@@ -67,7 +67,7 @@ export default {
     typeAheadSelect() {
       const typeAheadOption = this.filteredOptions[this.typeAheadPointer]
 
-      if (typeAheadOption) {
+      if (typeAheadOption && this.selectable(typeAheadOption)) {
         this.select(typeAheadOption)
       }
     },

diff --git a/tests/helpers.js b/tests/helpers.js
@@ -9,11 +9,17 @@ import Vue from 'vue'
  * @param Wrapper {Wrapper<Vue>}
  * @param searchText
  */
-export const searchSubmit = (Wrapper, searchText = false) => {
+export const searchSubmit = async (Wrapper, searchText = false) => {
+  const search = Wrapper.findComponent({ ref: 'search' })
+  await search.trigger('focus')
+
   if (searchText) {
     Wrapper.vm.search = searchText
+    await Wrapper.vm.$nextTick()
   }
-  Wrapper.findComponent({ ref: 'search' }).trigger('keydown.enter')
+
+  await search.trigger('keydown.enter')
+  await Wrapper.vm.$nextTick()
 }
 
 /**

diff --git a/tests/unit/CreateOption.spec.js b/tests/unit/CreateOption.spec.js
@@ -1,4 +1,4 @@
-import { searchSubmit, selectTag, selectWithProps } from '../helpers'
+import { selectTag, selectWithProps } from '../helpers'
 
 describe('CreateOption When Tagging Is Enabled', () => {
   it('can select the current search text as a string', async () => {

diff --git a/tests/unit/Selectable.spec.js b/tests/unit/Selectable.spec.js
@@ -1,4 +1,4 @@
-import { selectWithProps } from '../helpers'
+import { searchSubmit, selectWithProps } from '../helpers'
 
 describe('Selectable prop', () => {
   it('should select selectable option if clicked', async () => {
@@ -56,4 +56,19 @@ describe('Selectable prop', () => {
 
     expect(Select.vm.typeAheadPointer).toEqual(0)
   })
+
+  it('should not let the user select an unselectable option with return', async () => {
+    const Select = selectWithProps({
+      options: ['one', 'two'],
+      multiple: true,
+      selectable: (option) => option !== 'two',
+    })
+
+    // this sets the typeAheadPointer to 0
+    await searchSubmit(Select, 'one')
+    expect(Select.vm.selectedValue).toEqual(['one'])
+
+    await searchSubmit(Select, 'two')
+    expect(Select.vm.selectedValue).toEqual(['one'])
+  })
 })
diff --git a/tests/unit/Tagging.spec.js b/tests/unit/Tagging.spec.js
@@ -165,10 +165,7 @@ describe('When Tagging Is Enabled', () => {
       options: [{ label: 'one' }, two],
     })
 
-    Select.vm.search = 'two'
-    await Select.vm.$nextTick()
-
-    searchSubmit(Select)
+    await searchSubmit(Select, 'two')
     expect(Select.vm.selectedValue).toEqual([two])
   })
 
@@ -180,10 +177,7 @@ describe('When Tagging Is Enabled', () => {
       options: [{ label: 'one' }, two],
     })
 
-    Select.vm.search = 'two'
-    await Select.vm.$nextTick()
-
-    searchSubmit(Select)
+    await searchSubmit(Select, 'two')
     expect(Select.vm.selectedValue).toEqual([two])
   })