diff --git a/src/components/image-editor/useImageCanvasStageInteractions.ts b/src/components/image-editor/useImageCanvasStageInteractions.ts index 44145b9fd..63ad4c603 100644 --- a/src/components/image-editor/useImageCanvasStageInteractions.ts +++ b/src/components/image-editor/useImageCanvasStageInteractions.ts @@ -214,14 +214,10 @@ export function useImageCanvasStageInteractions({ } }, [finishViewportInteraction, flushMinimapViewportDrag]); - const rejectRightButtonInteraction = useCallback( - (event: ReactPointerEvent) => { - event.preventDefault(); - event.stopPropagation(); - clearActiveInteraction(); - }, - [clearActiveInteraction], - ); + const rejectRightButtonInteraction = useCallback(() => { + // Preserve the pointer event so the matching contextmenu event can still open. + clearActiveInteraction(); + }, [clearActiveInteraction]); const setShiftPressed = useCallback((pressed: boolean) => { isShiftPressedRef.current = pressed; @@ -247,7 +243,7 @@ export function useImageCanvasStageInteractions({ (event: ReactPointerEvent) => { const button = getPointerButton(event); if (button === 2) { - rejectRightButtonInteraction(event); + rejectRightButtonInteraction(); return; } if (button === 1 || (button === 0 && effectiveTool === 'hand')) { @@ -281,14 +277,20 @@ export function useImageCanvasStageInteractions({ } clearCanvasFocus(); }, - [canvasViewportRef, clearCanvasFocus, effectiveTool, startPan], + [ + canvasViewportRef, + clearCanvasFocus, + effectiveTool, + rejectRightButtonInteraction, + startPan, + ], ); const handleLayerPointerDown = useCallback( (event: ReactPointerEvent, layer: CanvasLayer) => { const button = getPointerButton(event); if (button === 2) { - rejectRightButtonInteraction(event); + rejectRightButtonInteraction(); return; } if (button === 1 || (button === 0 && effectiveTool === 'hand')) { @@ -426,6 +428,7 @@ export function useImageCanvasStageInteractions({ pickIconSpecFromLayer, pickPublicationReferenceFromLayer, pickUiDesignSpecFromLayer, + rejectRightButtonInteraction, selectedLayerIds, setGenerateDialog, setSelectedLayerId, @@ -499,7 +502,7 @@ export function useImageCanvasStageInteractions({ } const button = getPointerButton(event); if (button === 2) { - rejectRightButtonInteraction(event); + rejectRightButtonInteraction(); return; } if (button === 1 || (button === 0 && effectiveTool === 'hand')) { @@ -550,6 +553,7 @@ export function useImageCanvasStageInteractions({ canvasGenerationDialogs, effectiveTool, layers, + rejectRightButtonInteraction, selectedLayerIds, setSelectedLayerId, setSelectedLayerIds,