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’)”
我感觉可能是同步异步执行顺序的事吧

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

http://t.csdnimg.cn/I3zO0