@arbor-education/design-system.components 0.18.0 → 0.19.0

package/src/components/table/Table.stories.tsx

@@ -1567,7 +1567,7 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
   {
     headerName: 'Assessment Component',
     field: 'assessmentComponent',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRenderer: 'dsComboboxCellRenderer',
     cellRendererParams: (params: CustomCellRendererProps) => {
       return {
         options: assessmentComponentOptions,
@@ -1576,13 +1576,15 @@ const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
       };
     },
     editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Visibility',
     field: 'visibility',
-    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRenderer: 'dsComboboxCellRenderer',
     cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
     editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
   },
   {
     headerName: 'Editable',
@@ -2226,4 +2228,180 @@ export const WithCheckboxCellRenderer: Story = {
   },
 };
 
+interface SelectDropdownRowData {
+  id: number;
+  name: string;
+  status: string | null;
+  priority: string | null;
+  category: string | null;
+}
+
+const statusOptions = [
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+  { value: 'pending', label: 'Pending' },
+];
+
+const priorityOptions = [
+  { value: 'high', label: 'High' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'low', label: 'Low' },
+];
+
+const categoryOptions = [
+  { value: 'english', label: 'English' },
+  { value: 'maths', label: 'Maths' },
+  { value: 'science', label: 'Science' },
+  { value: 'history', label: 'History' },
+];
+
+const selectDropdownSampleData: SelectDropdownRowData[] = [
+  { id: 1, name: 'Alice Johnson', status: 'active', priority: 'high', category: 'english' },
+  { id: 2, name: 'Bob Smith', status: 'inactive', priority: null, category: 'maths' },
+  { id: 3, name: 'Charlie Brown', status: null, priority: 'medium', category: null },
+  { id: 4, name: 'Diana Prince', status: 'pending', priority: 'low', category: 'science' },
+  { id: 5, name: 'Eve Wilson', status: 'active', priority: null, category: 'history' },
+];
+
+const selectDropdownColDefs: (ColDef | ColGroupDef)[] = [
+  { field: 'name', headerName: 'Student Name', editable: false },
+  {
+    field: 'status',
+    headerName: 'Status',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: statusOptions, placeholder: 'Select status' },
+    editable: false,
+  },
+  {
+    field: 'priority',
+    headerName: 'Priority',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: priorityOptions, placeholder: 'Select priority' },
+    editable: false,
+  },
+  {
+    field: 'category',
+    headerName: 'Category',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellRendererParams: { options: categoryOptions, placeholder: 'Select category' },
+    editable: false,
+  },
+];
+
+export const WithSelectDropdownCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns can use the `dsSelectDropdownCellRenderer` cell renderer to display a dropdown select inside the cell. Click or press Enter on a cell to open the dropdown.',
+      },
+    },
+  },
+  args: {
+    rowData: selectDropdownSampleData,
+    columnDefs: selectDropdownColDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
+interface ComboboxRowData {
+  id: number;
+  name: string;
+  subject: string | null;
+  level: string | null;
+  tags: string[];
+  skills: string[];
+}
+
+const subjectOptions = [
+  { value: 'english-language', label: 'English Language' },
+  { value: 'english-literature', label: 'English Literature' },
+  { value: 'maths', label: 'Maths' },
+  { value: 'science', label: 'Science' },
+  { value: 'history', label: 'History' },
+];
+
+const levelOptions = [
+  { value: 'foundation', label: 'Foundation' },
+  { value: 'intermediate', label: 'Intermediate' },
+  { value: 'higher', label: 'Higher' },
+];
+
+const tagOptions = [
+  { value: 'coursework', label: 'Coursework' },
+  { value: 'exam', label: 'Exam' },
+  { value: 'practical', label: 'Practical' },
+  { value: 'oral', label: 'Oral' },
+];
+
+const skillOptions = [
+  { value: 'reading', label: 'Reading' },
+  { value: 'writing', label: 'Writing' },
+  { value: 'speaking', label: 'Speaking' },
+  { value: 'listening', label: 'Listening' },
+  { value: 'critical-thinking', label: 'Critical Thinking' },
+];
+
+const comboboxSampleData: ComboboxRowData[] = [
+  { id: 1, name: 'Alice Johnson', subject: 'english-language', level: 'higher', tags: ['coursework', 'exam'], skills: ['reading', 'writing', 'speaking'] },
+  { id: 2, name: 'Bob Smith', subject: 'maths', level: null, tags: ['exam'], skills: ['critical-thinking'] },
+  { id: 3, name: 'Charlie Brown', subject: null, level: 'foundation', tags: [], skills: [] },
+  { id: 4, name: 'Diana Prince', subject: 'english-literature', level: 'intermediate', tags: ['coursework', 'practical', 'oral'], skills: ['reading', 'writing', 'listening', 'speaking', 'critical-thinking'] },
+  { id: 5, name: 'Eve Wilson', subject: 'science', level: null, tags: [], skills: ['listening'] },
+];
+
+const comboboxColDefs: (ColDef | ColGroupDef)[] = [
+  { field: 'name', headerName: 'Student Name', editable: false },
+  {
+    field: 'subject',
+    headerName: 'Subject (single, input)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: subjectOptions, placeholder: 'Select subject' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'level',
+    headerName: 'Level (single, button)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: levelOptions, placeholder: 'Select level', triggerVariant: 'button' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'tags',
+    headerName: 'Tags (multi, button)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: tagOptions, placeholder: 'Select tags', multiple: true, triggerVariant: 'button' },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+  {
+    field: 'skills',
+    headerName: 'Skills (multi, input)',
+    cellRenderer: 'dsComboboxCellRenderer',
+    cellRendererParams: { options: skillOptions, placeholder: 'Select skills', multiple: true },
+    editable: false,
+    ...Table.ComboboxCellRenderer.colDefDefaults,
+  },
+];
+
+export const WithComboboxCellRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Columns can use the `dsComboboxCellRenderer` cell renderer to display a searchable combobox inside the cell. Supports single and multi-select via the `multiple` prop. Row height adjusts automatically when chips wrap.',
+      },
+    },
+  },
+  args: {
+    rowData: comboboxSampleData,
+    columnDefs: comboboxColDefs,
+    defaultColDef,
+    domLayout: 'autoHeight',
+  },
+};
+
 export default meta;

