Element: [Bug Report] El-select component (remote or filterable) soft keyboard does not appear on Android devices

[webpatcher]

Element UI version

2.4.6

OS/Browsers version

Android 6.0, Chrome 63 and Android 8.0 Chrome 63

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/w04yadhb/

Steps to reproduce

On an Android device with Chrome open page with any el-select component with remote and/or filterable options (but without multiple option, its important), then click and focus it - soft keyboard does not appear. As a result, you can not select anything for remote component (and cannot activate filter on filterable component).

On the sample page http://element.eleme.io/#/en-US/component/select example for "Remote Search" keyboard works nice, but in this sample there is multiple option. Without multiple option soft keyboard does not appear on Android.

What is Expected?

When el-select component with remote and/or filterable options receives focus, the Android soft keyboard appears. And a user can input text for remote search.

What is actually happening?

When el-select component with remote and/or filterable options (but without multiple option) receives focus, the Android soft keyboard does not appear.. And a user can not input text and start remote search.

[jikkai]

Element is designed for desktop. It's not compatible with mobile devices.

[rosemalejohn]

I think we need to update the Select.vue readonly computed property to like this? I think we need to add !this.remote to enable keyboard popup when remote is set to true and multiple is set to false.

readonly() {
    // trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
    const isIE = !this.$isServer && !isNaN(Number(document.documentMode));
    return !this.filterable || this.multiple || !isIE && !this.visible || !this.remote;
},

[eirikb]

I understand this is a desktop library, but it would be nice to see this one fixed.
Tested the solution by @rosemalejohn but it didn't seem to help. What did help was to remove the check of this.visible completely (in readonly). I don't know the flow, but this.visible will be true when it is open, which is probably intended, but then the component will be set readonly.

Edit
Unless @rosemalejohn meant && !this.remote instead, that would work:

return !this.filterable || this.multiple || !isIE && !this.visible && !this.remote;

[frnk01]

@jikkai Can you take a look at @eirikb`s suggestion. Should be a quick fix to implement?

[teriyaki-89]

Hi guys. Is there any way to fix the issue as we have some mobile users who would need to enter some data in to these filterable selects

[fega]

@jikkai That's a very sad way to answer, Today we cannot just ignore Mobile.

[florianeck]

still no fix or sth? what the hell....

[AntonMoskalchenko]

Still no fix for iOS too

[nunoffribeiro]

Yes, not fixed! It is ridiculous for a framework of this dimension to discard mobile ...

[ChristianGiupponi]

No fix at all? Seems a must have today

[florianeck]

Only solution i found to make it work is to use the node module in a custom modified form locally.... just for changing one simple piece of code

[aotechsmartsoft]

As @eirikb wrote, that really does the trick (tested on iOS)

return !this.filterable || this.multiple || !isIE && !this.visible && !this.remote;

if you are using CDN minified you can search:
readonly: function () { return !this.filterable || this.multiple || !(!h.a.prototype.$isServer && !isNaN(Number(document.documentMode))) && !(!h.a.prototype.$isServer && navigator.userAgent.indexOf("Edge") > -1) && !this.visible; }

and replace with

readonly: function () { return !this.filterable || this.multiple || !(!h.a.prototype.$isServer && !isNaN(Number(document.documentMode))) && !(!h.a.prototype.$isServer && navigator.userAgent.indexOf("Edge") > -1) && !this.visible && !this.remote && !this.filterable; }