Fixes: issue where list could get out of order from results.

Updates Framework target .Net8/.Net9
Adds: OnDataChanged To Sortable It's self
Changes: all JSInvokable Methods are now Tasks and are awaited.

BlazorSortableJS.Demo/BlazorSortableJS.Demo.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>

BlazorSortableJS.Docs/BlazorSortableJS.Docs.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
 	<PropertyGroup>
-		<TargetFramework>net7.0</TargetFramework>
+		<TargetFramework>net9.0</TargetFramework>
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<RootNamespace>BlazorSortableJS.Docs</RootNamespace>
@@ -14,7 +14,7 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.4" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.0" />
 		<PackageReference Include="Markdig.SyntaxHighlighting" Version="1.0.0-custom" />
 		<PackageReference Include="Markdig" Version="0.26.0" />
 	</ItemGroup>

BlazorSortableJS.Docs/Samples/Components/SharedLists.razor

@@ -4,15 +4,15 @@
             <h6 class="text-center fw-bold">Set 1</h6>
             <Sortable TItem="string" Items="items" Class="list-group" Options="_options">
                 <Template Context="item">
-                    <div class="list-group-item">@item</div>
+                    <div class="list-group-item" @key="item">@item</div>
                 </Template>
             </Sortable>
         </div>
         <div class="col-4">
             <h6 class="text-center fw-bold">Set 2</h6>
             <Sortable TItem="string" Items="items2" Class="list-group" Options="_options">
                 <Template Context="item">
-                    <div class="list-group-item tinted">@item</div>
+                    <div class="list-group-item tinted" @key="item">@item</div>
                 </Template>
             </Sortable>
         </div>

BlazorSortableJS.Docs/Samples/Components/SimpleList.razor

@@ -25,6 +25,7 @@
         animation = 150,
         ghostClass = "blue-background-class"
     };
+
     private List<string> items = new List<string>
     {
         "Item 1-1",

BlazorSortableJS.Docs/wwwroot/Samples/Components/SharedLists.md

@@ -4,15 +4,15 @@
             <h6 class="text-center fw-bold">Set 1</h6>
             <Sortable TItem="string" Items="items" Class="list-group" Options="_options">
                 <Template Context="item">
-                    <div class="list-group-item">@item</div>
+                    <div class="list-group-item" @key="item">@item</div>
                 </Template>
             </Sortable>
         </div>
         <div class="col-4">
             <h6 class="text-center fw-bold">Set 2</h6>
             <Sortable TItem="string" Items="items2" Class="list-group" Options="_options">
                 <Template Context="item">
-                    <div class="list-group-item tinted">@item</div>
+                    <div class="list-group-item tinted" @key="item">@item</div>
                 </Template>
             </Sortable>
         </div>

BlazorSortableJS.Docs/wwwroot/Samples/Components/SimpleList.md

@@ -2,7 +2,7 @@
     <div class="col-6">
         <h6 class="text-center fw-bold">Sortable</h6>
         <SortableWrapper OnDataChanged="@(() => InvokeAsync(StateHasChanged))">
-            <Sortable TItem="string" Items="items" Class="list-group" Options="_options">
+            <Sortable TItem="string" Items="items" Class="list-group" Options="_options" OnDataChanged="Test">
                 <Template Context="item">
                     <div class="list-group-item">@item</div>
                 </Template>
@@ -25,6 +25,12 @@
         animation = 150,
         ghostClass = "blue-background-class"
     };
