Im using Ant Designs(version 3.3) subMenu component. And after im clicking on a link inside of that sub menu, the sub menu collapses(see images). How can i make it so it remains open?
const Menu = () => {
return (
<Menu
defaultSelectedKeys="start"
defaultOpenKeys="start"
mode="inline"
>
<SubMenu
key="admin"
title={
<span>
<span>Admin</span>
</span>
}
>
<Menu.Item key="setup">
<Link href="/setup/[programId]" as={`/setup/${programId}`}>
<a>Program</a>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
)}
I tried by adding a useState hook but its not working. But if put a string directly in to the openKeys prop it works but its ofc static.
const Menu = () => {
const [openTab, setOpenTab] = useState("");
const onOpenKeysChange = (props) => {
setOpenTab(props);
};
return (
<Menu
defaultSelectedKeys="start"
defaultOpenKeys="start"
mode="inline"
onOpenChange={onOpenKeysChange}
// Not working
openKeys={openTab}
// Works static
openKeys="setup"
>
<SubMenu
key="admin"
title={
<span>
<span>Admin</span>
</span>
}
>
<Menu.Item key="setup">
<Link href="/setup/[programId]" as={`/setup/${programId}`}>
<a>Program</a>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
)}
You have to provide
onOpenKeysChange
with a parameter tryonOpenKeysChange("static")
for example