fix(1735): use keypress event for space (#1736)

Author: sagalbot

src/components/Select.vue

@@ -574,8 +574,6 @@ export default {
       default: () => [
         // enter
         13,
-        // space
-        32,
       ],
     },
 
@@ -773,6 +771,7 @@ export default {
             compositionstart: () => (this.isComposing = true),
             compositionend: () => (this.isComposing = false),
             keydown: this.onSearchKeyDown,
+            keypress: this.onSearchKeyPress,
             blur: this.onSearchBlur,
             focus: this.onSearchFocus,
             input: (e) => (this.search = e.target.value),
@@ -1358,6 +1357,17 @@ export default {
         return handlers[e.keyCode](e)
       }
     },
+
+    /**
+     * @todo: Probably want to add a mapKeyPress method just like we have for keydown.
+     * @param {KeyboardEvent} e
+     */
+    onSearchKeyPress(e) {
+      if (!this.open && e.keyCode === 32) {
+        e.preventDefault()
+        this.open = true
+      }
+    },
   },
 }
 </script>

tests/unit/Dropdown.spec.js

@@ -1,5 +1,7 @@
-import { selectWithProps } from '../helpers'
+import { mountDefault, selectWithProps } from '../helpers'
 import OpenIndicator from '../../src/components/OpenIndicator'
+import { shallowMount } from '@vue/test-utils'
+import VueSelect from '../../src/components/Select.vue'
 
 const preventDefault = jest.fn()
 
@@ -49,6 +51,40 @@ describe('Toggling Dropdown', () => {
     expect(Select.vm.open).toEqual(true)
   })
 
+  it('will open the dropdown when: the input has focus, space is pressed, menu is closed', async () => {
+    const Select = mountDefault()
+    const input = Select.findComponent({ ref: 'search' })
+
+    input.trigger('focus')
+    Select.vm.open = false
+    input.trigger('keypress.space')
+
+    expect(Select.vm.open).toEqual(true)
+    expect(Select.vm.search).toEqual('')
+  })
+
+  it('should open dropdown on alphabetic input', async () => {
+    const Select = mountDefault()
+    const input = Select.findComponent({ ref: 'search' })
+
+    input.element.value = 'a'
+    input.trigger('input')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.open).toEqual(true)
+  })
+
+  it('should open dropdown on numeric input', async () => {
+    const Select = shallowMount(VueSelect)
+    const input = Select.findComponent({ ref: 'search' })
+
+    input.element.value = 1
+    input.trigger('input')
+    await Select.vm.$nextTick()
+
+    expect(Select.vm.open).toEqual(true)
+  })
+
   it('can close the dropdown when the el is clicked', () => {
     const Select = selectWithProps()
     const spy = jest.spyOn(Select.vm.$refs.search, 'blur')

tests/unit/Filtering.spec.js

@@ -21,6 +21,14 @@ describe('Filtering Options', () => {
     expect(Select.vm.filteredOptions).toEqual(['bar', 'baz'])
   })
 
+  it('can filter items with spaces', () => {
+    const Select = shallowMount(VueSelect, {
+      propsData: { options: ['foo bar', 'baz'] },
+    })
+    Select.vm.search = ' '
+    expect(Select.vm.filteredOptions).toEqual(['foo bar'])
+  })
+
   it('should not filter the array of strings if filterable is false', () => {
     const Select = shallowMount(VueSelect, {
       propsData: { options: ['foo', 'bar', 'baz'], filterable: false },
@@ -83,26 +91,4 @@ describe('Filtering Options', () => {
     Select.vm.search = '1'
     expect(Select.vm.filteredOptions).toEqual([1, 10])
   })
-
-  it('should open dropdown on alphabetic input', async () => {
-    const Select = shallowMount(VueSelect)
-
-    const input = Select.find('.vs__search')
-    input.element.value = 'a'
-    input.trigger('input')
-    await Select.vm.$nextTick()
-
-    expect(Select.vm.open).toEqual(true)
-  })
-
-  it('should open dropdown on numeric input', async () => {
-    const Select = shallowMount(VueSelect)
-
-    const input = Select.find('.vs__search')
-    input.element.value = 1
-    input.trigger('input')
-    await Select.vm.$nextTick()
-
-    expect(Select.vm.open).toEqual(true)
-  })
 })