How can I use the tab key to select a suggestion?

[canvasandcode]

Hi,

I've been asked to allow users to use the tab key to select an autosuggestion. Currently, it works fine using the up and down arrow and using the enter key. But for some reason, I have to have the exact same functionality with the tab key.

My Vue file looks like this:

https://codesandbox.io/s/vueautosuggest-api-fetching-k7pvw

I would greatly appreciate your help and advice on this.

Thanks

[darrenjennings]

Looks like that example is missing vue-bootstrap dependency and the restaurant data file isn't there. Either way, this might help you get what you need:

https://codesandbox.io/s/vueautosuggest-172-q96jp

The idea being that you need your own "loading" state variable to tell vue-autosuggest when to render and fire off the onSelected event through a ref (but then clearing the hasTabbed in the click and focus events so that it behaves normally):

tabHandler(e) {
  this.$refs.autosuggest.listeners.selected(true)
  this.hasTabbed = true
}

[canvasandcode]

Thank you for the quick response - I still couldn't get it to work, I'm getting the following console error when I try to tab on a suggestion: Error in v-on handler: "TypeError: Cannot read property 'listeners' of undefined"

Why would this be undefined if my component has the ref "autosuggest".

My component looks like this, and I'm using the tabHandler and selectHandler methods you mentioned:

<vue-autosuggest v-model="restaurantModel" ref="autocomplete" @selected="selectHandler" @click="animateInputLabel" @focus="hasTabbed = false" @keydown.tab.prevent="tabHandler" :suggestions="suggestions" :inputProps="inputProps" :sectionConfigs="sectionConfigs" :renderSuggestion="renderSuggestion" :getSuggestionValue="getSuggestionValue" />

On Mon, Feb 24, 2020 at 3:17 AM Darren Jennings notifications@github.com wrote:

Looks like that example is missing vue-bootstrap dependency and the restaurant data file isn't there. Either way, this might help you get what you need:

https://codesandbox.io/s/vueautosuggest-172-q96jp

The idea being that you need your own "loading" state variable to tell vue-autosuggest when to render and fire off the onSelected event through a ref (but then clearing the hasTabbed in the click and focus events so that it behaves normally):

tabHandler(e) { this.$refs.autosuggest.listeners.selected(true) this.hasTabbed = true }

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/darrenjennings/vue-autosuggest/issues/172?email_source=notifications&email_token=AH2NR2FIJACMC6UAY5HTAXLREM35TA5CNFSM4KZ7M64KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMWQYFY#issuecomment-590154775, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH2NR2DS6TYYZPF5ID57BKLREM35TANCNFSM4KZ7M64A .

[darrenjennings]

the ref you pasted is called "autocomplete" so you'd need to reference that e.g. this.$refs.autocomplete.listeners.selected

[darrenjennings]

@canvasandcode did this help?

[canvasandcode]

Sorry for the late response, the project was paused due to everything happening :) Thanks for your help!

[darrenjennings]

sorry to hear @canvasandcode hope you are well and safe.