Fixed the Refresh call issue for RDL issue

packages/react-sdk-components/src/components/designSystemExtension/FieldGroupList/FieldGroupList.tsx

@@ -24,7 +24,7 @@ export default function FieldGroupList(props: FieldGroupListProps) {
       <Grid2 style={{ width: '100%' }}>
         <Grid2 container spacing={1}>
           {props.items.map(item => (
-            <Grid2 style={{ width: '100%' }}>
+            <Grid2 key={item.name} style={{ width: '100%' }}>
               <b>{item.name}</b>
               {props.onDelete && (
                 <button

packages/react-sdk-components/src/components/infra/Assignment/Assignment.tsx

@@ -88,8 +88,9 @@ export default function Assignment(props: PropsWithChildren<AssignmentProps>) {
   }
 
   const scrollId = window.location.href.includes('embedded') ? '#pega-part-of-page' : '#portal';
+  const currentAssignmentViewName = getPConnect().getCaseInfo().getCurrentAssignmentViewName();
   useScrolltoTop(scrollId, children);
-  useFocusFirstField('Assignment', children);
+  useFocusFirstField('Assignment', currentAssignmentViewName);
 
   useEffect(() => {
     if (children) {

packages/react-sdk-components/src/hooks/useFocusFirstField.ts

@@ -1,22 +1,31 @@
-import { useEffect } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
 /**
- * @example useFocusFirstField(id, children);
- * Focuses first editable field in the view.
+ * @example useFocusFirstField(id, viewName);
+ * Focuses first editable field in the view based on field identity.
  */
-const useFocusFirstField = (id, children) => {
-  useEffect(() => {
+const useFocusFirstField = (id, viewName) => {
+  const previousViewNameRef = useRef(null);
+
+  useLayoutEffect(() => {
+    if (previousViewNameRef.current === viewName || !viewName) {
+      return;
+    }
+
+    previousViewNameRef.current = viewName;
     const assignment = document.getElementById(id);
-    if (assignment) {
-      // Find all editable elements within the div
-      const editableElements: NodeListOf<HTMLElement> = assignment.querySelectorAll('input, select, textarea');
 
-      // Focus on the first editable element
-      if (editableElements.length > 0) {
-        editableElements[0].focus();
-      }
+    if (assignment) {
+      setTimeout(() => {
+        // Find all editable elements within the div
+        const editableElements: NodeListOf<HTMLElement> = assignment.querySelectorAll('input, select, textarea, div[role="combobox"]');
+        if (editableElements.length > 0) {
+          // Focus on the first editable element
+          editableElements[0].focus();
+        }
+      }, 100);
     }
-  }, [children]);
+  }, [viewName]);
 };
 
 export default useFocusFirstField;