Element: The [Bug Report] select component uses the filter option on the mobile side, clicks on the component to pop up the option and focus, but cannot pop up the keyboard for input.

[uncleLian]

Element UI version

2.4.9

OS/Browsers version

移动端

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/mmx38qxw/6894/

Steps to reproduce

1、使用移动端浏览器打开链接
2、点击select组件

What is Expected?

软键盘弹出并可以进行输入

What is actually happening?

软键盘闪烁一下没有弹出，无法进行输入

[element-bot]

Translation of this issue:

Element UI version
2.4.9

OS/Browsers version
Mobile terminal

Vue version
2.5.17

Reproduction Link
https://jsfiddle.net/mmx38qxw/6894/

Steps to reproduce

1. Use mobile client browser to open links.

1. Click on select component.
   What is Expected?

Soft keyboard pops up and can be input.
What is actually happening?

Soft keyboard flicker, no pop-up, no input.

[ziyoung]

Element is designed for desktop. It's not compatible with mobile devices. You can use other libraries like vant. FYI: https://github.com/vuejs/awesome-vue#mobile-1

[uncleLian]

我需要在移动端实现类似element-ui table组件，表头使用select组件，所以想在不使用其他移动端UI库的情况下，能否解决这个需求呢？现在点击select组件input已经聚焦，但软键盘无法弹出，目前查看源码无法找到问题所在，所以希望能告知一些思路来解决。

[ziyoung]

Select 组件的功能较多，也是比较复杂的（其实在 Select 里有两个 input 框，估计是某个 input 聚焦后又失焦导致的该问题）。建议自行实现，这样代码量会少很多，并且好排查错误。

[uncleLian]

非常感谢，select组件通过绑定click.native事件得以解决需求。
事件执行内容：获取当前input元素，使用blur()方法，然后设置定时器，100ms后执行focus()方法，软键盘可以弹出

[benmo1602]

<el-select v-model="oldValue" :disabled="disabled" @focus="getedFocus" @visible-change="switchFocus" ref="tempDom"> <el-option v-for="item in options" :label="item.name"> </el-option> </el-select>

getedFocus(e) { this.temporaryDom = e.target; }, switchFocus(e) { if(e === false && this.temporaryDom) { this.temporaryDom.blur(); this.temporaryDom = null; } }

[ghost]

@ziyoung This is surprising. I wish i had known this before. This raises another question. Why there is a responsive grid if there is not responsive support?
Also the framework you referenced doesn't have a select component.

[chinapalace]

@ziyoung why doesn't it say anywhere on the the Element UI website that it is not meant for mobile?

[ghost]

@chinapalace It says actually. https://element.eleme.io/#/en-US

[evilerSS]

非常感谢，选择组件通过绑定click.native事件得以解决需求。
事件执行内容：获取当前输入元素，使用模糊（）方法，然后设置定时器，100毫秒后执行聚焦（）方法，软键盘可以弹出

handleClick(refStr) {
const elSelect = this.$refs[refStr];
const innerElInput = elSelect.$refs.reference;
// 先让input失去焦点
innerElInput.blur();
setTimeout(() => {
// 再重新获得焦点
innerElInput.focus();
innerElInput.$el.getElementsByTagName('input');
// 获取input元素
const inputEle = innerElInput.$el.getElementsByTagName('input')[0];
inputEle.addEventListener('input', (e) => {
// 主动触发远程搜索方法
this.remoteSearchMethod(e.target.value);
});
}, 100);
}