[v5] Remove condition restricting error display to touched inputs

docs/EditTutorial.md

@@ -890,7 +890,7 @@ const AccordionSectionTitle = ({ children, name }) => {
 
     return (
         <Typography color={
-              !formGroupState.isValid && formGroupState.isDirty
+              !formGroupState.isValid
                 ? 'error'
                 : 'inherit'
           }

docs/Inputs.md

@@ -877,16 +877,15 @@ import { useController } from 'react-hook-form';
 const BoundedTextField = ({ name, label }: { name: string; label: string }) => {
     const {
         field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted }
+        fieldState: { invalid, error }
     } = useController({ name, defaultValue: '' });
 
     return (
         <TextField
             {...field}
             label={label}
-            error={(isTouched || isSubmitted) && invalid}
-            helperText={(isTouched || isSubmitted) && invalid ? error?.message : ''}
+            error={invalid}
+            helperText={invalid ? error?.message : ''}
         />
     );
 };
@@ -947,8 +946,7 @@ const BoundedTextField = (props: BoundedTextFieldProps) => {
     const { onChange, onBlur, label, ...rest } = props;
     const {
         field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted },
+        fieldState: { invalid, error },
         isRequired,
     } = useInput({
         // Pass the event handlers to the hook but not the component as the field property already has them.
@@ -962,8 +960,8 @@ const BoundedTextField = (props: BoundedTextFieldProps) => {
         <TextField
             {...field}
             label={label}
-            error={(isTouched || isSubmitted) && invalid}
-            helperText={(isTouched || isSubmitted) && invalid ? error?.message : ""}
+            error={invalid}
+            helperText={invalid ? error?.message : ""}
             required={isRequired}
             {...rest}
         />
@@ -1000,11 +998,7 @@ import { Select, MenuItem } from "@mui/material";
 import { InputProps, useInput } from "react-admin";
 
 const SexInput = (props: InputProps) => {
-    const {
-        field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted },
-    } = useInput(props);
+    const { field } = useInput(props);
 
     return (
         <Select label="Sex" {...field}>
@@ -1054,8 +1048,7 @@ const BoundedTextField = (props: BoundedTextFieldProps) => {
     const { onChange, onBlur, label, helperText, ...rest } = props;
     const {
         field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted },
+        fieldState: { invalid, error },
         isRequired,
     } = useInput({
         onChange,
@@ -1064,17 +1057,16 @@ const BoundedTextField = (props: BoundedTextFieldProps) => {
     });
 
     const renderHelperText =
-        helperText !== false || ((isTouched || isSubmitted) && invalid);
+        helperText !== false || invalid;
 
     return (
         <TextField
             {...field}
             label={label}
-            error={(isTouched || isSubmitted) && invalid}
+            error={invalid}
             helperText={
                 renderHelperText ? (
                     <InputHelperText
-                        touched={isTouched || isSubmitted}
                         error={error?.message}
                         helperText={helperText}
                     />

docs/Upgrade.md

@@ -906,6 +906,16 @@ The following components are not affected and can still be used in standalone mo
 - `<SimpleList>`
 - `<SingleFieldList>`
 
+## Inputs No Longer Require To Be Touched To Display A Validation Error
+
+In previous versions, validation errors were only displayed after the input was touched or the form was submitted. In v5, validation errors are fully entrusted to the form library (`react-hook-form`), which is responsible to decide when to display them.
+
+For most use-cases this will have no impact, because `react-hook-form` works the same way (it will wait for an input to be touched before triggering its validation).
+
+But this should help with some advanced cases, for instance if some validation errors need to be displayed on untouched fields.
+
+It will also improve the user experience, as the form `isValid` state will be consistent with error messages displayed on inputs, regardless of whether they have been touched or not.
+
 ## Upgrading to v4
 
 If you are on react-admin v3, follow the [Upgrading to v4](https://marmelab.com/react-admin/doc/4.16/Upgrade.html) guide before upgrading to v5.

docs/useInput.md

@@ -65,8 +65,7 @@ const BoundedTextField = (props) => {
     const { onChange, onBlur, label, helperText, ...rest } = props;
     const {
         field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted },
+        fieldState: { invalid, error },
         isRequired
     } = useInput({
         // Pass the event handlers to the hook but not the component as the field property already has them.
@@ -80,11 +79,10 @@ const BoundedTextField = (props) => {
         <TextField
             {...field}
             label={label}
-            error={(isTouched || isSubmitted) && invalid}
-            helperText={helperText !== false || ((isTouched || isSubmitted) && invalid)
+            error={invalid}
+            helperText={helperText !== false || invalid
                 ? (
                     <InputHelperText
-                        touched={isTouched || isSubmitted}
                         error={error?.message}
                         helperText={helperText}
                     />
@@ -119,11 +117,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useInput } from 'react-admin';
 
 const SexInput = props => {
-    const {
-        field,
-        fieldState: { isTouched, invalid, error },
-        formState: { isSubmitted }
-    } = useInput(props);
+    const { field } = useInput(props);
 
     return (
         <Select

packages/ra-input-rich-text/src/RichTextInput.tsx

@@ -264,8 +264,6 @@ const RichTextInputContent = ({
     error,
     helperText,
     id,
-    isTouched,
-    isSubmitted,
     invalid,
     toolbar,
 }: RichTextInputContentProps) => (
@@ -279,18 +277,10 @@ const RichTextInputContent = ({
             />
         </TiptapEditorProvider>
         <FormHelperText
-            className={
-                (isTouched || isSubmitted) && invalid
-                    ? 'ra-rich-text-input-error'
-                    : ''
-            }
-            error={(isTouched || isSubmitted) && invalid}
+            className={invalid ? 'ra-rich-text-input-error' : ''}
+            error={invalid}
         >
-            <InputHelperText
-                touched={isTouched || isSubmitted}
-                error={error?.message}
-                helperText={helperText}
-            />
+            <InputHelperText error={error?.message} helperText={helperText} />
         </FormHelperText>
     </>
 );

packages/ra-ui-materialui/src/form/FormTabHeader.tsx

@@ -5,7 +5,6 @@ import { Link, useLocation } from 'react-router-dom';
 import { Tab as MuiTab, TabProps as MuiTabProps } from '@mui/material';
 import clsx from 'clsx';
 import { useTranslate, useFormGroup } from 'ra-core';
-import { useFormState } from 'react-hook-form';
 
 import { TabbedFormClasses } from './TabbedFormView';
 
@@ -21,7 +20,6 @@ export const FormTabHeader = ({
 }: FormTabHeaderProps): ReactElement => {
     const translate = useTranslate();
     const location = useLocation();
-    const { isSubmitted } = useFormState();
     const formGroup = useFormGroup(value.toString());
 
     const propsForLink = {
@@ -44,10 +42,8 @@ export const FormTabHeader = ({
             value={value}
             icon={icon}
             className={clsx('form-tab', className, {
-                [TabbedFormClasses.errorTabButton]:
-                    !formGroup.isValid && (formGroup.isTouched || isSubmitted),
-                error:
-                    !formGroup.isValid && (formGroup.isTouched || isSubmitted),
+                [TabbedFormClasses.errorTabButton]: !formGroup.isValid,
+                error: !formGroup.isValid,
             })}
             {...(syncWithLocation ? propsForLink : {})} // to avoid TypeScript screams, see https://github.com/mui/material-ui/issues/9106#issuecomment-451270521
             id={`tabheader-${value}`}

packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.tsx

@@ -123,8 +123,6 @@ export const ArrayInput = (props: ArrayInputProps) => {
         },
     });
 
-    const { isSubmitted } = formState;
-
     // We need to register the array itself as a field to enable validation at its level
     useEffect(() => {
         register(finalSource);
@@ -142,7 +140,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
         fieldArrayInputControl: fieldProps,
     });
 
-    const { isDirty, error } = getFieldState(finalSource, formState);
+    const { error } = getFieldState(finalSource, formState);
 
     if (isPending) {
         return (
@@ -151,8 +149,7 @@ export const ArrayInput = (props: ArrayInputProps) => {
             </Labeled>
         );
     }
-    const renderHelperText =
-        helperText !== false || ((isDirty || isSubmitted) && !!error);
+    const renderHelperText = helperText !== false || !!error;
 
     return (
         <Root
@@ -164,14 +161,14 @@ export const ArrayInput = (props: ArrayInputProps) => {
                 ArrayInputClasses.root,
                 className
             )}
-            error={(isDirty || isSubmitted) && !!error}
+            error={!!error}
             {...sanitizeInputRestProps(rest)}
         >
             <InputLabel
                 htmlFor={finalSource}
                 className={ArrayInputClasses.label}
                 shrink
-                error={(isDirty || isSubmitted) && !!error}
+                error={!!error}
             >
                 <FieldTitle
                     label={label}
@@ -192,9 +189,8 @@ export const ArrayInput = (props: ArrayInputProps) => {
                 })}
             </ArrayInputContext.Provider>
             {renderHelperText ? (
-                <FormHelperText error={(isDirty || isSubmitted) && !!error}>
+                <FormHelperText error={!!error}>
                     <InputHelperText
-                        touched={isDirty || isSubmitted}
                         // root property is applicable to built-in validation only,
                         // Resolvers are yet to support useFieldArray root level validation.
                         // Reference: https://react-hook-form.com/docs/usefieldarray

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -203,8 +203,7 @@ export const AutocompleteInput = <
         id,
         field,
         isRequired,
-        fieldState: { error, invalid, isTouched },
-        formState: { isSubmitted },
+        fieldState: { error, invalid },
     } = useInput({
         defaultValue,
         id: idOverride,
@@ -545,10 +544,7 @@ If you provided a React element for the optionText prop, you must also provide t
     const isOptionEqualToValue = (option, value) => {
         return String(getChoiceValue(option)) === String(getChoiceValue(value));
     };
-    const renderHelperText =
-        !!fetchError ||
-        helperText !== false ||
-        ((isTouched || isSubmitted) && invalid);
+    const renderHelperText = !!fetchError || helperText !== false || invalid;
 
     return (
         <>
@@ -578,18 +574,10 @@ If you provided a React element for the optionText prop, you must also provide t
                                     isRequired={isRequired}
                                 />
                             }
-                            error={
-                                !!fetchError ||
-                                ((isTouched || isSubmitted) && invalid)
-                            }
+                            error={!!fetchError || invalid}
                             helperText={
                                 renderHelperText ? (
                                     <InputHelperText
-                                        touched={
-                                            isTouched ||
-                                            isSubmitted ||
-                                            fetchError
-                                        }
                                         error={
                                             error?.message ||
                                             fetchError?.message

packages/ra-ui-materialui/src/input/BooleanInput.tsx

@@ -38,8 +38,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
         id,
         field,
         isRequired,
-        fieldState: { error, invalid, isTouched },
-        formState: { isSubmitted },
+        fieldState: { error, invalid },
     } = useInput({
         defaultValue,
         format,
@@ -62,8 +61,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
         [field]
     );
 
-    const renderHelperText =
-        helperText !== false || ((isTouched || isSubmitted) && invalid);
+    const renderHelperText = helperText !== false || invalid;
 
     return (
         <FormGroup
@@ -95,9 +93,8 @@ export const BooleanInput = (props: BooleanInputProps) => {
                 }
             />
             {renderHelperText ? (
-                <FormHelperText error={(isTouched || isSubmitted) && invalid}>
+                <FormHelperText error={invalid}>
                     <InputHelperText
-                        touched={isTouched || isSubmitted}
                         error={error?.message}
                         helperText={helperText}
                     />

packages/ra-ui-materialui/src/input/CheckboxGroupInput.tsx

@@ -141,8 +141,7 @@ export const CheckboxGroupInput: FunctionComponent<CheckboxGroupInputProps> = pr
 
     const {
         field: { onChange: formOnChange, onBlur: formOnBlur, value, ref },
-        fieldState: { error, invalid, isTouched },
-        formState: { isSubmitted },
+        fieldState: { error, invalid },
         id,
         isRequired,
     } = useInput({
@@ -202,16 +201,13 @@ export const CheckboxGroupInput: FunctionComponent<CheckboxGroupInputProps> = pr
         );
     }
 
-    const renderHelperText =
-        !!fetchError ||
-        helperText !== false ||
-        ((isTouched || isSubmitted) && invalid);
+    const renderHelperText = !!fetchError || helperText !== false || invalid;
 
     return (
         <StyledFormControl
             component="fieldset"
             margin={margin}
-            error={fetchError || ((isTouched || isSubmitted) && invalid)}
+            error={fetchError || invalid}
             className={clsx('ra-input', `ra-input-${source}`, className)}
             {...sanitizeRestProps(rest)}
         >
@@ -246,13 +242,10 @@ export const CheckboxGroupInput: FunctionComponent<CheckboxGroupInputProps> = pr
             </FormGroup>
             {renderHelperText ? (
                 <FormHelperText
-                    error={
-                        fetchError || ((isTouched || isSubmitted) && !!error)
-                    }
+                    error={fetchError || !!error}
                     className={CheckboxGroupInputClasses.helperText}
                 >
                     <InputHelperText
-                        touched={isTouched || isSubmitted || fetchError}
                         error={error?.message || fetchError?.message}
                         helperText={helperText}
                     />

packages/ra-ui-materialui/src/input/DatagridInput.tsx

@@ -150,11 +150,6 @@ export const DatagridInput = (props: DatagridInputProps) => {
                     </>
                 )}
                 <InputHelperText
-                    touched={
-                        fieldState.isTouched ||
-                        formState.isSubmitted ||
-                        fetchError
-                    }
                     error={fieldState.error?.message || fetchError?.message}
                 />
             </ListContextProvider>