Ant Design RangePicker选择日期时onBlur触发致弹窗关闭问题

问题根源 #

使用受控open状态时，点击日期面板会触发输入框的onBlur事件，手动将open设为false，导致面板直接关闭，无法完成日期选择。

修复方案 #

Ant Design 的 RangePicker 内部已内置点击外部关闭面板的逻辑，无需通过onBlur手动控制open状态，只需正确使用onOpenChange回调接收状态参数即可：

import React, { useState } from "react";
import "./styles.scss";
import { DatePicker } from "antd";
import "antd/dist/antd.css";

const { RangePicker } = DatePicker;

export default function Working() {
  const [pickerValue, setPickerValue] = useState(null);
  const [open, setOpen] = useState(false);

  return (
    <RangePicker
      open={open}
      // 通过onOpenChange的参数控制open状态
      onOpenChange={(isOpen) => setOpen(isOpen)}
      className="custom-datepicker"
      dropdownClassName="custom-datepicker-dropdown"
      separator={<>-</>}
      format="DD.MM.YYYY HH:mm:ss"
      onChange={(date) => setPickerValue([date[0], date[1]])}
      value={pickerValue}
    />
  );
}

关键说明 #

• 移除onBlur={() => setOpen(false)}，避免点击面板时误触发关闭逻辑。
• onOpenChange会自动接收面板的开闭状态（isOpen布尔值），组件内部会处理点击输入框、面板外部、选择日期后的状态切换，保证交互逻辑正常。

自定义模糊逻辑的兼容方案 #

如果必须保留onBlur做其他操作，可通过判断焦点是否在面板内来避免误关：

const handleBlur = () => {
  setTimeout(() => {
    const panel = document.querySelector(".custom-datepicker-dropdown");
    if (!panel?.contains(document.activeElement)) {
      setOpen(false);
    }
  }, 100);
};

// 在RangePicker上添加onBlur={handleBlur}

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