If the ComboBox Value is set during initialization and the ValueMapper executes too fast and before the component has rendered, its Value doesn't show.

The problem also occurs in the MultiColumnComboBox.

Possible workarounds:

• Set the component Value a bit later.
• Delay the ValueMapper execution until OnAfterRenderAsync fires.
• Rebind() the ComboBox in OnAfterRenderAsync. This will fire OnRead again.
• Render the ComboBox conditionally in the first OnAfterRenderAsync call.

To reproduce:

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

<p>ComboBox Value: @ComboBoxValue</p>

<TelerikComboBox ItemHeight="30"
                 OnRead="@OnComboBoxRead"
                 PageSize="20"
                 ScrollMode="@DropDownScrollMode.Virtual"
                 TItem="@ListItem"
                 TValue="@(int?)"
                 @bind-Value="@ComboBoxValue"
                 ValueMapper="@ComboBoxValueMapper"
                 Width="240px" />

@code {
    private List<ListItem>? ComboBoxData { get; set; }

    private int? ComboBoxValue { get; set; } = 3;

    private async Task OnComboBoxRead(ReadEventArgs args)
    {
        DataSourceResult result = await ComboBoxData.ToDataSourceResultAsync(args.Request);

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

    private async Task<ListItem?> ComboBoxValueMapper(int? selectValue)
    {
        // Triggers the bug
        await Task.Yield();

        ListItem? result = ComboBoxData?.FirstOrDefault(x => selectValue == x.Value);

        return result;
    }

    protected override void OnInitialized()
    {
        ComboBoxData = Enumerable
            .Range(1, 1234)
            .Select(x => new ListItem()
                {
                    Value = x,
                    Text = $"Item {x}"
                })
            .ToList();
    }

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

I want to capture the user selection (which has to happen through ValueChanged, as OnChange does not fire when I need it). At this point I want to use the selection from the user and to clear the combo box.

I would expect that this should work but it does not:

@result
<br />
from model: @MyItem
<br />
<br />
<TelerikComboBox Data="@MyList" Value="@MyItem" ValueChanged="@( (string v) => MyValueChangeHandler(v) )" Placeholder="Choose something">
</TelerikComboBox>

@code {
    string result;
    private async Task MyValueChangeHandler(string theUserChoice)
    {
        result = string.Format("The user chose: {0}", theUserChoice);

        MyItem = null; // this should be enough

    }
    protected List<string> MyList = new List<string>() { "first", "second", "third" };
    protected string MyItem { get; set; } = "second";
}

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

---

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"

If my browser culture is set to Swedish, I can no longer tab through multiple ComboBoxes.

<AdminEdit>

You can manually add the TabIndex parameter to each ComboBox and set their values to non-negative integers.

</AdminEdit>

I would like the ability to flag elements in a data bound combo that are no longer available as disabled and not selectable.  Had they been previously selected, they still need to show, but should not allow a user to select it again.

I would like a property that can be set when databinding a combo.

For instance when you set the Data, TextField, & ValueField properties, can there also be one for SelectableField (or something) - this could be mapped to a Boolean in the dataset.

If this property isn't used then it defaults to yes (ie they are all selectable), but if it is used, then any items which have this field set to 'no' then they show as a different color (could just be grey) but are not selectable by the user.

If they had previously been selected (prior to being marked as no longer available) then they should show when the record is loaded, but otherwise they are not selectable.

I don't particularly want to write code on click to see if its enabled and then unselect it, I would prefer it to simply be built into the base control.

Is this possible?  Or is there another property already there that does this?

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 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.

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

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.

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

Hi,

There's a bug in TelerikComboBox. If you have ScrollMode.Virtual enabled, together with ShowClearButton enabled you can end up in a state where "No data" is shown after opening the drop down.

Steps to reproduce.

- Use a TelerikComboBox in your view. 

- Assign its Data Parameter a List containing 1000 items. Set PageSize paramter to 10.

- Open the ComboBox list, scroll to bottom and select an item.

- Press the ClearButton to deselect the item.

- Preform an action that resizes the List passed to the Data parameter to 10 items.

- Open the ComboBox list again, not it will sais No data instead of showing the 10 items.

As far as i can tell this happens because Skip property (TelerikSelectBase) is not reset in the ResetValue() method.

This does not happen when you manually clear the field, becouse that calls ChangeValue, wich in turn calls Filter(), and filter does this:

if (IsVirtualScrollable)
{
         Skip = 0;
}

Hello Telerik team,

I recently noticed a bug in the TelerikComboBox component. The TelerikDropDownList component is affected in the same way, however. I created the following REPL to demonstrate this: https://blazorrepl.telerik.com/wKamcLaN08Q5Ntu600

If these two components have data and you select an entry, the focus gets reset to the component and you can use the Tab key to navigate to the next element:

If there is no data and you click on the dropdown, it closes, but the focus is lost. Since the components are used in a modal window here, the user can even escape the focus trap this way:

Regards,
Alex

Bug report

Reproduction of the problem

1. Run this example: https://blazorrepl.telerik.com/cqknbdvw00QmDg6q14
2. Focus the ComboBox
3. Press Esc key

Current behavior

The ComboBox value is cleared.

Expected/desired behavior

The ComboBox value remains.

Environment

• Telerik version: 13.0.0
• Browser: [all ]