diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx index ac26ce949d..4fca7300b8 100644 --- a/src/components/Select/__stories__/SelectShowcase.tsx +++ b/src/components/Select/__stories__/SelectShowcase.tsx @@ -179,6 +179,10 @@ export const SelectShowcase = (props: SelectProps) => { + + + + { cleanup(); @@ -102,4 +102,18 @@ describe('Select filter', () => { // 10, 20, 30, 40 expect(queryAllByRole('option').length).toBe(4); }); + + test('should not display labels of empty groups during filtering', async () => { + const {getByTestId, queryAllByRole} = setup({ + options: generateOptionsGroups(4, 1), + filterable: true, + }); + const user = userEvent.setup(); + const selectControl = getByTestId(TEST_QA); + await user.click(selectControl); + // 4 group labels + 1 option in each group + expect(queryAllByRole('option').length).toBe(8); + await user.keyboard('definitely not option'); + expect(queryAllByRole('option').length).toBe(0); + }); }); diff --git a/src/components/Select/__tests__/utils.tsx b/src/components/Select/__tests__/utils.tsx index 6bbcd9c9dc..ec92d9529f 100644 --- a/src/components/Select/__tests__/utils.tsx +++ b/src/components/Select/__tests__/utils.tsx @@ -80,3 +80,13 @@ export function generateOptions(args: number | [string, string][]): SelectOption return args.map(([value, content]) => ({value, content})); } + +export function generateOptionsGroups( + groupsCount: number, + optionsCount: number, +): SelectOptionGroup[] { + return range(0, groupsCount).map((i) => ({ + label: `Group ${i + 1}`, + options: generateOptions(optionsCount), + })); +} diff --git a/src/components/Select/utils.tsx b/src/components/Select/utils.tsx index 0b62992d03..dcf4f7350d 100644 --- a/src/components/Select/utils.tsx +++ b/src/components/Select/utils.tsx @@ -243,7 +243,7 @@ export const getFilteredFlattenOptions = (args: { return filteredOptions.reduce((acc, option, index) => { const groupTitle = isGroupTitle(option); - const previousGroupTitle = isGroupTitle(acc[index - 1]); + const previousGroupTitle = isGroupTitle(acc[acc.length - 1]); const isLastOption = index === filteredOptions.length - 1; if (groupTitle && previousGroupTitle) {