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;
    }
}

An open ComboBox will not close when the user tabs out of it when the ComboBox is the last component on the page. Here is a test example: Creating Blazor ComboBox

If there is another component after the ComboBo, then tabbing out works correctly.

Reproduction: https://blazorrepl.telerik.com/cHbFYUFq53Ext4Yt24.

Steps to reproduce:

1. Open popup.
2. Use the keyboard to navigate to the first item.
3. Type "1", so the input value is "item11" (a value that matches an item from the list) -> ValueChanged is not fired.
4. Type "1" again, so the input value is "item111" (this is a custom value not present in the list) -> ValueChanged is fired.
5. Delete the last "1", so the input value is again "item11"(a value that matches an item from the list) -> ValueChanged is not fired.

I'd like to report a bug with the Telerik combo box opening animation.

The problem can be reproduced on your page https://demos.telerik.com/blazor-ui/combobox/templates

Reproduction steps

1. Open page https://demos.telerik.com/blazor-ui/combobox/templates
2. Change the window to restored mode
3. Open the Product combo box and observe that the popup animation works as expected
4. Resize the window slightly vertically
5. Open the Product combo box
6. Observe that the combo box popup animation starts in the wrong place

This issue is 100% reproduceable every time and also can be reproduce if the popup is opened and the window is maximized.

Please see the attached video from about 15 to 25 seconds. Note that I reproduce the issue in the video a couple of times however due to the quality of it you can only see the incorrect animation between 15 to 25 seconds.

I hope the information helps.

The tablet that I am using is slightly wider than the medium breakpoints set in AdaptiveMode.Auto. However, I still want to show the action sheet. I'd like to be able to configure the breakpoints which are currently hard-coded.

===

ADMIN EDIT

===

The request is opened for ComboBox but it also targets other selects and pickers that have AdaptiveMode feature. For example, DropDownList, MultiSelect, DatePicker and more.

Hello,

 iam found "strange" behaviour compared to previous versions in combobox, with custom paging, filtering, valuemapper.

"simple description":
- Do not call OnRead and ValueMapper AFTER clicking/selecting the ITEM in any case(after filtering, or after scrolling...). Do it same way as selecting WITHOUT prior filtering.

Complex test

A sample for testing is here(and comments inside):
https://blazorrepl.telerik.com/GGPwalvk09g228sm32

How to reproduce:

1 - start = value is PREselected - OK
2 - clear the combobox - OK
2 - input value 40  - slowly do not rush, number by number - OK
3- wait 2 seconds and Click/select item ("Name 401" etc) - NOK
observe the events fired(Exception/info: time - indicates that OnRead was fired again) 

Repeat the same WITHOUT filtering, just scrolling
observe the events fired = looks ok (Exception/info: time)

When selecting item by CLICKING on it(after filtering) looks like those events are fired:
- ValueMapper (why?)
- OnRead again(why again?)
- bind value (ok)
and sometimes ValueMapper again
it depends of "timing"

expected:
When selecting item by CLICKING on it:
- BIND the value. Everything is in there(no reason to call OnRead or ValueMapper)

Related, unexpected(video attachment):
Also when working in "real" scenario, AFTER clicking on item AFTER filtering, it returns full MODEL assembly path into to input filed, instead of clicked item
Lets have a list: {Name of the item,Another item,Next item}
entere in combobox/filter "name", results are shown ok, clicked on one and result shuld be ("Name of the item"), after clicking it returns "base model class name"
ie: "inwApp1.Pages.prozam.crm.EdcrmOrg+BaseKeyModel" - you dont want to see this :) .

There is different event orders for those 2 scenarios(it should be the same for both as at point 1) ):
1) when SELECTing item without filtering(just moving with scrollbar down to value 401 (only with onread and virtual paging)) = OK
2) when filtering by value "40" and SELECTing item by clicking on it - NOT OK = it look like this causes the problems and subsequent event calls

Is there any workaround, or new "property" to set? Thanks

When the user selects a value and then focuses on another component the OnBlur of the ComboBox is not triggered. The issue is reproducible in the Firefox browser (tested with version 109.0).

To reproduce the issue open the following REPL example in the Firefox browser:
https://blazorrepl.telerik.com/mdklmHYN06lVQjyL26

Select a value in the first ComboBox and then focus on the second ComboBox. The OnBlur event should trigger.

If the AllowCustom parameter is set to true and the OnChange fires during the data load, the value in the OnChange handler is null. Press Enter before the data load ends and the OnChange handler will give null instead of the current input value.

If I enter a text and press enter when there are no items (yet), I expect it to call the OnChange with that text. Even with a static list of zero items (replace 'Read=' with 'Data=' en provide a new List<>()), the OnChange is passed a null value.

If the OnChange fires before the empty dropdown get opened, it passes a null value, if it fires after the empty dropdown opens, it passes the entered text. That doesn't sound logical to me. Why needs the (empty) dropdown to be open before the data gets passed? And if that is necessary, why gets the OnChange fired before the dropdown is opened, and doesn't wait till it is open and then fire with the entered data?

