prevent unexpected context switch

[Marvin1003]

This introduces a new property called preventContextSwitch that will prevent automatically submitting the form with the selected value onenter. When active, you have to press enter twice, to submit the form with the selected value. The first enter will update the textbox with the selected suggestion, the second one will utilise the default form behavior and submit it.

I am not really advanced in vue, so any suggestions are welcome.

Enter: If an autocomplete suggestion is automatically selected, accepts the suggestion either by placing the input cursor at the end of the accepted value in the textbox or by performing a default action on the value. For example, in a messaging application, the default action may be to add the accepted value to a list of message recipients and then clear the textbox so the user can add another recipient.

https://www.w3.org/TR/wai-aria-practices/#combobox
https://testen.bitv-test.de/index.php?a=di&iid=95&s=n

[trevoreyre]

Thank you so much for your contribution! I want to make sure I understand this use case a little better. If you wanted a form to not submit on enter, couldn't you add a submit event handler on the form and preventDefault() there? Is there some scenario where that approach falls short and the extra preventContextSwitch prop on the autocomplete is required?

[Marvin1003]

Thank you so much for your contribution! I want to make sure I understand this use case a little better. If you wanted a form to not submit on enter, couldn't you add a submit event handler on the form and preventDefault() there? Is there some scenario where that approach falls short and the extra preventContextSwitch prop on the autocomplete is required?

This is for the case when you select a suggestion from the autocomplete with enter and not want the outer form to automatically be submitted with the value. The input/textbox should just update with the selected value. In short: it should not submit the form on enter when the suggestion list is expanded.

[n1k0]

I'm facing the same situation where:

• User opens the autocomplete, navigates options with arrow keys and press Enter to pick one
• Outer form is submitted, while there are other fieds to fill

Listening to the outer form submit event would need to access the exact autocomplete widget state to decide if the form should be actually submitted or not (eg. is the autocomplete pane currently opened?), which provides no interface to do so in a clean fashion AFAIK.

The proposed patch seems to nicely solve this exact situation.