useButton hook has narrower clickable area than native button elements on mobile devices

[akadori]

Provide a general summary of the issue here

When using the useButton hook from React Aria on mobile devices, the clickable area of the button is slightly narrower than native elements. When tapping near the edges of a button using useButton on mobile, the button visually shows the :active state (appears pressed), but the onPress handler is not triggered.

This creates a confusing user experience on mobile where visual feedback suggests the button is being tapped, but the action doesn't execute.

2025-05-16.11.18.48.mov

🤔 Expected Behavior?

When using the useButton hook from React Aria on mobile devices, the clickable area of the button should match the visual boundaries of the button element, identical to the behavior of native

elements.

😯 Current Behavior

When using the useButton hook from React Aria on mobile devices, the clickable area of the button is slightly narrower than native <button> elements. Specifically:

• When tapping near the edges of a button implemented with useButton on mobile, the button visually shows the :active state (appears pressed), suggesting that the tap is registered
• However, the onPress handler is not actually triggered for these edge taps
• Native HTML <button> elements don't exhibit this issue and correctly register taps across their entire visual area

This creates a confusing user experience where users receive visual feedback suggesting their tap was successful, but the expected action doesn't occur.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

You can observe this behavior by visiting https://akadori.github.io/react-aria-click-boundary-issue/ in Chrome's mobile device emulation mode or on an actual mobile device. The demo shows two visually identical buttons where Button B (using React Aria's useButton) has a smaller effective tap area compared to Button A (native HTML button).

Reproducing code repository: https://github.com/akadori/react-aria-click-boundary-issue

Version

react-aria@3.390

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue, this should be closed by #1720 when we address

Possibly get rid of the custom hit testing

I'm going to close this as a duplicate

[devongovett]

@snowystinger pretty sure we already did that here? #7427

[snowystinger]

Thanks, I've updated the original issue so I don't forget that again.
Looks like this is the latest react-aria release, so should have that code. Will need to investigate.

Note: we do discourage users from using selectors such as :active because has differences across browsers, see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html for more details.

[Idnan-Haider]

Hi @snowystinger,

I’m experiencing a similar issue on iOS touch devices. I wanted to know if this problem has been resolved. If it has, I would appreciate it if you could provide a summary of the root cause.

[snowystinger]

It would appear it has not been addressed yet. I spent a little time looking into it this morning. When you click "near" the target, chrome fires

onPointerDown DOMRect {x: 68, y: 159.65625, width: 254, height: 41.65625, top: 159.65625, …}
onPointerLeave DOMRect {x: 68, y: 159.65625, width: 254, height: 41.65625, top: 159.65625, …}

This seems wrong... there is no pointerMove and the dimensions have not changed from the down event.

What's extra odd though, is that I can't reproduce it here https://jsfiddle.net/o87x2pnd/1/
Nor can I reproduce it by attaching the pointer listeners directly to the first button

<button
        className="buttonA"
        onPointerDown={(e) => {
          e.stopPropagation();
          console.log('onPointerDown', e.target.getBoundingClientRect());
        }}
        onPointerUp={(e) => {
          console.log('onPointerUp', e.target.getBoundingClientRect());
        }}
        onPointerMove={(e) => {
          console.log('onPointerMove', e.target.getBoundingClientRect());
        }}
        onPointerEnter={(e) => {
          console.log('onPointerEnter', e.target.getBoundingClientRect());
        }}
        onPointerLeave={(e) => {
          console.log('onPointerLeave', e.target.getBoundingClientRect());
        }}
        onClick={(e) => {
          const time = new Date().toISOString();
          setEventTargetNames((prevNames) => [
            ...prevNames,
            { name: e.target.name, time },
          ]);
        }}
        name="A"
      >

I went looking for more clues in the usePress. I noticed that we call e.target.releasePointerCapture
When I add that call to the above, I get the same behaviour, onPointerLeave is called immediately.

        onPointerDown={(e) => {
          e.target.releasePointerCapture(e.pointerId);
          console.log('onPointerDown', e.target.getBoundingClientRect());

But, it behaves differently here https://jsfiddle.net/o87x2pnd/3/

I tried this on a real Android device as well, though an older one, so will need someone with a newer device than me to confirm. For me, behaviour was the same.

On iOS it seems different, the only event you get when clicking "close", you only get an onClick, nothing else.