Vue-multiselect: Question about the @search-change event behavior

[JeffBeltran]

First off, one of my favorite Vue compoenents, so thanks for the hard work. Second, sorry if this is a dupe or just a dumb question but i couldn't find an answer and figured i should just ask. Should the @search-change event be fired after selecting an option?

I can prevent the query from happening (search query is null) but it seems weird that the event should be thrown after selecting the option. Am i missing something here?

[chasegiunta]

Running into the same issue (I think). @JeffBeltran When the even is thrown, is the query param empty?

I'm getting my options with an ajax call, and upon selecting an option, the @search-change event is being thrown _with an empty query param_ so I immediately get an empty array/object back and lose the initial search result options.

[JeffBeltran]

@chasegiunta yup exactly, I also have it via an Ajax call so for now I just check for null before I apply changes.

Glad to know that I'm not the only one

[shentao]

Hey! I believe you can use :clearOnSelect="false" prop. Otherwise, the search query is cleared each time you select something. The @search-change event is emitted after each change to search value.

I hope it helps!

[JeffBeltran]

not sure how i missed that one, but thanks @shentao for the reply

[chasegiunta]

@shentao Pretty sure I tried that one (and just did again) and still running into the same issue. The :clearOnSelect prop set to false has no effect.

@JeffBeltran did you test it for your case already? Perhaps this is a user error on my part.

[JeffBeltran]

@chasegiunta you're right, i just assumed it would fix the issue but i get the following

 ClearOnSelect and Multiple props can’t be both set to false.

So i add :multiple="true" & :clearOnSelect="false" but @search-change still fires off when i select my search

Here is my @search-change method that gets called (tried it without the debounce function and it still has same behavior)

methods: {
  lookup: _.debounce(
    function (searchQuery, id) {
      console.log(searchQuery)
      if (searchQuery) {
         // ajax call
      }
    }, 300)
  },
}

I just add the if statement there to catch the empty searchQuery but just seems like weird behavior to me and wanted to verify that this was intended

[chasegiunta]

@shentao Would you mind verifying this bug when you get the chance?

[shentao]

Will try to do that! :)

[shentao]

Okay. Found a fix. There is a newly added prop called preserveSearch that should do just that (not clear the search when activating/deactivating).

Here’s an example: https://monterail.github.io/vue-multiselect/#sub-multiple-select

[woto]

Hi to all, sorry for bad english. Faced the same problem @shentao why does search-change emit's by default after closing list? may be better to set preserve-search to true by default? Or may be point to this behavior in Asynchronous section of documentation?

By the way. Thank you for you work!

[jeremyrambo]

I also wanted to point out that I ran into this issue today, but only on certain instances of the multiselect. I would select an option, the drop down would disappear, yet the @select function was not triggered. Oddly, if I selected a second time, it worked. I was really confused but then I noticed that I accidentally had my trackBy property pointing to the wrong (non-existent) property of my option objects.

Fixing that fixed my problem. I dropping it here because I was led hear. I hope you find it helpful.