fix(manager): fix rendering issues by rerendering forms on mount

Author: rvsia

packages/form-state-manager/src/files/use-field.ts

@@ -66,7 +66,6 @@ const useField = ({
   beforeSubmit,
   afterSubmit,
   allowNull,
-  silent,
   ...props
 }: UseField): UseFieldData => {
   const { registerField, unregisterField, change, getFieldValue, blur, focus, formOptions, ...rest } = useContext(FormManagerContext);
@@ -85,7 +84,7 @@ const useField = ({
       defaultValue: dataType ? convertValue(defaultValue, dataType) : defaultValue,
       beforeSubmit,
       afterSubmit,
-      silent
+      silent: true
     });
 
     return internalId;
@@ -121,8 +120,12 @@ const useField = ({
   };
 
   useEffect(
-    () => () => {
-      unregisterField({ name, clearOnUnmount, internalId: id, value: finalClearedValue });
+    () => {
+      formOptions().afterSilentRegistration({ name, internalId: id });
+
+      return () => {
+        unregisterField({ name, clearOnUnmount, internalId: id, value: finalClearedValue });
+      };
     },
     [] // eslint-disable-line react-hooks/exhaustive-deps
   );

packages/form-state-manager/src/tests/files/use-field-array.test.js

@@ -6,13 +6,13 @@ import useFieldArray from '../../files/use-field-array';
 import FormStateManager from '../../files/form-state-manager';
 
 const DummyInput = (props) => {
-  const { input, meta } = useField({ ...props, silent: true });
+  const { input, meta } = useField({ ...props });
   return <input {...input} />;
 };
 
 const CompositeDummyInput = ({ name, ...props }) => {
-  const firstField = useField({ ...props, name: `${name}.first-field`, silent: true });
-  const secondField = useField({ ...props, name: `${name}.second-field`, silent: true });
+  const firstField = useField({ ...props, name: `${name}.first-field` });
+  const secondField = useField({ ...props, name: `${name}.second-field` });
   return (
     <Fragment>
       <input {...firstField.input} />

packages/form-state-manager/src/tests/files/use-field.test.js

@@ -58,7 +58,8 @@ describe('useField', () => {
       name: 'spy',
       initialValue: 'foo',
       render: expect.any(Function),
-      internalId: expect.any(Number)
+      internalId: expect.any(Number),
+      silent: true
     };
     const unregisterArguments = {
       name: 'spy',

packages/form-state-manager/src/types/manager-api.d.ts

@@ -44,6 +44,7 @@ export type IsValidationPaused = () => boolean;
 export type PauseValidation = () => void;
 export type ResumeValidation = () => void;
 export type SetConfig = (attribute: keyof CreateManagerApiConfig, value: any) => void;
+export type AfterSilentRegistration = (field: Omit<FieldConfig, 'render'>) => void;
 
 export interface AsyncWatcherRecord {
   [key: number]: Promise<unknown>;
@@ -110,7 +111,8 @@ export type ManagerApiFunctions =
   | 'isValidationPaused'
   | 'pauseValidation'
   | 'resumeValidation'
-  | 'setConfig';
+  | 'setConfig'
+  | 'afterSilentRegistration';
 
 export interface ManagerState {
   values: AnyObject;
@@ -142,6 +144,7 @@ export interface ManagerState {
   pauseValidation: PauseValidation;
   resumeValidation: ResumeValidation;
   setConfig: SetConfig;
+  afterSilentRegistration: AfterSilentRegistration;
   registeredFields: Array<string>;
   fieldListeners: FieldListeners;
   active: string | undefined;

packages/form-state-manager/src/utils/manager-api.ts

@@ -228,6 +228,7 @@ const createManagerApi: CreateManagerApi = ({
     pauseValidation,
     resumeValidation,
     setConfig,
+    afterSilentRegistration,
     destroyOnUnregister,
     ...initialFormState(initialValues)
   };
@@ -238,6 +239,8 @@ const createManagerApi: CreateManagerApi = ({
   let runFormValidation = false;
   let revalidatedFields: Array<string> = [];
   let registeringField: string | number | undefined;
+  let isSilent = false;
+  let silentRender: string[] = [];
 
   const asyncWatcherApi = asyncWatcher(updateValidating, updateSubmitting);
 
@@ -449,7 +452,9 @@ const createManagerApi: CreateManagerApi = ({
     return (subscribeTo: Array<string> = []) => {
       const changedAttributes = [...findDifference(snapshot, state), ...subscribeTo];
 
-      if (changedAttributes.length > 0) {
+      if (isSilent) {
+        changedAttributes.forEach((attr) => addIfUnique(silentRender, attr));
+      } else if (changedAttributes.length > 0) {
         rerender(changedAttributes);
       }
     };
@@ -549,9 +554,10 @@ const createManagerApi: CreateManagerApi = ({
   }
 
   function registerField(field: FieldConfig): void {
+    isSilent = !!field.silent;
     registeringField = field.internalId || field.name;
     batch(() => {
-      const render = !field.silent && prepareRerender();
+      const render = prepareRerender();
       addIfUnique(state.registeredFields, field.name);
 
       if (
@@ -590,17 +596,37 @@ const createManagerApi: CreateManagerApi = ({
         state.fieldListeners[field.name].state.meta.pristine = false;
       }
 
-      revalidateFields([field.name, ...(state.fieldListeners[field.name]?.validateFields || state.registeredFields.filter((n) => n !== field.name))]);
-
-      if (config.validate) {
-        validateForm(config.validate);
+      if (!field.silent) {
+        revalidateFields([
+          field.name,
+          ...(state.fieldListeners[field.name]?.validateFields || state.registeredFields.filter((n) => n !== field.name))
+        ]);
+        if (config.validate) {
+          validateForm(config.validate);
+        }
       }
 
-      !field.silent && render && render();
+      render();
     });
+    isSilent = false;
     registeringField = undefined;
   }
 
+  function afterSilentRegistration(field: Omit<FieldConfig, 'render'>) {
+    revalidateFields([field.name, ...(state.fieldListeners[field.name]?.validateFields || state.registeredFields.filter((n) => n !== field.name))]);
+
+    if (config.validate) {
+      validateForm(config.validate);
+    }
+
+    if (silentRender.length > 0) {
+      registeringField = field.internalId || field.name;
+      rerender(silentRender);
+      silentRender = [];
+      registeringField = undefined;
+    }
+  }
+
   function unregisterField(field: Omit<FieldConfig, 'render'>): void {
     batch(() => {
       const render = prepareRerender();