Close submenu when clicked on submenu item?

[edwardsayer]

Hi Guys,

Is there a way to close submenu when clicked on submenu item?

Thanks.

[edwardsayer]

It turns out javascript DOM manipulation do the trick.

<ul class="menu menu-horizontal p-0">
<li tabindex="0">
  <a onmouseover="document.getElementById('aa').style.display = 'block'">
	...
  </a>
  <ul id="aa" class="p-2 bg-base-300 right-0">
	<li><a href="#" onclick="document.getElementById('aa').style.display = 'none'">Submenu 1</a></li>
	<li><a href="#">Submenu 2</a></li>
  </ul>
</li>
</ul>

However I wonder if there is an tailwind/daisyUI native way to handle this?

[carlos-dubon]

[btihen]

Interesting - that makes sense, butI find this an odd and unexpected default behavior. I would enjoy a simple way to change this behavior for all elements -but I am guessing that its not easy to add a compatible JS option that works everywhere

[TH-Raju]

import React, { useState } from 'react';
import { Menu } from 'antd';

const { SubMenu } = Menu;

const MyMenu = () => {
const [openKeys, setOpenKeys] = useState([]);

const onOpenChange = (keys) => {
setOpenKeys(keys);
};

const handleClick = () => {
setOpenKeys([]);
};

return (

<Menu.Item key="SubMenu1" onClick={handleClick}>Submenu 1</Menu.Item>
<Menu.Item key="SubMenu2" onClick={handleClick}>Submenu 2</Menu.Item>


);
};

export default MyMenu;

=====================
"openKeys " holds the keys of the currently open submenus.
"onOpenChange " updates the openKeys state when a submenu is opened or closed.
"handleClick " sets "openKeys " to an empty array, which closes all submenus when a submenu item is clicked.
You can adjust the Menu component and its props according to your specific needs. If you are using a different library or custom components, the concept remains the same: manage the state of the submenu's visibility and update it upon item clicks.