Hook to listen to clicks outside an object with a ref

[tilnea]

Hi,

I want to make a Reach hook that helps me detect clicks outside a mesh/group(/and so on) with a ref.
Like this https://codesandbox.io/s/outside-alerter-hooks-lmr2y?module=/src/OutsideAlerter.js&file=/src/OutsideAlerter.js:811-841 but with three-fiber. Any ideas how I can do this?

[drcmda]

this is inbuilt. each node can have onPointerMissed, which triggers when you click anything but the node. and then there's onPointerMissed on the canvas itself, which triggers if you really didnt hit anything whatsoever.

you can try it out here: https://codesandbox.io/s/floating-shoe-forked-qxjoj

click the shoe, dialog winds up, click elsewhere, it goes away.

[tilnea]

Oh, that's perfect, thank you so much!

I added it but it still triggers when I click on my group.
Do you know why that can be? if I log the event the target is "canvas" both on my group and outside of it. I read something that I can set a z-index, but I cannot find an example.

Any suggestions what I can try out?

[drcmda]

could you make a reduced codesandbox? the target will always be canvas because thats the only source receiving events. r3f uses that to raycast.

[tilnea]

It did work if I moved it to a mesh instead of a group, which worked fine for me in this case. But having it on a group does not work at all.Should it?

[drcmda]

a group alone does not receive events. it must have elements within that do. the sandbox above is a good example, it is a group and onpointermissed works, because it has meshes.