FileInput does not show validation in helper text as IsTouched property is always false

[wattry]

What you were expecting:
When using a file input in RA v4.15.0 the FileInput component should show validation errors in the helper text component when validation errors occur.

What happened instead:
The isTouched fieldState property does not change even when the input has values added or removed (Tested by creating the component locally). However, the isDirty fieldState value does change. This results in the validation error not being displayed on the input.

Steps to reproduce:
Use the following code in any react admin create resource

const CreateResource = () => {
  const filesSizeValidation = (files) => {
    if (files) {
      // The sum of the file sizes cannot exceed 10MB
      const totalSize = files?.reduce((total, file) => (total += file?.rawFile?.size || 0), 0);

      if (totalSize > limit) {
        return 'Total upload size exceeds 9MB limit';
      }
    }

    return undefined;
  };

  return (<Create>
    <SimpleForm>
      <FileInput
        source="files"
        multiple={true}
        validate={filesSizeValidation}
        helperText="A maximum of 3 files not exceeding 10MB in total"
      >
        <FileField source="title" />
      </FileInput>
    </SimpleForm>
  </Create >);
};

Environment

• React-admin version: v4.15.0
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.2
• Browser: Chromium & FireFox

[erwanMarmelab]

Hi @wattry ,

The natural way of working our input is not to show errors before the first validation. If you want to change from onSubmit error check to onBlur, please check this documentation.
If it doesn't answer your question or you are not okay with it, please make a codesandbox.

Cheers,

Erwan