Add support for Enter, Tab keys to finish selection about typeahead HOT 8 CLOSED

@rgamage Good catch!
Currently you can use Tab > Enter.

However this could collide with the following:

protected async Task HandleKeyup(KeyboardEventArgs args)
{
    if ((args.Key == "ArrowDown" || args.Key == "Enter") && EnableDropDown && !IsShowingSuggestions)
    {
        await ShowMaximumSuggestions();
    }

    if (args.Key == "ArrowDown")
        MoveSelection(1);
    else if (args.Key == "ArrowUp")
        MoveSelection(-1);
    else if (args.Key == "Escape")
        Initialize();
    else if (args.Key == "Enter" && SelectedIndex >= 0 && SelectedIndex < Suggestions.Count())
        await SelectResult(Suggestions[SelectedIndex]);
}

from typeahead.

Tab -> Enter doesn't work. It either selects an empty result, or selects the previous selection you made.

from typeahead.

True that didn't work, however PR is ready, let me know what you think.

Do note that : "focus moves to Submit button" is not implemented since that could cause strange effects since we can't know what the next item is and it could be something totally different (for example the first element of the page again).

from typeahead.

Thanks for the quick response! That looks like it might work for Enter, would it be a similar code change for Tab? I would think Tab would be the primary use case. As a user, if the entire 'form' is just this type-ahead and a submit button, then I would expect pressing Enter would select the item, and click the Submit button (default behavior on form submit buttons). Basically, it would be nice to be able to optionally pass that Enter key event up the hierarchy, so the Form could act on it, after the typeahead component acts on it. Kind of like the opposite of event.preventDefault() in a React / JS event handler method.

from typeahead.

@rgamage I get your use case but it's not something I'd suggest doing since you're basically using the typeahead's select to alter some other state outside of the control itself.
What I'd suggest doing is the following:

1. Type in the name
2. There is only 1 suggestion
3. Press Enter, which will return the focus to the typeahead (where it was basically).
4. Press TAB which will focus your next element in your case the submit button
5. Press Enter to submit the form.

I think this will result in a more defensive user experience.

When it comes to the TAB, we discussed it in an other issue before (can't seem to find it atm) but we concluded that it should never be used to alter the selection of the typeahead. It should go to the next control which has a tabindex, most of the time another form control.

from typeahead.

Ok, understood. I can tell you from my user's comments on other apps that this 'Enter - Tab - Enter' dance on every part number entry (this is for a part lookup system, used by production workers many times a day), will get very negative feedback. Users want to type in a part, and go, with a single additional keystroke, not three. I understand many other devs may disagree, so default may be different, but it would be nice for a general-purpose component like this to have the ability to customize these kinds of behaviors. At least provide tab and enter hooks that we can use as we please. I'm not trying to be negative or demanding, understand this is a free open source lib, I'm just advocating to make it even more useful for other devs out there.

Is there a hook to capture when an item is 'selected'? If so, then I could use your PR that selects upon Enter, then do my own app-specific action when an item is selected.

from typeahead.

The Parameter OnValueChanged could be what you're looking for to extend the control of the component.

1. Instead of using ‘Bind’ pass in the ‘Value’ and ’ OnValueChanged’.
2. Make sure to set the value after the change in the function passed to ‘ OnValueChanged’.
3. Handle your form submit in the function passed.

from typeahead.

Thanks for the tip on OnValueChanged, and for the "Enter key to Select" code - I will give it a try. I'll enter a separate issue for the odd tab behavior (Tab key clears your text).

from typeahead.