vue-select icon indicating copy to clipboard operation
vue-select copied to clipboard

prop to close dropdown when clicking top of dropdown

Open srchulo opened this issue 5 years ago • 6 comments

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?

srchulo avatar Aug 25 '20 01:08 srchulo

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

MoreOrLessSoftware avatar Feb 01 '21 20:02 MoreOrLessSoftware

Ditto!

jetlej avatar May 08 '21 21:05 jetlej

Bumping this up - had a usecase where I am using it as a simple select, and realised this issue exists, which is very frustrating

doutatsu avatar Mar 28 '22 19:03 doutatsu

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

Zezombye avatar Oct 21 '22 06:10 Zezombye

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.

runxc1 avatar Feb 08 '23 19:02 runxc1