fix: taSelector component placeholder style optimization

ui/src/components/TagSelector/index.scss

@@ -61,6 +61,14 @@
     white-space: nowrap;
   }
 
+  .a-placeholder-width {
+    display: inline-block;
+    position: absolute;
+    height: 0;
+    overflow: hidden;
+    max-width: calc(100% - 40px);
+  }
+
 }
 
 .tag-selector-wrap--focus {

ui/src/components/TagSelector/index.tsx

@@ -328,13 +328,19 @@ const TagSelector: FC<IProps> = ({
   useEffect(() => {
     // set width of tag Form.Control
     const ele = document.querySelector('.a-input-width') as HTMLElement;
+    const elePlaceholder = document.querySelector(
+      '.a-placeholder-width',
+    ) as HTMLElement;
     if (ele.offsetWidth > 60) {
       inputRef.current?.setAttribute(
         'style',
         `width:${ele.offsetWidth + 16}px`,
       );
     } else {
-      inputRef.current?.setAttribute('style', 'width: 60px');
+      inputRef.current?.setAttribute(
+        'style',
+        `width: ${elePlaceholder.offsetWidth + 7}px`,
+      );
     }
   }, [searchValue]);
 
@@ -392,6 +398,7 @@ const TagSelector: FC<IProps> = ({
               />
             )}
             <span className="a-input-width">{searchValue}</span>
+            <span className="a-placeholder-width">{t('add_btn')}</span>
           </div>
         </div>
         <Dropdown.Menu id="a-dropdown-menu" className="w-100" show={showMenu}>

ui/src/pages/Review/components/EditPostModal/index.tsx

@@ -346,11 +346,6 @@ const Index: FC<Props> = ({
           {objectType === 'question' && (
             <Form.Group controlId="tags" className="my-3">
               <Form.Label>{t('form.fields.tags.label')}</Form.Label>
-              <Form.Control
-                defaultValue={JSON.stringify(formData.tags.value)}
-                isInvalid={formData.tags.isInvalid}
-                hidden
-              />
               <TagSelector
                 value={formData.tags.value}
                 onChange={(value) => {
@@ -360,10 +355,9 @@ const Index: FC<Props> = ({
                 }}
                 showRequiredTag
                 maxTagLength={5}
+                isInvalid={formData.tags.isInvalid}
+                errMsg={formData.tags.errorMsg}
               />
-              <Form.Control.Feedback type="invalid">
-                {formData.tags.errorMsg}
-              </Form.Control.Feedback>
             </Form.Group>
           )}