I would like to use an event that fires only when the user clicks on an item from the dropdown. 

=====

ADMIT EDIT:

Here is a possible way to achieve this now:

<TelerikComboBox @bind-Value=@SelectedValue
                 Data="@ComboBoxData"
                 ValueField="ProductId"
                 TextField="ProductName">
    <ItemTemplate>
        @{
            var currentItem = context as Product;

            <div onclick="@(() => OnClickHandler(currentItem))" style="width:100%">
                @currentItem.ProductName
            </div>
        }
    </ItemTemplate>
</TelerikComboBox>

@code {
    private void OnClickHandler(Product item)
    {
        //the application logic here
    }

    public IEnumerable<Product> ComboBoxData { get; set; }
    public int SelectedValue { get; set; } = 2;

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 1; i < 10; i++)
        {
            products.Add(new Product()
                {
                    ProductId = i,
                    ProductName = $"Product {i}",
                    UnitPrice = (decimal)(i * 3.14)
                });
        }

        ComboBoxData = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public decimal UnitPrice { get; set; }
    }
}

I have a ComboBox that allows me to select different entities that I want to edit data for.  Some of this data involves selecting other options from ComboBoxes.  When I type in my cascading filterable ComboBox to select an item, its value changes accordingly, but when I change the entity I'm editing, that ComboBox doesn't display the selected value, even though there is a selected value present.

Reproduction: https://blazorrepl.telerik.com/GGYgmlFA45guzWlg06.

Steps to reproduce:

1. Run the snippet - selected Person is Adam
2. Start typing "Green" in the Fav Colour ComboBox
3. Press Enter to select it
4. Change the Person to John
5. Fav Colour appears empty while it should display "Yellow"

Description

When the user types a value in the input and wishes to navigate to the beginning or end (by pressing Home/End buttons) of the input to make a correction, a value from the popup is actually selected and the value in the input is overridden.

Reproduction

1. Create a ComboBox and enable filtering.

2. Start typing in the input. Popup is opened.

3 Try to navigate in the input via the Home/End buttons. A value from the popup is selected that overrides the value in the input. 

Hi Telerik Team,

One of the requirements for my team project is that the ComboBox needs to be sorted in descending order to list dates. We need to sort the groups and the options inside the groups.

Ideally, the ComboBox can have a SortDirection parameter that defines the order as SortAscending or SortDescending, and can display the ComboBox groups and options accordingly.

===

Admin Edit:

It would be useful if you could disable the default sorting of the groups as well.

Hi

I have an TelerikComboBox for selecting a "site". I use Filterable + FilterOperator (StringFilterOperator.Contains). The "Data" contains almost 2500 sites.



So, my problem is that it is slow when start writing in the combobox. I know for auto-complete you can choose to have a minimum characters before filtering kicks in (MinLength parameter), can you achieve that somehow? Or is it any other way of speeding up the search?



Regards

Emanuel

---

ADMIN EDIT

For the time being, you can see how to achieve that through the OnRead event: https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread

---

Would be fine if when you click on a filterable combobox the whole text in it will be selected, so you can click and start digit new text filter without delete the old text before.

---

ADMIN EDIT

This should probably be behind a flag to keep the original behavior.

At the moment, you can achieve it with a bit of JS to focus and select all the text:

    <script>
        function selectAllText(parentElem) {
            let input = parentElem.querySelector(".k-input");
            if (input && input.focus) {
                input.select();
            }
        }
    </script>

Which you can call with the approach from this article:

@inject IJSRuntime _js

@SelectedValue
<br />

<span @onfocusin="@SelectAllText" @ref="@spanRef">
    <TelerikComboBox Data="@Data"
                     Filterable="true" FilterOperator="@StringFilterOperator.Contains"
                     Placeholder="Find product by typing part of its name"
                     @bind-Value="@SelectedValue" 
                     TextField="ProductName" ValueField="ProductName" AllowCustom="true">
    </TelerikComboBox>
</span>

@code {
    ElementReference spanRef { get; set; }
    async Task SelectAllText()
    {
        await _js.InvokeVoidAsync("selectAllText", spanRef);
    }

    public List<Product> Data { get; set; }
    public string SelectedValue { get; set; }

    protected override void OnInitialized()
    {
        List<Product> products = new List<Product>();
        for (int i = 0; i < 20; i++)
        {
            products.Add(new Product()
            {
                ProductId = i,
                ProductName = $"Product {i}"
            });
        }

        Data = products;
        base.OnInitialized();
    }

    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}

Related to https://docs.telerik.com/blazor-ui/knowledge-base/grid-bind-navigation-property-complex-object

However I'm looking to do this for the Combobox, i.e.

<TelerikComboBox Data="@Users"                               
                                 @bind-Value="@FormElement.UserInitials"
                                 ValueField="Dto.UserInitials"                                 
                                 TextField="Dto.UserInitials"
               >
</TelerikComboBox>

public class Users

{

   //bunch of properties 

   public UserSubProperties Dto {get; set;}

}

public class UserSubProperties

{

   public string UserInitials {get; set;}

}