bug(aria/combobox): `filterMode="auto-select"` returns old value

[silveoj]

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

No response

Description

angular/aria combobox with multi false, readonly false and filterMode="auto-select" returns old selected value.

If now we have AAA as selected but then we select BBB and hit Enter key -> we mustn't see AAA. Because we select another (BBB) value and approve it by Enter.

values():
<div>{{ listbox()?.values() | json }}</div>

<div ngCombobox [filterMode]="filterMode()" [readonly]="false">
  <div #origin class="autocomplete">
    <span
      class="search-icon material-symbols-outlined"
      translate="no"
      aria-hidden="true"
      >search</span
    >
    <input
      aria-label="Label dropdown"
      placeholder="Select a country"
      [(ngModel)]="query"
      ngComboboxInput
    />
  </div>
  <ng-template ngComboboxPopupContainer>
    <ng-template
      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
      [cdkConnectedOverlayOpen]="true"
    >
      <div class="popup">
        @if (countries().length === 0) {
        <div class="no-results">No results found</div>
        }
        <div ngListbox [multi]="false">
          @for (country of countries(); track country) {
          <div ngOption [value]="country" [label]="country">
            <span class="option-label">{{ country }}</span>
            <span
              class="check-icon material-symbols-outlined"
              translate="no"
              aria-hidden="true"
              >check</span
            >
          </div>
          }
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>

import {
  Combobox,
  ComboboxInput,
  ComboboxPopupContainer,
} from '@angular/aria/combobox';
import { Listbox, Option } from '@angular/aria/listbox';
import { OverlayModule } from '@angular/cdk/overlay';
import { CommonModule } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  input,
  signal,
  viewChild,
  viewChildren,
} from '@angular/core';
import { FormsModule } from '@angular/forms';

const ALL_COUNTRIES = ['AAA', 'BBB', 'CCC', 'DDD'];

@Component({
  selector: 'CustomCombobox',
  templateUrl: 'combobox.html',
  styleUrl: './combobox.scss',
  imports: [
    CommonModule,
    Combobox,
    ComboboxInput,
    ComboboxPopupContainer,
    Listbox,
    Option,
    OverlayModule,
    FormsModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CustomCombobox {
  public filterMode = input.required<'manual' | 'auto-select' | 'highlight'>();

  /** The combobox listbox popup. */
  listbox = viewChild<Listbox<string>>(Listbox);
  /** The options available in the listbox. */
  options = viewChildren<Option<string>>(Option);
  /** A reference to the ng aria combobox. */
  combobox = viewChild<Combobox<string>>(Combobox);
  /** The query string used to filter the list of countries. */
  query = signal('');
  /** The list of countries filtered by the query. */
  countries = computed(() =>
    ALL_COUNTRIES.filter((country) =>
      country.toLowerCase().startsWith(this.query().toLowerCase())
    )
  );
  constructor() {
  }
}

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-gopytywj?file=src%2Fmain.ts,src%2Fcombobox%2Fcombobox.html

Steps to reproduce:

1. type aaa -> values() are ["AAA"]
2. remove input value
3. Now: empty input and values(). Use arrow up/down keys to select BBB, CCC or DDD. Not AAA
4. hit Enter key
5. But values() are ["AAA"] again

Expected Behavior

We select BBB and hit Enter key -> we must see BBB, not AAA.

Actual Behavior

We select BBB, CCC, DDD and hit Enter key -> we see previous value: AAA

Environment

• Angular: 21.0.3 and later
• angular/aria: 21.0.2 - 21.2.0-next.0
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):