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