In "select" mode, how do I prevent an extra query from being executed when I select an item?

[jonesnc]

I'm submitting a ...

• [ ] bug report
• [ ] feature request
• [x] support request

What is the current behavior?

When I look at the demo, it looks like when I set it to select mode and type in a short word like "Test" and select the suggestion for the word "Test", it performs the search again right after I select an option with the new value as the query, and shows a new list of suggestions.

Is there any way to prevent that additional search upon selecting a suggestion?

What is the expected behavior?

When I click a suggestion in select mode, I'd like it to just accept "Test" as the value I want and not initiate another search. If the selected value returns search results, this can cause the suggestions list to show up right after selecting an option, which is not the behavior I'm expecting.

How are you importing Vue-simple-suggest?

Whatever was used to build the demo.

Please tell us about your environment:

Whatever was used to build the demo.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

If you require additional info, just let me know and I'll provide it.

Thank you for making this plugin, it looks really useful!

[clanwce]

Same here. I don't know why it was designed this way, even in demo. Perhaps add a function to remove input focus right after selection using this.$refs, but I wasn't able to find anything that works.

[kaskar2008]

Thank you for the report.

I can confirm this is a bug :( We will get it fixed right after we got some free time.

[yizen]

I'm also getting this bug, but I could not trace what was happening. In the meantime, you may downgrade to 1.9.6 in your package.json to avoid it.

[oscarhandsome]

Thanks to the developers of this component! I think this default behaviour was made because in 1st request we can get thousands of results in a response with suggestions on what customers searching for. Additional requests give the ability to clarify queries.

Until this bug not fixed easy way to solve it: create additional value into data, then update it in functions where we select some item, and at the beginning of new request compare our cached value with new into the input. Also, need to make input empty by $nextTick. Might this not best solution...

<vue-simple-suggest
        ref="simpleSuggest"
        v-model="selected"
        mode="select"
        :list="getSuggestionList"
        display-attribute="id"
        value-attribute="id"
        :min-length="3"
        :max-count="12"
        :debounce="500"
        :filter-by-query="false"
        class="my-auto"
        @select="selectAddress"
      >
        <input
          ref="simpleSuggestInput"
          v-model="value"
          placeholder="....."
          type="search"
        />
        <div slot="suggestion-item" slot-scope="{ suggestion }">
          <div class="flex justify-between">
            <span v-html="suggestion.name"></span>
            <span v-html="suggestion.label"></span>
          </div>
        </div>
      </vue-simple-suggest>

data() {
    return {
      value: '' as string,
      cashValue: '' as string,
    }
},

async getSuggestionList(value: any): Promise<any> {
  if (this.cashValue === value) return []
  ....
},

selectAddress(): void {
this.cashValue = this.selected.id

 this.$nextTick(() => {
  this.value = ''
  })
}

[gkweb]

Any update on this bug @kaskar2008?