@evoke-platform/ui-components 1.10.0-testing.11 → 1.10.0-testing.13

package/dist/published/components/custom/FormV2/FormRenderer.d.ts

@@ -16,7 +16,8 @@ export type FormRendererProps = BaseProps & {
     form: EvokeForm;
     title?: string | React.ReactNode;
     instance?: ObjectInstance | Document;
-    onChange: (id: string, value: unknown) => void;
+    onChange: (id: string, value: unknown) => void | Promise<void>;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     associatedObject?: {
         instanceId?: string;
         propertyId?: string;

package/dist/published/components/custom/FormV2/FormRenderer.js

@@ -12,7 +12,7 @@ import { assignIdsToSectionsAndRichText, convertDocToParameters, convertProperti
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -165,6 +165,7 @@ const FormRendererInternal = (props) => {
         action,
         discardChangesButtonLabel: 'Discard Changes',
         submitButtonLabel: display?.submitLabel ?? 'Submit',
+        disableDiscardChanges: !!form?.autosaveActionId,
     };
     return (React.createElement(Box, { ref: containerRef },
         React.createElement(FormContext.Provider, { value: {
@@ -182,6 +183,7 @@ const FormRendererInternal = (props) => {
                 parameters,
                 fieldHeight,
                 handleChange: onChange,
+                onAutosave,
                 triggerFieldReset,
                 showSubmitError: isSubmitted,
                 associatedObject,

package/dist/published/components/custom/FormV2/FormRendererContainer.js

@@ -1,11 +1,12 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
 import axios from 'axios';
-import { get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import { cloneDeep, get, isArray, isEmpty, isEqual, merge, omit, pick, set, uniq } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
+import Header from './components/Header';
 import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
 import FormRenderer from './FormRenderer';
 function FormRendererContainer(props) {
@@ -20,14 +21,34 @@ function FormRendererContainer(props) {
     const [parameters, setParameters] = useState();
     const [document, setDocument] = useState();
     const [instance, setInstance] = useState();
-    const [formData, setFormData] = useState();
+    const formDataRef = useRef();
+    // We only need the setter to force a re-render when form data updates; the value itself
+    // is intentionally not referenced elsewhere to avoid stale reads (we use formDataRef).
+    // Keep the setter to allow updating a version counter without declaring the value
+    // which would trigger a lint error for being unused.
+    const [, setFormDataVersion] = useState(0);
     const [action, setAction] = useState();
+    /**
+     * Updates form data synchronously and triggers a re-render.
+     *
+     * This function uses a ref for synchronous updates (to avoid race conditions in autosave)
+     * combined with a version counter to trigger React re-renders. This ensures that:
+     * 1. formDataRef.current is updated immediately (synchronous)
+     * 2. Components that depend on formData will re-render (via version increment)
+     * 3. Autosave always reads the latest data without timing issues
+     */
+    const setFormData = (newData) => {
+        formDataRef.current = newData;
+        setFormDataVersion((v) => v + 1);
+    };
     const [error, setError] = useState();
     const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
     });
+    const [isSaving, setIsSaving] = useState(false);
+    const [lastSavedData, setLastSavedData] = useState({});
     const userAccount = useAuthenticationContext()?.account;
     const objectStore = useObject(form?.objectId ?? objectId);
     const onError = (err) => {
@@ -189,6 +210,8 @@ function FormRendererContainer(props) {
             if (document && objectId) {
                 const defaultValues = await getDefaultValues(convertDocToEntries(document), document);
                 setFormData(defaultValues);
+                // Deep clone to avoid reference issues
+                setLastSavedData(cloneDeep(defaultValues));
                 if (!form) {
                     setForm({
                         id: 'documentForm',
@@ -201,6 +224,8 @@ function FormRendererContainer(props) {
             else if (form && (instance || !instanceId)) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
+                // Deep clone to avoid reference issues
+                setLastSavedData(cloneDeep(defaultValues));
             }
         };
         getInitialValues();
@@ -351,7 +376,7 @@ function FormRendererContainer(props) {
                                 for (const { fieldId, fieldValue } of defaultValuesArray) {
                                     const parameter = parameters?.find((param) => param.id === fieldId);
                                     if (parameter?.type === 'object') {
-                                        const dependentFields = await processValueUpdate(form?.entries, parameters, fieldValue, apiServices, fieldId, formData, userAccount);
+                                        const dependentFields = await processValueUpdate(form?.entries, parameters, fieldValue, apiServices, fieldId, formDataRef.current, userAccount);
                                         for (const field of dependentFields) {
                                             set(result, field.fieldId, field.fieldValue);
                                         }
@@ -382,6 +407,45 @@ function FormRendererContainer(props) {
         await processEntries(entries);
         return result;
     };
+    const handleAutosave = async (fieldId) => {
+        if (!form?.autosaveActionId || !formDataRef.current) {
+            return;
+        }
+        const currentValue = get(formDataRef.current, fieldId);
+        const lastValue = get(lastSavedData, fieldId);
+        if (isEqual(currentValue, lastValue)) {
+            return; // Field hasn't changed, skip save
+        }
+        try {
+            setIsSaving(true);
+            const submission = await formatSubmission(formDataRef.current, apiServices, objectId, instanceId, form, setSnackbarError);
+            // Handle document autosave
+            if (dataType === 'documents' && document) {
+                await apiServices.patch(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/documents/${documentId}`), pick(submission, ['metadata']).metadata ?? submission);
+                setDocument((prev) => ({
+                    ...prev,
+                    metadata: submission.metadata,
+                }));
+            }
+            // Handle object instance autosave
+            else if (instanceId && action?.type === 'update') {
+                await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
+                    actionId: form.autosaveActionId,
+                    input: pick(submission, sanitizedObject?.properties
+                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                        .map((property) => property.id) ?? []),
+                });
+            }
+            setLastSavedData(cloneDeep(formDataRef.current));
+            setIsSaving(false);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+            setIsSaving(false);
+        }
+    };
+    // Autosave is enabled if form.autosaveActionId exists.
+    const onAutosave = form?.autosaveActionId ? handleAutosave : undefined;
     async function onChange(id, value) {
         const parameter = parameters?.find((param) => param.id === id);
         const entries = getUnnestedEntries(form.entries);
@@ -392,7 +456,7 @@ function FormRendererContainer(props) {
         if (parameter) {
             if (parameter.type === 'object' && parameters && parameters.length > 0) {
                 // On change of a related object, update default values dependent on that object
-                const dependentFields = await processValueUpdate(form?.entries, parameters, value, apiServices, id, formData, userAccount);
+                const dependentFields = await processValueUpdate(form?.entries, parameters, value, apiServices, id, formDataRef.current, userAccount);
                 for (const field of dependentFields) {
                     onChange(field.fieldId, field.fieldValue);
                 }
@@ -403,16 +467,21 @@ function FormRendererContainer(props) {
                 value = value.value ? value.value : value;
             }
         }
-        if (!isEqual(value, get(formData, id))) {
-            setFormData((prev) => {
-                const newData = { ...prev };
-                set(newData, id, value);
-                return newData;
-            });
+        if (!isEqual(value, get(formDataRef.current, id))) {
+            const newData = { ...formDataRef.current };
+            set(newData, id, value);
+            setFormData(newData);
         }
     }
-    const isLoading = (instanceId && !formData && !document) || !form || !sanitizedObject;
+    const isLoading = (instanceId && !formDataRef.current && !document) || !form || !sanitizedObject;
     const status = error ? 'error' : isLoading ? 'loading' : 'ready';
+    // Compose a header renderer that injects the saving indicator into the rendered header
+    const composedRenderHeader = (props) => {
+        if (renderHeader) {
+            return renderHeader({ ...props, autosaving: !!form?.autosaveActionId && isSaving });
+        }
+        return React.createElement(Header, { ...props, autosaving: !!form?.autosaveActionId && isSaving });
+    };
     const onDiscardChanges = onDiscardChangesOverride
         ? onDiscardChangesOverride
         : async () => {
@@ -431,7 +500,7 @@ function FormRendererContainer(props) {
             padding: '0px',
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
-        } }, !isLoading ? (React.createElement(React.Fragment, null, form && sanitizedObject && (React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formData, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, associatedObject: associatedObject, renderHeader: renderHeader, renderBody: renderBody, renderFooter: document && !hasDocumentUpdateAccess ? () => React.createElement(React.Fragment, null) : renderFooter })))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        } }, !isLoading ? (React.createElement(React.Fragment, null, form && sanitizedObject && (React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: dataType !== 'documents' ? instance : document, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: document && !hasDocumentUpdateAccess ? () => React.createElement(React.Fragment, null) : renderFooter })))) : (React.createElement(Box, { sx: { padding: '20px' } },
         React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
             React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
             React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),

package/dist/published/components/custom/FormV2/components/Footer.d.ts

@@ -8,6 +8,7 @@ export type FooterProps = {
     submitButtonLabel?: string;
     discardChangesButtonLabel?: string;
     sx?: SxProps;
+    disableDiscardChanges?: boolean;
 };
 export declare const Footer: React.FC<FooterProps>;
 export type FooterActionsProps = Omit<FooterProps, 'sx'>;

package/dist/published/components/custom/FormV2/components/Footer.js

@@ -28,7 +28,7 @@ export const Footer = (props) => {
         React.createElement(FooterActions, { ...props })));
 };
 export const FooterActions = (props) => {
-    const { action, onDiscardChanges, onSubmit, submitButtonLabel, discardChangesButtonLabel } = props;
+    const { action, onDiscardChanges, onSubmit, submitButtonLabel, discardChangesButtonLabel, disableDiscardChanges } = props;
     const { width } = useContext(FormContext);
     const [loading, setLoading] = React.useState(false);
     const handleSubmit = async () => {
@@ -46,7 +46,7 @@ export const FooterActions = (props) => {
     });
     const { isXs } = breakpoints;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: onDiscardChanges, variant: "outlined", sx: {
+        !disableDiscardChanges && (React.createElement(Button, { onClick: onDiscardChanges, variant: "outlined", sx: {
                 margin: '5px',
                 marginX: isXs ? '0px' : undefined,
                 color: 'black',
@@ -56,7 +56,7 @@ export const FooterActions = (props) => {
                     backgroundColor: '#f2f4f7',
                     border: '1px solid rgb(206, 212, 218)',
                 },
-            } }, discardChangesButtonLabel),
+            } }, discardChangesButtonLabel)),
         React.createElement(LoadingButton, { onClick: handleSubmit, variant: "contained", sx: {
                 lineHeight: '2.75',
                 margin: '5px 0 5px 5px',

package/dist/published/components/custom/FormV2/components/FormContext.d.ts

@@ -15,7 +15,8 @@ type FormContextType = {
     setExpandedSections?: React.Dispatch<React.SetStateAction<ExpandedSection[]>>;
     setExpandAll?: React.Dispatch<React.SetStateAction<boolean | undefined | null>>;
     parameters?: InputParameter[];
-    handleChange: (name: string, value: unknown) => void;
+    handleChange: (name: string, value: unknown) => void | Promise<void>;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     fieldHeight?: 'small' | 'medium';
     triggerFieldReset?: boolean;
     showSubmitError?: boolean;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/AddressFields.js

@@ -7,7 +7,7 @@ import FieldWrapper from '../FieldWrapper';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 function AddressFields(props) {
     const { entry, readOnly, entryId, fieldDefinition } = props;
-    const { getValues, instance, errors, handleChange, fieldHeight, parameters } = useFormContext();
+    const { getValues, instance, errors, handleChange, onAutosave, fieldHeight, parameters } = useFormContext();
     const apiServices = useApiServices();
     const addressObject = entryId.split('.')[0];
     const addressField = entryId.split('.')[1];
@@ -22,24 +22,41 @@ function AddressFields(props) {
             params: { query: query },
         });
     };
-    const handleAddressChange = (name, value) => {
-        if (addressField === 'line1' && typeof value === 'object' && value.line1) {
-            const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
-            addressKeys.forEach((key) => {
-                const fullKey = `${addressObject}.${key}`;
-                if (parameters?.some((p) => p.id === fullKey)) {
-                    const fieldValue = value[key];
-                    handleChange(fullKey, fieldValue);
+    const handleAddressChange = async (name, value) => {
+        try {
+            if (addressField === 'line1' && typeof value === 'object' && value.line1) {
+                const addressKeys = ['line1', 'city', 'county', 'state', 'zipCode'];
+                // Await each handleChange sequentially to ensure proper order
+                for (const key of addressKeys) {
+                    const fullKey = `${addressObject}.${key}`;
+                    if (parameters?.some((p) => p.id === fullKey)) {
+                        const fieldValue = value[key];
+                        await handleChange(fullKey, fieldValue);
+                    }
                 }
-            });
+                // Autosave immediately after autocomplete fills all fields
+                try {
+                    await onAutosave?.(entryId);
+                }
+                catch (error) {
+                    console.error('Autosave failed:', error);
+                }
+            }
+            else {
+                await handleChange(name, value);
+            }
         }
-        else {
-            handleChange(name, value);
+        catch (error) {
+            console.error('Failed to update field:', error);
         }
     };
     const addressErrors = errors?.[addressObject];
     const addressFieldError = addressErrors?.[addressField];
-    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
+    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: "string", label: display?.label || 'default', description: !readOnly ? display?.description : undefined, tooltip: display?.tooltip, value: fieldValue, maxLength: 'maxLength' in validation ? validation?.maxLength : 0, required: entry.display?.required || false, showCharCount: !readOnly && display?.charCount, viewOnly: !!readOnly, prefix: display?.prefix, suffix: display?.suffix }, !readOnly ? (React.createElement(FormField, { property: fieldDefinition, defaultValue: fieldValue, onChange: handleAddressChange, onBlur: () => {
+            onAutosave?.(entryId)?.catch((error) => {
+                console.error('Autosave failed:', error);
+            });
+        }, isMultiLineText: !!display?.rowCount, readOnly: entry.type === 'readonlyField', ...(addressField === 'line1' && { queryAddresses }), mask: validation?.mask, placeholder: display?.placeholder, isOptionEqualToValue: isOptionEqualToValue, size: fieldHeight, error: !!addressFieldError, errorMessage: addressFieldError?.message, additionalProps: {
             ...(display?.description && {
                 inputProps: {
                     'aria-describedby': `${entryId}-description`,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Criteria.js

@@ -8,7 +8,7 @@ import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
     const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, handleChange } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave } = useFormContext();
     const [loadingError, setLoadingError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
@@ -57,9 +57,22 @@ export default function Criteria(props) {
     useEffect(() => {
         fetchProperties();
     }, [fetchProperties]);
-    const handleUpdate = (criteria) => {
+    const handleUpdate = async (criteria) => {
         if (criteria || value) {
-            handleChange(fieldDefinition.id, criteria ?? null);
+            const newValue = criteria ?? null;
+            try {
+                await handleChange(fieldDefinition.id, newValue);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(fieldDefinition.id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
     if (loadingError) {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -12,7 +12,7 @@ import { DocumentList } from './DocumentList';
 export const Document = (props) => {
     const { id, canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object, handleChange, instance } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
     const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
@@ -49,13 +49,25 @@ export const Document = (props) => {
         checkPermissions();
     }, [checkPermissions]);
     const handleUpload = async (files) => {
+        // Store File objects in form state - they will be uploaded during autosave via formatSubmission()
         const newDocuments = [...(documents ?? []), ...(files ?? [])];
         setDocuments(newDocuments);
-        handleChange(id, newDocuments);
+        try {
+            await handleChange(id, newDocuments);
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const uploadDisabled = !!validate?.maxDocuments && (documents?.length ?? 0) >= validate.maxDocuments;
     const { getRootProps, getInputProps, open, fileRejections } = useDropzone({
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         onDrop: (files) => handleUpload(files),
         disabled: uploadDisabled,
         accept: validate?.allowedFileExtensions
@@ -109,7 +121,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, handleChange: handleChange, onAutosave: onAutosave, value: value, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SavedDocumentReference } from '../../types';
 type DocumentListProps = {
     handleChange: (propertyId: string, value: (File | SavedDocumentReference)[] | undefined) => void;
+    onAutosave?: (fieldId: string) => void | Promise<void>;
     id: string;
     canUpdateProperty: boolean;
     value: (File | SavedDocumentReference)[] | undefined;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -24,7 +24,7 @@ const viewableFileTypes = [
     'text/plain',
 ];
 export const DocumentList = (props) => {
-    const { handleChange, id, canUpdateProperty, value: documents, setSnackbarError } = props;
+    const { handleChange, onAutosave, id, canUpdateProperty, value: documents, setSnackbarError } = props;
     const apiServices = useApiServices();
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
@@ -88,9 +88,22 @@ export const DocumentList = (props) => {
     };
     const isFile = (doc) => doc instanceof File;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);
-    const handleRemove = (index) => {
+    const handleRemove = async (index) => {
         const updatedDocuments = documents?.filter((_, i) => i !== index) ?? [];
-        handleChange(id, updatedDocuments.length === 0 ? undefined : updatedDocuments);
+        const newValue = updatedDocuments.length === 0 ? undefined : updatedDocuments;
+        try {
+            await handleChange(id, newValue);
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     };
     const openDocument = async (index) => {
         const doc = documents?.[index];

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -55,7 +55,7 @@ const styles = {
 };
 export const Image = (props) => {
     const { id, canUpdateProperty, error, value, hasDescription } = props;
-    const { handleChange } = useFormContext();
+    const { handleChange, onAutosave: onAutosave } = useFormContext();
     const [image, setImage] = useState();
     useEffect(() => {
         if (typeof value === 'string') {
@@ -63,15 +63,41 @@ export const Image = (props) => {
         }
     }, [value]);
     const handleUpload = async (file) => {
+        // max file size 300KB
         if (file?.size && file.size <= 300000) {
-            const dataUrl = file ? await blobToDataUrl(file) : null;
+            const dataUrl = await blobToDataUrl(file);
             setImage(dataUrl);
-            handleChange(id, dataUrl);
+            try {
+                await handleChange(id, dataUrl);
+            }
+            catch (error) {
+                console.error('Failed to update field:', error);
+                return;
+            }
+            try {
+                await onAutosave?.(id);
+            }
+            catch (error) {
+                console.error('Autosave failed:', error);
+            }
         }
     };
-    const handleRemove = (e) => {
+    const handleRemove = async (e) => {
         setImage(null);
-        handleChange(id, '');
+        try {
+            await handleChange(id, '');
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            e.stopPropagation();
+            return;
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
         e.stopPropagation();
     };
     const { getRootProps, getInputProps, open } = useDropzone({

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -6,7 +6,7 @@ import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../..
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions, handleChange, fieldHeight } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
     const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
@@ -40,9 +40,21 @@ const UserProperty = (props) => {
             });
         }
     }, [id]);
-    function handleChangeUserProperty(id, value) {
+    async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
-        handleChange(id, updatedValue);
+        try {
+            await handleChange(id, updatedValue);
+        }
+        catch (error) {
+            console.error('Failed to update field:', error);
+            return; // Exit early if handleChange fails
+        }
+        try {
+            await onAutosave?.(id);
+        }
+        catch (error) {
+            console.error('Autosave failed:', error);
+        }
     }
     return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), clearIcon: !loadingOptions && userValue ? (React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
                 if (e.key === 'Enter') {