Vue-multiselect: noResult does not work

[marjandejyab]

noResult slot does not be displayed before API call in Asynchronous select. there is any solution to display it In the first moment?

[shentao]

Hey!
This was an intentional change as we don’t want to mislead the user saying that there are no results if those results are still being fetched.

So far the only solution I think of is extending the component and providing a custom template (which can be a 1:1 copy of what can be found in /src/Multiselect.vue) with a small modification near the noResults slot.
I hope that helps :)

[marjandejyab]

The problem is that users get confused when nothing is showed while pressing the arrow key on the dropdown list without searching anything. I see they expect to see something by pressing the arrow key and they press it multiple time till I need to tell them that they should not expect anything without searching anything. So I think it would be good idea to no show the arrow key or at least display a text that display "you need to enter search phrase"

[pasierb]

@marjandejyab you can use "placeholder" attribute to display your "type to search" message. https://jsfiddle.net/pasierb/uqkkLoc6/2/

[SergioReis97]

For anyone that ends up here, had the same problem as @marjandejyab and ended up doing a weird hack.
I do understand the point of "if user didn't search, this doesnt make sense" but in my case i really needed this.

<multiselect  :class="(selectOptions.length == 0 ? 'emptySelect' :'') " ....
  <span slot="noResult">No results were found.</span>
</multiselect>


...
<style>
.emptySelect .multiselect__content li:last-child{
  display: block !important;
}
</style>