fix(MultiSelectGeneric): close button not work (dotnetcore#6754)

Author: ArgoZhang

src/BootstrapBlazor/Components/SelectGeneric/MultiSelectGeneric.razor

@@ -23,7 +23,7 @@
                     if (ShowCloseButton)
                     {
                         <div class="multi-select-item-group">
-                            <DynamicElement TagName="span" class="multi-select-close"
+                            <DynamicElement TagName="span" class="multi-select-close" data-bb-val="@GetValueString(item)"
                                             TriggerClick="@(!IsPopover)" OnClick="() => ToggleRow(item)">
                                 <i class="@CloseButtonIcon"></i>
                             </DynamicElement>
@@ -127,7 +127,7 @@
 
 @code {
     RenderFragment<SelectedItem<TValue>> RenderRow => item =>
-    @<DynamicElement OnClick="() => ToggleRow(item)" TriggerClick="@CheckCanTrigger(item)" class="@GetItemClassString(item)">
+    @<DynamicElement OnClick="() => ToggleItem(item)" TriggerClick="@CheckCanTrigger(item)" class="@GetItemClassString(item)">
         <div class="multi-select-item">
             <div class="form-check">
                 <input class="form-check-input" type="checkbox" disabled="@CheckCanSelect(item)" checked="@GetCheckedString(item)" />

src/BootstrapBlazor/Components/SelectGeneric/MultiSelectGeneric.razor.cs

@@ -385,7 +385,7 @@ public async Task ConfirmSelectedItem(int index)
         var rows = Rows;
         if (index < rows.Count)
         {
-            await ToggleRow(rows[index]);
+            await ToggleItem(rows[index]);
             StateHasChanged();
         }
     }
@@ -395,28 +395,45 @@ public async Task ConfirmSelectedItem(int index)
     /// </summary>
     /// <returns></returns>
     [JSInvokable]
-    public async Task ToggleRow(SelectedItem<TValue> val)
+    public async Task ToggleRow(string val)
     {
-        if (!IsDisabled)
+        if (int.TryParse(val, out var index) && index >= 0 && index < SelectedItems.Count)
         {
-            var item = SelectedItems.FirstOrDefault(i => Equals(i.Value, val.Value));
-            if (item != null)
-            {
-                SelectedItems.Remove(item);
-            }
-            else
+            var item = SelectedItems[index];
+            await ToggleRow(item);
+        }
+    }
+
+    private async Task ToggleRow(SelectedItem<TValue> item)
+    {
+        SelectedItems.Remove(item);
+
+        _isToggle = true;
+        // 更新选中值
+        await SetValue();
+    }
+
+    private string? GetValueString(SelectedItem<TValue> item) => IsPopover ? SelectedItems.IndexOf(item).ToString() : null;
+
+    private async Task ToggleItem(SelectedItem<TValue> val)
+    {
+        var item = SelectedItems.FirstOrDefault(i => Equals(i.Value, val.Value));
+        if (item != null)
+        {
+            SelectedItems.Remove(item);
+        }
+        else
+        {
+            var d = Rows.FirstOrDefault(i => Equals(i.Value, val.Value));
+            if (d != null)
             {
-                var d = Rows.FirstOrDefault(i => Equals(i.Value, val.Value));
-                if (d != null)
-                {
-                    SelectedItems.Add(d);
-                }
+                SelectedItems.Add(d);
             }
-
-            _isToggle = true;
-            // 更新选中值
-            await SetValue();
         }
+
+        _isToggle = true;
+        // 更新选中值
+        await SetValue();
     }
 
     private int _min;