Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@mantine/core] Rating: Prevent emulated mouse events in touch devices #4976

Conversation

thealmarques
Copy link
Contributor

Fixes #4399

When using a touch device browsers will dispatch emulated mouse events which, in this case, will cause the handleMouseLeave callback to be called as soon as we click elsewhere. One of the ways to fix this is to prevent emulated events by preventing this behaviour in onTouchStart and onTouchEnd.
Read more about emulated events here.

Issue fixed:

mobile.mov

I also noticed that when using the keyboard we are changing the rating when using arrow navigation and not waiting for the spacebar which IMO is not right, because we might just be passing by 🤷 ? I added this fix here but I can remove it if it doesn't fit.

Issue fixed:

keyboard.mov

event.preventDefault();

const { touches } = event;
if (touches.length !== 1) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For multitouch devices it's a bit farfetched so we might be safe here? 🤔

@rtivital rtivital merged commit 9806bfc into mantinedev:master Oct 12, 2023
1 check passed
@rtivital
Copy link
Member

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Rating component does not take fractional values in mobile
2 participants