解决MUI Tooltip内嵌日期选择器Popper点击后闪烁问题

问题根源 #

你遇到的闪烁问题核心是状态更新引发的重复重渲染冲突：选择日期后，CustomDatePicker的onClose会触发isDatePickerOpen状态变更，导致MenuDateTooltipFilter组件重渲染；同时日期选择器自身的Popper关闭逻辑也在执行，两次重渲染叠加就出现了闪烁效果。另外，依赖状态的useOutsideClick钩子会频繁重新绑定事件监听，进一步加剧了渲染冲突。

解决方案 #

1. 用Ref替代State跟踪日期选择器的打开状态

State更新会触发组件重渲染，而Ref的更新不会。把isDatePickerOpen从React State换成useRef，避免不必要的组件重渲染：

import { useRef, useState } from 'react';
import Tooltip from '@mui/material/Tooltip';

const MenuDateTooltipFilter = () => {
  const [tooltipOpen, setTooltipOpen] = useState(false);
  // 用ref替代state跟踪日期选择器状态
  const isDatePickerOpen = useRef(false);

  // 绑定CustomDatePicker的打开/关闭事件
  const handleDatePickerOpen = () => {
    isDatePickerOpen.current = true;
  };

  const handleDatePickerClose = () => {
    isDatePickerOpen.current = false;
  };

  return (
    <Tooltip open={tooltipOpen} anchorEl={/* 你的锚点元素 */}>
      {/* 起始日期选择器 */}
      <CustomDatePicker
        onOpen={handleDatePickerOpen}
        onClose={handleDatePickerClose}
        onChange={(value) => {/* 处理起始日期变更逻辑 */}}
      />
      {/* 结束日期选择器 */}
      <CustomDatePicker
        onOpen={handleDatePickerOpen}
        onClose={handleDatePickerClose}
        onChange={(value) => {/* 处理结束日期变更逻辑 */}}
      />
      {/* 按钮区域 */}
      <button onClick={() => {/* 清除筛选逻辑 */}}>清除筛选</button>
      <button onClick={() => {
        /* 应用筛选逻辑 */
        setTooltipOpen(false);
      }}>应用筛选</button>
    </Tooltip>
  );
};

2. 调整useOutsideClick钩子的触发逻辑

修改钩子内部的判断条件，直接读取Ref的值而非依赖State，避免钩子因State更新频繁重新绑定事件：

import { useEffect } from 'react';

const useOutsideClick = (ref, callback) => {
  useEffect(() => {
    const handleClickOutside = (event) => {
      // 直接读取ref.current判断日期选择器是否打开
      if (ref.current && !ref.current.contains(event.target) && !isDatePickerOpen.current) {
        callback();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
    // 依赖项只保留ref，避免因isDatePickerOpen变更重复执行
  }, [ref]);
};

3. 优化日期选择后的关闭逻辑

在CustomDatePicker的onChange事件中直接处理日期更新，无需依赖onClose触发额外状态变更，确保日期选择器的关闭逻辑完全由自身控制：

<CustomDatePicker
  onOpen={handleDatePickerOpen}
  onClose={handleDatePickerClose}
  onChange={(newValue) => {
    // 立即更新筛选日期
    setStartDate(newValue);
    // MUI DatePicker会自动关闭Popper，无需手动触发
  }}
/>

额外注意事项 #

• 检查CustomDatePicker内部是否存在强制重渲染的逻辑（比如多余的State更新），确保封装的日期选择器只在必要时重渲染。
• 点击“应用筛选”或“清除筛选”按钮时，手动关闭Tooltip的同时，无需额外处理日期选择器的状态，让其自行管理Popper的显示/隐藏。

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