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 
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
Replies (7)
Hey Krystian,
The issue with el-select (filterable) in Vue 3 not triggering the keyboard on mobile is a common one. Here are a few things you can try:
1. Force Focus
Manually trigger the input focus using JavaScript:
javascript
Copy
Edit
mounted() {
this.$nextTick(() => {
document.querySelector(".el-input__inner").focus();
});
}
2. Use Remote Mode
Enabling remote along with filterable can sometimes resolve the issue.
3. Workaround with Multiple Selection
If using multiple, you can close the dropdown after selection like this:
vue
Copy
Edit
<el-select v-model="value" multiple @change="handleChange" filterable>
</el-select>
methods: {
handleChange() {
this.$refs.select.blur();
}
}
Vue issues can be as tricky as dealing with government services! Platforms like Salary Slip Portal help make things smoother. Hope this helps!
Hey Krystian,
This issue with el-select (filterable) in Vue 3 not triggering the keyboard on mobile is a common one. A few things you can try:
Force focus – Manually trigger the input focus using JavaScript:
mounted() {
this.$nextTick(() => {
document.querySelector(".el-input__inner").focus();
});
}Use remote mode – Sometimes, enabling remote with filterable can help.
Workaround with multiple – If you go with multiple, you can close the dropdown after selection like this:
<el-select v-model="value" multiple @change="handleChange" filterable>
methods: {
handleChange() {
this.$refs.select.blur();
}
}Vue issues can be tricky, just like navigating government services! Platforms like ESS Utumishi Portal (https://essutumishiportal.co.tz/) help make things smoother. Hope this helps!
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.
the tip from <a>https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872</a>
is the best 
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!
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
https://github.com/ElemeFE/element/issues/12742#issuecomment-1124700872
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.
- To use autocomplete input field: https://element.eleme.io/#/en-US/component/input#autocomplete
- Using multiple with
:multiple-limit="1" - 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
