The dropdown in vue-multiselect automatically closes after the first selection is made, ensuring a smooth user experience. However,

I am experiencing an issue where the dropdown closes after the first selection, despite setting close-on-select="false". However, it works properly after the initial select. You can observe this behavior directly on the homepage at the following link: vue-multiselect
Alternatively, you can watch a video demonstration here

Below is the code snippet:

              <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"
              />

javascriptvue.jsvuejs2vue-multiselect

Answer №1

It seems like your configuration is correct, but there may be a missing step which is mentioned in the documentation. Make sure to include the CSS via CDN as well.
Another issue could be the absence of an event named async-find in the documentation. There is actually a method called asyncFind that should be used when initiating a search query.

To address this, try updating your asynFind method and configuration based on the following 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>

You can view the working demo here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to receive a response in React-Native after sending a post request

My current challenge involves sending a response back after successfully making a post request in react-native. Unfortunately, the response is not arriving as expected. router.route("/addUser").post((req, res) => { let name= req.body.name; connection ...

javascriptnode.jsreact-nativeexpress

Adjusting the timeout value for axios does not produce any impact

In our code, the timeout is configured as follows: axios.defaults.timeout === 3000; ...... try { const response = await axios.get(Url, { headers: { 'Authorization': authToken.authHeaderValue, } ...

javascriptnode.jsaxioscoverity

Sticky sidebar panel featuring a stationary content block

I have a sidebar that is set to position:fixed; and overflow:auto;, causing the scrolling to occur within the fixed element. When the sidebar is activated, the element remains static on the page without any movement. My goal: I am looking to keep the .su ...

javascriptjqueryhtmlcss

Searching for single and double quotes within a string using RegExp in JavaScript

I have encountered an issue while searching for a substring within a string using the code below: mystring.search(new RegExp(substring, 'i')) The reason I am utilizing new RegExp is to perform a case-insensitive search. However, when the string ...

javascriptreactjsregexregexp-substr

Using axiosjs to send FormData from a Node.js environment

I am facing an issue with making the post request correctly using Flightaware's API, which requires form data. Since Node does not support form data, I decided to import form-data from this link. Here is how my code looks like with axios. import { Fl ...

javascriptnode.jstypescriptaxios

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...

javascriptjqueryhtmlcss

What is the best way to transfer values or fields between pages in ReactJS?

Is there a way to pass the checkbox value to the checkout.js page? The issue I'm facing is on the PaymentForm page, where my attempts are not yielding the desired results. Essentially, I aim to utilize the PaymentForm fields in the checkout.js page as ...

javascriptreactjsmaterial-ui

Differences in characteristics of Javascript and Python

As I tackle an exam question involving the calculation of delta for put and call options using the Black and Scholes formula, I stumbled upon a helpful website . Upon inspecting their code, I discovered this specific function: getDelta: function(spot, str ...

javascriptpythonmathfinance

In React, a singular reference cannot establish focus amidst an array of references

Scenario In this scenario, we are restricted to using only keyboard navigation without any mouse clicks. Imagine a situation where we have 10 table rows displayed on the screen. Each row contains a menu button for interaction. When the tab key is pressed ...

javascriptreactjsreact-hooksreact-ref

Is there a way to disable default tooltips from appearing when hovering over SVG elements?

Looking for a way to display an interactive SVG image on an HTML page without default tooltips interfering. While I'm not well-versed in javascript/jQuery, I've managed to implement customized tooltips using PowerTip plugin. However, these custom ...

javascriptjquerysvgtooltip

Retrieve the selected item from a Vuetify data table

I am trying to achieve a functionality with my v-data-table that includes Show-select. I need to be able to access the data of the items I have selected and ideally, I would like to display an alert with the value of the first column when an item is checke ...

vue.jsvuetify.jsv-data-table

Middleware in Express.js Router

In the following code snippet, I am aiming to limit access to the 'restrictedRoutes' routes without proper authorization. However, I am encountering an issue where 'restrictedRoutes' is affecting all routes except for those within the & ...

javascriptnode.jsexpress

Leverage Vue's ability to inject content from one component to another is a

I am currently customizing my admin dashboard (Core-UI) to suit my specific needs. Within this customization, I have an "aside" component where I aim to load MonitorAside.vue whenever the page switches to the Monitor section (done using vue-router). Here ...

javascriptvue.js

Is there a way to ensure the web app is loaded only once for all the tests in Cypress?

I am currently working on a web app that is hosted on http://localhost:1234/. Whenever the app loads, it requires reading over 1000 JSON files to populate the necessary information. Is there any way to avoid reloading the web app for each test? Running al ...

vue.jstestingjestjscypress

I'm unsure of the date format, could you guide me on how to convert it?

Dealing with formatting timestamps can be tricky, especially when you have different formats to work with. For instance, my AngularJS plugin returns timestamps in this format when printed in the JavaScript console: Sun Mar 30 2014 14:00:56 GMT-0400 (Easte ...

javascriptangularjs

Create a row in React JS that includes both a selection option and a button without using any CSS

My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element Below is the code snippet that I have: return ( <> <div ...

javascriptcssreactjsfrontend

The battle between dynamic PDF and HTML to PDF formats has been a hot

In my current project, I am developing multiple healthcare industry dashboards that require the functionality to generate PDF documents directly from the screen. These dashboards do not involve typical CRUD operations, but instead feature a variety of char ...

javascripthtmlangularjspdfhighcharts

Guide on how to use a tooltip for a switch component in Material-UI with React

I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far: import * as React from 'react'; import { styled } from '@mui/mater ...

javascriptcssreactjsmaterial-ui

Add information to the Database seamlessly without the need to refresh the page using PHP in combination with JQuery

Check out my code below: <form action='insert.php' method='post' id='myform'> <input type='hidden' name='tmdb_id'/> <button id='insert'>Insert</button> <p i ...

javascriptphpjquery

Having trouble with loading image textures in three.js

Here is the code snippet I am using: var scene = new THREE.Scene(); // adding a camera var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight, 1, 2000); //camera.target = new THREE.Vector3(0, 0, 0); // setting up the renderer ...

javascriptthree.js