Calendar: dateFormat, mask and keepInvalid issues

[KOliver94]

Describe the bug

Calendar as strange behaviour when using with dateFormat, mask and keepInvalid in a react-hook-form.

Issue 1: If I'm using the following dateFormat="yy.mm.dd" I can only write one digit days. The next character I write will delete everything. If I use dateFormat="yy.mm.dd." (ending with a dot) it works.

Issue 2: If I use the working format from issue 1 I cannot specify a mask that will work. If I use mask="9999.99.99" they will not match as the ending dot is missing. If I use mask="9999.99.99." I get back to the first issue and I can only input one digit days.

Issue 3: If I have keepInvalid on top of the mask the cursor will jump to the end and rewriting the last character only. If I click to somewhere I can write the digits but it will jump back to the end.

Issue 4: If I try to change existing date with mask by not deleting everything at once just clicking to the middle and delete number from there, it will show like everything is deleted but for keyboard input previous numbers will appear.

Issue 5: (https://github.com/primefaces/primereact/issues/3629) Also the CalendarProps interface defines value as Date | Date[] but as a controlled component it will be null in the form and with keepInvalid it will have string value for some time.

Reproducer

https://codesandbox.io/s/dazzling-euler-kotxfu

PrimeReact version

8.7.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

[melloware]

Does React Hook form have anything to do with this or are all these issues exists without React Hook Form? If so I would update your Sandbox to remove React Hook Form as it just distracts from the real issues you have listed.

[melloware]

I created a new issue just for your typescript def issue #4: https://github.com/primefaces/primereact/issues/3629

[KOliver94]

Thanks!

The first two definitely exist without React Hook Form. The keepInvalid things crashed everything when I tried to reproduce without the React Hook Form so I just the left in the reproducible form. My guess would be that they are issues without the form as well.

[JanderSilv]

Hi @melloware , thanks for the great work on this package.

Is it possible to predict when this issue will be resolved? It is crucial to be able to use the calendar in our project, specially the issue 3 listed by @KOliver94.

[melloware]

I looked at this before and it seemed to be a tricky combination of hooks firing. I couldn't quite figure it out but let me look again.

[JanderSilv]

Sorry to bother you again, any updates on this? Any workarounds to get the keepInvalid behavior and masked field are most welcome.

[melloware]

so far this is quite tricky and I was not able to figure it out without a deeper dive.