From 91d981a49ef60642fa91beed2391a17a3c75ddcb Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:05:23 -0600
Subject: [PATCH] fix(ui): reactflow drag interactions with custom scrollbar

---
 .../ImageFieldCollectionInputComponent.tsx    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
index f4ef599c54..f0c6566e13 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
@@ -73,7 +73,16 @@ export const ImageFieldCollectionInputComponent = memo(
     );
 
     return (
-      <Flex position="relative" w="full" h="full" minH={16} maxH={64} alignItems="stretch" justifyContent="center">
+      <Flex
+        className="nodrag"
+        position="relative"
+        w="full"
+        h="full"
+        minH={16}
+        maxH={64}
+        alignItems="stretch"
+        justifyContent="center"
+      >
         {(!field.value || field.value.length === 0) && (
           <UploadMultipleImageButton
             w="full"
@@ -86,8 +95,13 @@ export const ImageFieldCollectionInputComponent = memo(
         )}
         {field.value && field.value.length > 0 && (
           <Box w="full" h="auto" p={1} sx={sx} data-error={isInvalid} borderRadius="base">
-            <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayscrollbarsOptions}>
-              <Grid className="nopan nowheel" w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}>
+            <OverlayScrollbarsComponent
+              className="nowheel"
+              defer
+              style={overlayScrollbarsStyles}
+              options={overlayscrollbarsOptions}
+            >
+              <Grid w="full" h="full" templateColumns="repeat(4, 1fr)" gap={1}>
                 {field.value.map(({ image_name }) => (
                   <GridItem key={image_name} position="relative" className="nodrag">
                     <ImageGridItemContent imageName={image_name} onRemoveImage={onRemoveImage} />