Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 03 Jul 2023 11:36 by ADMIN
Stoyan
Created on: 01 Jun 2023 14:19
Category: DatePicker
Type: Bug Report
4
Changing the year in DatePicker often sets it incorrectly to 1911 in React 18 with createRoot

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.

Attached Files:
9 comments
ADMIN
Filip
Posted on: 03 Jul 2023 11:36

Hi, Ankit,

I have logged this as an issue in our repo, where it can be tracked and monitored:

https://github.com/telerik/kendo-react/issues/1630

We will do our best to fix it as soon as possible, however, at the moment we cannot commit to a specific ETA. Once the issue has been resolved the GitHub item will be updated accordingly.

Regards,
Filip
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Ankit
Posted on: 28 Jun 2023 13:32

Hello Filip,

We have faced issues on our production environment.

can you provide any estimate date for this solution.

 

Thanks

Ankit Kumar

 

 

ADMIN
Filip
Posted on: 20 Jun 2023 11:32

Hello, Ankit,

Thank you for the provided details.

I tested the component again with the latest version and this time with version 114.0.5735.134 of the Chrome browser and I was able to reproduce the issue in question. The date changed to 1910, and the popup months seem to disappear again:

https://stackblitz.com/edit/react-xc2oxm-n6stg2?file=app%2Fmain.tsx

Thank you everyone for the provided effort and input and apologies for any inconvenience this might have caused you. 

Regards,
Filip
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Ankit
Posted on: 19 Jun 2023 07:21

Stoyan,

Yes, I have used latest v5.14.1 version. After update the latest version this wrong month back date issue (DatePicker Calendar cannot select dates in any month before the currently selected date (telerik.com)) has been resolved.

But this wrong year and month date is still coming after the selection date with year.

 

Thanks

Ankit Kumar

Stoyan
Posted on: 16 Jun 2023 14:45

Ankit,

Which version of Kendo are you using? Do you experience the same problems on the latest v5.14.1 where this is supposed to be fixed?

Ankit
Posted on: 16 Jun 2023 13:54
It is working fine for Firefox, edge, and some version of chrome.

But It not working correct for (114.0.5735.134) latest chrome version.

When we try to select with top month and year buttom. then select year, month, date one by one. it will show wrong month and year like that

I have select 03/06/2023 but it show that date 04/06/1910.

 


Stoyan
Posted on: 13 Jun 2023 16:13

According to the changelog https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/

v5.14.1 released on the date of your comment fixes only one bug - this one (or at least pretty similar, according to the release notes). So I think it's safe to assume this ticket can be closed.

Stoyan
Posted on: 13 Jun 2023 15:28

Hello Filip,

I can also not reproduce the issue anymore on the sandbox (v5.14), although I still reproduce it in our actual project (v5.11). It looks as though the sandbox is targeting latest version of the packages (5.14) and my video was recorded back when the latest version was 5.13, so it is possible that the issue was somehow resolved in version 5.14 +.

ADMIN
Filip
Posted on: 08 Jun 2023 11:29

Hello, Stoyan,

I tested the provided example, however for some reason the issue did not reproduce on my end. I am attaching the test video as an attachment. I also tried to reproduce it in other examples in our docs by removing ReactDOM.render() and using createRoot instead to no avail. 

If possible can you provide more information on which browser you are using when the issue reproduces (I tested the examples with Chrome and Firefox) or any other specifics that can help to reproduce the unwanted behavior?

Regards,
Filip
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Attached Files:
Create an account Log In
View
Type
Status
Category