Element: [Bug Report] Select with filterable and without multiple, iOS Chrome will not show keyboard while first click.

[cutesam]

Element UI version

2.4.0

OS/Browsers version

iOS 11.3.1 / Chrome

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/api/post/library/pure/

Steps to reproduce

Open the page, just click on select component, the software keyboard won't raise.
If add the "multiple" property, it works properly.

What is Expected?

It should raise the software keyboard any time when user clicks the component.

What is actually happening?

the first action show the item is readonly and raise a panel with Close button but not keyboard. just close the panel and click select component again, and then the keyboard shows up!!

[element-bot]

Hi, your JSFiddle page is blank because it seems you forgot to click the Save button. Please save your fiddle and then edit this issue with the new link.

[jikkai]

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

[cutesam]

but the version 2.1.0 works fine... @@
thanks any way..

[cutesam]

OK, tracing bug myself, the problem is caused by the "readonly" property. While monitoring the version greater than 2.1.0, select element with filterable and without multiple, input (text) will be set to "readonly". And click the input, "readonly" will disappear then click again (focus still on input (text)) "readonly" comes back!!

the bug is in element-dev/packages/select/src/select.vue
Line 193: return !this.filterable || this.multiple || !isIE && !this.visible;
to fix it just modified as: return !(this.filterable || this.multiple || !isIE) && !this.visible;

[Shhu]

@jikkai are you saying we cant use Element to build any website ? Mobile is like 50% of visitors for most websites ...

[Shhu]

@Leopoldthecoder can you confirm you dont want to fix mobile browser issues ?
Any composant with filterable are unusuable on a mobile device, including auto complete

[Leopoldthecoder]

Yes, Element has always been a desktop UI library. Using it on mobile devices is discouraged.

[Shhu]

I means its broke on mobile browser, not using it as native application, any library should support chrome mobile/ safari mobile

[mathieutu]

Hum. I'm wondering what is really "desktop" and what is really "mobile", when I see the number of homes where the only device available is a tablet, with which you can do all the basic stuffs you can do with a desktop computer (including and especially browsing on Internet).

[nWidart]

@Leopoldthecoder I'm not sure you understand.

This is about responsive design. We're in 2018, it should be responsive by default.

@Shhu is saying the fix is really really small and quick to make this work on mobile browsers.
Mobile browsers does not mean native applications. It means mobile browsers, as in responsive design.

[hypeJunction]

Fix provided by @cutesam worked for me. I created a new component and extended the select and used that in my project.
It's sad and frustrating that element-ui team dismisses this issue as "mobile". It's really bad semantics, no matter what the browser is. That input is not readonly and using that attribute is just bad for accessibility and everything else.
Refs #12722

[chuano]

Fix provided by @cutesam worked for me. I created a new component and extended the select and used that in my project.
It's sad and frustrating that element-ui team dismisses this issue as "mobile". It's really bad semantics, no matter what the browser is. That input is not readonly and using that attribute is just bad for accessibility and everything else.
Refs #12722

Hi, @hypeJunction, can you show us how you did it, please? I'm trying to do it but I don't know how to do it.

Thanks!

[hypeJunction]

I initially had a new component that extended element's select. That quickly became unmanageable. What I realised though is that you can stub elementui and then import the stubbed instance:

import ElementUi from 'element-ui';

// Fixes an issue with filters not working on mobile
ElementUi.Select.computed.readonly = function () {
    // trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
    const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));

    return !(this.filterable || this.multiple || !isIE) && !this.visible;
};

export default ElementUi;

[chinapalace]

@Leopoldthecoder you guys need to make it clear on your site that your library is not meant for mobile.

Interesting choice since it's 2019 and that pretty much makes your library obsolete.

[LaravDev]

I initially had a new component that extended element's select. That quickly became unmanageable. What I realised though is that you can stub elementui and then import the stubbed instance:

import ElementUi from 'element-ui';

// Fixes an issue with filters not working on mobile
ElementUi.Select.computed.readonly = function () {
    // trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
    const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));

    return !(this.filterable || this.multiple || !isIE) && !this.visible;
};

export default ElementUi;

Hi!, can you explain how to implement this? where should i place the code? how to import it? sorry for not understanding at first, thanks in advance for any help or hint.

[Eflyax]

I initially had a new component that extended element's select. That quickly became unmanageable. What I realised though is that you can stub elementui and then import the stubbed instance:

import ElementUi from 'element-ui';

// Fixes an issue with filters not working on mobile
ElementUi.Select.computed.readonly = function () {
    // trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
    const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));

    return !(this.filterable || this.multiple || !isIE) && !this.visible;
};

export default ElementUi;

Hi!, can you explain how to implement this? where should i place the code? how to import it? sorry for not understanding at first, thanks in advance for any help or hint.

I can confirm this works perfectly!
I use it in app.js like this:

import Vue from "vue";
import Element from "element-ui";

Element.Select.computed.readonly = function () {
  const isIE = !this.$isServer && !Number.isNaN(Number(document.documentMode));

  return !(this.filterable || this.multiple || !isIE) && !this.visible;
};

Vue.use(Element, {
  locale,
});

//...