fix(Select): fix filtering in groups

Author: mournfulCoroner

src/components/Select/__stories__/SelectShowcase.tsx

@@ -179,6 +179,10 @@ export const SelectShowcase = (props: SelectProps) => {
                     <Select.Option value="val3" content="Value3" />
                     <Select.Option value="val4" content="Value4" />
                 </Select.OptionGroup>
+                <Select.OptionGroup label="Group 3">
+                    <Select.Option value="val5" content="Value5" />
+                    <Select.Option value="val6" content="Value6" />
+                </Select.OptionGroup>
             </ExampleItem>
             <ExampleItem
                 title="Select with disabled options"

src/components/Select/__tests__/Select.filter.test.tsx

@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import {TextInput} from '../../controls';
 import type {SelectOption, SelectProps} from '../types';
 
-import {TEST_QA, generateOptions, setup} from './utils';
+import {TEST_QA, generateOptions, generateOptionsGroups, setup} from './utils';
 
 afterEach(() => {
     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);
+    });
 });

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),
+    }));
+}

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