From 2d331a15d861d5b7ed253b207fe13dfcd70c5127 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Tue, 25 Apr 2023 12:45:33 +0200
Subject: [PATCH] Fix double scroll issue on add produtct to draft order
 (#3355)

* Fix double scroll issue on add produtct to draft order

* Fix double scroll approche 2

* Max height 75vh

* Fix rest of scrolls
---
 src/index.css                                    |  4 ++++
 .../components/OrderProductAddDialog/styles.ts   |  3 ++-
 .../AssignMembersDialog/AssignMembersDialog.tsx  | 16 ++--------------
 .../ShippingMethodProductsAddDialog.tsx          | 10 ++--------
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/src/index.css b/src/index.css
index cd942f6e7..da7be7c09 100644
--- a/src/index.css
+++ b/src/index.css
@@ -44,3 +44,7 @@ body {
 .remove-icon-background svg {
   background: none !important;
 }
+
+[id*="ScrollableDialog"] .infinite-scroll-component {
+  overflow: hidden !important;
+}
diff --git a/src/orders/components/OrderProductAddDialog/styles.ts b/src/orders/components/OrderProductAddDialog/styles.ts
index 4c07ccc38..f466f4b1b 100644
--- a/src/orders/components/OrderProductAddDialog/styles.ts
+++ b/src/orders/components/OrderProductAddDialog/styles.ts
@@ -16,8 +16,9 @@ export const useStyles = makeStyles(
       marginBottom: theme.spacing(3),
     },
     content: {
-      overflowY: "scroll",
+      overflowY: "auto",
       paddingTop: 0,
+      maxHeight: "75vh",
       marginBottom: theme.spacing(3),
     },
     subtitle: {
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index f53250496..6c36b6398 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -95,12 +95,6 @@ const useStyles = makeStyles(
     overflow: {
       overflowY: "visible",
     },
-    scrollArea: {
-      maxHeight: 400,
-      overflowY: "scroll",
-      paddingTop: 0,
-      paddingBottom: 0,
-    },
     table: {
       marginBottom: theme.spacing(3),
     },
@@ -140,8 +134,6 @@ function handleStaffMemberAssign(
   }
 }
 
-const scrollableTargetId = "assignMembersScrollableDialog";
-
 const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
   confirmButtonState,
   disabled,
@@ -194,11 +186,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
           disabled={disabled}
         />
       </DialogContent>
-      <DialogContent
-        className={classes.scrollArea}
-        ref={anchor}
-        id={scrollableTargetId}
-      >
+      <DialogContent ref={anchor}>
         <InfiniteScroll
           dataLength={staffMembers?.length || 0}
           next={onFetchMore}
@@ -212,7 +200,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
               </div>
             </>
           }
-          scrollableTarget={scrollableTargetId}
+          height={400}
         >
           <ResponsiveTable className={classes.table}>
             <TableBody>
diff --git a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
index 51712e1f9..b2f1dd09f 100644
--- a/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
+++ b/src/shipping/components/ShippingMethodProductsAddDialog/ShippingMethodProductsAddDialog.tsx
@@ -37,10 +37,6 @@ const useStyles = makeStyles(
     colName: {
       paddingLeft: 0,
     },
-    content: {
-      overflowY: "scroll",
-      height: 450,
-    },
     searchBar: {
       marginBottom: theme.spacing(3),
     },
@@ -94,8 +90,6 @@ const handleProductAssign = (
   }
 };
 
-const scrollableTargetId = "shippingMethodProductsAddScrollableDialog";
-
 const ShippingMethodProductsAddDialog: React.FC<
   ShippingMethodProductsAddDialogProps
 > = props => {
@@ -161,7 +155,7 @@ const ShippingMethodProductsAddDialog: React.FC<
             }}
           />
         </div>
-        <div className={classes.content} id={scrollableTargetId}>
+        <div>
           <InfiniteScroll
             dataLength={products?.length}
             next={onFetchMore}
@@ -172,7 +166,7 @@ const ShippingMethodProductsAddDialog: React.FC<
                 <CircularProgress size={16} />
               </div>
             }
-            scrollableTarget={scrollableTargetId}
+            height={450}
           >
             <ResponsiveTable key="table">
               <TableBody>