Control whether Menu closes on Menu.Item click

[employee451]

Hi there!
I have a use case for the Menu component where I don't necessarily want the Menu to close when I click on a Menu.Item.
Or, in other words, I would like to be able to control when the menu closes in some way.

[bytehala]

While I agree that there should be a way to do this with less boilerplate, I looked at the docs and found one way to do it without having to wait for that feature:

You can omit the open destructuring, as this variable is internally tracked by the Menu component and you basically just ignore it and have full control of when you want your Menu to open/close based on customOpen.

function MyDropdown() {

  const [display, setDisplay] = useState('display here');
  const [customOpen, setCustomOpen] = useState(false);


  function buttonClicked() {
    setCustomOpen(prev => !prev);
  }

  return (
    <>
    <Menu>
      {({open}) => (
        <>
          <Menu.Button onClick={buttonClicked}>More</Menu.Button>
          {customOpen && (
          <Menu.Items static>
            <Menu.Item>
              {({ active }) => (
                <a className={`${active && 'bg-blue-500'}`} onClick={() => setDisplay('Account Settings')}>
                  Account settings
                </a>
              )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a className={`${active && 'bg-blue-500'}`} onClick={() => setDisplay('Documentation')}>
                  Documentation
                </a>
              )}
            </Menu.Item>
            <Menu.Item disabled>
              <span className="opacity-75">Invite a friend (coming soon!)</span>
            </Menu.Item>
          </Menu.Items>)
          }
        </>
      )
      }
    </Menu>
    <br/><br/>
    <div>{display} was clicked</div>
  </>
  )
}

[employee451]

Thanks @bytehala. This is what I'll have to do for now.
The annoying thing about doing it that way is that I now have to implement that the menu closes on 'escape' press, when you click outside the menu, etc. myself.

[leandroruel]

the click outside is the worst, i'm strugling trying implement it myself. no luck, a lot of bugs

[mysteriouscenter]

@bytehala Is there a good way to use something like this to allow adding form fields / text areas / submit button to Menu Items like this?

I am clearly in over my head in understanding how this might work.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

@employee451 could you talk more about this use case you have? A Menu typically contains items that let you invoke some action or let you navigate to another page. Think about it as your native OS menu bar. As far as I know, they all close the menu once the "action" is invoked. Here is a screenshot of the macOS Menu for example:

The reason that I ask about your use case is because I'm trying to understand what you try to achieve. Because initially I am thinking about that you might be "abusing" the Menu for a different use case than it is intended for.

[employee451]

Of course!🙏 @RobinMalfait

One use case where this functionality would be useful is when the "action" is asynchronous, e.g. you have to wait for an API call to complete before closing the menu.

In my particular use case, the Menu acts as an option menu for a calendar event. One of the options in the menu should cancel the event. When this option is selected, I would like to show a loading spinner on the menu item, then a check icon once the action has been completed. Currently, I'm showing the loading state elsewhere in the UI.

[Zertz]

I am running into a similar situation and while <Disclosure /> mostly fits the bill, there is one thing lacking: a way to detect an outside click and the escape key being pressed.

Feel free to chip in but I think having access to this would solve this issue!

react-use has useClickAway and useKey but it'd be nice to have it integrated here!

[Mad-Kat]

@RobinMalfait great job on this library. I really like it :)

I have exactly the same problem that the menu doesn't close automatically with the <Link></Link> tag from NextJS. When I want to have this behavior I would have to implement the open/close functionality again and clicking outside detection is not so easy 😆

Do you know why the menu doesn't close with NextJS? Could it be that when we have client side routing, that the closing mechanism doesn't work 100%?

[RobinMalfait]

@Mad-Kat That's an issue with next/link, checkout: #120 (comment)

[blasterbug]

I think there is the same issue with Popover. I would expect when users click on one of the items inside Popover.Panel, then the panel will close.

[employee451]

I think there is the same issue with Popover. I would expect when users click on one of the items inside Popover.Panel, then the panel will close.

This issue is about the opposite problem, as the Menu component is closing in situations where we might not want it to.

[BrianHung]

As far as I know, they all close the menu once the "action" is invoked. Here is a screenshot of the macOS Menu for example:

One use case if you have a Switch button in your menu, then you'd want the user to be able to see the toggle go through before closing.

[arielitovsky]

@bytehala's solution didn't completely work for me – I had to expand it slightly by observing the change to the internal open state (for my complex layout, opening the menu didn't work reliably) by using a useEffect

function MyDropdown() {
const [open, setOpen] = useState(true);

  return (
    <Menu>
      {( { open: internalOpen }) => {

        useEffect(() => {
          if (internalOpen && !open) {
            setOpen(true)
          }
        }, [internalOpen])
  return (
          <Menu.Button onClick={buttonClicked}>More</Menu.Button>
          {customOpen && (
          <Menu.Items static>
            <Menu.Item>
              {({ active }) => (
                <a className={`${active && 'bg-blue-500'}`} onClick={() => setDisplay('Account Settings')}>
                  Account settings
                </a>
              )}
            </Menu.Item>
            <Menu.Item>
              {({ active }) => (
                <a className={`${active && 'bg-blue-500'}`} onClick={() => setDisplay('Documentation')}>
                  Documentation
                </a>
              )}
            </Menu.Item>
            <Menu.Item disabled>
              <span className="opacity-75">Invite a friend (coming soon!)</span>
            </Menu.Item>
          </Menu.Items>)
)
}

If you have many internal divs, you may also need to toggle the open state on those if the events don't bubble up.