Enter key does not submit

[webakimbo]

When an autocomplete result is highlighted, the documentation suggests hitting Return/Enter will trigger onSubmit.

I'm using v2.2 for a project and it doesn't appear to do anything (only clicking on a result works as expected). The codepen example in the library's README also doesn't appear to do anything on Enter.

Did this functionality go missing recently?

[jhemmje]

I also stumbled across this problem today.

I found out that the behavior was changed with version 2.4.0. With version 2.2.0 and 2.3.0 submit via Enter works as usual.

With versions 2.4.0 and 2.4.1 it is necessary to set submitOnEnter to true. If an entry is selected and the user presses Enter, the search result is loaded immediately.

However, there is a regression. Before 2.4.0, onSubmit was also called when no entry was selected. I used this to load a page of search results. This does not work now despite submitOnEnter: true. It would be great if this is fixed.

[witoldwegner]

I solved this problem like this:

 <autocomplete
   @submit="submitAction"
   @keyup="e => {if (e.keyCode === 13) submitAction()}"
/>

[msawired]

@keyup solution isn't a good one: Keyup will also trigger when an entry is selected via arrow keys and pressed enter. This will result it two calls. First one with submitAction(entry) for @submit, second one with @submitAction() for keyup.
I think this still needs a native solution implemented, such as 'submitOnEmpty' attribute, which, if set to true, should enable @submit trigger with null argument when user presses enter without selecting any entries.

[jalfonso]

I encountered this same issue while using the vanilla JS component. I was using the onSubmit handler to look for an empty result, but when that stopped working I switched to having the autocomplete input inside of a form that submits to my own endpoint

<form action="/search" method="GET">
  <label for="searchInput" class="sr-only">Search</label>
  <input class="autocomplete-input" placeholder="Search by name" id="searchInput" name="query"/>
  <input type="submit" hidden>
  <ul class="autocomplete-result-list"></ul>
</form>

No idea if this will continue to work in future versions of the component.