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

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
Labels

Comments

@schtrym
Copy link

@schtrym schtrym commented Nov 29, 2019

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
…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.
@schtrym

This comment has been minimized.

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
…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
Projects
None yet
3 participants
You can’t perform that action at this time.