Element Plus select filterable on mobile

Hi Lauris,
need your help please.
I’m at advanced stage with my application using Vue 3 demo 5.
Today started testing on mobile phone and it occur that when using el-select with filterable ….. when entering this field keyboard does not show.

It is working with multiple option sad

Facing this I consider to have this field „multiple” but close options after pick a value but I dont know if this is possible. By default options remain open after picking one option. But again I’d like to avoid having this as multiple since I have to pick one option. Filterable is a must.

Lauris do you have idea how to deal with this issue?

Best Regards
Krystian

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Hi Krystian,

There is an issue related to this problem on Element UI Github repo.
https://github.com/ElemeFE/element/issues/12742

Few solutions offered by other users.


  1. To use autocomplete input field: https://element.eleme.io/#/en-US/component/input#autocomplete

  2. Using multiple with :multiple-limit="1"

  3. Fix select issue using one of the solutions:
    https://github.com/ElemeFE/element/issues/12742#issuecomment-851779942
    https://github.com/ElemeFE/element/issues/12742#issuecomment-974707326
    https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872

Hi,

thank you. I read this and multiple limit=1 works fine but the only thing ... I`d like to close select automatically after picking one option.


this I`d like to try also ( to have an alternative ) but I dont know how sad
https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872

the tip from https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872

is the best happy
I educated about custom directives.

Thank you Lauris

Hi Krystian,

Sorry for the late reply.

Glad to hear that you already figurated this out. Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(