React MUI Tooltip聚焦时点击弹出层消失：如何阻止该行为

问题原因 #

MUI Tooltip的默认逻辑中，当触发按钮/图标处于聚焦状态时，点击弹出层（Popper）会导致触发元素失去焦点（触发blur事件），而Tooltip会监听这个blur事件来关闭提示框——这就是你遇到的核心问题。

解决方案 #

以下两种方法可以从根源解决问题，替代leaveDelay这类临时方案：

方法一：拦截特定场景的关闭事件

通过自定义onClose回调，判断关闭原因是否为点击弹出层导致的blur，拦截该场景下的关闭操作。

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

const PersistentTooltip = ({ children, ...props }) => {
  const handleClose = (event, reason) => {
    // 当关闭原因为blur，且点击目标是Tooltip弹出层时，阻止关闭
    if (reason === 'blur' && event?.target?.closest('.MuiTooltip-popper')) {
      return;
    }
    // 其他场景正常执行原关闭逻辑
    props.onClose?.(event, reason);
  };

  return (
    <Tooltip
      {...props}
      onClose={handleClose}
      // 确保弹出层能接收点击事件
      PopperProps={{
        popperOptions: {
          modifiers: [
            {
              name: 'eventListeners',
              options: { click: true },
            },
          ],
        },
      }}
    >
      {children}
    </Tooltip>
  );
};

// 使用示例
export default function App() {
  return (
    <PersistentTooltip title="点击我不会消失">
      <Button variant="contained">聚焦后点击提示框</Button>
    </PersistentTooltip>
  );
}

方法二：阻止事件冒泡并管理焦点

让弹出层可接收焦点，点击时阻止事件冒泡到触发元素，避免触发元素失去焦点。

import Tooltip from '@mui/material/Tooltip';
import Button from '@mui/material/Button';

const PersistentTooltip = ({ children, ...props }) => {
  return (
    <Tooltip
      {...props}
      PopperProps={{
        sx: {
          '& .MuiTooltip-tooltip': {
            tabIndex: 0, // 为提示框设置可聚焦属性
          },
        },
        onMouseDown: (event) => {
          // 阻止事件冒泡，避免触发元素失去焦点
          event.stopPropagation();
          // 聚焦到提示框，确保焦点不会回到触发元素外的区域
          event.currentTarget.querySelector('.MuiTooltip-tooltip')?.focus();
        },
      }}
    >
      {children}
    </Tooltip>
  );
};

// 使用示例
export default function App() {
  return (
    <PersistentTooltip title="点击我不会消失">
      <Button variant="contained">聚焦后点击提示框</Button>
    </PersistentTooltip>
  );
}

原理说明 #

• 方法一直接从Tooltip的关闭逻辑入手，精准拦截不需要的关闭触发条件，逻辑清晰且不影响其他交互。
• 方法二通过焦点管理和事件冒泡控制，避免触发元素的blur事件被触发，从根源切断Tooltip关闭的触发源。

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