react-day-picker设置keepFocus=false时弹窗无法关闭的问题咨询

嘿，这个问题我之前也碰到过，咱们来一步步解决它～

首先明确：这不是预期行为，是keepFocus={false}配置下的一个交互bug。当你点击弹窗空白区域时，焦点意外转移到了DayPicker容器上，导致组件原本的「点击外部/输入框失焦关闭弹窗」逻辑失效——因为焦点还在弹窗内部；同时你没选择日期，也不会触发选择后的自动关闭，就卡在这了。

下面给你两种可行的解决方案：

方案一：手动监听外部点击事件关闭弹窗 #

利用组件提供的实例方法和DOM监听，判断点击区域是否在弹窗或输入框外，主动关闭弹窗：

import { useRef, useEffect } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

function App() {
  const dayPickerInputRef = useRef(null);
  const dayPickerContainerRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (e) => {
      const dayPickerInstance = dayPickerInputRef.current?.getDayPicker();
      const isClickInsidePicker = dayPickerContainerRef.current?.contains(e.target);
      const isClickInsideInput = dayPickerInputRef.current?.contains(e.target);

      // 弹窗处于打开状态，且点击区域不在输入框和选择器内时，关闭弹窗
      if (dayPickerInstance?.isOpen && !isClickInsidePicker && !isClickInsideInput) {
        dayPickerInputRef.current.hideDayPicker();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return (
    <div className="App">
      <DayPickerInput
        ref={dayPickerInputRef}
        keepFocus={false}
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY"
        onDayPickerShow={() => {
          // 弹窗显示时，获取选择器容器的DOM节点
          dayPickerContainerRef.current = document.querySelector('.DayPicker-Month');
        }}
      />
    </div>
  );
}

export default App;

方案二：阻止弹窗获取焦点（更简单） #

直接修改DayPicker的鼠标事件，阻止空白区域获取焦点，或者把焦点移回输入框，这样失焦逻辑就能正常触发：

import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';

function App() {
  return (
    <div className="App">
      <DayPickerInput
        keepFocus={false}
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY"
        dayPickerProps={{
          onMouseDown: (e) => {
            // 阻止选择器容器获取焦点，避免焦点脱离输入框
            e.preventDefault();
            // 可选：把焦点强制移回输入框，确保失焦逻辑正常
            const inputElement = e.target.closest('.DayPickerInput').querySelector('input');
            if (inputElement) inputElement.focus();
          }
        }}
      />
    </div>
  );
}

export default App;

额外提示 #

如果你的react-day-picker版本比较旧，可以尝试升级到最新稳定版——这个焦点相关的bug在后续版本中可能已经被官方修复了。

内容的提问来源于stack exchange，提问作者Matt H.