React-Datepicker 7.6.0版本中日期选择器关闭后自动重新打开的焦点问题分析

问题现象

在React-Datepicker 7.6.0版本中，当开发者使用受控模式(controlled mode)管理日期选择器的打开状态时，会出现一个意外的行为：在选择日期并关闭选择器后，输入框会自动重新获得焦点，导致日期选择器再次弹出。这个问题严重影响了用户体验，特别是在需要精确控制组件行为的场景下。

问题复现

通过以下代码可以复现该问题：

import "react-datepicker/dist/react-datepicker.css";
import ReactDatePicker from "react-datepicker";
import { useState } from "react";

export const DatePickerExample = () => {
  const [open, setOpen] = useState(false);

  return (
    <ReactDatePicker
      open={open}
      preventOpenOnFocus
      shouldCloseOnSelect
      onCalendarOpen={() => setOpen(true)}
      onCalendarClose={() => setOpen(false)}
      onFocus={() => setOpen(true)}
    />
  );
};

当用户点击输入框打开日期选择器，然后选择一个日期后，选择器会先关闭，但随后输入框会自动获得焦点，触发onFocus事件，导致选择器再次打开。

技术分析

这个问题源于7.6.0版本中对焦点管理的改动。在之前的版本中，日期选择器关闭后不会自动将焦点返回到输入框。但在7.6.0版本中，关闭逻辑包含了将焦点返回到输入框的操作，这在与受控模式结合使用时产生了冲突。

具体来说，流程如下：

1. 用户点击输入框触发onFocus，设置open为true
2. 日期选择器打开
3. 用户选择日期，触发关闭
4. 关闭过程中，组件内部将焦点返回到输入框
5. 焦点事件再次触发onFocus，重新打开日期选择器

临时解决方案

开发者可以暂时使用以下解决方案，通过记录最近关闭时间来判断是否忽略焦点事件：

import { useRef, useState } from "react";

export const DatePickerFix = () => {
  const [open, setOpen] = useState(false);
  const mostRecentlyClosed = useRef<Date | null>(null);

  return (
    <ReactDatePicker
      open={open}
      preventOpenOnFocus
      shouldCloseOnSelect
      onCalendarOpen={() => setOpen(true)}
      onCalendarClose={() => {
        mostRecentlyClosed.current = new Date();
        setOpen(false);
      }}
      onFocus={() => {
        if (mostRecentlyClosed.current && 
            Date.now() - mostRecentlyClosed.current.getTime() < 100) {
          return;
        }
        setOpen(true);
      }}
    />
  );
};

根本解决方案

这个问题已经在后续版本中得到修复。修复方案主要调整了焦点管理逻辑，确保在受控模式下不会产生焦点冲突。开发者可以升级到最新版本来解决这个问题。

最佳实践建议

1. 在使用受控组件时，确保理解所有可能触发状态变化的事件
2. 对于焦点敏感的操作，考虑添加防抖或节流逻辑
3. 定期检查依赖库的更新日志，了解行为变更
4. 在复杂交互场景下，充分测试各种边界条件

这个问题提醒我们，在使用第三方UI组件库时，特别是那些提供受控和非受控两种模式的组件，需要特别注意版本升级可能带来的行为变化。理解组件内部的状态管理机制对于构建稳定的用户界面至关重要。