Skip to content

/components

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

Jump to bottom

mat-selection-list selects all when async update value of [selected] #17839

Open
schtrym opened this issue Nov 29, 2019 · 1 comment · May be fixed by #17840
Open

mat-selection-list selects all when async update value of [selected] #17839

schtrym opened this issue Nov 29, 2019 · 1 comment · May be fixed by #17840
Assignees
@crisbeto
Labels
P4 has pr

Comments

@schtrym
Copy link

@schtrym schtrym commented Nov 29, 2019 •
edited

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

StackBlitz here : https://stackblitz.com/edit/components-issue-oawmjy

Steps to reproduce:

  1. Clic on the first row
  2. trigger a fake async call => data updated via Subject

Expected Behavior

What behavior were you expecting to see?

Only first row should be checked

Actual Behavior

What behavior did you actually see?
3. 2 rows are checked

Environment

  • Angular: 8.2.14
  • CDK/Material: 8.2.3
  • Browser(s): chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Mac
@crisbeto crisbeto self-assigned this Nov 29, 2019
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 29, 2019
@crisbeto
fix(list): selection list incorrectly preselecting options without a …
8a2fe97 
…value in some cases

The way we keep track of the value of an entire selection list is by taking all of the `selected` options and putting their values in an array. When the set of options is swapped out we look through that array to determine whether an option should be preselected. This breaks down if an option doesn't have a value, because we end up with a value array looking like `[undefined]` which will cause the option to be preselected incorrectly. These changes work around the issue by not adding options without a value to the value array.

Fixes angular#17839.
@crisbeto crisbeto linked a pull request that will close this issue Nov 29, 2019
Open
@schtrym

This comment has been minimized.

Sign in to view
Copy link
Author

@schtrym schtrym commented Nov 29, 2019

Hi @crisbeto

Just saw your fix.

As a workaround, I could add a "non used" [value] at each option.

<mat-selection-list role="list">
    <mat-list-option role="listitem" *ngFor="let element of elements$ | async" #option
                     [selected]="element.selected" (click)="check()" [value]="element">
        <div>{{element.name}} {{element.selected}}</div>
    </mat-list-option>
</mat-selection-list>

It seems to work.

What do you think?

Thanks for the quick fix !!
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 2, 2019
@crisbeto
fix(list): selection list incorrectly preselecting options without a …
01ddc27 
…value in some cases

The way we keep track of the value of an entire selection list is by taking all of the `selected` options and putting their values in an array. When the set of options is swapped out we look through that array to determine whether an option should be preselected. This breaks down if an option doesn't have a value, because we end up with a value array looking like `[undefined]` which will cause the option to be preselected incorrectly. These changes work around the issue by not adding options without a value to the value array.

Fixes angular#17839.
@jelbourn jelbourn added P4 and removed P3 labels Dec 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@crisbeto crisbeto

Labels
P4 has pr
Projects
None yet
Milestone
No milestone
3 participants
@schtrym @jelbourn @crisbeto
You can’t perform that action at this time.