CODEWITHSUNDEEP
angularangular-material
ebakunin
ebakunin

Reputation: 3801

In a multiple MatSelect, a re-enabled checkbox shows as disabled

Using Angular Material, I want to disable the checkboxes within a multiple <MatSelect> for a period of time (as data is retrieved from an API). I can successfully do this, however the CSS class for the checkbox does not change back. In other words, the checkbox is functionally enabled, but the CSS displays as disabled. Is this a Material defect or something I can fix?

Example: https://stackblitz.com/edit/angular-jqzx99

Component:

export class AppComponent  {
  @ViewChildren(MatOption) matSelectOptions: QueryList<MatOption>;

  public isPaused = false;
  public optionData = ['Foo', 'Bar', 'Baz'];

  /**
   * Disable MatSelect checkboxes for 2 seconds
   */
  public disableCheckboxes(): void {
    this.isPaused = true;
    this.matSelectOptions.forEach(option => option.disabled = true);

    setTimeout(() => {
      this.isPaused = false;
      this.matSelectOptions.forEach(option => option.disabled = false);
    }, 2000);
  }
}

Template:

<mat-form-field>
    <mat-select multiple
                [disabled]="isPaused"
                (selectionChange)="disableCheckboxes()">
        <mat-option *ngFor="let option of optionData">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-placeholder>Example</mat-placeholder>
</mat-form-field>

<p id="loadingStatus">{{isPaused ? 'Pausing…' : ''}}</p>

Upvotes: 3

Views: 1572

Answers (1)

JavierFromMadrid
JavierFromMadrid

Reputation: 621

Seems that programatically disabling the MatOptions objects is not really a good idea.

So using just isPaused for select and options works fine

Component:

export class AppComponent  {
  @ViewChildren(MatOption) matSelectOptions: QueryList<MatOption>;

  public isPaused = false;
  public optionData = ['Foo', 'Bar', 'Baz'];

  /**
   * Disable MatSelect checkboxes for 2 seconds
   */
  public disableCheckboxes(): void {
    this.isPaused = true;

    setTimeout(() => {
      this.isPaused = false;
    }, 2000);
  }
}

Template:

<h3>Disabled MatSelect Checkbox Problem:</h3>

<hr>

<mat-form-field>
    <mat-select multiple
                [disabled]="isPaused"
                (selectionChange)="disableCheckboxes()">
        <mat-option *ngFor="let option of optionData" [disabled]="isPaused">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-placeholder>Example</mat-placeholder>
</mat-form-field>

<p id="loadingStatus">{{isPaused ? 'Pausing…' : ''}}</p>

Upvotes: 1

Related Questions