Working disabled input

[Sandreu]

Handle disabled input fields

[Sandreu]

The rebase made my response disapear, so here is what I said.

I corrected the comma.
The mui-disabled class is needed to style the field around the input.

Check the &.mui-disabled { opacity: 0.4 }; at the end of stylesheet.

Regards.

[hai-cea]

Also, I don't think disabled styles should trigger focus styles. The placeholder should remain inline.

[Sandreu]

Right that is what :not([value=""]) was supposed to do. I didn't see that the value attribute was removed when it is null. I change that right away.

[Sandreu]

Done !

[hai-cea]

I don't think the disabled styles are necessary.

&:focus, &:valid, &:disabled:not([value=""]), &:disabled:not([value]) {
  ...
}

&:not(:focus):valid, &:disabled:not([value=""]), &:disabled:not([value]) {
  ...
}

You can just leave them off and everything will work just fine.

&:focus, &:valid {
  ...
}

&:not(:focus):valid {
  ...
}

[Sandreu]

No it won't... That's why I did this PR... the label is onto the input field...
If the only problem was the field style, I would have done the class from my parent object...

a :disabled field is not :valid....

[hai-cea]

I'm not sure if we're seeing the same thing. Here's what it looks like on my screen.

Without your disabled styles:

With your disabled styles:

It seems to me without the disabled styles is the intended result?

[Sandreu]

You're right, that didn't worked as expected. We just didn't talk about the same things. The css update is when the field has a value. try to remove my css updates with a value on the input field and you'll understand.

I updated the docs. You can see everything has it should be :)

Regards.

[hai-cea]

Looks good. Thanks @Sandreu