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>
  </>
  )
}

[srinivas-oneassure]

Hey! Thank you this helped me in an urgent situation. I wasn't understanding why my onClick is not working. I tried this and understood it's because Menu component is closing it without invoking the onClick.
Thanks alot.

[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.

[muhesh-kumar]

For closing the menu only when we click outside, we can use the Popover component because it just does that

[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 did you checkout this?

https://headlessui.dev/react/menu#integrating-with-next-js

[Sowed]

@RobinMalfait, you are fantastic. Thank you.

[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.

[kamaladenalhomsi]

For anyone suffering to keep the dropdown opened if an item clicked, here is my workaround:

 const [menuOpened, setMenuOpened] = useState(false)

 const CustomMenuButton = function ({ children }) {
    return <button onClick={() => setMenuOpened(!menuOpened)}>{children}</button>
  }

function myComponent () {
  return (
    <Menu>
      <Menu.Button as={CustomMenuButton}>Button</Menu.Button>
      <Menu.Items static>
        {menuOpened && (
          <Menu.Item>This is item<MenuItem>
        )}
      </Menu.Items>
    </Menu>
  )
}

TL;DR: just create a custom component for button and do what ever you want (and ofc set static to true for Menu.Items)

[luciodale]

I think what makes more sense is to invoke event.stopProgatation() from within the Menu.Item component. In this way, the dropdown still closes when clicking outside the dialog and there's no need to reimplement any logic.

[jordn]

Kinda gross, but here's a workaround. Use a ref to the Menu.Button and force a click event to reopen it immediately afterwards (in a timeout so it is queued up immediately after the current event is handled)

import { Menu } from "@headlessui/react";
import { useRef } from "react";

export const MenuThatDoesntClose = () => {
  const ref = useRef(null);

  return (
    <Menu>
      <Menu.Button ref={ref}> More</Menu.Button>
      <Menu.Items>
        <Menu.Item
          as={"button"}
          onClick={() => {
            setTimeout(() => {
              ref.current?.click();
            }, 0);
          }}
        >
          will not close
        </Menu.Item>
        <Menu.Item as={"button"}>Will close</Menu.Item>
      </Menu.Items>
    </Menu>
  );
};

[RobinMalfait]

Hey all!

I've moved this to a discussion instead because while we don't have time to look at it right now, we will look at it in the future. Once we dedicate some time to this problem we will get back to this discussion.

[BrianHung]

As an alternative, https://www.radix-ui.com/docs/primitives/components/dropdown-menu#item allows developers to prevent the default behavior of closing the menu on select via

onSelect={event => event.preventDefault()}

(hover over the 🛈)

Event handler called when the user selects an item (via mouse of keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.

[nguyenminhtho911]

thanks. that's what i need.

[dev-bjoern]

Here https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/menu/menu.tsx#L612 is a check for the disabled prop. If present, it will not close the menu. Maybe we can supply react prop "closeMenuOnClick=trueOrFalse" to the Menu.Item to return there as well?

[Fxlr8]

@livthomas, I have a similar problem. My menu has items like generate link and download PDF. Both of them require an API call and I want to provide user with some visual feedback like spinner. I want to close the menu only after the task has finished. event.preventDefault is not an option because it can only be used synchronously. And there is no way to close the menu programmatically afterwards. It would be great for the Menu.Item to wait for the async onClick to finish.

[raduflp]

Menu should definitely expose something like onMenuItemSelect where you could handle both clicks and keyboard events, and allow to prevent menu close

a more complete example handling keyboard events as well. Way too hacky for my liking.

import { Menu } from "@headlessui/react";
import { useRef } from "react";

export const MenuWithAsyncActions = () => {
  const refMenuButton = useRef<HTMLButtonElement>(null);
  const refIsOpen = useRef<boolean>();
  const refActiveItemId = useRef<string>();

  function closeMenu() {
    if (refIsOpen.current) refMenuButton.current?.click();
  }

  async function apiCall() {
    // async logic
    // if (error) maybe not close the menu 
    closeMenu();
  }

  return (
    <Menu>
      {({ open }) => {
        refIsOpen.current = open;
        return (
          <>
            <Menu.Button ref={refMenuButton}> More</Menu.Button>
            <Menu.Items
              onKeyDown={(event: any) => {
                if (event.key === "Enter" || event.key === "Space") {
                  if (refActiveItemId.current === "asyncItem") {
                    event.preventDefault(); // prevent menu close on keyboard select
                    void apiCall();
                  }
                }
              }}
            >
              <Menu.Item
                as={"button"}
                onClick={(event: any) => {
                  event.preventDefault();
                  void apiCall();
                }}
              >
                {({ active }) => {
                  // hacky workaround for Menu not exposing in any other way the item active status on keyboard navigation
                  if (active) refActiveItemId.current = "asyncItem";
                  return <span>Async Menu Item</span>;
                }}
              </Menu.Item>
              <Menu.Item as={"button"}>
                {({ active }) => {
                  if (active) refActiveItemId.current = "syncItem";
                  return <span>Sync Menu Item</span>;
                }}
              </Menu.Item>
            </Menu.Items>
          </>
        );
      }}
    </Menu>
  );
};

[andrewrosss]

So, here is a pretty nasty hack, inspired by this comment (above).

1. Create the following .js script, say in scripts/postinstall.js:

const fs = require('fs');
const path = require('path');

const PROP_DESTRUCT_REGEX = /(let\{disabled:\w+?=!1,)(closeOnSelect=true,)?(...\w+?\}=\w+?)/
const IF_BLOCK_REGEX = /(if\(\w+)(\|\|\!closeOnSelect)?(\)return \w+.preventDefault\(\))/
const PROP_TYPE_REGEX = /(disabled\?: boolean \| undefined;)(\s+closeOnSelect\?: boolean \| undefined;)?/

const menuDir = process.argv[2]

const jsFile = path.join(menuDir, 'menu.js')
const js = fs.readFileSync(jsFile).toString()
const jsPatched = js.replace(PROP_DESTRUCT_REGEX, '$1closeOnSelect=true,$3').replace(IF_BLOCK_REGEX, `$1||!closeOnSelect$3`)
fs.writeFileSync(jsFile, jsPatched)

const dtsFile = path.join(menuDir, 'menu.d.ts')
const dts = fs.readFileSync(dtsFile).toString()
const dtsPatched = dts.replace(PROP_TYPE_REGEX, '$1 closeOnSelect?: boolean | undefined;')
fs.writeFileSync(dtsFile, dtsPatched)

2. Add a postinstall script to your package.json (if you called the script something else, or your node_modules is structured in some other way then modify as necessary):

{
  "scripts": {
    ...
    "postinstall": "node scripts/postinstall.js node_modules/@headlessui/react/dist/components/menu"
  },
  ...
}

3. Run yarn install (or npm or whatever). The postinstall script should run.

4. (PROFIT) Use the newly-added closeOnSelect prop on Menu.Item:

import { Menu } from "@headlessui/react";

export const MenuThatDoesntClose = () => {
  return (
    <Menu>
      <Menu.Button>More</Menu.Button>
      <Menu.Items>
        {/* doesn't close on click - but click away still works ;) */}
        <Menu.Item as="button" closeOnSelect={false}>
          will not close
        </Menu.Item>

        {/* does close on click */}
        <Menu.Item as="button">Will close</Menu.Item>
      </Menu.Items>
    </Menu>
  );
};

The nice thing about this solution is that there are no refs, timeout hacks, open/re-open flashes, extra state, etc. just a simple boolean prop to set.

On the flip side, this is clearly a bit brittle and this little trick might break on new releases ...

[yulafezmesi]

here is my workaround for those who wonder.

<template>
  <Menu v-slot="{ open }" as="div" class="relative inline-block text-left">
    <MenuButton @click="isMenuOpen = !isMenuOpen">
      <slot :open="isStatic ? isMenuOpen : open" name="button">
        <n-button
          class="h-8 flex items-center md:w-auto w-full"
          size="sm"
          variant="white"
          v-bind="buttonProps">
          <span class="flex items-center gap-2">
            {{ buttonProps.label }}
            <ChevronDown v-if="iconEnabled" :class="open ? 'rotate-180' : 'rotate-0'" class="h-3 w-3 transition-transform" />
          </span>
        </n-button>
      </slot>
    </MenuButton>
    <Transition
      enter-active-class="transition duration-100 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-75 ease-in"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0">
      <div v-if="isStatic ? isMenuOpen : open">
        <MenuItems
          :static="isStatic"
          class="absolute z-30 p-4 left-0 mt-2 min-w-[130px] origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
          <slot name="items" />
        </MenuItems>
      </div>
    </Transition>
  </Menu>
</template>

<script setup>
import { Menu, MenuButton, MenuItems } from '@headlessui/vue';
import ChevronDown from '@assets/icons/ui/chevron-down.svg';
import { ref } from 'vue';

const isMenuOpen = ref(false);

defineProps({
    buttonProps: {
        type: Object,
        default: () => ({})
  },
  iconEnabled: {
        type: Boolean,
        default: true
  },
  isStatic: {
        type: Boolean,
        default: false
  }
})
</script>

[wiiiimm]

You can create a wrapper around Menu.Item with an extra prop closeOnClick added to control preventDefault and stopPropagation.

Something like:

import { Menu } from '@headlessui/react';

const Component = ({
  children,
  onClick,
  closeOnClick = false,
}) => {
  return (
    <Menu.Item
      onClick={(e) => {
        if (onClick) onClick();

        if (!closeOnClick) {
          e.preventDefault();
          e.stopPropagation();
        }
      }}
    >
  {children}
</Menu.Item>
}

export default Component;

[Karolis92]

Still closes when using keyboard Enter

[phegman]

This is what I did to solve this issue. Not the cleanest because you have to use some vanilla JS to find the active item and add a prop to both the menu and the menu items but seems reasonably clean. I would still prefer to expose an onSelect prop (or similar) that allows preventDefault to stop the closing.

Below is a simplified example but should give folks the general idea 🤞

// keyboard.ts

// From https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
export const KEY_VALUES = {
  Space: " ",
  Enter: "Enter",
  Escape: "Escape",
  Backspace: "Backspace",
  Delete: "Delete",
  ArrowLeft: "ArrowLeft",
  ArrowUp: "ArrowUp",
  ArrowRight: "ArrowRight",
  ArrowDown: "ArrowDown",
  Home: "Home",
  End: "End",
  PageUp: "PageUp",
  PageDown: "PageDown",
  Tab: "Tab",
};

// Dropdown.tsx
const Dropdown = ({
  preventCloseWhenItemSelected = false,
  children
}) => {
  const menuItemsRef = useRef<HTMLDivElement>(null);

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    if (!preventCloseWhenItemSelected) {
      return;
    }

    if (event.key === KEY_VALUES.Enter) {
      const activeItemId = menuItemsRef?.current?.getAttribute(
        "aria-activedescendant"
      );

      if (!activeItemId) {
        return;
      }

      const activeItem = document.getElementById(activeItemId);

      if (!activeItem) {
        return;
      }

      event.preventDefault();
      event.stopPropagation();

      activeItem.click();
    }
  };

  return (
    <Menu as="div">
      <Menu.Button>Open</Menu.Button>

      <Menu.Items
        ref={menuItemsRef}
        onKeyDown={handleKeyDown}
      >
        {children}
      </Menu.Items>
    </Menu>
  );
};

// DropdownItem.tsx

const DropdownItem = (
  {
    preventCloseWhenSelected = false,
    children,
  },
) => {
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    if (!preventCloseWhenSelected) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
  };

  return (
    <Menu.Item>
      <button onClick={handleClick}>{children}</button>
    </Menu.Item>
  );
};

Example usage

<Dropdown preventCloseWhenItemSelected>
  <DropdownItem preventCloseWhenSelected>Foo bar</DropdownItem>
</Dropdown>

[cbernard01]

Suppose you are looking for a menu panel with some other nest structures (divs, buttons, items, etc.), such as a calendar date picker. In that case, you can use a Disclosure and a Disclosure Panel with the static flag set within the Menu Items, and all of your dreams will come true.

[vixducis]

Since 1.7.4, The Menu component exposes a close function which allows you to close the menu programatically. In combination with e.preventDefault(), this can now be fully used to control the entire open state.

[Karolis92]

Works with mouse, but not keyboard controls, so not fully.

[GVALFER]

close the menu after click:

<Menu.Item>
    {({ active, close }) => (    // <---------------------- add close
        <a
            href=""
            onClick={(e) => {
                item.onClick(e);
                close();   //  <----------------------  add close
            }}
            className={classNames(
                active
                    ? "bg-gray-100 text-gray-900"
                    : "text-gray-700",
                "flex justify-between px-4 py-2 text-sm"
            )}
        >
            <span className="flex gap-x-1">
                {item.icon && (
                    <item.icon className="h-4 w-4" />
                )}
                {item.name}
            </span>
        </a>
    )}
</Menu.Item>

[mohidmeer]

This Worked for me using a useRef and triggering the menu button event and it closes the menu

  function ToolMenu() {
  
      const buttonARef = useRef(null);
    
      const handleButtonClickB = () => {
          if (buttonARef.current) {
              buttonARef.current.click(); 
          }
      }
      return (
          <div>
              <Menu  as="div" className="inline-block text-left">
                  <div>
                      <Menu.Button ref={buttonARef} className="link flex items-center gap-[2px] ">
                          <CgMenuGridR size={24}/>
                          <p className=" hidden sm:block">Tools</p>
  
                      </Menu.Button>
                      
                  </div>
                  <Menu.Items  className="absolute right-0 top-[56px] bg-white w-full border z-20">
                      <div className=" p-6">
                          <div onClick={handleButtonClickB}className="max-w-7xl mx-auto ">
                              <Tools />
                          </div>
                      </div>
                  </Menu.Items>
              </Menu>
          </div>
      )
  }

[go2garret]

To prevent the click action from closing the dropdown, as others have suggested, you can apply a preventDefault() on the MenuItem click event. In Vue, I apply the @click.prevent directly to the MenuItem as follows:

<Menu as="div" class="relative inline-block text-left">
  <MenuItems class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
    <MenuItem v-slot="{ active }" @click.prevent>
      <div class="px-3 bg-slate-200 py-2 rounded-t-lg" role="none">
        Here, you can click.
      </div>
    </MenuItem>
  </MenuItems>
</Menu>