zoom behaves incorrectly when dragging with right mouse button held down

[Argee88]

When having zoom enabled, I can use the left mouse button to drag a box around the area of interest and get a zoomed in version of my graph.

However, when I'm doing the exact same action with not the left mouse button held down, but the right mouse button held down there should not be any zoom applied. The current behaviour is, that I drag with the right mouse button held down, no box is drawn, but if I release the right mouse button there is zoom applied showing data within a distance of two units around the initially right-clicked point.

It is reproducible in this stackblitz.

Please feel free to ask, if you need any other details.

[secretwpn]

This produces unwanted behavior for my project as well and there doesn't seem to be any simple way to disable right mouse button interactions altogether

[simonapostolovski]

A bit late, but I managed to fix this with a workaround for me.

boxRef is added on a wrapper of the graph, in my case a Box element from MUI that wraps the Plotly Graph

With this on right click drag does nothing, you can also add "click" event listener to further disable right click only (not drag)
The event on right click drag is blocked (stopped propagation) so that plotly internally doesn't fire the event.

For MouseEvent.button https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

  const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onMouseClickDragGraph = (ev: MouseEvent) => {
      // stop propagation if the button clicked/hold drag is different than the main (left click) mouse button
      if (ev.button !== 0) {
        ev.stopImmediatePropagation();
      }
    };

    let box: HTMLDivElement = null;

    if (boxRef && boxRef.current) {
      box = boxRef.current;
      box.addEventListener("mousedown", onMouseClickDragGraph);
      box.addEventListener("mouseup", onMouseClickDragGraph);
    }

    return () => {
      box?.removeEventListener("mousedown", onMouseClickDragGraph);
      box?.removeEventListener("mouseup", onMouseClickDragGraph);
    };
  }, []);