Calendar doesn't close when selecting a date

[Master_T]

Hello everyone

I'm using the Calendar component like this:

Code: Select all

<Calendar className="inputfield w-full" value={myData as Date} onChange={(e) => myData = e.value as Date} />

However, while the date gets set correctly when a date is clicked, the calendar popup doesn't close.
I don't understand why, since on the examples page here:
https://primefaces.org/primereact/calendar/
the calendar popup DOES close when selecting a date.

Am I missing something? Is there some workaround I can use to manually close the popup?

[mcandu]

Hi,

Could you please create codesandbox example that we can see the issue ?

[Master_T]

Hi,

Could you please create codesandbox example that we can see the issue ?

I've been trying to reproduce it for the last half hour, but unfortunately it works correctly codesandbox, while it doesn't in my app
Is there a way to manually close the popup from code? I'd like to try to manually close it in the onChange() event, but I don't know how.
I tried to just hide the popup by changing its CSS "display" property, but then the popup doesn't re-open when I click on the field again unless I first click somewhere else (outside the input field) and then re-click on the field.

[mcandu]

Have you tried it the Calendar exactly from docs with no change. Reason could be classes that you use.

[Master_T]

Have you tried it the Calendar exactly from docs with no change. Reason could be classes that you use.

This is the piece of code I'm using:

Code: Select all

<div className="field">
    <label htmlFor="firstname1">{col.fieldName}</label>
    <Calendar className="inputfield w-full" value={rowData[colIdx] as Date} showIcon dateFormat="dd/mm/yy" onChange={(e) => rowData[colIdx] = e.value as Date} />
</div>

I've tried removing the two classes from className but it doesn't fix anything.
One thing to note is that I'm using the calendar inside a Dialog component, however this doesn't seem to be a problem when I recreated it in codesandbox, so I don't think it is the cause.

[Melloware]

Could your issue be that you are trying to use an indexed value and the index is not available?

Code: Select all

rowData[colIdx]

[Master_T]

Could your issue be that you are trying to use an indexed value and the index is not available?

Code: Select all

rowData[colIdx]

I don't think so, because the date in the input field gets populated correctly

[Master_T]

Another problem I noticed just now: if I edit the date manually from the input box, as soon as the input loses focus (blurs) the date is reset to the original value.

There's clearly something seriously wrong going on with the Calendar component in my app, but I have no idea how to diagnose the cause
Any suggestion that helps me find out what is going is greatly appreciated (unfortunately I can't provide a full sample because the code is complex and embedded into an existing product, it would be impossible for me to isolate it as an independent codebase)