set display: none; to input.vs__search makes the dropdown not closable

[handhikadj]

• Vue Version: Vue 2.7
• Vue Select Version: 3.20.0

Describe the bug it's not closable if we click outside the dropdown. I need to hide the input.vs__search because it breaks the dropdown UI on my project

Reproduction Link https://codesandbox.io/s/brave-cookies-upd1vn

Steps To Reproduce I notice the v-deep is not working on the sandbox, so you need to:

1. inspect the codesandbox result tab using devtools
2. find the input.vs-search and set display: none to element
3. click the dropdown so that it's opened and click outside the dropdown list. you will notice the dropdown won't close (if you click a dropdown item, the dropdown behaves normally)

Expected behavior the dropdown behaves normally

[eduardmavliutov]

Faced that annoying bug either.

That worked for me but I hope the bug will be fixed soon. I am using Tailwind (unfortunately) and just setting height and width of that input to 0 when there is any element in selected array. I am not hiding the input constantly to show the placeholder.

  <VSelect
    v-model="selected"
    :options="options"
    label="label"
    multiple
    :searchable="false"
    :close-on-select="false"
    placeholder="My precious placeholder"
  >
    <template v-if="selected.length > 0" #search="{ attributes, events }">
      <input
        class="vs__search"
        :class="{ 'h-0 w-0': selected.length > 0 }"
        v-bind="attributes"
        v-on="events"
      />
    </template>
</VSelect>

I know that the input is still in the mark up but at least it does not break the UI.