fix: Let type-ahead reach disabled options in Select, Multiselect and OptionList

Up and Down reach disabled options, so their disabled state and reason are announced, but type-ahead skipped them. Type-ahead now matches the same options as Up and Down, including disabled ones. Choosing a disabled option is still ignored. When the Select dropdown is closed, type-ahead selects the match instead of highlighting it, so it keeps skipping disabled options there (skipDisabled), as a native select does.

Author: amanabiy

src/internal/components/listbox/__tests__/use-type-ahead.test.ts

@@ -61,4 +61,31 @@ describe('useTypeAhead', () => {
 
     expect(highlightOption).not.toHaveBeenCalled();
   });
+
+  describe('disabled options', () => {
+    // "beta" is disabled, so "b" matches it first, then "bravo".
+    const withDisabled: DropdownOption[] = [
+      { option: { label: 'alpha', value: 'alpha' } },
+      { option: { label: 'beta', value: 'beta' }, disabled: true },
+      { option: { label: 'bravo', value: 'bravo' } },
+    ];
+
+    test('reaches a disabled option, like Up and Down', () => {
+      const highlightOption = jest.fn();
+      const hook = renderHook(useTypeAhead, {
+        initialProps: { ...initialProps, options: withDisabled, highlightOption },
+      });
+      act(() => hook.result.current({ key: 'b' } as React.KeyboardEvent));
+      expect(highlightOption).toHaveBeenCalledWith(withDisabled[1]);
+    });
+
+    test('skips a disabled option with skipDisabled', () => {
+      const highlightOption = jest.fn();
+      const hook = renderHook(useTypeAhead, {
+        initialProps: { ...initialProps, options: withDisabled, highlightOption, skipDisabled: true },
+      });
+      act(() => hook.result.current({ key: 'b' } as React.KeyboardEvent));
+      expect(highlightOption).toHaveBeenCalledWith(withDisabled[2]);
+    });
+  });
 });

src/internal/components/listbox/use-type-ahead.ts

@@ -5,7 +5,8 @@ import React, { useRef } from 'react';
 import type { OptionDefinition, OptionGroup } from '../../../types/option';
 import { useDebounceCallback } from '../../hooks/use-debounce-callback';
 import type { DropdownOption } from '../option/interfaces';
-import { filterOptions, isGroup, isGroupInteractive, isInteractive } from '../option/utils/filter-options';
+import { filterOptions, isGroup } from '../option/utils/filter-options';
+import { isHighlightable } from './utils/option-props';
 
 const isRepeatedChar = (str: string) => str.split('').every(c => c === str[0]);
 
