fix(select): fix error position of input and tags (#1682)

packages/select/src/select.vue

@@ -52,7 +52,7 @@
             </span>
             <!-- <div> -->
             <transition v-if="!collapseTags" @after-leave="resetInputHeight">
-              <span>
+              <span :style="{marginLeft: prefixWidth && selected.length ? `${prefixWidth}px` : null}">
                 <el-tag
                   v-for="item in selected"
                   :key="getValueKey(item)"
@@ -77,7 +77,7 @@
               :class="[selectSize ? `is-${ selectSize }` : '']"
               :disabled="selectDisabled"
               :autocomplete="autocomplete"
-              :style="{ 'flex-grow': '1', width: inputLength / (inputWidth - 32) + '%', 'max-width': inputWidth - 42 + 'px' }"
+              :style="{ marginLeft: prefixWidth && !selected.length || tagInMultiLine ? `${prefixWidth}px` : null, flexGrow: '1', width: `${inputLength / (inputWidth - 32)}%`, maxWidth: `${inputWidth - 42}px` }"
               @focus="handleFocus"
               @blur="handleBlur"
               @keyup="managePlaceholder"
@@ -121,7 +121,9 @@
             @mouseleave="inputHovering = false"
           >
             <template v-if="$slots.prefix" #prefix>
-              <slot name="prefix"></slot>
+              <div style="height: 100%;display: flex;justify-content: center;align-items: center">
+                <slot name="prefix"></slot>
+              </div>
             </template>
             <template #suffix>
               <i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
@@ -325,6 +327,8 @@ export default defineComponent({
       options,
       cachedOptions,
       optionsCount,
+      prefixWidth,
+      tagInMultiLine,
     } = toRefs(states)
 
     provide(selectKey, reactive({
@@ -366,10 +370,21 @@ export default defineComponent({
         if (reference.value.$el) {
           inputWidth.value = reference.value.$el.getBoundingClientRect().width
         }
+        if (ctx.slots.prefix) {
+          const inputChildNodes = reference.value.$el.childNodes
+          const input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]
+          const prefix = reference.value.$el.querySelector('.el-input__prefix')
+          prefixWidth.value = Math.max(prefix.getBoundingClientRect().width + 5, 30)
+          if (states.prefixWidth) {
+            input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`
+          }
+        }
       })
       setSelected()
     })
 
+
+
     onBeforeUnmount(() => {
       removeResizeListener(selectWrapper.value as any, handleResize)
     })
@@ -386,6 +401,8 @@ export default defineComponent({
     })
 
     return {
+      tagInMultiLine,
+      prefixWidth,
       selectSize,
       readonly,
       handleResize,

packages/select/src/useSelect.ts

@@ -53,6 +53,8 @@ export function useSelectStates(props) {
     isOnComposition: false,
     isSilentBlur: false,
     selectEmitter,
+    prefixWidth: null,
+    tagInMultiLine: false,
   })
 }
 
@@ -264,6 +266,9 @@ export const useSelect = (props, states: States, ctx) => {
         : Math.max(
           _tags ? (_tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0)) : 0,
           sizeInMap) + 'px'
+
+      states.tagInMultiLine = parseFloat(input.style.height) > sizeInMap
+
       if (states.visible && emptyText.value !== false) {
         popper.value?.update?.()
       }