Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

disabled input on mat-checkbox not behaving like with other components #13739

Closed
kuhnroyal opened this issue Oct 22, 2018 · 3 comments · Fixed by #13755
Closed

disabled input on mat-checkbox not behaving like with other components #13739

kuhnroyal opened this issue Oct 22, 2018 · 3 comments · Fixed by #13755
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@kuhnroyal
Copy link

kuhnroyal commented Oct 22, 2018

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The disabled attribute/input should have the same behavior on all input elements.

What is the current behavior?

<!-- This does not disable the checkbox -->
<mat-checkbox disabled>Check me! disabled</mat-checkbox>
<!-- This does disable the checkbox incorrectly -->
<mat-checkbox disabled="false">Foo</mat-checkbox>

<!-- This does disable the button -->
<button mat-button disabled>Bar</button>
<!-- This does not disable the button -->
<button mat-raised-button disabled="false">Click me! disabled="false"</button>

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material-checkboxes-hkdft7

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

6.1.10/6.4.7

Is there anything else we should know?

<mat-checkbox disabled>Foo</mat-checkbox> used to work, not exactly sure when it broke.

@thomaspink
Copy link
Contributor

<mat-checkbox disabled="false">Check me! disabled="false"</mat-checkbox> seems correct to me.

  1. If you want to set the boolean value false use a binding [disabled]="false" otherwise it a generic string like disabled="any string you want" which will always resolve to true (also like disabled="disabled")
  2. Native checkbox behaves exactly the same (does disable the input): <input type="checkbox" disabled="false">

@kuhnroyal
Copy link
Author

@thomaspink You are correct. However, this is not a native checkbox, it still is an angular-material component and most would expect the angular-material components to behave the same way.

In any case <mat-checkbox disabled> not being disabled seems like a bug. This works with native checkboxes.

@crisbeto crisbeto self-assigned this Oct 22, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Oct 22, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 22, 2018
Fixes the `disabled` property not being coerced like all the other components.

Fixes angular#13739.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 22, 2018
Fixes the `disabled` property not being coerced like all the other components.

Fixes angular#13739.
crisbeto added a commit to crisbeto/material2 that referenced this issue Oct 22, 2018
Fixes the `disabled` property not being coerced like all the other components.

Fixes angular#13739.
mmalerba pushed a commit that referenced this issue Oct 23, 2018
Fixes the `disabled` property not being coerced like all the other components.

Fixes #13739.
mmalerba pushed a commit that referenced this issue Oct 26, 2018
Fixes the `disabled` property not being coerced like all the other components.

Fixes #13739.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants