From 7ef4b2af0b2712ec3bdabdc086d2a64cab1f022b Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Sat, 19 Nov 2022 21:19:27 +0800
Subject: [PATCH] fix(components): [cascader] collapse tags tooltip style
 (#10669)

---
 .../cascader/__tests__/cascader.test.tsx      | 14 ++--
 packages/components/cascader/src/index.vue    |  1 -
 packages/theme-chalk/src/cascader.scss        | 71 +++++++++----------
 3 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/packages/components/cascader/__tests__/cascader.test.tsx b/packages/components/cascader/__tests__/cascader.test.tsx
index 71c8eb7a3c..8b1e476111 100644
--- a/packages/components/cascader/__tests__/cascader.test.tsx
+++ b/packages/components/cascader/__tests__/cascader.test.tsx
@@ -232,7 +232,7 @@ describe('Cascader.vue', () => {
 
   test('collapse tags tooltip', async () => {
     const props = { multiple: true }
-    const wrapper = _mount(() => (
+    _mount(() => (
       <Cascader
         modelValue={[
           ['zhejiang', 'hangzhou'],
@@ -247,12 +247,12 @@ describe('Cascader.vue', () => {
     ))
 
     await nextTick()
-    expect(wrapper.findAll(TAG).length).toBe(4)
-    const tags = wrapper.findAll(TAG).filter((item) => {
-      return hasClass(item.element, 'in-tooltip')
-    })
-    expect(tags[0].text()).toBe('Zhejiang / Ningbo')
-    expect(tags[1].text()).toBe('Zhejiang / Wenzhou')
+    const tooltipTags = document.querySelectorAll(
+      `.el-cascader__collapse-tags ${TAG}`
+    )
+    expect(tooltipTags.length).toBe(2)
+    expect(tooltipTags[0].textContent).toBe('Zhejiang / Ningbo')
+    expect(tooltipTags[1].textContent).toBe('Zhejiang / Wenzhou')
   })
 
   test('tag type', async () => {
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index 118417bd05..9dc1fa1d1e 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -93,7 +93,6 @@
             </template>
             <template v-else>
               <el-tooltip
-                :teleported="false"
                 :disabled="popperVisible || !collapseTagsTooltip"
                 :fallback-placements="['bottom', 'top', 'right', 'left']"
                 placement="bottom"
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index 6de5dcbbb6..18290a3032 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -4,6 +4,37 @@
 @use 'mixins/var' as *;
 @use 'common/var' as *;
 
+@mixin cascader-tag-normal($background-color) {
+  .#{$namespace}-tag {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    margin: 2px 0 2px 6px;
+    text-overflow: ellipsis;
+    background: $background-color;
+
+    &:not(.is-hit) {
+      border-color: transparent;
+    }
+
+    > span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .#{$namespace}-icon-close {
+      flex: none;
+      background-color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('color-white');
+
+      &:hover {
+        background-color: getCssVar('text-color', 'secondary');
+      }
+    }
+  }
+}
+
 @include b(cascader) {
   @include set-component-css-var('cascader', $cascader);
 
@@ -116,49 +147,13 @@
     line-height: normal;
     text-align: left;
     box-sizing: border-box;
-
-    .#{$namespace}-tag {
-      display: inline-flex;
-      align-items: center;
-      max-width: 100%;
-      margin: 2px 0 2px 6px;
-      text-overflow: ellipsis;
-      background: getCssVar('cascader-tag-background');
-
-      &:not(.is-hit) {
-        border-color: transparent;
-      }
-
-      > span {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .#{$namespace}-icon-close {
-        flex: none;
-        background-color: getCssVar('text-color', 'placeholder');
-        color: getCssVar('color-white');
-
-        &:hover {
-          background-color: getCssVar('text-color', 'secondary');
-        }
-      }
-    }
+    @include cascader-tag-normal(getCssVar('cascader-tag-background'));
   }
 
   @include e(collapse-tags) {
     white-space: normal;
     z-index: getCssVar('index-normal');
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-
-  @include e(collapse-tag) {
-    line-height: inherit;
-    height: inherit;
-    display: flex;
+    @include cascader-tag-normal(getCssVar('fill-color'));
   }
 
   @include e(suggestion-panel) {