[joy-ui] Hover styles persist after clicking on an element on mobile

[oliviertassinari]

Steps to reproduce 🕹

Link to live example:

Steps:

1. Open https://mui.com/joy-ui/react-button/
2. Click on an element that has a &:hover style

Current behavior 😯

KO, Joy UI

Screen.Recording.2023-03-20.at.11.46.17.mov

KO, Base UI

Screen.Recording.2023-03-20.at.11.39.12.mov

Expected behavior 🤔

OK on Material UI, however there is a limit, it's broken on all Samsung phones: #15000 (comment)

Screen.Recording.2023-03-20.at.11.39.46.mov

Context 🔦

#15000

Your environment 🌎

MUI Core v5.11.13

[oliviertassinari]

@danilo-leal @siriwatknp does this expected UX makes sense?

It's based on how native apps behave. On the web, it's very common for websites to leave an artifact hover style after an interaction, my thought was that native apps usually set the tone for what a great UX is, so I thought that we should probably copy it.

If yes, I think that it's something we can/should delegate to the community, waiting for someone to care enough to spend time on it.

[danilo-leal]

I'm not 100% sure if you're asking if there should be a hover state on mobile but that's what I'm understanding 😬 Well, I guess hover technically "doesn't exist" on mobile as you can't just hover something, you either touch something or not. However, just quickly checked 3 very high-quality apps here, all native as far as I know, and they all react to a long-press interaction, which is sort of, to me, in between the hover and active states. So, in the end, yeah, they should probably react somehow and not be purely static.

Airbnb

airbnb.mp4

GitHub

github.mp4

Uber

uber.mp4

[oliviertassinari]

@danilo-leal Right, to be clear, my concern is with the UI state that persists after the interaction. I have to touch on a dead area to find the normal UI state. All your recordings seems to (it's hard to see where the touch happen) behave as I would expect, categorized under "OK".

[danilo-leal]

Ah, I see. Agree with you ⎯ it looks correct to me not to persist the state post-touch, which would be equivalent to not persisting the state post-click. In other words, the hover/active-like style difference would be triggered while you're actively touching and be gone the moment you lift the touch interaction up. 👍

[gitstart]

@oliviertassinari I would like to pick this up

[oliviertassinari]

I'm reopening, the issue is still present on Base UI: https://mui.com/base/react-button/

[gitstart]

@oliviertassinari I'll be pushing a fix for this shortly. Sorry for not catching this.

[oliviertassinari]

@gitstart no problems.

Note that it's not specific to the button, this bug can be reproduced on many other pages of the docs. The first page I tried reproduced the bug: https://mui.com/joy-ui/react-checkbox/.