@evoke-platform/ui-components 1.8.2-dev.1 → 1.9.0-dev.0

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

@@ -8,7 +8,7 @@ import { Box } from '../../layout';
 import ActionButtons from './components/ActionButtons';
 import { FormContext } from './components/FormContext';
 import { RecursiveEntryRenderer } from './components/RecursiveEntryRenderer';
-import { convertDocToParameters, convertPropertiesToParams } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertDocToParameters, convertPropertiesToParams } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrorDisplay from './components/ValidationFiles/ValidationErrorDisplay';
 function FormRenderer(props) {
@@ -40,6 +40,21 @@ function FormRenderer(props) {
     function handleCollapseAll() {
         setExpandAll(false);
     }
+    const parameters = useMemo(() => {
+        if (form.id === 'documentForm') {
+            return convertDocToParameters(instance);
+        }
+        else if (action?.parameters) {
+            return action.parameters;
+        }
+        else if (object) {
+            // if forms actionId is synced with object properties
+            return convertPropertiesToParams(object);
+        }
+    }, [form.id, action?.parameters, object, instance]);
+    const updatedEntries = useMemo(() => {
+        return assignIdsToSectionsAndRichText(entries, object, parameters);
+    }, [entries, object, parameters]);
     useEffect(() => {
         (async () => {
             try {
@@ -82,22 +97,10 @@ function FormRenderer(props) {
         }
         setTriggerFieldReset(true);
     };
-    const parameters = useMemo(() => {
-        if (form.id === 'documentForm') {
-            return convertDocToParameters(instance);
-        }
-        else if (action?.parameters) {
-            return action.parameters;
-        }
-        else if (object) {
-            // if forms actionId is synced with object properties
-            return convertPropertiesToParams(object);
-        }
-    }, [form.id, action?.parameters, object, instance]);
     useEffect(() => {
         handleValidation(entries, register, getValues(), action?.parameters, instance);
-    }, []);
-    if (entries && parameters && (!actionId || action)) {
+    }, [action?.parameters, instance, entries, register, getValues]);
+    if (parameters && (!actionId || action)) {
         return (React.createElement(React.Fragment, null,
             ((isSubmitted && !isEmpty(errors)) || (isSmallerThanMd && hasSections) || title) && (React.createElement(Box, { sx: {
                     paddingX: isSmallerThanMd ? 2 : 3,
@@ -166,7 +169,7 @@ function FormRenderer(props) {
                         // when rendering the default delete action, we don't want a border
                         borderTop: !form.id || isModal ? undefined : '1px solid #e9ecef',
                     } },
-                    entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
+                    updatedEntries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry, isDocument: !!(form.id === 'documentForm') }))),
                     !hideButtons && (actionId || form.id === 'documentForm') && onSubmit && (React.createElement(Box, { sx: {
                             ...(stickyFooter === false ? { position: 'static' } : { position: 'sticky' }),
                             bottom: isModal || isSmallerThanMd ? 0 : 24,

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

@@ -6,7 +6,7 @@ import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
-import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, } from './components/utils';
+import { convertDocToEntries, deleteDocuments, encodePageSlug, formatDataToDoc, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
 import FormRenderer from './FormRenderer';
 function FormRendererContainer(props) {
     const { instanceId, pageNavigation, documentId, dataType, display, formId, stickyFooter, objectId, actionId, richTextEditor, onClose, onSubmit, associatedObject, hideButtons, } = props;
@@ -225,7 +225,7 @@ function FormRendererContainer(props) {
     const saveHandler = async (submission) => {
         if (!form)
             return;
-        submission = await formatSubmission(submission, apiServices, objectId, instanceId, setSnackbarError);
+        submission = await formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError);
         if (document) {
             submission = formatDataToDoc(submission);
         }
@@ -331,7 +331,10 @@ function FormRendererContainer(props) {
                         const fieldValue = instanceData?.[fieldId] ??
                             instanceData?.metadata?.[fieldId];
                         const parameter = parameters?.find((param) => param.id === fieldId);
-                        if (associatedObject?.propertyId === fieldId && associatedObject?.instanceId && parameter) {
+                        if (associatedObject?.propertyId === fieldId &&
+                            associatedObject?.instanceId &&
+                            parameter &&
+                            action?.type === 'create') {
                             try {
                                 const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`));
                                 result[associatedObject.propertyId] = instance;
@@ -360,7 +363,16 @@ function FormRendererContainer(props) {
                             result[fieldId] = false;
                         }
                         else if (fieldValue !== undefined && fieldValue !== null) {
-                            result[fieldId] = fieldValue;
+                            if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
+                                let RTFFieldValue = fieldValue;
+                                if (!fieldValue.trim().startsWith('{\\rtf')) {
+                                    RTFFieldValue = plainTextToRtf(fieldValue);
+                                }
+                                result[fieldId] = RTFFieldValue;
+                            }
+                            else {
+                                result[fieldId] = fieldValue;
+                            }
                         }
                     }
                 }

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

@@ -1,7 +1,6 @@
 import { ExpandMoreOutlined } from '@mui/icons-material';
-import { nanoid } from 'nanoid';
+import { isEqual } from 'lodash';
 import React, { useEffect } from 'react';
-import { useResponsive } from '../../../../theme';
 import { useFormContext } from '../../../../theme/hooks';
 import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../../core';
 import { Box } from '../../../layout';
@@ -9,10 +8,8 @@ import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
 import { getErrorCountForSection } from './utils';
 function AccordionSections(props) {
     const { entry } = props;
-    const { isMd, isLg, isXl } = useResponsive();
     const { errors, expandedSections, setExpandedSections, expandAll, setExpandAll, showSubmitError } = useFormContext();
     const lastSection = entry.sections.length - 1;
-    const sectionsWithIds = React.useMemo(() => assignIds(entry.sections), [entry]);
     function collectNestedSections(entries = []) {
         const nestedSections = [];
         entries.forEach((entry) => {
@@ -29,36 +26,19 @@ function AccordionSections(props) {
         });
         return nestedSections;
     }
-    // need to add ids to section so expanded sections can differentiate between sections with the same label
-    function assignIds(sections) {
-        const result = [];
-        sections.forEach((section) => {
-            const newSection = {
-                ...section,
-                id: nanoid(),
-            };
-            result.push(newSection);
-            if (section.entries) {
-                const nestedSections = collectNestedSections(section.entries);
-                nestedSections.forEach((nestedSection) => {
-                    nestedSection.sections = assignIds(nestedSection.sections);
-                });
-            }
-        });
-        return result;
-    }
     function getExpandedSections(sections, expandAll) {
         const expandedSections = [];
-        const processSections = (sectionList) => {
+        const processSections = (sectionList, isNested) => {
             sectionList.forEach((section, index) => {
                 expandedSections.push({
                     label: section.label,
-                    expanded: expandAll ?? (index === 0 || isMd || isLg || isXl),
+                    expanded: expandAll ?? index === 0,
                     id: section?.id,
+                    isNested: isNested,
                 });
                 if (section.entries) {
                     const nestedSections = collectNestedSections(section.entries).flatMap((s) => s.sections);
-                    processSections(nestedSections);
+                    processSections(nestedSections, true);
                 }
             });
         };
@@ -66,17 +46,38 @@ function AccordionSections(props) {
         return expandedSections;
     }
     useEffect(() => {
-        if (expandAll !== null) {
-            setExpandedSections && setExpandedSections(getExpandedSections(sectionsWithIds, expandAll));
+        if (expandAll !== null && setExpandedSections) {
+            const newExpanded = getExpandedSections(entry.sections, expandAll);
+            if (!isEqual(newExpanded, expandedSections)) {
+                // Don't set state if the new expanded state is already reflected in the current state
+                const isAlreadySet = newExpanded.every((section) => expandedSections?.some((existing) => existing.id === section.id && existing.isNested === true)) ||
+                    newExpanded.every((section) => expandedSections?.some((existing) => existing.id === section.id && existing.expanded === section.expanded));
+                if (!isAlreadySet) {
+                    setExpandedSections((prev) => {
+                        const mergedSections = [...(prev || [])];
+                        newExpanded.forEach((newSection) => {
+                            const existingIndex = mergedSections.findIndex((s) => s.id === newSection.id);
+                            if (existingIndex >= 0) {
+                                // Update existing section
+                                mergedSections[existingIndex] = { ...mergedSections[existingIndex], ...newSection };
+                            }
+                            else {
+                                mergedSections.push(newSection);
+                            }
+                        });
+                        return mergedSections;
+                    });
+                }
+            }
         }
-    }, [expandAll, sectionsWithIds]);
+    }, [expandAll, entry, expandedSections]);
     const handleAccordionChange = (id) => {
         const updatedSections = expandedSections?.map((section) => section.id === id ? { ...section, expanded: !section.expanded } : section);
         if (setExpandedSections && updatedSections)
             setExpandedSections(updatedSections);
         setExpandAll && setExpandAll(null);
     };
-    return (React.createElement(Box, null, sectionsWithIds.map((section, sectionIndex) => {
+    return (React.createElement(Box, null, entry.sections.map((section, sectionIndex) => {
         const errorCount = getErrorCountForSection(section, errors);
         return (React.createElement(Accordion, { key: section.id, expanded: expandedSections?.find((expandedSection) => expandedSection.id === section.id)?.expanded ??
                 !!expandAll, onChange: () => handleAccordionChange(section.id), defaultExpanded: sectionIndex === 0, sx: {

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

@@ -344,7 +344,7 @@ const RepeatableField = (props) => {
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (action, input, instanceId) => {
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
-        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, instanceId);
+        input = await formatSubmission(input, apiServices, fieldDefinition.objectId, instanceId, action.type === 'update' ? updateForm : undefined);
         if (action.type === 'create' && createActionId) {
             const updatedInput = {
                 ...input,

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

@@ -109,8 +109,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, 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/UserProperty.js

@@ -1,8 +1,8 @@
 import { useApiServices } from '@evoke-platform/context';
-import { ExpandMore } from '@mui/icons-material';
+import { Close, ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
-import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
@@ -44,7 +44,14 @@ const UserProperty = (props) => {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
         handleChange(id, updatedValue);
     }
-    return (options && (React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue || readOnly ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+    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') {
+                    e.stopPropagation();
+                }
+            }, onClick: () => setOpenOptions(false), "aria-label": "Clear selection", sx: {
+                padding: 0,
+            } },
+            React.createElement(Close, { sx: { fontSize: '20px' } }))) : null, PaperComponent: ({ children }) => {
             return (React.createElement(Paper, { sx: {
                     borderRadius: '12px',
                     boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
@@ -78,9 +85,7 @@ const UserProperty = (props) => {
                     " ",
                     '',
                     users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
-        }, onOpen: () => {
-            setOpenOptions(true);
-        }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+        }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return options.find((o) => o.value === option)?.label ?? '';
             }
@@ -94,11 +99,15 @@ const UserProperty = (props) => {
                     }
                 }
             }
-        }, onKeyDownCapture: (e) => {
+        }, onKeyDown: (e) => {
             // prevents keyboard trap
             if (e.key === 'Tab') {
                 return;
             }
+            if (e.key === 'Enter') {
+                setOpenOptions(true);
+                return;
+            }
             if (value) {
                 e.preventDefault();
             }

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -2,10 +2,10 @@ import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
 import cleanDeep from 'clean-deep';
 import { cloneDeep, debounce, isEmpty, isEqual, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
-import { Autocomplete, Button, Dialog, DialogContent, DialogTitle, IconButton, Link, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
+import { Autocomplete, Button, Dialog, DialogContent, DialogTitle, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
 import { encodePageSlug, getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
@@ -36,6 +36,7 @@ const ObjectPropertyInput = (props) => {
     const updatedCriteria = useMemo(() => {
         return filter ? { where: transformToWhere(filter) } : undefined;
     }, [filter]);
+    const listboxRef = useRef(null);
     useEffect(() => {
         if (relatedObject) {
             let defaultViewLayout;
@@ -242,9 +243,25 @@ const ObjectPropertyInput = (props) => {
             });
         }
     }, [relatedObject, options, hasFetched]);
+    const dropdownOptions = [
+        ...options.map((o) => ({ label: o.name, value: o.id })),
+        ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
+            ? [
+                {
+                    value: '__new__',
+                    label: '+ Add New',
+                },
+            ]
+            : []),
+    ];
     return (React.createElement(React.Fragment, null,
         displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
-            React.createElement(Autocomplete, { id: id, fullWidth: true, sortBy: "NONE", open: openOptions, size: fieldHeight, componentsProps: {
+            React.createElement(Autocomplete, { id: id, fullWidth: true, sortBy: "NONE", open: openOptions, clearIcon: React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.stopPropagation();
+                        }
+                    }, onClick: () => setOpenOptions(false), "aria-label": "Clear selection", sx: { padding: 0 } },
+                    React.createElement(Close, { sx: { fontSize: '20px' } })), size: fieldHeight, componentsProps: {
                     popper: {
                         modifiers: [
                             {
@@ -272,19 +289,7 @@ const ObjectPropertyInput = (props) => {
                                 paddingLeft: '24px',
                                 color: 'rgba(145, 158, 171, 1)',
                             },
-                        } },
-                        mode !== 'newOnly' && children,
-                        mode !== 'existingOnly' && createActionId && (React.createElement(Button, { fullWidth: true, sx: {
-                                justifyContent: 'flex-start',
-                                pl: 2,
-                                minHeight: '48px',
-                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
-                                borderRadius: '0p 0pc 6px 6px',
-                                paddingLeft: '22px',
-                                fontWeight: 400,
-                            }, onMouseDown: (e) => {
-                                setOpenCreateDialog(true);
-                            }, color: 'inherit' }, "+ Add New"))));
+                        } }, mode !== 'newOnly' && children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
                         ...(!loadingOptions &&
@@ -296,18 +301,27 @@ const ObjectPropertyInput = (props) => {
                     },
                     backgroundColor: 'white', // prevents the field flickering gray when loading in the value and options when it's a read only
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                    return (React.createElement("li", { ...props, key: option.id },
+                    const isAddNew = option.value === '__new__';
+                    return (React.createElement(ListItem, { ...props, key: props.id, sx: {
+                            ...(isAddNew
+                                ? {
+                                    borderTop: '1px solid rgba(145, 158, 171, 0.24)',
+                                    position: 'sticky',
+                                    bottom: 0,
+                                    backgroundColor: 'white',
+                                    '&:hover': {
+                                        backgroundColor: '#f5f5f5 !important',
+                                    },
+                                    '&.Mui-focused': {
+                                        backgroundColor: '#f5f5f5 !important',
+                                    },
+                                }
+                                : {}),
+                        } },
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
-                            layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
-                }, onOpen: () => {
-                    if (instance?.[id]?.id || selectedInstance?.id) {
-                        setOpenOptions(false);
-                    }
-                    else {
-                        setOpenOptions(true);
-                    }
-                }, onClose: () => setOpenOptions(false), value: selectedInstance?.id
+                            layout?.secondaryTextExpression && !isAddNew ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
+                }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: selectedInstance?.id
                     ? {
                         value: selectedInstance?.id ?? '',
                         label: selectedInstance?.name ?? '',
@@ -317,15 +331,52 @@ const ObjectPropertyInput = (props) => {
                         return option.value === value;
                     }
                     return option.value === value?.value;
-                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                }, options: dropdownOptions, filterOptions: (options) => options, getOptionLabel: (option) => {
                     return typeof option === 'string'
                         ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
-                }, onKeyDownCapture: (e) => {
+                }, ListboxProps: {
+                    ref: listboxRef,
+                    sx: {
+                        padding: 0,
+                    },
+                }, onHighlightChange: (e, option) => {
+                    if (!option || !e || !('key' in e) || !listboxRef.current)
+                        return;
+                    const highlightedIndex = dropdownOptions.findIndex((opt) => opt.value === option.value);
+                    // Only handle regular options (not the "Add New" button)
+                    if (highlightedIndex >= options.length)
+                        return;
+                    const listbox = listboxRef.current;
+                    const items = listbox.querySelectorAll('li');
+                    const highlightedElement = items[highlightedIndex];
+                    const addNewButton = mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
+                        ? items[items.length - 1]
+                        : undefined;
+                    if (!highlightedElement || !addNewButton)
+                        return;
+                    const buttonHeight = addNewButton.offsetHeight;
+                    const elementTop = highlightedElement.offsetTop;
+                    const elementHeight = highlightedElement.offsetHeight;
+                    const listboxScrollTop = listbox.scrollTop;
+                    const listboxHeight = listbox.clientHeight;
+                    // Check if element is hidden below the sticky button
+                    const elementBottom = elementTop + elementHeight;
+                    const visibleBottom = listboxScrollTop + listboxHeight - buttonHeight;
+                    if (elementBottom > visibleBottom) {
+                        // Scroll just enough to show the element above the sticky button
+                        listbox.scrollTop = elementBottom - listboxHeight + buttonHeight;
+                    }
+                }, onKeyDown: (e) => {
                     // prevents keyboard trap
                     if (e.key === 'Tab') {
                         return;
                     }
+                    if (e.key === 'Enter') {
+                        setOpenOptions(true);
+                        setDropdownInput(undefined);
+                        return;
+                    }
                     if (selectedInstance?.id) {
                         e.preventDefault();
                     }
@@ -335,21 +386,19 @@ const ObjectPropertyInput = (props) => {
                         setSelectedInstance(undefined);
                         handleChangeObjectField(id, null);
                     }
+                    else if (value?.value === '__new__') {
+                        setOpenCreateDialog(true);
+                    }
                     else {
                         const selectedInstance = options.find((o) => o.id === value?.value);
                         setSelectedInstance(selectedInstance);
                         handleChangeObjectField(id, selectedInstance);
                     }
-                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
-                        if (openOptions &&
-                            e.target?.nodeName === 'svg') {
-                            setOpenOptions(false);
-                        }
-                        else {
-                            setOptions(options);
-                            setOpenOptions(true);
-                        }
-                    }, sx: {
+                }, selectOnFocus: false, onBlur: () => {
+                    if (dropdownInput) {
+                        getDropdownOptions();
+                    }
+                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), sx: {
                         ...(!loadingOptions && selectedInstance?.id
                             ? {
                                 '.MuiOutlinedInput-root': {
@@ -380,7 +429,7 @@ const ObjectPropertyInput = (props) => {
                             : {}),
                     }, InputProps: {
                         ...params.InputProps,
-                        startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: (e) => {
+                        startAdornment: selectedInstance?.id ? (React.createElement(Typography, { onClick: () => {
                                 if (navigationSlug && selectedInstance?.id) {
                                     navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', selectedInstance.id)}`);
                                 }

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

@@ -1,6 +1,6 @@
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
 import { TabContext, TabPanel } from '@mui/lab';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useFormContext } from '../../../../theme/hooks';
 import { Tab, Tabs, Typography } from '../../../core';
 import { Box } from '../../../layout';
@@ -9,11 +9,42 @@ import TabNav from './TabNav';
 import { getErrorCountForSection, scrollIntoViewWithOffset } from './utils';
 function FormSections(props) {
     const { entry } = props;
-    const { errors, showSubmitError } = useFormContext();
+    const { errors, showSubmitError, setFetchedOptions, fetchedOptions } = useFormContext();
     const tabPanelsRef = useRef(null);
     const [tabValue, setTabValue] = useState(0);
+    const currentSectionRef = useRef(fetchedOptions[`section-${entry.id}`] || null);
+    useEffect(() => {
+        // Preserve nested section state when unmounted so navigation doesn't reset it
+        setFetchedOptions({
+            [`section-${entry.id}`]: currentSectionRef.current,
+        });
+    }, [currentSectionRef.current]);
+    // useLayoutEffect ensures the tab stays aligned with the current section
+    // and prevents a visible flicker when sections are added or removed
+    useLayoutEffect(() => {
+        if (!currentSectionRef.current && entry.sections[tabValue]) {
+            currentSectionRef.current = entry.sections[tabValue];
+            return;
+        }
+        const currentIndex = entry.sections.findIndex((section) => section === currentSectionRef.current || section.id === currentSectionRef.current?.id);
+        // Current section no longer exists, find the closest valid tab
+        if (currentIndex === -1) {
+            const newTabIndex = Math.min(tabValue, entry.sections.length - 1);
+            setTabValue(newTabIndex);
+            currentSectionRef.current = entry.sections[newTabIndex];
+        }
+        else {
+            // Found the same section at a different index, update tabValue
+            if (currentIndex !== tabValue) {
+                setTabValue(currentIndex);
+            }
+            currentSectionRef.current = entry.sections[currentIndex];
+        }
+    }, [entry.sections]);
     const handleTabChange = (type, newValue) => {
-        setTabValue(Number(newValue));
+        const newIndex = Number(newValue);
+        setTabValue(newIndex);
+        currentSectionRef.current = entry.sections[newIndex];
         if (tabPanelsRef.current && type === 'buttonNav') {
             scrollIntoViewWithOffset(tabPanelsRef.current, 170);
         }

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

@@ -1,5 +1,6 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import DOMPurify from 'dompurify';
 import React, { useEffect, useMemo } from 'react';
 import { useResponsive } from '../../../../theme';
 import { useFormContext } from '../../../../theme/hooks';
@@ -17,7 +18,7 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { docProperties, entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { entryIsVisible, fetchCollectionData, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -42,39 +43,17 @@ export function RecursiveEntryRenderer(props) {
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
     }
+    const { isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('md');
     const apiServices = useApiServices();
     const userAccount = useAuthenticationContext()?.account;
-    const { smallerThan, isXs } = useResponsive();
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
-        let def;
-        if (entry.type === 'input') {
-            def = parameters?.find((param) => param.id === entry.parameterId);
-        }
-        else if (entry.type === 'readonlyField') {
-            def = isDocument
-                ? docProperties.find((prop) => prop.id === entry.propertyId)
-                : isAddressProperty(entry.propertyId)
-                    ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
-                    : object?.properties?.find((prop) => prop.id === entry.propertyId);
-        }
-        else if (entry.type === 'inputField') {
-            def = entry.input;
-        }
-        else {
-            return undefined;
-        }
-        if (def?.enum && def.type === 'string') {
-            const cloned = structuredClone(def);
-            // single select must be made to be type choices for label and error handling
-            cloned.type = 'choices';
-            return cloned;
-        }
-        return def;
+        return getFieldDefinition(entry, object, parameters, isDocument);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
     if (associatedObject?.propertyId === entryId)
@@ -85,7 +64,7 @@ export function RecursiveEntryRenderer(props) {
         }
     }, [fieldDefinition, instance]);
     if (entry.type === 'content') {
-        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: entry.html }, sx: {
+        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
             } }));
     }
@@ -123,7 +102,8 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
-                id: entryId,
+                // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+                id: entry.uniqueId,
                 value: fieldValue,
                 handleUpdate: (value) => handleChange(entryId, value),
                 format: 'rtf',
@@ -195,7 +175,8 @@ export function RecursiveEntryRenderer(props) {
         }))))));
     }
     else if (entry.type === 'sections') {
-        return smallerThan('md') ? React.createElement(AccordionSections, { entry: entry }) : React.createElement(FormSections, { entry: entry });
+        const filteredEntry = filterEmptySections(entry, getValues(), instance);
+        return filteredEntry ? (isSmallerThanMd ? (React.createElement(AccordionSections, { entry: filteredEntry })) : (React.createElement(FormSections, { entry: filteredEntry }))) : null;
     }
     else if (!fieldDefinition) {
         return (React.createElement(Box, { sx: {