From 152f4dbf3d6b2758c36b9d47d664a4e1c492b5e2 Mon Sep 17 00:00:00 2001
From: Shana-AE <31391693+Shana-AE@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:35:16 +0800
Subject: [PATCH 01/14] fix(components): [rate] fix disbaledVoidIcon typo
 (#6456)

fix #6455
---
 packages/components/rate/src/rate.ts  | 2 +-
 packages/components/rate/src/rate.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/rate/src/rate.ts b/packages/components/rate/src/rate.ts
index 74fcfca8ad..82e6e949ad 100644
--- a/packages/components/rate/src/rate.ts
+++ b/packages/components/rate/src/rate.ts
@@ -55,7 +55,7 @@ export const rateProps = buildProps({
     type: iconPropType,
     default: () => Star,
   },
-  disabledvoidIcon: {
+  disabledVoidIcon: {
     type: iconPropType,
     default: () => StarFilled,
   },
diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index e28b9995d4..4ad03553df 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -155,7 +155,7 @@ export default defineComponent({
       getValueFromMap(props.modelValue, componentMap.value)
     )
     const voidComponent = computed(() =>
-      rateDisabled.value ? props.disabledvoidIcon : props.voidIcon
+      rateDisabled.value ? props.disabledVoidIcon : props.voidIcon
     )
     const activeComponent = computed(() =>
       getValueFromMap(currentValue.value, componentMap.value)

From e1447d9c7c733812858bb7e43a40040e8f56fd5d Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 01:36:15 -0500
Subject: [PATCH 02/14] fix(components): [select] display error when setting
 persistent to false (#6522)

---
 packages/components/select/src/option.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/select/src/option.vue b/packages/components/select/src/option.vue
index 8546c05d55..8e1ecf5cdf 100644
--- a/packages/components/select/src/option.vue
+++ b/packages/components/select/src/option.vue
@@ -25,6 +25,7 @@ import {
   getCurrentInstance,
   onBeforeUnmount,
   reactive,
+  nextTick,
 } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import { useOption } from './useOption'
@@ -74,7 +75,9 @@ export default defineComponent({
       })
       // if option is not selected, remove it from cache
       if (select.cachedOptions.get(key) === vm && !doesSelected) {
-        select.cachedOptions.delete(key)
+        nextTick(() => {
+          select.cachedOptions.delete(key)
+        })
       }
       select.onOptionDestroy(key, vm)
     })

From 045703228b9fd9928aa7b9133bf6c93602ee6092 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=A4=A7=E5=A4=A7?= <249812928@qq.com>
Date: Fri, 11 Mar 2022 14:56:29 +0800
Subject: [PATCH 03/14] fix(components): [el-input] pass input-style props to
 input-wrapper (#6506)

Co-authored-by: zhangtian <zhangtian@weidian.com>
---
 packages/components/input/src/input.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue
index dc7c693ff2..bfea862b48 100644
--- a/packages/components/input/src/input.vue
+++ b/packages/components/input/src/input.vue
@@ -209,7 +209,10 @@ export default defineComponent({
     const validateIcon = computed(
       () => ValidateComponentsMap[validateState.value]
     )
-    const containerStyle = computed(() => rawAttrs.style as StyleValue)
+    const containerStyle = computed<StyleValue>(() => [
+      rawAttrs.style,
+      props.inputStyle,
+    ])
     const computedTextareaStyle = computed<StyleValue>(() => [
       props.inputStyle,
       _textareaCalcStyle.value,

From 063c56446135176971f532bd0eb2e88a0b137d43 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Fri, 11 Mar 2022 15:05:29 +0800
Subject: [PATCH 04/14] fix(components): [el-table] escape special html
 characters (#6520)

* fix(components): [el-table] escape special html characters

* fix: use 3rd package
---
 package.json                          | 1 +
 packages/components/table/src/util.ts | 2 ++
 pnpm-lock.yaml                        | 7 ++++---
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 72e8874a93..a72297b33b 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "@vueuse/core": "^7.7.1",
     "async-validator": "^4.0.7",
     "dayjs": "^1.10.8",
+    "escape-html": "^1.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
diff --git a/packages/components/table/src/util.ts b/packages/components/table/src/util.ts
index 2f62e3894a..d163ae6bd7 100644
--- a/packages/components/table/src/util.ts
+++ b/packages/components/table/src/util.ts
@@ -1,5 +1,6 @@
 import { createPopper } from '@popperjs/core'
 import { get } from 'lodash-unified'
+import escapeHtml from 'escape-html'
 import { hasOwn, off, on } from '@element-plus/utils'
 import { useZIndex } from '@element-plus/hooks'
 import type {
@@ -326,6 +327,7 @@ export function createTablePopper(
     const isLight = tooltipEffect === 'light'
     const content = document.createElement('div')
     content.className = `el-popper ${isLight ? 'is-light' : 'is-dark'}`
+    popperContent = escapeHtml(popperContent)
     content.innerHTML = popperContent
     content.style.zIndex = String(nextZIndex())
     document.body.appendChild(content)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be1a9a11f3..1649520775 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,6 +54,7 @@ importers:
       cz-conventional-changelog: ^3.3.0
       dayjs: ^1.10.8
       esbuild: ^0.14.25
+      escape-html: ^1.0.3
       eslint: ^8.10.0
       eslint-define-config: ^1.2.5
       expect-type: ^0.13.0
@@ -103,6 +104,7 @@ importers:
       '@vueuse/core': 7.7.1_vue@3.2.31
       async-validator: 4.0.7
       dayjs: 1.10.8
+      escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
@@ -5985,8 +5987,7 @@ packages:
     dev: true
 
   /escape-html/1.0.3:
-    resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=}
-    dev: true
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
@@ -9951,7 +9952,7 @@ packages:
     dev: true
 
   /path-name/1.0.0:
-    resolution: {integrity: sha1-jKBjpj3nmC36lXYO2v/RAhRJTyQ=}
+    resolution: {integrity: sha512-/dcAb5vMXH0f51yvMuSUqFpxUcA8JelbRmE5mW/p4CUJxrNgK24IkstnV7ENtg2IDGBOu6izKTG6eilbnbNKWQ==}
     dev: true
 
   /path-parse/1.0.7:

From 36e80869ab0be3464a964d59cee83a8cad27e2d6 Mon Sep 17 00:00:00 2001
From: blackie <blackywkl@gmail.com>
Date: Fri, 11 Mar 2022 15:09:09 +0800
Subject: [PATCH 05/14] fix(components): [autocomplete] fix shaking at first
 open (#6342)

* fix(components): [auto-complete] fix shaking at first open

* fix(components): [autocomplete] remove added file by oversight
---
 packages/components/autocomplete/src/autocomplete.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/autocomplete/src/autocomplete.vue b/packages/components/autocomplete/src/autocomplete.vue
index b5164654e5..9b83dded22 100644
--- a/packages/components/autocomplete/src/autocomplete.vue
+++ b/packages/components/autocomplete/src/autocomplete.vue
@@ -13,7 +13,7 @@
     trigger="click"
     :transition="`${ns.namespace.value}-zoom-in-top`"
     persistent
-    @show="onSuggestionShow"
+    @before-show="onSuggestionShow"
   >
     <div
       ref="listboxRef"

From cfd51c849e51b1856aae999831809b8ab7c518de Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Fri, 11 Mar 2022 15:39:44 +0800
Subject: [PATCH 06/14] chore(project): add escape-html as dependency for main
 entry (#6534)

- Add `escape-html` as dependency for `packages/element-plus`
---
 packages/element-plus/package.json | 1 +
 pnpm-lock.yaml                     | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json
index fe0a70900b..e2d56bb265 100644
--- a/packages/element-plus/package.json
+++ b/packages/element-plus/package.json
@@ -54,6 +54,7 @@
     "@vueuse/core": "^7.7.1",
     "async-validator": "^4.0.7",
     "dayjs": "^1.10.8",
+    "escape-html": "^1.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1649520775..a52c4755ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,6 +244,7 @@ importers:
       async-validator: ^4.0.7
       csstype: ^2.6.19
       dayjs: ^1.10.8
+      escape-html: ^1.0.3
       lodash: ^4.17.21
       lodash-es: ^4.17.21
       lodash-unified: ^1.0.2
@@ -257,6 +258,7 @@ importers:
       '@vueuse/core': 7.7.1_vue@3.2.31
       async-validator: 4.0.7
       dayjs: 1.10.8
+      escape-html: 1.0.3
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.2_da03a4540fbd16bbaafbb96724306afd
@@ -5987,7 +5989,7 @@ packages:
     dev: true
 
   /escape-html/1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+    resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=}
 
   /escape-string-regexp/1.0.5:
     resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}

From 61c6b97183461ec035daf5370614f6da8bd832eb Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Fri, 11 Mar 2022 15:56:07 +0800
Subject: [PATCH 07/14] fix(components): [el-upload] jitter when remove file in
 the list (#6505)

* fix(components): [el-upload] jitter when remove file in the list

* chore: improve code
---
 .../components/upload/src/upload-list.vue     |  5 +++-
 .../theme-chalk/src/common/transition.scss    |  7 ++++-
 packages/theme-chalk/src/upload.scss          | 27 ++++++++-----------
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/components/upload/src/upload-list.vue b/packages/components/upload/src/upload-list.vue
index 0a438f4d95..13c87c8d65 100644
--- a/packages/components/upload/src/upload-list.vue
+++ b/packages/components/upload/src/upload-list.vue
@@ -33,7 +33,10 @@
           alt=""
         />
         <div
-          v-if="file.status === 'uploading' || listType !== 'picture-card'"
+          v-if="
+            listType !== 'picture' &&
+            (file.status === 'uploading' || listType !== 'picture-card')
+          "
           :class="nsUpload.be('list', 'item-info')"
         >
           <a
diff --git a/packages/theme-chalk/src/common/transition.scss b/packages/theme-chalk/src/common/transition.scss
index 5546781d6a..ec4dc26c7b 100644
--- a/packages/theme-chalk/src/common/transition.scss
+++ b/packages/theme-chalk/src/common/transition.scss
@@ -104,12 +104,17 @@
 .#{$namespace}-list-leave-active {
   transition: all 1s;
 }
+
 .#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-active {
+.#{$namespace}-list-leave-to {
   opacity: 0;
   transform: translateY(-30px);
 }
 
+.#{$namespace}-list-leave-active {
+  position: absolute !important;
+}
+
 .#{$namespace}-opacity-transition {
   transition: opacity var(--el-transition-duration)
     cubic-bezier(0.55, 0, 0.1, 1);
diff --git a/packages/theme-chalk/src/upload.scss b/packages/theme-chalk/src/upload.scss
index 67eabcb2ff..1ad78e7ca1 100644
--- a/packages/theme-chalk/src/upload.scss
+++ b/packages/theme-chalk/src/upload.scss
@@ -115,24 +115,20 @@
 }
 
 @include b(upload-list) {
-  margin: 0;
+  margin: 10px 0 0;
   padding: 0;
   list-style: none;
-
+  position: relative;
   @include e(item) {
     transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
     font-size: 14px;
     color: var(--el-text-color-regular);
-    margin-top: 4px;
+    margin-bottom: 5px;
     position: relative;
     box-sizing: border-box;
     border-radius: 4px;
     width: 100%;
 
-    display: inline-flex;
-    align-items: center;
-    padding: 1px;
-
     .#{bem('progress')} {
       position: absolute;
       top: 20px;
@@ -150,10 +146,6 @@
       padding-right: 0;
     }
 
-    &:first-child {
-      margin-top: 8px;
-    }
-
     & .#{bem('icon', '', 'upload-success')} {
       color: var(--el-color-success);
     }
@@ -162,10 +154,12 @@
       display: none;
       position: absolute;
       right: 5px;
+      top: 50%;
       cursor: pointer;
       opacity: 0.75;
       color: var(--el-text-color-regular);
       transition: opacity var(--el-transition-duration);
+      transform: translateY(-50%);
 
       &:hover {
         opacity: 1;
@@ -181,6 +175,7 @@
       cursor: pointer;
       opacity: 1;
       color: var(--el-color-primary);
+      transform: translateY(-50%);
     }
 
     &:hover {
@@ -295,7 +290,7 @@
 
   @include m(picture-card) {
     display: inline-flex;
-
+    margin: 0;
     #{getCssVarName('upload-list', 'picture-card', 'size')}: 148px;
 
     .#{bem('upload-list', 'item')} {
@@ -426,7 +421,6 @@
       box-sizing: border-box;
       margin-top: 10px;
       padding: 10px;
-      height: 92px;
 
       .#{bem('icon', '' ,'check')},
       .#{bem('icon', '' ,'circle-check')} {
@@ -450,10 +444,11 @@
             display: none;
           }
         }
+      }
 
-        .#{bem('icon', '' ,'close')} {
-          top: 5px;
-        }
+      & .#{bem('icon', '' ,'close')} {
+        top: 5px;
+        transform: translateY(0);
       }
     }
 

From 57d08f9a7809ccf1635fcc549b651f43d28c679a Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 02:56:23 -0500
Subject: [PATCH 08/14] feat(components): [select]add collapse-tags-tooltip
 (#6245)

* feat(components): [select]add collapse-tags-tooltip

* feat(components): [select] collapse-tags-tooltip set width

* feat(components): [select] collapse-tags-tooltip set fallback-placements

* feat(components): [select] resolve conflicts

* feat(components): [select] add v-if on tooltip
---
 docs/en-US/component/select.md                |  3 +-
 docs/examples/select/multiple.vue             | 81 ++++++++++++-------
 .../select/__tests__/select.spec.ts           | 75 ++++++++++++++++-
 packages/components/select/src/select.vue     | 49 ++++++++++-
 packages/theme-chalk/src/select.scss          | 14 ++++
 5 files changed, 188 insertions(+), 34 deletions(-)

diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index e64151b12a..3b71c334b4 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -47,7 +47,7 @@ select/clearable
 
 Multiple select uses tags to display selected options.
 
-:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute.
+:::demo Set `multiple` attribute for `el-select` to enable multiple mode. In this case, the value of `v-model` will be an array of selected options. By default the selected options will be displayed as Tags. You can collapse them to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
 
 select/multiple
 
@@ -120,6 +120,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | size                              | size of Input                                                                                                               | string                             | large/default/small         | default          |
 | clearable                         | whether select can be cleared                                                                                               | boolean                            | —                           | false            |
 | collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                  | boolean                            | —                           | false            |
+| collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true            | boolean                            | true / false                | false            |
 | multiple-limit                    | maximum number of options user can select when `multiple` is `true`. No limit when set to 0                                 | number                             | —                           | 0                |
 | name                              | the name attribute of select input                                                                                          | string                             | —                           | —                |
 | effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                             | string                             | string                      | light            |
diff --git a/docs/examples/select/multiple.vue b/docs/examples/select/multiple.vue
index 503bf0cefd..686fb67b94 100644
--- a/docs/examples/select/multiple.vue
+++ b/docs/examples/select/multiple.vue
@@ -1,34 +1,58 @@
 <template>
-  <el-select
-    v-model="value1"
-    multiple
-    placeholder="Select"
-    style="width: 240px"
-  >
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
+  <div style="display: inline-block">
+    <p style="margin-left: 10px">default</p>
+    <el-select
+      v-model="value1"
+      multiple
+      placeholder="Select"
+      style="width: 240px"
     >
-    </el-option>
-  </el-select>
-
-  <el-select
-    v-model="value2"
-    multiple
-    collapse-tags
-    style="margin-left: 20px; width: 240px"
-    placeholder="Select"
-  >
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin-left: 10px">use collapse-tags</p>
+    <el-select
+      v-model="value2"
+      multiple
+      collapse-tags
+      placeholder="Select"
+      style="width: 240px"
     >
-    </el-option>
-  </el-select>
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin-left: 10px">use collapse-tags-tooltip</p>
+    <el-select
+      v-model="value3"
+      multiple
+      collapse-tags
+      collapse-tags-tooltip
+      placeholder="Select"
+      style="width: 240px"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -36,6 +60,7 @@ import { ref } from 'vue'
 
 const value1 = ref([])
 const value2 = ref([])
+const value3 = ref([])
 const options = [
   {
     value: 'Option1',
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index 32a8e28c0e..eb71cd9281 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/packages/components/select/__tests__/select.spec.ts
@@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { CircleClose, ArrowUp, CaretTop } from '@element-plus/icons-vue'
 import { POPPER_CONTAINER_SELECTOR } from '@element-plus/hooks'
+import { hasClass } from '@element-plus/utils'
 import Select from '../src/select.vue'
 import Group from '../src/option-group.vue'
 import Option from '../src/option.vue'
@@ -920,6 +921,56 @@ describe('Select', () => {
     mockInputWidth.mockRestore()
   })
 
+  test('multiple select with collapseTagsTooltip', async () => {
+    wrapper = _mount(
+      `
+      <el-select v-model="selectedList" multiple collapseTags collapse-tags-tooltip placeholder="请选择">
+        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+        </el-option>
+      </el-select>
+    `,
+      () => ({
+        options: [
+          {
+            value: '选项1',
+            label: '黄金糕',
+          },
+          {
+            value: '选项2',
+            label: '双皮奶',
+          },
+          {
+            value: '选项3',
+            label: '蚵仔煎',
+          },
+          {
+            value: '选项4',
+            label: '龙须面',
+          },
+          {
+            value: '选项5',
+            label: '北京烤鸭',
+          },
+        ],
+        selectedList: [],
+      })
+    )
+    await wrapper.find('.select-trigger').trigger('click')
+    const options = getOptions()
+
+    options[0].click()
+    await nextTick()
+    options[1].click()
+    await nextTick()
+    options[2].click()
+    await nextTick()
+    const triggerWrappers = wrapper.findAll('.el-tooltip__trigger')
+    expect(triggerWrappers[0]).toBeDefined()
+    const tags = wrapper.findAll('.el-select__tags-text')
+    expect(tags.length).toBe(5)
+    expect(tags[4].element.textContent).toBe('蚵仔煎')
+  })
+
   test('multiple remove-tag', async () => {
     wrapper = _mount(
       `
@@ -1435,9 +1486,17 @@ describe('Select', () => {
     vm.isCollapsed = true
     vm.isClearable = false
     await nextTick()
-    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    expect(
+      wrapper.findAll('.el-tag').filter((item) => {
+        return !hasClass(item.element, 'in-tooltip')
+      }).length
+    ).toBe(2)
     await wrapper.find('.el-tag__close').trigger('click')
-    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    expect(
+      wrapper.findAll('.el-tag').filter((item) => {
+        return !hasClass(item.element, 'in-tooltip')
+      }).length
+    ).toBe(2)
     expect(wrapper.findAll('.el-tag__close').length).toBe(0)
 
     // test for collapse select if is clearable
@@ -1445,9 +1504,17 @@ describe('Select', () => {
     vm.isCollapsed = true
     vm.isClearable = true
     await nextTick()
-    expect(wrapper.findAll('.el-tag__close').length).toBe(1)
+    expect(
+      wrapper.findAll('.el-tag__close').filter((item) => {
+        return !hasClass(item.element.parentElement, 'in-tooltip')
+      }).length
+    ).toBe(1)
     await wrapper.find('.el-tag__close').trigger('click')
-    expect(wrapper.findAll('.el-tag').length).toBe(2)
+    expect(
+      wrapper.findAll('.el-tag').filter((item) => {
+        return !hasClass(item.element, 'in-tooltip')
+      }).length
+    ).toBe(2)
     expect(wrapper.findAll('.el-tag__close').length).toBe(0)
   })
 
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index c960f37293..9e8cf6e9de 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -57,7 +57,50 @@
                 :type="tagType"
                 disable-transitions
               >
-                <span :class="nsSelect.e('tags-text')"
+                <el-tooltip
+                  v-if="collapseTagsTooltip"
+                  :disabled="dropMenuVisible"
+                  :fallback-placements="['bottom', 'top', 'right', 'left']"
+                  :effect="effect"
+                  placement="bottom"
+                  :teleported="false"
+                >
+                  <template #default>
+                    <span :class="nsSelect.e('tags-text')"
+                      >+ {{ selected.length - 1 }}</span
+                    >
+                  </template>
+                  <template #content>
+                    <div :class="nsSelect.e('collapse-tags')">
+                      <div
+                        v-for="(item, idx) in selected"
+                        :key="idx"
+                        :class="nsSelect.e('collapse-tag')"
+                      >
+                        <el-tag
+                          :key="getValueKey(item)"
+                          class="in-tooltip"
+                          :closable="!selectDisabled && !item.isDisabled"
+                          :size="collapseTagSize"
+                          :hit="item.hitState"
+                          :type="tagType"
+                          disable-transitions
+                          :style="{ margin: '2px' }"
+                          @close="deleteTag($event, item)"
+                        >
+                          <span
+                            :class="nsSelect.e('tags-text')"
+                            :style="{
+                              maxWidth: inputWidth - 75 + 'px',
+                            }"
+                            >{{ item.currentLabel }}</span
+                          >
+                        </el-tag>
+                      </div>
+                    </div>
+                  </template>
+                </el-tooltip>
+                <span v-else :class="nsSelect.e('tags-text')"
                   >+ {{ selected.length - 1 }}</span
                 >
               </el-tag>
@@ -322,6 +365,10 @@ export default defineComponent({
       default: 'value',
     },
     collapseTags: Boolean,
+    collapseTagsTooltip: {
+      type: Boolean,
+      default: false,
+    },
     popperAppendToBody: {
       type: Boolean,
       default: undefined,
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index a73d6ad016..e2b0c72141 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -159,6 +159,20 @@
     flex-wrap: wrap;
   }
 
+  @include e(collapse-tags) {
+    white-space: normal;
+    z-index: var(--el-index-normal);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  @include e(collapse-tag) {
+    line-height: inherit;
+    height: inherit;
+    display: flex;
+  }
+
   .#{$namespace}-select__tags {
     .#{$namespace}-tag {
       box-sizing: border-box;

From a3e3acc0fc24cfc4aa495579101ebd00fa8e96f3 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 02:56:35 -0500
Subject: [PATCH 09/14] feat(components): [select-v2]add collapse-tags-tooltip
 (#6532)

* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add collapse-tags-tooltip

* feat(components): [select-v2]set fallback-placements

* feat(components): [select-v2]add v-if on tooltip
---
 docs/en-US/component/select-v2.md             |  3 +
 docs/examples/select-v2/hide-extra-tags.vue   | 32 +++++++---
 .../select-v2/__tests__/select.spec.ts        | 62 +++++++++++++++++++
 packages/components/select-v2/src/defaults.ts |  4 ++
 packages/components/select-v2/src/select.vue  | 46 ++++++++++++++
 5 files changed, 139 insertions(+), 8 deletions(-)

diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 0590db36ad..32a9c4bae3 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -39,6 +39,8 @@ select-v2/multiple
 
 ## Hide extra tags when the selected items are too many.
 
+You can collapse tags to a text by using `collapse-tags` attribute. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
+
 :::demo
 
 select-v2/hide-extra-tags
@@ -135,6 +137,7 @@ select-v2/remote-search
 | clearable                         | whether select can be cleared                                                                                                            | boolean                            | —                   | false         |
 | clear-icon                        | custom clear icon                                                                                                                        | string / component                 | —                   | CircleClose   |
 | collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                               | boolean                            | —                   | false         |
+| collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true                         | boolean                            | true / false        | false         |
 | multiple-limit                    | maximum number of options user can select when multiple is true. No limit when set to 0                                                  | number                             | —                   | 0             |
 | name                              | the name attribute of select input                                                                                                       | string                             | —                   | —             |
 | effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                                          | string                             | string              | light         |
diff --git a/docs/examples/select-v2/hide-extra-tags.vue b/docs/examples/select-v2/hide-extra-tags.vue
index 3b5450de1d..3a468287d5 100644
--- a/docs/examples/select-v2/hide-extra-tags.vue
+++ b/docs/examples/select-v2/hide-extra-tags.vue
@@ -1,12 +1,27 @@
 <template>
-  <el-select-v2
-    v-model="value"
-    :options="options"
-    placeholder="Please select"
-    style="width: 240px"
-    multiple
-    collapse-tags
-  />
+  <div style="display: inline-block">
+    <p style="margin: 10px">use collapse-tags</p>
+    <el-select-v2
+      v-model="value"
+      :options="options"
+      placeholder="Please select"
+      style="width: 240px"
+      multiple
+      collapse-tags
+    />
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin: 10px">use collapse-tags-tooltip</p>
+    <el-select-v2
+      v-model="value2"
+      :options="options"
+      placeholder="Please select"
+      style="width: 240px"
+      multiple
+      collapse-tags
+      collapse-tags-tooltip
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -14,6 +29,7 @@ import { ref } from 'vue'
 const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
+const value2 = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
diff --git a/packages/components/select-v2/__tests__/select.spec.ts b/packages/components/select-v2/__tests__/select.spec.ts
index f6c5d11444..3fa7a394eb 100644
--- a/packages/components/select-v2/__tests__/select.spec.ts
+++ b/packages/components/select-v2/__tests__/select.spec.ts
@@ -52,6 +52,8 @@ interface SelectProps {
   disabled?: boolean
   clearable?: boolean
   multiple?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
   filterable?: boolean
   remote?: boolean
   multipleLimit?: number
@@ -101,6 +103,8 @@ const createSelect = (
         :disabled="disabled"
         :clearable="clearable"
         :multiple="multiple"
+        :collapseTags="collapseTags"
+        :collapseTagsTooltip="collapseTagsTooltip"
         :filterable="filterable"
         :multiple-limit="multipleLimit"
         :popper-append-to-body="popperAppendToBody"
@@ -141,6 +145,8 @@ const createSelect = (
           disabled: false,
           clearable: false,
           multiple: false,
+          collapseTags: false,
+          collapseTagsTooltip: false,
           remote: false,
           filterable: false,
           reserveKeyword: false,
@@ -559,6 +565,62 @@ describe('Select', () => {
     })
   })
 
+  describe('collapseTags', () => {
+    it('use collapseTags', async () => {
+      const wrapper = createSelect({
+        data: () => {
+          return {
+            multiple: true,
+            collapseTags: true,
+            value: [],
+          }
+        },
+      })
+      await nextTick()
+      const vm = wrapper.vm as any
+      const options = getOptions()
+      options[0].click()
+      await nextTick()
+      expect(vm.value.length).toBe(1)
+      expect(vm.value[0]).toBe(vm.options[0].value)
+      options[1].click()
+      await nextTick()
+      options[2].click()
+      await nextTick()
+      expect(vm.value.length).toBe(3)
+      const tags = wrapper.findAll('.el-tag').filter((item) => {
+        return !hasClass(item.element, 'in-tooltip')
+      })
+      expect(tags.length).toBe(2)
+    })
+
+    it('use collapseTagsTooltip', async () => {
+      const wrapper = createSelect({
+        data: () => {
+          return {
+            multiple: true,
+            collapseTags: true,
+            collapseTagsTooltip: true,
+            value: [],
+          }
+        },
+      })
+      await nextTick()
+      const vm = wrapper.vm as any
+      const options = getOptions()
+      options[0].click()
+      await nextTick()
+      expect(vm.value.length).toBe(1)
+      expect(vm.value[0]).toBe(vm.options[0].value)
+      options[1].click()
+      await nextTick()
+      options[2].click()
+      await nextTick()
+      expect(vm.value.length).toBe(3)
+      expect(wrapper.findAll('.el-tag')[4].element.textContent).toBe('c2')
+    })
+  })
+
   describe('manually set modelValue', () => {
     it('set modelValue in single select', async () => {
       const wrapper = createSelect({
diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts
index 4131331840..03ad315f9b 100644
--- a/packages/components/select-v2/src/defaults.ts
+++ b/packages/components/select-v2/src/defaults.ts
@@ -24,6 +24,10 @@ export const SelectProps = {
     default: 'light',
   },
   collapseTags: Boolean,
+  collapseTagsTooltip: {
+    type: Boolean,
+    default: false,
+  },
   defaultFirstOption: Boolean,
   disabled: Boolean,
   estimatedOptionHeight: {
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index a103ccbd15..bff229ea6e 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -66,7 +66,53 @@
                   type="info"
                   disable-transitions
                 >
+                  <el-tooltip
+                    v-if="collapseTagsTooltip"
+                    :disabled="dropdownMenuVisible"
+                    :fallback-placements="['bottom', 'top', 'right', 'left']"
+                    :effect="effect"
+                    placement="bottom"
+                    :teleported="false"
+                  >
+                    <template #default>
+                      <span
+                        :class="nsSelectV2.e('tags-text')"
+                        :style="{
+                          maxWidth: `${tagMaxWidth}px`,
+                        }"
+                        >+ {{ modelValue.length - 1 }}</span
+                      >
+                    </template>
+                    <template #content>
+                      <div :class="nsSelectV2.e('selection')">
+                        <div
+                          v-for="(selected, idx) in states.cachedOptions"
+                          :key="idx"
+                          :class="nsSelectV2.e('selected-item')"
+                        >
+                          <el-tag
+                            :key="getValueKey(selected)"
+                            :closable="!selectDisabled && !selected.disabled"
+                            :size="collapseTagSize"
+                            class="in-tooltip"
+                            type="info"
+                            disable-transitions
+                            @close="deleteTag($event, selected)"
+                          >
+                            <span
+                              :class="nsSelectV2.e('tags-text')"
+                              :style="{
+                                maxWidth: `${tagMaxWidth}px`,
+                              }"
+                              >{{ getLabel(selected) }}</span
+                            >
+                          </el-tag>
+                        </div>
+                      </div>
+                    </template>
+                  </el-tooltip>
                   <span
+                    v-else
                     :class="nsSelectV2.e('tags-text')"
                     :style="{
                       maxWidth: `${tagMaxWidth}px`,

From 103bb1b104e6611eb8eb1bba96860b94144305a9 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 02:58:00 -0500
Subject: [PATCH 10/14] feat(components): [cascader]add collapse-tags-tooltip
 (#6331)

---
 docs/en-US/component/cascader.md              |  3 +-
 docs/examples/cascader/multiple-selection.vue | 10 ++++
 .../components/cascader-panel/src/types.ts    |  1 +
 .../cascader/__tests__/cascader.spec.ts       | 38 +++++++++++--
 packages/components/cascader/src/index.vue    | 54 ++++++++++++++++++-
 packages/theme-chalk/src/cascader.scss        | 14 +++++
 6 files changed, 115 insertions(+), 5 deletions(-)

diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
index fab6a73d6c..298e914120 100644
--- a/docs/en-US/component/cascader.md
+++ b/docs/en-US/component/cascader.md
@@ -80,7 +80,7 @@ Don't do:
 </template>
 ```
 
-:::demo When using multiple selection, all selected tags will display by default, You can set `collapse-tags = true` to fold selected tags.
+:::demo When using multiple selection, all selected tags will display by default. You can set `collapse-tags = true` to fold selected tags. You can check them when mouse hover collapse text by using `collapse-tags-tooltip` attribute.
 
 cascader/multiple-selection
 
@@ -149,6 +149,7 @@ cascader/panel
 | clearable                         | whether selected value can be cleared                                                                                                                                            | boolean                 | —                      | false   |
 | show-all-levels                   | whether to display all levels of the selected value in the input                                                                                                                 | boolean                 | —                      | true    |
 | collapse-tags                     | whether to collapse tags in multiple selection mode                                                                                                                              | boolean                 | -                      | false   |
+| collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true                                                                 | boolean                 | -                      | false   |
 | separator                         | option label separator                                                                                                                                                           | string                  | —                      | ' / '   |
 | filterable                        | whether the options can be searched                                                                                                                                              | boolean                 | —                      | —       |
 | filter-method                     | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits.                                      | function(node, keyword) | -                      | -       |
diff --git a/docs/examples/cascader/multiple-selection.vue b/docs/examples/cascader/multiple-selection.vue
index bdc21562d0..0fd1afcbc4 100644
--- a/docs/examples/cascader/multiple-selection.vue
+++ b/docs/examples/cascader/multiple-selection.vue
@@ -7,6 +7,16 @@
     <span class="example-demonstration">Collapse tags</span>
     <el-cascader :options="options" :props="props" collapse-tags clearable />
   </div>
+  <div class="example-block">
+    <span class="example-demonstration">Collapse tags tooltip</span>
+    <el-cascader
+      :options="options"
+      :props="props"
+      collapse-tags
+      collapse-tags-tooltip
+      clearable
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/components/cascader-panel/src/types.ts b/packages/components/cascader-panel/src/types.ts
index 82a697bf26..3cfe4deaf7 100644
--- a/packages/components/cascader-panel/src/types.ts
+++ b/packages/components/cascader-panel/src/types.ts
@@ -54,6 +54,7 @@ export interface Tag {
   text: string
   hitState?: boolean
   closable: boolean
+  isCollapseTag: boolean
 }
 
 export interface ElCascaderPanelContext {
diff --git a/packages/components/cascader/__tests__/cascader.spec.ts b/packages/components/cascader/__tests__/cascader.spec.ts
index b564a237ca..f6a0f2bbdd 100644
--- a/packages/components/cascader/__tests__/cascader.spec.ts
+++ b/packages/components/cascader/__tests__/cascader.spec.ts
@@ -4,6 +4,7 @@ import { EVENT_CODE } from '@element-plus/constants'
 import { triggerEvent } from '@element-plus/test-utils'
 import { ArrowDown, Check, CircleClose } from '@element-plus/icons-vue'
 import { POPPER_CONTAINER_SELECTOR } from '@element-plus/hooks'
+import { hasClass } from '@element-plus/utils'
 import Cascader from '../src/index.vue'
 
 jest.mock('lodash-unified', () => {
@@ -30,6 +31,10 @@ const OPTIONS = [
         value: 'ningbo',
         label: 'Ningbo',
       },
+      {
+        value: 'wenzhou',
+        label: 'Wenzhou',
+      },
     ],
   },
 ]
@@ -241,13 +246,40 @@ describe('Cascader.vue', () => {
         modelValue: [
           ['zhejiang', 'hangzhou'],
           ['zhejiang', 'ningbo'],
+          ['zhejiang', 'wenzhou'],
         ],
       },
     })
     await nextTick()
-    const [firstTag, secondTag] = wrapper.findAll(TAG)
-    expect(firstTag.text()).toBe('Zhejiang / Hangzhou')
-    expect(secondTag.text()).toBe('+ 1')
+    const tags = wrapper.findAll(TAG).filter((item) => {
+      return !hasClass(item.element, 'in-tooltip')
+    })
+    expect(tags[0].text()).toBe('Zhejiang / Hangzhou')
+    expect(tags.length).toBe(2)
+  })
+
+  test('collapse tags tooltip', async () => {
+    const wrapper = mount(Cascader, {
+      props: {
+        options: OPTIONS,
+        props: { multiple: true },
+        collapseTags: true,
+        collapseTagsTooltip: true,
+        modelValue: [
+          ['zhejiang', 'hangzhou'],
+          ['zhejiang', 'ningbo'],
+          ['zhejiang', 'wenzhou'],
+        ],
+      },
+    })
+    await nextTick()
+    expect(wrapper.findAll(TAG).length).toBe(5)
+    const tags = wrapper.findAll(TAG).filter((item) => {
+      return hasClass(item.element, 'in-tooltip')
+    })
+    expect(tags[0].text()).toBe('Zhejiang / Hangzhou')
+    expect(tags[1].text()).toBe('Zhejiang / Ningbo')
+    expect(tags[2].text()).toBe('Zhejiang / Wenzhou')
   })
 
   test('filterable', async () => {
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index 499c233777..b648a603ec 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -88,7 +88,44 @@
             disable-transitions
             @close="deleteTag(tag)"
           >
-            <span>{{ tag.text }}</span>
+            <template v-if="tag.isCollapseTag === false">
+              <span>{{ tag.text }}</span>
+            </template>
+            <template v-else>
+              <el-tooltip
+                :teleported="false"
+                :disabled="popperVisible || !collapseTagsTooltip"
+                :fallback-placements="['bottom', 'top', 'right', 'left']"
+                placement="bottom"
+                effect="light"
+              >
+                <template #default>
+                  <span>{{ tag.text }}</span>
+                </template>
+                <template #content>
+                  <div class="el-cascader__collapse-tags">
+                    <div
+                      v-for="(tag2, idx) in allPresentTags"
+                      :key="idx"
+                      class="el-cascader__collapse-tag"
+                    >
+                      <el-tag
+                        :key="tag2.key"
+                        class="in-tooltip"
+                        type="info"
+                        :size="tagSize"
+                        :hit="tag2.hitState"
+                        :closable="tag2.closable"
+                        disable-transitions
+                        @close="deleteTag(tag2)"
+                      >
+                        <span>{{ tag2.text }}</span>
+                      </el-tag>
+                    </div>
+                  </div>
+                </template>
+              </el-tooltip>
+            </template>
           </el-tag>
           <input
             v-if="filterable && !isDisabled"
@@ -286,6 +323,10 @@ export default defineComponent({
       default: true,
     },
     collapseTags: Boolean,
+    collapseTagsTooltip: {
+      type: Boolean,
+      default: false,
+    },
     debounce: {
       type: Number,
       default: 300,
@@ -341,6 +382,7 @@ export default defineComponent({
     const inputValue = ref('')
     const searchInputValue = ref('')
     const presentTags: Ref<Tag[]> = ref([])
+    const allPresentTags: Ref<Tag[]> = ref([])
     const suggestions: Ref<CascaderNode[]> = ref([])
     const isOnComposition = ref(false)
 
@@ -436,6 +478,7 @@ export default defineComponent({
         text: node.calcText(showAllLevels, separator),
         hitState: false,
         closable: !isDisabled.value && !node.isDisabled,
+        isCollapseTag: false,
       }
     }
 
@@ -452,6 +495,10 @@ export default defineComponent({
       const nodes = checkedNodes.value
       const tags: Tag[] = []
 
+      const allTags: Tag[] = []
+      nodes.forEach((node) => allTags.push(genTag(node)))
+      allPresentTags.value = allTags
+
       if (nodes.length) {
         const [first, ...rest] = nodes
         const restCount = rest.length
@@ -464,6 +511,7 @@ export default defineComponent({
               key: -1,
               text: `+ ${restCount}`,
               closable: false,
+              isCollapseTag: true,
             })
           } else {
             rest.forEach((node) => tags.push(genTag(node)))
@@ -488,6 +536,9 @@ export default defineComponent({
         presentTags.value.forEach((tag) => {
           tag.hitState = false
         })
+        allPresentTags.value.forEach((tag) => {
+          tag.hitState = false
+        })
       }
 
       filtering.value = true
@@ -701,6 +752,7 @@ export default defineComponent({
       inputValue,
       searchInputValue,
       presentTags,
+      allPresentTags,
       suggestions,
       isDisabled,
       isOnComposition,
diff --git a/packages/theme-chalk/src/cascader.scss b/packages/theme-chalk/src/cascader.scss
index 1b8f722045..e4ac3dcf28 100644
--- a/packages/theme-chalk/src/cascader.scss
+++ b/packages/theme-chalk/src/cascader.scss
@@ -149,6 +149,20 @@
     }
   }
 
+  @include e(collapse-tags) {
+    white-space: normal;
+    z-index: var(--el-index-normal);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  @include e(collapse-tag) {
+    line-height: inherit;
+    height: inherit;
+    display: flex;
+  }
+
   @include e(suggestion-panel) {
     border-radius: var(--el-cascader-menu-radius);
   }

From b6f61dd562107eab5660c6cb7662237c9cab8f7f Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Fri, 11 Mar 2022 02:58:44 -0500
Subject: [PATCH 11/14] fix(components): [el-menu] icon is not to the right of
 the text (#6268)

---
 packages/theme-chalk/src/menu.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/theme-chalk/src/menu.scss b/packages/theme-chalk/src/menu.scss
index c9b3a74cbf..f3fd694938 100644
--- a/packages/theme-chalk/src/menu.scss
+++ b/packages/theme-chalk/src/menu.scss
@@ -129,6 +129,10 @@
         color: var(--el-menu-text-color);
       }
 
+      & .#{$namespace}-sub-menu__title {
+        padding-right: 40px;
+      }
+
       & .#{$namespace}-menu-item.is-active,
       & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
         color: var(--el-menu-active-color);

From 3f0f2952800e224cba92c19460b17a10783879c3 Mon Sep 17 00:00:00 2001
From: Element <wallement@gmail.com>
Date: Fri, 11 Mar 2022 20:00:44 +0800
Subject: [PATCH 12/14] chore: update changelog 2.0.6 (#6542)

---
 CHANGELOG.en-US.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 0c504eecdb..b9588a1284 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -1,4 +1,58 @@
 ## Changelog
+
+### 2.0.6
+
+_2022-03-11_
+
+#### Features
+
+- [el-table] support always show scrollbar & get selection rows (#6469 by @msidolphin)
+- Extract eslint config to separate package (#6495 by @sxzz)
+- Export dayjs instance, closes #6498 (#6517 by @sxzz)
+- Components [select]add collapse-tags-tooltip (#6245 by @Alanscut)
+- Components [select-v2]add collapse-tags-tooltip (#6532 by @Alanscut)
+- Components [cascader]add collapse-tags-tooltip (#6331 by @Alanscut)
+
+#### Bug fixes
+
+- Deps update all non-major dependencies (#6448 by @renovate[bot])
+- Components [el-select] optimize prefix size & selected style (#6267 by @msidolphin)
+- Components [el-table] defaultSort not working (#6322 by @msidolphin)
+- [el-table] fixed columns display when horizontal cannot scroll (#6320 by @msidolphin)
+- Components [el-checkbox] modelValue (#6168 by @gjfei) (#6169)
+- Components[select] (#6446 by @gjfei) (#6474)
+- Components [el-collapse] collapse item key pressing jumping (#6462 by @JeremyWuuuuu)
+- Components [message] offset error (#6497 by @Alanscut)
+- Components[select] namespace (#6486 by @gjfei)
+- Components el-select-allow-dynamically-update-options (#6473 by @gjfei)
+- Components [el-tooltip] close the dropdown after set disabled (#6467 by @Alanscut)
+- Docs improve component typings (#6524 by @sxzz)
+- Workflow coverage (#6518 by @sxzz)
+- Components [upload] fileList prop should sync uploadFiles (#6492 by @exherb)
+- Components [rate] fix disbaledVoidIcon typo (#6456 by @Shana-AE)
+- Components [select] display error when setting persistent to false (#6522 by @Alanscut)
+- Components [el-input] pass input-style props to input-wrapper (#6506 by @zt123123)
+- Components [el-table] escape special html characters (#6520 by @msidolphin)
+- Components [autocomplete] fix shaking at first open (#6342 by @freedomlang)
+- Components [el-upload] jitter when remove file in the list (#6505 by @msidolphin)
+- Components [el-menu] icon is not to the right of the text (#6268 by @Alanscut)
+- Test(components): [select] click icon twice (#6471 by @Alanscut)
+- Chore(project): add escape-html as dependency for main entry (#6534 by @JeremyWuuuuu)
+
+#### Refactors
+
+- Components!: refactor form (#5401 by @sxzz)
+- Components [row] refactor (#6354 by @sxzz)
+- Docs [form] improve docs and typings (#6447 by @sxzz)
+- Improve build dts (#6457 by @sxzz)
+- Components [cascader,cascader-panel] add namespace (#5589 by @gjfei)
+- Components [breadcrumb] switch to script-setup syntax (#6073 by @buqiyuan)
+- Theme-chalk message css var & add getCssVarName (#6488 by @YunYouJun)
+- Utils remove isFF (#6507 by @btea)
+- Theme-chalk [upload] use bem rewrite upload scss & fix bugs (#6508 by @YunYouJun)
+- Perf(components): [el-table] optimize the performance of expand rows (#6480 by @msidolphin)
+- Style(components): rename disabled to is-disabled (#6475 by @freedomlang)
+
 
 ### 2.0.5
 

From fe762f33cc7fbd7e386d693c3f99fcb15e24fd7c Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Fri, 11 Mar 2022 20:06:49 +0800
Subject: [PATCH 13/14] ci(project): introducing welcome bot (#6535)

- New workflow to make bot greets to the user contributing to this repo
---
 .github/workflows/welcome.yml | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 .github/workflows/welcome.yml

diff --git a/.github/workflows/welcome.yml b/.github/workflows/welcome.yml
new file mode 100644
index 0000000000..1e979f5a0d
--- /dev/null
+++ b/.github/workflows/welcome.yml
@@ -0,0 +1,25 @@
+name: PR Open Greeting
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  pr-open-greeting:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/check-user-permission@v2
+        id: isTeamMember
+        with:
+          require: 'write'
+      - uses: actions-awesome/pr-helper@1.0.15
+        if: steps.isTeamMember.outputs.require-result == 'false'
+        with:
+          actions: 'add-assignees, add-reviewers, greeting, add-labels'
+          assignees: 'element-plus/backers'
+          reviewers: 'element-plus/backers'
+          labels: 'Contribution::Community'
+          token: ${{ github.token }}
+          pr-number: ${{ github.event.pull_request.number }}
+          greeting-message: 'Hello %user%, thank you for contributing to %repo%, please see our [guideline](%guideline%) to see how to make contribution'
+          greeting-guideline-address: 'https://github.com/element-plus/element-plus/blob/dev/CONTRIBUTING.md'

From da6d2dc84b1c2ca24d236d5c3f9aff42b4eb43f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 11 Mar 2022 20:19:31 +0800
Subject: [PATCH 14/14] feat(components): [message] support re-render vnode
 (#6527)

* feat(components): [message] support re-render vnode

* docs: improve api reference

* test: add message vnode render function
---
 docs/en-US/component/message.md               | 43 ++++++++++---------
 .../__tests__/message-manager.spec.tsx        | 22 +++++++++-
 .../components/message/src/message-method.ts  |  7 ++-
 packages/components/message/src/message.ts    |  6 ++-
 play/tsconfig.json                            |  3 ++
 5 files changed, 58 insertions(+), 23 deletions(-)

diff --git a/docs/en-US/component/message.md b/docs/en-US/component/message.md
index 33a2c7f8c1..464b2ac400 100644
--- a/docs/en-US/component/message.md
+++ b/docs/en-US/component/message.md
@@ -85,7 +85,7 @@ import { ElMessage } from 'element-plus'
 
 In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
 
-## App context inheritance <el-tag>> 2.0.2</el-tag>
+## App context inheritance <el-tag> >= 2.0.3</el-tag>
 
 Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
 
@@ -106,26 +106,29 @@ const { appContext } = getCurrentInstance()!
 ElMessage({}, appContext)
 ```
 
-## Options
+## Message API
 
-| Attribute                | Description                                                                    | Type                 | Accepted Values            | Default       |
-| ------------------------ | ------------------------------------------------------------------------------ | -------------------- | -------------------------- | ------------- |
-| message                  | message text                                                                   | string / VNode       | —                          | —             |
-| type                     | message type                                                                   | string               | success/warning/info/error | info          |
-| icon                     | custom icon component, overrides `type`                                        | string / Component   | —                          | —             |
-| dangerouslyUseHTMLString | whether `message` is treated as HTML string                                    | boolean              | —                          | false         |
-| custom-class             | custom class name for Message                                                  | string               | —                          | —             |
-| duration                 | display duration, millisecond. If set to 0, it will not turn off automatically | number               | —                          | 3000          |
-| show-close               | whether to show a close button                                                 | boolean              | —                          | false         |
-| center                   | whether to center the text                                                     | boolean              | —                          | false         |
-| on-close                 | callback function when closed with the message instance as the parameter       | function             | —                          | —             |
-| offset                   | set the distance to the top of viewport                                        | number               | —                          | 20            |
-| appendTo                 | set the root element for the message                                           | string / HTMLElement | -                          | document.body |
-| grouping                 | merge messages with the same content, type of VNode message is not supported   | boolean              | —                          | false         |
+### Options
 
-## Methods
+| Attribute                  | Description                                                                    | Type                                          | Default         |
+| -------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------- | --------------- |
+| `message`                  | message text                                                                   | `string \| VNode \| (() => VNode)`            | —               |
+| `type`                     | message type                                                                   | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'`        |
+| `icon`                     | custom icon component, overrides `type`                                        | `string \| Component`                         | —               |
+| `dangerouslyUseHTMLString` | whether `message` is treated as HTML string                                    | `boolean`                                     | `false`         |
+| `custom-class`             | custom class name for Message                                                  | `string`                                      | —               |
+| `duration`                 | display duration, millisecond. If set to 0, it will not turn off automatically | `number`                                      | `3000`          |
+| `show-close`               | whether to show a close button                                                 | `boolean`                                     | `false`         |
+| `center`                   | whether to center the text                                                     | `boolean`                                     | `false`         |
+| `on-close`                 | callback function when closed with the message instance as the parameter       | `function`                                    | —               |
+| `offset`                   | set the distance to the top of viewport                                        | `number`                                      | `20`            |
+| `appendTo`                 | set the root element for the message                                           | `string \| HTMLElement`                       | `document.body` |
+| `grouping`                 | merge messages with the same content, type of VNode message is not supported   | `boolean`                                     | `false`         |
+
+### Methods
 
 `Message` and `this.$message` returns the current Message instance. To manually close the instance, you can call `close` on it.
-| Method | Description |
-| ---- | ---- |
-| close | close the Message |
+
+| Method  | Description       |
+| ------- | ----------------- |
+| `close` | close the Message |
diff --git a/packages/components/message/__tests__/message-manager.spec.tsx b/packages/components/message/__tests__/message-manager.spec.tsx
index 71e487ed34..9d035b23db 100644
--- a/packages/components/message/__tests__/message-manager.spec.tsx
+++ b/packages/components/message/__tests__/message-manager.spec.tsx
@@ -1,4 +1,4 @@
-import { nextTick } from 'vue'
+import { nextTick, h, ref } from 'vue'
 import { getStyle } from '@element-plus/utils'
 import { rAF } from '@element-plus/test-utils/tick'
 import { ElMessage } from '..'
@@ -106,6 +106,26 @@ describe('Message on command', () => {
     expect(htmlElement.querySelector(selector)).toBeFalsy()
   })
 
+  test('it should render vnode function', async () => {
+    const i = ref(0)
+
+    Message({
+      message: () => h('div', i.value),
+    })
+
+    await rAF()
+    expect(document.querySelector(selector)?.textContent).toMatchInlineSnapshot(
+      `"0"`
+    )
+
+    i.value++
+
+    await rAF()
+    expect(document.querySelector(selector)?.textContent).toMatchInlineSnapshot(
+      `"1"`
+    )
+  })
+
   describe('context inheritance', () => {
     it('should globally inherit context correctly', () => {
       expect(ElMessage._context).toBe(null)
diff --git a/packages/components/message/src/message-method.ts b/packages/components/message/src/message-method.ts
index e50680e6ac..ca57fe1c32 100644
--- a/packages/components/message/src/message-method.ts
+++ b/packages/components/message/src/message-method.ts
@@ -7,6 +7,7 @@ import {
   isString,
   isElement,
   debugWarn,
+  isFunction,
 } from '@element-plus/utils'
 import { useZIndex } from '@element-plus/hooks'
 import { messageConfig } from '@element-plus/components/config-provider/src/config-provider'
@@ -101,7 +102,11 @@ const message: MessageFn & Partial<Message> & { _context: AppContext | null } =
     const vm = createVNode(
       MessageConstructor,
       props,
-      isVNode(messageContent) ? { default: () => messageContent } : null
+      isFunction(messageContent)
+        ? { default: messageContent }
+        : isVNode(messageContent)
+        ? { default: () => messageContent }
+        : null
     )
 
     vm.appContext = context || message._context
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index 50eb2af7cc..8ad166497f 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -33,7 +33,11 @@ export const messageProps = buildProps({
     default: '',
   },
   message: {
-    type: definePropType<string | VNode>([String, Object]),
+    type: definePropType<string | VNode | (() => VNode)>([
+      String,
+      Object,
+      Function,
+    ]),
     default: '',
   },
   onClose: {
diff --git a/play/tsconfig.json b/play/tsconfig.json
index b7621046bb..c616d03a9c 100644
--- a/play/tsconfig.json
+++ b/play/tsconfig.json
@@ -4,6 +4,9 @@
     "allowJs": true,
     "lib": ["ESNext", "DOM"],
     "types": ["node", "vite/client", "../typings/components"],
+    "paths": {
+      "element-plus": ["../packages/element-plus"]
+    },
     "allowSyntheticDefaultImports": true
   },
   "include": ["**/*"]