From bf98ff9a1d12d74a4f7e6f725b35678d0f9bbb8f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 8 Sep 2022 11:00:33 +0200
Subject: [PATCH] Disable popper

---
 src/dashboardWebView/components/ChoiceButton.tsx    | 2 +-
 src/dashboardWebView/components/Header/Filter.tsx   | 2 +-
 src/dashboardWebView/components/Header/Folders.tsx  | 2 +-
 src/dashboardWebView/components/Header/Grouping.tsx | 2 +-
 src/dashboardWebView/components/Header/Sorting.tsx  | 2 +-
 src/dashboardWebView/components/Menu/MenuItems.tsx  | 5 +++--
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/dashboardWebView/components/ChoiceButton.tsx b/src/dashboardWebView/components/ChoiceButton.tsx
index 7d8d6bb2..aa91543d 100644
--- a/src/dashboardWebView/components/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/ChoiceButton.tsx
@@ -37,7 +37,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onCli
               <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
             </Menu.Button>
 
-            <MenuItems widthClass={`w-56`}>
+            <MenuItems widthClass={`w-56`} disablePopper>
               <div className="py-1">
                 {choices.map((choice, idx) => (
                   <MenuItem 
diff --git a/src/dashboardWebView/components/Header/Filter.tsx b/src/dashboardWebView/components/Header/Filter.tsx
index 81f0ea13..af4fe6a7 100644
--- a/src/dashboardWebView/components/Header/Filter.tsx
+++ b/src/dashboardWebView/components/Header/Filter.tsx
@@ -29,7 +29,7 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({label, activeItem
           )} 
           title={activeItem || DEFAULT_VALUE} />
 
-        <MenuItems>
+        <MenuItems disablePopper>
           <MenuItem 
               title={DEFAULT_VALUE}
               value={null}
diff --git a/src/dashboardWebView/components/Header/Folders.tsx b/src/dashboardWebView/components/Header/Folders.tsx
index 1d5af07b..9f073857 100644
--- a/src/dashboardWebView/components/Header/Folders.tsx
+++ b/src/dashboardWebView/components/Header/Folders.tsx
@@ -22,7 +22,7 @@ export const Folders: React.FunctionComponent<IFoldersProps> = ({}: React.PropsW
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
 
-        <MenuItems>
+        <MenuItems disablePopper>
           <MenuItem 
             title={DEFAULT_TYPE}
             value={null}
diff --git a/src/dashboardWebView/components/Header/Grouping.tsx b/src/dashboardWebView/components/Header/Grouping.tsx
index fe5c24ad..e245fbd6 100644
--- a/src/dashboardWebView/components/Header/Grouping.tsx
+++ b/src/dashboardWebView/components/Header/Grouping.tsx
@@ -23,7 +23,7 @@ export const Grouping: React.FunctionComponent<IGroupingProps> = ({}: React.Prop
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Group by`} title={crntGroup?.name || ""} />
 
-        <MenuItems>
+        <MenuItems disablePopper>
           {groupOptions.map((option) => (
             <MenuItem 
               key={option.id}
diff --git a/src/dashboardWebView/components/Header/Sorting.tsx b/src/dashboardWebView/components/Header/Sorting.tsx
index 10733161..a5b01869 100644
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/src/dashboardWebView/components/Header/Sorting.tsx
@@ -91,7 +91,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSo
       <Menu as="div" className="relative z-10 inline-block text-left">
         <MenuButton label={`Sort by`} title={crntSort?.title || crntSort?.name || ""} disabled={!!searchValue} />
 
-        <MenuItems widthClass="w-48">
+        <MenuItems widthClass="w-48" disablePopper>
           {allOptions.map((option) => (
             <MenuItem 
               key={option.id}
diff --git a/src/dashboardWebView/components/Menu/MenuItems.tsx b/src/dashboardWebView/components/Menu/MenuItems.tsx
index 013d294e..3e4aff87 100644
--- a/src/dashboardWebView/components/Menu/MenuItems.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItems.tsx
@@ -6,9 +6,10 @@ export interface IMenuItemsProps {
   widthClass?: string;
   marginTopClass?: string;
   updatePopper?: () => void;
+  disablePopper?: boolean
 }
 
-export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, marginTopClass, children, updatePopper}: React.PropsWithChildren<IMenuItemsProps>) => {
+export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass, marginTopClass, children, updatePopper, disablePopper}: React.PropsWithChildren<IMenuItemsProps>) => {
   return (
     <Transition
       as={Fragment}
@@ -20,7 +21,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
       leaveFrom="transform opacity-100 scale-100"
       leaveTo="transform opacity-0 scale-95"
     >
-      <Menu.Items className={`${widthClass || ""} ${marginTopClass || "mt-2"}  rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
+      <Menu.Items className={`${widthClass || ""} ${marginTopClass || "mt-2"} ${ disablePopper ? "origin-top-right absolute right-0 z-20" : ""}  rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
         <div className="py-1">
           {children}
         </div>