DatePicker onBlur event issue with forms

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Hi,

I am trying to implement onBlur and onKeyDown functionalities for DatePicker that would use moment to format the user input to correct format for DatePicker. However, the event passed to onBlur callback of DatePicker seems to be getting the previous DatePicker value within its target value rather than the value that is inputted to the input field when the onBlur is called. The issue arises with Antd version greater than 4.9.4. With version 4.9.4 or lower, the provided implementation works fine for the onBlur functionality. This applies to TypeScript environments. When reproduced in codesandbox in JavaScript, version 4.12.2 and lower seem to be working and version 4.12.3 seems to be the first version affected.

The problem is that I would like to have also similar implementation for the onKeyDown callback, where user could confirm their input by pressing ‘Enter’ button and DatePicker would accept the date as long as moment is able to form a valid date from the input. The provided implementation works fine with Antd version >= 4.10.0 but with version greater than 4.9.4, the onBlur callback won’t receive the correct target value on the focus event on TypeScript environments. I can’t use version 4.9.4 as the onKeyDown was introduced on version 4.10.0 and on the other hand, I can’t use version greater than 4.9.4 as the onBlur won’t work with the newer versions.

DatePicker with onBlur and onKeyDown implementations:

import React from 'react';

import { DatePicker } from 'antd';
import { PickerProps } from 'antd/lib/date-picker/generatePicker';
import { Moment } from 'moment';
import moment from 'moment-timezone';

export type DatePickerProps = PickerProps<Moment> & {
  moment: typeof moment;
};

export class DatePickerAutoaccept extends React.Component<DatePickerProps> {
  private inputRef: any;
  constructor(props: DatePickerProps) {
    super(props);
    this.inputRef = React.createRef();
  }
  render() {
    const onBlur = (elem: React.FocusEvent<HTMLInputElement>) => {
      if (elem.target.value === '' && this.props.onChange) {
        this.props.onChange(null, elem.target.value);
        return;
      }
      const value = this.props.moment(elem.target.value, this.props.format as string);
      if (value && value.isValid() && this.props.onChange) {
        this.props.onChange(value, elem.target.value);
      }
    };
    const onKeyDown = (elem: React.KeyboardEvent<HTMLInputElement>) => {
      if (elem.code === 'Enter') {
        if (this.inputRef && this.inputRef.current) {
          this.inputRef.current.blur();
        }
      }
    };
    return <DatePicker {...this.props} ref={this.inputRef} onBlur={onBlur} onKeyDown={onKeyDown} />;
  }
}

How the component is being used:

<Form
  initialValues={initialValues}
  onFinish={onFinish}
  onFinishFailed={onFinishFailed}
  form={form}
  layout="vertical"
>
  <Form.Item
    name={['birthdate']}
    label="Syntymäaika"
    validateTrigger={['onSubmit', 'onBlur', 'onChange']}
    rules={[dateRequireRule]}
  >
    <DatePickerAutoaccept
      placeholder="pp.kk.vvvv"
      className="datePicker"
      size="large"
      format={dateFormat}
      defaultPickerValue={moment(new Date()).subtract(60, 'years')}
      disabledDate={disabledDate}
      moment={moment}
    />
  </Form.Item>
</Form>

What is expected?

Expecting onBlur to receive the current input value of the DatePicker input rather than the previous selected DatePicker value. Functionality has changed since version 4.9.4. Version 4.9.4 and lower are working as expected when working in TypeScript environment. In JavaScript environment (codesandbox), the first affected version seems to be 4.12.3.

Expected behaviour would be as follows. User inputs a date as 1.1.1991 or 1 1 1991 to the DatePicker input field and clicks away from the field. 01.01.1991 would be selected as DatePicker value.

What is actually happening?

DatePicker onBlur event receives older target value than is expected

Environment	Info
antd	4.14.0
React	17.0.1
System	macOS 11.2.2
Browser	Google Chrome Version 89.0.4389.82

[zombieJ]

Do not rely on event.target.value. This is not what real value by DatePicker. You should always get correct value by onChange event.

[yimity]

Perhaps you guys need this solution for the input date by manually in the input box. https://codesandbox.io/s/jolly-hawking-m31ht?file=/src/App.tsx