fix(Sortable): re-sort by Order through js-interop when items chang…

…ed (#2293)

* investigating

* 🐛 fix(Sortable): re-sort by jsinterop when items changed

src/Masa.Blazor/Components/Sortable/MSortable.razor

@@ -3,11 +3,11 @@
 @typeparam TItem
 
 <MElement Class="@GetClass()"
-         Style="@GetStyle()"
-         Tag="@Tag"
-         id="@Id"
-         ReferenceCaptureAction="r => Ref = r"
-         @attributes="@Attributes">
+          Style="@GetStyle()"
+          Tag="@Tag"
+          id="@Id"
+          ReferenceCaptureAction="r => Ref = r"
+          @attributes="@Attributes">
     @GenItems()
 </MElement>
 
@@ -25,10 +25,10 @@
             var dataId = ItemKey?.Invoke(item);
 
             <MElement Tag="@ItemTag"
-                     Class="@GetClass(_block.Element("item").Name, ItemClass)"
-                     Style="@ItemStyle"
-                     @key="@(dataId ?? (object?)item)"
-                     data-id="@dataId">
+                      Class="@GetClass(_block.Element("item").Name, ItemClass)"
+                      Style="@ItemStyle"
+                      @key="@(dataId ?? (object?)item)"
+                      data-id="@dataId">
                 @ChildContent(item)
             </MElement>
         }

src/Masa.Blazor/Components/Sortable/MSortableProvider.cs

@@ -28,15 +28,14 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         builder.AddContent(0, sb =>
         {
-            var i = 0;
             foreach (var item in Items)
             {
                 Dictionary<string, object?> attrs = new()
                 {
                     { "data-id", ItemKey(item) }
                 };
                 var context = new SortableItemContext<TItem>(item, attrs);
-                sb.AddContent(i++, ItemContent?.Invoke(context));
+                sb.AddContent(1, ItemContent?.Invoke(context));
             }
         });
     }

src/Masa.Blazor/Components/Sortable/MSortableProviderBase.cs

@@ -179,8 +179,7 @@ public bool Disabled
     [Parameter] public EventCallback<string> OnRemove { get; set; }
 
     private IEnumerable<TItem>? _prevItems;
-    private HashSet<string> _prevItemKeys;
-    private List<string> _internalOrder;
+    private HashSet<string> _prevItemKeys = [];
     private string[] _prevOrder = [];
 
     private DotNetObjectReference<SortableJSInteropHandle>? _sortableJSInteropHandle;
@@ -224,15 +223,15 @@ protected override void OnParametersSet()
             _prevItems = Items;
             _prevItemKeys = GetItemKeys();
             _renderRateLimiter?.RecordRender();
-            RefreshOrder();
+            SortByOrder();
         }
         else
         {
             var keys = GetItemKeys();
             if (!_prevItemKeys.SetEquals(keys))
             {
                 _prevItemKeys = keys;
-                SortByInternalOrder();
+                SortByOrder();
             }
         }
 
@@ -256,12 +255,12 @@ private async Task InitAsync()
         {
             return;
         }
-        
+
         if (_sortableJSInteropHandle is null || ContainerSelector is null)
         {
             return;
         }
-        
+
         _jsObjectReference =
             await SortableJSModule.InitAsync(ContainerSelector, GenOptions(), Order, _sortableJSInteropHandle);
     }
@@ -294,53 +293,32 @@ private SortableOptions GenOptions()
         };
     }
 
-    private void UpdateOrderInternal(List<string> order)
+    public ValueTask UpdateOrder(List<string> order)
     {
-        _internalOrder = order;
         _ = OrderChanged.InvokeAsync(order);
-    }
-
-    public async ValueTask UpdateOrder(List<string> order)
-    {
-        UpdateOrderInternal(order);
+        return ValueTask.CompletedTask;
     }
 
     public async ValueTask HandleOnAdd(string key, List<string> order)
     {
-        UpdateOrderInternal(order);
-
+        _ = OrderChanged.InvokeAsync(order);
         await OnAdd.InvokeAsync(key);
     }
 
     public async ValueTask HandleOnRemove(string key, List<string> order)
     {
-        UpdateOrderInternal(order);
-
+        _ = OrderChanged.InvokeAsync(order);
         await OnRemove.InvokeAsync(key);
     }
 
-    private void RefreshOrder()
-    {
-        if (_jsObjectReference is null)
-        {
-            return;
-        }
-
-        NextTick(async () =>
-        {
-            var order = await _jsObjectReference.ToArrayAsync();
-            UpdateOrderInternal(order);
-        });
-    }
-
-    private void SortByInternalOrder()
+    private void SortByOrder()
     {
         if (_jsObjectReference is null)
         {
             return;
         }
 
-        NextTick(() => _ = _jsObjectReference.SortAsync(_internalOrder, false));
+        NextTick(() => _ = _jsObjectReference.SortAsync(Order, false).ConfigureAwait(false));
     }
 
     protected override async ValueTask DisposeAsyncCore()