onPress doesn't trigger on button pseudo-element area

[tinleym]

🐛 Bug Report

onPress doesn't trigger on button pseudo-element area, though onClick does.

I've seen this issue discussed for touch devices, but not for desktop/mouse. https://github.com/adobe/react-spectrum/issues/1061

🤔 Expected Behavior

I'd expect onPress to trigger when button pseudo-element is pressed, like onClick.

😯 Current Behavior

onPress does not trigger when button pseudo-element area is pressed.

🔦 Context

Pseudo-elements can be useful appendages to tappable elements because they allow for a larger tappable area that won't affect the layout of other elements. They can enable you, for example, to enforce that any button or link's minimum clickable dimension be at least 44px (Apple's recommended minimum tap size).

https://ishadeed.com/article/clickable-area/#using-pseudo-elements-to-increase-the-clickable-area

💻 Code Sample

Below, clicking the core of the button triggers onPress and onClick, but clicking in the pseudo-element area (inside the frame but outside the core of the button) only triggers onClick.

https://codesandbox.io/s/intelligent-cdn-t6iu9?file=/src/App.js

🌍 Your Environment

react-aria 3.10.0 Chrome 94.0.4606.81 (Official Build) (x86_64), Firefox 93.0, Safari 14.1.1 MacOS 11.4

[LFDanLu]

This sounds like a problem with how we do our own hit testing in usePress but eventually we'd like to remove that hit testing entirely from usePress in the future (https://github.com/adobe/react-spectrum/issues/1720) which may rectify the issue. For now, perhaps we could use document.elementFromPoint with the press coordinates, that seems to return the button element when provided x,y coords of a click within the pseudo element area. I'd be curious what would be returned if there were overlapping pseudo elements

[tinleym]

@LFDanLu yeah, it looks like it would... https://codesandbox.io/s/modest-allen-6vxo0?file=/src/App.js

[Georgegriff]

Is this issue still active? it looks like this is still an issue

[universse]

I think this applies to not only pseudo element but also any absolutely positioned element that expand the tap area. Hope this gets addressed soon.

[timoyan]

Event onPressUp is not working on pseudo element, either.

Do a quick review on source code and guess it does not get into this code execution

if (e.button === 0 && isOverTarget(e, e.currentTarget)) {
  triggerPressUp(e, state.pointerType || e.pointerType);
}

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/usePress.ts#L472

[devongovett]

Should have been fixed by #7427.

[universse]

Should have been fixed by #7427.

hi. clicking the button on the pseudo element area does not trigger the onPress event handler. onHoverStart works as expected.

https://stackblitz.com/edit/vitejs-vite-3j7p5edf?file=src%2Findex.css

[devongovett]

This is not yet released. You could try a nightly version though