vue element-plus 下拉菜单嵌套选择器 选择器自动收起 无法选择 如何解决？

Question

el-dropdown与el-select嵌套使用，下拉菜单内的选择器打开后，鼠标移向选项会直接收起选择器。
以下为问题代码

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue'
</script>

<template>
    <el-dropdown @visible-change="onChangeVisible" >
    <span class="el-dropdown-link">
        <slot></slot>
        <!-- 样式设置 -->
        <!-- <el-icon class="el-icon--right">
            <arrow-down />
        </el-icon> -->
    </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in menuItems">
                    {{ item.name }}
                    <el-select
                        v-model="item.options.name"
                        class="m-2"
                        placeholder="Select"
                        style="width: 150px"
                    >
                        <el-option
                            v-for="option in item.options"
                            :key="option.id"
                            :label="option.name"
                            :value="option.id"
                        />
                    </el-select>
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
export default {
    data() {
        return {
            name : ref('')
        }
    },
    props: {
        menuItems : []
    },
    methods: {
        onChangeVisible(visible) {
            this.$emit('changeMenuVisible',visible);
            // console.log(visible);
        }
    }
}
</script>

<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>

如图所示，若鼠标想移至选项进行选择，选择器会直接收起。

尝试将下拉菜单改成静态菜单，发现选择器能正常选择不会自动收起。
但需求是使用下拉菜单。。。
更改代码部分如下

<el-menu>
    <el-menu-item v-for="item in menuItems">
        {{ item.name }}
        <el-select
            v-model="item.options.name"
            class="m-2"
            placeholder="Select"
            style="width: 150px"
        >
            <el-option
                v-for="option in item.options"
                :key="option.id"
                :label="option.name"
                :value="option.id"
            />
        </el-select>
    </el-menu-item>
</el-menu>

静态菜单截图

Answer 1

为怎么要在dropdown里面嵌套select呢？
有点奇怪，官方都没想要会有人这样用吧？
如果有多级，建议使用TreeSelect。

Answer 2

非要这么实现的话, 可能造成的原因: mouseenter, mouseleave / mouseover, mouseout 等事件触发导致组件状态变更, 自动收起

可以在 DevTools 里监听一下相关事件, 看是否可以避免对应的事件触发