Material-ui: Focused Select component shows wrong color in dark theme

[brianchirls]

• [x] This is not a v0.x issue.
• [x] 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 |

[oliviertassinari]

@brianchirls What do you think of removing these lines?

https://github.com/mui-org/material-ui/blob/6aa5ce46089ae1109caec543cbf36dfd1dc70e5a/packages/material-ui/src/NativeSelect/NativeSelect.js#L35-L39

I have introduced them in https://github.com/mui-org/material-ui/pull/8023/files#diff-8075a6ffd666c2ba31de076f8ea5845cR39. In order to remove the outline:

However, it's opinionated, it's making overrides harder than it needs to be, it's an issue with the dark theme, even Bootstrap doesn't change it.

[brianchirls]

@oliviertassinari What about keeping the textShadow override but removing color?

[oliviertassinari]

@brianchirls I doubt it will work. To try.

[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.

[oliviertassinari]

@brianchirls I'm all in for seeing the outline, people using Firefox should already be used to having it.

[brianchirls]

@oliviertassinari Agreed. Better than unpredictable behavior.

[joshwooding]

Is it okay if I work on this? @oliviertassinari
Is it just removing?

material-ui/packages/material-ui/src/NativeSelect/NativeSelect.js

Lines 35 to 39 in 6aa5ce4
// Remove Firefox focus border
'&:-moz-focusring': {
color: 'transparent',
textShadow: '0 0 0 #000',
},

[oliviertassinari]

@joshwooding I think so yes :)

[brianchirls]

Thanks @oliviertassinari and @joshwooding!