[Menu] closeOnSelect not working on navigation w/ next.js links

Describe the bug As shown above while selecting link which is wrapped in next/link in MenuItem, MenuList isn’t closing automatically as it does for normal links or any items in menu list

Is there any workaround/way to close menu on dynamic links selection?

Minimal Example

Expected Behavior It should automatically close on selection

To Reproduce

• Create menu links wrapped under next/link
• Select any option

Suggested solution(s)

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context I think it’s happning due to next.js overtaking link component and preventing it on click so parent isn’t able to detact event

[jhoch]

I had this issue, too, but solved it using the onClose property that Menu can pass to its children. For example:

<Menu>
  {({ onClose }) => (
    <MenuList>
      <NextLink>
        <MenuItem as="a" onClick={onClose}>
          Hello World
        </MenuItem>
      </NextLink>
    </MenuList>
  )}
</Menu>

[export-mike]

Seems related, I’m finding the menu isn’t closing when I click anything other than the menu itself?

https://codesandbox.io/s/exciting-moon-u64ey