Bug - [DatePicker] - Cannot clear validation error from outside

[jschuler]

Trying to control the value of the DatePicker from outside the component. Once the datepicker becomes invalid (in this case by typing a date less than 2020-03-17), I can no longer clear the error from outside.

I have the case where a user can enter an invalid date (outside the allowable date range). When they use another control to try and reset the date, it doesn't work.

Codesandbox: https://codesandbox.io/s/misty-lake-r73ehn

To reproduce:

• Manually enter a value less than 2020-03-17
• Observe validation error triggered, input has error icon
• Click the button which updates the value of the datepicker
• Error icon is still there

I'd expect the error to be cleared

Reproducible example:

export const DatePickerTest: React.FunctionComponent = () => {
  const rangeValidator = (date: Date) => {
    // when you open the picker, dates less than will be grayed out
    // but you can still manually enter a lesser date
    if (date < new Date("2020-03-17")) {
      return "error";
    }
    return "";
  };
  const [value, setValue] = React.useState("2020-03-17");
  const onChange = (dateStr, date) => {
    setValue(dateStr);
  };
  return (
    <>
      <div>value: {value}</div>
      <div>
        <DatePicker
          value={value}
          onChange={onChange}
          validators={[rangeValidator]}
        />
      </div>
      <div>
        <button onClick={() => setValue("2020-03-18")}>Date 2020-03-18</button>
      </div>
    </>
  );
};

[jschuler]

As a workaround I am resorting to adding <DatePicker key={stateVariable} ... /> and increment stateVariable whenever I want to change the input to force a re-render.

[michpetrov]

Your state management only goes one way. When you push the button state changes to "2020-03-18" as expected but when you interact with the DateTimePicker your state doesn't change, so when you push the button again React sees that the new state is the same as the old one and decides the components don't need to be rerendered.

[jschuler]

@michpetrov thank you, you're correct. I've updated the example and my description of the issue which is more accurately about clearing the error state of an invalid datepicker input.

[michpetrov]

Ah I see, looks like the validation is only performed on input blur, and not when the component is rendered.