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.
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.
To reproduce the issue: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);
}
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