Datepicker field - Inconsistency in accepting leap day input via keyboard

[CristinaTriff]

Provide a general summary of the issue here

I am seeking to input the date value of 02/29/2024 into the datepicker field exclusively via keyboard input. However, upon entering the first character for the year, the day field automatically changes from 29 to 28.

🤔 Expected Behavior?

02/29/2024 value should be accepted when set from the keyboard.

😯 Current Behavior

The day value 29 is automatically changed to 28 after typing the first character of the year.

💁 Possible Solution

Implement a debounce mechanism on the keyboard to defer validation and automated updates until a period of no events being intercepted for the respective field has elaspsed.

🔦 Context

No response

🖥️ Steps to Reproduce

In the datepicker field type 022920

https://github.com/adobe/react-spectrum/assets/14110935/00ac805a-0289-43bb-94e8-ca6f250cef7f

Version

18.2.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Adding a debounce to defer the validation as you suggested sounds reasonable. Alternatively we could compare the current placeholder year with the current user input in the year field and defer updating the year until the user blurs from the field or if the user's input diverges from the placeholder year. This case is pretty specific to entering 2/29 so we could probably limit this logic to running only for that case

[devongovett]

I think this is basically the same underlying issue as #3256.

I looked into that one before and attempted to change the representation of incomplete dates. The problem is that the date formatter that's used to generate the UI requires a real date to work. So in this case entering 2/29/2 doesn't exist and the browser's formatter rounds it down even if we don't. Haven't figured out a way to allow invalid dates (while incomplete) and also preserve the internationalization capabilities provided by the formatter.

[maxkarkowski]

is there any update on this issue? seems the dateField is kind of buggy. we are using it for the birthday field in our checkout and it is kind of crucial to get the correct birthDate. And for a user this could be very easily overlooked if he types his birthday 29.02.2000 and it changes automatically to the 28th of february

[bmsuseluda]

would it be a potential workaround to disable the validation via a new prop?

[boutahlilsoufiane]

Hi @LFDanLu I would love to work on this. I tried to reproduce the issue but DatePicker doesn't allow me to enter 29 as day.

[LFDanLu]

@boutahlilsoufiane Sure! I don't really have any extra guidance other that what was previously mentioned in this thread along with the issue that @devongovett mentioned above however, but here is a sandbox in which you can reproduce the issue: https://codesandbox.io/p/sandbox/fancy-architecture-ptch2p?file=%2Fsrc%2FApp.js%3A16%2C1. The key is to have your placeholder value (usually falls back to the current date if now provided) set to a date where 2/29 is a valid date.

[maxkarkowski]

any update on this issue?

[LFDanLu]

No update from our end unfortunately

[boutahlilsoufiane]

@LFDanLu Apologies for the delay—I’ve resumed work on the issue.

[boutahlilsoufiane]

Hello @devongovett , thanks for this solution, I have translated into code but I'm not sure if the new behaviour is the expected one, Could I get a review, please?

[boutahlilsoufiane]

Hi @snowystinger, the comments are addressed, could you please take a look.

[snowystinger]

Thanks @boutahlilsoufiane one of us will try to find some time soon!

[boutahlilsoufiane]

@snowystinger thanks for your feedback.

[xsjcTony]

Thanks for the hard work there, as this is an obvious UX issue, really looking forward to having a solution soon. Thanks!