DatePicker is returning the wrong dates on specific conditions

1 Answer 882 Views
DatePicker
Chi-Jong
Top achievements
Rank 1
Chi-Jong asked on 12 May 2023, 03:36 PM | edited on 12 May 2023, 03:38 PM

This problem seems to affect new version of Chromium browsers. As of this writting, the bug can be replicated on these browsers:

-GoogleChrome 113.0.5672.93

-Microsoft Edge 113.0.1774.42

-Brave Browser 1.51.114

The problem doesnt appear on Firefox or older verions of Chromium browsers (tested on v103.0.5046.0)

 

Replication Steps

1) Click on the Calendar icon of the DatePicker

2) Click on a Month on the left Column (IMPORTANT: Don't scroll using the mouse wheel)

3) Pick a Day on the Month that was picked in step 2. For example, I pick Feb 10th, the date is set to June 10th for some weird reason.

The problem only happesn if one picks the available list of Months on step 2 without scrolling using the mouse wheel.

 

For some reason, this bug cannot be replicable on StackBlitz (I wonder if their background code prevents some kind of Racing Conditon). But I have attempted a brand new project on a different machine with just he date picker and it is replcated on the new Chromium based browsers mentioned above.

import React from "react";
import "./App.scss";
import { DatePicker } from "@progress/kendo-react-dateinputs";

function App() {
    const [date1, setDate1] = React.useState<Date | null>(() => new Date());

    return (
        <div>
            <DatePicker
                id={"kendo-date-sample"}
                value={date1}
                onChange={(e) => {
                    const newDate = e.value;
                    console.log(newDate);
                    setDate1(() => newDate);
                }}
            />
        </div>
    );
}
export default App;


David
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 15 May 2023, 05:30 AM | edited

The issue can be replicated on StackBlitz if you change their examples from ReactDOM.render to use createRoot instead. See https://github.com/telerik/kendo-react/issues/1566.

Kendo suggested downgrading to React 17 to work around the issue which for us is not acceptable. We are instead overriding the DatePicker calendar and setting navigation={false}, but this doesn't fix the issue in Grid filter DatePickers for example.

David
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 15 May 2023, 06:25 AM

See here for an example of how to disable the Fast Navigation Bar globally: https://www.telerik.com/forums/disable-calendar-fast-navigation-bar-globally

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 15 May 2023, 02:22 PM

Hello, Chi-Jong,

As mentioned by David above, this is a known critical issue which is already planned for fixing with the highest priority. Any updates made on it will be provided in the following github item:

And the related to it Feedback item:

Regards,
Vessy
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!

Tags
DatePicker
Asked by
Chi-Jong
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or