How disable outside click event On Menu

[kobe651jp]

My use case requires the menu to remain open until the operation is complete. With the menu open, it is necessary to interact with screens other than the menu.

The same thing can be done for Dialog by manipulating onClose, but is it possible to control at the Menu level?

I'm trying to use preventDefault()...,but seems not working.

            <Menu as="div" className="inline-block text-left" key={`ClipCard:menu:${section.id}`}>
              {({open,close}) =>(
                <>
                  <div
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                    }}
                  >

In Menu.Items use static props.not working.

                    <Menu.Items className="..."
                      static
                    >
                      <Menu.Item>
                      {({ active }) => (

[kobe651jp]

It can be controlled by using Transition.

As following.

                  <Transition
                    as={Fragment}
                    show={menuOpen}
                    enter="transition ease-out duration-100"
                    enterFrom="transform opacity-0 scale-95"
                    enterTo="transform opacity-100 scale-100"
                    leave="transition ease-in duration-75"
                    leaveFrom="transform opacity-100 scale-100"
                    leaveTo="transform opacity-0 scale-95"
                  >