Focus behaviour after closing changed after 7.6.0

[danilofuchs]

Describe the bug
7.6.0 calendar is refocusing on the input after selecting a date and closing, leading to the calendar to reopen, when using a controlled open:

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

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

  return (
    <ReactDatePickerNew
      open={open}
      preventOpenOnFocus // We control the state
      shouldCloseOnSelect // We control the state
      onCalendarOpen={() => {
        console.log("OPEN [7.6.0]");
        setOpen(true);
      }}
      onCalendarClose={() => {
        console.log("CLOSE [7.6.0]");
        setOpen(false);
      }}
      onFocus={() => {
        console.log("FOCUS [7.6.0]");
        setOpen(true);
      }}
    />
  );
};

To Reproduce

Clone https://github.com/danilofuchs/datepicker-repro/tree/bee52cff440319b71683f327af91bef1b3b1678e

Steps to reproduce the behavior:

1. Click on the input
2. Select a date

Expected behavior
The input should close

(Check logs for the number of onFocus events)

Actual behavior
The input closes than immediately opens again because of the focus

(Check logs for the number of onFocus events)

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Pop_OS 22.04
• Browser Chrome
• Version 132

Additional Context

Maybe related to #5179

[danilofuchs]

A dirty patch I'm considering applying:

import "react-datepicker-new/dist/react-datepicker.css";
import ReactDatePickerNew from "react-datepicker-new";
import { useRef, useState } from "react";

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

  const mostRecentlyClosed = useRef<Date | null>(null);

  return (
    <ReactDatePickerNew
      open={open}
      preventOpenOnFocus // We control the state
      shouldCloseOnSelect // We control the state
      onCalendarOpen={() => {
        console.log("OPEN [7.6.0]");
        setOpen(true);
      }}
      onCalendarClose={() => {
        mostRecentlyClosed.current = new Date();
        console.log("CLOSE [7.6.0]");
        setOpen(false);
      }}
      onFocus={() => {
        if (
          mostRecentlyClosed.current &&
          mostRecentlyClosed.current.valueOf() - new Date().valueOf() < 100
        ) {
          console.log("FOCUS [7.6.0] - Ignored");
          return;
        }
        console.log("FOCUS [7.6.0]");
        setOpen(true);
      }}
    />
  );
};

[taochu]

Same

[balajis-qb]

I'll look into this issue

[danilofuchs]

Thanks!!