🐛 [open-formulieren/open-forms#5994] Ensure validation errors for hidden fields are cleared

Similarly to the values update (from clearOnHide), ensure the error
state is updated when a component becomes hidden. We always remove
the validation errors for hidden fields, irrespective of clear on hide.
We also do not restore validation errors when the field becomes visible
again, as the validation schema will restore these, or the backend
validation errors will do so.

Co-authored-by: vasileios <zigras00@gmail.com>

Author: sergei-maertens

src/components/FormioForm.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/validationSchema';
 import {deepMergeValues, extractInitialValues} from '@/values';
 import {processVisibility} from '@/visibility';
+import type {Errors as VisibilityErrors} from '@/visibility';
 
 import FormFieldContainer from './FormFieldContainer';
 import FormSettingsProvider from './FormSettingsProvider';
@@ -271,21 +272,32 @@ const InnerFormioForm = forwardRef<FormStateRef, InnerFormioFormProps>(
     // values via clearOnHide, and this implies multiple (render) passes to converge.
     // XXX: this means that component definitions may not have reference cycles in their
     // conditional logic to prevent infinite render loops!
-    const {visibleComponents: componentsToRender, updatedValues} = useMemo(() => {
-      const {visibleComponents, updatedValues} = processVisibility(components, values, {
-        parentHidden: false,
-        initialValues,
-        getRegistryEntry,
-        componentsMap,
-      });
+    const {
+      visibleComponents: componentsToRender,
+      updatedValues,
+      updatedErrors,
+    } = useMemo(() => {
+      const {visibleComponents, updatedValues, updatedErrors} = processVisibility(
+        components,
+        values,
+        // type cast necessary because Formik's FormikErrors type is wrong for nested
+        // structures/generics like JSONObject
+        errors as VisibilityErrors,
+        {
+          parentHidden: false,
+          initialValues,
+          getRegistryEntry,
+          componentsMap,
+        }
+      );
 
       const updatedValidationSchema = buildValidationSchema(visibleComponents, {
         intl,
         getRegistryEntry,
         validatePlugins: validatePlugins.bind(null, validatePluginCallback),
       });
       onValidationSchemaChange(updatedValidationSchema);
-      return {visibleComponents, updatedValues};
+      return {visibleComponents, updatedValues, updatedErrors};
     }, [
       intl,
       validatePluginCallback,
@@ -294,6 +306,7 @@ const InnerFormioForm = forwardRef<FormStateRef, InnerFormioFormProps>(
       componentsMap,
       initialValues,
       values,
+      errors,
     ]);
 
     // handle the side-effects from the visibility checks that apply clearOnHide to the
@@ -306,7 +319,15 @@ const InnerFormioForm = forwardRef<FormStateRef, InnerFormioFormProps>(
       if (updatedValues !== values) {
         setValues(updatedValues);
       }
-    }, [setValues, values, updatedValues]);
+
+      // update the errors the same way - values and errors are typically mutated at
+      // the same time
+      if (updatedErrors !== errors) {
+        // type cast necessary because Formik's FormikErrors type is wrong for nested
+        // structures/generics like JSONObject
+        setErrors(updatedErrors as FormikErrors<JSONObject>);
+      }
+    }, [setValues, values, updatedValues, setErrors, errors, updatedErrors]);
 
     return (
       <Form noValidate id={id}>

src/registry/columns/visibility.ts

@@ -8,17 +8,20 @@ import {processVisibility} from '@/visibility';
 const applyVisibility: ApplyVisibility<ColumnsComponentSchema> = (
   componentDefinition,
   values,
+  errors,
   context
 ) => {
   const updatedColumns: Column[] = componentDefinition.columns.map(column => {
-    const {visibleComponents, updatedValues} = processVisibility(
+    const {visibleComponents, updatedValues, updatedErrors} = processVisibility(
       column.components,
       values,
+      errors,
       context
     );
     // make sure to update this for the next iteration so that it sees the up-to-date
     // side-effects of clearOnHide
     values = updatedValues;
+    errors = updatedErrors;
     return setIn(column, 'components', visibleComponents);
   });
 
@@ -28,7 +31,7 @@ const applyVisibility: ApplyVisibility<ColumnsComponentSchema> = (
     updatedColumns
   );
 
-  return {updatedDefinition, updatedValues: values};
+  return {updatedDefinition, updatedValues: values, updatedErrors: errors};
 };
 
 export default applyVisibility;

src/registry/editgrid/ItemPreview.tsx

@@ -52,12 +52,17 @@ const ItemPreview: React.FC<ItemPreviewProps> = ({
   // The `ItemBody` component takes care of (recursively) processing the value changes
   // from clearOnHide side-effects. In the preview, we only need to worry about whether
   // a component is visible or not.
-  const {visibleComponents} = processVisibility(components, values, {
-    parentHidden: false,
-    initialValues: {}, // actual value is not relevant here, it's handled in `ItemBody`
-    getRegistryEntry,
-    componentsMap,
-  });
+  const {visibleComponents} = processVisibility(
+    components,
+    values,
+    {},
+    {
+      parentHidden: false,
+      initialValues: {}, // actual value is not relevant here, it's handled in `ItemBody`
+      getRegistryEntry,
+      componentsMap,
+    }
+  );
   return (
     <DataList appearance="rows">
       {visibleComponents.map(component => (

src/registry/editgrid/index.tsx

@@ -14,6 +14,7 @@ import type {JSONObject} from '@/types';
 import {buildValidationSchema, useValidationSchemas, validatePlugins} from '@/validationSchema';
 import {deepMergeValues, extractInitialValues} from '@/values';
 import {processVisibility} from '@/visibility';
+import type {Errors} from '@/visibility';
 
 import ItemPreview from './ItemPreview';
 import isEmpty from './empty';
@@ -47,6 +48,7 @@ export interface ItemBodyProps {
   parentComponentsMap: Record<string, AnyComponentSchema>;
   initialValues: JSONObject;
   onItemValuesUpdated: (itemValues: JSONObject) => void;
+  onItemErrorsUpdated: (itemErrors: Errors) => void;
   onValidationSchemaChange: (index: number, schema: z.ZodSchema<JSONObject>) => void;
   expanded: boolean;
 }
@@ -61,11 +63,12 @@ const ItemBody: React.FC<ItemBodyProps> = ({
   parentComponentsMap,
   initialValues,
   onItemValuesUpdated,
+  onItemErrorsUpdated,
   onValidationSchemaChange,
   expanded,
 }) => {
   const intl = useIntl();
-  const {values} = useFormikContext<WrappedJSONObject>();
+  const {values, errors} = useFormikContext<WrappedJSONObject>();
   const {validatePluginCallback} = useFormSettings();
 
   // ensure we peek deep inside the formik data skipping over any prefixes applied by
@@ -75,6 +78,7 @@ const ItemBody: React.FC<ItemBodyProps> = ({
   if (!rawNamePrefix.endsWith('.')) throw new Error('Unexpected name prefix');
   const namePrefix = rawNamePrefix.slice(0, -1);
   const itemValues: JSONObject = getIn(values, namePrefix);
+  const itemErrors: Errors = getIn(errors, namePrefix);
 
   const componentsMap = useMemo(() => {
     const localComponentsMap: Record<string, AnyComponentSchema> = Object.fromEntries(
@@ -88,33 +92,33 @@ const ItemBody: React.FC<ItemBodyProps> = ({
     return {...parentComponentsMap, ...localComponentsMap};
   }, [parentComponentsMap, components, parentKey]);
 
-  const {visibleComponents, updatedItemValues} = useMemo(() => {
-    const {visibleComponents, updatedValues: updatedItemValues} = processVisibility(
-      components,
-      itemValues,
-      {
-        // in this case, the parent is the item itself rather than the `editgrid`
-        // component. There are no mechanisms to hide an entire item. If the editgrid
-        // component were to be hidden, matching key of that component will be cleared
-        // and/or items won't be rendered at all because the editgrid component is
-        // filtered out of the visible components.
-        parentHidden: false,
-        initialValues,
-        getRegistryEntry,
-        getEvaluationScope: (values: JSONObject): JSONObject => {
-          const result: JSONObject = setIn(parentValues, parentKey, values);
-          return result;
-        },
-        componentsMap,
-      }
-    );
+  const {visibleComponents, updatedItemValues, updatedItemErrors} = useMemo(() => {
+    const {
+      visibleComponents,
+      updatedValues: updatedItemValues,
+      updatedErrors: updatedItemErrors,
+    } = processVisibility(components, itemValues, itemErrors, {
+      // in this case, the parent is the item itself rather than the `editgrid`
+      // component. There are no mechanisms to hide an entire item. If the editgrid
+      // component were to be hidden, matching key of that component will be cleared
+      // and/or items won't be rendered at all because the editgrid component is
+      // filtered out of the visible components.
+      parentHidden: false,
+      initialValues,
+      getRegistryEntry,
+      getEvaluationScope: (values: JSONObject): JSONObject => {
+        const result: JSONObject = setIn(parentValues, parentKey, values);
+        return result;
+      },
+      componentsMap,
+    });
     const updatedValidationSchema = buildValidationSchema(visibleComponents, {
       intl,
       getRegistryEntry,
       validatePlugins: validatePlugins.bind(null, validatePluginCallback),
     });
     onValidationSchemaChange(index, updatedValidationSchema);
-    return {visibleComponents, updatedItemValues};
+    return {visibleComponents, updatedItemValues, updatedItemErrors};
   }, [
     intl,
     index,
@@ -127,6 +131,7 @@ const ItemBody: React.FC<ItemBodyProps> = ({
     componentsMap,
     initialValues,
     itemValues,
+    itemErrors,
   ]);
 
   // handle the side-effects from the visibility checks that apply clearOnHide to the
@@ -141,7 +146,18 @@ const ItemBody: React.FC<ItemBodyProps> = ({
     if (updatedItemValues !== itemValues) {
       onItemValuesUpdated(updatedItemValues);
     }
-  }, [onItemValuesUpdated, itemValues, updatedItemValues]);
+
+    if (updatedItemErrors !== itemErrors) {
+      onItemErrorsUpdated(updatedItemErrors);
+    }
+  }, [
+    onItemValuesUpdated,
+    itemValues,
+    updatedItemValues,
+    onItemErrorsUpdated,
+    itemErrors,
+    updatedItemErrors,
+  ]);
 
   if (!expanded) {
     // assign the local item values to the editgrid scope - `parentKey` is the key of the
@@ -199,8 +215,13 @@ export const FormioEditGrid: React.FC<EditGridProps> = ({
   renderNested: FormioComponent,
   getRegistryEntry,
 }) => {
-  const {values, setFieldValue, getFieldProps} = useFormikContext<WrappedJSONObject>();
+  const {values, setFieldValue, getFieldProps, getFieldMeta, setFieldError} =
+    useFormikContext<WrappedJSONObject>();
   const {value} = getFieldProps<JSONObject[]>(key);
+  const {error} = getFieldMeta<JSONObject[]>(key);
+  // type cast because the FormikErrors type is plain wrong for nested structures like
+  // edit grids
+  const fieldError = error as Errors;
 
   // ensure we peek deep inside the formik data skipping over any prefixes applied by
   // the EditGridItem for the isolation-mode-editing. Note that prefix ends with a
@@ -257,6 +278,18 @@ export const FormioEditGrid: React.FC<EditGridProps> = ({
             const updatedFieldValue = replace(value, index, newItemValues);
             setFieldValue(key, updatedFieldValue);
           }}
+          onItemErrorsUpdated={newItemErrors => {
+            // we can only replace the item errors if the field errors are an array of
+            // item-level errors. Possibly there are:
+            // - no errors at all (undefined)
+            // - a string error, for the editgrid as a whole
+            if (Array.isArray(fieldError)) {
+              const updatedFieldErrors = replace(fieldError, index, newItemErrors);
+              // @ts-expect-error the formik type expects a string, but we're working
+              // with nested objects here
+              setFieldError(key, updatedFieldErrors);
+            }
+          }}
           onValidationSchemaChange={setSchema}
           expanded={expanded}
         />

src/registry/editgrid/visibility.ts

@@ -4,11 +4,13 @@ import {getIn, replace, setIn} from 'formik';
 import type {ApplyVisibility} from '@/registry/types';
 import type {JSONObject} from '@/types';
 import {extractInitialValues} from '@/values';
+import type {Errors} from '@/visibility';
 import {processVisibility} from '@/visibility';
 
 const applyVisibility: ApplyVisibility<EditGridComponentSchema> = (
   componentDefinition,
   values,
+  errors,
   context
 ) => {
   const {key, components} = componentDefinition;
@@ -18,17 +20,35 @@ const applyVisibility: ApplyVisibility<EditGridComponentSchema> = (
   const outerGetEvaluationScope = context?.getEvaluationScope ?? ((v: JSONObject): JSONObject => v);
 
   let items: JSONObject[] | undefined = getIn(values, key);
+  let itemsErrors: Errors[] | string | undefined = getIn(errors, key);
+
   // Make sure `clearOnHide` actually clears the edit-grid
   if (items === undefined) {
     return {
       updatedDefinition: componentDefinition,
       updatedValues: values,
+      updatedErrors: errors,
     };
   }
 
   for (let index: number = 0; index < items.length; index++) {
     const itemValues = items[index];
 
+    // extract the errors for the particular edit grid item. These are either:
+    // - undefined (no errors at all)
+    // - a string - for an error for the item as a whole
+    // - an array of strings, for the errors for a field with `multiple: true`
+    // - an object (Errors) with nested errors for the item fields
+    //
+    // Only the last variant is relevant and requires removing errors if one of the
+    // child components is hidden.
+    const itemErrors =
+      (itemsErrors && Array.isArray(itemsErrors) && itemsErrors[index]) || undefined;
+    const relevantItemErrors =
+      itemErrors && !Array.isArray(itemErrors) && typeof itemErrors !== 'string'
+        ? itemErrors
+        : undefined;
+
     const getEvaluationScope = (itemValues: JSONObject): JSONObject => {
       const innerEvaluationScope: JSONObject = setIn(values, key, itemValues);
       return outerGetEvaluationScope(innerEvaluationScope);
@@ -37,25 +57,31 @@ const applyVisibility: ApplyVisibility<EditGridComponentSchema> = (
     // we cannot process visibleComponents and omit the hidden ones, as there is no
     // definition for a single item -> the display layer needs to do this. We can only
     // process the value mutations, which (in turn) drive the presentation.
-    const {updatedValues: updatedItemValues} = processVisibility(components, itemValues, {
-      ...context,
-      initialValues,
-      getEvaluationScope,
-    });
+    const {updatedValues: updatedItemValues, updatedErrors: updatedRelevantItemErrors} =
+      processVisibility(components, itemValues, relevantItemErrors, {
+        ...context,
+        initialValues,
+        getEvaluationScope,
+      });
 
     // process an update by replace the item
     if (updatedItemValues !== itemValues) {
       items = replace(items, index, updatedItemValues) as JSONObject[];
     }
+    if (itemsErrors && updatedRelevantItemErrors !== relevantItemErrors) {
+      itemsErrors = replace(itemsErrors, index, updatedRelevantItemErrors) as Errors[];
+    }
   }
 
   // update the array value of the edit grid - if no items were changed, this is an
   // identity update and no state changes will trigger
   const updatedValues: JSONObject = setIn(values, key, items);
+  const updatedErrors: Errors = errors !== undefined ? setIn(errors, key, itemsErrors) : errors;
 
   return {
     updatedDefinition: componentDefinition,
     updatedValues: updatedValues,
+    updatedErrors: updatedErrors,
   };
 };
 

src/registry/fieldset/visibility.ts

@@ -7,18 +7,24 @@ import {processVisibility} from '@/visibility';
 const applyVisibility: ApplyVisibility<FieldsetComponentSchema> = (
   componentDefinition,
   values,
+  errors,
   context
 ) => {
   const {components: nestedComponents} = componentDefinition;
 
-  const {visibleComponents, updatedValues} = processVisibility(nestedComponents, values, context);
+  const {visibleComponents, updatedValues, updatedErrors} = processVisibility(
+    nestedComponents,
+    values,
+    errors,
+    context
+  );
 
   const updatedDefinition: FieldsetComponentSchema = setIn(
     componentDefinition,
     'components',
     visibleComponents
   );
-  return {updatedDefinition, updatedValues};
+  return {updatedDefinition, updatedValues, updatedErrors};
 };
 
 export default applyVisibility;