How can i make Ant design subMenu stay open in React functional component

1.3k views Asked by At

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> 
)}

Menu opened, link not clicked

Link clicked, menu closed

1

There are 1 answers

2
Stelios On

You have to provide onOpenKeysChange with a parameter try onOpenKeysChange("static") for example