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

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

Hi,

Is it possible to implement search/look-ahead in the current version of the DropDown component? If not, will you be adding this feature soon?

Thank you.

Ben

I need to be able to allow our users to tab into the dropdownlist control and open it with enter (similar to standard HTML select).

Here is also a sample from the W3 documentation to compare against: DropDownList keyboard support.

Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.

But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.

My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.

Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.

***Admin Edit***

Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings

***Admin Edit***

This will allow the dropdown to be large enough to fit a reasonable number of items without a scrollbar. Alternatively, you could limit it through a pixel value you can set, or through the MaxPopupHeight property if it gets implemented: https://feedback.telerik.com/blazor/1412653-maxpopupheight.

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

Hello everyone,

We have opened this Feature Request to gather your insights on the addition of disabled items for the DropDownList.

For the time being, you can make items look disabled via DropDownListItemTemplate. Also, prevent clicks with @onclick and use the ValueChanged event to skip disabled items during keyboard navigation.

UPDATE: The associated built-in feature is the OnItemRender event, which can help style specific items without a template.

<TelerikDropDownList Data="@Products"
                     TItem="@Product"                     
                     TValue="@(int?)"
                     Value="@SelectedProductId"
                     ValueField="@nameof(Product.Id)"
                     TextField="@nameof(Product.Name)"
                     DefaultText="Select Product..."
                     ValueChanged="@( (int? newValue) => SelectedProductChanged(newValue) )"
                     Width="200px">
    <DropDownListSettings>
        <DropDownListPopupSettings Class="disabled-items" />
    </DropDownListSettings>
    <ItemTemplate>
        @{ var p = context as Product; }
        <div class="item-div @( !p.Active ? "disabled" : "" )"
             @onclick:preventDefault="@(!p.Active)"
             @onclick:stopPropagation="@(!p.Active)">
            @p.Name
        </div>
    </ItemTemplate>
</TelerikDropDownList>

<style>
    /* remove default item padding to prevent selection outside the template div */
    .disabled-items .k-list-item {
        padding: 0;
    }
    /* add back inner padding */
    .disabled-items .item-div {
        padding: 4px 8px;
    }
    /* style disabled items */
    .disabled-items .disabled {
        cursor: not-allowed;
        width: 100%;
        color: #ccc;
    }
</style>

@code {
    private List<Product> Products { get; set; }

    private int? SelectedProductId { get; set; }

    private async Task SelectedProductChanged(int? newValue)
    {
        var newProduct = Products.FirstOrDefault(x => x.Id == newValue);

        if (newProduct?.Active == true || !newValue.HasValue)
        {
            // select only active items or DefaultText
            SelectedProductId = newValue;
        }
        else
        {
            // skip disabled items during keyboard navigation
            var oldProductIndex = Products.FindIndex(x => x.Id == SelectedProductId);
            var newProductIndex = Products.FindIndex(x => x.Id == newValue);

            if (newProductIndex > oldProductIndex)
            {
                // skip forward
                SelectedProductId = Products[++newProductIndex].Id;
            }
            else
            {
                // skip backward
                SelectedProductId = Products[--newProductIndex].Id;
            }
        }
    }

    protected override void OnInitialized()
    {
        Products = new List<Product>();

        for (int i = 1; i <= 7; i++)
        {
            var active = i % 3 != 0;

            Products.Add(new Product()
            {
                Id = i,
                Name = (active ? "" : "Disabled ") + "Product " + i,
                Active = active
            });
        }

        base.OnInitialized();
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool Active { get; set; }
    }
}

Is it possible to drop dropDownList from outside, for example after its data has been changed, without clicking on it ?

ADMIN EDIT:

This feature is also applicable to ComboBox, AutoComplete, Multiselect, Date and Time Pickers components.

Hello,

would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?

Thanks

---

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.