Is there a way to prevent closing the dropdown when a MenuItem which has a sub menu is clicked?

[arikimolloy]

I have a multi-level dropdown via nested MenuItems, and if I have a MenuItem which has sub-MenuItems and I click on it, I would rather it didn't close the entire dropdown. This is important for touch interaction (mobile devices) so that the user can open the sub-menu (because there is no mouse hover on mobile.

In my case only the sub-MenuItems are items where I perform an action on their selection, the parent MenuItem is just used as an entry-point to the sub menu. E.g. a parent MenuItem could be "Find" and the sub-MenuItems could be "Find next" "Find previous" "Find in selection". If I click "Select x..." I don't want the whole dropdown to close, only when I click the sub-MenuItems.

Currently my workaround is very ugly: `const [mainDropdownIsOpen, setMainDropdownIsOpen] = useState(false);

return ( <Dropdown onToggle={setMainDropdownIsOpen} open={mainDropdownIsOpen} disabled={disabled} onClick={e => { // workaround to prevent menu from closing on clicking of a // parent MenuItem with sub-MenuItems (e.g. "Select view") if (e.target.parentElement.className.includes('dropdown-submenu')) { setMainDropdownIsOpen(true); // re-open the dropdown } }}`