-
-
Notifications
You must be signed in to change notification settings - Fork 91
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
How can I use the tab key to select a suggestion? #172
Comments
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
} |
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 ***@***.***> 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
<#172?email_source=notifications&email_token=AH2NR2FIJACMC6UAY5HTAXLREM35TA5CNFSM4KZ7M64KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMWQYFY#issuecomment-590154775>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AH2NR2DS6TYYZPF5ID57BKLREM35TANCNFSM4KZ7M64A>
.
|
the ref you pasted is called "autocomplete" so you'd need to reference that e.g. |
@canvasandcode did this help? |
Sorry for the late response, the project was paused due to everything happening :) Thanks for your help! |
sorry to hear @canvasandcode hope you are well and safe. |
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
The text was updated successfully, but these errors were encountered: