@evoke-platform/ui-components 1.13.0-dev.7 → 1.14.0

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

@@ -1,27 +1,21 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { cloneDeep, get, isArray, isEmpty, isEqual, omit, pick, set } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
-import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
 import FormRenderer from './FormRenderer';
-// Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
 function FormRendererContainer(props) {
-    return (React.createElement(ConditionalQueryClientProvider, null,
-        React.createElement(FormRendererContainerInner, { ...props })));
-}
-// Inner component that assumes QueryClient context is available
-function FormRendererContainerInner(props) {
-    const { instanceId, pageNavigation, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
+    const { instanceId, pageNavigation, dataType, title, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const { id: appId } = useApp();
+    const [sanitizedObject, setSanitizedObject] = useState();
+    const [navigationSlug, setNavigationSlug] = useState();
     const [parameters, setParameters] = useState();
     const [instance, setInstance] = useState();
     const formDataRef = useRef();
@@ -59,68 +53,72 @@ function FormRendererContainerInner(props) {
         setSnackbarError({ ...snackbarError, isError: true });
         setError(code ?? err);
     };
-    const { data: sanitizedObject, error: sanitizedObjectError } = useQuery({
-        queryKey: [form?.objectId ?? objectId, ...(instanceId ? [instanceId] : []), 'sanitized'],
-        queryFn: () => 
-        // form?.objectId is needed for subtype forms to get the correct object
-        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } }),
-        staleTime: Infinity,
-        enabled: !!(form?.objectId || objectId),
-    });
-    const { data: fetchedInstance, error: instanceError } = useQuery({
-        queryKey: [objectId, instanceId, 'instance'],
-        queryFn: () => objectStore.getInstance(instanceId),
-        staleTime: Infinity,
-        enabled: !!instanceId && !!sanitizedObject,
-    });
     useEffect(() => {
-        if (fetchedInstance)
-            setInstance(fetchedInstance);
-        if (instanceError)
-            onError(instanceError);
-    }, [fetchedInstance, instanceError]);
-    useEffect(() => {
-        if (!sanitizedObject)
-            return;
-        const action = sanitizedObject.actions?.find((a) => a.id === (form?.actionId || actionId));
-        if (action && (instanceId || action.type === 'create')) {
-            setAction(action);
-            // Clear error if action is found after being missing
-            setError((prevError) => (prevError === 'Action could not be found' ? undefined : prevError));
-        }
-        else {
-            setError('Action could not be found');
-        }
-    }, [sanitizedObject, actionId, form?.actionId, instanceId]);
-    const { data: navigationSlug } = useQuery({
-        queryKey: [appId, 'navigationSlug'],
-        queryFn: () => apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`)),
-        select: (page) => page.slug,
-        staleTime: Infinity,
-        enabled: !!pageNavigation,
-    });
-    const formIdToFetch = formId || action?.defaultFormId;
-    const { data: fetchedForm, error: fetchedFormError } = useFormById(formIdToFetch ?? '', apiServices);
+        (async () => {
+            try {
+                if (instanceId) {
+                    const instance = await objectStore.getInstance(instanceId);
+                    setInstance(instance);
+                }
+                const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
+                setSanitizedObject(object);
+                const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
+                if (action && (instanceId || action.type === 'create')) {
+                    setAction(action);
+                    // Clear error if action is found after being missing
+                    // TODO: This entire effect should take place after form is fetched to avoid an error flickering
+                    // That is, this effect should be merged with the one below that fetches the form
+                    setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
+                }
+                else {
+                    setError('Action could not be found');
+                }
+            }
+            catch (error) {
+                onError(error);
+            }
+        })();
+    }, [dataType, form, instanceId]);
     useEffect(() => {
-        if (!formIdToFetch && action) {
-            setError('Action form could not be found');
+        if (pageNavigation) {
+            apiServices
+                .get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`))
+                .then((page) => {
+                setNavigationSlug(page?.slug);
+            });
         }
