[BUG记录] element-ui / element-plus 的 Select 可搜索组件在 iOS 下无法唤起软键盘-Toy模板网

这篇具有很好参考价值的文章主要介绍了[BUG记录] element-ui / element-plus 的 Select 可搜索组件在 iOS 下无法唤起软键盘。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

运行环境：vue@3.2.37, element-plus@2.2.9

问题描述

element-plus 的 Select 组件可以通过 filterable 属性开启搜索功能，该组件在iOS系统中，点击组件输入框，无法唤起软键盘。

原因分析：

此bug自 element-ui 就有了，是该组件内部输入框的 readonly 属性导致的问题。

解决方案：

1. element-ui

这个bug element-ui 和 element-plus 都有，可以参考这篇文章：ElementUI的Select组件在IOS唤不起软键盘解决。
注意：此方案在 element-plus 下有bug，首次点击仍然概率无法唤起软键盘。

<el-select 
  v-model="value"
  placeholder="Select"
  ref="select"
  @hook:mounted="cancalReadOnly(false, 'select')"
  @visible-change="(value) => cancalReadOnly(value, 'select')"
>
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>

cancalReadOnly(value, refTxt) {
  this.$nextTick(() => {
    if(!value) {
      this.$refs[refTxt]?.$el?.querySelector('.el-input__inner')?.removeAttribute('readonly')
    }
  })
},

此方案，总结一下，就是在Select组件 mounted 以及 Select下拉框隐藏时，移除Select组件内部输入框的readonly属性。

分别避免首次、后续点击输入框时无法唤起软键盘。

2. element-plus

element-plus 下未能解决的原因在于vue3中去除了这个钩子 hook:mounted (参考：Vue官方文档里没告诉你的神秘钩子——@hook)。

hook:mounted 绑定了Select组件的mounted方法。

前面也总结过，vue3.x下此钩子的失效导致了无法避免首次点击产生的bug。那么，能否使用其它钩子，或者DOM原生事件取代它呢？

element-plus 解决方案

Select组件并不支持其它的DOM原生事件，但它提供了插槽。可以通过监听插槽内元素的加载，或者直接插入一个测试元素在Select组件内，间接监听Select组件是否加载完毕。

示例：
由于图片元素支持onload事件，在Select组件内添加一张图片。需添加样式隐藏该图片，图片内容无用，所以大小应尽量小。

<el-select 
  v-model="value"
  placeholder="Select"
  ref="select"
  @visible-change="(value) => cancalReadOnly(value, 'select')"
>
  <img style="display:none" @load="cancalReadOnly(false, 'select')" src="@/assets/images/ios-keyboard-bug.png" />
  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>