autocomplete icon indicating copy to clipboard operation
autocomplete copied to clipboard

prevent unexpected context switch

Open Marvin1003 opened this issue 5 years ago • 3 comments

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

Marvin1003 avatar Oct 19 '20 07:10 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?

trevoreyre avatar Oct 21 '20 16:10 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?

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.

Marvin1003 avatar Oct 21 '20 17:10 Marvin1003

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.

n1k0 avatar Jun 01 '21 13:06 n1k0