Hello,
We've been experiencing a weird behavior with the date picker element. We wanted to have an auto advancing cursor that moves from date -> month -> year without the user having to manually press the arrow keys.
We based our solution off this previous method in your JQuery element. However the React element has some buggy behavior when it comes to updating existing date values in the input that makes this method impossible. (the functionality works correctly in the JQuery version of the library, just not React)
When updating an existing value in the box from a single digit value (e.g. 01, 02, 03, 04, but not 10, 11, 12) instead of overwriting the existing value it appends the new number the user entered. For example, if a 01, is in the box and the user types 2 it becomes 12, when it should have become 02.
This can be especially confusing for the user when working with named dates (e.g. "Jan", "Feb", "Dec", etc) since they do not see the numbers involved. If the user is updating Jan, and they press 2. It should update to Feb not Dec...
I've attached a GIF of the problem below as I've described
As per the subject, you can no longer use the Calendar to select a date in a month before the currently selected Date. Please see the following demo:
https://stackblitz.com/edit/react-xc2oxm-wgsfhy?file=app%2Fmain.tsx
Steps to reproduce:
- Click on the Calendar button
- Click on any month before the currently selected month
- Click on any date in the month
- Observe that the day is changed correctly but the month is incorrectly incremented by one
This error is not observed if you:
- type in a date
- use the mousewheel to scroll to the earlier date instead of clicking on the month
- use Firefox instead of Chrome
We aren't certain but don't believe this error was present before the latest Chrome 113 update. The error is reproducible in all versions of KendoReact from 5.2.0 onwards.
https://codesandbox.io/s/keen-panka-vctttd?file=/app/main.tsx
In the attached video I am showing the steps taken to reproduce the bug from the reproduction link. Basically if you change the year in DatePicker's calendar - no matter which year you select - the year gets reset back to 1911. I was not able to reproduce this in Kendo's CodeSandbox examples until I noticed that they were using the legacy ReactDOM.render() instead of the new React 18's createRoot. As soon as I replaced it I was able to reproduce the bug.
Another strange observation is that I am able to reproduce this bug in only half of my tries after refresh, another colleague reproduces it in 20-25% of his tries, so it doesn't happen all the time but eventually it will. That's why I've recorded a video on a fresh reload of the attached reproduction. Also, you can sometimes see the year is already wrong after selecting it, or after subsequently selecting the month, or sometimes you don't see the year is reset to 1911 until after you select the specific date and the popup closes.
Although there are other ways to reproduce this issue, the one shown in the video is the easiest to hit the bad scenario. Also, we were not able to reproduce the issue on the DateTimePicker, although it seems to use the same Calendar component underneath.
Our assumptions having previously reported similar problems in Kendo after migrating to React 18 is that due to the concurrent rendering / batching of state updates in React 18's createRoot - something breaks the virtual scroll used in the calendar (in the video when I point to 1912 being the next year after the selected 2021, if we scroll a bit, the virtual scroll picks up and updates the incorrect years) so we end up with stale data for the year when selecting the month/date. This means that there might be other unwanted side effects that we just haven't stumbled upon.
This is a severe bug for our application's end users as they are unable to change the year in the date picker reliably. Falling back to the deprecated ReactDOM.render is not an option.