Cannot submit form when enter key down

[vata03]

• vue-autosuggest version: 2.0.0
• node version: 10.15.0
• npm (or yarn) version: 6.9.0

Relevant code or config

What you did: The form submit when [Enter] key down at input element on this component.

What happened: Key down event inhibite at this component key down event handler. Thus, the form submit was canceled.

Reproduction repository:

Problem description:

Suggested solution: If not affected, evaluate isOpen property in keydown event handler when captured at keycode 13.

[darrenjennings]

You have to submit the form yourself, and this can be done in a number of ways:

<form ref="theForm">
<vue-autosuggest @keyup.enter="$refs.theForm.submit()"

<form @submit.prevent="submitHandler">
<vue-autosuggest @keyup.enter="submitHandler"

But you probably want to also check to see if the user selected an item and not always submit the form.

https://codesandbox.io/s/httpsgithubcomdarrenjenningsvue-autosuggestissues125-sn74o

[vata03]

Thank you for reply. This is my first post issue, I'm so fun ! And, I'm sorry for my poor english.

My wish, When suggest list is opened, enter is choise list item and the form never submit. When suggest list is not opened, enter is submit the form. Your prepared sample is always submit form when key enter.

I want to handle it as standard operation as possible (key enter make to submit form). Please do the 'preventDefault' currently being executed in the key down event only when the list is open.

Usually I have to PR it myself, but I can not do it yet because I started github in a few days...

[darrenjennings]

I see your problem now. You can do this: If a user hits enter @selected is emitted, and if no item is passed in, then you can submit the form. I updated the example:

https://codesandbox.io/s/httpsgithubcomdarrenjenningsvue-autosuggestissues125-sn74o

Let me know if that helps.

[vata03]

I could! Thank you for your help and kindness sample code.

Please close this issue.

[daniel-farina]

Hello,

What if you are using multiple sections? where @input="fetchResults" is not used but the onSelected on the sectionConfigs instead?

Thanks!

[darrenjennings]

@daniel-farina do you have a codesandbox you could reproduce? I would assume you can use the same method inside onSelected in the section config, but maybe I misunderstand your point.