Checkbox blink at first click when observables are used.

[ice-blaze]

Hello,

I use the mat-checkbox in my project and in one situation I got a blinking case.

Html

<mat-checkbox
  [checked]="checked$ | async"
  [indeterminate]="indeterminate$ | async"
  >a checkbox</mat-checkbox
>
<hr />
<button mat-button obButton="primary" (click)="indeterminateClick()">
  toggle indeterminate
</button>

The component

export class HomeComponent {
  private _checked = true;
  public checked$ = new Subject<boolean>();
  private _indeterminate = false;
  public indeterminate$ = new Subject<boolean>();

  public constructor(private readonly changeDetector: ChangeDetectorRef) {}

  public ngAfterViewInit(): void {
    this.checked$.next(this._checked);
    this.indeterminate$.next(this._indeterminate);
    this.changeDetector.detectChanges();
  }

  public checkedClick(): void {
    this._checked = !this._checked;
    this.checked$.next(this._checked);
  }

  public indeterminateClick(): void {
    this._indeterminate = !this._indeterminate;
    this.indeterminate$.next(this._indeterminate);
  }
}

More details:

• When I tried with the MatCheckbox (not the legacy one) it bug didn't appear.
• In the example using BehaviorSubject fix the issue but in my main project I'm using BehaviorSubject and got the same behavior so I think they are linked.

Here a stackblitz with the project https://stackblitz.com/edit/stackblitz-starters-1uwfi3?file=angular15-oblique10%2Fsrc%2Fapp%2Fhome%2Fhome.component.ts

Reproduce steps:

• Got on stackblitz
• Wait that the webpage starts
• look the checkbox
• Click on the button below the checkbox (which will change the checkbox to indeterminate)

Expected behaviour: The checkbox should not blink. It should behave the same way when after the first click on the button we continue to click multiple times, then the animation looks correct.

[nina-egger]

Hello!

Thank you for the report. I created a ticket for this issue. The ticket number in our system is OUI-2551.

Kind Regards

[nina-egger]

Hello @ice-blaze ! I can no longer reproduce this v11 Stackblitz: https://stackblitz.com/edit/oblique-master-layout-example-x9bnnf?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fhome%2Fhome.component.html

Is it okay if I close this issue?

[ice-blaze]

It works fine now indeed. Thanks :)