[TextField] Wrong disabled color in Safari

[mtr1990]

In my case

How to fix it?

[eps1lon]

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[mtr1990]

Hi @eps1lon I'm sorry,

This is link :
https://codesandbox.io/s/material-demo-forked-e8g4f?file=/demo.js

Please compare in safari and chrome, Thanks!

[oliviertassinari]

We would need to apply this diff to fix the opacity on Safari.

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 381f3a53d1..2221a81fb2 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -50,6 +50,7 @@ export const styles = (theme) => {
       '&$disabled': {
         color: theme.palette.text.disabled,
         cursor: 'default',
+        WebkitTextFillColor: theme.palette.text.disabled, // Fix opacity Safari bug
       },
     },
     /* Styles applied to the root element if the component is a descendant of `FormControl`. */

However, it would also force all the customization to adapt. So the question is, will most developers want to know about this issue and update their styles accordingly?

Related: jgthms/bulma#2355, carbon-design-system/carbon#6673.

[mtr1990]

Yes, I think this is necessary,
Thanks for help me, It's woking!

[oliviertassinari]

Considering it's using the design token from the theme, I think that we can move forward, it should be fine.

[morijenab]

can I take it?

[oliviertassinari]

@mtr1990 would have priority as it's thanks to him that we would be fixing this bug. If he's not interested, definitely.

[oliviertassinari]

@Morteza-Jenabzadeh Feel free to move forward