vue-select v4 vuejs3 close dropdown on click input

Question

I am trying to close dropdown click in v-select input and clickaway. My code below and I am using vuejs v3 composition api, nuxtjs, vue-select ^4.0.0-beta.6. Can figure out working way.

<li id="delivery_select">
   <span class="subtitle">Location</span>
   <v-select ref="mySelect" v-model="selectedDelivery" :options="deliveries" 
     @mousedown="handleClick"
   ></v-select>
</li>

    const handleClick = (event) => {
            // Check if the click event originated from the v-select input element or its dropdown
            const isClickedWithinDropdown = event.target.closest('.vs__dropdown-menu')
            const isClickedOnInput = event.target.closest('.vs__search')
            if (!isClickedWithinDropdown && !isClickedOnInput) {
              // Close the dropdown if it's open
              console.log('clicked!')
              if (selectedDelivery.value && selectedDelivery.value.menuIsVisible) {
                console.log('clicked!!!')
                selectedDelivery.value.closeMenu()
              }
            }
          }
          watchEffect(() => {
            return () => {
              if (selectedDelivery.value && selectedDelivery.value.menuIsVisible) {
                selectedDelivery.value.closeMenu()
              }
            }
          })

Answer 1

I don't see any need to manipulate the dropdown yourself. It works well without any additional effort.

Or you haven't clarified your goal enough.

const { createApp, watchEffect } = Vue;
 
const App = { 
  components: {
    'v-select': window["vue-select"]
  },
  data() {
    return {
      selectedDelivery : null,
      deliveries: ['Berlin','London']
    }  
  },
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }

<link rel="stylesheet" href="https://unpkg.com/vue-select@4.0.0-beta.6/dist/vue-select.css">
<div id="app">
<li id="delivery_select">
   <span class="subtitle">Selected Delivery: {{selectedDelivery}}</span>
   <v-select ref="mySelect" v-model="selectedDelivery" :options="deliveries" 
     @mousedown="handleClick"
   ></v-select>
</li>
</div>
<script type="text/javascript" src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-select@4.0.0-beta.6/dist/vue-select.umd.js"></script>