Enter key behaviour

[paulheijman]

First of all: thank you for a very useful component!

• vue-autosuggest version: 1.3.1
• node version: 9.4.0
• npm (or yarn) version: 5.7.1

            <vue-autosuggest
                ref="autosuggest"
                @keyup.enter="doSearch"
                :suggestions="suggestions"
                :inputProps="inputProps"
                :renderSuggestion="renderSuggestion"
                :getSuggestionValue="getSuggestionValue"
                :onSelected="onSelected"
            />

Problem description:
I want to use the autosuggest as a searchbar and suggester works very nice, but when the user hits enter my search function isn't called despite the @keyup.enter

Suggested solution:
It seems the enter key event is overridden in the component for selecting a value from the dropdown list. If the list is closed the override should be ignored.

[darrenjennings]

thank you for the note. I will look into this later. It is not readily apparent how you can bind these kind of methods from the component instantiation without the library knowing about them to begin with so I will have to implement them manually like I did for onBlur and onFocus.

However, I have two solutions that might be able to work for you.

1. keydown.enter is used in onSelected so you could use that to trigger your search. It should work even if there is nothing selected. I demonstrate an example here:

• https://codesandbox.io/s/k2459qox45

2. Search inputs are usually embedded inside of HTML forms. If you use my component inside of a <form> , you can trigger a form submit inside the onSelected event.

[paulheijman]

Hi Darren,
Thank you for your quick reply!
It does work the way you described in #1. But I think it would be nicer to have it implemented as with onBlur, etc.

[darrenjennings]

@paulheijman you can now do @keyup.enter and any other native event you'd like to attach to the <input> as of 1.4.1. Thanks for the suggestion and I think this is a great feature. Drafting release notes now.

[paulheijman]

Hi Darren,

Thank you!

[cssndrx]

Thanks so much for adding this, Darren!

Question for Darren or Paul.... how do you fish out the value of the VueAutosuggest from within the function linked to @keyup.enter?

[cssndrx]

Ah doh! Figured it out. It's bound to v-model.

Amazing component, thank you Darren!