Vue-multiselect: Strange behaviour on Ajax options

[PrimozRome]

Version 2.1.3

I have very strange behaviour when I use AJAX for loading my options. When I type into the select box my AJAX function is called and options are populated. If I search "sirius" then the select box will populate search box with returned options. If I search "sirius stg" my ajax function still returns results but select shows 0 results, even though options are there. If I off focus and focus back to the select, I will see those options loaded.

I have no clues what is going on but here is the video:

https://www.dropbox.com/s/zjjlkihr2562gap/vue-multiselect.mov?dl=0

Here is my template code:

      <multiselect
            v-model="currentValue"
            :name="name"
            :options="localOptions"
            :label="labelKey"
            :custom-label="formatLabel"
            :multiple="multiple"
            :taggable="taggable"
            :placeholder="$t(placeholder)"
            :loading="loading"
            :disabled="disabled"
            :readonly="readonly"
            :select-label="$t('COMPONENT.SELECT.SELECT')"
            :deselect-label="$t('COMPONENT.SELECT.DESELECT')"
            :data-vv-as="$t(label) | lowercase"
            :hide-selected="false"
            :searchable="true"
            track-by="id"
            class="form-control form-control-select textarea"
            @input="handleInput"
            @select="handleSelect"
            @remove="handleRemove"
            @search-change="searchData"
            @tag="addTag"
          />

and my ajax function

    searchData: debounce(function(query) {
      if (this.async && query !== '') {
        this.loading = true
        this.$store
          .dispatch('api/get', {
            url: this.async,
            data: {
              params: {
                search: query
              }
            }
          })
          .then(r => {
            let data = r.data
            this.localOptions = data
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      }
    }, 400),

At first I thought that debounce function causes the problems, but even if I don't use it, I have the same behaviour. Any tip into right direction is appreciated...

[shentao]

Hey! I think you need to add the :internal-search="false" prop, so that the multiselect doesn’t run its own search on the results. I assume sirius stg just doesn’t match with any label.

[PrimozRome]

@shentao legend! This is what I was missing. Thanks.

[shentao]

Happy to help!