package/src/components/table/Table.tsx

@@ -33,6 +33,7 @@ import { TABLE_SPACING } from './tableConsts';
 import { TableSettingsContext } from './TableSettingsContext';
 import { BooleanCellRenderer } from './cellRenderers/BooleanCellRenderer';
 import { CheckboxCellRenderer } from './cellRenderers/CheckboxCellRenderer';
+import { ComboboxCellRenderer } from './cellRenderers/ComboboxCellRenderer';
 import { DefaultCellRenderer } from './cellRenderers/DefaultCellRenderer';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -198,6 +199,7 @@ export const Table = (props: TableProps) => {
               dsDateCellEditor: DateCellEditor,
               dsCheckboxCellRenderer: CheckboxCellRenderer,
               dsBooleanCellRenderer: BooleanCellRenderer,
+              dsComboboxCellRenderer: ComboboxCellRenderer,
               ...components,
             }}
             {...rest}
@@ -229,6 +231,7 @@ Table.DateCellEditor = DateCellEditor;
 Table.DefaultColDef = DSDefaultColDef;
 Table.GridApiContext = GridApiContext;
 Table.CheckboxCellRenderer = CheckboxCellRenderer;
+Table.ComboboxCellRenderer = ComboboxCellRenderer;
 Table.DefaultValueFormatter = defaultValueFormatter;
 Table.TableSettingsDropdown = TableSettingsDropdown;
 Table.TableControls = TableControls;

package/src/components/table/cellRenderers/ComboboxCellRenderer.test.tsx

