From 44f285b0d4a50e16713b9aa3746d73d80dee2c91 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Fri, 22 Jan 2021 18:22:53 -0500
Subject: [PATCH] Fix building focusable options from groups (#4399)

* Fix building focusable options from groups

* Create happy-years-clap.md

* Add E2E test
---
 .changeset/happy-years-clap.md            | 5 +++++
 cypress/fixtures/selectors.json           | 5 +++--
 cypress/integration/single-select.spec.js | 9 +++++++++
 packages/react-select/src/Select.js       | 2 +-
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/happy-years-clap.md

diff --git a/.changeset/happy-years-clap.md b/.changeset/happy-years-clap.md
new file mode 100644
index 0000000000..3d1f30e321
--- /dev/null
+++ 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
index ccfc93fee4..9c6ecbdaba 100644
--- 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"
-}
\ No newline at end of file
+  "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
index bdac7d581e..ecb63f320b 100644
--- 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
index 577c067462..d44c7fd592 100644
--- 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);
     }