如果 keepfocus 设置为 false，则 react-day-picker 不会关闭

Question

我试图简单地实现 react-day-picker。但是我在尝试关闭 DayPicker 容器时发现了一个问题，当它从 DayPickerInput 触发并且属性 keepFocus 设置为 false.

<DayPickerInput
    keepFocus={false}
    placeholder="DD/MM/YYYY"
    format="DD/MM/YYYY"
/>

这是代码框：https://codesandbox.io/s/0mn32ryl0n

如果您在输入内部单击，日期选择器叠加层会正确显示，如果您在叠加层的空白区域中单击，则叠加层会获得焦点，并且会一直聚焦到 select 一天，否则它不会被关闭。因此，如果您单击叠加层之外的区域，它不会自动关闭。

问题是，这是预期的行为还是我遗漏了什么。如果某天未 selected 并且叠加层已聚焦，我如何关闭 DayPicker？

Answer 1

我最终做了这样的事情，

let dayPickerInputRef = null;
function Example() {
  return (
    <div name="main-container">
      <h3>DayPickerInput</h3>
      <DayPickerInput
        ref={ref => (dayPickerInputRef = ref)}
        keepFocus={false}
        placeholder="DD/MM/YYYY"
        format="DD/MM/YYYY" 
        dayPickerProps = {{
          onBlur: () => {
            setTimeout(() => {
              const elClicked = document.activeElement,
                container = document.getElementsByName(`main-container`);
              if (container && !container[0].contains(elClicked)) {
                dayPickerInputRef.hideDayPicker();
              }
            }, 1);
          }
        }}
      />
    </div>
  );
}

如果 keepfocus 设置为 false，则 react-day-picker 不会关闭

react-day-picker doesn't close if keepfocus is set to false

javascript

react-day-picker