+    private async Task Test()
+    {
+        await Task.Delay(1000);
+        Console.WriteLine("Test");
+
+    }
     private List<string> items = new List<string>
     {
         "Item 1-1",

BlazorSortableJS.WASM/BlazorSortableJS.WASM.csproj

@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.4" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.4" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.0" PrivateAssets="all" />
   </ItemGroup>
 
   <ItemGroup>

BlazorSortableJS.sln

@@ -3,13 +3,13 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.6.33513.286
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorSortableJS.Demo", "BlazorSortableJS.Demo\BlazorSortableJS.Demo.csproj", "{8B68FE92-34BA-4A37-B7F4-887156F6C995}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorSortableJS.Demo", "BlazorSortableJS.Demo\BlazorSortableJS.Demo.csproj", "{8B68FE92-34BA-4A37-B7F4-887156F6C995}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorSortableJS", "BlazorSortableJS\BlazorSortableJS.csproj", "{669321D7-F88F-479A-A9D3-68C0144981F6}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorSortableJS", "BlazorSortableJS\BlazorSortableJS.csproj", "{669321D7-F88F-479A-A9D3-68C0144981F6}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorSortableJS.Docs", "BlazorSortableJS.Docs\BlazorSortableJS.Docs.csproj", "{39B09C26-A1EC-4542-82D4-4D21831BE856}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorSortableJS.Docs", "BlazorSortableJS.Docs\BlazorSortableJS.Docs.csproj", "{39B09C26-A1EC-4542-82D4-4D21831BE856}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorSortableJS.WASM", "BlazorSortableJS.WASM\BlazorSortableJS.WASM.csproj", "{79B32E3C-8C86-4A89-B5FC-C1EC7D735C1D}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorSortableJS.WASM", "BlazorSortableJS.WASM\BlazorSortableJS.WASM.csproj", "{79B32E3C-8C86-4A89-B5FC-C1EC7D735C1D}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

BlazorSortableJS/BlazorSortableJS.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
 	<PropertyGroup>
-		<TargetFrameworks>net6.0;net7.0</TargetFrameworks>
+		<TargetFrameworks>net8.0;net9.0</TargetFrameworks>
 		<Nullable>enable</Nullable>
 		<ImplicitUsings>enable</ImplicitUsings>
 		<PackageId>BlazorSortableJs</PackageId>
@@ -16,19 +16,19 @@
 		<RepositoryUrl>https://github.com/jbomhold3/BlazorSortableJS</RepositoryUrl>
 		<RepositoryType>git</RepositoryType>
 		<Copyright>John J Bomhold</Copyright>
-		<Version>2.0.0-Preview2</Version>
+		<Version>2.0.0-Preview3</Version>
 	</PropertyGroup>
 
 
 	<ItemGroup>
 		<SupportedPlatform Include="browser" />
 	</ItemGroup>
 
-	<ItemGroup Condition=" '$(TargetFramework)' == 'net6.0' ">
+	<ItemGroup Condition=" '$(TargetFramework)' == 'net8.0' ">
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.*" />
 	</ItemGroup>
 
-	<ItemGroup Condition=" '$(TargetFramework)' == 'net7.0' ">
+	<ItemGroup Condition=" '$(TargetFramework)' == 'net9.0' ">
 		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.*" />
 	</ItemGroup>
 </Project>

BlazorSortableJS/KeyedItem.cs

@@ -0,0 +1,8 @@
+namespace BlazorSortableJS
+{
+    internal sealed class KeyedItem<T>
+    {
+        public string Key { get; set; } = Guid.NewGuid().ToString();
+        public T Item { get; set; }
+    }
+}

BlazorSortableJS/Sortable.razor

@@ -6,10 +6,10 @@
 @ChildContent
 
 <div @ref="_dropZoneContainer" class="@Class">
-    @foreach (var item in Items)
+    @foreach (var keyedItem in _keyedItems)
     {
-        <Keyed @key="item">
-            @Template(item)
+        <Keyed @key="keyedItem.Key">
+            @Template(keyedItem.Item) 
         </Keyed>
     }
 </div>

BlazorSortableJS/Sortable.razor.cs

@@ -1,5 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using System.Text.Json;
 
 namespace BlazorSortableJS
 {
@@ -10,13 +11,17 @@ public partial class Sortable<TItem> : IAsyncDisposable
 
         [Parameter]
         public List<TItem> Items { get; set; } = new List<TItem> { };
-
+        private List<KeyedItem<TItem>> _keyedItems = new();
+        private List<TItem> _lastItems = new();
         [Parameter]
         public RenderFragment<TItem> Template { get; set; } = null!;
 
         [Parameter]
         public RenderFragment? ChildContent { get; set; }
 
+        [Parameter]
+        public Func<Task>? OnDataChanged { get; set; }
+
         [Parameter]
         public string Class { get; set; } = string.Empty;
         [Parameter]
@@ -25,6 +30,18 @@ public partial class Sortable<TItem> : IAsyncDisposable
         internal ElementReference _dropZoneContainer;
         private bool _shouldRender = true;
         private bool _hasPreRendered;
+
+        protected override void OnParametersSet()
+        {
+            if (!_lastItems.SequenceEqual(Items))
+            {
+                _lastItems = Items.Select(x => x).ToList() ;
+
+                _keyedItems = Items.Select((item, index) => new KeyedItem<TItem> { Key = Guid.NewGuid().ToString(), Item = item }).ToList();
+
+            }
+        }
+
         protected override void OnInitialized()
         {
             if(ParentSortable != null)
@@ -76,40 +93,52 @@ protected override bool ShouldRender()
         }
 
         [JSInvokable]
-        public void UpdateItemOrder(int oldIndex, int newIndex)
+        public async Task UpdateItemOrder(int oldIndex, int newIndex)
         {
             var item = Items[oldIndex];
             Items.RemoveAt(oldIndex);
             Items.Insert(newIndex, item);
             if (ParentSortable != null)
             {
                 if (ParentSortable.OnDataChanged.HasDelegate)
-                    _ = ParentSortable.OnDataChanged.InvokeAsync();
-                _ = ParentSortable.RefreshAsync();
+                    await ParentSortable.OnDataChanged.InvokeAsync();
+                await ParentSortable.RefreshAsync();
+            }
+            if(OnDataChanged is not null)
+            {
+                await OnDataChanged.Invoke();
             }
         }
 
         [JSInvokable]
-        public void RemoveItem(int index)
+        public async Task RemoveItem(int index)
         {
             Items.RemoveAt(index);
             if (ParentSortable != null)
             {
                 if (ParentSortable.OnDataChanged.HasDelegate)
-                    _ = ParentSortable.OnDataChanged.InvokeAsync();
-                _ = ParentSortable.RefreshAsync();
+                    await ParentSortable.OnDataChanged.InvokeAsync();
+                await ParentSortable.RefreshAsync();
+            }
+            if (OnDataChanged is not null)
+            {
+                await OnDataChanged.Invoke();
             }
         }
 
         [JSInvokable]
-        public void AddItem(int index, TItem item)
+        public async Task AddItem(int index, TItem item)
         {
-            Items.Insert(index, item);
+            Items.Insert(index, item );
             if (ParentSortable != null)
             {
                 if (ParentSortable.OnDataChanged.HasDelegate)
-                    _ = ParentSortable.OnDataChanged.InvokeAsync();
-                _ = ParentSortable.RefreshAsync();
+                    await ParentSortable.OnDataChanged.InvokeAsync();
+                await ParentSortable.RefreshAsync();
+            }
+            if (OnDataChanged is not null)
+            {
+                await OnDataChanged.Invoke();
             }
         }