Autocomplete: fix keyboard navigation doesn't work for Tailwind

Source/Blazorise.Tailwind/Providers/TailwindClassProvider.cs

@@ -2417,6 +2417,16 @@ public override string ToTextSizeType( TextSizeType textSizeType )
 
     #endregion
 
+    #region Extensions
+
+    #region Autocomplete
+
+    public override string AutocompleteItemFocus( bool focus ) => focus ? "bg-gray-100 dark:bg-gray-600" : null;
+
+    #endregion
+
+    #endregion
+
     public override bool UseCustomInputStyles { get; set; } = true;
 
     public override string Provider => "Tailwind";

Source/Blazorise/Base/BaseComponent.cs

@@ -355,14 +355,12 @@ protected virtual void DirtyStyles()
     /// <summary>
     /// Gets or sets the classname provider.
     /// </summary>
-    [Inject]
-    protected IClassProvider ClassProvider { get; set; }
+    [Inject] protected IClassProvider ClassProvider { get; set; }
 
     /// <summary>
     /// Gets or sets the style provider.
     /// </summary>
-    [Inject]
-    protected IStyleProvider StyleProvider { get; set; }
+    [Inject] protected IStyleProvider StyleProvider { get; set; }
 
     /// <summary>
     /// Gets or sets the IJSUtilitiesModule reference.

Source/Blazorise/Interfaces/IClassProvider.cs

@@ -1405,6 +1405,16 @@ public interface IClassProvider
 
     #endregion
 
+    #region Extensions
+
+    #region Autocomplete
+
+    string AutocompleteItemFocus( bool focus );
+
+    #endregion
+
+    #endregion
+
     /// <summary>
     /// Enables a custom css for select/check/radio/file inputs.
     /// </summary>

Source/Blazorise/Providers/ClassProvider.cs

@@ -2076,6 +2076,16 @@ public virtual string ToTableColumnFixedPosition( TableColumnFixedPosition table
 
     #endregion
 
+    #region Extensions
+
+    #region Autocomplete
+
+    public virtual string AutocompleteItemFocus( bool focus ) => focus ? "focus" : null;
+
+    #endregion
+
+    #endregion
+
     public abstract bool UseCustomInputStyles { get; set; }
 
     public abstract string Provider { get; }

Source/Blazorise/Providers/EmptyClassProvider.cs

@@ -1405,6 +1405,16 @@ class EmptyClassProvider : IClassProvider
 
     #endregion
 
+    #region Extensions
+
+    #region Autocomplete
+
+    public string AutocompleteItemFocus( bool focus ) => null;
+
+    #endregion
+
+    #endregion
+
     #region Properties
 
     public bool UseCustomInputStyles { get; set; } = false;

Source/Blazorise/wwwroot/utilities.js

@@ -106,10 +106,18 @@ export function scrollElementIntoView(elementId, smooth) {
             top = element.offsetTop + element.offsetHeight - element.parentElement.clientHeight;
         }
 
-        var behavior = smooth ? "smooth" : "instant";
-        element.parentElement.scrollTo({ top: top, behavior: behavior });
+        var scrollableParent = getScrollableParent(element);
+
+        if (scrollableParent) {
+            var behavior = smooth ? "smooth" : "instant";
+            scrollableParent.scrollTo({ top: top, behavior: behavior });
+        }
     }
 }
+function getScrollableParent(el) {
+    while ((el = el.parentElement) && window.getComputedStyle(el).overflowY.indexOf('scroll') === -1);
+    return el;
+}
 
 // sets the value to the element property
 export function setProperty(element, property, value) {

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

@@ -1230,7 +1230,7 @@ protected string DropdownClassNames
     /// Gets the custom class-names for dropdown element.
     /// </summary>
     protected string DropdownItemClassNames( int index )
-        => $"b-is-autocomplete-suggestion {( ActiveItemIndex == index ? "focus" : string.Empty )} {( SelectionMode == AutocompleteSelectionMode.Checkbox ? "b-is-autocomplete-suggestion-checkbox" : string.Empty )}";
+        => $"b-is-autocomplete-suggestion {ClassProvider.AutocompleteItemFocus( ActiveItemIndex == index )} {( SelectionMode == AutocompleteSelectionMode.Checkbox ? "b-is-autocomplete-suggestion-checkbox" : string.Empty )}";
 
     /// <summary>
     /// Provides an index based id for the dropdown suggestion items.
@@ -1245,6 +1245,11 @@ protected string DropdownItemId( int index )
     protected bool IsMultiple => Multiple || SelectionMode == AutocompleteSelectionMode.Multiple || SelectionMode == AutocompleteSelectionMode.Checkbox;
 #pragma warning restore CS0618 // Type or member is obsolete
 
+    /// <summary>
+    /// Gets or sets the classname provider.
+    /// </summary>
+    [Inject] protected IClassProvider ClassProvider { get; set; }
+
     /// <summary>
     /// Gets or sets the <see cref="IJSClosableModule"/> instance.
     /// </summary>