Fix building focusable options from groups (#4399)

* Fix building focusable options from groups * Create happy-years-clap.md * Add E2E test
JedWatson · Jan 22, 2021 · 44f285b · 44f285b
1 parent e7bafee
commit 44f285b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/.changeset/happy-years-clap.md b/.changeset/happy-years-clap.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+Fixed building focusable options from groups
diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json
@@ -22,5 +22,6 @@
   "multiSelectDefaultValues": "#multi-select .react-select__multi-value",
   "multiSelectInput": "#react-select-multi-select-input",
   "placeHolderMulti": "#multi-select .react-select__placeholder",
-  "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator"
-}
+  "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator",
+  "focusedOption": ".react-select__option--is-focused"
+}
diff --git a/cypress/integration/single-select.spec.js b/cypress/integration/single-select.spec.js
@@ -162,6 +162,15 @@ describe('Single Select', () => {
           .find(selector.groupHeading)
           .should('have.length', 2);
       });
+
+      it(`Should focus next option on down arrow key press: ${viewport}`, () => {
+        cy.get(selector.singleGroupedSelect)
+          .click()
+          .find('input')
+          .type('{downarrow}', { force: true })
+          .get(selector.focusedOption)
+          .should('exist');
+      });
     });
 
     context(`Clearable in view: ${viewport}`, () => {

diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js
@@ -375,7 +375,7 @@ function buildFocusableOptionsFromCategorizedOptions(
 ) {
   return categorizedOptions.reduce((optionsAccumulator, categorizedOption) => {
     if (categorizedOption.type === 'group') {
-      optionsAccumulator.push(...categorizedOption.options);
+      optionsAccumulator.push(...categorizedOption.data.options);
     } else {
       optionsAccumulator.push(categorizedOption.data);
     }