add new caller when caller still have empty list, just focus on the e…

…mpty one (#7767)

Co-authored-by: Lu Han <32191031+luhan2017@users.noreply.github.com>

Composer/packages/client/src/pages/design/exportSkillModal/content/AddCallers.tsx

@@ -52,7 +52,7 @@ const BorderlessTextField: React.FC<BorderlessTextFieldProps> = (props) => {
     if (componentFocusOnMount) {
       fieldRef.current?.focus();
     }
-  }, []);
+  }, [componentFocusOnMount]);
   return (
     <TextField
       borderless={borderless}
@@ -71,9 +71,15 @@ export const AddCallers: React.FC<ContentProps> = ({ projectId, callers, onUpdat
   };
   const handleAddNewAllowedCallerClick = () => {
     const currentCallers = callers.slice();
-    currentCallers?.push('');
-    onUpdateCallers(currentCallers);
-    setFocusCallerIndex(currentCallers.length - 1);
+    const index = currentCallers.findIndex((content) => content === '');
+    if (index < 0) {
+      currentCallers?.push('');
+      onUpdateCallers(currentCallers);
+      setFocusCallerIndex(currentCallers.length - 1);
+    } else {
+      // just focus on the first empty caller.
+      setFocusCallerIndex(index);
+    }
   };
 
   const [focusCallerIndex, setFocusCallerIndex] = useState<number | undefined>(0);