bug(mat-select): Arrow key navigation skips options when panel contains an input

[joelchrabie-ui]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Angular 18

Description

When a mat-select panel contains a focusable <input> (commonly used to filter options), keyboard navigation behaves differently between Angular Material 18 and 21.

If the select is opened using the keyboard (Enter or Space), pressing ArrowDown or ArrowUp while the input has focus causes the active option to skip every other item.

If the select is opened using the mouse, keyboard navigation behaves as expected.

Expected behavior

Keyboard navigation should behave consistently regardless of how the select was opened.

Reproduction

StackBlitz: https://stackblitz.com/edit/stackblitz-starters-dza4ycd4?file=src%2Fmain.ts

Steps to reproduce:

1. Focus the select using the keyboard (Tab).
2. Press Enter (or Space) to open it.
3. The search input receives focus automatically.
4. Press ArrowDown repeatedly.
5. Notice that the highlighted option skips every other item.

For comparison:

• Open the same select using the mouse.
• Press ArrowDown.
• Navigation works correctly.

Expected Behavior

After opening the select, pressing ArrowDown or ArrowUp should move the active option by exactly one item at a time, regardless of whether the panel was opened with the keyboard or the mouse.

Actual Behavior

When the select is opened using the keyboard, ArrowDown and ArrowUp skip every other option (for example: Apple → Cherry → Fig).

When the same select is opened using the mouse, navigation behaves correctly.

Environment

Angular: 21.2.18
Angular CDK: 21.2.18
Angular Material: 21.2.18

Regression from:
Angular Material 18.x

Browser:
Chrome (latest)

Operating System:
macOS

[joelchrabie-ui]

After some additional investigation, I found a workaround that seems to confirm where the issue occurs.

By intercepting MatSelect._handleOpenKeydown() and ignoring every second keyboard event originating from the embedded <input>, keyboard navigation behaves correctly again (one option at a time, and Enter works as expected).

Example:

const select = this.matSelect() as any;

const original = select._handleOpenKeydown.bind(select);

select._handleOpenKeydown = (event: KeyboardEvent) => {
  if (event.target instanceof HTMLInputElement && this.count++ % 2) {
    return;
  }

  return original(event);
};

This is not intended as a production solution, but it strongly suggests that keyboard events originating from an input inside the panel are being handled twice (or otherwise processed twice) by MatSelect in Angular Material 21.

The ActiveDescendantKeyManager itself appears to behave correctly: activeItemIndex increments sequentially (2 → 3 → 4 → 5...). The unexpected behavior seems to occur before or during _handleOpenKeydown() processing.

[crisbeto]

Putting an input inside the mat-option isn't something we support. It causes an accessibility violation, because you're nesting interactive elements.