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.

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

bug(chip): chip selection state does not match [selected] v19.1.1 #30527

Open
1 task done
Siddhu-K opened this issue Feb 20, 2025 · 4 comments
Open
1 task done

bug(chip): chip selection state does not match [selected] v19.1.1 #30527

Siddhu-K opened this issue Feb 20, 2025 · 4 comments
Labels
area: material/chips needs: clarification The issue does not contain enough information for the team to determine if it is a real bug

Comments

@Siddhu-K
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

19.1.0

Description

I have a component with selectable stacked chips with drag drop to rearrange/toggle columns of my table.

after 19.1.1 update moving deselected chip changes the selection of other chips not respecting the [selected] in mat-chip-option

Reproduction

I have create a minimal reproduction of the issue

https://github.com/Siddhu-K/chip-drag

toggle chips and drag drop.

<mat-chip-listbox
  multiple
  cdkDropList
  cdkDropListOrientation="vertical"
  class="mat-mdc-chip-set-stacked"
  (cdkDropListDropped)="drop($event)"
>
  @for (i of chip_list(); track i; let index = $index) {
  <mat-chip-option
    cdkDrag
    [cdkDragStartDelay]="{ touch: 200, mouse: 0 }"
    [selected]="i.selected"
    (selectionChange)="chipSelection($event, index)"
  >
    {{ index + 1 + ". " + i.name + " - " + i.selected }}
  </mat-chip-option>
  }
</mat-chip-listbox>

Expected Behavior

actual selection should match [selected] in the mat-chip-option

Actual Behavior

actual selection does not match [selected] in the mat-chip-option

Environment

Angular CLI: 19.1.8
Node: 22.13.0
Package Manager: npm 11.1.0
OS: win32 x64

Angular: 19.1.7
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1901.8
@angular-devkit/build-angular 19.1.8
@angular-devkit/core 19.1.8
@angular-devkit/schematics 19.1.8
@angular/cdk 19.1.5
@angular/cli 19.1.8
@angular/material 19.1.5
@schematics/angular 19.1.8
rxjs 7.8.1
typescript 5.7.3
zone.js 0.15.0

@Siddhu-K Siddhu-K added the needs triage This issue needs to be triaged by the team label Feb 20, 2025
@Siddhu-K
Copy link
Author

Expected behaviour v19.1.0
Image

Incorrect behaviour v19.1.1
Image

@Siddhu-K
Copy link
Author

The issue had nothing to do with drag drop. Just changing order of the chips recreates the issue. I have updated the repo to illustrate the issue.

i think the issue was caused by #30347

@Siddhu-K Siddhu-K changed the title bug(chip): chip selection state does not match [selected] with drag drop in v19.1.1 bug(chip): chip selection state does not match [selected] v19.1.1 Feb 24, 2025
@wagnermaciel
Copy link
Contributor

@Siddhu-K Would you be able to provide a stackblitz implementation? I cannot download & run your example repo because of potential security concerns

@wagnermaciel wagnermaciel added needs: clarification The issue does not contain enough information for the team to determine if it is a real bug area: material/chips and removed needs triage This issue needs to be triaged by the team labels Feb 24, 2025
@Siddhu-K
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/chips needs: clarification The issue does not contain enough information for the team to determine if it is a real bug
Projects
None yet
Development

No branches or pull requests

2 participants