Calendar: I double-click outside to close the calendar after selecting the range.

[KumJungMin]

Describe the bug

I selected a range on the calendar and the calendar will automatically close.
In this state, open the calendar again.
And In order to close the calendar, i tried to click outside the calendar once.

However, contrary to expectations, i need to double-click to close the calendar.
This issue occurs only once after selecting a range on the calendar.

2024-07-24.9.18.54.mov

Reproducer

https://stackblitz.com/run?file=src%2FApp.jsx

PrimeReact version

master

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

1. Select a range on the calendar. The calendar window will automatically close.
2. Then, open the calendar again.
3. To close the calendar, click outside of the calendar, but it will not close. In this case, double-clicking outside the calendar will close it.
4. This issue occurs only once after selecting a range.

Expected behavior

Assume that a range has been selected on the calendar.
Then, when you open the calendar again and click outside of it, the calendar should be close immediately.

[lkuich]

@melloware I'm still seeing this issue as of 10.7.1, and it looks like it was introduced as of 10.5.1:

<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" hideOnRangeSelection={false} />

1. Click the Calendar
2. Select a range
3. Click outside of the Calendar, and observe it doesn't close
4. Click outside of the Calendar again and observe it does close

I was able to get around this by reverting to 10.5.0. I suspected it was to do with this change, but can't see why that would be an issue: #5971

[melloware]

@KumJungMin care to investigate?

[KumJungMin]

@KumJungMin care to investigate?

---

Sure, I’m interested in looking into it :) (I will check it by October 14th at the latest.)

[KumJungMin]

First of all, Thank you for re-verifying the bug and my code doesn't work as you expected.
I didn't test the case properly. This is my mistake :(
I will be more mindful in my work moving forward.
(I will request a PR to delete my code)

Why the Issue Occurred in v10.5.2?

• I checked versions v10.5.0, v10.5.1, and v10.5.2 to investigate the root cause of the issue.
• As a result, I found that the double-click issue in the calendar was introduced by this change.
• If you remove type: 'mousedown', the calendar will close on the first click.

Problematic code snippet (Calendar.js)

The Issue Resolved?

• Additionally, I checked "Calendar double click issue" on the master(maybe v10.8.4) branch.
• After another PR was merged into the master branch,
• As a result, the issue does not occur in v10.8.4 :)

Related code snippet (Calendar.js)

If I misunderstood something or if you have further questions, feel free to leave a comment! :) @lkuich

[lkuich]

I can confirm this is now working for us as of v10.8.4, appreciate your detailed response and diligent work @KumJungMin! ❤️

[lkuich]

@KumJungMin I think there was a side-effect of this change, in our project we use the headerTemplate to have a year dropdown. Now, as of 10.8.4, when selecting an item from a dropdown in the headerTemplate, it causes the calendar to close.

Here's a working example on Stackblitz: https://stackblitz.com/edit/vitejs-vite-d6qwad?file=src%2FApp.tsx

Let me know if I should raise this as a separate issue!

[melloware]

@lkuich yes please open a new issue with your reproducer.