bug(mat-chip-option): mat-chip-option doesn't listen for [selected] input

[e-oz]

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

Simple code:

<ng-container *ngIf="vm$|async as $">
  <mat-chip-listbox
      aria-label="Roles selection"
      [multiple]="true"
  >
    <mat-chip-option
        *ngFor="let role of $.allRoles" [value]="role"
        [selected]="collection.hasItemIn(role, $.roles)"
        (click)="collection.hasItemIn(role, $.roles) ? removeRole(role) : addRole(role)"
    >{{role.name}}</mat-chip-option>
  </mat-chip-listbox>
</ng-container>

Whenever I click the chip, visually its "selected" state is being toggled, but it absolutely ignores what [selected] is sending.
I know that there is selectionChange output, but the point is: I want to control the "selected" state, not just toggle it automatically.

Simplified code from StackBlitz:

<mat-chip-listbox aria-label="Roles selection" [multiple]="true">
  <mat-chip-option
    *ngFor="let role of allRoles"
    [value]="role"
    [selected]="selectedRoles.has(role)"
    (click)="selectedRoles.has(role) ? removeRole(role) : addRole(role)"
    >{{role.name}}</mat-chip-option
  >
</mat-chip-listbox>

Reproduction

Code is here, but I can't make it run with Angular 15 on StackBlitz:
https://stackblitz.com/edit/components-issue-w1yexo?file=src/app/example-component.ts

Expected Behavior

[selected] should not be overriden by the internal state. Quite the contrary, [selected] should define the state.

Actual Behavior

[selected] is being ignored

Environment

• Angular: 15.0.0-rc2
• CDK/Material: 15.0.0-rc1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS 13

[crisbeto]

This is just how the framework works: the selected input will only be re-evaluated when it changes. Have you tried setting the chip to selectable="false"?

[e-oz]

That's the whole point, @crisbeto , mat-chip-option doesn't react when the value of [selected] is being changed.

You can try to select it with [selectable]=false, let's call it homework.

[crisbeto]

The Stackblitz doesn't run for me, for some reason, but I tried the following and it worked as expected:

<mat-chip-listbox>
  <mat-chip-option selectable="false" [selected]="selected === '1'">Extra Small</mat-chip-option>
  <mat-chip-option selectable="false" [selected]="selected === '2'">Small</mat-chip-option>
  <mat-chip-option selectable="false" [selected]="selected === '3'">Medium</mat-chip-option>
  <mat-chip-option selectable="false" [selected]="selected === '4'">Large</mat-chip-option>
</mat-chip-listbox>

<input type="text" [(ngModel)]="selected">

Screen.Recording.2022-11-08.at.22.45.46.mov

[e-oz]

See, @crisbeto , they are highlighted, but not selected. API docs explicitly say that with [selectelable]=false this component will not react to [selected]. At least this part works, lol

[selected] value is only respected on init, but not in consequence changes.

[e-oz]

And yes, even StackBlitz examples in official docs don't run for 15 next or RC.

[crisbeto]

Side-note: the next RC should fix the Stackblitz.

Regarding selectable: the intent is that the user isn't allowed to select it, but you can still toggle it programmatically.

[e-oz]

Yes, that's what I'm trying to do, to toggle it programmatically. It's completely ignored.

BTW, I can't wait while it's fixed so I had to do some workaround, and here I'll post some code from a working project but if some readers are struggling with the same issue, they can use my code as a hint:

HTML:

  <mat-chip-listbox
      aria-label="Roles selection"
      [multiple]="true"
  >
    <mat-chip-option
        *ngFor="let role of $.allRoles" [value]="role"
        [selected]="collection.hasItemIn(role, $.roles)"
        [selectable]="false"
        [disabled]="$.cvm.isMutating && (collection.hasItemIn(role, $.cvm.updatingItems) || collection.hasItemIn(role, $.cvm.deletingItems))"
        [disableRipple]="!isEditable(role)"
        (click)="collection.hasItemIn(role, $.roles) ? removeRole(role) : addRole(role)"
        (touchstart)="touched()"
        (mouseup)="touched()"
    >
      <mat-icon [ngClass]="{'hide-check': !collection.hasItemIn(role, $.roles), 'show-check': collection.hasItemIn(role, $.roles)}" class="me-1 ">check</mat-icon>
      <span>{{role.name|roleName}}</span>
    </mat-chip-option>
  </mat-chip-listbox>

CSS:

:host {
  display: block;
}

.hide-check {
  transition: width 75ms;
  width: 0;
}

.show-check {
  animation: 75ms ease-out 0s 1 show-check;
}

@keyframes show-check {
  0% {
    width: 0;
  }
  100% {
    width: unset;
  }
}

Of course, it's not as glorious as Angular Material bundled animation, but at least it works and has similar styling.

[e-oz]

the intent is that the user isn't allowed to select it, but you can still toggle it programmatically

no.

[e-oz]

After reading the source code:

the issue is in line (currently) 170:

components/src/material/chips/chip-option.ts

Line 170 in 204adb9

return this.leadingIcon || this.selectable;

  _hasLeadingGraphic() {
    // The checkmark graphic communicates selected state for both single-select and multi-select.
    // Include checkmark in single-select to fix a11y issue where selected state is communicated
    // visually only using color (#25886).
    return this.leadingIcon || this.selectable;
  }

if this.selectable is false, then [selected] will not add the fancy checkmark (exactly what is happening) because of this function.

But if selectable is true, then 'click' event interferes with the programmatically set value.

Proposed fix:

replace

return this.leadingIcon || this.selectable

with

return this.leadingIcon || (this.selectable || this.selected)

[crisbeto]

I noticed the same and ended up submitting this fix 😄 #25942. That being said, I assumed that your issue was about the chip not being selected at all (e.g. not receiving the blue background).

[e-oz]

Thanks a lot for your help!

Sorry for some PA - after 11 years with Angular phrase “that’s how the framework works” triggers me a bit 😜

[crisbeto]

Assuming that the issue was only about the missing checkmark, it'll be fixed in the next RC version by #25942. Closing the issue for now, but it can be reopened if that's not the intended behavior.

[e-oz]

With [selectable]=false it now reflects the [selected] value.
So I have this nice animation and don't need to use mat-icon as a replacement ;)

Thank you again.