When tabbing with the list open on a drop down box, it does not navigate to the next control correctly. Also if the list is not open, you select an item with up/down arrow, you have to hit tab twice.
@page "/test"
<h3>Test</h3>
<RadzenLabel Component="openOnFocus" Text="Open On Focus" />
<RadzenCheckBox Name="openOnFocus" @bind-Value="@openOnFocus" />
<RadzenRow>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd1" Text="Tab 1" />
<RadzenDropDown TValue="VendorDto"
Name="vdd1"
Data="@vendors"
@bind-Value="@selectedVendor1"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="1"
Style="width: 400px;" />
</RadzenColumn>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd4" Text="Tab 4" />
<RadzenDropDown TValue="VendorDto"
Name="vdd4"
Data="@vendors"
@bind-Value="@selectedVendor4"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="4"
Style="width: 400px;" />
</RadzenColumn>
</RadzenRow>
<RadzenRow>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd2" Text="Tab 2" />
<RadzenDropDown TValue="VendorDto"
Name="vdd2"
Data="@vendors"
@bind-Value="@selectedVendor2"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="2"
Style="width: 400px;" />
</RadzenColumn>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd5" Text="Tab 5" />
<RadzenDropDown TValue="VendorDto"
Name="vdd5"
Data="@vendors"
@bind-Value="@selectedVendor5"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="5"
Style="width: 400px;" />
</RadzenColumn>
</RadzenRow>
<RadzenRow>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd3" Text="Tab 3" />
<RadzenDropDown TValue="VendorDto"
Name="vdd3"
Data="@vendors"
@bind-Value="@selectedVendor3"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="3"
Style="width: 400px;" />
</RadzenColumn>
<RadzenColumn Size="6">
<RadzenLabel Component="vdd6" Text="Tab 6" />
<RadzenDropDown TValue="VendorDto"
Name="vdd6"
Data="@vendors"
@bind-Value="@selectedVendor6"
TextProperty="@nameof(VendorDto.IdAndName)"
AllowFiltering="true"
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
FilterOperator="StringFilterOperator.Contains"
FilterAsYouType="true"
AllowClear="true"
OpenOnFocus="@openOnFocus"
ClearSearchAfterSelection="true"
TabIndex="6"
Style="width: 400px;" />
</RadzenColumn>
</RadzenRow>
@code {
private List<VendorDto> vendors = default!;
VendorDto? selectedVendor1 { get; set; }
VendorDto? selectedVendor2 { get; set; }
VendorDto? selectedVendor3 { get; set; }
VendorDto? selectedVendor4 { get; set; }
VendorDto? selectedVendor5 { get; set; }
VendorDto? selectedVendor6 { get; set; }
protected override Task OnInitializedAsync()
{
var list = new List<VendorDto> {
new VendorDto { Id = 1, Name = "Vendor A" },
new VendorDto { Id = 2, Name = "Vendor B" },
new VendorDto { Id = 3, Name = "Vendor C" },
new VendorDto { Id = 4, Name = "Vendor D" },
new VendorDto { Id = 5, Name = "Vendor E" },
new VendorDto { Id = 6, Name = "Vendor F" },
new VendorDto { Id = 7, Name = "Vendor G" },
new VendorDto { Id = 8, Name = "Vendor H" },
new VendorDto { Id = 9, Name = "Vendor I" },
new VendorDto { Id = 10, Name = "Vendor J" }
};
vendors = list.OrderBy(x => x.IdAndName).ToList();
return base.OnInitializedAsync();
}
private bool openOnFocus = true;
class VendorDto
{
public int Id { get; set; }
public string Name { get; set; } = default!;
public string IdAndName => $"{Id} - {Name}";
}
}