diff --git a/.changeset/eighty-lemons-happen.md b/.changeset/eighty-lemons-happen.md new file mode 100644 index 0000000000..041006bf07 --- /dev/null +++ b/.changeset/eighty-lemons-happen.md @@ -0,0 +1,5 @@ +--- +"react-select": patch +--- + +Fix finding focusable options for groups diff --git a/cypress/integration/single-select.spec.js b/cypress/integration/single-select.spec.js index ecb63f320b..905d660a7a 100644 --- a/cypress/integration/single-select.spec.js +++ b/cypress/integration/single-select.spec.js @@ -171,6 +171,16 @@ describe('Single Select', () => { .get(selector.focusedOption) .should('exist'); }); + + it(`Should focus next option on down arrow key press after filtering: ${viewport}`, () => { + cy.get(selector.singleGroupedSelect) + .click() + .find('input') + .type('o', { force: true }) + .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 d44c7fd592..b49d72b76d 100644 --- a/packages/react-select/src/Select.js +++ b/packages/react-select/src/Select.js @@ -375,7 +375,9 @@ function buildFocusableOptionsFromCategorizedOptions( ) { return categorizedOptions.reduce((optionsAccumulator, categorizedOption) => { if (categorizedOption.type === 'group') { - optionsAccumulator.push(...categorizedOption.data.options); + optionsAccumulator.push( + ...categorizedOption.options.map(option => option.data) + ); } else { optionsAccumulator.push(categorizedOption.data); }