According to the documentation for the ComboBox, https://www.telerik.com/blazor-ui/documentation/components/combobox/filter, "Filtering looks in the TextField, and the filter is reset when the dropdown closes."

However, if the user starts typing and then either selects an item from the dropdown, the filter persists until the user clears the text box or opens the dropdown and clicks outside of it.

Example steps using the below demo link:

1.) Configure settings:


2.) Type the letter 'h':


3.) Select the first option:

4.) Click dropdown arrow and still see filtered list based on the previously typed filter (anything containing an 'h'):



Reproducible on the demo page: https://demos.telerik.com/blazor-ui/combobox/filtering

The matching problem occurs when a user types to filter input and selects an option from the dropdown, then code changes the bound value. If any code changes the bound value to an item that doesn't match the filter, the display field appears empty instead of showing the newly bound value.

For example: if instead of opening the dropdown during step 4, the user clicked a button that programmatically set the value to "Audi", then the field would show to the user as blank. As demonstrated in the following Repl, it is definitely the filters fault, since typing a filter which includes Audi (ex: 'a') does have the text on the ComboBox change when clicking the button to programmatically update the bound value.

https://blazorrepl.telerik.com/cJapEQGO21LFAeLg53

The ComboBox and MultiComboBox replace the current filter value with the component value during virtual scrolling.

The issue is similar to MultiColumnComboBox and ComboBox remove filtering value after virtual scrolling , but the other issue occurred when there was no current value.

To reproduce:

1. Go to https://demos.telerik.com/blazor-ui/combobox/virtualization
2. Select item Changde
3. Filter by "Ch"
4. Scroll down

Ch will be replaced by Changde.

If custom values are not required, a possible workaround is to use a filterable DropDownList with virtualization.

For the MultiColumnComboBox, the component can use a RowTemplate to simulate multiple columns in the dropdown. You can see a REPL example here.

I want to access runtime the value by which the user filters. 

===ADMIN EDIT===

Use the OnRead event handler to access the filter value:

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikComboBox OnRead="@OnComboBoxRead"
                 TItem="@ListItem"
                 TValue="@int"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Filterable="true"
                 FilterOperator="@StringFilterOperator.Contains"
                 Width="300px">
    <ItemTemplate>
        @HighlightResult(context.Text)
    </ItemTemplate>
</TelerikComboBox>

<style>
    .k-list-item:has(u) {
        gap: 0;
    }
</style>

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;

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

    private async Task OnComboBoxRead(ComboBoxReadEventArgs args)
    {
        ComboBoxFilterValue = args.Request.Filters.Cast<FilterDescriptor>().FirstOrDefault()?.Value.ToString() ?? string.Empty;

        DataSourceResult result = await ListItems.ToDataSourceResultAsync(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
    }

    public MarkupString HighlightResult(string text)
    {
        var result = string.IsNullOrWhiteSpace(ComboBoxFilterValue)
            ? text
            : text.Replace(ComboBoxFilterValue, "<u>" + ComboBoxFilterValue + "</u>", StringComparison.OrdinalIgnoreCase);

        return new MarkupString(result);
    }

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>() {
            new ListItem(1, "Basketball"),
            new ListItem(2, "Golf"),
            new ListItem(3, "Baseball"),
            new ListItem(4, "Table Tennis"),
            new ListItem(5, "Volleyball"),
            new ListItem(6, "Football"),
            new ListItem(7, "Boxing"),
            new ListItem(8, "Badminton"),
            new ListItem(9, "Cycling"),
            new ListItem(10, "Gymnastics"),
            new ListItem(11, "Swimming"),
            new ListItem(12, "Wrestling"),
            new ListItem(13, "Snooker"),
            new ListItem(14, "Skiing"),
            new ListItem(15, "Handball"),
            };

        base.OnInitialized();
    }

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

        public ListItem(int id, string text)
        {
            Id = id;
            Text = text;
        }
    }
}

Please add a way to add, if it is missing in the item list, and set the selected item of a combobox programmatically. This will spare the need to call the remote source and have duplicate data.

Example: if you choose a city from a combobox and the city has all the information about the province, the province combobox should populate with the correct data without needing to call the remote source.

An Implementation of this could be:

