Focused Select component shows wrong color in dark theme

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

In a dark theme, the text of the control should be white and stay that way when the control is focused.

Current Behavior

In Firefox, the text turns black. In Chrome it says white as it should.

Steps to Reproduce

Link: https://codesandbox.io/s/52l1po8nlx

1. Click any of the Select drop-downs
2. Select a value so the options disappear but the control stays focused

Note that setting a :focus pseudo class in dev tools is not enough. You have to actually do it.

Context

The style for Select has the following special case for Firefox:

    // Remove Firefox focus border
    '&:-moz-focusring': {
      color: 'transparent',
      textShadow: '0 0 0 #000',
},

It’s clear why this includes a color. Presumably it’s for something to do with the native select, but it gets imported to the simple select as well. transparent causes the color to be black, which looks fine on a light theme but is wrong on a dark theme. That’s probably why nobody noticed it.

Your Environment

Tech	Version
Material-UI	v3.2.1
React	16.5.2
Browser	Firefox v62.0.3

[brianchirls]

Thanks @oliviertassinari and @joshwooding!

[brianchirls]

Okay, I think I have a better idea of what’s going on here. It’s a bit tricky since :-moz-focusring is not well documented.

It seems that the outline uses the text color, so this hack makes the text color transparent and makes it visible again by putting a black shadow on the text, but with no blur. So it mimics the look of text that’s the original color.

I played around with currentColor for the shadow, but that doesn’t work since it just copies the text color from the same style, which is now transparent. The only thing that seems to work is setting the shadow color to the text color from the theme, which is otherwise set here as theme.palette.text.primary.

The only problem with this approach is that if someone changes the text color of the InputBase, they’ll have to do it again in :-moz-focusring. Alternatively, you could just get rid of it, maybe replace it with :focus-visible and wait for Firefox to catch up. I’m fine with either option.