fixing shadowing issue

This commit is contained in:
Red Adaya
2024-09-24 09:36:49 +08:00
parent 7ec1a75229
commit b99b30eb51
2 changed files with 24 additions and 3 deletions
+17
View File
@@ -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 },
],
},
],
},
};
+7 -3
View File
@@ -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) => {