From 1259a8a58164cdbfa0705e1cbfc593e138e574c2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jun 2024 14:08:08 -0300
Subject: [PATCH] Fixed popover not in front of other table rows

---
 .../src/components/dropdownComponent/index.tsx    |  5 ++---
 .../inputComponent/components/popover/index.tsx   | 13 ++++++++++---
 .../components/popoverObject/index.tsx            | 15 ++++++++++++---
 .../src/components/inputComponent/index.tsx       |  1 +
 .../src/components/tableNodeCellRender/index.tsx  |  2 +-
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 8402d166e..4aa9dcf07 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -33,9 +33,8 @@ export default function Dropdown({
 
   const refButton = useRef<HTMLButtonElement>(null);
 
-  const PopoverContentDropdown = children
-    ? PopoverContent
-    : PopoverContentWithoutPortal;
+  const PopoverContentDropdown =
+    children || editNode ? PopoverContent : PopoverContentWithoutPortal;
 
   return (
     <>
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
index 78fc5bd3d..e93f69207 100644
--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -10,7 +10,11 @@ import {
   CommandList,
 } from "../../../ui/command";
 import { Input } from "../../../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverContentWithoutPortal,
+} from "../../../ui/popover";
 const CustomInputPopover = ({
   id,
   refInput,
@@ -39,6 +43,9 @@ const CustomInputPopover = ({
   showOptions,
 }) => {
   const setErrorData = useAlertStore.getState().setErrorData;
+  const PopoverContentInput = editNode
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
 
   const handleInputChange = (e) => {
     if (password) {
@@ -107,7 +114,7 @@ const CustomInputPopover = ({
           data-testid={editNode ? id + "-edit" : id}
         />
       </PopoverAnchor>
-      <PopoverContentWithoutPortal
+      <PopoverContentInput
         className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
@@ -184,7 +191,7 @@ const CustomInputPopover = ({
             </CommandGroup>
           </CommandList>
         </Command>
-      </PopoverContentWithoutPortal>
+      </PopoverContentInput>
     </Popover>
   );
 };
diff --git a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
index 7b30ac897..e907ec239 100644
--- a/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popoverObject/index.tsx
@@ -9,7 +9,11 @@ import {
   CommandList,
 } from "../../../ui/command";
 import { Input } from "../../../ui/input";
-import { Popover, PopoverContentWithoutPortal } from "../../../ui/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverContentWithoutPortal,
+} from "../../../ui/popover";
 const CustomInputPopoverObject = ({
   id,
   refInput,
@@ -23,6 +27,7 @@ const CustomInputPopoverObject = ({
   disabled,
   setShowOptions,
   required,
+  editNode,
   className,
   placeholder,
   onChange,
@@ -34,6 +39,10 @@ const CustomInputPopoverObject = ({
   handleKeyDown,
   showOptions,
 }) => {
+  const PopoverContentInput = editNode
+    ? PopoverContent
+    : PopoverContentWithoutPortal;
+
   const handleInputChange = (e) => {
     onChange && onChange(e.target.value);
   };
@@ -79,7 +88,7 @@ const CustomInputPopoverObject = ({
           data-testid={id}
         />
       </PopoverAnchor>
-      <PopoverContentWithoutPortal
+      <PopoverContentInput
         className="nocopy nowheel nopan nodelete nodrag noundo p-0"
         style={{ minWidth: refInput?.current?.clientWidth ?? "200px" }}
         side="bottom"
@@ -159,7 +168,7 @@ const CustomInputPopoverObject = ({
             </CommandGroup>
           </CommandList>
         </Command>
-      </PopoverContentWithoutPortal>
+      </PopoverContentInput>
     </Popover>
   );
 };
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8fb749279..5327c11e3 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -108,6 +108,7 @@ export default function InputComponent({
               setSelectedOptions={setSelectedOptions}
               options={objectOptions}
               value={value}
+              editNode={editNode}
               autoFocus={autoFocus}
               disabled={disabled}
               setShowOptions={setShowOptions}
diff --git a/src/frontend/src/components/tableNodeCellRender/index.tsx b/src/frontend/src/components/tableNodeCellRender/index.tsx
index 0db35ee57..5291b1cce 100644
--- a/src/frontend/src/components/tableNodeCellRender/index.tsx
+++ b/src/frontend/src/components/tableNodeCellRender/index.tsx
@@ -120,7 +120,7 @@ export default function TableNodeCellRender({
               onSelect={(value) => handleOnNewValue(value, templateData.key)}
               value={templateValue ?? "Choose an option"}
               id={"dropdown-edit-" + templateData.name}
-            ></Dropdown>
+            />
           );
         }