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
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.
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).
The DropDownList triggers exceptions if there are no items in the dropdown and one tries to use keyboard navigation:
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"
};
}
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:When bound to a nullable GUID, the DropDownList invokes validation and shows validation messages as soon as the view loads.
Expected: the same behavior as with nullable int - validation is to be triggered by the form submission or selection from the dropdown.
Worked as expected in 1.2.0.
Reproducible:
@
using
Telerik.Blazor.Components.DropDownList
@
using
System.ComponentModel.DataAnnotations
<EditForm Model=
"@person"
OnValidSubmit=
"@HandleValidSubmit"
>
<DataAnnotationsValidator />
<ValidationSummary />
<p
class
=
"gender"
>
Gender: <TelerikDropDownList @bind-Value=
"person.Gender"
DefaultItem=
"@ddlHint"
Data=
"@genders"
TextField=
"MyTextField"
ValueField=
"MyValueField"
>
</TelerikDropDownList>
<ValidationMessage For=
"@(() => person.Gender)"
></ValidationMessage>
</p>
<button type=
"submit"
>Submit</button>
</EditForm>
@code {
// Usually the model classes would be in different files
public
class
Person
{
[Required(ErrorMessage =
"Gender is mandatory."
)]
//the value field in the dropdown model must be null in the default item
public
Guid? Gender {
get
;
set
; }
}
public
class
MyDdlModel
{
//nullable so the default item can allow required field validation
public
Guid? MyValueField {
get
;
set
; }
public
string
MyTextField {
get
;
set
; }
}
Person person =
new
Person();
MyDdlModel ddlHint =
new
MyDdlModel { MyValueField =
null
, MyTextField =
"Gender"
};
IEnumerable<MyDdlModel> genders =
new
List<MyDdlModel>
{
new
MyDdlModel {MyTextField =
"female"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"male"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"other"
, MyValueField =
new
Guid()},
new
MyDdlModel {MyTextField =
"I'd rather not say"
, MyValueField =
new
Guid()}
};
void
HandleValidSubmit()
{
Console.WriteLine(
"OnValidSubmit"
);
}
}
Hello,
Initial I want no item to be selected to let the user select a value. I thought it would be enough if my bindvalue would be of a nullable type. I'm getting an exception when trying. If this is not supported, how can I do it?
<div class="form-group col-md-2">
<label class="col-form-label" for="ddReleaseType">Fönstertyp</label>
<TelerikDropDownList Data="@ReleaseTypeFilterOptions" @bind-Value="FilterState.ReleaseType" TextField="DisplayText" ValueField="ReleaseType" Class="max-width form-control" @ref="ddReleaseType"></TelerikDropDownList>
</div>
public enum ReleaseType : int
{
All = 0,
Category = 1,
Season = 2,
Misc = 3
}
protected Telerik.Blazor.Components.TelerikDropDownList<ReleaseTypeFilterModel?, SessionState.ReleaseType?> ddReleaseType;
protected class ReleaseTypeFilterModel
{
public SessionState.ReleaseType ReleaseType { get; set; }
public string DisplayText { get { return ReleaseType.ToString(); } }
}
Telerik.Blazor.Components.Common.TelerikSelectBase<TItem, TValue>.TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
_Host.cshtml
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!
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 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.
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.
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
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:
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