Skip to content

bug(chips-autocomplete): Signal with two-way binding on an autocomplete with chips is not updating input #29388

Open

Description

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

This bug occurred when implementing an autocomplete with multi-selection. For this, I used a mat-autocomplete on a mat-input, and a mat-chip-grid to display the values. To handle the input state, there is a signal with two-way binding using [(ngModel)].

In this particular case, it seems that updating the signal linked to the ngModel does not update the input value.

Reproduction

StackBlitz link: https://material.angular.io/components/chips/overview#chips-autocomplete (the stackblitz from the official documentation showcase this bug)

Steps to reproduce:

  1. Type the letter 'a'
  2. Click on 'Apple' to add the apple to the multi-selection
  3. Despite the signal being set to an empty string, the input is still displaying 'a'

Note: the signal state is correctly used to filter, which means that clicking on the input will display all values (despite the displayed 'a', which should supposedly be used to filter). For example, if you change the code to do this.currentFruit.set('apple') and reproduce this bug again, only the Apple element will be displayed when clicking a second time on the autocomplete (despite having only 'a' displayed)

Expected Behavior

After clicking on an option in a chips-autocomplete, the input should reflect the signal state correctly.

Actual Behavior

After clicking on an option in a chips-autocomplete, the input is not updated according to the signal state.

Environment

  • Angular: 18.0.1
  • CDK/Material: 18.0.6
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu, probably? (this comes from the Stackblitz)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/chips

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions