search

HSLdevcom / digitransit-ui

Digitransit UI ("Reittiopas.fi")
https://www.reittiopas.fi/
Other
238 stars 130 forks source link

Allow selecting origin/destination from suggestions by with Tab? #4292

Open datarttu opened 3 years ago

datarttu commented 3 years ago

When I'm typing my origin or destination in the text fields, and I'm provided a list of suggestions, I'd find it intuitive to hit the Tab button when the correct suggestion is focused, and this action would confirm that suggestion as the origin / destination and take my focus to the next UI element. However, hitting the Tab when in the suggestion list only leaves the text field empty and removes the focus. This is what happens in HSL Reittiopas when typing and then trying to select and proceed with Tab:

Peek 2021-07-07 14-30

I've also tested with this https://jyvaskyla.digitransit.fi/, same issue there.

Everything works just as expected when I use Enter instead of Tab, and I think it's fine - Tab completion & focus change just seems to be standard behaviour on many common sites so it feels a bit weird that Reittiopas & Digitransit are missing this UI behaviour. Would it be possible to allow using Tab here?

datarttu commented 3 years ago

Some more info: it seems that the current behaviour depends on the react-autosuggest component. There has been a lot of discussion and still no consensus about the expected Tab behaviour, see this PR.

Hope this can be still considered here from the UX perspective, however I find it understandable if adding the Tab behaviour I suggested would bring too much custom code on top of the original component.