Elements behind the OutClick element are interactable on a mobile/tablet device when trying to close the overlay

[babakfp]

Link to REPL

Go to responsive mode from dev tools and select a mobile device. Try to toggle the box when the box is visible (when you are seeing the dark overlay). You will see that it's impossible to close the box.

Video_22-07-09_16-26-13.mp4

The component uses pointerdown instead of click to simulate an outclick event because of #4 and #6. If you try to solve this issue, please pay attention to those 2 issues too.

See the source code for the OutClick component

[babakfp]

it looks like this issue is fixed somehow! I Didn't change or do anything. So, I'm closing it :)

[babakfp]

This isn't fixed and it happens only on touch devices.

[babakfp]

@iSteeb

Hey 👋

Could you please check this reproduction and let me know if it works based on what you reported in #6?

https://svelte.dev/repl/2430ffff1c164588932654be467cfaab?version=4.2.8

I've changed (pointerdown and pointerup) to (touchstart and touchend) and (mousedown and mouseup). When a touch event is triggered, we use touch events, otherwise we use mouse events. Meaning on touch devices (mobile/tablet), touch events will be used and on desktop (when touch is not available), mouse events will be used.

[babakfp]

It seems like there is a problem with this approach:

Rec.0026.mp4

We don't want to trigger an outclick when the touch started outside and ended inside.