vue3 Element Plus select 同时使用filterable，multiple交互问题

今天遇到一个问题，element plus 写一个城市下拉，同时支持多选和搜索，加完后发现，搜索后选中一项，点击右侧空白页面关闭下拉框后，select 无法再次选中，并且右上角小三角箭头是展开的，如下图

需要再次点击一下空白位置，或者在输入框内多次点击才能继续打开下拉框，搜索或者选择，用户体验不友好，继续翻官方文档，提供了一个 visible-change 事件来监听下拉框的出现和隐藏，加上去后发现，正常打开关闭，会触发两次事件，而我选中其中一项的时候，会执行三次，多执行了一次打开事件（就是这多出来一次导致上图小三角展开，但是下拉却没出现，不太理解），继续尝试

网上搜了半天，居然没找到一个遇到同样问题，也不知道是百度算法推荐的问题还是什么，最终解决方案如下，记录一下，方便遇到同样问题的小伙伴快速查找

<template>
  <el-select ref="selectCity" v-bind="$attrs" v-model="selected" @change="handleChange" @visible-change="visibleChange" @remove-tag="removeTag">
    <el-option v-for="{id, name} in options" :key="id" :label="name" :value="id" />
  </el-select>
</template>


// ps vue3 只放了解决该问题的方法
// 解决 filterable multiple 同时使用 选中一项后光标默认选中问题
const visibleChange = (item) => {
  if (item) {
    nextTick(() => {
      selectCity.value.focus()
    })
  } else {
    nextTick(() => {
      selectCity.value.blur()
    })
    
  }
}