onBlur is getting triggered when date is selected

Question

I am using controlled datepicker with a flag open that could be used to open or close the date picker. onBlur is getting triggered when clicked outside, resulting it to close. But when I am trying to select the range, it is not letting me, instead it closes.

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={() => setOpen(true)}
      className="custom-datepicker"
      dropdownClassName="custom-datepicker-dropdown"
      separator={<>-</>}
      format="DD.MM.YYYY HH:mm:ss"
      onBlur={() => setOpen(false)}
      onChange={(date) => setPickerValue([date[0], date[1]])}
      value={pickerValue}
    />
  );
}

Sandbox: https://codesandbox.io/s/ant-rangepicker-6gmz85?file=/src/Working.tsx:0-585

Answer 1

You can add a handler to avoid unwanted actions onBlur.

const handleOnBlur = () => {
  if(condition is met) {
    setOpen(false)
  }
}

...
<RangePicker
      open={open}
      onOpenChange={() => setOpen(true)}
      className="custom-datepicker"
      dropdownClassName="custom-datepicker-dropdown"
      separator={<>-</>}
      format="DD.MM.YYYY HH:mm:ss"
      onBlur={handleOnBlur}
    />