mantine
mantine copied to clipboard
mantinedev
Button hover won't disappear after touch in certain android phones
What package has an issue
@mantine/core
Describe the bug
Certain Android phones (Tested in Galaxy S10, Galaxy S10e, Galaxy S9) might be probably Samsung Galaxy phones. After pressing the button the hover background won't disappear. It looks like the button is still being pressed even tho the finger is not pressing on the screen.
I found a similar bug here: https://github.com/ionic-team/ionic-framework/issues/18570.
According to what they say there, it's probably something on the chromium related to these specific devices or OS.
Here are some screenshots:
BEFORE PRESSING
AFTER PRESSING ON SUBTLE VARIANT
AFTER PRESSING ON DEFAULT VARIANT
AFTER PRESSING ON OUTLINE VARIANT
I tried to handle the hover and active selectors of mantine button on my own, but I can't set a color because the hover colors are managed by you guys here: https://github.com/mantinedev/mantine/blob/0455a0f3c47938c0dcae69e5093ce6c28a6bc73b/src/mantine-core/src/Button/Button.styles.ts#L103
What version of @mantine/hooks page do you have in package.json?
6.0.5
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/mantine-6-playground-forked-5sxzdd?file=/src/styles.css:58-101
Do you know how to fix the issue
Yes
Are you willing to participate in fixing this issue and create a pull request with the fix
Yes
Possible fix
I was thinking about all kinds of solutions.
The first and probably the best one is: add the "background-color" property to the active selector of the button as well. this way, I will be able to override the hover selector with "background-color": unset
The second solution is: If the platform is a mobile device, don't set the hover at all, but set the active (since mobile devices don't have "hover")
added a pr which should fix the issue: https://github.com/mantinedev/mantine/pull/4761
The fix is not planned. I do not have all the required devices to validate the fix.