@@ -15,17 +16,23 @@ interface UseTypeAheadProps {
   highlightOption: (option: DropdownOption) => void;
   highlightedOption: OptionDefinition | undefined | null;
   interactiveGroups?: boolean;
+  /**
+   * Skips disabled options. By default type-ahead reaches disabled options, like Up and Down, so their disabled
+   * state and reason are announced. Use it when type-ahead selects the match instead of highlighting it.
+   */
+  skipDisabled?: boolean;
 }
 
 function findMatchingOption(
   options: ReadonlyArray<DropdownOption>,
   searchText: string,
   currentHighlight: OptionDefinition | OptionGroup | undefined | null,
-  interactiveGroups?: boolean
+  interactiveGroups = false,
+  skipDisabled = false
 ) {
-  const interactivityCheck = interactiveGroups ? isGroupInteractive : isInteractive;
-  const filter = (searchText: string) =>
-    filterOptions(options, searchText, true).filter(option => interactivityCheck(option));
+  const isMatchable = (option: DropdownOption) =>
+    isHighlightable(option, interactiveGroups) && !(skipDisabled && option.disabled);
+  const filter = (searchText: string) => filterOptions(options, searchText, true).filter(isMatchable);
   const matchingOptions = filter(searchText);
 
   if (matchingOptions.length === 1) {
@@ -66,6 +73,7 @@ export function useTypeAhead({
   highlightOption,
   highlightedOption,
   interactiveGroups,
+  skipDisabled,
 }: UseTypeAheadProps) {
   const value = useRef('');
 
@@ -86,7 +94,7 @@ export function useTypeAhead({
     const newValue = value.current + key;
     value.current = newValue;
 
-    const nextHighlight = findMatchingOption(options, newValue, highlightedOption, interactiveGroups);
+    const nextHighlight = findMatchingOption(options, newValue, highlightedOption, interactiveGroups, skipDisabled);
     if (nextHighlight) {
       highlightOption(nextHighlight);
     }

src/option-list/__tests__/keyboard.test.tsx

@@ -1,19 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { act, fireEvent } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 
 import { KeyCode } from '@cloudscape-design/component-toolkit/internal';
 
-import {
-  focusList,
-  groupedOptions,
-  highlightedValue,
-  pressKey,
-  renderOptionList,
-  Stateful,
-  withDisabled,
-} from './common';
+import { focusList, groupedOptions, highlightedValue, pressKey, renderOptionList, Stateful } from './common';
 
 const typeKey = (listbox: HTMLElement, key: string) => fireEvent.keyDown(listbox, { key });
 
@@ -81,23 +73,6 @@ describe('OptionList keyboard', () => {
       expect(listbox).toHaveAttribute('aria-activedescendant', wrapper.findOptionByValue('c')!.getElement().id);
     });
 
-    test('typing does not highlight a disabled option', () => {
-      jest.useFakeTimers();
-      try {
-        const { wrapper, listbox } = renderOptionList(<Stateful options={withDisabled} />);
-        focusList(listbox);
-        // Only the disabled "Second" starts with "s", so the highlight stays on the first option.
-        typeKey(listbox, 's');
-        expect(highlightedValue(wrapper)).toBe('a');
-        // After the type-ahead resets, an enabled match is still highlighted.
-        act(() => jest.advanceTimersByTime(1000));
-        typeKey(listbox, 't');
-        expect(highlightedValue(wrapper)).toBe('c');
-      } finally {
-        jest.useRealTimers();
-      }
-    });
-
     test('multi: typing can highlight a group header', () => {
       const { wrapper, listbox } = renderOptionList(<Stateful selectionType="multi" options={groupedOptions} />);
       focusList(listbox);

src/select/__tests__/type-ahead.test.tsx

@@ -0,0 +1,38 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import Select, { SelectProps } from '../../../lib/components/select';
+import createWrapper from '../../../lib/components/test-utils/dom';
+
+// "Beta" is disabled, so "b" matches it first, then "Bravo".
+const options: SelectProps.Options = [
+  { value: 'alpha', label: 'Alpha' },
+  { value: 'beta', label: 'Beta', disabled: true },
+  { value: 'bravo', label: 'Bravo' },
+];
+
+function renderSelect() {
+  const onChange = jest.fn();
+  const { container } = render(
+    <Select selectedOption={null} options={options} onChange={event => onChange(event.detail.selectedOption)} />
+  );
+  return { wrapper: createWrapper(container).findSelect()!, onChange };
+}
+
+describe('Select type-ahead', () => {
+  test('when closed, selects the first enabled match and skips disabled options', () => {
+    const { wrapper, onChange } = renderSelect();
+    fireEvent.keyDown(wrapper.findTrigger().getElement(), { key: 'b' });
+    expect(onChange).toHaveBeenCalledWith(options[2]);
+  });
+
+  test('when open, highlights the first match, including a disabled option', () => {
+    const { wrapper, onChange } = renderSelect();
+    wrapper.openDropdown();
+    fireEvent.keyDown(wrapper.findDropdown().findOptionsContainer()!.getElement(), { key: 'b' });
+    expect(wrapper.findDropdown().findHighlightedOption()!.getElement()).toHaveTextContent('Beta');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

src/select/internal.tsx

@@ -188,6 +188,8 @@ const InternalSelect = React.forwardRef(
       options: filteredOptions,
       highlightOption: !isOpen ? selectOption : highlightOption,
       highlightedOption: !isOpen ? selectedOption : highlightedOption?.option,
+      // When closed, type-ahead selects the match, so it skips disabled options as a native select does.
+      skipDisabled: !isOpen,
     });
 
     const selectAriaLabelId = useUniqueId('select-arialabel-');