From a01b05d39cfddd084d080a24812cd6997f7842ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Mon, 15 Jan 2024 15:43:17 +0800
Subject: [PATCH] fix(components): [select] style break change in multiple
 collapseTags (#15460)

* fix(components): [select] style break change in multiple collapseTags

* fix(components): [select-v2] style break change in multiple collapseTags

* fix(components): [select & select-v2] popover updated
---
 packages/components/select-v2/src/select.vue  |  7 +++--
 .../components/select-v2/src/useSelect.ts     | 27 +++++++++++++++++++
 .../select/__tests__/select.test.ts           |  3 ++-
 packages/components/select/src/select.vue     |  7 +++--
 packages/components/select/src/useSelect.ts   | 26 ++++++++++++++++++
 5 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index fae487e2c3..8756a9146c 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -83,12 +83,15 @@
                 :teleported="teleported"
               >
                 <template #default>
-                  <div :class="nsSelect.e('selected-item')">
+                  <div
+                    ref="collapseItemRef"
+                    :class="nsSelect.e('selected-item')"
+                  >
                     <el-tag
                       :closable="false"
                       :size="collapseTagSize"
                       :type="tagType"
-                      :style="tagStyle"
+                      :style="collapseTagStyle"
                       disable-transitions
                     >
                       <span :class="nsSelect.e('tags-text')">
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 1a1c99487b..fbd73c0af9 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -67,6 +67,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
     inputHovering: false,
     selectionWidth: 0,
     calculatorWidth: 0,
+    collapseItemWidth: 0,
     previousQuery: null,
     previousValue: undefined,
     selectedLabel: '',
@@ -89,6 +90,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
   const suffixRef = ref<HTMLElement>(null)
   const menuRef = ref<HTMLElement>(null)
   const tagMenuRef = ref<HTMLElement>(null)
+  const collapseItemRef = ref<HTMLElement>(null)
 
   const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(
     inputRef,
@@ -244,7 +246,23 @@ const useSelect = (props: ISelectV2Props, emit) => {
     popperSize.value = selectRef.value?.offsetWidth || 200
   }
 
+  const getGapWidth = () => {
+    if (!selectionRef.value) return 0
+    const style = window.getComputedStyle(selectionRef.value)
+    return Number.parseFloat(style.gap || '6px')
+  }
+
+  // computed style
   const tagStyle = computed(() => {
+    const gapWidth = getGapWidth()
+    const maxWidth =
+      collapseItemRef.value && props.maxCollapseTags === 1
+        ? states.selectionWidth - states.collapseItemWidth - gapWidth
+        : states.selectionWidth
+    return { maxWidth: `${maxWidth}px` }
+  })
+
+  const collapseTagStyle = computed(() => {
     return { maxWidth: `${states.selectionWidth}px` }
   })
 
@@ -446,6 +464,11 @@ const useSelect = (props: ISelectV2Props, emit) => {
     states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
   }
 
+  const resetCollapseItemWidth = () => {
+    states.collapseItemWidth =
+      collapseItemRef.value.getBoundingClientRect().width
+  }
+
   const updateTooltip = () => {
     tooltipRef.value?.updatePopper?.()
   }
@@ -807,7 +830,9 @@ const useSelect = (props: ISelectV2Props, emit) => {
   useResizeObserver(selectionRef, resetSelectionWidth)
   useResizeObserver(calculatorRef, resetCalculatorWidth)
   useResizeObserver(menuRef, updateTooltip)
+  useResizeObserver(wrapperRef, updateTooltip)
   useResizeObserver(tagMenuRef, updateTagTooltip)
+  useResizeObserver(collapseItemRef, resetCollapseItemWidth)
 
   return {
     // data exports
@@ -823,6 +848,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
     iconComponent,
     iconReverse,
     tagStyle,
+    collapseTagStyle,
     inputStyle,
     popperSize,
     dropdownMenuVisible,
@@ -848,6 +874,7 @@ const useSelect = (props: ISelectV2Props, emit) => {
     selectionRef,
     prefixRef,
     suffixRef,
+    collapseItemRef,
 
     popperRef,
 
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index b0f3ed0e3c..c44882f8fb 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1149,8 +1149,9 @@ describe('Select', () => {
     options[1].click()
     await nextTick()
     options[2].click()
+    selectRef.vm.states.collapseItemWidth = 38
     await nextTick()
-    expect(tagWrapperDom.style.maxWidth).toBe('200px')
+    expect(tagWrapperDom.style.maxWidth).toBe('156px')
   })
 
   test('multiple select with collapseTagsTooltip', async () => {
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 293e58f4af..f49c518cd1 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -83,13 +83,16 @@
                 :teleported="teleported"
               >
                 <template #default>
-                  <div :class="nsSelect.e('selected-item')">
+                  <div
+                    ref="collapseItemRef"
+                    :class="nsSelect.e('selected-item')"
+                  >
                     <el-tag
                       :closable="false"
                       :size="collapseTagSize"
                       :type="tagType"
                       disable-transitions
-                      :style="tagStyle"
+                      :style="collapseTagStyle"
                     >
                       <span :class="nsSelect.e('tags-text')">
                         + {{ states.selected.length - maxCollapseTags }}
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 2c8f81097f..3a487e5992 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -66,6 +66,7 @@ export const useSelect = (props: ISelectProps, emit) => {
     selected: props.multiple ? [] : ({} as any),
     selectionWidth: 0,
     calculatorWidth: 0,
+    collapseItemWidth: 0,
     selectedLabel: '',
     hoveringIndex: -1,
     previousQuery: null,
@@ -96,6 +97,7 @@ export const useSelect = (props: ISelectProps, emit) => {
   const suffixRef = ref<HTMLElement>(null)
   const menuRef = ref<HTMLElement>(null)
   const tagMenuRef = ref<HTMLElement>(null)
+  const collapseItemRef = ref<HTMLElement>(null)
   const scrollbarRef = ref<{
     handleScroll: () => void
   } | null>(null)
@@ -473,6 +475,11 @@ export const useSelect = (props: ISelectProps, emit) => {
     states.calculatorWidth = calculatorRef.value.getBoundingClientRect().width
   }
 
+  const resetCollapseItemWidth = () => {
+    states.collapseItemWidth =
+      collapseItemRef.value.getBoundingClientRect().width
+  }
+
   const updateTooltip = () => {
     tooltipRef.value?.updatePopper?.()
   }
@@ -757,8 +764,23 @@ export const useSelect = (props: ISelectProps, emit) => {
     }
   }
 
+  const getGapWidth = () => {
+    if (!selectionRef.value) return 0
+    const style = window.getComputedStyle(selectionRef.value)
+    return Number.parseFloat(style.gap || '6px')
+  }
+
   // computed style
   const tagStyle = computed(() => {
+    const gapWidth = getGapWidth()
+    const maxWidth =
+      collapseItemRef.value && props.maxCollapseTags === 1
+        ? states.selectionWidth - states.collapseItemWidth - gapWidth
+        : states.selectionWidth
+    return { maxWidth: `${maxWidth}px` }
+  })
+
+  const collapseTagStyle = computed(() => {
     return { maxWidth: `${states.selectionWidth}px` }
   })
 
@@ -776,7 +798,9 @@ export const useSelect = (props: ISelectProps, emit) => {
   useResizeObserver(selectionRef, resetSelectionWidth)
   useResizeObserver(calculatorRef, resetCalculatorWidth)
   useResizeObserver(menuRef, updateTooltip)
+  useResizeObserver(wrapperRef, updateTooltip)
   useResizeObserver(tagMenuRef, updateTagTooltip)
+  useResizeObserver(collapseItemRef, resetCollapseItemWidth)
 
   onMounted(() => {
     setSelected()
@@ -841,6 +865,7 @@ export const useSelect = (props: ISelectProps, emit) => {
 
     // computed style
     tagStyle,
+    collapseTagStyle,
     inputStyle,
 
     // DOM ref
@@ -857,5 +882,6 @@ export const useSelect = (props: ISelectProps, emit) => {
     scrollbarRef,
     menuRef,
     tagMenuRef,
+    collapseItemRef,
   }
 }