Calendar requires two `Escape` key presses to close

[HugoLiconV]

Describe the bug
When using react-datepicker, the Escape key must be pressed twice to close the calendar. The first press removes focus from the input and passes it to the calendar. Only after a second Escape press does the calendar close.

To Reproduce
Steps to reproduce the behavior:

1. Go to a page with react-datepicker rendered.
2. Click on the input field to open the calendar.
3. Press Escape.
4. Observe that the calendar remains open.
5. Press Escape again.
6. Calendar finally closes.

Expected behavior
The calendar should close on the first Escape key press.

Screenshots
N/A

Desktop (please complete the following information):

• OS: MacOS 15.3.2
• Browser: Chrome
• Version: 133.0.6943.54

Smartphone (please complete the following information):
N/A

Additional context
I tried managing the open state manually and even intercepting the keydown event on the input field with no success. Codesandbox

[balajis-qb]

I'll work on this

[HugoLiconV]

Hi @balajis-qb, is there any update on this issue?
I spent some time on it and was able to fix the behavior. The only drawback is that now the calendar closes when the document is hidden. I haven’t spent much time yet looking into whether this can be fixed or if it’s a drawback we’ll need to accept.

Here’s a quick snippet of the solution, let me know what you think!

export default class DatePicker extends Component<

// ...

+ blurTriggeredByArrowKeys: boolean = false;

// ...

  handleBlur = (event: React.FocusEvent<HTMLElement>) => {
    if (!this.state.open || this.props.withPortal || this.props.showTimeInput) {
      this.props.onBlur?.(event);
    }

    if (this.state.open && this.props.open === false) {
      this.setOpen(false);
    }
+   if(this.blurTriggeredByArrowKeys) {
+     this.blurTriggeredByArrowKeys = false
+     this.setState({ focused: false })
    } else { 
+     this.setOpen(false)
+     this.sendFocusBackToInput()
+   }    
-   this.setState({ focused: false });
  };

// ...

  onInputKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {

    // ...

    if (this.state.open) {
      if (eventKey === KeyType.ArrowDown || eventKey === KeyType.ArrowUp) {
        event.preventDefault();
        const selectorString = this.props.showTimeSelectOnly
          ? ".react-datepicker__time-list-item[tabindex='0']"
          : this.props.showWeekPicker && this.props.showWeekNumbers
            ? '.react-datepicker__week-number[tabindex="0"]'
            : this.props.showFullMonthYearPicker ||
                this.props.showMonthYearPicker
              ? '.react-datepicker__month-text[tabindex="0"]'
              : '.react-datepicker__day[tabindex="0"]';
        const selectedItem =
          this.calendar?.containerRef.current instanceof Element &&
          this.calendar.containerRef.current.querySelector(selectorString);
+       this.blurTriggeredByArrowKeys = true
        selectedItem instanceof HTMLElement &&
          selectedItem.focus({ preventScroll: true });

        return;
      }

    // ...

  }

[balajis-qb]

Hi @HugoLiconV

Sorry for the delay. I already fixed the issue in my local, I will raise a PR by tomorrow or by Monday.

Thank you.