Components: Mat-chip-list multiple selection doesn't work

Created on 22 Dec 2017  路  9Comments  路  Source: angular/components

Bug, feature request, or proposal:

Multiple selection of chips doesn't work
Also access to chips.selected is always empty array.

What is the expected behavior?

Should be possible to select multiple chips when multiple and selectable are set to true.
Selected array should return array of selected mat-chips.

What is the current behavior?

Can select max on chips.
Selected property returns empty array.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-5hhmet?file=app/chips-overview-example.ts
check console.log and try to select multiple chips.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 5.0.2 and Angular 5.0.5

P4 materiachips feature

Most helpful comment

I looked more into this issue and realized that the behavior is still incorrect. Primary fish and Secondary fish should be considered selected. When you focus on a chip (One fish) by clicking then selecting with space bar, it correctly identifies those as selected, but not the two initial.
It seems to stem from MatChipList's SelectionModel being initialized after selected is set to true. SelectionModel should be able to be initialized with the correct selected chips.

All 9 comments

Hey, I will try to handle it.

I fixed problem and now array of selected chips works well.
Is there necessary to show somehow selected items in GUI or not?
Thanks.

@surfer19 nice! yes, click on one chip - then it gets border, and we know that one is already selected. When we have multiple = true and selectable = true, then all clicked chips should have such border, then we know which ones are already selected

Which kind of border, can you reference me please? Or do you mean shadow like in example?
https://material.angular.io/components/chips/overview

@surfer19 yeah, i meant shadow. Now only one chip has shadow

And what about deselect? If I click on chip that is "selected", chip should go to default state right?

@surfer19 i didn't notice your question. Yes, of course chip should be deselected then.

@tomasznastaly please read PR https://github.com/angular/material2/pull/9752 . @tinayuangao described how it works now. Select/deselect should be not supported in chips.

I looked more into this issue and realized that the behavior is still incorrect. Primary fish and Secondary fish should be considered selected. When you focus on a chip (One fish) by clicking then selecting with space bar, it correctly identifies those as selected, but not the two initial.
It seems to stem from MatChipList's SelectionModel being initialized after selected is set to true. SelectionModel should be able to be initialized with the correct selected chips.

Was this page helpful?
0 / 5 - 0 ratings