Mat-select lacks disabled (readonly) option

See original GitHub issue

Reproduction

Steps to reproduce:

  1. Create a project
  2. Add Angular material to the project
  3. Create a form with fieldset in it and mat-select in it (form -> fieldset -> mat-select)
  4. Add [disabled] to fieldset inside form tag to be true on submit
  5. Force disabled to become true
  6. Observe mat-select that user can interact with even though they should not

Expected Behavior

Selector should be disabled.

Actual Behavior

It is not.

Additional info

I’ve read that mat-select has no readonly state because “native select doesn’t have it”, HOWEVER I want to point that when you make fieldset disabled the native selector disables and the user CANNOT modify value on form sumit. BUT when using Angular material user CAN change the value during submit even though it is inside fieldset[disabled].

This makes it tricky to work with forms non-stop (for example when you can submit form, then form needs to be locked until it’s submitted, after that you enable form and reset it’s submitted state and let the user change/save the form again).

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:10
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

7reactions
keatkeat87commented, Dec 17, 2020

pointer event can’t prevent keyboard control. disabled is different from read-only. I think it is a reasonable demand.

2reactions
pacocomcommented, Nov 19, 2020

Please add readonly to mat-select!!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make a 'mat-select' readonly? - Stack Overflow
Add CSS to both select block and mat-form-field block, these can be applied automatically to all the select elements:
Read more >
Angular (forked) - StackBlitz
<h4>Select with disabled</h4> · <mat-form-field appearance="fill"> · <mat-label>Favorite food</mat-label> · <mat-select disabled> · <mat-option *ngFor="let food of ...
Read more >
dynamic disable/enable in mat-select does not work properly
I need to disable/enable this select depending on other inputs value. Since [disabled] is no longer supported by reactive forms I used the...
Read more >
Button toggle - Angular Material
<mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes.
Read more >
mat select search angular material - You.com
Instead of using a mat-select, use a mat-autocomplete. https://material.angular.io/components/autocomplete/overview You can make it work the same as a mat- ...
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