refactor(AutoFill): prevent jitter when mouse scrolling too fast

src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor

@@ -9,7 +9,7 @@
     <section ignore>
         @((MarkupString)@Localizer["NormalDesc"].Value)
     </section>
-    <AutoFill @bind-Value="Model1" Items="Items1" class="mb-3"
+    <AutoFill @bind-Value="Model1" Items="Items1"
               IsLikeMatch="true" OnGetDisplayText="OnGetDisplayText" IsSelectAllTextOnFocus="true">
         <ItemTemplate>
             <div class="d-flex">
@@ -32,7 +32,7 @@
 <DemoBlock Title="@Localizer["CustomFilterTitle"]" Introduction="@Localizer["CustomFilterIntro"]" Name="CustomFilter">
     <section ignore>@((MarkupString)Localizer["CustomFilterDesc"].Value)</section>
     <AutoFill @bind-Value="Model2" Items="Items2" OnCustomFilter="OnCustomFilter"
-              OnGetDisplayText="OnGetDisplayText" class="mb-3">
+              OnGetDisplayText="OnGetDisplayText">
         <ItemTemplate>
             <div class="d-flex">
                 <div>
@@ -54,7 +54,7 @@
     <section ignore>
         @((MarkupString)@Localizer["ShowDropdownListOnFocusDesc"].Value)
     </section>
-    <AutoFill @bind-Value="Model3" Items="Items3" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText" class="mb-3">
+    <AutoFill @bind-Value="Model3" Items="Items3" ShowDropdownListOnFocus="false" OnGetDisplayText="OnGetDisplayText">
         <ItemTemplate>
             <div class="d-flex">
                 <div>
@@ -87,10 +87,9 @@
 
     <p class="code-label">1. 使用 OnQueryAsync 作为数据源</p>
     <div class="row mb-3">
-        <div class="col-12">
-            <AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText" class="mb-3"
-                      IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
-                      IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
+        <div class="col-6">
+            <AutoFill @bind-Value="Model4" OnQueryAsync="OnQueryAsync" OnGetDisplayText="OnGetDisplayText"
+                      IsSelectAllTextOnFocus="true" IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
                 <ItemTemplate>
                     <div class="d-flex">
                         <div>
@@ -103,19 +102,19 @@
                     </div>
                 </ItemTemplate>
             </AutoFill>
-            <section ignore>
-                @if (Model4 != null)
-                {
-                    <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
-                }
-            </section>
         </div>
     </div>
+    <section ignore>
+        @if (Model4 != null)
+        {
+            <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2"></EditorForm>
+        }
+    </section>
 
     <p class="code-label">2. 使用 Items 作为数据源</p>
-    <div class="row">
-        <div class="col-12">
-            <AutoFill @bind-Value="Model4" Items="Items4" OnGetDisplayText="OnGetDisplayText" class="mb-3"
+    <div class="row mb-3">
+        <div class="col-6">
+            <AutoFill @bind-Value="Model5" Items="Items5" OnGetDisplayText="OnGetDisplayText"
                       IsSelectAllTextOnFocus="true" OnCustomFilter="OnCustomVirtulizeFilter"
                       IsVirtualize="true" RowHeight="58f" IsClearable="_isClearable">
                 <ItemTemplate>
@@ -130,14 +129,14 @@
                     </div>
                 </ItemTemplate>
             </AutoFill>
-            <section ignore>
-                @if (Model4 != null)
-                {
-                    <EditorForm Model="@Model4" RowType="RowType.Inline" ItemsPerRow="2" />
-                }
-            </section>
         </div>
     </div>
+    <section ignore>
+        @if (Model5 != null)
+        {
+            <EditorForm Model="@Model5" RowType="RowType.Inline" ItemsPerRow="2"></EditorForm>
+        }
+    </section>
 </DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs

@@ -22,6 +22,9 @@ partial class AutoFills
     [NotNull]
     private Foo Model4 { get; set; } = new();
 
+    [NotNull]
+    private Foo Model5 { get; set; } = new();
+
     private static string? OnGetDisplayText(Foo? foo) => foo?.Name;
 
     [NotNull]
