[Fab] Hover CSS styles mix up with disabled styles on tap on mobile

[Uzwername]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://yrh2tw.csb.app/

Steps:

1. Render a @mui/material/Fab
2. Disable it once it gets clicked
3. Simulate a mobile device using Chrome's developer tools (the same happens on real mobiles)
4. Tap on the Fab
5. See hover styles applied to the disabled Fab

Current behavior 😯

React.App.webm

Expected behavior 🤔

Disabled styles must take precedence, the Fab must look disabled (have the corresponding background, etc.).

Context 🔦

Initially, I found this bug while using Fab as a navigation button inside a multistep form (which isn't its main use case, obviously).

Your environment 🌎

npx @mui/envinfo

Reproducible with codesandbox

[Uzwername]

IRL I've fixed this by passing the following as sx prop to the Fab:

import { fabClasses } from '@mui/material/Fab';
import type { Theme } from '@mui/material';

// ...

export const NAV_FAB = (theme: Theme) => ({
  [`&.${fabClasses.disabled}, &.${fabClasses.disabled}:hover, &.${fabClasses.disabled}:focus`]: {
    backgroundColor: theme.palette.action.disabledBackground,
  },
});

I'd be glad to open a PR to fix it

[Uzwername]

Just following up: is this going to be addressed?

[michaldudak]

Moving the disabled styles to the very bottom should do the trick without increasing specificity:

@@ -76,11 +76,6 @@ const FabRoot = styled(ButtonBase, {
     [`&.${fabClasses.focusVisible}`]: {
       boxShadow: (theme.vars || theme).shadows[6],
     },
-    [`&.${fabClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      boxShadow: (theme.vars || theme).shadows[0],
-      backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
-    },
     ...(ownerState.size === 'small' && {
       width: 40,
       height: 40,
@@ -132,6 +127,13 @@ const FabRoot = styled(ButtonBase, {
         },
       }),
   }),
+  ({ theme }) => ({
+    [`&.${fabClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      boxShadow: (theme.vars || theme).shadows[0],
+      backgroundColor: (theme.vars || theme).palette.action.disabledBackground,
+    },
+  }),
 );

 const Fab = React.forwardRef(function Fab(inProps, ref) {

Would you like to create a PR?

[Uzwername]

@michaldudak Sure thing, I'll submit it soon

[Uzwername]

I'm going to submit a PR no later than tomorrow night (UTC)