MudSelect : SelectAll fix for #2651 (#2653)

* SelectAll fix * Method has been renamed after review
MudBlazor · Sep 10, 2021 · fabbaec · fabbaec
1 parent c375404
commit fabbaec
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 13 deletions.
diff --git a/src/MudBlazor.UnitTests.Viewer/TestComponents/Select/MultiSelectTest3.razor b/src/MudBlazor.UnitTests.Viewer/TestComponents/Select/MultiSelectTest3.razor
@@ -0,0 +1,33 @@
+@namespace MudBlazor.UnitTests.TestComponents
+
+<MudGrid>
+    <MudItem xs="12" md="12">
+        <MudSelect T="string" Label="Felines" HelperText="Pick your favorite feline"
+                   MultiSelection="true" OffsetY="true" DelimitedStringSeparator="^" SelectAll="true" SelectAllText="Select all felines"
+                   @bind-Value="value" @bind-SelectedValues="options" AdornmentIcon="@Icons.Material.Filled.Search"
+                   MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))">
+            @foreach (var feline in felines)
+            {
+                <MudSelectItem T="string" Value="@feline">@feline</MudSelectItem>
+            }
+        </MudSelect>
+    </MudItem>
+    <MudItem xs="12" md="6">
+        <MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
+    </MudItem>
+</MudGrid>
+
+@code {
+    private string value { get; set; } = "Nothing selected";
+    private HashSet<string> options { get; set; } = new HashSet<string>() { "Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger"};
+
+    private string[] felines =
+    {
+        "Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger"
+    };
+
+    private string GetMultiSelectionText(List<string> selectedValues)
+    {
+        return $"{selectedValues.Count} feline{(selectedValues.Count > 1 ? "s have" : " has")} been selected";
+    }
+}
diff --git a/src/MudBlazor.UnitTests.Viewer/TestComponents/Select/MultiSelectTest4.razor b/src/MudBlazor.UnitTests.Viewer/TestComponents/Select/MultiSelectTest4.razor
@@ -0,0 +1,33 @@
+@namespace MudBlazor.UnitTests.TestComponents
+
+<MudGrid>
+    <MudItem xs="12" md="12">
+        <MudSelect T="string" Label="Felines" HelperText="Pick your favorite feline"
+                   MultiSelection="true" OffsetY="true" DelimitedStringSeparator="^" SelectAll="true" SelectAllText="Select all felines"
+                   @bind-Value="value" @bind-SelectedValues="options" AdornmentIcon="@Icons.Material.Filled.Search"
+                   MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))">
+            @foreach (var feline in felines)
+            {
+                <MudSelectItem T="string" Value="@feline">@feline</MudSelectItem>
+            }
+        </MudSelect>
+    </MudItem>
+    <MudItem xs="12" md="6">
+        <MudText Typo="Typo.body2">MudSelect.Value: "@value"</MudText>
+    </MudItem>
+</MudGrid>
+
+@code {
+    private string value { get; set; } = "Nothing selected";
+    private HashSet<string> options { get; set; }
+
+    private string[] felines =
+    {
+        "Jaguar", "Leopard", "Lion", "Lynx", "Panther", "Puma", "Tiger"
+    };
+
+    private string GetMultiSelectionText(List<string> selectedValues)
+    {
+        return $"{selectedValues.Count} feline{(selectedValues.Count > 1 ? "s have" : " has")} been selected";
+    }
+}
diff --git a/src/MudBlazor.UnitTests/Components/SelectTests.cs b/src/MudBlazor.UnitTests/Components/SelectTests.cs
@@ -423,6 +423,38 @@ public void MultiSelect_SelectAll()
             validatedValue.Should().Be("FirstA^SecondA^ThirdA");
         }
 
+        [Test]
+        public void MultiSelect_SelectAll2()
+        {
+            var comp = Context.RenderComponent<MultiSelectTest3>();
+            // select element needed for the test
+            var select = comp.FindComponent<MudSelect<string>>();
+            var menu = comp.Find("div.mud-popover");
+            var input = comp.Find("div.mud-input-control");
+            // Open the menu
+            input.Click();
+            menu.ClassList.Should().Contain("mud-popover-open");
+            // Check that the icon corresponds to a checked checkbox
+            var mudListItem = comp.FindComponent<MudListItem>();
+            mudListItem.Instance.Icon.Should().Be("<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"/>");
+        }
+
+        [Test]
+        public void MultiSelect_SelectAll3()
+        {
+            var comp = Context.RenderComponent<MultiSelectTest4>();
+            // select element needed for the test
+            var select = comp.FindComponent<MudSelect<string>>();
+            var menu = comp.Find("div.mud-popover");
+            var input = comp.Find("div.mud-input-control");
+            // Open the menu
+            input.Click();
+            menu.ClassList.Should().Contain("mud-popover-open");
+            // Check that the icon corresponds to an unchecked checkbox
+            var mudListItem = comp.FindComponent<MudListItem>();
+            mudListItem.Instance.Icon.Should().Be("<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\"/>");
+        }
+
         [Test]
         public void SingleSelect_Should_CallValidationFunc()
         {

diff --git a/src/MudBlazor/Components/Select/MudSelect.razor.cs b/src/MudBlazor/Components/Select/MudSelect.razor.cs
@@ -164,6 +164,7 @@ protected override void OnAfterRender(bool firstRender)
                 // which supply the RenderFragment. So in this case, a second render is necessary
                 StateHasChanged();
             }
+            UpdateSelectAllChecked();
         }
 
         /// <summary>
@@ -324,19 +325,7 @@ public async Task SelectOption(object obj)
                     await SetTextAsync(string.Join(Delimiter, SelectedValues.Select(x => Converter.Set(x))));
                 }
 
-                if (_items.Count == SelectedValues.Count)
-                {
-                    _selectAllChecked = true;
-                }
-                else if (SelectedValues.Count == 0)
-                {
-                    _selectAllChecked = false;
-                }
-                else
-                {
-                    _selectAllChecked = null;
-                }
-
+                UpdateSelectAllChecked();
                 BeginValidate();
             }
             else
@@ -361,6 +350,25 @@ public async Task SelectOption(object obj)
             StateHasChanged();
         }
 
+        private void UpdateSelectAllChecked()
+        {
+            if (MultiSelection && SelectAll)
+            {
+                if (SelectedValues.Count == 0)
+                { 
+                    _selectAllChecked = false;
+                }
+                else if (_items.Count == SelectedValues.Count)
+                {
+                    _selectAllChecked = true;
+                }
+                else
+                {
+                    _selectAllChecked = null;
+                }
+            }
+        }
+
         public void ToggleMenu()
         {
             if (Disabled || ReadOnly)