fix(components): [input] input width change by clearable (element-plu…

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287)
MrWeilian · Nov 8, 2022 · 41c3eb5 · 41c3eb5
1 parent 1b1b62f
commit 41c3eb5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 23 deletions.
diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
@@ -70,6 +70,15 @@
         <!-- suffix slot -->
         <span v-if="suffixVisible" :class="nsInput.e('suffix')">
           <span :class="nsInput.e('suffix-inner')">
+            <el-icon
+              v-if="renderClear"
+              :class="[nsInput.e('icon'), nsInput.e('clear')]"
+              :style="clearStyle"
+              @mousedown.prevent="NOOP"
+              @click="clear"
+            >
+              <circle-close />
+            </el-icon>
             <template
               v-if="!showClear || !showPwdVisible || !isWordLimitVisible"
             >
@@ -78,14 +87,6 @@
                 <component :is="suffixIcon" />
               </el-icon>
             </template>
-            <el-icon
-              v-if="showClear"
-              :class="[nsInput.e('icon'), nsInput.e('clear')]"
-              @mousedown.prevent="NOOP"
-              @click="clear"
-            >
-              <circle-close />
-            </el-icon>
             <el-icon
               v-if="showPwdVisible"
               :class="[nsInput.e('icon'), nsInput.e('password')]"
@@ -262,21 +263,12 @@ const textareaStyle = computed<StyleValue>(() => [
 const nativeInputValue = computed(() =>
   isNil(props.modelValue) ? '' : String(props.modelValue)
 )
-const showClear = computed(
-  () =>
-    props.clearable &&
-    !inputDisabled.value &&
-    !props.readonly &&
-    !!nativeInputValue.value &&
-    (focused.value || hovering.value)
+const showClear = computed(() => !!nativeInputValue.value)
+const renderClear = computed(
+  () => props.clearable && !props.readonly && !inputDisabled.value
 )
 const showPwdVisible = computed(
-  () =>
-    props.showPassword &&
-    !inputDisabled.value &&
-    !props.readonly &&
-    !!nativeInputValue.value &&
-    (!!nativeInputValue.value || focused.value)
+  () => props.showPassword && !inputDisabled.value && !props.readonly
 )
 const isWordLimitVisible = computed(
   () =>
@@ -298,12 +290,17 @@ const suffixVisible = computed(
   () =>
     !!slots.suffix ||
     !!props.suffixIcon ||
-    showClear.value ||
+    props.clearable ||
     props.showPassword ||
     isWordLimitVisible.value ||
     (!!validateState.value && needStatusIcon.value)
 )
 
+const clearStyle = computed<StyleValue>(() => [
+  { visibility: showClear.value ? 'visible' : 'hidden' },
+  { cursor: showClear.value ? 'pointer' : 'auto' },
+])
+
 const [recordCursor, setCursor] = useCursor(input)
 
 useResizeObserver(textarea, (entries) => {

diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
@@ -280,9 +280,14 @@
           }
         }
       } @else {
-        > :first-child {
+        > :first-child, :nth-child(2) {
           margin-left: 8px;
         }
+        > :nth-child(2) {
+          .#{$namespace}-input__count-inner {
+            padding-left: 0;
+          }
+        }
       }
     }
   }