Change tab key behavior when navigating results?

[ronmichael]

One thing I found peculiar about autoComplete.js - something different from most autocompletes I've found - is the tab behavior. Tab just navigates further down the suggestion list. Might I suggest that a tab select the current item - as Enter does - and then actually tabs out of the field? I've made this change in my own copy of the code and it feels much more intuitive for users.

[TarekRaafat]

Hello @ronmichael,

I get where you're coming from, you could be getting that unusual feeling mostly because of the "convention" deviation you're getting exposed to which may vary from one person to another based on the conventions they're oriented to.

I would suggest that we vote on this one before making any decision that might impact other users negatively.

Please let me know your thoughts.

Have a nice day, cheers! :)

[ronmichael]

I totally agree, @TarekRaafat. I can understand that some people will prefer the current behavior. Or maybe something else entirely. :) Maybe a more universal solution would be that this behavior is customizable, or overridable with an event or extension. The only way I found that I could make it behave as I needed was to change the code of autoComplete.js itself.

[jsunsawyer]

@TarekRaafat I think that in the example, where the field is only used for a single search field, tab could feel fine. As soon as you utilize autoComplete.js in a single field of a form with multiple fields, tab kind of breaks the flow for the user (as @codyjames mentions below).

Imagine a scenario where you're simply using autocomplete to select countries. The user would get stuck when using only keyboard navigation.

I think that this should be a simple option that can be set, regardless of other users wanting/needing this functionality (re: voting).

[codyjames]

First off, I love Autocomplete.js — thanks for working on such a great tool. Here's my two cents!

I think the current functionality goes against user expectation which is bad for user experience. It also may not align with the WAI-ARIA Authoring Practices 1.1 specification. Adam Silver wrote about this here: https://adamsilver.io/blog/building-an-accessible-autocomplete-control/#composite-controls-should-have-a-single-tab-stop

A primary keyboard navigation convention common across all platforms is that the tab and shift+tab keys move focus from one UI component to another while other keys, primarily the arrow keys, move focus inside of components that include multiple focusable elements. The path that the focus follows when pressing the tab key is known as the tab sequence or tab ring.

Also, I wonder if it may be a bad idea to use a votes trigger in order to make improvements that are accessibility related or are easy for folks to overlook (not everything is familiar with how these type of UIs normally work or should work, so they just overlook it).

[TarekRaafat]

Thank you, @codyjames and @jsunsawyer; I highly appreciate your kind feedback.

I totally get your point. The old TAB behavior might've been bad for some use cases and good for others which is totally normal because that's the case with everything there's no one-size-fits-all.

I always follow the best practices and listen to your essential feedback to cover a wider range of use cases and make sure that the DX and UX are the best they could be as much as possible, yet that doesn't limit me from trying different ways of doing things "curiosity" because I believe that there's always room for improvement (so why not).

Regarding the votes trigger in this case specifically, it was required because I'm not the only one who uses autoComplete.js. Hence, I have to consider other users before making any decision that might impact their projects.

The change you've requested has been done check it here, or in the demo.

I hope you understand; thanks again, and have a nice weekend! :)