public void SetSelectedItem(TItem item)
{
    if (item == null)
    {
        ClearButtonClick();
    }
    else
    {
        ListDataItem clonedItem = CreateDataItem(item.Clone());

        var dataItemToSelect = DataItems.FirstOrDefault(x => x.Value.Equals(clonedItem.Value));
        if (dataItemToSelect == null)
        {
            dataItemToSelect = clonedItem;
            AddCustomValue(dataItemToSelect.Text, dataItemToSelect.Value, dataItemToSelect.DataItem);
        }

        SelectItem(dataItemToSelect);
    }
}

I am using ComboBox and I want to be able to filter by two model properties. To achieve this I have implemented custom filtering through the OnRead event. Additionally, I am ordering the data to first match the results from the one property, which also is used for the TextField, and after that to match the results from the other property. However, when the results are only from the match of the second property, there is no focus.

Here is a REPL example https://blazorrepl.telerik.com/wyaMQhEN108axXJ036 

Steps to reproduce the issue:

Type "a": "Value test - ano" has the focus (the first option in the list)

Type "an": "Value test - ano" receives the focus (the first option in the list)

Type "ano": "Value test - ano" receives the focus (the first option in the list)

Type "anot": no item has focus despite the results being only "Another Value - val"

The problematic behavior appears in this specific scenario:

• AllowCustom="true".
• The input partially matches an item in the list.
• The user presses Enter

In this case, the custom typed value is lost and the component value is the first item in the list matching the input. Thus, the user cannot set their desired custom value.

Reproduction with steps listed inside: https://blazorrepl.telerik.com/GokVlXEW12KGZ36F15.

===

ADMIN EDIT

===

A possible option for the time being:

• Enable filtering.
• Use the OnRead event to get the input value from the filter descriptors and save it.
• In the OnChange event that is triggered on Enter press, set the saved input value to the component.

Here is a basic sample: https://blazorrepl.telerik.com/wourlNOC51FRcNAX54.

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.

When using the OnRead event of the ComboBox there is no way to retrieve the selectedItem because the list of items that is populated is internal.

There are 2 workaround but they are not ideal:

- Saving the list of items returned by the OnRead event into a parallel list and then retrieve the selectedItem from it -> the problem is that there will be 2 identical lists in memory and, if scaled, might cause problems:

CachedSitesList = result.Items;

args.Data = result.Items;
args.Total = (int)result.TotalCount;

- Retrieving the selectedItem by calling the DB using the Id of the item -> the problem is that it's one more request to add to the DB and the performance is going to decrease if scaled, also it seems useless as the item is already present in memory.

We suggest adding a function to return the selectedItem to improve performance and scalability of the component.

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.

===

TELERIK EDIT: A possible workaround is to obtain the typed string in OnChange and check if it is matching an item in the datasource:

https://blazorrepl.telerik.com/QyPEQXkV25A7VFyf50

When the option "AllowCustom" is enabled for a TelerikComboBox and the user types something above a certain speed, typed characters are lost. Here is a GIF showing the problem on the page https://demos.telerik.com/blazor-ui/combobox/custom-values – I typed "123456", but end up with "1246" instead. In between the input field is showing some weird glitching.

Is there a way to have the TelerikComboBox behave normally, as it apparently did in versions prior to 4.3.0? We noticed this behavior only some time after upgrading from version 4.0.1, where everything still works properly.

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.

When the height of the popup is set to 'auto' and it opens upwards, the resizing process causes it to be incorrectly positioned.

# Reproduction:

1. Open this REPL - https://blazorrepl.telerik.com/mHuoPRFk52ienlUt52
2. Shrink the browser so that the ComboBox remains at the bottom of the window: 


3. Type "item 2" in the ComboBox

Description

When selecting a value via the keyboard, the input element is out of sync.

Reproduction (if bug)

1. Create a Combobox and populate it with data.

2. Trigger a change with the keyboard.

3. The value is updated but the input holds the old value and is out of sync.

REPL for reproduction:

https://blazorrepl.telerik.com/GnEnPZun00tsuQEA47

When selecting an item with the Enter key, the value is not displayed in the input field.

1. Open this REPL example
2. Open the ComboBox and navigate with the arrows to any item
3. Hit "Enter" to select the item

The item is selected, but its value is not displayed inside the input field.

===

The issue is also reproducible with the MultiColumnComboBox component.