Components: Mat-select lacks disabled (readonly) option

[gultyaev]

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).

[crisbeto]

There was a PR for this a very long time ago and we decided against it. See https://github.com/angular/components/pull/4334.

[gultyaev]

@crisbeto but whereas regular inputs are implemented in Angular material as inputs (they are still inside though hidden) the mat-select doesn't contain a native input selector and therefore IMHO it IS in scope of Angular material, since this field is not wrapped around the native field.

[gultyaev]

Moreover, readonly state is different from disabled state. When form is being submitted fields are readonly. (disabled ones look different)

[pacocom]

Please add readonly to mat-select!!

[Praphulagarwal]

Add pointer-events: none

[keatkeat87]

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

[jelbourn]

Closing this since the underlying issue is tracked on https://github.com/angular/angular/issues/35309

[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._}