@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-r/components/create/override-sdk/field/Date/Date.tsx

@@ -7,6 +7,8 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 // Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
 function getFormattedDate(date) {
@@ -15,6 +17,12 @@ function getFormattedDate(date) {
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Date(props: DateProps) {
@@ -22,14 +30,36 @@ export default function Date(props: DateProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value, validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value,
+    validatemessage,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    showFieldMessage,
+    messageConfig = {}
+  } = props;
 
   const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -47,7 +77,7 @@ export default function Date(props: DateProps) {
     const formattedDate = format(props.value, 'date', {
       format: dateFormatInfo.dateFormatString
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -85,7 +115,8 @@ export default function Date(props: DateProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProps }
+          InputProps: { ...testProps },
+          sx: getFieldSx(status)
         }
       }}
       onChange={handleChange}

package/tests/assets/sdk-r/components/create/override-sdk/field/DateTime/DateTime.tsx

@@ -7,9 +7,17 @@ import { format } from '@pega/react-sdk-components/lib/components/helpers/format
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function DateTime(props: DateTimeProps) {
@@ -17,7 +25,21 @@ export default function DateTime(props: DateTimeProps) {
   const TextInput = getComponentFromMap('TextInput');
   const FieldValueList = getComponentFromMap('FieldValueList');
 
-  const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
+  const {
+    getPConnect,
+    label,
+    required,
+    disabled,
+    value = '',
+    validatemessage,
+    readOnly,
+    testId,
+    helperText,
+    displayMode,
+    hideLabel,
+    showFieldMessage,
+    messageConfig = {}
+  } = props;
 
   const environmentInfo = PCore.getEnvironmentInfo();
   const timezone = environmentInfo && environmentInfo.getTimeZone();
@@ -27,7 +49,15 @@ export default function DateTime(props: DateTimeProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   // Start with default dateFormatInfo
   const dateFormatInfo = dateFormatInfoDefault;
@@ -45,7 +75,7 @@ export default function DateTime(props: DateTimeProps) {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
     });
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -93,7 +123,8 @@ export default function DateTime(props: DateTimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProps }
+          InputProps: { ...testProps },
+          sx: getFieldSx(status)
         }
       }}
     />

package/tests/assets/sdk-r/components/create/override-sdk/field/Decimal/Decimal.tsx

@@ -6,6 +6,8 @@ import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
@@ -17,6 +19,12 @@ interface DecimalProps extends PConnFieldProps {
   decimalPrecision?: number;
   showGroupSeparators?: boolean;
   formatter?: string;
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Decimal(props: DecimalProps) {
@@ -30,7 +38,6 @@ export default function Decimal(props: DecimalProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     /* onChange, onBlur, */
     readOnly,
     helperText,
@@ -41,7 +48,9 @@ export default function Decimal(props: DecimalProps) {
     showGroupSeparators,
     testId,
     placeholder,
-    formatter
+    formatter,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const [values, setValues] = useState(value.toString());
@@ -49,7 +58,15 @@ export default function Decimal(props: DecimalProps) {
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
-  const helperTextToDisplay = validatemessage || helperText;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const theSymbols = getCurrencyCharacters(currencyISOCode);
   const theCurrDec = theSymbols.theDecimalIndicator;
@@ -76,7 +93,7 @@ export default function Decimal(props: DecimalProps) {
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -117,6 +134,7 @@ export default function Decimal(props: DecimalProps) {
       decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
       slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Dropdown/Dropdown.tsx

@@ -7,6 +7,9 @@ import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/d
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { useDeepMemo } from '@pega/react-sdk-components/lib/components/field/Multiselect/utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface IOption {
   key: string;
@@ -56,6 +59,12 @@ interface DropdownProps extends PConnFieldProps {
   datasourceMetadata?: any;
   parameters?: any;
   columns: any[];
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Dropdown(props: DropdownProps) {
@@ -69,7 +78,6 @@ export default function Dropdown(props: DropdownProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
@@ -78,7 +86,9 @@ export default function Dropdown(props: DropdownProps) {
     datasourceMetadata,
     hideLabel,
     onRecordChange,
-    fieldMetadata
+    fieldMetadata,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
   let { placeholder = '' } = props;
   const context = getPConnect().getContextName();
@@ -86,13 +96,21 @@ export default function Dropdown(props: DropdownProps) {
   placeholder = placeholder || 'Select...';
   const [options, setOptions] = useState<IOption[]>([]);
   const [theDatasource, setDatasource] = useState<any[] | null>(null);
-  const helperTextToDisplay = validatemessage || helperText;
 
   const thePConn = getPConnect();
   const actionsApi = thePConn.getActionsApi();
   const propName = (thePConn.getStateProps() as any).value;
   const className = thePConn.getCaseInfo().getClassName();
   const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
+
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   if (!isDeepEqual(datasource, theDatasource)) {
     // inbound datasource is different, so update theDatasource (to trigger useEffect)
@@ -124,6 +142,10 @@ export default function Dropdown(props: DropdownProps) {
   }
   columns = preProcessColumns(columns);
 
+  const memoizedParameters = useDeepMemo(() => {
+    return parameters;
+  }, [parameters]);
+
   useEffect(() => {
     if (theDatasource) {
       const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
@@ -138,21 +160,29 @@ export default function Dropdown(props: DropdownProps) {
 
   useEffect(() => {
     if (listType !== 'associated' && typeof datasource === 'string') {
-      getDataPage(datasource, parameters, context).then((results: any) => {
-        const optionsData: any[] = [];
-        const displayColumn = getDisplayFieldsMetaData(columns);
-        results?.forEach(element => {
-          const val = element[displayColumn.primary]?.toString();
-          const obj = {
-            key: element[displayColumn.key] || element.pyGUID,
-            value: val
-          };
-          optionsData.push(obj);
+      getDataPage(datasource, parameters, context)
+        .then((results: any) => {
+          const optionsData: any[] = [];
+          const displayColumn = getDisplayFieldsMetaData(columns);
+          results?.forEach(element => {
+            const val = element[displayColumn.primary]?.toString();
+            const obj = {
+              key: element[displayColumn.key] || element.pyGUID,
+              value: val
+            };
+            optionsData.push(obj);
+          });
+          optionsData.unshift({
+            key: placeholder,
+            value: thePConn.getLocalizedValue(placeholder, '', '')
+          });
+          setOptions(optionsData);
+        })
+        .catch(e => {
+          console.error(e);
         });
-        setOptions(optionsData);
-      });
     }
-  }, []);
+  }, [memoizedParameters]);
 
   const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
 
@@ -171,6 +201,7 @@ export default function Dropdown(props: DropdownProps) {
         <FieldValueList
           name={hideLabel ? '' : label}
           value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant={props.variant}
         />
       );
     }
@@ -227,6 +258,7 @@ export default function Dropdown(props: DropdownProps) {
       slotProps={{
         input: { ...readOnlyProp, ...testProps }
       }}
+      sx={getFieldSx(status)}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>

package/tests/assets/sdk-r/components/create/override-sdk/field/Email/Email.tsx

@@ -5,9 +5,17 @@ import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface EmailProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Email(props: EmailProps) {
@@ -22,20 +30,28 @@ export default function Email(props: EmailProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
 
@@ -44,7 +60,7 @@ export default function Email(props: EmailProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -91,6 +107,7 @@ export default function Email(props: EmailProps) {
           inputProps: { ...testProps }
         }
       }}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Group/Group.tsx

@@ -1,6 +1,7 @@
 import { type ReactElement, useMemo } from 'react';
 import Grid2 from '@mui/material/Grid2';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import useCollapsibleState from '@pega/react-sdk-components/lib/hooks/useCollapsibleState';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
@@ -8,16 +9,33 @@ interface GroupProps extends PConnFieldProps {
   heading: string;
   showHeading: boolean;
   instructions?: string;
-  collapsible: boolean;
+  collapseOnLoad?: any;
   type: string;
+  defaultCollapsed?: any;
+  collapsible?: any;
 }
 
 export default function Group(props: GroupProps) {
   const FieldGroup = getComponentFromMap('FieldGroup');
+  const {
+    children,
+    displayMode,
+    type,
+    collapseOnLoad = 'none',
+    collapsible,
+    defaultCollapsed = false,
+    showHeading = true,
+    heading,
+    instructions
+  } = props;
+  const isReadOnly = displayMode === 'DISPLAY_ONLY';
+  const { isCollapsibleMode, collapsed, setCollapsed } = useCollapsibleState(collapseOnLoad, collapsible, defaultCollapsed, showHeading);
 
-  const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
+  const onToggleCollapsed = () => {
+    if (collapsed === undefined) return;
 
-  const isReadOnly = displayMode === 'DISPLAY_ONLY';
+    setCollapsed(current => !current);
+  };
 
   const content = useMemo(() => {
     return (
@@ -34,7 +52,13 @@ export default function Group(props: GroupProps) {
   if (!children) return null;
 
   return (
-    <FieldGroup name={showHeading ? heading : undefined} collapsible={collapsible} instructions={instructions}>
+    <FieldGroup
+      name={showHeading ? heading : undefined}
+      isCollapsibleMode={isCollapsibleMode}
+      collapsed={collapsed}
+      onToggleCollapsed={onToggleCollapsed}
+      instructions={instructions}
+    >
       {content}
     </FieldGroup>
   );

package/tests/assets/sdk-r/components/create/override-sdk/field/Integer/Integer.tsx

@@ -4,9 +4,17 @@ import { TextField } from '@mui/material';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import useStatus from '@pega/react-sdk-components/lib/hooks/useStatus';
+import { getFieldSx } from '@pega/react-sdk-components/lib/components/helpers/field-utils';
 
 interface IntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
+  showFieldMessage?: boolean;
+  messageConfig?: {
+    content?: string;
+    visibility?: boolean;
+  };
+  variant?: string;
 }
 
 export default function Integer(props: IntegerProps) {
@@ -21,20 +29,28 @@ export default function Integer(props: IntegerProps) {
     disabled,
     value = '',
     validatemessage,
-    status,
     readOnly,
     testId,
     helperText,
     displayMode,
     hideLabel,
-    placeholder
+    placeholder,
+    showFieldMessage,
+    messageConfig = {}
   } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const propName = (pConn.getStateProps() as any).value;
+  const eligibleForFieldWarning = showFieldMessage && messageConfig.visibility && !readOnly;
+  const helperTextToDisplay = validatemessage || (eligibleForFieldWarning ? messageConfig.content : helperText);
 
-  const helperTextToDisplay = validatemessage || helperText;
+  const status = useStatus({
+    showFieldMessage,
+    messageVisibility: messageConfig.visibility,
+    validatemessage,
+    readOnly
+  });
 
   const [inputValue, setInputValue] = useState('');
 
@@ -43,7 +59,7 @@ export default function Integer(props: IntegerProps) {
   }, [value]);
 
   if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant={props.variant} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -95,6 +111,7 @@ export default function Integer(props: IntegerProps) {
       slotProps={{
         htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
       }}
+      sx={getFieldSx(status)}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Multiselect/Multiselect.tsx

@@ -44,13 +44,32 @@ export default function Multiselect(props) {
       }
     ];
     let secondaryColumns: any = [];
-    if (secondaryFields) {
-      secondaryColumns = secondaryFields.map(secondaryField => ({
-        value: secondaryField,
+    // Read columnsFormatter from raw (unresolved) metadata to get field property paths
+    // (e.g. "@P .pyLabel") instead of resolved data values (e.g. "New Complex Fields").
+    // This matches Constellation's approach: pConn.getRawMetadata()?.config?.columnsFormatter
+    const columnsFormatter = (getPConnect().getRawMetadata()?.config as any)?.columnsFormatter;
+    const secondaryFieldsFromFormatter = columnsFormatter
+      ? columnsFormatter
+          .map(item => {
+            const property = item?.config?.value;
+            if (typeof property === 'string') {
+              if (property.startsWith('@USER ')) return property.substring(6);
+              if (property.startsWith('@P ')) return property.substring(3);
+              return property;
+            }
+            return undefined;
+          })
+          .filter(Boolean)
+      : undefined;
+    const updatedSecondaryFields = secondaryFieldsFromFormatter || secondaryFields;
+    if (updatedSecondaryFields) {
+      secondaryColumns = updatedSecondaryFields.map(secondaryField => ({
+        value: typeof secondaryField === 'string' ? secondaryField : undefined,
         display: 'true',
         secondary: 'true',
         useForSearch: 'true'
       }));
+      secondaryColumns = secondaryColumns.filter(col => col.value);
     } else {
       secondaryColumns = [
         {
@@ -105,28 +124,14 @@ export default function Multiselect(props) {
   );
 
   const displayFieldMeta = listType !== 'associated' ? getDisplayFieldsMetaData(dataConfig.columns) : null;
-  const getCaseListBasedOnParamsDebounced: any = useRef();
+  const getCaseListBasedOnParamsDebounced: any = useRef(null);
   const pConn = getPConnect();
   const contextName = pConn.getContextName();
   const listActions = pConn.getListActions();
-  const dataApiObj: any = useRef();
+  const dataApiObj: any = useRef(null);
 
   // main search function trigger
   const getCaseListBasedOnParams = async (searchText, group, selectedRows, currentItemsTree, isTriggeredFromSearch = false) => {
-    if (referenceList && referenceList.length > 0) {
-      selectedRows = await listActions.getSelectedRows(true);
-
-      selectedRows =
-        selectedRows &&
-        selectedRows.map(item => {
-          return {
-            id: item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey],
-            primary: item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField]
-          };
-        });
-      setSelectedItems(selectedRows);
-    }
-
     // if items tree is null or text search is triggered then always should use fresh data object, we use the original object
     const initalItemsTree = isTriggeredFromSearch || !currentItemsTree ? [...itemsTreeBaseData] : [...currentItemsTree];
     const res = await doSearch(
@@ -141,6 +146,20 @@ export default function Multiselect(props) {
       selectedRows || []
     );
     setItemsTree(res);
+    if (referenceList && referenceList.length > 0) {
+      selectedRows = await listActions.getSelectedRows(true);
+      selectedRows =
+        selectedRows &&
+        selectedRows.map(item => {
+          const id = item[selectionKey.startsWith('.') ? selectionKey.substring(1) : selectionKey];
+          let primary = item[primaryField.startsWith('.') ? primaryField.substring(1) : primaryField];
+          if (primary === undefined) {
+            primary = res.find(r => r.id === id)?.primary;
+          }
+          return { id, primary, selected: true };
+        });
+      setSelectedItems(selectedRows);
+    }
   };
 
   useEffect(() => {
@@ -162,6 +181,9 @@ export default function Multiselect(props) {
           if (!isGroupData) {
             getCaseListBasedOnParamsDebounced.current(inputValue ?? '', '', [...selectedItems], [...itemsTree]);
           }
+        })
+        .catch(e => {
+          console.error(e);
         });
     }
   }, [dataConfig, listType, dataConfig.columns, inputValue, dataConfig.groupColumnsConfig, showSecondaryInSearchOnly]);
@@ -220,7 +242,7 @@ export default function Multiselect(props) {
       fullWidth
       options={itemsTree}
       disableCloseOnSelect
-      // getOptionSelected={(option: any, val: any) => option?.primary === val?.primary}
+      isOptionEqualToValue={(option: any, val: any) => option?.id === val?.id}
       getOptionLabel={(option: any) => option?.primary}
       onChange={handleChange}
       value={selectedItems}

package/tests/assets/sdk-r/components/create/override-sdk/field/Multiselect/utils.ts

@@ -12,7 +12,7 @@ export const setVisibilityForList = (c11nEnv, visibility) => {
 };
 
 const useDeepMemo = (memoFn, key) => {
-  const ref: any = useRef();
+  const ref: any = useRef(null);
   if (!ref.current || !equal(key, ref.current.key)) {
     ref.current = { key, value: memoFn() };
   }
@@ -22,8 +22,10 @@ const useDeepMemo = (memoFn, key) => {
 const preProcessColumns = columns => {
   return columns?.map(col => {
     const tempColObj = { ...col };
-    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
-    if (tempColObj.setProperty) {
+    if (typeof col.value === 'string') {
+      tempColObj.value = col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    }
+    if (typeof col.setProperty === 'string') {
       tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
     }
     return tempColObj;