Ant Design Date Picker doesn't change date on first attempt

Question

<Form.Item name="date1" label="My Date">
   <DatePicker format="DD/MM/YYYY" />
</Form.Item>

This is from a form that otherwise works ok. I can bind a moment to the date picker and it shows the correct value. However, the first time that I update the value with the picker, it doesn't change the date. Subsequent selections correctly update the date.

Form's onFieldsChange fires upon an initial selection, but the date value is the old value, not the new.

The date updates first time when there isn't an initial date, and after clearing an existing date with the cross button.

Any ideas how to fix this?

It actually does this with other fields too. e.g. simple drop down.

Answer 1

I'm not sure how your component looks like. Your field value is not updating correctly may be behind one render.

Try Wrapping the field <Form.Item & pass shouldUpdate

<Form.Item shouldUpdate noStyle>
{()=>(
  <Form.Item name="date1" label="My Date">
     <DatePicker format="DD/MM/YYYY" />
  </Form.Item>
)}
</Form.Item>