[usePress] Hook doesn't call the onPress function when pressing the element at the corner

[jrgarciadev]

Provide a general summary of the issue here

When tapping the corners of certain elements, the onPress function does not get triggered. This issue is observed on select mobile devices and can be replicated using Chrome Dev Tools by selecting Responsive > Mobile Touch. Multiple NextUI components that rely on the usePress hook are impacted by this behavior.

Video (Check last part)

CleanShot.2023-10-22.at.21.49.59.mp4

🤔 Expected Behavior?

Call onPress function when pressing the element at its corners.

😯 Current Behavior

The onPress is not called when pressing any element/component that use the usePress under the hook.

💁 Possible Solution

I'm preparing a PR for this, we already fixed it in a local copy, but for us is better is this change is in the react-spectrum package.

🔦 Context

No response

🖥️ Steps to Reproduce

• Go to https://react-spectrum.adobe.com/react-aria/Button.html
• Open Chrome/Brave Dev Tools, Toggle device toolbar
• Select Dimensions = Responsive
• Select "Mobile"

Version

3.19.1

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

NextUI

🕷 Tracking Issue

heroui-inc/heroui#1680
heroui-inc/heroui#1634
heroui-inc/heroui#1632
heroui-inc/heroui#1538

[snowystinger]

Thanks for the issue.
I think this would be fixed by #1720
I'd prefer to determine if that is correct before looking at another solution

[snowystinger]

Also, closing as a duplicate of #1061

[jrgarciadev]

@snowystinger The Devon proposal has been there for 3 years, I already sent a PR to fix the issue, this will fix a lot of issues we are having on NextUI

[exb]

Hi @snowystinger and @devongovett, bumping this issue as it is something we've encountered as well.

The source of this problem is that we're using the pointer size from the pointerup event during hit testing in pressProps.onPointerUp. As demonstrated in the codesandbox example, the pointer size is always {height: 1, width: 1} both in normal and responsive mode in chrome dev tools. This proves problematic on touch devices, where pointer sizes are typically greater than 10 and unless users touch the target with the exact center of the pointer, the hit testing will consistently fail. Instead, we should use the original pointer size from the pointerdown event which reflects the true size (as the example shows, it's {height: 30, width: 30}).

Given the situation, I see two potential solutions:

• Remove the hit collision check that was implemented for iOS < 13.2 which is long gone — an idea also proposed in Clean up usePress code #1720.
• Fix the hit area calculations by storing the pointer's dimensions during the pointerdown event and using this for hit testing in pointerup.

Happy to help with either of those solutions.

[devongovett]

Should have been fixed by #7427.