Menu closeOnSelect prop won't work with MenuOptionGroup

🐛 Bug report

While using a MenuOptionGroup with type radio the closeOnSelect property of the Menu won’t work always. Sometimes it closes the menu, sometimes it won’t.

💥 Steps to reproduce

1. Go to Chakra Menu page at the Menu Option Group section using this link
2. Change the closeOnSelect={false} of the Menu component to closeOnSelect={true}
3. Opens the rendered menu and try to select an option. You should try a few times. After a few attempts it would close, but not as expected (on the first attempt)

💻 Link to reproduction

https://chakra-ui.com/docs/overlay/menu#menu-option-groups

🧐 Expected behavior

After clicking on a given item, it should close the menu

🧭 Possible Solution

No idea =/

📝 Additional information

The closeOnSelect works on MenuGroup (but not MenuOptionGroup)

[segunadebayo]

Pushed a fix for this, thanks to your help @Sqvall 💖.

We’ll release an update shortly.

[Sqvall]

The problem in this place. https://github.com/chakra-ui/chakra-ui/blob/cbf8bbdf02eff45a57a28307ec9c3137ce845420/packages/menu/src/use-menu.ts#L337-L341 Menu item option - it button contains 2 span (icon and text). When we click on text or icon - isTargetMenuItem called with span or svg element in event.target ant event not propagation to the button. Because of this, the condition does not pass:

!!target.getAttribute("role")?.startsWith("menuitem")

We cannot attach to the parent for this event targets because its broke for icon or if children include another DOM elements.

May be somebody can fix it? Or give me a hint what would be the best option to fix it correctly.