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) {