Skip to content

bug(CHIPS): Async Chips are not highlighted with Forms #27370

Closed
@yurakhomitsky

Description

@yurakhomitsky

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

Async chips are not highlighted when used in conjunction with Forms.

This issue is present in Angular 15 and 16 version and probably older

Reproduction

StackBlitz link: Link

Steps to Reproduce:

  1. Create a mat-chip-listbox with mat-chip-option and add either formControl or ngModel.
  2. Set a value to the formControl, which can be set asynchronously or synchronously.
  3. Render the mat-chip-option with a delay, achieved through the usage of an async pipe and the .pipe(observeOn(asyncScheduler, 1000)).
  4. Observe that the selected chips are not being highlighted.

Expected Behavior

The mat-chip-listbox should properly highlight the asynchronously rendered chips

Actual Behavior

The mat-chip-listbox does not highlight the asynchronously rendered chips.

Environment

  • Angular: 16.1.2
  • Material: 16.1.2
  • Browser(s): Chrome
  • Operating System (macOS):

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material/chips

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions