@firecms/core 3.0.0-canary.283 → 3.0.0-canary.285

package/dist/types/collections.d.ts

@@ -307,6 +307,13 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * This prop has no effect if the history plugin is not enabled
      */
     history?: boolean;
+    /**
+     * If set to true, local changes to entities in this collection will be backed up
+     * in the browser's local storage. This allows users to recover unsaved changes
+     * in case of accidental navigation or browser crashes.
+     * Defaults to `true`.
+     */
+    enableLocalChangesBackup?: boolean;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/util/entity_cache.d.ts

@@ -8,9 +8,10 @@ export declare function saveEntityToCache(path: string, data: object): void;
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
+ * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
-export declare function getEntityFromCache(path: string): object | undefined;
+export declare function getEntityFromCache(path: string, useLocalStorage?: boolean): object | undefined;
 export declare function hasEntityInCache(path: string): boolean;
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.283",
+  "version": "3.0.0-canary.285",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,9 +53,9 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-canary.283",
-    "@firecms/formex": "^3.0.0-canary.283",
-    "@firecms/ui": "^3.0.0-canary.283",
+    "@firecms/editor": "^3.0.0-canary.285",
+    "@firecms/formex": "^3.0.0-canary.285",
+    "@firecms/ui": "^3.0.0-canary.285",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "521154e8ee22424451421052cbc22fa6ba5b4d4d",
+  "gitHead": "a442a00b64764b353c977cc9e758953995bd9513",
   "publishConfig": {
     "access": "public"
   },

package/src/core/EntityEditView.tsx

@@ -97,9 +97,11 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         useCache: false
     });
 
-    const cachedValues = entityId
-        ? getEntityFromCache(props.path + "/" + entityId)
-        : getEntityFromCache(props.path + "#new");
+    const enableLocalChangesBackup = props.collection.enableLocalChangesBackup !== undefined ? props.collection.enableLocalChangesBackup : true;
+
+    const initialDirtyValues = entityId
+        ? getEntityFromCache(props.path + "/" + entityId, enableLocalChangesBackup)
+        : getEntityFromCache(props.path + "#new", enableLocalChangesBackup);
 
     const authController = useAuthController();
 
@@ -114,18 +116,18 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         }
     }, [authController, entity, status]);
 
-    if ((dataLoading && !cachedValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
+    if ((dataLoading && !initialDirtyValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
         return <CircularProgressCenter/>;
     }
 
-    if (entityId && !entity && !cachedValues) {
+    if (entityId && !entity && !initialDirtyValues) {
         console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
-                                   cachedDirtyValues={cachedValues as Partial<M>}
+                                   initialDirtyValues={initialDirtyValues as Partial<M>}
                                    dataLoading={dataLoading}
                                    status={status}
                                    setStatus={setStatus}
@@ -144,7 +146,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        onSaved,
                                                                        onTabChange,
                                                                        entity,
-                                                                       cachedDirtyValues,
+                                                                       initialDirtyValues,
                                                                        dataLoading,
                                                                        layout = "side_panel",
                                                                        barActions,
@@ -154,7 +156,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        canEdit
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
-    cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
+    initialDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
     status: EntityStatus,
     setStatus: (status: EntityStatus) => void,
@@ -379,7 +381,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         entityId={entityId ?? usedEntity?.id}
         onValuesModified={onValuesModified}
         entity={entity}
-        initialDirtyValues={cachedDirtyValues}
+        initialDirtyValues={initialDirtyValues}
         openEntityMode={layout}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
@@ -523,4 +525,3 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     return result;
 }
-

package/src/core/EntityEditViewFormActions.tsx

@@ -17,6 +17,7 @@ import {
     cls,
     defaultBorderMixin,
     DialogActions,
+    ErrorIcon,
     IconButton,
     LoadingButton,
     Tooltip,
@@ -31,6 +32,8 @@ import {
 } from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
+import { FormexController } from "@firecms/formex";
+import { ErrorTooltip } from "../components/ErrorTooltip";
 
 export function EntityEditViewFormActions({
                                               collection,
@@ -80,14 +83,14 @@ export function EntityEditViewFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             sideDialogContext,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         })
         : buildSideActions({
             savingError,
@@ -96,14 +99,14 @@ export function EntityEditViewFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             sideDialogContext,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         });
 }
 
@@ -114,14 +117,14 @@ type ActionsViewProps<M extends object> = {
     collection: ResolvedEntityCollection,
     context: FireCMSContext,
     sideEntityController: SideEntityController,
-    isSubmitting: boolean,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     sideDialogContext: SideDialogController,
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext
+    formContext: FormContext,
+    formex: FormexController<any>;
 };
 
 function buildBottomActions<M extends object>({
@@ -131,16 +134,17 @@ function buildBottomActions<M extends object>({
                                                   collection,
                                                   context,
                                                   sideEntityController,
-                                                  isSubmitting,
                                                   disabled,
                                                   status,
                                                   sideDialogContext,
                                                   pluginActions,
                                                   openEntityMode,
                                                   navigateBack,
-                                                  formContext
+                                                  formContext,
+                                                  formex
                                               }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
     const canClose = openEntityMode === "side_panel";
     return <DialogActions
         position={"absolute"}>
@@ -179,16 +183,20 @@ function buildBottomActions<M extends object>({
 
         {pluginActions}
 
+        {hasErrors ?
+            <ErrorTooltip title={"This form has errors"}>
+                <ErrorIcon className="ml-4" color="error" size={"smallest"}/>
+            </ErrorTooltip> : null}
         <Button variant="text"
                 color="primary"
-                disabled={disabled || isSubmitting}
+                disabled={disabled || formex.isSubmitting}
                 type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
         <Button variant={canClose ? "text" : "filled"}
                 color="primary"
                 type="submit"
-                disabled={disabled || isSubmitting}
+                disabled={disabled || formex.isSubmitting}
                 onClick={() => {
                     sideDialogContext.setPendingClose(false);
                 }}>
@@ -199,7 +207,7 @@ function buildBottomActions<M extends object>({
         {canClose && <LoadingButton variant="filled"
                                     color="primary"
                                     type="submit"
-                                    loading={isSubmitting}
+                                    loading={formex.isSubmitting}
                                     disabled={disabled}
                                     onClick={() => {
                                         sideDialogContext.setPendingClose?.(true);
@@ -218,28 +226,35 @@ function buildSideActions<M extends object>({
                                                 collection,
                                                 context,
                                                 sideEntityController,
-                                                isSubmitting,
                                                 disabled,
                                                 status,
                                                 sideDialogContext,
                                                 pluginActions,
                                                 openEntityMode,
                                                 navigateBack,
-                                                formContext
+                                                formContext,
+                                                formex
                                             }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
     return <div
         className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
-        <LoadingButton fullWidth={true} variant="filled" color="primary" type="submit" size={"large"}
-                       disabled={disabled || isSubmitting} onClick={() => {
-            sideDialogContext.setPendingClose?.(false);
-        }}>
+        <LoadingButton fullWidth={true}
+                       variant="filled"
+                       color="primary"
+                       type="submit"
+                       size={"large"}
+                       startIcon={hasErrors ? <ErrorIcon/> : undefined}
+                       disabled={disabled || formex.isSubmitting}
+                       onClick={() => {
+                           sideDialogContext.setPendingClose?.(false);
+                       }}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
         </LoadingButton>
 
-        <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
 

package/src/form/EntityForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
     AuthController,
     CMSAnalyticsEvent,
@@ -32,19 +32,20 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
-    useFireCMSContext, useNavigationController,
+    useFireCMSContext,
+    useNavigationController,
     useSideEntityController,
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { flattenKeys, Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 import { removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
-import { CustomIdField } from "../form/components/CustomIdField";
-import { ErrorFocus } from "../form/components/ErrorFocus";
-import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
+import { CustomIdField } from "./components/CustomIdField";
+import { ErrorFocus } from "./components/ErrorFocus";
+import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
 
 export type OnUpdateParams = {
@@ -96,6 +97,22 @@ export type EntityFormProps<M extends Record<string, any>> = {
     children?: React.ReactNode;
 };
 
+// extract touched values for nested touched trees and map to current values
+export function extractTouchedValues(values: any, touched: Record<string, boolean>): Record<string, any> {
+    let acc: Record<string, any> = {};
+    if (!touched || typeof touched !== "object") {
+        return acc;
+    }
+
+    Object.entries(touched).forEach(([key, value]) => {
+        if (value) {
+            acc = setIn(acc, key, getIn(values, key));
+        }
+    })
+
+    return acc;
+}
+
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               fullIdPath,
@@ -126,7 +143,6 @@ export function EntityForm<M extends Record<string, any>>({
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
     }
 
-
     const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
 
@@ -164,7 +180,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -226,14 +242,31 @@ export function EntityForm<M extends Record<string, any>>({
             });
     };
 
+    const baseInitialValues = getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs);
+    const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
+    const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
-        initialValues: (initialDirtyValues ?? getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs)) as M,
-        initialDirty: Boolean(initialDirtyValues),
+        initialValues: initialValues as M,
+        initialDirty,
+        initialTouched: initialDirtyValues ?
+            flattenKeys(initialDirtyValues!)
+                .reduce((previousValue, currentValue) => ({
+                    ...previousValue,
+                    [currentValue]: true
+                }), {})
+            : {},
         onSubmit,
         onReset: () => {
             clearDirtyCache();
             onValuesModified?.(false);
         },
+        onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
+            const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+            if (controller.dirty) {
+                const touchedValues = extractTouchedValues(values, controller.touched);
+                saveEntityToCache(key, touchedValues);
+            }
+        },
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => {
@@ -405,7 +438,7 @@ export function EntityForm<M extends Record<string, any>>({
             values,
             previousValues: entity?.values,
             autoSave: autoSave ?? false
-        }).then((res) => {
+        }).then(() => {
             const eventName: CMSAnalyticsEvent = status === "new"
                 ? "new_entity_saved"
                 : (status === "copy" ? "entity_copied" : (status === "existing" ? "entity_edited" : "unmapped_event"));
@@ -443,7 +476,8 @@ export function EntityForm<M extends Record<string, any>>({
             type: "error",
             message: "Error updating id, check the console"
         });
-    }, []);
+        console.error(error);
+    }, [snackbarController]);
 
     const pluginActions: React.ReactNode[] = [];
     const plugins = customizationController.plugins;
@@ -507,13 +541,11 @@ export function EntityForm<M extends Record<string, any>>({
         }
     }, [formex.dirty]);
 
-    const deferredValues = useDeferredValue(formex.values);
     const modified = formex.dirty;
 
     const uniqueFieldValidator: CustomFieldValidator = useCallback(({
                                                                         name,
-                                                                        value,
-                                                                        property
+                                                                        value
                                                                     }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
@@ -525,13 +557,6 @@ export function EntityForm<M extends Record<string, any>>({
             : undefined,
         [entityId, resolvedCollection.properties, uniqueFieldValidator]);
 
-    useEffect(() => {
-        const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
-        if (modified) {
-            saveEntityToCache(key, deferredValues);
-        }
-    }, [deferredValues, modified, path, entityId, status]);
-
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
     useEffect(() => {
@@ -716,7 +741,7 @@ export function EntityForm<M extends Record<string, any>>({
             <form
                 onSubmit={formex.handleSubmit}
                 onReset={() => formex.resetForm({
-                    values: getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs) as M
+                    values: baseInitialValues as M
                 })}
                 noValidate
                 className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", className)}>
@@ -752,7 +777,7 @@ export function EntityForm<M extends Record<string, any>>({
     );
 }
 
-function getInitialEntityValues<M extends object>(
+export function getInitialEntityValues<M extends object>(
     authController: AuthController,
     collection: EntityCollection,
     path: string,
@@ -811,4 +836,3 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
-

package/src/form/EntityFormActions.tsx

@@ -7,7 +7,16 @@ import {
     ResolvedEntityCollection,
     SideEntityController
 } from "../types";
-import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    ErrorIcon,
+    IconButton,
+    LoadingButton,
+    Typography
+} from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
 
@@ -57,13 +66,13 @@ export function EntityFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         })
         : buildSideActions({
             fullPath,
@@ -73,13 +82,13 @@ export function EntityFormActions({
             collection,
             context,
             sideEntityController,
-            isSubmitting: formex.isSubmitting,
             disabled,
             status,
             pluginActions,
             openEntityMode,
             navigateBack,
-            formContext
+            formContext,
+            formex
         });
 }
 
@@ -92,13 +101,13 @@ type ActionsViewProps<M extends object> = {
     collection: ResolvedEntityCollection,
     context: FireCMSContext,
     sideEntityController: SideEntityController,
-    isSubmitting: boolean,
     disabled: boolean,
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext
+    formContext: FormContext,
+    formex: FormexController<any>;
 };
 
 function buildBottomActions<M extends object>({
@@ -110,15 +119,17 @@ function buildBottomActions<M extends object>({
                                                   collection,
                                                   context,
                                                   sideEntityController,
-                                                  isSubmitting,
                                                   disabled,
                                                   status,
                                                   pluginActions,
                                                   openEntityMode,
                                                   navigateBack,
-                                                  formContext
+                                                  formContext,
+                                                  formex
                                               }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
     return <DialogActions position={"absolute"}>
         {savingError &&
             <div className="text-right">
@@ -151,7 +162,7 @@ function buildBottomActions<M extends object>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || isSubmitting}
+        <Button variant="text" disabled={disabled || formex.isSubmitting}
                 color={"primary"}
                 type="reset">
             {status === "existing" ? "Discard" : "Clear"}
@@ -159,7 +170,8 @@ function buildBottomActions<M extends object>({
         <Button variant={"filled"}
                 color="primary"
                 type="submit"
-                disabled={disabled || isSubmitting}>
+                disabled={disabled || formex.isSubmitting}
+                startIcon={hasErrors ? <ErrorIcon/> : undefined}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
@@ -178,12 +190,14 @@ function buildSideActions<M extends object>({
                                                 collection,
                                                 context,
                                                 sideEntityController,
-                                                isSubmitting,
                                                 disabled,
                                                 status,
-                                                pluginActions
+                                                pluginActions,
+                                                formex
                                             }: ActionsViewProps<M>) {
 
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
     return <div
         className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
         <LoadingButton fullWidth={true}
@@ -191,12 +205,13 @@ function buildSideActions<M extends object>({
                        color="primary"
                        type="submit"
                        size={"large"}
-                       disabled={disabled || isSubmitting}>
+                       startIcon={hasErrors ? <ErrorIcon/> : undefined}
+                       disabled={disabled || formex.isSubmitting}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
             {status === "new" && "Create"}
         </LoadingButton>
-        <Button fullWidth={true} variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
 

package/src/form/components/ErrorFocus.tsx

@@ -1,51 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormex();
+    const {
+        isValidating,
+        errors,
+        version
+    } = useFormex();
+
+    const prevVersion = useRef(version);
 
     useEffect(() => {
+
+        if (version === prevVersion.current) {
+            return;
+        }
+
         const keys = Object.keys(errors);
 
-        // Whenever there are errors and the form is submitting but finished validating.
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        // Whenever there are errors and the form has been submitted and is not validating
+        if (!isValidating && keys.length > 0) {
             const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
                 `#form_field_${keys[0]}`
             );
 
-            if (errorElement && containerRef?.current) {
-                const scrollableParent = getScrollableParent(containerRef.current);
-                if (scrollableParent) {
-                    const top = errorElement.getBoundingClientRect().top;
-                    scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top - 196,
-                        behavior: "smooth"
-                    });
-                }
+            if (errorElement) {
+                errorElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
                 const input = errorElement.querySelector("input");
                 if (input) input.focus();
             }
+            prevVersion.current = version;
         }
-    }, [isSubmitting, isValidating, errors, containerRef]);
+    }, [isValidating, errors, containerRef, version]);
 
     // This component does not render anything by itself.
     return null;
 };
-
-const isScrollable = (ele: HTMLElement | null) => {
-    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
-
-    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
-    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
-
-    return hasScrollableContent && !isOverflowHidden;
-};
-
-const getScrollableParent = (ele: HTMLElement | null): HTMLElement | null => {
-    return (!ele || ele === document.body)
-        ? document.body
-        : (isScrollable(ele) ? ele : getScrollableParent(ele.parentNode as HTMLElement));
-};