Unplanned
Last Updated: 29 Nov 2023 23:29 by Adam
Jeffrey
Created on: 03 Dec 2020 13:41
Category: DropDownList
Type: Feature Request
10
Typing to select item should use all symbols, not only the first (type ahead functionality)

At the moment, typing with the keyboard focuses the first item that starts with the last letter you pressed. To focus the next one you should either use Down Arrow, or type the same letter again.

I would like it to behave like the regular <select> or like a combo box with filtering - typing characters quickly should highlight the item that begins with all those characters, instead of using only the first letter.

=== 

Admit edit: some keywords for better findability: DropDownList keyboard search filter accessibility

1 comment
Adam
Posted on: 29 Nov 2023 23:29

Hello, this is quite an old issue and one that our customer has been frustrated with but no indication that it is planned at any point. It seems like this should be standard behavior. I tested a small change to your source code that allows multiple key matching as requested here. Would you be willing to incorporate this in the next release?

Changes to TelerikDropDownList.razor.cs:

New code:

private DateTime? lastHighlightKeydown;
private string cumulativeHighlightText;
private const int HIGHLIGHT_TEXT_THRESHOLD_MS = 400;

private void SetCumulativeHighlightText(string value)
{
    var now = DateTime.UtcNow;

    cumulativeHighlightText = !lastHighlightKeydown.HasValue || (now - lastHighlightKeydown.Value).TotalMilliseconds > HIGHLIGHT_TEXT_THRESHOLD_MS
        ? value
        : cumulativeHighlightText + value;

    lastHighlightKeydown = now;
}

And modify the existing JS interop callback method for keydown:

public async Task DropDownList_KeyDown(string shortcut)
{
    switch (shortcut)
    {
        ... // same as existing code
        default:
            SetCumulativeHighlightText(shortcut);
            await HighlightItem(cumulativeHighlightText);
            break;
    }
}