How to trigger @submit from external button

[maximelebreton]

Hello @trevoreyre, and thanks for your plugin!

I'm using autocomplete-vue and want to add a "Search" <button>, like on the google page, to trigger the keyboard selected result (or the first if no one is selected):

but I can't find a way to trigger the @submit event from a button!

Precision: the behaviour of this codepen is not what i'm looking for: https://codepen.io/trevoreyre/pen/RwwNKLK?editors=1111

Thanks for your help!

[trevoreyre]

I'm not sure what the difference is between the CodePen example you linked and the Google search behavior. Can you explain a little more?

[maximelebreton]

Yes of course!

Here is a GIF to illustrate the difference:

Actual behaviour: On the CodePen example:

• ✔️First case: Click on the third result takes the result as input and triggers the autocomplete's @submit function (expected behaviour)
• ❓ Second case: Select the third result with keyboard and click on the Search button only triggers the handleFormSubmit function, and has no effect on the autocomplete (unexpected behaviour)

Desired behaviour:

• First case: nothing to change!
• Second case: When I press the Search button, I want to trigger the autocomplete @submit function (not the form submit). (if no result is selected with keyboard, it takes the first result by default)

I hope to be clearer :)

Thanks!

[maximelebreton]

Hello @trevoreyre, are my explanations clearer?