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

[TextField] Fix disabled input color in Safari #7065

Merged
merged 1 commit into from
Jun 7, 2017

Conversation

amannn
Copy link

@amannn amannn commented Jun 6, 2017

When an input field is rendered disabled in Safari the input color sometimes is ignored. Apparently this happens only with some colors (e.g. #666 leads to the bug, whereas blue doesn't). Tested with Safari 10.1.1.

See this Stack Overflow question for context.

Here's a JSFiddle demonstrating the issue and solution.

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

@@ -57,6 +57,7 @@ const getStyles = (props, context, state) => {
color: props.disabled ? disabledTextColor : textColor,
cursor: 'inherit',
font: 'inherit',
WebkitTextFillColor: props.disabled ? disabledTextColor : textColor,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would using currentColor work?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess not as it's the inital value.

@oliviertassinari oliviertassinari added component: text field This is the name of the generic UI component, not the React module! PR: Review Accepted labels Jun 6, 2017
@oliviertassinari
Copy link
Member

oliviertassinari commented Jun 6, 2017

Do we also have that issue on the next branch?

@oliviertassinari oliviertassinari merged commit 1f477a3 into mui:master Jun 7, 2017
@oliviertassinari
Copy link
Member

Thanks

oliviertassinari added a commit that referenced this pull request Jun 7, 2017
Port #7065 into the next branch,
WebkitTextFillColor has proven not to be the right fix.
@oliviertassinari
Copy link
Member

I have port that change into the next branch 964e112, the correct fix has proven to be otherwise. I'm assuming it's wrong in the master branch too. However, I don't have much interest looking into it, maybe you have. I have used WebkitOpacity instead.

@oliviertassinari oliviertassinari added the bug 🐛 Something doesn't work label Jun 7, 2017
@amannn
Copy link
Author

amannn commented Jun 7, 2017

@oliviertassinari Interesting! I did some research yesterday but couldn't find much information on the root cause. As long as it works it's fine by me 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants