@evoke-platform/ui-components 1.14.0 → 1.15.1

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

@@ -1,7 +1,7 @@
-import { isArray, isEmpty, uniq } from 'lodash';
+import { isArray, isEmpty, isObject, uniq } from 'lodash';
 import { DateTime } from 'luxon';
-import { getEntryId, getPrefixedUrl, isAddressProperty } from './utils';
-export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue) {
+import { getEntryId, getPrefixedUrl, isAddressProperty, transformToWhere, updateCriteriaInputs } from './utils';
+export async function evalDefaultVals(parameters, entry, fieldValue, fieldId, apiServices, userAccount, formValues, updatedRelatedObjectValue, updatedRelatedObjectParamId) {
     const updates = [];
     const parameter = parameters.find((param) => param.id === fieldId);
     const defaultValue = entry.display?.defaultValue;
@@ -14,7 +14,6 @@ export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldV
             const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
             const groups = regex.exec(item)?.groups;
             if (groups?.relatedObjectProperty && groups?.nestedProperty) {
-                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
                 let relatedObjectInstance = updatedRelatedObjectValue;
                 if (!relatedObjectInstance && !isEmpty(formValues)) {
                     relatedObjectInstance = formValues[groups.relatedObjectProperty];
@@ -28,30 +27,14 @@ export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldV
                     ]);
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObjectInstance?.id && relatedObjectParameter) {
-                    let relatedObjectId = relatedObjectParameter.objectId;
-                    if (!relatedObjectId) {
-                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
-                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
-                    }
-                    const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
-                            if (error) {
-                                console.error(error);
-                                return resolve(undefined);
-                            }
-                            resolve(instance);
-                        });
-                    });
-                    if (instance) {
-                        fieldValue = uniq([
-                            ...staticValues,
-                            ...(isArray(instance[groups.nestedProperty])
-                                ? instance[groups.nestedProperty]
-                                : []),
-                        ]);
-                        updates.push({ fieldId, fieldValue });
-                    }
+                else if (relatedObjectInstance) {
+                    fieldValue = uniq([
+                        ...staticValues,
+                        ...(isArray(relatedObjectInstance[groups.nestedProperty])
+                            ? relatedObjectInstance[groups.nestedProperty]
+                            : []),
+                    ]);
+                    updates.push({ fieldId, fieldValue });
                 }
                 else {
                     updates.push({ fieldId, fieldValue: staticValues });
@@ -65,42 +48,23 @@ export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldV
     }
     else if (typeof defaultValue === 'string' && /^{{.*}}$/.test(defaultValue)) {
         if (isAddressProperty(fieldId)) {
-            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode)}}$/;
+            const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode|country)}}$/;
             const groups = regex.exec(defaultValue)?.groups;
             if (groups?.relatedObjectProperty && groups?.addressProperty && groups?.nestedAddressProperty) {
-                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
                 let relatedObjectInstance = updatedRelatedObjectValue;
                 if (!relatedObjectInstance && !isEmpty(formValues)) {
                     relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
-                if (updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty]) {
+                if (updatedRelatedObjectValue === null) {
+                    updates.push({ fieldId, fieldValue: '' });
+                }
+                else if (updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty]) {
                     fieldValue = updatedRelatedObjectValue?.[groups.addressProperty]?.[groups.nestedAddressProperty];
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObjectInstance?.id && relatedObjectParameter) {
-                    let relatedObjectId = relatedObjectParameter.objectId;
-                    if (!relatedObjectId) {
-                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
-                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
-                    }
-                    const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
-                            if (error) {
-                                console.error(error);
-                                return resolve(undefined);
-                            }
-                            resolve(instance);
-                        });
-                    });
-                    // Clear dependent fields only if value is explicitly null (user cleared it).
-                    // If updatedRelatedObjectValue is undefined (not triggered by onChange), use the value from the instance.
-                    if (updatedRelatedObjectValue === null) {
-                        updates.push({ fieldId, fieldValue: '' });
-                    }
-                    else if (instance) {
-                        fieldValue = instance?.[groups.addressProperty]?.[groups.nestedAddressProperty];
-                        updates.push({ fieldId, fieldValue });
-                    }
+                else if (relatedObjectInstance) {
+                    fieldValue = relatedObjectInstance?.[groups.addressProperty]?.[groups.nestedAddressProperty];
+                    updates.push({ fieldId, fieldValue });
                 }
             }
         }
@@ -108,44 +72,44 @@ export async function evalDefaultVals(parameters, unnestedEntries, entry, fieldV
             const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
             const groups = regex.exec(defaultValue)?.groups;
             if (groups?.relatedObjectProperty && groups?.nestedProperty) {
-                const relatedObjectParameter = parameters.find((param) => param.id === groups?.relatedObjectProperty);
                 let relatedObjectInstance = updatedRelatedObjectValue;
                 if (!relatedObjectInstance && !isEmpty(formValues)) {
                     relatedObjectInstance = formValues[groups.relatedObjectProperty];
                 }
-                if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
+                if (updatedRelatedObjectValue === null) {
+                    updates.push({ fieldId, fieldValue: null });
+                }
+                else if (updatedRelatedObjectValue?.[groups.nestedProperty]) {
                     fieldValue = updatedRelatedObjectValue[groups.nestedProperty];
                     updates.push({ fieldId, fieldValue });
                 }
-                else if (relatedObjectInstance?.id && relatedObjectParameter) {
-                    let relatedObjectId = relatedObjectParameter.objectId;
-                    if (!relatedObjectId) {
-                        const relatedObjectParamEntry = unnestedEntries.find((e) => getEntryId(e) === relatedObjectParameter.id);
-                        relatedObjectId = relatedObjectParamEntry?.display?.relatedObjectId;
-                    }
-                    const instance = await new Promise((resolve) => {
-                        apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${relatedObjectInstance?.id}`), (error, instance) => {
-                            if (error) {
-                                console.error(error);
-                                return resolve(undefined);
-                            }
-                            resolve(instance);
-                        });
-                    });
-                    // Clear dependent fields only if value is explicitly null (user cleared it).
-                    // If updatedRelatedObjectValue is undefined (not triggered by onChange), use the value from the instance.
-                    if (updatedRelatedObjectValue === null) {
-                        updates.push({ fieldId, fieldValue: null });
-                    }
-                    else if (instance) {
-                        fieldValue = instance?.[groups.nestedProperty] || null;
-                        updates.push({ fieldId, fieldValue });
-                    }
+                else if (relatedObjectInstance) {
+                    fieldValue = relatedObjectInstance[groups.nestedProperty] || null;
+                    updates.push({ fieldId, fieldValue });
                 }
             }
         }
         // all other default values set here
     }
+    else if (isObject(defaultValue) && 'criteria' in defaultValue && !isEmpty(defaultValue.criteria)) {
+        const criteria = defaultValue.criteria;
+        const evaluatedCriteria = updateCriteriaInputs(criteria, { ...formValues, [updatedRelatedObjectParamId || '']: updatedRelatedObjectValue }, userAccount);
+        try {
+            const instances = await apiServices.get(getPrefixedUrl(`/objects/${parameter?.objectId || entry.display?.relatedObjectId}/instances`), {
+                params: {
+                    filter: {
+                        where: transformToWhere(evaluatedCriteria),
+                        limit: 1,
+                    },
+                },
+            });
+            updates.push({ fieldId, fieldValue: instances[0] ?? null });
+        }
+        catch (error) {
+            updates.push({ fieldId, fieldValue: null });
+            console.error(error);
+        }
+    }
     else if (parameter?.type !== 'object') {
         let updatedValue = defaultValue;
         // handles current default values ie: "Current logged in user", "Today" etc.
@@ -175,38 +139,45 @@ export async function processValueUpdate(unnestedEntries, parameters, updatedRel
             const parameterId = getEntryId(entry);
             if (!parameterId)
                 return [];
+            if (parameterId === changedEntryId) {
+                continue;
+            }
+            const defaultValue = entry.display.defaultValue;
             if (isAddressProperty(parameterId)) {
-                const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode)}}$/;
+                const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<addressProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedAddressProperty>line1|line2|city|county|state|zipCode|country)}}$/;
                 const groups = regex.exec(entry.display.defaultValue)?.groups;
                 const [addressObject, addressField] = parameterId.split('.');
                 if (groups?.relatedObjectProperty &&
                     groups?.addressProperty &&
                     groups?.nestedAddressProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, entry, formValues?.[addressObject]?.[addressField], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue, changedEntryId);
                     updates.push(...result);
                 }
             }
-            else if (isArray(entry.display.defaultValue) &&
-                entry.display.defaultValue.some((item) => /^{{.*}}$/.test(item))) {
-                for (const item of entry.display.defaultValue.filter((item) => /^{{.*}}$/.test(item))) {
+            else if (isArray(defaultValue) && defaultValue.some((item) => /^{{.*}}$/.test(item))) {
+                for (const item of defaultValue.filter((item) => /^{{.*}}$/.test(item))) {
                     const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
                     const groups = regex.exec(item)?.groups;
                     if (groups?.relatedObjectProperty &&
                         groups?.nestedProperty &&
                         changedEntryId === groups.relatedObjectProperty) {
-                        const result = await evalDefaultVals(parameters, unnestedEntries, entry, entry.display.defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                        const result = await evalDefaultVals(parameters, entry, defaultValue, parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue, changedEntryId);
                         updates.push(...result);
                     }
                 }
             }
+            else if (isObject(defaultValue) && 'criteria' in defaultValue && !isEmpty(defaultValue.criteria)) {
+                const result = await evalDefaultVals(parameters, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue, changedEntryId);
+                updates.push(...result);
+            }
             else {
                 const regex = /^{{input\.(?<relatedObjectProperty>[a-zA-Z][a-zA-Z0-9_]*)\.(?<nestedProperty>[a-zA-Z][a-zA-Z0-9_]*)}}$/;
-                const groups = regex.exec(entry.display.defaultValue)?.groups;
+                const groups = regex.exec(defaultValue)?.groups;
                 if (groups?.relatedObjectProperty &&
                     groups?.nestedProperty &&
                     changedEntryId === groups.relatedObjectProperty) {
-                    const result = await evalDefaultVals(parameters, unnestedEntries, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue);
+                    const result = await evalDefaultVals(parameters, entry, formValues?.[parameterId], parameterId, apiServices, userAccount, formValues, updatedRelatedObjectValue, changedEntryId);
                     updates.push(...result);
                 }
             }

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

@@ -18,7 +18,6 @@ type FormContextType = {
     handleChange?: (name: string, value: unknown) => void | Promise<void>;
     onAutosave?: (fieldId: string) => void | Promise<void>;
     fieldHeight?: 'small' | 'medium';
-    triggerFieldReset?: boolean;
     showSubmitError?: boolean;
     associatedObject?: {
         instanceId: string;

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

@@ -10,7 +10,6 @@ export const FormContext = createContext({
     expandedSections: [],
     parameters: [],
     showSubmitError: false,
-    triggerFieldReset: false,
     handleChange: () => { },
     fieldHeight: 'medium',
     form: {},

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

@@ -1,24 +1,21 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { debounce, isArray, isEmpty, isEqual } from 'lodash';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { debounce, isEmpty } from 'lodash';
+import React, { useEffect, useMemo, 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, initialMiddleObjectInstances, middleObject, hasDescription, viewLayout, } = props;
-    const { fetchedOptions, setFetchedOptions, instance } = useFormContext();
+    const { id, fieldDefinition, criteria, readOnly, middleObject, hasDescription, viewLayout, initialMiddleObjectInstances, } = props;
+    const { 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 [endObject, setEndObject] = useState(fetchedOptions[`${fieldDefinition.id}EndObject`]);
-    const [endObjectInstances, setEndObjectInstances] = useState(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] || []);
-    const [initialLoading, setInitialLoading] = useState(endObjectInstances ? false : true);
+    const [debouncedSearchValue, setDebouncedSearchValue] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
-    const [hasFetched, setHasFetched] = useState(!!fetchedOptions[`${fieldDefinition.id}EndObjectInstancesHaveFetched`] || false);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
@@ -41,6 +38,12 @@ 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)
@@ -52,146 +55,86 @@ const DropdownRepeatableField = (props) => {
             .sort((instanceA, instanceB) => instanceA.label.localeCompare(instanceB.label)));
     };
     useEffect(() => {
-        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);
-                    }
-                }
-            });
-        }
-    }, [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 if (endObjectInstances.length !== 0) {
-            setInitialLoading(false);
-        }
-    }, [fieldDefinition.objectId, fieldDefinition.manyToManyPropertyId, middleObject]);
-    const debouncedEndObjectSearch = useCallback(debounce(fetchEndObjectInstances, 500), [fetchEndObjectInstances]);
+        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 (!fetchedOptions[`${fieldDefinition.id}EndObjectInstances`] ||
-            (isArray(fetchedOptions[`${fieldDefinition.id}EndObjectInstances`]) &&
-                fetchedOptions[`${fieldDefinition.id}EndObjectInstances`].length === 0)) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}EndObjectInstances`]: endObjectInstances,
-                [`${fieldDefinition.id}EndObjectInstancesHaveFetched`]: hasFetched,
-            });
+        if (!endObject)
+            return;
+        let defaultLayout;
+        if (endObject.viewLayout?.dropdown) {
+            defaultLayout = {
+                id: 'default',
+                name: 'Default',
+                objectId: endObject.id,
+                ...endObject.viewLayout.dropdown,
+            };
         }
-        if (!fetchedOptions[`${fieldDefinition.id}EndObject`]) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}EndObject`]: endObject,
-            });
+        if (viewLayout) {
+            apiServices
+                .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/dropdownLayouts/${viewLayout.id}`))
+                .then(setLayout)
+                .catch(() => setLayout(defaultLayout))
+                .finally(() => setLayoutLoaded(true));
         }
-        if (!isEqual(middleObjectInstances, initialMiddleObjectInstances)) {
-            setFetchedOptions({
-                [`${fieldDefinition.id}MiddleObjectInstances`]: middleObjectInstances,
-            });
+        else {
+            setLayout(defaultLayout);
+            setLayoutLoaded(true);
         }
-    }, [endObjectInstances, endObject, middleObjectInstances]);
+    }, [endObject, viewLayout]);
+    const debouncedSetSearchValue = useMemo(() => debounce((value) => {
+        setDebouncedSearchValue(value);
+    }, 200), []);
     useEffect(() => {
-        const updateFetchedOptions = (key, value) => {
-            if (!fetchedOptions[key]) {
-                setFetchedOptions({ [key]: value });
-            }
+        debouncedSetSearchValue(searchValue);
+        return () => {
+            debouncedSetSearchValue.cancel();
         };
-        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();
+    }, [searchValue, debouncedSetSearchValue, layoutLoaded]);
+    const searchCriteria = useMemo(() => {
+        let searchCriteria = criteria && !isEmpty(criteria) ? transformToWhere(criteria) : {};
+        if (debouncedSearchValue?.length) {
+            const nameCriteria = transformToWhere({
+                name: {
+                    like: debouncedSearchValue,
+                    options: 'i',
+                },
+            });
+            searchCriteria = !isEmpty(criteria) ? { and: [searchCriteria, nameCriteria] } : nameCriteria;
         }
-    }, [fetchEndObjectInstances, layoutLoaded]);
+        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,
+        };
+        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,
+    });
     const saveMiddleInstance = async (endObjectId, endObjectName) => {
         if (fieldDefinition.objectId) {
             const middleObject = getMiddleObject(fieldDefinition, endObjectId, endObjectName, instance);
@@ -228,6 +171,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, 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 }))));
+    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 }))));
 };
 export default DropdownRepeatableField;

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

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

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

@@ -7,12 +7,9 @@ import FormField from '../../../../FormField';
 import { normalizeDates } from '../../utils';
 const isDropdownRepeatableFieldInputOption = (option) => isObject(option) && 'label' in option && 'endObjectId' in option;
 export const DropdownRepeatableFieldInput = (props) => {
-    const { id, fieldDefinition, readOnly, layout, middleObjectInstances, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, setDropdownSelections, hasDescription, } = props;
+    const { id, fieldDefinition, readOnly, layout, endObjectInstances, endObject, searchValue, loading, handleSaveMiddleInstance, handleRemoveMiddleInstance, setSearchValue, selectedOptions, setSnackbarError, snackbarError, hasDescription, } = props;
     const { fieldHeight } = useFormContext();
     const [selectOptions, setSelectOptions] = useState([]);
-    useEffect(() => {
-        setDropdownSelections && setDropdownSelections(middleObjectInstances);
-    }, [middleObjectInstances]);
     useEffect(() => {
         const manyToManyPropertyId = fieldDefinition.manyToManyPropertyId;
         if (manyToManyPropertyId) {