如何解决Tailwind下拉菜单中打开Headless Dialog闪退问题？

问题背景 #

使用Tailwind CSS和React版Headless UI组件时，点击下拉菜单项中的Dialog按钮，Dialog会闪一下就消失。核心原因是：点击Menu.Item时，Headless UI会自动触发菜单关闭逻辑，事件冒泡或默认行为干扰了Dialog的显示状态。

解决方案 #

以下两种方法都能解决该问题，选择适合你的实现方式：

方法一：在Dialog的打开函数中阻止事件传播

修改Dialog组件的打开逻辑，通过event.stopPropagation()阻止事件向上冒泡到Menu.Item，避免触发菜单关闭：

import { useState } from 'react';
import { Transition, Dialog } from '@headlessui/react';

const DialogComponent = ({ buttonStyle }: any) => {
  const [isOpen, setIsOpen] = useState(false);

  const open = (event: React.MouseEvent) => {
    // 阻止事件冒泡，避免触发菜单关闭
    event.stopPropagation();
    setIsOpen(true);
  };
  const close = () => setIsOpen(false);

  return (
    <>
      <button className={buttonStyle} onClick={open}>
        <b>👉 Click me 👈</b>
      </button>
      <Transition.Root show={isOpen}>
        <Dialog as="div" className="Dialog" onClose={close}>
          <div className="fixed inset-0 z-10 flex min-h-full justify-center p-4 items-center">
            <Dialog.Panel className="w-full max-w-lg p-6 rounded bg-white space-y-2">
              <p className="text-4xl">🥳</p>
              <p>I am a dialog and you can see me.</p>
              <div className="text-right">
                <button className="button" onClick={close}>OK</button>
              </div>
            </Dialog.Panel>
          </div>
        </Dialog>
      </Transition.Root>
    </>
  );
};

方法二：给Menu.Item添加点击事件阻止默认行为

在渲染Menu.Item时，判断当前项是否为Dialog组件，若是则调用event.preventDefault()阻止菜单关闭的默认行为：

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

// 注意：这里将Dialog组件单独定义，避免直接在数组中写JSX
const menuItems = ['One', 'Two', 'Three', <DialogComponent key="dialog" />, 'Four'];

// 菜单渲染部分
<Menu as="div" className="relative inline-block text-left">
  <Menu.Button className="button">Menu</Menu.Button>
  <Menu.Items className="absolute mt-2 w-56 border divide-y rounded bg-white">
    {menuItems.map((item, i) => (
      <Menu.Item 
        key={i}
        onClick={(event) => {
          // 仅对Dialog项阻止默认行为
          if (React.isValidElement(item)) {
            event.preventDefault();
          }
        }}
      >
        {({ active }) => (
          <span
            className={cx({
              'block cursor-pointer px-4 py-2': true,
              'bg-gray-100 text-gray-900': active,
            })}
            children={item}
          />
        )}
      </Menu.Item>
    ))}
  </Menu.Items>
</Menu>

原理说明 #

Headless UI的Menu.Item组件默认绑定了点击关闭菜单的逻辑。当点击菜单项内的Dialog按钮时，事件会向上传播到Menu.Item，触发菜单关闭。此时Dialog刚被设置为显示状态，菜单关闭引发的组件更新或事件连锁反应会导致Dialog的显示状态被意外重置，最终出现"闪一下就消失"的现象。通过阻止事件传播或默认行为，就能切断这个连锁反应，让Dialog正常显示。

内容的提问来源于stack exchange，提问作者Herb Caudill