Unplanned
Last Updated: 05 Mar 2024 12:10 by ADMIN
Barry
Created on: 07 May 2021 06:19
Category: ComboBox
Type: Feature Request
27
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:

 

@inject IJSRuntime _js

@* Move this script to a proper place in your project, the suppress-error hack is to keep it here in the component for easy copy-paste *@
<script suppress-error="BL9992">
    function getComboHighligtedItem() {
        // gets the currently focused item in this particular combobox
        var selItemElem = document.querySelector(".special-combobox .k-item.k-state-focused");
        if (selItemElem) {
            return selItemElem.innerText;
        }
    }
</script>

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test" PopupClass="special-combobox"
                 
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue" 
                    Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
</TelerikComboBox>

<input placeholder="other form elements" />

@code {
    async Task Test()
    {
        string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
        Console.WriteLine("--------------");
        Console.WriteLine(currInput);
        Console.WriteLine("--------------");
        // note - this relies on the item template of the combo rendering the text, or not being used at all
        // if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
        if (!string.IsNullOrEmpty(currInput))
        {
            // match the filter operation to the filter operator of the combo box - Contains in this sample
            var matchingItem = myComboData.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                selectedValue = matchingItem.MyValueField;
            }
        }

    }
   
    // just dummy data follows

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

 

---

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?