From 6b691dc47d408ba8e9d391fc5296d1427d7033e5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 29 Nov 2023 18:35:30 -0300
Subject: [PATCH] Fixed context menu on sidebar

---
 .../extraSidebarComponent/index.tsx           |  2 +-
 .../sideBarDraggableComponent/index.tsx       | 38 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 1a859f350..83938c43c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -385,7 +385,7 @@ export default function ExtraSidebar(): JSX.Element {
                         <SidebarDraggableComponent
                           sectionName={SBSectionName as string}
                           apiClass={dataFilter[SBSectionName][SBItemName]}
-                          key={SBItemName}
+                          key={index}
                           onDragStart={(event) =>
                             onDragStart(event, {
                               //split type to remove type in nodes saved with same name removing it's
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 3f0f18888..d6e364a55 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -1,4 +1,4 @@
-import { DragEventHandler, useContext, useRef } from "react";
+import { DragEventHandler, useContext, useRef, useState } from "react";
 import IconComponent from "../../../../../components/genericIconComponent";
 import {
   Select,
@@ -34,9 +34,19 @@ export default function SidebarDraggableComponent({
   onDragStart: DragEventHandler<HTMLDivElement>;
   official: boolean;
 }) {
-  const open = useRef(false);
+  const [open, setOpen] = useState(false);
   const { getNodeId, deleteComponent, version } = useContext(FlowsContext);
   const { autoLogin, userData } = useContext(AuthContext);
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const handlePointerDown = (e) => {
+    const rect = popoverRef.current?.getBoundingClientRect() ?? {
+      left: 0,
+      top: 0,
+    };
+    setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+  };
 
   function handleSelectChange(value: string) {
     switch (value) {
@@ -56,17 +66,18 @@ export default function SidebarDraggableComponent({
         break;
     }
   }
-
   return (
     <Select
       onValueChange={handleSelectChange}
-      onOpenChange={(change) => (open.current = change)}
-      open={open.current}
+      onOpenChange={(change) => setOpen(change)}
+      open={open}
     >
       <div
-        onContextMenuCapture={(e) => {
+        onPointerDown={handlePointerDown}
+        onContextMenu={(e) => {
           e.preventDefault();
-          open.current = true;
+          console.log("que");
+          setOpen(true);
         }}
         key={itemName}
         data-tooltip-id={itemName}
@@ -93,13 +104,22 @@ export default function SidebarDraggableComponent({
             className="side-bar-components-div-form"
           >
             <span className="side-bar-components-text">{display_name}</span>
-            <div>
+            <div ref={popoverRef}>
               <IconComponent
                 name="Menu"
                 className="side-bar-components-icon "
               />
               <SelectTrigger></SelectTrigger>
-              <SelectContent>
+              <SelectContent
+                position="popper"
+                side="bottom"
+                sideOffset={-25}
+                style={{
+                  position: "absolute",
+                  left: cursorPos.x,
+                  top: cursorPos.y,
+                }}
+              >
                 <SelectItem value={"download"}>
                   <div className="flex">
                     <IconComponent