Material-ui: [Filled TextField] Disabled field underline should not change on hover

[kaplantm]

When a filled textfield is disabled, the underline should not change color on hover as that implies interactivity.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Underline on a disabled filled textfield darkens on mouse hover.

Expected Behavior 🤔

Underline on a disabled filled textfield should not change on mouse hover.

Steps to Reproduce 🕹

Steps:

1. Create and Filled TextField and set it to disabled.
2. Hover to see underline change. You may need to zoom is as it is a subtle color change.

See the filled textField in this example: https://codesandbox.io/s/material-demo-9vqbl
(this example is just the first example from TextField docs, with "disabled" added to the filled textField)

Context 🔦

I've found a css workaround:

   '&.Mui-disabled:hover::before': {
      borderColor: 'inherit',
    },

But I suspect this is a bug as the underline should not change color on hover as that implies interactivity. Standard and Outlined textFields follow this practice, as neither of them change on hover when disabled.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.10.2 |
| React | 16.13.1 |
| Browser | Chrome |
| TypeScript | |
| etc. | |

[tchmnn]

Yeah, I can reproduce that.

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index 99c433918..bf3589d1f 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -78,7 +78,7 @@ export const styles = (theme) => {
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&:hover:before': {
+      '&:hover:not($disabled):before': {
         borderBottom: `1px solid ${theme.palette.text.primary}`,
       },
       '&$disabled:before': {

How about this fix?

[oliviertassinari]

@tchmnn Great fix, do you want to get it to the finish line :)?