Update disabled for mat-select does not fully work

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
willshowellcommented, Oct 10, 2017
0reactions
angular-automatic-lock-bot[bot]commented, Sep 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

dynamic disable/enable in mat-select does not work properly
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up...
Read more >
Select | Angular Material
It is possible to disable the entire select or individual options in the select by using the disabled property on the <mat-select> and...
Read more >
Select | Angular Material
When working with Reactive Forms, the select component can be disabled/enabled via form controls. This can be accomplished by creating a FormControl with ......
Read more >
Creating a custom form field control - Angular Material
The first step is to provide our new component as an implementation of the MatFormFieldControl interface that the <mat-form-field> knows how to work...
Read more >
Testing with component harnesses - Angular Material
Because MatButton is a very simple component, these harness methods might not seem very different from working directly with the DOM. However, more...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found