add state to control alert display

packages/app/src/components/Common/ClosableTextInput.tsx

@@ -30,6 +30,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
 
   const [inputText, setInputText] = useState(props.value);
   const [currentAlertInfo, setAlertInfo] = useState<AlertInfo | null>(null);
+  const [isAbleToShowAlert, setIsAbleToShowAlert] = useState<boolean>(false);
 
   const createValidation = async(inputText: string) => {
     if (props.inputValidator != null) {
@@ -42,6 +43,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
     const inputText = e.target.value;
     createValidation(inputText);
     setInputText(inputText);
+    setIsAbleToShowAlert(true);
   };
 
   const onFocusHandler = async(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -119,7 +121,7 @@ const ClosableTextInput: FC<ClosableTextInputProps> = memo((props: ClosableTextI
         onBlur={onBlurHandler}
         autoFocus={false}
       />
-      <AlertInfo />
+      {isAbleToShowAlert && <AlertInfo />}
     </div>
   );
 });