From ca728ca29fe362beeee5cf5cc37c8f1bddbaa1d9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 1 Jun 2024 10:20:22 +1000
Subject: [PATCH] fix(ui): ignore context menu in slider view

It doesn't make sense to allow context menu here, because the context menu will technically be on a div and not an image - there won't be any image options there.
---
 invokeai/frontend/web/src/common/util/stopPropagation.ts      | 4 ++++
 .../gallery/components/ImageViewer/ImageComparisonSlider.tsx  | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/invokeai/frontend/web/src/common/util/stopPropagation.ts b/invokeai/frontend/web/src/common/util/stopPropagation.ts
index b3481b7c0e..0c6a1fc507 100644
--- a/invokeai/frontend/web/src/common/util/stopPropagation.ts
+++ b/invokeai/frontend/web/src/common/util/stopPropagation.ts
@@ -1,3 +1,7 @@
 export const stopPropagation = (e: React.MouseEvent) => {
   e.stopPropagation();
 };
+
+export const preventDefault = (e: React.MouseEvent) => {
+  e.preventDefault();
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
index d16fad69b7..e0d5e7fbd4 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
@@ -1,6 +1,7 @@
 import { Box, Flex, Icon, Image, Text } from '@invoke-ai/ui-library';
 import { useMeasure } from '@reactuses/core';
 import { useAppSelector } from 'app/store/storeHooks';
+import { preventDefault } from 'common/util/stopPropagation';
 import type { Dimensions } from 'features/canvas/store/canvasTypes';
 import { STAGE_BG_DATAURL } from 'features/controlLayers/util/renderers';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -258,6 +259,7 @@ export const ImageComparisonSlider = memo(({ firstImage, secondImage }: Props) =
             bottom={0}
             left={0}
             onMouseDown={onMouseDown}
+            onContextMenu={preventDefault}
             userSelect="none"
             cursor="ew-resize"
           />