Skip to content
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

Enter key does not submit #157

Open
webakimbo opened this issue Jan 18, 2023 · 5 comments
Open

Enter key does not submit #157

webakimbo opened this issue Jan 18, 2023 · 5 comments

Comments

@webakimbo
Copy link

webakimbo commented Jan 18, 2023

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
Copy link

jhemmje commented Jan 23, 2023

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
Copy link

I solved this problem like this:

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

@msawired
Copy link

@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
Copy link

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.

@karvas
Copy link

karvas commented Sep 8, 2024

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.

In my case (v3.0.2) submitOnEnter worked! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants