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;
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.