Bug Type: Component

Environment

• Vue Version: 3.4.29
• Element Plus Version: 2.7.5
• Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
• Build Tool: Vite

Reproduction

Related Component

• el-select
• el-dialog

Reproduction Link

Element Plus Playground

Steps to reproduce

<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);
const value = ref<string[]>(["123"]);
const options = [
{
value: "123",
label: "123's label",
},
];
function open() {
visible.value = true;
}
</script>

<template>
  <div>
    <p>
      Question: After setting open animation for dialog, el-select can't show
      the label.
    </p>
    <p>
      问题: 给dialog加了动画效果，打开dialog后, select组件显示不出来对应的label
    </p>
    <el-dialog v-model="visible" title="dialog" destroy-on-close append-to-body>
      <div>
        <p>↓↓↓no label here</p>
        <div>
          <el-select style="width: 200px" v-model="value" multiple>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </el-dialog>
    <el-button type="primary" @click="open">open</el-button>
  </div>
</template>

<style>
@keyframes dialog-open {
0% {
opacity: 0;
transform: scale(0.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes dialog-close {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.2);
}
}

.dialog-fade-enter-active {
.el-dialog {
animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
}
}

.dialog-fade-leave-active {
.el-dialog {
animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
}
</style>

What is Expected?

打开dialog后，select组件正常显示所选label

What is actually happening?

打开dialog后，select组件 无法 正常显示所选label

Additional comments

.el-select__selection.el-select__selected-item.el-tag :
该span标签会动态设置css [style="max-width: px;"] ，可能是设置出错导致的？