Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task
Poiuytrezay1 opened this issue Jul 5, 2024 · 4 comments · May be fixed by #29690
Open
1 task

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

Poiuytrezay1 opened this issue Jul 5, 2024 · 4 comments · May be fixed by #29690
Labels
area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Poiuytrezay1
Copy link

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)
@Poiuytrezay1 Poiuytrezay1 added the needs triage This issue needs to be triaged by the team label Jul 5, 2024
@Poiuytrezay1 Poiuytrezay1 changed the title bug(autocomplete): Signal with two-way binding on an autocomplete with chips is not updating input bug(chips-autocomplete): Signal with two-way binding on an autocomplete with chips is not updating input Jul 5, 2024
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/chips and removed needs triage This issue needs to be triaged by the team labels Jul 12, 2024
@GiftLanga
Copy link
Contributor

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

GiftLanga added a commit to GiftLanga/angular-components that referenced this issue Sep 4, 2024
@GiftLanga
fix(material/autocomplete): Add a boolean field to update the native …
c1054b5 
…input

Adds the `updateNativeInput` field to the autocomplete trigger to update the native input element when the autocomplete is within a form field.

Fixes angular#29388.
@GiftLanga GiftLanga linked a pull request Sep 4, 2024 that will close this issue
Open
@GiftLanga
Copy link
Contributor

@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.
image

But it messes up the UI
image

@nandomegale
Copy link

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
Copy link

bdirito commented Nov 4, 2024

This may be a duplicate of #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: material/chips P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
5 participants
@crisbeto @bdirito @nandomegale @GiftLanga @Poiuytrezay1