Update disabled for mat-select does not fully work

Bug, feature request, or proposal:

I’m creating an application with Electron and I have a strange behavior with “mat-select”. I have this form:

<form>
  <mat-form-field style="width:400px;margin-right:15px;">
    <input name="directory" matInput placeholder="Directory" [(ngModel)]="directory" (input)="directoryChanged()" />
  </mat-form-field>
  <mat-form-field style="width:400px;margin-right:15px;">
    <mat-select placeholder="Build action" [disabled]="isValidDirectory === false">
      <mat-option [value]="0">None</mat-option>
      <mat-option [value]="1">Incremental</mat-option>
      <mat-option [value]="2">Full</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field style="width:400px;margin-right:15px;">
    <mat-select placeholder="Build configuration" [disabled]="isValidDirectory === false">
      <mat-option [value]="0">Debug</mat-option>
      <mat-option [value]="1">Release</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field style="width:400px;margin-right:15px;">
    <mat-select placeholder="Deployment file" [disabled]="isValidDirectory === false">
      <mat-option *ngFor="let file of files" [value]="file">{{ file }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field style="width:400px;margin-right:15px;">
      <input name="Test" matInput placeholder="Test" [disabled]="isValidDirectory === false" />
    </mat-form-field>
</form>

The handler “directoryChanged” is the following:

directoryChanged(): void {
  this.isValidDirectory = true;
}

So it simply toggles the value of the isValidDirectory variable to true. The expected result is that “mat-select” and “matInput” should become visually (and “physically”) enabled, however, once I typed something in the first “matInput”, the “mat-select” remain underlined with a dotted line (showing them as disabled) while the last “matInput” shows a full line (showing that it became enabled). However, if I click on a “mat-select”, the dropdown menu appears and the line becomes full, so it seems that the “mat-select” has to be clicked to notice that it is actually enabled.

What is the expected behavior?

It should be visually obvious that the “mat-select” component became enabled.

What is the current behavior?

The “mat-select” elements looks disabled.

[willshowell]

And should be fixed by https://github.com/angular/material2/pull/7673.

[angular-automatic-lock-bot[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.}