🐛 fix(Select): revert the changes that using Virtualize for rendering…

… the list (#2039)

* 🐛 fix(Select): revert the changes that using Virtualize for rendering the list

* merge from develop and resolve conflicts

src/Masa.Blazor.JS/src/interop.ts

@@ -1044,7 +1044,7 @@ export function getMenuableDimensions(hasActivator, activatorSelector, isDefault
 
   var dimensions = {
     activator: {} as any,
-    content: {},
+    content: {} as any,
     relativeYOffset: 0,
     offsetParentLeft: 0
   };
@@ -1077,6 +1077,8 @@ export function getMenuableDimensions(hasActivator, activatorSelector, isDefault
       }
 
       dimensions.content = measure(contentElement, isDefaultAttach)
+      dimensions.content.offsetLeft = contentElement.offsetLeft
+      dimensions.content.offsetTop = contentElement.offsetTop
     }
   }, contentElement);
 
@@ -1626,4 +1628,11 @@ export function updateTabSlider(
   if (vertical) {
     sliderWrapper.style.top = `${top}px`;
   }
+}
+
+export function isScrollNearBottom(element: HTMLElement, threshold: number = 200) {
+  if (!element) {
+    return false;
+  }
+  return element.scrollHeight - (element.scrollTop + element.clientHeight) < threshold;
 }

src/Masa.Blazor/Components/Menu/MMenu.razor

@@ -41,6 +41,7 @@
                                            Style="@style"
                                            Class="@css"
                                            id="@_contentId"
+                                           onscroll="@OnScroll"
                                            ReferenceCaptureAction="el => ContentElement = el">
                         @ChildContent
                     </ShowTransitionElement>

src/Masa.Blazor/Components/Menu/MMenu.razor.cs

@@ -34,6 +34,8 @@ public bool CloseOnContentClick
 
         [Parameter] [MasaApiParameter("auto")] public StringNumber MaxHeight { get; set; } = "auto";
 
+        [Parameter] public EventCallback<WheelEventArgs> OnScroll { get; set; }
+
         [Parameter] public EventCallback<MouseEventArgs> OnOutsideClick { get; set; }
 
         [Parameter] public string? Origin { get; set; }

src/Masa.Blazor/Components/Select/MSelect.razor

@@ -169,6 +169,7 @@
                Right="@ComputedMenuProps.Right"
                Top="@ComputedMenuProps.Top"
                Transition="@ComputedMenuProps.Transition"
+               OnScroll="@OnMenuScroll"
                @ref="@MMenu">
             @GenSelectList()
         </MMenu>
@@ -191,7 +192,7 @@
                      Color="@ItemColor"
                      Dense="@Dense"
                      HideSelected="@HideSelected"
-                     Items="@ComputedItems"
+                     Items="@VirtualizedItems"
                      ItemDisabled="@ItemDisabled"
                      ItemText="@ItemText"
                      ItemValue="@ItemValue"

src/Masa.Blazor/Components/Select/MSelect.razor.cs

@@ -1,6 +1,5 @@
 using System.Linq.Expressions;
 using Masa.Blazor.Components.Input;
-using Masa.Blazor.Mixins;
 using StyleBuilder = Masa.Blazor.Core.StyleBuilder;
 
 namespace Masa.Blazor;
@@ -155,6 +154,8 @@ protected BMenuProps ComputedMenuProps
     protected List<TItem> AllItems => FilterDuplicates(CachedItems.Concat(Items)).ToList();
 
     protected virtual List<TItem> ComputedItems => AllItems;
+
+    private List<TItem> VirtualizedItems => MMenu?.Auto is true ? ComputedItems : ComputedItems.Take(lastItem).ToList();
 
     protected List<TItem> ComputedItemsIfHideSelected =>
         HideSelected ? ComputedItems.Where(item => !SelectedItems.Contains(item)).ToList() : ComputedItems;
@@ -734,6 +735,39 @@ protected virtual async Task OnTabDown(KeyboardEventArgs args)
         }
     }
 
+    private int lastItem = 20;
+    private CancellationTokenSource? _scrollCts;
+
+    private async Task OnMenuScroll(WheelEventArgs args)
+    {
+        try
+        {
+            if (!IsMenuActive || lastItem > ComputedItems.Count)
+            {
+                return;
+            }
+
+            _scrollCts?.Cancel();
+            _scrollCts = new CancellationTokenSource();
+            await Task.Delay(16, _scrollCts.Token);
+
+            var content = MMenu?.Dimensions.Content;
+            if (content is not null)
+            {
+                var showMoreItems = await Js.InvokeAsync<bool>(JsInteropConstants.IsScrollNearBottom, MMenu!.ContentElement, 200);
+                if (showMoreItems)
+                {
+                    lastItem += 20;
+                    StateHasChanged();
+                }
+            }
+        }
+        catch (TaskCanceledException)
+        {
+            // ignored
+        }
+    }
+
     public override async Task HandleOnBlurAsync(FocusEventArgs args)
     {
         if (OnBlur.HasDelegate)

src/Masa.Blazor/Components/Select/MSelectList.razor

@@ -3,7 +3,6 @@
 @typeparam TItem
 @typeparam TItemValue
 @typeparam TValue
-@using Microsoft.AspNetCore.Components.Web.Virtualization
 
 <MList Class="m-select-list"
        Dense="Dense"
@@ -15,9 +14,10 @@
         @PrependItemContent
         if (computedItems.Count > 0)
         {
-            <Virtualize Items="@computedItems"
-                        ItemContent="@VirtualizeItemContent">
-            </Virtualize>
+            @foreach(var item in computedItems)
+            {
+                @VirtualizeItemContent(item)
+            }
         }
         else
         {

src/Masa.Blazor/JSInterop/JsInteropConstants.cs

@@ -167,6 +167,12 @@ public static class JsInteropConstants
     internal static string RegisterTableScrollEvent => $"{JsInteropFuncNamePrefix}registerTableScrollEvent";
 
     internal static string UnregisterTableScrollEvent => $"{JsInteropFuncNamePrefix}unregisterTableScrollEvent";
-    
+
     internal static string UpdateTabSlider => $"{JsInteropFuncNamePrefix}updateTabSlider";
+
+    /// <summary>
+    /// Check if the scroll is near the bottom of the element.
+    /// Arguments: element, threshold
+    /// </summary>
+    public static string IsScrollNearBottom => $"{JsInteropFuncNamePrefix}isScrollNearBottom";
 }

src/Masa.Blazor/Mixins/Menuable/MMenuable.cs

@@ -167,7 +167,6 @@ protected double ComputedTop
     {
         OffsetTop = PositionY ?? AbsoluteY,
         OffsetLeft = PositionX ?? AbsoluteX,
-        ScrollHeight = 0,
         Top = PositionY ?? AbsoluteY,
         Bottom = PositionY ?? AbsoluteY,
         Left = PositionX ?? AbsoluteX,

src/Masa.Blazor/Mixins/Menuable/MenuablePosition.cs

@@ -4,7 +4,6 @@ public class MenuablePosition : BoundingClientRect
 {
     public double OffsetTop { get; set; }
     public double OffsetLeft { get; set; }
-    public double ScrollHeight { get; set; }
 
     public MenuablePosition()
     {