Calendar: The date cannot be selected from the first click in the opened popup

[safronov-dmitrii]

Describe the bug

The date cannot be selected from the first click in the opened popup. You have to double-click on the date in the opened calendar to display the selected date in the input.

It is important that the popup is opened by clicking on the input field. If the popup is opened via icon, then the problem is not reproduced.

The bug cannot be reproduced in version 9.5.0.

Reproducer

https://stackblitz.com/edit/react-w6bsse

PrimeReact version

9.6.0

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Click on the input field (not on the icon button) to open the calendar;
2. Click on any date.

Expected behavior

The date can be selected in the calendar with a single mouse click.

[melloware]

I updated your ticket with a reproducer.

[djapal]

Why was this fix not included in 9.6.1? How much time will version 10 take to be released?

[melloware]

From PrimeTek: " 9.6.1 just includes our PRO support fixes that's why we didn't apply other PRs"

[melloware]

Fixed in 9.6.2 if you want to give it a try

[maitrungduc1410]

Hi @melloware

I'm using 9.6.2 and this issue is still there, I need to click twice to select date.

Reproducer: https://codesandbox.io/p/sandbox/hardcore-hooks-rvkpxr

[melloware]

@maitrungduc1410 it looks like Vite is processing faster or differently than Create React App but I am pretty sure this is fixed for 10.0.0

[joseanfernandez]

@maitrungduc1410 I also have the same problem with version 9.6.2, for now I have solved it like this:

      <Calendar
        onFocus={handleCalendarFocus}
        ...
        />

const handleCalendarFocus = () => {
   setTimeout(() => {
     const datePickerCollection =
       document.getElementsByClassName('p-datepicker');
     if (datePickerCollection.length) {
       const datePicker = datePickerCollection.item(0) as HTMLDivElement;
       datePicker.setAttribute('tabindex', '0');
       datePicker.focus();
     }
   }, 500);
 };

[maitrungduc1410]

@melloware, Somehow I'm still facing same issue in my NextJS project (next 13.4.12 and PrimeReact 9.6.2), it's hard to tell what's going on

The example is this, this Sandbox works: https://codesandbox.io/p/sandbox/beautiful-sky-6gf553

In my production code, I copy exactly same as above example, but it doesn't work:

as you can see, everytime I select a date, the overlay is closed, and I have to click again.

Weird, exactly same code as the Sandbox (both are NextJS, same version of all packages: next, primereact...)

I think I should wait for primereact v10 and try again

[melloware]

Yes I am pretty sure this is fixed in V10 because I am testing using NextJS and the showcase right now and the Calendar seems to be working fine in 10.0.0. Let me know when 10.0.0 comes out if it is still not working.

[pedrofg]

Version 10.6.3 still has this same problem :/ so silly, the workaround mentioned by @joseanfernandez works

[sevastosm]

Version 10.6.3 still has this same problem , the workaround mentioned by @joseanfernandez not working if you use mask or type the date on input, it triggers focus on panel and is not possible to write.

[MarcoCPinho]

Version 10.7 with Vite still happens. I have the problem that @sevastosm said, can't use workaround because I need a mask and input type available =/. Downgraded back to 9.6.3 and works just fine. PS: I'm using calendar inside an Datatable, with "cell" edit mode, rendering the Calender inside the "editor" prop.

[F4ssi]

Using this in Version 10.8.0 with Vite and still have the same issue. Similar Problem as @MarcoCPinho can't use the workaround because we need to use a mask and the input field. Can use the workaround with the onShow instead of the onFocus though, but still not very nice behaviour of the component then.

[lekhnath]

Now the calendar popup does not close on first time click outside.

[melloware]

In 10.9.1 here it is working in both CRA and Vite:

CRA: https://stackblitz.com/edit/react-w6bsse?file=package.json

Vite: https://stackblitz.com/edit/hwr9uvkw?file=src%2FApp.jsx