-    }, [formIdToFetch, action]);
+    }, []);
     useEffect(() => {
-        if (fetchedForm) {
-            if (actionId && fetchedForm.actionId !== actionId) {
-                setError('Configured action ID does not match form action ID');
-            }
-            setForm(fetchedForm);
+        const needsInstance = action?.type !== 'create' && !!instanceId;
+        // Instance and Action are loaded in the side effect above; wait for them to complete.
+        const loading = (actionId && !action) || (needsInstance && !instance);
+        if (form || loading)
+            return;
+        if ((formId || action?.defaultFormId) && formId !== '_auto_') {
+            apiServices
+                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
+                .then((evokeForm) => {
+                // If an actionId is provided, ensure it matches the form's actionId
+                if (!actionId || evokeForm?.actionId === actionId) {
+                    const form = evokeForm;
+                    setForm(form);
+                }
+                else {
+                    setError('Configured action ID does not match form action ID');
+                }
+            })
+                .catch((error) => {
+                onError(error);
+            });
         }
-        else if (action?.type === 'delete' && formId === '_auto_' && instance) {
+        else if (action?.type === 'delete' && formId === '_auto_') {
             setForm({
                 id: '',
-                name: 'Delete',
+                name: '',
                 entries: [
                     {
                         type: 'content',
-                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                        html: `<p><span style="font-size: 16px;">You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</span></p>`,
                     },
                 ],
                 objectId: objectId,
@@ -130,12 +128,10 @@ function FormRendererContainerInner(props) {
                 },
             });
         }
-    }, [fetchedForm, instance, action, formId]);
-    useEffect(() => {
-        const error = sanitizedObjectError || fetchedFormError;
-        if (error)
-            onError(error);
-    }, [sanitizedObjectError, fetchedFormError]);
+        else {
+            setError('Action form could not be found');
+        }
+    }, [action, actionId, objectId, instance]);
     useEffect(() => {
         if (!form)
             return;
@@ -145,7 +141,7 @@ function FormRendererContainerInner(props) {
     }, [form, action?.parameters, sanitizedObject]);
     useEffect(() => {
         const getInitialValues = async () => {
-            if (form && parameters && (instance || !instanceId)) {
+            if (form && (instance || !instanceId)) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
                 // Deep clone to avoid reference issues
@@ -153,7 +149,7 @@ function FormRendererContainerInner(props) {
             }
         };
         getInitialValues();
-    }, [form, instance, sanitizedObject, parameters]);
+    }, [form, instance, sanitizedObject]);
     const onSubmissionSuccess = (updatedInstance) => {
         setSnackbarError({
             showAlert: true,
@@ -162,7 +158,7 @@ function FormRendererContainerInner(props) {
         });
         if (navigationSlug) {
             if (navigationSlug.includes(':instanceId')) {
-                const navigateInstanceId = action?.type === 'create' ? updatedInstance.id : instanceId;
+                const navigateInstanceId = action?.type === 'create' ? updatedInstance?.id : instanceId;
                 navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', navigateInstanceId ?? ':instanceId')}`);
             }
             else {
@@ -171,17 +167,18 @@ function FormRendererContainerInner(props) {
         }
         setInstance(updatedInstance);
     };
-    /**
-     * Manually links any newly uploaded files in the submission to the specified instance.
-     * @param submission The form submission data
-     * @param linkTo The instance to link the files to
-     */
     const linkFiles = async (submission, linkTo) => {
-        // Create file links for any uploaded files that haven't been linked yet
+        // Create file links for any uploaded files after instance creation
         for (const property of sanitizedObject?.properties?.filter((property) => property.type === 'file') ?? []) {
             const files = submission[property.id];
             if (files?.length) {
-                await createFileLinks(files, linkTo, apiServices);
+                try {
+                    await createFileLinks(files, linkTo, apiServices);
+                }
+                catch (error) {
+                    console.error('Failed to create file links:', error);
+                    // Don't fail the entire submission if file linking fails
+                }
             }
         }
     };
@@ -198,9 +195,11 @@ function FormRendererContainerInner(props) {
                         ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
-                // Manually link files to created instance.
-                await linkFiles(submission, { id: response.id, objectId: form.objectId });
-                onSubmissionSuccess(response);
+                if (response) {
+                    // Manually link files to created instance.
+                    await linkFiles(submission, { id: response.id, objectId: form.objectId });
+                    onSubmissionSuccess(response);
+                }
             }
             else if (instanceId && action) {
                 const response = await objectStore.instanceAction(instanceId, {
@@ -210,26 +209,21 @@ function FormRendererContainerInner(props) {
                         .map((property) => property.id) ?? []),
                 });
                 if (sanitizedObject && instance) {
-                    if (!onAutosave) {
-                        // For non-autosave updates, link any uploaded files to the instance.
-                        await linkFiles(submission, { id: instanceId, objectId: objectId });
-                    }
                     onSubmissionSuccess(response);
-                    // Only delete the necessary files after submission succeeds to avoid deleting a file prematurely.
-                    await deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
+                    deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
                 }
             }
         }
         catch (error) {
+            // Handle deleteDocuments for uploaded documents if the main submission fails
+            if (instanceId && action && sanitizedObject && instance) {
+                deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
+            }
             setSnackbarError({
                 isError: true,
                 showAlert: true,
                 message: error.response?.data?.error?.message ?? 'An error occurred',
             });
-            if (instanceId && action && sanitizedObject && instance) {
-                // For an update, uploaded documents have been linked to the instance and need to be deleted.
-                await deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
-            }
             throw error; // Throw error so caller knows submission failed
         }
     };
@@ -261,10 +255,10 @@ function FormRendererContainerInner(props) {
                 const parameter = parameters?.find((param) => param.id === fieldId);
                 if (associatedObject?.propertyId === fieldId &&
                     associatedObject?.instanceId &&
-                    (parameter || associatedObject.objectId) &&
+                    parameter &&
                     action?.type === 'create') {
                     try {
-                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter?.objectId || associatedObject.objectId}/instances/${associatedObject.instanceId}`));
+                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
                         result[associatedObject.propertyId] = instance;
                     }
                     catch (error) {
@@ -342,7 +336,6 @@ function FormRendererContainerInner(props) {
                         ?.filter((property) => !property.formula && property.type !== 'collection')
                         .map((property) => property.id) ?? []),
                 });
-                await linkFiles(submission, { id: instanceId, objectId });
             }
             setLastSavedData(cloneDeep(formDataRef.current));
             setIsSaving(false);
@@ -405,7 +398,7 @@ function FormRendererContainerInner(props) {
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
         } }, !isLoading ? (React.createElement(React.Fragment, null,
-        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: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter }))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: 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/Body.js

@@ -22,6 +22,6 @@ export const Body = (props) => {
             React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
         React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
             React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
-            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, ...sx } }, entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, paddingY: isSm || isXs ? '6px' : '14px', ...sx } }, entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
 };
 export default Body;

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

@@ -20,7 +20,7 @@ export const Footer = (props) => {
             padding: isSmallerThanMd ? '16px' : '20px',
             justifyContent: isXs ? 'center' : 'flex-end',
             alignItems: 'center',
-            borderTop: '1px solid #f4f6f8',
+            borderTop: '1px solid #e9ecef',
             borderRadius: '0px 0px 6px 6px',
             zIndex: 3,
             width: '100%',

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

@@ -23,7 +23,6 @@ type FormContextType = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
     };
     form?: EvokeForm;
     width: number;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -13,7 +13,6 @@ export type ActionDialogProps = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
-        objectId?: string;
     };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableField.js

@@ -1,21 +1,24 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { useQuery } from '@tanstack/react-query';
-import { debounce, isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import { debounce, isArray, isEmpty, isEqual } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Skeleton } from '../../../../../core';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
 import { getMiddleObject, getMiddleObjectFilter, getPrefixedUrl, transformToWhere } from '../../utils';
 import { DropdownRepeatableFieldInput } from './DropdownRepeatableFieldInput';
 const DropdownRepeatableField = (props) => {
-    const { id, fieldDefinition, criteria, readOnly, middleObject, hasDescription, viewLayout, initialMiddleObjectInstances, } = props;
-    const { instance } = useFormContext();
+    const { id, fieldDefinition, criteria, readOnly, initialMiddleObjectInstances, middleObject, hasDescription, viewLayout, } = props;
+    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
     const [layout, setLayout] = useState();
+    const [loading, setLoading] = useState(false);
     const [layoutLoaded, setLayoutLoaded] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [middleObjectInstances, setMiddleObjectInstances] = useState(initialMiddleObjectInstances);
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState();
+    const [endObject, setEndObject] = useState(fetchedOptions[`${fieldDefinition.id}EndObject`]);
+    const [endObjectInstances, setEndObjectInstances] = useState(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] || []);
+    const [initialLoading, setInitialLoading] = useState(endObjectInstances ? false : true);
     const [selectedOptions, setSelectedOptions] = useState([]);
+    const [hasFetched, setHasFetched] = useState(!!fetchedOptions[`${fieldDefinition.id}EndObjectInstancesHaveFetched`] || false);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
@@ -38,12 +41,6 @@ const DropdownRepeatableField = (props) => {
         const newInstances = await getMiddleObjectInstances();
         setMiddleObjectInstances(newInstances);
     };
-    useEffect(() => {
-        instanceChanges?.subscribe(middleObject.rootObjectId, () => {
-            fetchMiddleObjectInstances();
-        });
-        return () => instanceChanges?.unsubscribe(middleObject.rootObjectId);
-    }, [instanceChanges, fetchMiddleObjectInstances, middleObject]);
     const setDropDownSelections = (instances) => {
         setSelectedOptions(instances
             .filter((currInstance) => fieldDefinition.manyToManyPropertyId in currInstance)
@@ -55,86 +52,146 @@ const DropdownRepeatableField = (props) => {
             .sort((instanceA, instanceB) => instanceA.label.localeCompare(instanceB.label)));
     };
     useEffect(() => {
-        setDropDownSelections(middleObjectInstances);
-    }, [middleObjectInstances]);
-    const endObjectProperty = useMemo(() => middleObject.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id), [middleObject.properties, fieldDefinition.manyToManyPropertyId]);
-    const { data: endObject } = useQuery({
-        queryKey: [endObjectProperty?.objectId, 'endObject', 'effective'],
-        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty?.objectId}/effective`), {
-            params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } },
-        }),
-        staleTime: Infinity,
-        enabled: !!endObjectProperty?.objectId,
-    });
-    useEffect(() => {
-        if (!endObject)
-            return;
-        let defaultLayout;
-        if (endObject.viewLayout?.dropdown) {
-            defaultLayout = {
-                id: 'default',
-                name: 'Default',
-                objectId: endObject.id,
-                ...endObject.viewLayout.dropdown,
-            };
+        const endObjectProperty = middleObject?.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
+        if (endObjectProperty && endObjectProperty.objectId && !fetchedOptions[`${fieldDefinition.id}EndObject`]) {
+            setLayoutLoaded(false);
+            apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/effective`), { params: { filter: { fields: ['id', 'name', 'properties', 'viewLayout'] } } }, (error, effectiveObject) => {
+                if (error) {
+                    console.error(error);
+                }
+                else {
+                    // If there's no error then the effective object is defined.
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    const endObject = effectiveObject;
+                    setEndObject(endObject);
+                    let defaultLayout;
+                    if (endObject.viewLayout?.dropdown) {
+                        defaultLayout = {
+                            id: 'default',
+                            name: 'Default',
+                            objectId: endObject.id,
+                            ...endObject.viewLayout.dropdown,
+                        };
+                    }
+                    if (viewLayout) {
+                        apiServices
+                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                            .then(setLayout)
+                            .catch(() => setLayout(defaultLayout))
+                            .finally(() => setLayoutLoaded(true));
+                    }
+                    else {
+                        setLayout(defaultLayout);
+                        setLayoutLoaded(true);
+                    }
+                }
+            });
         }
-        if (viewLayout) {
-            apiServices
-                .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
-                .then(setLayout)
-                .catch(() => setLayout(defaultLayout))
-                .finally(() => setLayoutLoaded(true));
+    }, [middleObject, viewLayout]);
+    useEffect(() => {
+        instanceChanges?.subscribe(middleObject.rootObjectId, () => {
+            fetchMiddleObjectInstances();
+        });
+        return () => instanceChanges?.unsubscribe(middleObject.rootObjectId);
+    }, [instanceChanges, fetchMiddleObjectInstances]);
+    const fetchEndObjectInstances = useCallback((searchedName) => {
+        if ((fieldDefinition.objectId &&
+            fieldDefinition.manyToManyPropertyId &&
+            endObjectInstances.length === 0 &&
+            !hasFetched) ||
+            (searchedName !== undefined && searchedName !== '')) {
+            setLoading(true);
+            const endObjectProperty = middleObject.properties?.find((currProperty) => fieldDefinition.manyToManyPropertyId === currProperty.id);
+            if (endObjectProperty?.objectId) {
+                const { propertyId, direction } = layout?.sort ?? {
+                    propertyId: 'name',
+                    direction: 'asc',
+                };
+                const filter = {
+                    limit: 100,
+                    order: `${propertyId} ${direction}`,
+                };
+                let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
+                if (searchedName?.length) {
+                    const nameCriteria = transformToWhere({
+                        name: {
+                            like: searchedName,
+                            options: 'i',
+                        },
+                    });
+                    searchCriteria = !isEmpty(criteria)
+                        ? {
+                            and: [searchCriteria, nameCriteria],
+                        }
+                        : nameCriteria;
+                }
+                filter.where = searchCriteria;
+                apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(filter) } }, (error, instances) => {
+                    if (!error && instances) {
+                        setEndObjectInstances(instances);
+                        setHasFetched(true);
+                    }
+                    setInitialLoading(false);
+                    setLoading(false);
+                });
+            }
         }
-        else {
-            setLayout(defaultLayout);
-            setLayoutLoaded(true);
+        else if (endObjectInstances.length !== 0) {
+            setInitialLoading(false);
         }
-    }, [endObject, viewLayout]);
-    const debouncedSetSearchValue = useMemo(() => debounce((value) => {
-        setDebouncedSearchValue(value);
-    }, 200), []);
+    }, [fieldDefinition.objectId, fieldDefinition.manyToManyPropertyId, middleObject]);
+    const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
     useEffect(() => {
-        debouncedSetSearchValue(searchValue);
-        return () => {
-            debouncedSetSearchValue.cancel();
-        };
-    }, [searchValue, debouncedSetSearchValue, layoutLoaded]);
-    const searchCriteria = useMemo(() => {
-        let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
-        if (debouncedSearchValue?.length) {
-            const nameCriteria = transformToWhere({
-                name: {
-                    like: debouncedSearchValue,
-                    options: 'i',
-                },
+        if (!fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] ||
+            (isArray(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`]) &&
+                fetchedOptions[`${fieldDefinition.id}EndObjectInstances`].length === 0)) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}EndObjectInstances`]: endObjectInstances,
+                [`${fieldDefinition.id}EndObjectInstancesHaveFetched`]: hasFetched,
             });
-            searchCriteria = !isEmpty(criteria) ? { and: [searchCriteria, nameCriteria] } : nameCriteria;
         }
-        return searchCriteria;
-    }, [criteria, debouncedSearchValue]);
-    // Construct filter from debounced criteria
-    const updatedFilter = useMemo(() => {
-        const { propertyId, direction } = layout?.sort ?? {
-            propertyId: 'name',
-            direction: 'asc',
-        };
-        const filter = {
-            limit: 100,
-            order: `${propertyId} ${direction}`,
-            where: searchCriteria,
+        if (!fetchedOptions[`${fieldDefinition.id}EndObject`]) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}EndObject`]: endObject,
+            });
+        }
+        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
+            setFetchedOptions({
+                [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances,
+            });
+        }
+    }, [endObjectInstances, endObject, middleObjectInstances]);
+    useEffect(() => {
+        const updateFetchedOptions = (key, value) => {
+            if (!fetchedOptions[key]) {
+                setFetchedOptions({ [key]: value });
+            }
         };
-        return filter;
-    }, [searchCriteria, layout]);
-    const { data: endObjectInstances = [], isLoading: initialLoading } = useQuery({
-        queryKey: ['endObjectInstances', endObjectProperty.objectId, updatedFilter],
-        queryFn: async () => {
-            return apiServices.get(getPrefixedUrl(`/objects/${endObjectProperty.objectId}/instances`), { params: { filter: JSON.stringify(updatedFilter) } });
-        },
-        enabled: !!fieldDefinition.objectId && !!fieldDefinition.manyToManyPropertyId && !!endObjectProperty?.objectId,
-        staleTime: Infinity,
-        // Keep old instances while filtering
-        placeholderData: (previousData) => previousData,
-    });
+        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstances`, endObjectInstances);
+        updateFetchedOptions(`${fieldDefinition.id}EndObjectInstancesHaveFetched`, hasFetched);
+        updateFetchedOptions(`${fieldDefinition.id}EndObject`, endObject);
+        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
+            setFetchedOptions({ [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances });
+        }
+    }, [
+        endObjectInstances,
+        endObject,
+        middleObjectInstances,
+        fetchedOptions,
+        fieldDefinition.id,
+        hasFetched,
+        initialMiddleObjectInstances,
+        setFetchedOptions,
+    ]);
+    useEffect(() => {
+        debouncedEndObjectSearch(searchValue);
+        return () => debouncedEndObjectSearch.cancel();
+    }, [searchValue, debouncedEndObjectSearch]);
+    useEffect(() => {
+        if (layoutLoaded) {
+            fetchEndObjectInstances();
+        }
+    }, [fetchEndObjectInstances, layoutLoaded]);
     const saveMiddleInstance = async (endObjectId, endObjectName) => {
         if (fieldDefinition.objectId) {
             const middleObject = getMiddleObject(fieldDefinition, endObjectId, endObjectName, instance);
@@ -171,6 +228,6 @@ const DropdownRepeatableField = (props) => {
             });
         }
     };
-    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: initialLoading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, hasDescription: hasDescription }))));
+    return initialLoading || !middleObject || !middleObjectInstances || !endObjectInstances || !endObject ? (React.createElement(Skeleton, null)) : (React.createElement(React.Fragment, null, middleObjectInstances && endObject && (React.createElement(DropdownRepeatableFieldInput, { id: id, fieldDefinition: fieldDefinition, readOnly: readOnly || !middleObject.actions?.some((action) => action.id === '_create'), layout: layout, middleObjectInstances: middleObjectInstances, endObjectInstances: endObjectInstances ?? [], endObject: endObject, searchValue: searchValue, loading: loading, handleSaveMiddleInstance: saveMiddleInstance, handleRemoveMiddleInstance: removeMiddleInstance, setSearchValue: setSearchValue, setSnackbarError: setSnackbarError, snackbarError: snackbarError, selectedOptions: selectedOptions, setSelectedOptions: setSelectedOptions, setDropdownSelections: setDropDownSelections, hasDescription: hasDescription }))));
 };
 export default DropdownRepeatableField;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/DropdownRepeatableFieldInput.d.ts

@@ -6,6 +6,7 @@ type DropdownRepeatableFieldInputProps = {
     fieldDefinition: InputParameter | Property;
     readOnly: boolean;
     layout?: DropdownViewLayout;
+    middleObjectInstances: ObjectInstance[];
     endObjectInstances: ObjectInstance[];
     endObject: Pick<Obj, 'id' | 'name' | 'properties'>;
     searchValue: string;
@@ -25,6 +26,7 @@ type DropdownRepeatableFieldInputProps = {
         message?: string;
         isError: boolean;
     };
+    setDropdownSelections?: (middleObjectInstances: ObjectInstance[]) => void;
     hasDescription?: boolean;
 };
 export type DropdownRepeatableFieldInputOption = AutocompleteOption & {