onMouseX events on Canvas are unresponsive?

[srcnalt]

Hi,

I tried to create a basic scene and wanted to inform my 3D component that user cursor has left the canvas element. I tried using onMouse and onPointer Out/Leavebut none seems to be called. It seems it worked in react-three-fiber, but not in @react-three/fiber.

Here is an example, console should log leaving canvas:

https://codesandbox.io/s/busy-grothendieck-ky2k9?file=/src/App.tsx

[drcmda]

You can wrap it in a div and put the events on that one

[srcnalt]

Thank you, yes this actually gets the job done. I'd expect Canvas events would work right away though.

At the end I decided to go for attaching the events to WebGLRenderer

  const { gl } = useThree();

  useEffect(() => {
    gl.domElement.addEventListener('mouseleave', mouseLeaveMethod);

    return () => {
      gl.domElement.removeEventListener('mouseleave', mouseLeaveMethod);
    };
  }, [gl.domElement]);

[drcmda]

it would be easy but adds a little weight because we would have to explicitely name every known r3f prop and then spread collect the rest.