Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 of 3 tasks
jonesnc opened this issue Jan 16, 2021 · 5 comments
Open
1 of 3 tasks
Labels
bug Something isn't working
Milestone

Comments

@jonesnc
Copy link

jonesnc commented Jan 16, 2021

I'm submitting a ...

  • bug report
  • feature request
  • 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
Copy link

clanwce commented Feb 4, 2021

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 kaskar2008 added the bug Something isn't working label Jun 30, 2021
@kaskar2008 kaskar2008 added this to the 1.11 milestone Jun 30, 2021
@kaskar2008
Copy link
Member

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
Copy link

yizen commented Nov 6, 2021

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
Copy link

oscarhandsome commented Dec 11, 2021

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
Copy link

gkweb commented Aug 12, 2022

Any update on this bug @kaskar2008?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants