Steps to reproduce:

1. Open the Edit in Telerik REPL link from the demo page for DropDownList - Grouping.
2. Add Filterable="true" to TelerikDropDownList.
3. Run.
4. Open the dropdown.
5. Type in for instance the last item of the list "Röd Kaviar", that belongs to the category "Seafood".

Expected: the group name should change to "Seafood".

Actual: the group name is still "Beverages".

TlerikDropDownList keyboard navigation works differently from native html select.

In case we have a list with many similar options, for example:
011
021
211
....
In this case with native html select I can type 02 to select 021, but with TlerikDropDownList this would select 211.

If you type swiftly multiple printable characters, the DropDownList keyboard navigation will react only to the first character.

Hi!

When i use combination of LINQ inside TelerikDropDownLists Data attribute and TelerikGrid 's GridEditMode.Popup mode, i get weird behavior when i try to select an item from TelerikDropDownLists - everything freezes. Please check the solution. Everything works fine if i don't use LINQ or GridEditMode.Popup mode.

Thank you!

Using DropDownList with Filter enabled will lost track of Focus when an item from dropdown is selected or tabbing away from filter input.

Steps to reproduce:

1. Open a DropDownList with filter enabled
2. Press TAB

Expected Behavior:

Focus in the next focusable element

Actual Behavior:

Focus is lost, and will go to the browser buttons

It is possible to reproduce in the demos:

https://demos.telerik.com/blazor-ui/dropdownlist/filtering

When using the grouped DropDownList and performing a search for a specific element, the DropDownList incorrectly displays the initially shown group instead of the group containing the searched element.

The DropDownList remains open after tabbing and does not fire. It also won't fire OnBlur and OnChange in this case. The problem occurs only if the component was opened by clicking exactly on its arrow.

Here is a test page: https://blazorrepl.telerik.com/cxEfFVPq042owTt616

The workaround is to wrap the component in a <span> that handles @onfocusout and closes the component programmatically: https://blazorrepl.telerik.com/cnafPCYL21aT3fpD05

The drop down list component does not allow the user to associate a label with the underlying html select input control, which goes against accessibility standards. It appears that most, if not all, of the other components follow the accessibility standards. Please fix the drop down list and/or allow attribute splatting so that developers can apply their own attributes (like aria-label) to meet accessibility standards.

The DropDownList triggers exceptions if there are no items in the dropdown and one tries to use keyboard navigation:

• up/down arrows to change the selected item, no matter if the component is open or not
• Enter after filtering for non-existent item

Here is a test page. A possible workaround is to set DefautText, so that the dropdown always contains at least one  item.

Open and press Enter, Up or Down:

<TelerikDropDownList Data="@( new List<string>() )"
                     @bind-Value="@SelectedValue"
                     TItem="string"
                     TValue="string"
                     Width="200px" />

<br /><br />

Open, filter by something non-existent and press Enter, Up or Down:

<TelerikDropDownList Data="@DropDownData"
                     @bind-Value="@SelectedValue"
                     TItem="string"
                     TValue="string"
                     Filterable="true"
                     Width="200px" />

@code {
    string SelectedValue { get; set; }

    List<string> DropDownData = new List<string>()
    {
        "foo",
        "bar",
        "baz"
    };
}

---

ADMIN EDIT

Here is a reproducible with the workaround highlighted in green:

@using System.Collections.ObjectModel

<h4>Option Selected: 6 @selectedSix</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSix" />

<h4>Option Selected: 7 @selectedSeven</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSeven">
</TelerikDropDownList>

<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>

<ul>
    @foreach (var item in myDdlData)
    {
        <li>@item.MyValueField</li>
    }
</ul>

@code {
    int selectedSix { get; set; } = 6;
    int selectedSeven { get; set; } = 7;

    ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));

    protected override async Task OnInitializedAsync()
    {
        AddOption();

        await Task.Delay(TimeSpan.FromSeconds(1));

        AddOption();
    }

    void AddOption()
    {
        myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });

        int origSelection = selectedSeven;
        selectedSeven = 0;
        StateHasChanged();
        //add this if it does not work
        //await Task.Delay(30);//wait a rendering frame
        selectedSeven = origSelection;
        //add this if it does not work
        //StateHasChanged();
    }

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

Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.

---

The following knowledge base article describes how to select the default value in a drop down, but if there's no default value the selection is not cleared using this method.

https://docs.telerik.com/blazor-ui/knowledge-base/inputs-clear-selection-value?_ga=2.18517947.380379649.1635269411-1661447875.1621547203

When setting the bind value to null (or the default, or frankly anything that doesn't exist in the drop down) I'd like the drop down list selection to be cleared when there's no default value set on the DropDownList.

@page "/"

<br />

<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />

@code {
    List<string> data = new() { "selection" };
    string selectedValue;

    void ClearSelection()
    {
        // This does not cause the drop down to clear the selection and I think it should.
        selectedValue = null;
    }
}

The first element of the dropdown gets read aloud at page load even without being focused.

Using the latest version of (Chrome and Chromevox) and (Firefox and NVDA).

DropdownList does not work very well with a screen reader.

It should work like this one https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html

Using NVDA and Firefox, it reads the selected item 3 times, sometimes does not work at all (This is only when you open the dropdown using alt plus down arrow). Using just the arrow up and down keys does not work.

Using Cromevox and ChromeOn the dropdowns, it does not give a description of how many options are available like, "1 of 4" when you first tab to it. It reads it after I already selected the first option. That should be reversed, read the options first and not after its selected (This is only when you open the dropdown using alt plus down arrow). Using only the arrow key up and down it reads the selected item only but does not reads the other options.

I have a cascading DropDownList scenario with virtual scrolling. When the first DropDownList changes value, the second one should reset its scrollbar to the top, because it now contains new data. This doesn't happen.

Here is a REPL test page.

===

ADMIN EDIT

===

As a workaround for the time being, you may track when the value is changed in the parent DropDownList to dispose and re-initialize the child DropDownList.

Here is an example: https://blazorrepl.telerik.com/mdafHabk585ZtzyV54.

Hello,

If I scroll the page down and open a filterable DropDownList, the page will scroll up.

Here is a REPL test page

UI for Blazor 2.30 works as expected. This broke in version 3.0.0. The issue exists only in WebAssembly apps.

---

ADMIN EDIT

This behavior is observed in the DropDownList when filtering is enabled and in the ComboBox regardless of whether filtering is enabled or not.

The (filter) input gets focus, which shows the soft keyboard, which changes the viewport size, which causes the dropdown to hide. Unfortunately, there is no workaround at the moment (except perhaps disabling filtering for small viewports).

---