From b99b30eb51e4aa30ee12febe8fc40a414673167d Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Tue, 24 Sep 2024 09:36:49 +0800
Subject: [PATCH] fixing shadowing issue

---
 frontend/app/element/dropdown.stories.tsx | 17 +++++++++++++++++
 frontend/app/element/dropdown.tsx         | 10 +++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/app/element/dropdown.stories.tsx b/frontend/app/element/dropdown.stories.tsx
index 34385ef3..456685c0 100644
--- a/frontend/app/element/dropdown.stories.tsx
+++ b/frontend/app/element/dropdown.stories.tsx
@@ -99,6 +99,23 @@ export const Test: Story = {
                     },
                 ],
             },
+            {
+                label: "Option 4",
+                onClick: () => console.log("Clicked Option 3"),
+                subItems: [
+                    { label: "Option 4 -> 1", onClick: () => null },
+                    { label: "Option 4 -> 2", onClick: () => null },
+                    { label: "Option 4 -> 4", onClick: () => null },
+                    { label: "Option 4 -> 4", onClick: () => null },
+                    { label: "Option 4 -> 5", onClick: () => null },
+                    { label: "Option 4 -> 6", onClick: () => null },
+                    { label: "Option 4 -> 7", onClick: () => null },
+                    { label: "Option 4 -> 8", onClick: () => null },
+                    { label: "Option 4 -> 9", onClick: () => null },
+                    { label: "Option 4 -> 10", onClick: () => null },
+                    { label: "Option 4 -> 11", onClick: () => null },
+                ],
+            },
         ],
     },
 };
diff --git a/frontend/app/element/dropdown.tsx b/frontend/app/element/dropdown.tsx
index be743db3..469b2d20 100644
--- a/frontend/app/element/dropdown.tsx
+++ b/frontend/app/element/dropdown.tsx
@@ -31,16 +31,20 @@ const SubMenu = memo(
             }
         });
 
+        // Check if the position for the submenu is calculated
+        const position = subMenuPosition[parentKey];
+        const isPositioned = position && position.top !== undefined && position.left !== undefined;
+
         const subMenu = (
             <div
                 className="dropdown sub-dropdown"
                 ref={subMenuRefs.current[parentKey]}
                 style={{
-                    top: subMenuPosition[parentKey]?.top || 0,
-                    left: subMenuPosition[parentKey]?.left || 0,
+                    top: position?.top || 0,
+                    left: position?.left || 0,
                     position: "absolute",
                     zIndex: 1000,
-                    opacity: visibleSubMenus[parentKey]?.visible ? 1 : 0,
+                    visibility: visibleSubMenus[parentKey]?.visible && isPositioned ? "visible" : "hidden", // Only show if visible and positioned
                 }}
             >
                 {subItems.map((item, idx) => {