[Checkbox] Animation runs while selected if moved in an ngFor

[avechuche]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

What is the current behavior?

After unchecking and checking again, checkboxes flash, which would be wrong.

What are the steps to reproduce?

1. Click on the global checkbox to select all rows
2. Decheck some checkboxes from the rows
3. Re-select the unchecked checkboxes
4. Click repeatedly on the head of the table to order the rows
5. See how the selected checkboxes flash when ordering the rows

In this example (https://stackblitz.com/edit/angular-9p1ppm) you can reproduce the error

This example (https://stackblitz.com/edit/angular-material2-table-wjmlw9) does not have that error but it is an old version of mat-table

What is the use-case or motivation for changing an existing behavior?

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

All browsers
All Windows
Material 5.2.4

Is there anything else we should know?

[andrewseguin]

Whoa, odd bug. Looks like the the checkbox animation wants to run when moved in the view container. I've isolated the issue without the table by just using an ngFor

https://stackblitz.com/edit/angular-6lhzc5?file=app/checkbox-overview-example.html

[tinayuangao]

This is because the animation css mat-checkbox-anim-unchecked-checked stayed there when the checkbox moved in the view container. It only happens to checkboxes that are manually checked.

One solution could be remove the animation css after the animation duration.

[avechuche]

@tinayuangao Thanks for the reply. This problem will be solved in some build or do I have to modify it in my project? In the case that I have to solve it myself, how can I do it? Thank you very much

EDIT

I solved it with the following code. I also hope that they can fix it in some build so we avoid this "ugly code"

HTML

<mat-checkbox (change)="onChange($event)">
</mat-checkbox>

TS

onChange(mouseEvent) {
    mouseEvent.source._elementRef.nativeElement.classList.remove('mat-checkbox-anim-unchecked-checked');
  }

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}