onClickHighlighted is not working on Mask

[Nikos Atlas]

Problem

onClickHighlighted handler is never fired in the Mask on Chrome Version 121.0.6167.184 (Official Build) (arm64)

Debugging

Problem lies on the fact that the pointer-events are passing through the transparent element.
Specifically, the display: none on the highlighted area along with the pointer-events: auto is causing the event listener to never fire.

Highlighted area styles: https://github.com/elrumordelaluz/reactour/blob/main/packages/mask/styles.tsx#L73-L75

Solution

1. One solution is to change the display to block that will cause the highlighted area to be a rigid block that will not allow the pointer events to pass through, but the EventListener will fire properly.

However, this solution means that the pointer will not respond to the elements inside and behind the highlighted area of the mask.

2. Another solution is to allow the user to configure this behaviour.

3. The appropriate solution that does not compromise the UX in my opinion but adds some complexity is to create a global click event listener that will check if the click coords is in the highlighted area and trigger the callback.

What do you think? Is there maybe another solution already for my problem?
The documented onClickHighlighted handler is not working as expected in any case according to the example.
(I have disabledInteraction as stated, although looking at the code there is no regard for that)

[Nikos Atlas]

What I am trying to achieve is to allow interaction and still catch the click event without intercepting with the normal flow.

I had the stepInteraction enabled which caused similar behaviour like the disableInteraction flag.

It seems that what I am trying to achieve is non-trivial thus I am closing the issue.

PS: I solved my issue by creating a global click event listener.