From 7442d0f7b18d9cf692494f66eb2736eb03376eec Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Wed, 29 May 2024 10:36:52 +0800
Subject: [PATCH] fix: taSelector component placeholder style optimization

---
 ui/src/components/TagSelector/index.scss               |  8 ++++++++
 ui/src/components/TagSelector/index.tsx                |  9 ++++++++-
 ui/src/pages/Review/components/EditPostModal/index.tsx | 10 ++--------
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/TagSelector/index.scss b/ui/src/components/TagSelector/index.scss
index 1a53ac42..5d26102e 100644
--- a/ui/src/components/TagSelector/index.scss
+++ b/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 {
diff --git a/ui/src/components/TagSelector/index.tsx b/ui/src/components/TagSelector/index.tsx
index 25ec293d..6b10c236 100644
--- a/ui/src/components/TagSelector/index.tsx
+++ b/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}>
diff --git a/ui/src/pages/Review/components/EditPostModal/index.tsx b/ui/src/pages/Review/components/EditPostModal/index.tsx
index 9e7ae5e9..5a4529fd 100644
--- a/ui/src/pages/Review/components/EditPostModal/index.tsx
+++ b/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>
           )}