dropdown auto close when selected first, but the second select works properly vue-multiselect

Question

i have problem when first select dropdow will close, even though i have set close-on-select="false" the dropdown still hides after the first select, but since the next select it works properly
you can see it directly at the homepage link: vue-multiselect
or you can watch the video here video

here is my code:

              <Multiselect
                v-model="form.users_ids"
                id="students"
                label="name"
                class="chat-bulk-form-mul"
                :custom-label="nameWithRelation"
                :options="optionUsers"
                :multiple="true"
                :clear-on-select="false"
                :close-on-select="false"
                :preserve-search="true"
                :hide-selected="true"
                :max-height="200"
                :internal-search="false"
                @async-find="asyncFind"
                @infinite-scroll="infiniteScroll"
              />

Answer 1

Not sure because your configuration seems correct. However, a new step is mentioned in the documentation , to add CSS via CDN. Maybe you forgot to add the proper CDNs.
One more reason could be, I can't see any event named async-find in the doc. There is a method named asyncFind which can be used when calling upon a search query.

Try matching your asynFind method and rest config with this example-

<template>
  <div id="app">
    <label>Simple select / dropdown</label>
    <multiselect
      v-model="value"
      :options="options"
      :multiple="true"
      :clear-on-select="false"
      :close-on-select="false"
      :preserve-search="true"
      :hide-selected="true"
      :max-height="200"
      :internal-search="false"
      label="name"
      track-by="name"
      :custom-label="customLabel"
      @search-change="asyncFind"
    >
    </multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  name: "App",
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
      options: [
        { name: "Vue.js", language: "JavaScript" },
        { name: "Adonis", language: "JavaScript" },
        { name: "Rails", language: "Ruby" },
        { name: "Sinatra", language: "Ruby" },
        { name: "Laravel", language: "PHP" },
        { name: "Phoenix", language: "Elixir" },
      ],
    };
  },
  methods: {
    customLabel({ name, language }) {
      return `${name} – ${language}`;
    },
    asyncFind(query) {
      console.log(query);
    },
  },
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Here is the working demo .