MUI DatePicker (either from Labs or X) was working fine. I cannot work out what happened, but it now hangs if I want to change the date by ten years. It seems like the code goes into an infinite loop, but there's no output to the console. The code is
function DateSelector(props) {
const setValue = value => {
if (value !== null) {
const checked = checkDate(value);
props.handler(checked);
}
}
return (
<DatePicker
label={props.label}
inputFormat="d/M/y"
mask=""
value={props.date}
onChange={(value) => {
setValue(value);
}}
renderInput={(params) => (
<Tooltip title={"select " + props.label + " date"} arrow>
<TextField size="small" {...params} />
</Tooltip>
)}
/>
);
}
props.date is an App-level state that is handed down to the picker component. checkDate is a simple function to ensure the date is in the correct range (I've bug-tested it, and it's not the cause of the problem as far as I can see). props.handler changes the App-level state. I wonder if the problem is that I'm manipulating state at the App-level directly through the picker.
This is now resolved!
The problem here is that props.date is a date object stored as an App state that is passed to the component. The component is modifying this directly! Instead it should work with a deep copy of the date object.
Instead of
value={props.date}
it should have
value={new Date(props.date.getTime())}