How to prevent default contextual menu on React-Three-Fiber?

Question

I have a mesh where I define a 'pointerUp' event. I then check that 'event.button === 2' to only keep the right clicks.

From this, I am able to create my own contextual menu. However, the default one still apears. In the event, it is not possible to invoke 'event.preventDefault()' because the event is passive.

Would anyone have a solution please?

Answer 1

The solution is to add a div wrapper to the Canvas component and prevent the default behavior of the contextual menu event:

    <div onContextMenu={(e) => e.nativeEvent.preventDefault()}>
      <Canvas>
      </Canvas>
    </div>