Unplanned
Last Updated: 05 Mar 2024 12:10 by ADMIN
Barry
Created on: 07 May 2021 06:19
Category: ComboBox
Type: Feature Request
29
Automatically select first item on losing focus when the dropdown is open

I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.

This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.

---

ADMIN EDIT

Here is one workaround you can consider:

https://blazorrepl.telerik.com/QoOAPyEZ233YP2AX19

@inject IJSRuntime js

@* Move this script to a separate JS file *@
<script suppress-error="BL9992">
    function getHighligtedComboItem() {
        // Get the currently focused item in this particular ComboBox.
        var focusedItem = document.querySelector(".select-on-tab .k-list-item.k-focus");
        if (focusedItem) {
            return focusedItem.innerText;
        }
    }
</script>

<p>FirstFilteredItem: @FirstFilteredItem</p>

<p>Selected value: @ComboBoxValue</p>

<span onkeyup="@GetFirstFilteredItem">
    <TelerikComboBox Data="@ComboBoxData"
                     Value="@ComboBoxValue"
                     ValueChanged="@( (int newValue) => ComboBoxValueChanged(newValue) )"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Value)"
                     Filterable="true"
                     FilterOperator="@StringFilterOperator.Contains"
                     OnBlur="@SelectItemOnTab"
                     OnOpen="@( () => IsComboBoxOpen = true )"
                     OnClose="@( () => IsComboBoxOpen = false )"
                     Placeholder="Select an item..."
                     ClearButton="true"
                     Width="200px">
        <ComboBoxSettings>
            <ComboBoxPopupSettings Class="select-on-tab" />
        </ComboBoxSettings>
    </TelerikComboBox>
</span>

<input placeholder="another form element" />

@code {
    private IEnumerable<ListItem> ComboBoxData = Enumerable.Range(1, 123).Select(x => new ListItem { Text = "Item " + x, Value = x });

    private int ComboBoxValue { get; set; }

    private string FirstFilteredItem { get; set; } = string.Empty;

    private bool IsComboBoxOpen { get; set; }

    private async Task GetFirstFilteredItem(KeyboardEventArgs args)
    {
        if (!IsComboBoxOpen)
        {
            // Wait at least 300ms, which is the opening animation.
            await Task.Delay(400);
        }
        else
        {
            // Wait, depending on the typical filtering time.
            await Task.Delay(300);
        }

        // The code that will find the item text depends on the exact scenario and potential use of ItemTemplate.
        FirstFilteredItem = await js.InvokeAsync<string>("getHighligtedComboItem");
    }

    private void SelectItemOnTab()
    {
        if (!string.IsNullOrEmpty(FirstFilteredItem))
        {
            // Match the filter operation to the filter operator of the ComboBox.
            var matchingItem = ComboBoxData.Where(x => x.Text.ToLowerInvariant().Contains(FirstFilteredItem.Trim().ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                ComboBoxValue = matchingItem.Value;
                FirstFilteredItem = string.Empty;
            }
        }
    }

    private void ComboBoxValueChanged(int newValue)
    {
        ComboBoxValue = newValue;
        FirstFilteredItem = string.Empty;
    }

    public class ListItem
    {
        public int Value { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

 

Duplicated Items
4 comments
ADMIN
Dimo
Posted on: 05 Mar 2024 12:10

Hi Ben,

I discussed this feature request with the product owner and we will try to fit it later in 2024.

Most likely, we will introduce a feature, that renders the first matched item in the ComboBox <input />, so that it's clear to the user what the next component value will be on tab. See this ASP.NET Core ComboBox demo, which shows the behavior.

Please treat the above timing statement as preliminary. The only official source of truth about the scheduling and implementation is the status label on this page.

On a side note, our DropDownList provides a closer similarity with native functionality (HTML <select>). Currently, the DropDownList also changes its Value when the user opens the dropdown and presses a key that matches the first character of an item. The downside is that this algorithm assumes that DropDownList filtering is disabled, which may not be the case in your app.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Ben
Posted on: 28 Feb 2024 19:40

Hello Dimo,

Thanks for the response and for the correction.

I would be more than happy for the control to match native behaviour on each target platform. It's hard for me to argue convincingly to my customers that they should retrain their experienced keyboard operators because we chose a third-party control which does not behave as they expect.

I would really appreciate any insight into timescales for implementation - are we looking at weeks, months, years for implementation? I don't have the luxury of telling my customers that we will be waiting indefinitely for Telerik to schedule the fix.

I disagree with the statement that this is an enhancement since commit-on-tab is present in the native dropdown control that the Telerik control replaces, therefore it is a loss of functionality. I also note that pressing "tab" works as expected in the "Paragraph" font picker dropdown at the top of this comment form! (that dropdown is a Kendo dropdown, and therefore this is also a loss of functionality compared to Telerik's own Kendo suite).

Thanks,
Ben

ADMIN
Dimo
Posted on: 28 Feb 2024 17:00

Hello Ben,

For the sake of correctness, I should mention that Macs don't select dropdown values on Tab. They require the user to hit Enter first.

On the other hand, I agree that the requested feature is nice to have, especially for fast or advanced keyboard users. When we schedule the enhancement for implementation, its status will change.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Ben
Posted on: 22 Feb 2024 15:31

Have had exactly the same feedback from our customers - committing a combobox selection on pressing tab is standard behaviour on all platforms, and it's absence is frustrating for their users.

This has been open for a long time and is still unplanned - is there any update from Telerik?