fix(dev-overlay): Ignore right clicks on the indicator draggable (#79120)

bgw · web-flow · commit 88c47c222c8d · 2025-05-15T13:43:50.000-07:00
Without this change, right clicking on the indicator starts the drag action, which leads to janky behavior with the native browser context menu.

Only allow dragging with the primary mouse button.

I also tested this in the mobile simulator mode to make sure I didn't break anything there.
diff --git a/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.tsx b/packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/draggable.tsx
@@ -186,6 +186,9 @@ export function useDrag(options: UseDragOptions) {
   }
 
   function onPointerDown(e: React.PointerEvent) {
+    if (e.button !== 0) {
+      return // ignore right click
+    }
     origin.current = { x: e.clientX, y: e.clientY }
     state.current = 'press'
     window.addEventListener('pointermove', onPointerMove)

Original file line number	Diff line number	Diff line change
`@@ -186,6 +186,9 @@ export function useDrag(options: UseDragOptions) {`
`186`	`186`	`}`
`187`	`187`
`188`	`188`	`function onPointerDown(e: React.PointerEvent) {`
	`189` 57FC	`+ if (e.button !== 0) {`
	`190`	`+ return // ignore right click`
	`191`	`+ }`
`189`	`192`	`origin.current = { x: e.clientX, y: e.clientY }`
`190`	`193`	`state.current = 'press'`
`191`	`194`	`window.addEventListener('pointermove', onPointerMove)`