lekoala/bootstrap5-autocomplete

Disable preventing of submit in forms

Closed this issue · 16 comments

Is it possible to allow using enter to submit a form input, even without selecting an item from the dropdown list?

it's possible, but is it a good idea? that's how a datalist work by default: pressing enter selects the item
if the menu is not visible, enter should work as expected

But it would be nice to have an option to allow it also when the menu is visible, because I had several situations where I typed faster than the server could respond with the list. When the list came up exactly when I was finished typing, I had to select the first element additionally, which is not a very user friendly behavior.

i guess you could use onSelectItem and submit the form upon selection if needed no?

Yes, but I would like to have an option to use enter to submit the form even if the menu is currently visible, just because it is more user friendly.

pressing enter twice :) ?
the thing is, i need to prevent form submit, because selection needs to happen first, then submit
or maybe i should disabled handling of enter completely but that defeats keyboard navigation

pressing enter twice :) ?

No, just once without having to select an item, just like you do with a normal input field.

i get that, but if you press twice, it will submit the form: once for selecting the item, the second time to submit the form
i don't see the big deal^^

But it's still one press more that isn't really necessary. And people that don't know the functionality of the autocomplete get confused by that, so I would allow pressing enter without having to select an item first, to submit the entered text, as this is the way every input works and which is an expected behavior by most of the users.

ok i see, i guess it can be expected for optional autocomplete
the initial implementation reflects actual menu like a datalist and behaves the same

added in https://github.com/lekoala/bootstrap5-autocomplete/releases/tag/1.1.18

It is better now, since you can use the enter key to submit the form, although it isn't possible anymore to use the enter key to select an item from the autocomplete list after navigating using the arrow key, without submitting the form immediately, which is also not the wanted behavior.

ok i see what you mean. the first option is often selected by default, but indeed, if you use autoselectfirst=0 then it makes sense
i've updated master you can have a try

The behavior is very good now, the only issue I have now is that once you hovered over the list, it isn't possible anymore to "deselect" the last hovered item. I think it would make sense to remove the selection once the cursor is outside of the autocomplete menu?

pressing escape will close the menu (and therefore clears the selection). i'm not sure it makes a lot of sense to clear the selection when the menu is open ?
so i would do escape to close it, and arrow down to open it again in case i want to see the suggestions without the selection

But this causes some very weird behavior. When the user typed something and then moves his cursor away from the input field, he accidentally selects an item from the menu. Normally the item should deselect just by moving away from the menu. If he presses the enter key, the unwanted selection gets submitted and not the typed input.
After this little change we have achieved maximum user experience...

ok that makes sense and that would align how it works in a datalist
6a002fc

Thank you very much for the work, it works fine now.