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

…s#7287)
MrWeilian · Nov 8, 2022 · d93f265 · d93f265
1 parent 1b1b62f
commit d93f265
Showing 1 changed file with 18 additions and 22 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,16 @@ 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' },
+])
+
 const [recordCursor, setCursor] = useCursor(input)
 
 useResizeObserver(textarea, (entries) => {