From 8732b9ef1f84b680f08ee31e19ddfe1962f6bf0f Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Thu, 13 Jul 2023 14:36:21 +0800
Subject: [PATCH] fix: update magic input component style

1. update close button style when focus the input
2. hide the search icon when focus the input
3. add gaps for multi tags

Change-Id: Ieef48447ccabc87f6088973bcb34a269d144d6d4
---
 src/components/MagicInput/index.jsx  |  6 +++++-
 src/components/MagicInput/index.less | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/MagicInput/index.jsx b/src/components/MagicInput/index.jsx
index e1affc78..7e88042e 100644
--- a/src/components/MagicInput/index.jsx
+++ b/src/components/MagicInput/index.jsx
@@ -578,7 +578,11 @@ class MagicInput extends PureComponent {
             />
             {this.renderMenu()}
           </Col>
-          <Col className={styles['search-icon']}>
+          <Col
+            className={`${styles['search-icon']} ${
+              isFocus ? styles['search-icon-hidden'] : ''
+            }`}
+          >
             <SearchOutlined />
           </Col>
           {this.renderClose()}
diff --git a/src/components/MagicInput/index.less b/src/components/MagicInput/index.less
index 741a37f6..4ab5dc0c 100644
--- a/src/components/MagicInput/index.less
+++ b/src/components/MagicInput/index.less
@@ -19,6 +19,7 @@
     .ant-tag {
       height: 24px;
       margin-right: 4px;
+      margin-bottom: 1px;
       padding: 0 4px;
       color: #fff;
       font-size: 10px;
@@ -140,12 +141,19 @@
   line-height: 32px;
 }
 
+.search-icon-hidden {
+  display: none;
+}
+
 .close-btn-col {
-  height: 24px;
-  line-height: 24px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 30px;
+  line-height: 30px;
 
   .close-btn {
-    height: 24px !important;
+    height: 28px !important;
     padding: 0;
     border: none;
   }