Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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 (5)


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 <a>https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872</a>

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.

Elevate your government operations with https://www.testsfile.com/Public-Sector-Solutions-tests.html' latest update [2023]. Unveiling a suite of cutting-edge features, our new questions module redefines engagement and efficiency. Seamlessly integrate dynamic inquiries into your workflows, empowering your team to glean deeper insights and drive impactful decisions. From streamlined citizen interactions to enhanced data management, stay ahead in the public sector landscape. Transform challenges into opportunities and embrace a future where innovation meets governance. Elevate your mission with Salesforce, where every question propels progress. Upgrade today and lead the way in shaping a smarter, more connected public sector.


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  :(