Duplicated
Last Updated: 22 Jun 2023 13:14 by Anthony
James
Created on: 25 Mar 2023 18:01
Category: UI for Blazor
Type: Bug Report
0
combobox select item on tab

We have had major complaints from users when using the combo box.  They use the filter, see the first item highlighted, then click tab and the item in not selected.  They do a lot of data entry and don't want to use the mouse or use the down arrow to select it.  They are used to a regular HTML select control which works that way.  Is there any Javascript workaround for this?  If not, I probably have to go back to using a standard select box.  The reason I am using the combobox and not the dropdown is because your dropdown doesn't support tabbing out of the box and that was a deal breaker for them.

I saw an article on using the PopupClass for the ComboBox but that isn't a supported property.

Thanks!

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
4 comments
Anthony
Posted on: 22 Jun 2023 13:14

This took me a minute to figure out. I figure I would pass it on.

For those of you looking to do this in a grid component. Don't use the OnBlur event on the combobox. Put the Test() code in the OnUpdate event for the grid component. Like below.

 

    private async Task OnUpdateEventHandler(GridCommandEventArgs args)
    {
        var context = (YourModel)args.Item;
        var record = YourGridList.FirstOrDefault(x => x.id == context.id);
        if (record != null)
        {
            switch (args.Field)
            {
                case nameof(YourModel.ColumnName):
                {
                        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 = YourComboboxList.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
                            if (matchingItem != null)
                            {
                                record.Value = matchingItem.MyValueField;

                            }
                        }

                        break;
                }
            }
        }
    }

James
Posted on: 31 Mar 2023 20:06
The latest code you send me worked. Thanks so much!
ADMIN
Hristian Stefanov
Posted on: 31 Mar 2023 15:40

Hi James,

Regarding the desired functionality, we already have a public item: Automatically select first item on losing focus when the dropdown is open. It is a valid feature that is currently missing.

That said, I'm marking this item as a "Duplicate" of the one in the above link.

In the meantime, here is a workaround without the PopupClass (for newer versions) you can use:

@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-focus");
        if (selItemElem) {
            return selItemElem.innerText;
        }
    }
</script>

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test"
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue"
                 Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
    <ComboBoxSettings>
        <ComboBoxPopupSettings Class="special-combobox" />
    </ComboBoxSettings>
</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; }
    }
}

Let me know if I'm missing something or if you find difficulties with the above code.

Regards,
Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

James
Posted on: 31 Mar 2023 15:35
This doesn't exist on the comboBox Control: 
PopupClass