Inner Dialog Closes when a Menu Item is clicked from a Menu(Dropdown) React

[arunavo4]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.1

What browser are you using?

Chrome

Reproduction URL

A public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways. Unfortunately we can't provide support without a reproduction, and your issue will be closed with no comment if this is not provided.

Describe your issue

When we use Menu Dropdown with an inner Dialog which is triggered when a menu item is clicked then both of them closes.

Describe the problem you're seeing, any important steps to reproduce and what behavior you expect instead.

[arunavo4]

import { Menu } from '@headlessui/react'

function MyDropdown() {
  return (
    <Menu>
      {({ open }) => (
        <>
          <Menu.Button>More</Menu.Button>
          {open && (
            <div>
              {/*
                Using `static`, `Menu.Items` is always rendered and
                ignores the `open` state.
              */}
              <Menu.Items static>
                <MyMenuItem></MyMenuItem>
                {/* ... */}
              </Menu.Items>
            </div>
          )}
        </>
      )}
    </Menu>
  )
}

export default function MyMenuItem() {
  const [isOpen, setIsOpen] = useState(false);

return (
<Menu.Item>
      {({ active }) => (
      <button onClick={() => { setIsOpen(true) }}> {/* ... */}</button>

      <Transition appear show={isOpen} as={Fragment}>
            <Dialog as="div" className="relative z-20" onClose={() => setIsOpen(false)}>
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0"
                enterTo="opacity-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100"
                leaveTo="opacity-0"
              >
               {/* ... */}
              </Transition.Child>
.......

[RobinMalfait]

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

Once you click a Menu.Item, the Menu will close. This means that it will also close the actual Dialog since it is rendered inside the Menu.Item.

If you don't want that, I would recommend to move the Dialog outside of the Menu.Item, but open it by setting the open state from the Menu.Item.

[arunavo4]

Thanks, Moving it outside the Menu worked.