Completed
Last Updated: 04 May 2022 20:15 by ADMIN
Release 3.3.0
the dropdown options display correctly until some come from a second service call.

The problem is that if the selected option is in the options added later then it does not show it as the selected value.

Example below shows correct function for "6" but incorrect for "7".

---

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.

---

Completed
Last Updated: 29 Apr 2022 09:55 by ADMIN
Release 3.3.0

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

Won't Fix
Last Updated: 01 Apr 2022 15:54 by ADMIN

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

Completed
Last Updated: 01 Apr 2022 10:27 by ADMIN
Release 3.2.0

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.

Unplanned
Last Updated: 22 Mar 2022 15:33 by ADMIN
Created by: Indra
Comments: 2
Category: DropDownList
Type: Bug Report
1

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.

Completed
Last Updated: 28 Feb 2022 10:40 by ADMIN
Release 3.1.0
Created by: Chris
Comments: 0
Category: DropDownList
Type: Bug Report
0

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.

Completed
Last Updated: 22 Jan 2022 10:02 by ADMIN
Release 3.0.0
Created by: Jocelyn
Comments: 3
Category: DropDownList
Type: Bug Report
7

---

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

---

Completed
Last Updated: 05 Jan 2022 12:00 by ADMIN
Release 3.0.0
Created by: Frederic
Comments: 2
Category: DropDownList
Type: Bug Report
8

When used in Bootstrap Grid the DropDownList popup is misaligned on the first open. On a second click, it is aligned.

This behavior is also valid for Combobox and Autocomplete.

Reproduction code:

 

<div class="box">
    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">ComboBox</span>
        </div>
        <div class="col">
            <TelerikComboBox Data="@myComboData" TextField="ComboTextField" ValueField="ComboValueField"
                             @bind-Value="selectedCombo" ClearButton="true" Filterable="true">
            </TelerikComboBox>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">DropDownList</span>
        </div>
        <div class="col">
            <TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField"
                                 @bind-Value="@selectedDropDown">
            </TelerikDropDownList>
        </div>
    </div>

    <div class="row mt-3" style="align-items:center">
        <div class="col-12 col-lg-4">
            <span class="bold">Autocomplete</span>
        </div>
        <div class="col">
            <TelerikAutoComplete Data="@Suggestions" @bind-Value="@AutoCompleteValue"
                                 ClearButton="true" />
        </div>
    </div>
</div>

@code {
    public int selectedDropDown { get; set; }
    public int selectedCombo { get; set; }
    public string AutoCompleteValue { get; set; }

    //ComboBox
    public class ComboModel
    {
        public int ComboValueField { get; set; }
        public string ComboTextField { get; set; }
    }

    IEnumerable<ComboModel> myComboData = Enumerable.Range(1, 20).Select(x => new ComboModel { ComboTextField = "item " + x, ComboValueField = x });

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

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

    //Autocomplete
    List<string> Suggestions { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
    };
}

 

Unplanned
Last Updated: 15 Nov 2021 13:59 by ADMIN
Created by: Denver
Comments: 0
Category: DropDownList
Type: Bug Report
4
On a tablet, when the DropDownList, the MultiSelect or the ComboBox components are clicked, any appearance or disappearance of the tablet keyboard will cause them to display an empty popup.

This only happens if the popup somehow could otherwise overflow the viewport, i.e. only when the DropDownList, the MultiSelect or the ComboBox component are very close to the bottom of the viewport.
Completed
Last Updated: 13 Sep 2021 05:08 by ADMIN
Release 2.27.0
When I use the Chrome Lighthouse (based on the axe accessibility testing tool) to assess the accessibility of the TelerikDropDownList I am getting several issues.
Completed
Last Updated: 13 Sep 2021 05:07 by ADMIN
Release 2.27.0
Created by: Van Patrick
Comments: 0
Category: DropDownList
Type: Bug Report
1
Current

aria-describedby="a112a6d1-5585-48b0-a138-22edbc0b0bda "

Expected

aria-describedby="a112a6d1-5585-48b0-a138-22edbc0b0bda"
Completed
Last Updated: 13 Sep 2021 05:07 by ADMIN
Release 2.27.0
Created by: Xiaobo
Comments: 0
Category: DropDownList
Type: Bug Report
3
Missing label causes an accessibility issue:  The select element must have an accessible name
Completed
Last Updated: 11 Aug 2021 16:10 by ADMIN
Created by: Clark
Comments: 6
Category: DropDownList
Type: Bug Report
0
I've encountered a scenario where a DropDownList's red border (due to validation status) will be displayed or hidden when it shouldn't. It seems to be always one step behind. For example:

