RadzenDropDown filter list popup does not respect tabindex

Radzen.Blazor Components
1

When using AllowFiltering=”true” and OpenOnFocus=”true” on an RadzenDropDown component, using keyboard navigation when the value is selected the focus on TAB key shifts to browser’s address bar instead of next tabIndex object.

This can be reproduced on the demo page as follows:

  1. Visit Blazor DropDown Component - Filtering | Free UI Components by Radzen
  2. Edit source of the first example (add RadzenTextBox after the RadzenDropDown):

<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Gap="0.5rem" class="rz-p-sm-12">
<RadzenRow>
<RazdenColumn>
<RadzenLabel Text="Select Value" Component="DropDownFiltering" />
<RadzenDropDown @ref=@radzenDropDown @bind-SearchText=SearchText FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowFiltering="true"
Data=@customers TextProperty="@nameof(Customer.CompanyName)" ValueProperty="@nameof(Customer.CustomerID)" AllowClear="true" @bind-Value=value Style="width: 100%; max-width: 400px;" Name="DropDownFiltering" />
</RadzenRow>
</RazdenColumn>
<RadzenRow>
<RazdenColumn>
<RadzenLabel Text="TextBox" Component="TextBox" />
<RadzenTextBox Name="TextBox" style="width: 100%; max-width: 400px;" />
</RadzenRow>
</RazdenColumn>
</RadzenStack>

  1. Click run and click inside the RadzenDropDown component. A dropdown with search box appears
  2. Use keyboard arrow keys to select an item and hit Enter
  3. Press TAB key to move to the next form component - focus moves to the browser address bar instead

Tested on Chrome 141.0 on Arch Linux and Edge 141.0 on MacOS Tahoe

2

Indeed we have such logged issue since long time however we don’t know how to fix it. Feel free to submit pull request if you have a fix.