prop to close dropdown when clicking top of dropdown
Is your feature request related to a problem? Please describe. On my v-select, I have clearable and searchable both false. On mobile it's frustrating to close the select, because I need to hit the tiny arrow in the right corner.
Describe the solution you'd like It would be great if there was a way to close the menu when tapping the main space next to the arrow. Maybe a prop could allow this?
I think this should be the default behavior to be consistent with native selects.
Should be a quick fix: https://github.com/dkr88/vue-select/commit/9e9bdc385b7f50335afd093d0f8c064dba0fc055
Ditto!
Bumping this up - had a usecase where I am using it as a simple select, and realised this issue exists, which is very frustrating
After a good hour of searching I finally found a solution to close vue-select dropdown on clicking on the selection. Building off dkr88's solution, but making it so the dropdown can be searchable.
Replace:
t.preventDefault():this.open&&n?this.searchEl.blur():this.disabled||(this.open=!0,this.searchEl.focus())
with
t.preventDefault():this.open&&n?this.searchEl.blur() : this.open ? (t.preventDefault, this.searchEl.blur()) : this.disabled||(this.open=!0,this.searchEl.focus())
So I just found this issue and am wondering if there is anyway to close the component when the user clicks anywhere else on the page as in when the component itself looses focus and not just the search as there is no search when it's hidden.