Autocomplete: fix the focus of next element (#6477)

* tabindex

* docs api

* no js

Author: stsrki

Documentation/Blazorise.Docs/Resources/docs-api-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedUtc": "2026-03-22T12:46:35.0517777Z",
+  "generatedUtc": "2026-03-22T15:18:14.2066907Z",
   "components": [
     {
       "type": "global::Blazorise.Abbreviation",
@@ -39617,6 +39617,14 @@
           "summary": "Custom inline styles to apply to the component.",
           "isBlazoriseEnum": false
         },
+        {
+          "name": "TabIndex",
+          "type": "int?",
+          "typeName": "int?",
+          "defaultValue": "null",
+          "summary": "Gets or sets the tabindex value for keyboard navigation.",
+          "isBlazoriseEnum": false
+        },
         {
           "name": "TextAlignment",
           "type": "global::Blazorise.TextAlignment",

Source/Blazorise/Components/Dropdown/DropdownItem.razor.cs

@@ -133,13 +133,18 @@ protected async Task CheckedChangedHandler( bool isChecked )
     /// <summary>
     /// Gets the tabindex value for keyboard navigation.
     /// </summary>
-    protected int ComputedTabIndex => Disabled ? -1 : 0;
+    protected int ComputedTabIndex => Disabled ? -1 : TabIndex ?? 0;
 
     /// <summary>
     /// Holds the item value.
     /// </summary>
     [Parameter] public object Value { get; set; }
 
+    /// <summary>
+    /// Gets or sets the tabindex value for keyboard navigation.
+    /// </summary>
+    [Parameter] public int? TabIndex { get; set; }
+
     /// <summary>
     /// Indicate the currently active item.
     /// </summary>

Source/Extensions/Blazorise.Components/Autocomplete.razor

@@ -79,15 +79,15 @@
         {
             var notFoundContext = GetNotFoundItemContext();
 
-            <DropdownItem Disabled CloseParentDropdowns="@CloseParentDropdowns" Class="@DropdownItemClassNames( notFoundContext )" Style="@DropdownItemStyleNames( notFoundContext )">
+            <DropdownItem Disabled TabIndex="-1" CloseParentDropdowns="@CloseParentDropdowns" Class="@DropdownItemClassNames( notFoundContext )" Style="@DropdownItemStyleNames( notFoundContext )">
                 @NotFoundTemplate( Search )
             </DropdownItem>
         }
         else if ( FreeTypingNotFoundVisible )
         {
             var notFoundContext = GetNotFoundItemContext();
 
-            <DropdownItem Disabled CloseParentDropdowns="@CloseParentDropdowns" Class="@DropdownItemClassNames( notFoundContext )" Style="@DropdownItemStyleNames( notFoundContext )">
+            <DropdownItem Disabled TabIndex="-1" CloseParentDropdowns="@CloseParentDropdowns" Class="@DropdownItemClassNames( notFoundContext )" Style="@DropdownItemStyleNames( notFoundContext )">
                 @FreeTypingNotFoundTemplate( Search )
             </DropdownItem>
         }
@@ -108,7 +108,7 @@
         var value = GetItemValue( item );
         var itemContext = CreateItemContext( item, value, text, itemIndex, isActiveItem, isFocusedItem, disabled );
 
-        <DropdownItem @key="@item" ElementId="@DropdownItemId( itemIndex )" Active="@isActiveItem" Checked=@isActiveItem ShowCheckbox=@isCheckbox Class="@DropdownItemClassNames( itemContext )" Style="@DropdownItemStyleNames( itemContext )" Value="@value"
+        <DropdownItem @key="@item" ElementId="@DropdownItemId( itemIndex )" Active="@isActiveItem" Checked=@isActiveItem ShowCheckbox=@isCheckbox TabIndex="-1" Class="@DropdownItemClassNames( itemContext )" Style="@DropdownItemStyleNames( itemContext )" Value="@value"
                       Disabled="@disabled"
                       CloseParentDropdowns="@CloseParentDropdowns"
                       @onmousedown="@(() => clickFromCheck = true)"

Source/Extensions/Blazorise.Components/Autocomplete.razor.cs

@@ -530,8 +530,35 @@ public async Task ScrollItemIntoView( int index )
     /// <returns>Returns awaitable task</returns>
     protected async Task OnTextKeyDownHandler( KeyboardEventArgs eventArgs )
     {
+        bool isPlainTabNavigation = eventArgs.Code == "Tab" && !eventArgs.AltKey && !eventArgs.CtrlKey && !eventArgs.MetaKey;
+
         await OnKeyDownHandler( eventArgs );
 
+        if ( isPlainTabNavigation )
+        {
+            if ( IsConfirmKey( eventArgs ) )
+            {
+                if ( IsMultiple && FreeTyping && !string.IsNullOrEmpty( Search ) && ActiveItemIndex < 0 )
+                {
+                    await AddMultipleText( Search );
+
+                    if ( CloseOnSelection )
+                    {
+                        await ResetCurrentSearch();
+                    }
+                }
+                else if ( SelectionMode != AutocompleteSelectionMode.Checkbox )
+                {
+                    await SelectedOrResetOnCommit();
+                }
+            }
+
+            TextFocused = false;
+            await Close();
+            await SearchKeyDown.InvokeAsync( eventArgs );
+            return;
+        }
+
         if ( eventArgs.Code == "Escape" )
         {
             await Close();

Tests/BasicTestApp.Client/Autocomplete_5452Component.razor

@@ -0,0 +1,17 @@
+<Autocomplete TItem="string"
+              TValue="string"
+              Data="@items"
+              MinSearchLength="0"
+              TextField="@(( item ) => item)"
+              ValueField="@(( item ) => item)" />
+
+<Button ElementId="nextButton" Outline>Next</Button>
+
+@code {
+    private readonly List<string> items = new()
+    {
+        "Alpha",
+        "Beta",
+        "Gamma"
+    };
+}

Tests/Blazorise.E2E.Tests/Tests/Extensions/Autocomplete/Autocomplete_5452_Tests.cs

@@ -0,0 +1,27 @@
+namespace Blazorise.E2E.Tests.Tests.Extensions.Autocomplete;
+
+[Parallelizable( ParallelScope.Self )]
+[TestFixture]
+public class Autocomplete_5452_Tests : BlazorisePageTest
+{
+    [SetUp]
+    public async Task Init()
+    {
+        await SelectTestComponent<Autocomplete_5452Component>();
+    }
+
+    [Test]
+    public async Task TabbingOutWithOpenListFocusesNextElement()
+    {
+        var autocomplete = Page.Locator( ".b-is-autocomplete input[type=search]" );
+        var dropdownMenu = Page.Locator( ".dropdown-menu.show" );
+        var nextButton = Page.Locator( "#nextButton" );
+
+        await autocomplete.ClickAsync();
+        await dropdownMenu.WaitForAsync();
+
+        await autocomplete.PressAsync( "Tab" );
+
+        await Expect( nextButton ).ToBeFocusedAsync();
+    }
+}