v9-rc.7: Pointer events in portals ignore the layout

[vinkovsky]

pointer-issue.zip

[vinkovsky]

Discussed here #3437

[vinkovsky]

I probably fixed this by setting the size of the state

const setSize = useThree((state) => state.setSize) 

setSize(width, height, 0, 0)

But this requires manually observing the mutation of the canvas width and height.

[vinkovsky]

Oh, found a solution

<Canvas eventPrefix="layer" />

[ryantbrown]

I have been beating my head against the wall for 2 hours trying to figure out why the pointer coordinates were not accurate. Thank you for <Canvas eventPrefix="layer" /> that fixed it.

[vinkovsky]

@ryantbrown glad to be helpful! Unfortunately, this doesnt work for some components from the drei lib with portals under the hood.
pmndrs/drei#2342

[vinkovsky]

@CodyJasonBennett
Should I reopen this issue? I think the problem is not in the drei itself.

Here is the updated code snippet

pointer-issue-2.zip

[CodyJasonBennett]

How did you determine that? Is this an issue in R3F v8 or can you reproduce without Drei?

[vinkovsky]

@CodyJasonBennett Here’s my test case with v9 without drei.

portal-pointer-issue.zip

[vinkovsky]

@CodyJasonBennett Everything is fine in v8, but the eventPrefix value appears to have no effect

pointer-issue-v8.zip

[CodyJasonBennett]

Does this work with eventPrefix="client" in v9? #3462 should contain a fix. The default behavior went out of band, as we technically override this when eventPrefix is present.

[CodyJasonBennett]

Released that in 9.0.0-rc.9 which fixes issues I found in Drei.

[vinkovsky]

Thanks! Now it works