Submenu closes improperly in React + Material UI - reactjs

Question

I have a nested menu structure like follows:
menuItems = [
{
"key": "key1",
"caption": "Text1"
},
{
"key": "key2",
"caption": "Text2",
"subMenuItems": [
{
"key": "key3",
"caption": "Text3",
"subMenuItems": [
{
"key": "key4",
"caption": "Text4"
}
]
},
{
"key": "key5",
"caption": "Text5",
"subMenuItems": []
},
{
"key": "key6",
"caption": "Text6"
}
]
},
{
"key": "key7",
"caption": "Text7"
}
]
And I want to open submenu items in a submenu that opens to right side of its parent. Something similar to Angular Material Menu (Nested menu example).
I tried using Material UI Menu, and it opens the menu as needed (See here), but has the following 2 issues:
If you open the parent menu and then any of the child menu, you will need to click outside as many times as the menus. Instead, it should close all the parent + child menus on clicking outside.
If you want to switch the child menu by clicking another parent menu item, you will need to first click on the parent menu (or as per issue-1, click outside) to close the currently open child menu and then click the desired parent menu item to open corresponding child menu.
Issue 1 can be addressed using ClickAwayListener as implemented here, but then it closes all menus even when trying to switch to another child menu, like switching from "Button 3" submenu to "More Items".
Thanks.

Answer 1

Let's build a drawer/navbar which receives a list of items objects and render then in a recursive way. First thing first, define the structure like you already did in menuItems, i'll change it a little bit:
const items = [
{name: 'Shallow Item', path='/', type:'shallow'},
{
name: 'Nested',
type: 'nested',
items:[
{name: 'Shallow again', path='/nestedpath'}
]
}
]
Now we have two items in your list, one is a plain shallow item, which does not contain nested options, the second is a nested item which contains a list of shallow items inside it.
Now we have to build or two core components: <NestedItem> and <ShallowItem>. They should look something like this:
const ShallowItem = ({item, onClick}) =>(
<ListItem
component={Link}
to={item.path || #}
onClick={onClick ? onClick : ()=>{} }
>
<ListItemText primary={item.name}/>
{Boolean(nested) &&
<Icon>
{collapsed ? 'arrow_drop_up' : 'arrow_drop_down'}
</Icon>
}
</ListItem>
)
Notice that onClick and to(react-router link) properties had their values attributed conditionally, because we're going to use the same component to render the first layer and the list of the NestedItem, like this:
const NestedItem = ({ item }) => {
const [collapsed, toggler] = useState(false)
const classes = useStyles()
return (
<div>
<ShallowItem
item={{ icon: item.icon, title: item.title }}
nested
collapsed={collapsed}
onClick={() => toggler(!collapsed)}
/>
<Collapse in={collapsed}>
<List component='div'>
{item.items.map(item => (
<ShallowItem item={item} key={item.title}/>
))}
</List>
</Collapse>
</div>
)}
There we go, did you grabbed the ideia? The only component really getting rendered is ShallowItem cause NestedItem is just a collection of shallow items. So we first render a shallow item that opens a collapse container containing a sublist of more shallow items.The only thing that we need to do now is check if the item have subitems, case positive render a NestedItem otherwise render ShallowItem. That function is:
const renderItems = items =>{
for(let item of items){
switch(item.type){
case 'nested': return <NestedItem item={item} />
case 'shallow' : return <ShallowItem item={item} />
}
}
}
Now you have a recursive way to render nested items, you only need to stylize one component, and make the depth deeper is pretty easy now. We use this solution in our company and it works like charm.