ListItem is not getting highlighted until touching away on mobile.

[Dukler]

I couldn't find a duplicate to this problem, but I think it is similar (if not the same) to this one #7692 although, I'm not quite sure of this as I couldn't successfully override the behavior on my default 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 🤔

The expected behavior should be the same as in desktop. When you touch a ListItem, it should get highlighted, as if selected = true.

Current Behavior 😯

When you touch a ListItem, it doesn't get highlighted right away, but if you touch on a blank space or another ListItem then it gets highlighted.

Steps to Reproduce 🕹

1. Go to https://material-ui.com/demos/drawers/
2. Use chrome console mobile debugging, set device on iPad
3. Click on a ListItem of the Permanent Drawer
4. Click on blank space or another ListItem

Upload gif to explain further, first click is on inbox, second on starred:

Context 🔦

I was trying to use the Responsive Drawer on mobile and it got confusing touching on each ListItem, as the last one was getting highlighted when I touched the next one on an iPad mini 2.
I know I could just disable the highlight passing the prop "selected=false" to the ListItem, but I don't think that's the point.

Your Environment 🌎

This happens in my environment and also in the standard one in the official material-ui webpage.

Tech	Version
Material-UI	v3.9.2
React	16.8
Browser	Chrome
TypeScript	3.4.5

[oliviertassinari]

The described behavior looks correct. How is this a problem? (please use a real device, not a simulator)

[Dukler]

I tested it in an iPad mini 2 with the same result, (I can upload another gif if you want), but the behavior it is not the same as in desktop, as described, where the ListIcon clicked is highlighted right away. Instead on mobile it gets highlighted after clicking something else, this behavior can be confusing because, you don't get a clear feedback as to where you are touching since another item is getting highlighted.

For clarification this is the Desktop behavior. (again first click on inbox, second on starred).

[oliviertassinari]

The desktop gif behavior is correct. I have tried with an iPad Pro 9.7 (iOS 11), it's ok. I believe it's a duplicate of #15736. I'm closing.

[Dukler]

I had the same problem of #15736, and solved it doing the following override* on my theme, but couldn't do the same for this one.
Also tried the solution posted there, to see if it would solve this issue, and didn't solve it for me. So I don't know if they are quite the same, maybe they are and that behavior can't be overwritten, or I'm not doing it correctly?

*override:

overrides: {
        MuiIconButton: {
            root: {
                '&:hover': {
                    backgroundColor: colors.primary,
                    "@media (hover: none)": {
                        backgroundColor: colors.surface,
                        "&:active": {
                            backgroundColor: colors.primary
                        }
                    }
                },
                "&:active": {
                    backgroundColor: colors.primary
                },
            },
        }
    }