@@ -36,6 +39,9 @@ partial class AutoFills
     [NotNull]
     private IEnumerable<Foo>? Items4 { get; set; }
 
+    [NotNull]
+    private IEnumerable<Foo>? Items5 { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
@@ -58,6 +64,9 @@ protected override void OnInitialized()
 
         Items4 = Foo.GenerateFoo(LocalizerFoo);
         Model4 = Items3.First();
+
+        Items5 = Foo.GenerateFoo(LocalizerFoo);
+        Model5 = Items3.First();
     }
 
     private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
@@ -68,7 +77,7 @@ private Task<IEnumerable<Foo>> OnCustomFilter(string searchText)
 
     private Task<IEnumerable<Foo>> OnCustomVirtulizeFilter(string searchText)
     {
-        var items = string.IsNullOrEmpty(searchText) ? Items4 : Items4.Where(i => i.Name!.Contains(searchText));
+        var items = string.IsNullOrEmpty(searchText) ? Items5 : Items5.Where(i => i.Name!.Contains(searchText));
         return Task.FromResult(items);
     }
 

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.5.0-beta08</Version>
+    <Version>9.5.0-beta09</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor

@@ -23,23 +23,25 @@
 
 @code {
     RenderFragment RenderDropdown =>
-    @<ul class="dropdown-menu">
-        @foreach (var item in Rows)
-        {
-            <li @key="item" class="dropdown-item" @onclick="() => OnClickItem(item)">
-                @if (ItemTemplate == null)
-                {
-                    <div>@item</div>
-                }
-                else
-                {
-                    @ItemTemplate(item)
-                }
-            </li>
-        }
-        @if (ShowNoDataTip && Rows.Count == 0)
-        {
-            <li class="dropdown-item">@NoDataTip</li>
-        }
-    </ul>;
+    @<div class="dropdown-menu">
+        <div class="dropdown-menu-body">
+            @foreach (var item in Rows)
+            {
+                <div @key="item" class="dropdown-item" @onclick="() => OnClickItem(item)">
+                    @if (ItemTemplate == null)
+                    {
+                        <div>@item</div>
+                    }
+                    else
+                    {
+                        @ItemTemplate(item)
+                    }
+                </div>
+            }
+            @if (ShowNoDataTip && Rows.Count == 0)
+            {
+                <div class="dropdown-item">@NoDataTip</div>
+            }
+        </div>
+    </div>;
 }

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

@@ -16,7 +16,6 @@ public partial class AutoComplete
     /// Gets the component style
     /// </summary>
     private string? ClassString => CssBuilder.Default("auto-complete")
-        .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     /// <summary>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js

@@ -16,6 +16,25 @@ export function init(id, invoke) {
     if (isPopover) {
         ac.popover = Popover.init(el, { toggleClass: '[data-bs-toggle="bb.dropdown"]' });
     }
+    else {
+        const extraClass = input.getAttribute('data-bs-custom-class');
+        if (extraClass) {
+            menu.classList.add(...extraClass.split(' '))
+        }
+        const offset = input.getAttribute('data-bs-offset');
+        if (offset) {
+            const [x, y] = offset.split(',');
+            const xValue = parseFloat(x);
+            const yValue = parseFloat(y);
+
+            if (xValue > 0) {
+                menu.style.setProperty('margin-left', `${xValue}px`);
+            }
+            if (yValue > 0) {
+                menu.style.setProperty('margin-top', `${yValue}px`);
+            }
+        }
+    }
 
     // debounce
     const duration = parseInt(input.getAttribute('data-bb-debounce') || '0');

src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs

@@ -155,7 +155,7 @@ protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
-        Offset ??= "[0, 10]";
+        Offset ??= "[0, 6]";
     }
 
     /// <summary>

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor

@@ -22,7 +22,7 @@
     {
         <span class="@ClearClassString" @onclick="OnClearValue"><i class="@ClearIcon"></i></span>
     }
