onSuggestionSelected now fires when receiving key press of Tab or ArrowRight

[Jackleberry]

I have added in a one liner to allow onSuggestionSelected to fire when pressing the 'Tab' button.

I have added tests and updated the documentation and npm run build works.

[joshjg]

It would be nice if right arrow did this as well.

[Jackleberry]

I'll see if I can add that to this PR too, probably only next week though.

[JemarJones]

Whats the progress on this?

[JemarJones]

I think this should preferably be opt-in behaviour (with a bool prop). That way not everyone is forced to select a suggestion on blur, but those who want to can easily.

[Jackleberry]

Added the right arrow press as well.

[mrazadar]

Hi @moroshko can you please add @Jackleberry changes in master? I really need this.

[jacobbuck]

@moroshko Apologies for the spam, but any chance to get this merged/released soon? I too really need this for my application.

[moroshko]

@Jackleberry Sorry for such a delayed response.

Selecting a suggestion when → is pressed seems wrong to me. Imagine the following scenario:

1. You type something
2. Click ↓ to highlight the first suggestion
3. Click ← a couple of times to move the cursor left
4. Click →

It doesn't seem reasonable to me to call onSuggestionSelected at this point, as you are probably just moving the cursor back.

When Tab is pressed, the default and expected behavior on the web is to move the focus to the next element and blurring the Autosuggest input. This is exactly what's happening at the moment.

Could you explain what problem are you trying to solve by calling onSuggestionSelected when Tab is pressed?

Would you consider the suggestion being selected (i.e. would you call onSuggestionSelected) if the input is blurred by clicking outside of it?

[Jackleberry]

@moroshko I agree with the first point, and I see what you're saying with the second. I think I have a general frustration about the default tab functionality, however what you've said is they way it should work. I'll close the PR.

[felixfbecker]

@moroshko

When Tab is pressed, the default and expected behavior on the web is to move the focus to the next element and blurring the Autosuggest input. This is exactly what's happening at the moment.

You could argue the same way that pressing Enter inside an input, the default and expected behavior on the web is to submit the form.

For my use case, I only have a single input, so there is nothing the user could Tab to. I would like to reserve Enter for submitting the search and Tab for selecting different (potentially multiple) suggestions, as known from code editor/IDE autocompletion.

[samsch]

@moroshko

When Tab is pressed, the default and expected behavior on the web is to move the focus to the next element and blurring the Autosuggest input. This is exactly what's happening at the moment.

This is true, but having the option to additionally select the first highlighted item matches the behavior of a select element, where the interaction is like:

1. Click (or press enter when highlighted) a select dropdown, opening the list of items
2. Type the first letter of one of the options, which highlights the option
3. Press tab, selecting the highlighted option, and moving to the next tab-stop on the page

In cases where only the suggested items are valid options and the autosuggest is functioning as a searchable select, I think it makes sense to allow selecting with tab (and then allowing the default functionality to occur) as an option. It may make sense to link the option to highlightFirstSuggestion being true, but I'm not strongly opinionated either way on that.

One more small bit of functionality which goes with this is clearing the input on tab if there isn't a suggestion given or selected. This can be done now using inputProps.onBlur.

When doing a basic suggestion list, I think you could implement the functionality on top of the component using onBlur, however if you do a mulitSection autosuggest, the onBlur callback doesn't get the section index, and you can't identify the section which goes with the highlightedSuggestion (you could work around this by adding the section data to each item in the section, but that seems dirty).

[ahmed-faraz46]

Hi @moroshko,
Here I have a scenario let's suppose we have highlightFirstSuggestion set to true. A user starts typing in most of the cases his desired suggestion is appeared at the top and is highlighted automatically.

Now what he/she will do? -->, of course, he/she will imagine that his desired suggestion is selected because it's highlighted and press tab. But nothing is selected, so he/she have to come back and select it again to successfully proceed with the form.