Areas not visible due to clip-path are not handled correctly when moving pressed pointer off of, or back onto, element

[jeyj0]

Provide a general summary of the issue here

When using clip-path on an element enhanced using usePress, the non-visible parts of the element still result in press events from react-aria, when moving off of the element while continuing to press, and moving back onto the element while continuing to press.

Another way to word it (closer to the cause of the issue, I think):

When using usePress for an element with clip-path, once the first press on the element is registered, the element's bounding box is used to determine events instead of the area visible after applying the clip-path.

The spec (https://www.w3.org/TR/css-masking-1/#clipping-paths) says the following:

By default, pointer-events must not be dispatched on the clipped-out (non-visible) regions of a shape. For example, an element with a dimension of 10px to 10px which is clipped to a circle with a radius of 5px will not receive click events outside the clipping region.

🤔 Expected Behavior?

When moving a pressed curser off the visible area of an element into the non-visible, clipped area of the element, react-aria considers the element to be pressed.

😯 Current Behavior

When moving a pressed curser off the visible area of an element into the non-visible, clipped area of the element, react-aria considers the element to not be pressed.

💁 Possible Solution

I think the only possible solution is avoid doing any bounding box calculations, and instead solely rely on browser events. I don't know how feasible this is though, unfortunately.

🔦 Context

I am currently building a button in the shape of an "elongated hexagon" (the corners are clipped). I use clip-path to clip the corners for interactions.

Luckily, since the issue only occurs in the move off / back on case, the issue isn't too bad for me, because the clipped areas are minimal enough for it to be barely noticeable.

🖥️ Steps to Reproduce

Follow the steps in this codesandbox

Version

react-aria 3.32.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

No response

What operating system are you using?

Linux

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This is a tricky one since usePress does hit target testing for some old browser bugs if I remember correctly: #1720. I'll talk to the team about picking this work back up potentially but we'll need to be extra careful that removing the hit detection doesn't break anything since this press code is used extensively in the repo.

[LFDanLu]

Closing this out in favor of #2506, will link