From 795feabcf78b4cd6fb135ad78906a3e18f92dee4 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Sat, 17 Dec 2022 13:39:49 -0800
Subject: [PATCH] fix(1735): use keypress event for space (#1736)

---
 src/components/Select.vue    | 14 +++++++++++--
 tests/unit/Dropdown.spec.js  | 38 +++++++++++++++++++++++++++++++++++-
 tests/unit/Filtering.spec.js | 30 ++++++++--------------------
 3 files changed, 57 insertions(+), 25 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 272a41f..a4efc86 100644
--- a/src/components/Select.vue
+++ b/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>
diff --git a/tests/unit/Dropdown.spec.js b/tests/unit/Dropdown.spec.js
index 614d103..ef3721b 100755
--- a/tests/unit/Dropdown.spec.js
+++ b/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')
diff --git a/tests/unit/Filtering.spec.js b/tests/unit/Filtering.spec.js
index 48bad26..fe0a6ea 100755
--- a/tests/unit/Filtering.spec.js
+++ b/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)
-  })
 })