Arrow navigation fix

[steviebuilds]

See issue #9.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
mui-nested-menu	✅ Ready (Inspect)	Visit Preview	Aug 14, 2022 at 11:43PM (UTC)

[gkiely]

Hey @steviebaa, any chance this can be merged in? I am running into this issue.

[steviebuilds]

@gkiely I didn't get around to completing this one sorry. It needs some work before it is ready. I won't be able to get around to it anytime soon.

[gkiely]

No worries, thanks for the quick follow up. Remember what needed to be done to get it ready?

[Ranjeet-Naidu]

Hey @webzep, I'm facing the same issue. Would you happen to know when this will get merged?

[steviebuilds]

@Ranjeet-Naidu, its not on my radar unfortunately. It seems no one is actively working on it. Feel free to make a PR for it.

[eggei]

I hope this fix gets added to the library but if you need a solution for this, we shared our solution with this package after having to add support for this in our project. It is not a drop-in element like NestedMenuItem, but is is still customizable as you wish. Data array takes all the MenuItemProps from MUI. Hope it helps, peace! https://www.npmjs.com/package/better-mui-menu

Usage:

const menuItems: MenuItem[] = [
  { id: 'save', label: 'Save', startIcon: Save, onClick: () => console.log('Save action') },
  { type: 'divider' },
  {
    label: 'Nested actions',
    startIcon: Cloud,
    items: [
      { label: 'Upload', onClick: () => console.log('Upload') },
      { label: 'Download', onClick: () => console.log('Download') },
    ],
  },
]

export function FileMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

  return (
    <>
      <Button variant="contained" onClick={event => setAnchorEl(event.currentTarget)}>
        Open file menu
      </Button>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => setAnchorEl(null)}
        items={menuItems}
      />
    </>
  )
}