fix(UsaComboBox): space selects the current highlighted option

Bring inline with USWDS 3.5.0 changes: https://github.com/uswds/uswds/releases/tag/v3.5.0
patrickcate · Oct 10, 2023 · 246ed7b · 246ed7b
1 parent 6f07c3d
commit 246ed7b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/components/UsaComboBox/UsaComboBox.test.js b/src/components/UsaComboBox/UsaComboBox.test.js
@@ -439,12 +439,11 @@ describe('UsaComboBox', () => {
       '.usa-combo-box__list > li.usa-combo-box__list-option:nth-child(64)'
     ).trigger('mouseover')
 
+    // Select option by pressing spacebar.
     cy.get('.usa-combo-box__list > li.usa-combo-box__list-option:nth-child(64)')
       .should('have.class', 'usa-combo-box__list-option--focused')
       .and('have.focus')
-
-    // Select option by pressing tab.
-    cy.realPress('Tab')
+      .type(' ')
 
     cy.get('.usa-combo-box__list > li.usa-combo-box__list-option:nth-child(64)')
       .should('not.have.focus')

diff --git a/src/components/UsaComboBox/UsaComboBox.vue b/src/components/UsaComboBox/UsaComboBox.vue
@@ -90,7 +90,7 @@ const {
   handleFilterOnInput,
   handleHoverOnListOption,
   handleListToggle,
-  handleTabOnListOption,
+  handleSpaceOnListOption,
   handleUpOnListOption,
   highlightedOption,
   inputElement,
@@ -248,7 +248,7 @@ const classes = computed(() => [
             @keydown.prevent.up="handleUpOnListOption(index)"
             @keydown.prevent.down="handleDownOnListOption(index)"
             @keydown.prevent.enter="handleEnterOnListOption(option.value)"
-            @keydown.prevent.tab.exact="handleTabOnListOption(option.value)"
+            @keydown.prevent.space="handleSpaceOnListOption(option.value)"
             @mouseover="handleHoverOnListOption(option.value)"
             >{{ option.label }}</li
           >

diff --git a/src/composables/useComboBox.js b/src/composables/useComboBox.js
@@ -311,7 +311,7 @@ export default (_id, _selectedOption, _options, _disabled, _readonly, emit) => {
     }
   }
 
-  const handleTabOnListOption = value => {
+  const handleSpaceOnListOption = value => {
     selectOption(value)
     closeList()
     focusInput()
@@ -452,7 +452,7 @@ export default (_id, _selectedOption, _options, _disabled, _readonly, emit) => {
     handleFilterOnInput,
     handleHoverOnListOption,
     handleListToggle,
-    handleTabOnListOption,
+    handleSpaceOnListOption,
     handleUpOnListOption,
     highlightedOption: readonly(highlightedOption),
     inputElement,