required validation not working correctly with DateTimeInput

[bingluen]

What you were expecting:

Show error message after trigger validation when clear DateTimeInput, if required is include in its validate props.

What happened instead:

Did NOT Show error message after trigger validation when clear DateTimeInput, if required is include in its validate props.

If DateTimeInput had been set a value, the required validation will always be passed.

Steps to reproduce:

1. Give a datetime on DateTimeInput. (Use browser UI or just typing, whatever)
2. Make it blur (Click other field or anywhere)
3. Click DataTimeInput which just give a datetime.
4. Clear it (Use browser UI or just typing, whatever)
5. Trigger validation (onChange or onSubmit, whatever)
6. The error message that should have appeared did not appeared.

Related code:

DateTimeInput.tsx#L18

const parseDateTime = (value: string) => new Date(value);

After clear field, parseDateTime will receive '' (empty string) as value, and return Invalid Date with type is Date object.

validate.ts#L145 and validate.ts#L7

export const required = memoize((message = 'ra.validation.required') =>
    Object.assign(
        (value, values) =>
            isEmpty(value)
                ? getMessage(message, undefined, value, values)
                : undefined,
        { isRequired: true }
    )
);

const isEmpty = (value: any) =>
    typeof value === 'undefined' ||
    value === null ||
    value === '' ||
    (Array.isArray(value) && value.length === 0);

isEmpty return false if Invalid Date (Date object) as value pass into.

Environment

• React-admin version: 4.0.2
• React version: 17.0.2
• Browser: Microsoft Edge 100.0.1185.50 / Firefox 99 / Firefox 100

[slax57]

reproduced, thanks!