-    <ul class="dropdown-menu">
+    <div class="dropdown-menu">
         @if (IsVirtualize)
         {
             <div class="dropdown-menu-body dropdown-virtual">
@@ -41,7 +41,7 @@
         }
         else if (ShowNoDataTip && Rows.Count == 0)
         {
-            <li class="dropdown-item">@NoDataTip</li>
+            <div class="dropdown-item">@NoDataTip</div>
         }
         else
         {
@@ -52,12 +52,12 @@
                 }
             </div>
         }
-    </ul>
+    </div>
 </div>
 
 @code {
     RenderFragment<TValue> RenderRow => item =>
-    @<li @key="@item" class="dropdown-item" @onclick="() => OnClickItem(item)">
+    @<div @key="@item" class="dropdown-item" @onclick="() => OnClickItem(item)">
         @if (ItemTemplate != null)
         {
             @ItemTemplate(item)
@@ -66,10 +66,10 @@
         {
             <div>@GetDisplayText(item)</div>
         }
-    </li>;
+    </div>;
 
     RenderFragment<PlaceholderContext> RenderPlaceHolderRow => context =>
-    @<div class="dropdown-item">
+    @<div class="dropdown-item" style="@PlaceHolderStyleString">
         <div class="is-ph"></div>
     </div>;
 }

src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs

@@ -19,7 +19,6 @@ public partial class AutoFill<TValue>
     /// </summary>
     private string? ClassString => CssBuilder.Default("auto-complete auto-fill")
         .AddClass("is-clearable", IsClearable)
-        .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     /// <summary>
@@ -104,14 +103,14 @@ public partial class AutoFill<TValue>
     /// </summary>
     /// <remarks>Effective when <see cref="IsVirtualize"/> is set to true.</remarks>
     [Parameter]
-    public float RowHeight { get; set; } = 33f;
+    public float RowHeight { get; set; } = 50f;
 
     /// <summary>
-    /// Gets or sets the overscan count for virtual scrolling. Default is 4.
+    /// Gets or sets the overscan count for virtual scrolling. Default is 3.
     /// </summary>
     /// <remarks>Effective when <see cref="IsVirtualize"/> is set to true.</remarks>
     [Parameter]
-    public int OverscanCount { get; set; } = 4;
+    public int OverscanCount { get; set; } = 3;
 
     /// <summary>
     /// Gets or sets the callback method for loading virtualized items.
@@ -161,6 +160,10 @@ public partial class AutoFill<TValue>
         .AddClass($"text-danger", IsValid.HasValue && !IsValid.Value)
         .Build();
 
+    private string? PlaceHolderStyleString => RowHeight > 50f
+        ? CssBuilder.Default().AddStyle("height", $"{RowHeight}px").Build()
+        : null;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -178,6 +181,14 @@ protected override void OnParametersSet()
         Items ??= [];
     }
 
+    private bool _render = true;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override bool ShouldRender() => _render;
+
     private bool IsNullable() => !ValueType.IsValueType || NullableUnderlyingType != null;
 
     /// <summary>
@@ -197,6 +208,10 @@ private async Task OnClearValue()
             await OnClearAsync();
         }
         CurrentValue = default;
+        _displayText = null;
+        _filterItems = null;
+        _searchText = null;
+
         if (OnQueryAsync != null)
         {
             await _virtualizeElement.RefreshDataAsync();
@@ -222,14 +237,13 @@ private async Task OnClickItem(TValue val)
 
     private List<TValue> Rows => _filterItems ?? [.. Items];
 
-    private int _totalCount;
-
     private async ValueTask<ItemsProviderResult<TValue>> LoadItems(ItemsProviderRequest request)
     {
-        var count = _totalCount == 0 ? request.Count : Math.Min(request.Count, _totalCount - request.StartIndex);
-        var data = await OnQueryAsync(new() { StartIndex = request.StartIndex, Count = count, SearchText = _searchText });
+        _render = false;
+        var data = await OnQueryAsync(new() { StartIndex = request.StartIndex, Count = request.Count, SearchText = _searchText });
+        _render = true;
 
-        _totalCount = data.TotalCount;
+        var _totalCount = data.TotalCount;
         var items = data.Items ?? [];
         return new ItemsProviderResult<TValue>(items, _totalCount);
     }