1. Submit the empty form to trigger validation. A validation message is displayed and the field shows a red border as expected.
2. Select a valid value. The validation message goes away as expected, but the red border remains.
3. Select an invalid value. The validation message appears, but now the red border disappears.
4. Select a valid value. The validation message goes away, but the red border remains.

Interestingly, this only happens when using the keyboard. Using the mouse, the border is displayed/hidden at the same time the validation message is displayed/hidden, as would normally be expected.

So to cause this: tab into the field, press one key (e.g., a letter or the down arrow) to select a value, then tab out of the field. If you change the value more than once, the red border will disappear the second time if it is also a valid value.

Animated demo:



I've encountered almost the exact same scenario with other fields when using async validation rules (which Blazor currently does not support), leading me to believe the DropDownList control may be using async somewhere that's resulting in this problem.

Additionally, I'm only experiencing this when I'm wrapping the DropDownList control in my own custom component. I'm not sure why this is.

---

I've included a page and components that demonstrate this problem. It's a little messy but hopefully sheds some light on when it does and doesn't occur. It shows:

1. The issue happens to the TelerikDropDownList when wrapped in a custom component but not otherwise.
2. The issue does not happen to Microsoft's built-in InputSelect even if wrapped in a custom component.
3. The issue does not happen to TelerikTextBox even if wrapped in a custom component.
4. The values of CssClass and InputClass differ, indicating that validation only completes after the value has been changed and OnParametersSet() has been called. (async issue?)

In the attached demo page, the issue only occurs in the last field ("TelerikDropDownListWrapped").

---

Seems like this is a bug with TelerikDropDownList. If not a bug, how can I avoid this issue and why does it not occur with other controls?
Unplanned
Last Updated: 14 Jun 2021 09:47 by ADMIN
The validation Tooltip does not show correctly when hovering from the icon to the select element in the DropDownList
Duplicated
Last Updated: 08 Jun 2021 16:08 by ADMIN
Created by: Chris
Comments: 1
Category: DropDownList
Type: Bug Report
0

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.

Duplicated
Last Updated: 22 Feb 2021 10:10 by ADMIN

I have two cascaded dropdownlists, in attached example car brands and selectable colors. The dependent dropdown has defaulttext option. After the parent dropdown has changed, in its event handler I reload the dependent data source and set a new valid value. If the data source does not contain the previous (!) value, the dropdownlist calls the valuechanged callback with default value. In next round when dependent dropdown holds the default value, after reloading datasource it works as expected. And parent changes again, if the updated datasource does not contain the previous dependent value the dropdownlist sets its value to default.

When I do not pass defaulttext parameter, the dependent dropdown selects the first element from the updated datasource. In my case it is not acceptable because I want to set a specific value (in this example the default color), not the first and not the default.

This feedback drives me to try setting value to default and wait for re-render the descendant dropdownlist before set the wanted value. 

Is there any way to avoid this behaviour of the dropdownlist?


<TelerikDropDownList TItem="Brand"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@BrandList"
			 Value="@Data.BrandId"
			 ValueChanged=@OnBrandChanged />

<TelerikDropDownList TItem="Color"
			 TValue="int"
			 ValueField=@nameof(Brand.Id)
			 TextField=@nameof(Brand.Name)
			 Data="@FilteredColorList"
			 Value="@Data.ColorId"
			 ValueChanged="@OnColorChanged"
			 DefaultText="select color ..." />

async Task OnBrandChanged(int brandId) { Data.ColorId = default; await Task.Delay(5);

Data.BrandId = brandId; Data.ColorId = GetDefaultColor(brandId); FilteredColorList = GetFilteredColorList(brandId); }


Completed
Last Updated: 15 Feb 2021 12:25 by ADMIN
Release 2.22.0
When I change the PopupHeight dynamically (based on the number of items in my data source), the change is not reflected in the component.
Completed
Last Updated: 04 Feb 2021 16:00 by ADMIN
Release 2.22.0
Created by: Barry
Comments: 0
Category: DropDownList
Type: Bug Report
1

When the Default text value is changed by some business logic, the component does not react to that change to update the Default text value in the view model.

DropDownList should re-render on change of the Default text parameter

Completed
Last Updated: 17 Sep 2020 10:55 by ADMIN
Release 2.18.0
I have logic that updates the Data of a dropdownlist (in this case, changes the value of the TextField of a the selected item in the dropdown). After the database update, I fetch the dropdown data anew, and it reflects in the dropdown element, but not in the main element where it is currently shown.
Unplanned
Last Updated: 01 Sep 2020 12:37 by ADMIN
When I place a DropDownList inside a Modal Window and run it in Safari there is a flicker in the UI when the dropdown is expanded.
1 2