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

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

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.

When i search for something by typing in combobox, i want to be able to use the keyboard to make my selection

Exable below, if i press b, I want to be able to either select baseboll by pressing enter, or make another selection by using arrow keys and then enter. 

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

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. 

Issue - Setting the selected element of a combo box inside a form worked in 2.22.0 and no longer works in 2.23.0 

Repo - https://github.com/benhysell/BlazorGridPagingIssue

Steps to Reproduce 

• In the test repo start the application and navigate to https://localhost:5001/updateWeather
• The selected value in the combo box should be the 8th value, "summary 8"
• Stop the application, in BlazorGrid.Client.csproj 
  • Replace <PackageReference Include="Telerik.UI.for.Blazor" Version="2.22.0" />
  • With <PackageReference Include="Telerik.UI.for.Blazor" Version="2.23.0" />
• Do a clean/rebuild to ensure the latest version of Telerik Blazor is being used
• Run the application in a new incognito window and navigate back to https://localhost:5001/updateWeather, notice how nothing is selected in the combo box

Details

This is a contrived example pulled out of a larger application.  Almost all of our combo boxes are backed by OData calls.  When we 'create or POST' an element the first time we load the form we have the combo box make an OData call to retrieve the top 200 elements.  On a subsequent 'edit or PUT', where we have a thing we want to update we first go get the thing we want to work with, and then fill in the comobo box with that element.

In this example application we simulate this load by deciding if a value was passed in or not for the combo box.  https://localhost:5001/updateWeather always passes in an 8 to load the 8th element.  https://localhost:5001/createWeather does not pass in any value, leaving the form value unbound.

This all worked as expected in 2.22.0, however once we upgraded to 2.23.0 we could no longer set the value of the combo box on load when combined with an OData call.

A ComboBox is databound via OnRead. It has an initial value, but no data arrives after the first OnRead call. We call Rebind() to fetch data and then it populates, but the component value doesn't show.

Click the button. The ComboBox should show its initial value, but doesn't. A similar scenario worked until version 2.30, when there was no Rebind(), but we set Data directly.

The workaround is to set raise a flag in OnRead and set the value in OnAfterRenderAsync.

@using Telerik.DataSource.Extensions

<TelerikButton OnClick="@BindCombo">Rebind Combo</TelerikButton>

<TelerikComboBox TItem="@ComboItem"
                 TValue="int"
                 @ref="@ComboRef"
                 TextField="Text"
                 ValueField="Id"
                 OnRead="OnComboRead"
                 Width="200px"
                 @bind-Value="@ComboValue">
</TelerikComboBox>

@code {
    string FilterValue { get; set; } = "A";
    int ComboValue { get; set; } = 2;
    bool BindFlag { get; set; }
    bool ShouldResetValue { get; set; }
    IEnumerable<ComboItem> LegacyComboData { get; set; }

    TelerikComboBox<ComboItem, int> ComboRef { get; set; }

    void BindCombo()
    {
        BindFlag = true;
        ComboRef.Rebind();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldResetValue)
        {
            // comment out the initially set value above to make the following line work
            ComboValue = 2;
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    async Task OnComboRead(ComboBoxReadEventArgs args)
    {
        if (BindFlag)
        {
            var service = new MyService();

            var data = await service.GetComboItem(FilterValue);
            var result = await data.ToDataSourceResultAsync(args.Request);

            args.Data = result.Data;

            //ShouldResetValue = true;
        }
    }

    public class ComboItem
    {
        public int Id { get; set; }
        public string Code { get; set; }
        public string Text { get; set; }
    }

    public class MyService
    {
        public async Task<IEnumerable<ComboItem>> GetComboItem(string code)
        {
            await Task.Delay(300);

            var data = new[]
            {
                    new ComboItem{ Id = 1, Code = "A", Text = "ValueA1" },
                    new ComboItem{ Id = 2, Code = "A", Text = "ValueA2" },
                    new ComboItem{ Id = 3, Code = "A", Text = "ValueA3" },
                    new ComboItem{ Id = 4, Code = "B", Text = "ValueB4" },
                    new ComboItem{ Id = 5, Code = "B", Text = "ValueB5" },
                    new ComboItem{ Id = 6, Code = "B", Text = "ValueB6" },
                    new ComboItem{ Id = 7, Code = "C", Text = "ValueC7" },
                    new ComboItem{ Id = 8, Code = "C", Text = "ValueC8" },
                    new ComboItem{ Id = 9, Code = "C", Text = "ValueC9" },
                };

            return data.Where(x => x.Code == code).ToList();
        }
    }
}

Thanks for adding more new controls to Blazor. That help us to move to it from ASPX AJAX.

Can we have the Multi-Column ComboBox, like the ASPX AJAX that one, please?

https://www.telerik.com/products/aspnet-ajax/ajax-multicolumncombobox.aspx

Hello, I would like to have a mutiselect dropdown like you have for ajax:

https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx

Syncfusion and radzen have this support for blazor :

https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox?theme=bootstrap5

https://blazor.radzen.com/dropdown

I know that you have a proposed solution for the MultiSelect component:

CheckBox in Multiselect

But the design of this one is not what I'm after, the box still expands downwards when selecting multiple items and it makes it hard to design a coherent page that does not make the dom "jump around". Also the implementation is cumbersome for more complex objects .

It would be better with a solution like you have for ajax where it just shows the first items that fits and then "+X items".

The ComboBox will not display an initial selected item, if the value is equal to the type's default. Applies to integers, guids, etc.

This used to work until version 2.30.

Here is a REPL test page.

If the value type is nullable, a zero int value will work for initial item selection.

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?

When I select an item from the combo box dropdown, the OnChange event fires with the new value, but the model field is not updated yet.

@selectedValue

<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                 @bind-Value="@selectedValue"  OnChange="@MyOnChangeHandler">
</TelerikComboBox>

@code {
    int selectedValue { get; set; }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
    
    private void MyOnChangeHandler(object theUserInput)
    {
        Console.WriteLine($"COMBO: the models is now {selectedValue} and the handler received {theUserInput}");
    }

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

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

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

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.

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.