[MenuItem] Menu closes when clicking on a MenuItemOption

When you have a MenuOptionGroup of type=“radio” inside a Menu, clicking on any of this options will make the menu to close. I’d like to give my users some kind of “change” feedback, when selecting this options. Same as closeOnSelect property of Menu component, I’d like to have a closeOnSelect for MenuItem and MenuItemOption components, so I can choose which Items should close the menu on selection, and which items should keep the menu open.

Here’s a small sandbox showing this behavior with a “language selection” example: I’d like to keep the menu open when clicking on ‘Spanish’ or ‘English’, so the users have instant feedback on this change.

https://codesandbox.io/s/small-paper-exgwi?file=/src/App.tsx

I am aware of some workarounds to make this work, but it will be great if this was supported by Chakra with a property on the MenuItem components.

Thanks in advance! 😄

[franky47]

@with-heart if the solution proposed in my previous comment is acceptable, I can open a PR.

Edit: that being said, there could be a more declarative way of doing this (working with props rather than events), by allowing MenuItem and MenuItemOption to pass a closeOnSelect that overrides the parent Menu’s value.

Eg:

<Menu 
  closeOnSelect={true} // default value explicitly added for clarity
>
  {({ onClose }) => (
    <>
      <MenuButton>Menu</MenuButton>
      <MenuList>
        <MenuItem>This item closes the menu when clicked</MenuItem>
        <MenuItem
          closeOnSelect={false}
          onClick={() => {
            setTimeout(onClose, 1000)
          }}
        >
          This one waits 1 second, then closes it
        </MenuItem>
      </MenuList>
    </>
  )}
</Menu>

Implementation in useMenuItem (works by proxy for MenuItemOption):

  const onClick = React.useCallback(
    (event: React.MouseEvent) => {
      onClickProp?.(event)
      /**
       * Close menu and parent menu's if `closeOnSelect` is set to `true`
+     * or if the menu item explicitly asked not to close on select:
       */
-      if (closeOnSelect) {
+      if (closeOnSelect && props.closeOnSelect !== false) {
        onClose()
      }
    },
-    [onClose, onClickProp, closeOnSelect],
+    [onClose, onClickProp, closeOnSelect, props.closeOnSelect],
  )

[segunadebayo]

That’s a great idea @franky47, thanks for sharing your thoughts.

I think it makes sense to be able to control closeOnSelect per MenuItem. Feel free to create a PR for this.