bug(material/chip): Mdc Chip Grid empties all options when using Reactive Forms and focusing out

[vmuresanu]

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

14.2.6

Description

Having Reactive forms attached to mat-chip-grid which accepts an array of object values, clears them on focus out.

Reproduction

Steps to reproduce:

1. Create a formgroup with some formControl
2. Bind it to <mat-chip-grid>
3. Add some new options (or the same works if the list is already populated) that are arrays of objects.
4. Focus out of the component

https://stackblitz.com/edit/angular-6g9jz1?file=src%2Fapp%2Fchips-input-example.ts,src%2Fapp%2Fchips-input-example.html

Upon further investigation, figured that the core problem is that on focus out, object values are transformed to strings hence why we don't see the name property. Nevertheless objects were not transformed in v 14.

Note: In the Docs Chip list works as expected because it is not bound to Reactive forms

Expected Behavior

All options remain with previously defined object values

Actual Behavior

All options are transformed to strings thus we have empty text options

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.3
• Browser(s): Chrome 108.0.5359.124
• Operating System: macOS Ventura 13.1

[UrzaUrza]

Hello,
I'm unable to use the new chips because of this issue.
I can see that the related fix is stuck since the 10 january, is it planned to be fixed soon ?
Are there some workaround ? (Except using the legacy chips)

[poveu]

To clarify - the focus-out event doesn't clear the value, it converts it to an array of strings.

So if we use items as objects like this: [{ id: 1, name: 'orange'}, { id: 2, name: 'apple'}]
then after the focus-out event, the component value becomes ['orange', 'apple].

A very hacky workaround would be to listen to blur event on the element
<input ... (blur)="onBlur()">
And restore the array of objects by searching the list by the names we got in the component's value...

onBlur(event: FocusEvent) {
     setTimeout(() => this.restoreArrayOfObjects(), 0);
}
    
private restoreArrayOfObjects() {
     // find the objects by their names from formControl.value/ngModel/whatever
     // and update the value to an array of objects by this.formControl.setValue()

   // for example, in my case:
  const selectedItems = this.fieldFormControl.value;

  if (typeof selectedItems?.[0] === 'string') {
      const selectedObjects = this.allItems.filter(item => selectedItems.includes(item.name));

      this.fieldFormControl.setValue(selectedObjects);
  }
}

But be aware that this is super hacky and temporary until it gets a proper fix - you should never rely on names.

[vmuresanu]

To clarify - the focus-out event doesn't clear the value, it converts it to an array of strings.

So if we use items as objects like this: [{ id: 1, name: 'orange'}, { id: 2, name: 'apple'}]

then after the focus-out event, the component value becomes ['orange', 'apple].

A very hacky workaround would be to listen to blur event on the element

<input ... (blur)="onBlur()">

And restore the array of objects by searching the list by the names we got in the component's value...

onBlur(event: FocusEvent) {

     setTimeout(() => this.restoreArrayOfObjects, 0);

}

    

private restoreArrayOfObjects() {

     // find the objects by their names from formControl.value/ngModel/whatever

     // and update the value to an array of objects by this.formControl.setValue()

}

Agree, this solution is hacky. In fact I made a PR that fixes the issue. There are a couple of solutions how we can do it.
Either by adding a new @Input that specifies the exact property that needs to be accessed. Or there has to be made a refactor in the edit mode logic. Either way I need input from the code owner since it was 5 months and still no answer. Here is the linked PR #26373

[poveu]

I'll tell you something, the issue seems much bigger than that, as I have a case where your fix won't help.

In some part of the application I'm using chips that display their name + description

<mat-chip-row
    *ngFor="let item of selectedItems"
    (removed)="remove(item)">
    <span class="chip-label">{{ item.name }}</span>
    <span class="chip-description">{{ item.description }}</span>
    <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip-row>

As I have described previously, the focus out (blur) event causes the selected items array to become an array of strings.
However, the bigger issue is that if I'm displaying name + description, then these two values get combined in the array, so the array (ngModel or control's value) becomes:
['Google Chrome: Fast & Securecom.android.chrome']

Looks like the focus out event takes the innerText of the chip element and uses it as the item's value, which seems like a huge misconception.

[vmuresanu]

@poveu but how does your chips get created? You have only one input to add. So how are you able to define both name and description?

[poveu]

@vmuresanu

As I said before, in my case, my form control (or ngModel) value (currently selected items) is not an array of strings (with just item names) but it's an array of whole objects - so I can display whatever data I want, not just the name.
Look at my modified example:

https://stackblitz.com/edit/ovb2sn?file=src%2Fapp%2Fchips-autocomplete-example.ts

The thing is, even for this example to work, I had to switch from event.option.viewValue (which was used by Angular team in their basic example and which is just a string) to event.option.value (which is the real value = full object).

[AlexanderLeonov]

Ok, so I ran into the same issue as OP and luckily it looks like I was able to figure it out.

There's a mistake in the template in the attached stackblitz example (the one from the starting post - just copying link here for convenience) which causes this issue (see picture below). [value] should be bound to option instead of option.name. Losing focus causes re-evaluation of the array which boils down to here - which ultimately causes array of objects to turn into an array of strings.

So, unless I missed something else, looks like there's no bug here, just a little misunderstanding.

[mcost45]

Have the same issue.

@AlexanderLeonov this fixed it for me too - setting [value]="object" (where previously it wasn't necessary). A shame this isn't mentioned anywhere in docs or the migration guide... this new behaviour is very confusing when updating versions.

[poveu]

I have noticed another issue using formControl, caused by Angular Material's team using textContent as the default for chip value.

When there is any HTML element inside <mat-chip-row>, or even just the matChipRemove button is wrapped inside some <ng-container> (like with *ngIf, checking if the user has the privilege to delete), then the whole chip-row's value contains this element's textContent (button with <mat-icon>cancel</mat-icon> in this case) after focusing out of the component.

So for example, value ["Apple"] becomes ["Apple cancel"] (because cancel is part of <mat-icon>'s textContent).

Look at my simple example:
https://stackblitz.com/edit/ovb2sn-s41kjs?file=src%2Fapp%2Fchips-autocomplete-example.html,src%2Fapp%2Fchips-autocomplete-example.ts

All you have to do to reproduce the issue is to click on the text input and then focus it out.
This will run Material's blur/focusOut code and update the form control value with the chips' textContent which becomes ["Apple cancel"].
More focus in/out clicks will keep appending cancel to the form control's value.

Edit: I have created a separate issue for this one: #27839, but it looks like the cause is probably the same.

[jonastg]

Very good point for @AlexanderLeonov !

Ok, so I ran into the same issue as OP and luckily it looks like I was able to figure it out.

There's a mistake in the template in the attached stackblitz example (the one from the starting post - just copying link here for convenience) which causes this issue (see picture below). [value] should be bound to option instead of option.name. Losing focus causes re-evaluation of the array which boils down to here - which ultimately causes array of objects to turn into an array of strings.

So, unless I missed something else, looks like there's no bug here, just a little misunderstanding.

Is it a bug or a feature?

I've checked out the documentation for Chips and mat-chip-row @Input() value: any | The value of the chip. Defaults to the content inside the mat-mdc-chip-action-label element.. It specifies that will take the label content if there are no value. I think it is a big change that it isn't reflected in examples and it pass by unnoticed.