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

[Poiuytrezay1]

trafficstars

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)

[GiftLanga]

I'll take a look if no one is working on it.

[GiftLanga]

@Poiuytrezay1 I linked a PR,

Another way I found was to use a matInput and place it above the ChipGrid so that it can be picked up by the form field.

But it messes up the UI

[nandomegale]

Same problem in my project. Even in Angular Material Doc the first example doesn't clean the input and the line to clean it was written.

[bdirito]

This may be a duplicate of https://github.com/angular/components/issues/25809

The current angular 17 example (17.3.6) explicitly sets both the FormControl (it doesn't use model) as well as the actual input element's text. That seems wrong but could be used for a workaround for now.

[v-nvtsk]

Maybe it's not the best way, but changing the line from this.currentFruit.set(''); to event.chipInput.clear() solved the problem.

  add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    // Add our fruit
    if (value) {
      this.fruits.update(fruits => [...fruits, value]);
    }

    // Clear the input value
    // this.currentFruit.set('');
    // changed to 
    event.chipInput.clear();
  }

other samples for chips do it the same way

[annalenartNP]

I've also noticed the problem. Since v18+ in the Chips Autocomplete example, input is not cleared after typing the value and hitting enter. This behavior appears to be a regression, likely resulting from the recent refactor to signals. It seems the line event.chipInput.clear(); is missing in the add.

Reproduction Steps

1. Navigate to the "Chips Autocomplete" example in the Chips Component
2. Type a value into the input (e.g., "Apple").
3. Hit "ENTER"

Result: The chip is added, but the text ("Apple") persists in the input field. The expected behavior is for the input to be cleared.

Proposed Solution To clear the input value, add method should contain event.chipInput!.clear();