Chakra-ui: [Menu] closeOnSelect not working on navigation w/ next.js links

Created on 3 Feb 2020 · 3Comments · Source: chakra-ui/chakra-ui

Describe the bug
on-menu
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

Bug 🐛 workaround available ✌️

Source

harshzalavadiya

Most helpful comment

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>

jhoch on 10 Mar 2020

👍2

All 3 comments

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>

jhoch on 10 Mar 2020

👍2

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

ezgif-4-6139f0850e20