解决element下拉框组件的filterable属性带来的选择完成后切屏再切回页面，下拉框会自动展开的BUG

背景

我们负责的测试，突然在某一天发现了，使用element的下拉框组件el-select（ el-select-v2 同样）的时候，如果支持搜索选项时，当选择完选项，这个时候切换了浏览器的页面，然后再回到系统的时候，会发生很神奇的现象，下拉框居然自动展开了😮。这可不能忍，怎么解决呢？

BUG如图所示，选择完再切换标签页回来会自动展开

插件版本

"element-ui": "2.15.13"
"el-select-v2": "^1.4.5"

解决方案

修改main.js文件

//main.js文件
// el-select 和 el-select-v2 组件下拉框关闭时触发失焦操作：解决filterable属性带来的选择完成后切屏再切回页面，下拉框会自动展开的BUG
Vue.directive('select-blur', {
  bind(el, binding, vnode) {
    const selectComponent = vnode.componentInstance;
    // 定义解绑函数
    let unbindFunction = null;
    // 处理 el-select 组件
    if (selectComponent.$options.name === 'ElSelect') {
      const unwatch = selectComponent.$watch('visible', (newVal) => {
        if (!newVal) {
          selectComponent.blur();
        }
      });
      unbindFunction = () => {
        unwatch(); // 解绑 watcher
      };
    }
    // 处理 el-select-v2 组件
    else if (selectComponent.$options.name === 'ElSelectV2') {
      const handleVisibilityChange = (visible) => {
        if (!visible) {
          selectComponent.blur();
        }
      };
      // 尝试绑定到 el-select-v2 的内部事件
      if (selectComponent.$refs.select) {
        selectComponent.$refs.select.$on('visible-change', handleVisibilityChange);
      } else {
        vnode.context.$nextTick(() => {
          if (selectComponent.$refs.select) {
            selectComponent.$refs.select.$on('visible-change', handleVisibilityChange);
          }
        });
      }
      unbindFunction = () => {
        if (selectComponent.$refs.select) {
          selectComponent.$refs.select.$off('visible-change', handleVisibilityChange);
        }
      };
    }
    // 将解绑函数存储在 vnode 上
    vnode.__unbindSelectBlur = unbindFunction;
  },
  unbind(el, binding, vnode) {
    const unbindFunction = vnode.__unbindSelectBlur;
    if (unbindFunction) {
      unbindFunction(); // 调用解绑函数
      vnode.__unbindSelectBlur = null; // 清除存储的解绑函数
    }
  }
});

使用方法

<el-select v-select-blur filterable></el-select>
<ElSelectV2 v-select-blur filterable></ElSelectV2>

万事大吉，下课！