fix(components): [select] clearIcon did not work with form statusIcon (…

…#13533)

* fix(components): [select] clearIcon not effect with form statusIcon

* fix(components): [select] add computed value

* fix(components): [select] add comment message

* fix(components): [select] add missing import

* refactor: [select] place selectTagsStyle in useSelect

* fix: [select] remove unused export

* fix: compress code

* fix: fix error

packages/components/select/src/select.vue

@@ -491,6 +491,8 @@ export default defineComponent({
       handleMouseLeave,
       showTagList,
       collapseTagList,
+      // computed style
+      selectTagsStyle,
     } = useSelect(props, states, ctx)
 
     const {
@@ -555,11 +557,6 @@ export default defineComponent({
       ),
     ])
 
-    const selectTagsStyle = computed(() => ({
-      maxWidth: `${unref(inputWidth) - 32}px`,
-      width: '100%',
-    }))
-
     const tagTextStyle = computed(() => {
       const maxWidth =
         unref(inputWidth) > 123

packages/components/select/src/useSelect.ts

@@ -7,6 +7,7 @@ import {
   shallowRef,
   toRaw,
   triggerRef,
+  unref,
   watch,
 } from 'vue'
 import { isObject, toRawType } from '@vue/shared'
@@ -17,6 +18,7 @@ import {
   UPDATE_MODEL_EVENT,
 } from '@element-plus/constants'
 import {
+  ValidateComponentsMap,
   debugWarn,
   getComponentSize,
   isClient,
@@ -133,6 +135,14 @@ export const useSelect = (props, states: States, ctx) => {
     )
   )
 
+  // Consistent with the processing of Form in the input component
+  const showStatusIconAndState = computed(
+    () =>
+      form?.statusIcon &&
+      formItem?.validateState &&
+      ValidateComponentsMap[formItem?.validateState]
+  )
+
   const debounce = computed(() => (props.remote ? 300 : 0))
 
   const emptyText = computed(() => {
@@ -930,6 +940,15 @@ export const useSelect = (props, states: States, ctx) => {
     deleteTag(event, tag)
     tagTooltipRef.value?.updatePopper?.()
   }
+
+  // computed style
+  // if in form and use statusIcon, the width of the icon needs to be subtracted, fix #13526
+  const selectTagsStyle = computed(() => ({
+    maxWidth: `${
+      unref(states.inputWidth) - 32 - (showStatusIconAndState.value ? 22 : 0)
+    }px`,
+    width: '100%',
+  }))
   return {
     optionList,
     optionsArray,
@@ -977,6 +996,9 @@ export const useSelect = (props, states: States, ctx) => {
     showTagList,
     collapseTagList,
 
+    // computed style
+    selectTagsStyle,
+
     // DOM ref
     reference,
     input,