🐛 Add missing datepicker close call onPopperKeyDown event - to handle ESC keydown event outside the day component

[balajis-qb]

Description

Linked issue: #5520

Problem
As mentioned in the linked issue, the datepicker needs 2 esc key press to close. This is not happening always. If the control is there in any days, then one ESC key itself is closing the date picker. But if it's there in the DatePicker header (For E.g., Previous or Next month navigation button), then the first ESC key will just move the focus back to the DatePicker Input and then second Esc key only will close the DatePicker.

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 and click back and next navigate button for more than one times.
3. Press Escape.
4. Observe that the calendar remains open (It just moves the focus to the input).
5. Press Escape again.
6. Calendar finally closes.

Changes

• Added the missing handleClose call to the onPopperKeyDown event handler
  

Contribution checklist

• I have followed the contributing guidelines.
• I have added sufficient test coverage for my changes.
• I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.99%. Comparing base (6f0da37) to head (0661e58).
Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5621   +/-   ##
=======================================
  Coverage   96.98%   96.99%           
=======================================
  Files          30       30           
  Lines        3355     3356    +1     
  Branches     1416     1420    +4     
=======================================
+ Hits         3254     3255    +1     
+ Misses        101       99    -2     
- Partials        0        2    +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[HugoLiconV]

Hi @balajis-qb Thank you so much for the fix and your time. I tested your changes, and the behavior continues: I must press Esc twice to close the calendar. Let me share a screen recording where you can see the behavior and the keys I'm pressing.

Screen.Recording.2025-05-19.at.1.13.15.p.m.mov

Could you please let me know if that's the intended behavior?

Again, thank you for your time

[balajis-qb]

Hi @HugoLiconV ,

Are you using the latest version of the package? Because previously also I can able to reproduce the issue only when the header arrows are focused (I added the steps to reproduce). I fixed that and now I couldn't able to reproduce the issue.

If this issue is coming for any specific case, please share your example code.

[SaiBalaji202]

react-datepicker-issue.mp4

Just sharing the screenrecording I tried. I couldn't able to reproduce.

[HugoLiconV]

Hi again, @balajis-qb. Yes, I updated my local branch and ensured your changes were there. I think the problem is that we're following different steps. Here's how you can reproduce it:

Note

You don't need any specific setup. You can reproduce it using the default example in https://reactdatepicker.com/

1. Click on the input field to open the calendar (Don't press any key)
2. The focus will be on the Input Field
3. Press Escape.
4. Observe that the calendar remains open, but the focus moves to the Date Picker
5. Press Escape again.
6. Calendar finally closes.

Please let me know if you can replicate it with these steps.
Thanks

[HugoLiconV]

Hi @balajis-qb, just wanted to ask if you were able to reproduce the issue

[balajis-qb]

Hi @HugoLiconV , I couldn't reproduce the issue. I attached a screen-recording I tried in the previous comments.