primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Published 20 hours ago • verified publisher icon primefaces

Calendar: Changing a value removes the entire value

Open Vseslavr opened this issue 2 years ago • 9 comments

Describe the bug

Enter any valid date to the first input (for example 11/22/1999). Move to the 2nd input and enter any valid date (you can use same date for example). Move back to the first input and try to edit date - for example change year from 1999 to 1998. Pay attention that as soon as you remove the last digit, the value will be cleared. In the 2nd input you can navigate cursor through the date and change it as you need and value will not be cleared.

Reproducer

https://codesandbox.io/s/reverent-breeze-9guo7x

PrimeReact version

8.1.1

React version

17.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

Vseslavr avatar May 25 '22 11:05 Vseslavr

@melloware This seem to be fixed as of latest master branch.

Can this be closed?

STIAANWOL avatar Jul 30 '22 13:07 STIAANWOL

@STIAANWOL I am still seeing the same result with 8.3.0? https://codesandbox.io/s/vibrant-zeh-f8kexq?file=/src/demo/CalendarDemo.js

If you follow the instructions exactly it is still happening?

melloware avatar Jul 30 '22 14:07 melloware

@melloware I pulled master branch. image Ran command 'next dev' And tested this issue. Can confirm the behaviour is as OP wanted it to be. (on latest master) image

STIAANWOL avatar Jul 30 '22 15:07 STIAANWOL

Oh yeah let me try that!

melloware avatar Jul 30 '22 16:07 melloware

Ahh @STIAANWOL the real bug is when you add mask="99/99/9999" showOnFocus={false}.

Add that to the Icon example in the showcase and you will see the same behavior described.

melloware avatar Jul 30 '22 18:07 melloware

@melloware Ah great thank you. I know what the bug is now. Can reproduce.

I would like to have a go at fixing it today.

STIAANWOL avatar Jul 31 '22 08:07 STIAANWOL

Couldnt find anything just yet.

It does look like the issue has to do with showOnFocus={false} though.

Following OP's instructions with only mask="99/99/9999" on the calendar does not result in the bug.

The bug will occur if you follow OP's instructions, have showOnFocus={false} on the Calendar AND the overlay is NOT showing. The bug will not occur if you follow OP's instructions but focus the icon calendar by clicking on the ICON itself, have showOnFocus={false} on the Calendar AND the overlay IS showing. See below: image

STIAANWOL avatar Jul 31 '22 11:07 STIAANWOL

I think you nailed it. Any help would be appreciated!

melloware avatar Jul 31 '22 12:07 melloware

Ahh @STIAANWOL the real bug is when you add mask="99/99/9999" showOnFocus={false}.

Add that to the Icon example in the showcase and you will see the same behavior described.

mask + shoOnFocus off + default value as anything other than null will trigger this issue, apparently.

andreluisos avatar Aug 08 '22 13:08 andreluisos

Any update here?

bhkangw avatar Nov 02 '22 20:11 bhkangw

OK I just tested this with source code in main for 8.7.2 and by adding keepInvalid to the Calendar this bug is fixed. This allows when you remove that last digit it doesn't erase the calendar it leaves the invalid value in there for you to fill out.

<Calendar id="icon" value={date3} dateFormat="mm/dd/yy" mask="99/99/9999" keepInvalid showOnFocus={false} onChange={(e) => setDate3(e.value)} showIcon />

melloware avatar Nov 03 '22 15:11 melloware

8.7.2 is out if you guys want to try my solution above.

melloware avatar Nov 10 '22 13:11 melloware