el-select 下拉框点击某一禁选选项按Esc关闭弹窗下拉框无法收起问题

下面请看详细内容
在这里插入图片描述
会出现下图情况

弹窗能正常关闭但是下拉框选项面板仍然存在

解决思路1：
本来想的是监听dialog的Esc关闭事件关闭时修改el-select-dropdown的css样式将display = none
这个没实现

解决思路2：
看官网发现有个失焦事件他手动触发失焦的话会自动收起下拉面板
在这里插入图片描述
弹窗监听关闭的事件closed

  <el-dialog title="添加新菜" :close-on-click-modal="false" :visible.sync="visible" :closed="menuSelect" width="50%">

给el-select 加上ref 起个小名 menuOptions

   <el-row :gutter="24"><el-col :span="24"><el-form-item label="字段1" prop="menu"><el-select v-model="menu" style="width:100%;" clearable ref="menuOptions"><el-option v-for="item in menuOptions" :disabled="item.disable == 1" :key="item.key" :label="item.label" :value="item.key"></el-option></el-select></el-form-item></el-col></el-row>

dialog事件

  menuSelect() {setTimeout(() => {this.$refs.menuOptions.blur()}, 50)}

这里有个需要注意的点 blur事件需要setTimeout包上否则会报错
vue.runtime.esm.js:587 [Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘blur’)”
我感觉可能是同步异步执行顺序的事吧

加定时器是看到这位博主的方法感谢~