From 648dd9287f1cb5c96435a300296ec290020d3236 Mon Sep 17 00:00:00 2001
From: Wenyi Luo <wenyluo@microsoft.com>
Date: Wed, 12 May 2021 15:24:32 +0800
Subject: [PATCH] add new caller when caller still have empty list, just focus
 on the empty one

---
 .../design/exportSkillModal/content/AddCallers.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/exportSkillModal/content/AddCallers.tsx b/Composer/packages/client/src/pages/design/exportSkillModal/content/AddCallers.tsx
index c4eb0c53b7..587079aba8 100644
--- a/Composer/packages/client/src/pages/design/exportSkillModal/content/AddCallers.tsx
+++ b/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);