@@ -0,0 +1,437 @@
+import { describe, expect, test, vi, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import type { SuppressKeyboardEventParams } from 'ag-grid-community';
+import type { CustomCellRendererProps } from 'ag-grid-react';
+import { ComboboxCellRenderer } from './ComboboxCellRenderer';
+import type { ComboboxOption, ComboboxProps } from 'Components/combobox/types';
+
+const options: ComboboxOption[] = [
+  { value: 'opt1', label: 'Option 1' },
+  { value: 'opt2', label: 'Option 2' },
+  { value: 'opt3', label: 'Option 3' },
+];
+
+type MockProps = Partial<CustomCellRendererProps> & Partial<Omit<ComboboxProps, 'value'>>;
+
+const createMockProps = (overrides: MockProps = {}): CustomCellRendererProps & ComboboxProps => ({
+  value: null,
+  node: { setDataValue: vi.fn() },
+  column: 'testField',
+  api: {
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  },
+  options,
+  ...overrides,
+} as unknown as CustomCellRendererProps & ComboboxProps);
+
+describe('ComboboxCellRenderer', () => {
+  test('renders a combobox input', () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  test('renders with placeholder', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ placeholder: 'Choose an option' })} />);
+    expect(screen.getByPlaceholderText('Choose an option')).toBeInTheDocument();
+  });
+
+  test('renders with default placeholder when none provided', () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    expect(screen.getByPlaceholderText('Select...')).toBeInTheDocument();
+  });
+
+  test('opens listbox and shows options on input focus', async () => {
+    render(<ComboboxCellRenderer {...createMockProps()} />);
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  test('calls setDataValue with the selected value for single select', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'testField' as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).toHaveBeenCalledWith('testField', 'opt1');
+  });
+
+  test('calls setDataValue with array for multiple select', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      multiple: true,
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: 'testField' as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).toHaveBeenCalledWith('testField', ['opt1']);
+  });
+
+  test('does not call setDataValue when column is undefined', async () => {
+    const setDataValue = vi.fn();
+    const props = createMockProps({
+      node: { setDataValue } as unknown as CustomCellRendererProps['node'],
+      column: undefined as unknown as CustomCellRendererProps['column'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByText('Option 1'));
+
+    expect(setDataValue).not.toHaveBeenCalled();
+  });
+
+  test('normalizes a string cell value to an array for controlled combobox', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ value: 'opt1' })} />);
+    const input = screen.getByRole('combobox');
+    expect(input).toBeInTheDocument();
+  });
+
+  test('normalizes a string[] cell value to an array for controlled combobox', () => {
+    render(<ComboboxCellRenderer {...createMockProps({ value: ['opt1', 'opt2'], multiple: true })} />);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  test('registers cellKeyDown listener on mount', () => {
+    const addEventListener = vi.fn();
+    const removeEventListener = vi.fn();
+    const props = createMockProps({
+      api: { addEventListener, removeEventListener } as unknown as CustomCellRendererProps['api'],
+    });
+    render(<ComboboxCellRenderer {...props} />);
+    expect(addEventListener).toHaveBeenCalledWith('cellKeyDown', expect.any(Function));
+  });
+
+  describe('value normalization edge cases', () => {
+    test('treats empty string value as no selection', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: '' })} />);
+      expect(screen.getByPlaceholderText('Select...')).toBeInTheDocument();
+    });
+
+    test('normalizes a numeric cell value to a string', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: 42 as unknown as string })} />);
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+
+    test('normalizes a numeric array cell value to strings', () => {
+      render(<ComboboxCellRenderer {...createMockProps({ value: [1, 2] as unknown as string[], multiple: true })} />);
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  describe('cellKeyDown handler', () => {
+    test('removes the cellKeyDown listener on unmount', () => {
+      const addEventListener = vi.fn();
+      const removeEventListener = vi.fn();
+      const { unmount } = render(
+        <ComboboxCellRenderer {...createMockProps({
+          api: { addEventListener, removeEventListener } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+      const listener = addEventListener.mock.calls[0]![1];
+      unmount();
+      expect(removeEventListener).toHaveBeenCalledWith('cellKeyDown', listener);
+    });
+
+    test('focuses the combobox trigger on Enter for matching node and column', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    test('focuses and clicks the button trigger on Enter when triggerVariant is "button"', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          'node': mockNode as unknown as CustomCellRendererProps['node'],
+          'column': mockColumn as unknown as CustomCellRendererProps['column'],
+          'api': { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+          'triggerVariant': 'button',
+          'aria-label': 'Choose option',
+        })}
+        />,
+      );
+
+      const button = screen.getByRole('button', { name: 'Choose option' });
+      const focusSpy = vi.spyOn(button, 'focus');
+      const clickSpy = vi.spyOn(button, 'click');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).toHaveBeenCalled();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+
+    test('does not focus trigger when the event node does not match', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const differentNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: differentNode, column: mockColumn });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger when the event column does not match', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode, column: 'differentField' });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger for non-Enter keys', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'ArrowDown' }, node: mockNode, column: mockColumn });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+
+    test('does not focus trigger for a FullWidthCellKeyDownEvent (no column property)', () => {
+      const addEventListener = vi.fn();
+      const mockNode = { setDataValue: vi.fn() };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: { addEventListener, removeEventListener: vi.fn() } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      const trigger = screen.getByRole('combobox');
+      const focusSpy = vi.spyOn(trigger, 'focus');
+
+      const listener = addEventListener.mock.calls[0]![1];
+      listener({ event: { key: 'Enter' }, node: mockNode });
+
+      expect(focusSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('focus restoration via MutationObserver', () => {
+    test('calls setFocusedCell when popover closes without focus leaving the cell', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: 5 };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: {
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            setFocusedCell,
+          } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.keyboard('{Escape}');
+
+      expect(setFocusedCell).toHaveBeenCalledWith(5, mockColumn);
+    });
+
+    test('does not call setFocusedCell when focus moves outside the cell', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: 5 };
+      const mockColumn = 'testField';
+
+      render(
+        <>
+          <ComboboxCellRenderer {...createMockProps({
+            node: mockNode as unknown as CustomCellRendererProps['node'],
+            column: mockColumn as unknown as CustomCellRendererProps['column'],
+            api: {
+              addEventListener: vi.fn(),
+              removeEventListener: vi.fn(),
+              setFocusedCell,
+            } as unknown as CustomCellRendererProps['api'],
+          })}
+          />
+          <button>Outside</button>
+        </>,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.click(screen.getByRole('button', { name: 'Outside' }));
+
+      expect(setFocusedCell).not.toHaveBeenCalled();
+    });
+
+    test('does not call setFocusedCell when node.rowIndex is null', async () => {
+      const setFocusedCell = vi.fn();
+      const mockNode = { setDataValue: vi.fn(), rowIndex: null };
+      const mockColumn = 'testField';
+
+      render(
+        <ComboboxCellRenderer {...createMockProps({
+          node: mockNode as unknown as CustomCellRendererProps['node'],
+          column: mockColumn as unknown as CustomCellRendererProps['column'],
+          api: {
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            setFocusedCell,
+          } as unknown as CustomCellRendererProps['api'],
+        })}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('combobox'));
+      await userEvent.keyboard('{Escape}');
+
+      expect(setFocusedCell).not.toHaveBeenCalled();
+    });
+
+    test('disconnects the MutationObserver on unmount', () => {
+      const disconnect = vi.fn();
+      vi.stubGlobal('MutationObserver', vi.fn(() => ({ observe: vi.fn(), disconnect })));
+
+      try {
+        const { unmount } = render(<ComboboxCellRenderer {...createMockProps()} />);
+        unmount();
+        expect(disconnect).toHaveBeenCalled();
+      }
+      finally {
+        vi.unstubAllGlobals();
+      }
+    });
+  });
+
+  describe('colDefDefaults', () => {
+    test('autoHeight is true', () => {
+      expect(ComboboxCellRenderer.colDefDefaults.autoHeight).toBe(true);
+    });
+
+    describe('suppressKeyboardEvent', () => {
+      const { suppressKeyboardEvent } = ComboboxCellRenderer.colDefDefaults;
+
+      const appendCell = (key: string, open: boolean) => {
+        const cell = document.createElement('div');
+        cell.className = 'ag-cell';
+        const trigger = document.createElement('input');
+        trigger.setAttribute('role', 'combobox');
+        trigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+        cell.appendChild(trigger);
+        document.body.appendChild(cell);
+        return {
+          params: { event: { key, target: trigger } } as unknown as SuppressKeyboardEventParams,
+          cleanup: () => cell.remove(),
+        };
+      };
+
+      afterEach(() => {
+        document.querySelectorAll('.ag-cell').forEach(el => el.remove());
+      });
+
+      test('returns false when the event target has no ag-cell ancestor', () => {
+        const target = document.createElement('input');
+        document.body.appendChild(target);
+        const params = { event: { key: 'ArrowDown', target } } as unknown as SuppressKeyboardEventParams;
+        expect(suppressKeyboardEvent(params)).toBe(false);
+        target.remove();
+      });
+
+      test('returns false when the combobox is closed', () => {
+        const { params } = appendCell('ArrowDown', false);
+        expect(suppressKeyboardEvent(params)).toBe(false);
+      });
+
+      test.each(['ArrowUp', 'ArrowDown', 'Enter', 'Escape'])(
+        'suppresses %s when the combobox is open',
+        (key) => {
+          const { params } = appendCell(key, true);
+          expect(suppressKeyboardEvent(params)).toBe(true);
+        },
+      );
+
+      test('does not suppress Tab when the combobox is open', () => {
+        const { params } = appendCell('Tab', true);
+        expect(suppressKeyboardEvent(params)).toBe(false);
+      });
+    });
+  });
+});