How to disable the "no-options" slot ?

[gilles6]

How to remove the no-options li field below which is displayed when the search input box is editable:
<li class="no-options">Sorry, no matching options.</li>

[cirokd]

You can use an empty slot, like so:

<v-select>
  <span slot="no-options"></span>
</v-select>

[Orange-Men]

@cirokd It looks awful.

Maybe there's another way...

[n-smits]

This will help only if you have something else to display, e.g. footer slot in my case.

But it can be removed with css by setting .vs__no-options to display none (and don't add the custom no-options slot). In case you were having trouble opening it with dev tools, here is the html.

<ul id="vs1__listbox" role="listbox" style class="vs__dropdown-menu>
  <li class="vs__no-options">Sorry, no matching options.</li>
</ul>

[erwinmesi]

I am actually experiencing the same issue now. What I did is like this:

<v-select :data-hide-options="!searchKey && !options.length" ../>

And then via CSS:

[data-hide-options='true'] ul[role='listbox'] {
    display: none !important;
}

This works for me! (at least for the meantime)

[waleev]

How to show no-options slot only when you actually search something:

<v-select
    ref="select"
    @search="onSearch"
    @open="onOpen"
>
    <template #no-options>Nothing found</template>
</v-select>

and methods:

async onSearch (search, loading) {
  if (!search.length) {
    this.$refs.select.open = false
    return
  }

  this.$refs.select.open = true
  this.isSearching = true
  loading(true)

  // ajax query...

  loading(false)
  this.isSearching = false
},
onOpen () {
  if (!this.options.length && !this.isSearching) {
    this.$refs.select.open = false
  }
}

[SokolovskyAlex]

@sagalbot , first of all, thank you for your work!

maybe there is some update about this request?

[zak39]

You can use an empty slot, like so:

<v-select>
  <span slot="no-options"></span>
</v-select>

It worked in my context.

I'm using this component with NcSelect from Nextcloud.

I wrote this code, and it worked, but I wonder if it's best practice to use this component in this way 🤔

<NcSelect
	class="searchbar-groups"
	track-by="gid"
	label="displayName"
	:limit="10"
	:options="groupsSelectable"
	:placeholder="t('workspace', 'Start typing text to search for groups')"
	:loading="loadingGroups"
	:append-to-body="false"
	:user-select="true"
	@option:selected="addGroupToBatch"
	@search="lookupGroups"
	@close="groupsSelectable=[]">
	<template #no-options>
		<span />
	</template>
</NcSelect>