Merge pull request #12 from 0phois/Checkbox-fix

[Fix] Acknowledge programmatically set initial state for checkbox/switch
0phois · Oct 21, 2024 · e38a5d0 · e38a5d0
2 parents 54f13c8 + 8159ad7
commit e38a5d0
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 9 deletions.
diff --git a/src/Components/MudStaticButton.razor b/src/Components/MudStaticButton.razor
@@ -50,7 +50,7 @@ else
 
     private RenderFragment RenderButton() 
     {
-        return@<button type="@GetButtonType()" disabled="@GetDisabledState()" class="@Classname" style="@Style" @attributes="@UserAttributes">
+        return @<button type="@GetButtonType()" disabled="@GetDisabledState()" class="@Classname" style="@Style" @attributes="@UserAttributes">
                     <span class="mud-button-label">
                         @if (!string.IsNullOrWhiteSpace(StartIcon))
                         {

diff --git a/src/Components/MudStaticCheckBox.razor b/src/Components/MudStaticCheckBox.razor
@@ -6,14 +6,14 @@
     <InputContent>
         <label class="@LabelClassname" id="@($"checkbox-container-{_elementId}")" @onclick:stopPropagation="@StopClickPropagation">
             <span tabindex="0" class="@CheckBoxClassname">
-                <input type="hidden" id="@($"empty-checkbox-{_elementId}")" name="@_name" value="False" />
+                <input type="hidden" id="@($"empty-checkbox-{_elementId}")" name="@_name" value="@_checkboxValue.ToString().ToLower()" />
                 <input tabindex="-1" @attributes="@UserAttributes" type="checkbox" class="mud-checkbox-input" value="True"
-                       aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(GetDisabledState().ToString().ToLower())"
+                       aria-checked="@_checkboxValue.ToString().ToLower()" aria-readonly="@(GetDisabledState().ToString().ToLower())"
                        id="@($"static-checkbox-{_elementId}")" disabled="@GetDisabledState()" @onclick:preventDefault="@GetReadOnlyState()"/>
-                <MudIcon Icon="@CheckedIcon" Color="HasErrors ? Color.Error : this.Color" Size="@Size"
-                         id="@($"check-icon-{_elementId}")" style="display: none;"/>
+                <MudIcon Icon="@CheckedIcon" Color="HasErrors ? Color.Error : this.Color" Size="@Size" 
+                         id="@($"check-icon-{_elementId}")" style="@($"display: {_checkedStyle}")"/>
                 <MudIcon Icon="@UncheckedIcon" Color="HasErrors ? Color.Error : this.UncheckedColor ?? Color.Inherit" Size="@Size"
-                         id="@($"unchecked-icon-{_elementId}")"/>
+                         id="@($"unchecked-icon-{_elementId}")" style="@($"display: {_uncheckedStyle}")"/>
             </span>
             @if (!string.IsNullOrEmpty(Label))
             {
@@ -33,6 +33,9 @@
     [Parameter] public Expression<Func<bool>>? ValueExpression { get; set; }
 
     private string _name = string.Empty;
+    private bool _checkboxValue = false;
+    private string _checkedStyle = string.Empty;
+    private string _uncheckedStyle = string.Empty;
     private readonly string _elementId = Guid.NewGuid().ToString()[..8];
 
     protected override void OnParametersSet()
@@ -53,6 +56,17 @@
             if (index > 0)
             {
                 _name = expression[(index + 2)..];
+
+                var compiledExpression = ValueExpression!.Compile();
+
+                _checkboxValue = compiledExpression();
+                _checkedStyle = _checkboxValue ? "block" : "none";
+                _uncheckedStyle = _checkboxValue ? "none" : "block";
+
+                if (_checkboxValue)
+                {
+                    UserAttributes["checked"] = "";
+                }
             }
         }
 

diff --git a/src/Components/MudStaticSwitch.razor b/src/Components/MudStaticSwitch.razor
@@ -9,9 +9,9 @@
             <span class="@SpanClassname">
                 <span tabindex="0" class="@SwitchClassname" id="@($"switch-container-{_elementId}")">
                     <span class="mud-switch-button">
-                        <input type="hidden" id="@($"empty-switch-{_elementId}")" name="@_name" value="False" />
+                        <input type="hidden" id="@($"empty-switch-{_elementId}")" name="@_name" value="@_switchValue.ToString().ToLower()" />
                         <input tabindex="-1" @attributes="@UserAttributes" type="checkbox" class="mud-switch-input" value="True"
-                               aria-checked="@((BoolValue == true).ToString().ToLower())" aria-readonly="@(GetDisabledState().ToString().ToLower())"
+                               aria-checked="@_switchValue.ToString().ToLower()" aria-readonly="@(GetDisabledState().ToString().ToLower())"
                                id="@($"static-switch-{_elementId}")" disabled="@GetDisabledState()" @onclick:preventDefault="@GetReadOnlyState()"/>
                         <span class="@ThumbClassname">
                             @if (!string.IsNullOrEmpty(ThumbIcon))
@@ -44,6 +44,7 @@
     [Parameter] public Expression<Func<bool>>? ValueExpression { get; set; }
 
     private string _name = string.Empty;
+    private bool _switchValue = false;
     private readonly string _elementId = Guid.NewGuid().ToString()[..8];
 
     protected override void OnParametersSet()
@@ -64,6 +65,15 @@
             if (index > 0) 
             {
                 _name = expression[(index + 2)..];
+
+                var compiledExpression = ValueExpression!.Compile();
+
+                _switchValue = compiledExpression();
+
+                if (_switchValue)
+                {
+                    UserAttributes["checked"] = "";
+                }
             }
         }
 

diff --git a/tests/StaticInput.UnitTests.Viewer/Components/Tests/CheckBox/CheckBoxInitTest.razor b/tests/StaticInput.UnitTests.Viewer/Components/Tests/CheckBox/CheckBoxInitTest.razor
@@ -0,0 +1,28 @@
+@using System.ComponentModel.DataAnnotations
+
+@inject NavigationManager NavigationManager
+
+<EditForm Model="Input" method="post" OnValidSubmit="OnValidSubmit" FormName="confirm">
+    <DataAnnotationsValidator />
+    <MudStaticCheckBox @bind-Value="Input.RememberMe" Class="my-4 ml-n4" Color="Color.Primary" Label="Remember Me" For="() => Input.RememberMe" />
+    <MudStaticButton FormAction="FormAction.Submit" Color="Color.Primary" Variant="Variant.Filled">Submit</MudStaticButton>
+</EditForm>
+
+@code {
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    private void OnValidSubmit() => NavigationManager.NavigateTo("");
+
+    protected override void OnInitialized()
+    {
+        Input.RememberMe = true;
+
+        base.OnInitialized();
+    }
+
+    private sealed class InputModel
+    {
+        public bool RememberMe { get; set; }
+    }
+}
diff --git a/tests/StaticInput.UnitTests.Viewer/Components/Tests/Switch/SwitchInitTest.razor b/tests/StaticInput.UnitTests.Viewer/Components/Tests/Switch/SwitchInitTest.razor
@@ -0,0 +1,28 @@
+@using System.ComponentModel.DataAnnotations
+
+@inject NavigationManager NavigationManager
+
+<EditForm Model="Input" method="post" OnValidSubmit="OnValidSubmit" FormName="confirm">
+    <DataAnnotationsValidator />
+    <MudStaticSwitch @bind-Value="Input.RememberMe" Class="my-4 ml-n4" Color="Color.Primary" Label="Remember Me" For="() => Input.RememberMe" />
+    <MudStaticButton FormAction="FormAction.Submit" Color="Color.Primary" Variant="Variant.Filled">Submit</MudStaticButton>
+</EditForm>
+
+@code {
+    [SupplyParameterFromForm]
+    private InputModel Input { get; set; } = new();
+
+    private void OnValidSubmit() => NavigationManager.NavigateTo("");
+
+    protected override void OnInitialized()
+    {
+        Input.RememberMe = true;
+
+        base.OnInitialized();
+    }
+
+    private sealed class InputModel
+    {
+        public bool RememberMe { get; set; }
+    }
+}
diff --git a/tests/StaticInput.UnitTests/Components/CheckBoxTests.cs b/tests/StaticInput.UnitTests/Components/CheckBoxTests.cs
@@ -32,7 +32,7 @@ public void CheckBox_Checked_Unchecked_Colors_Should_Differ()
             var unselected = boxes.First(x => x.Id!.Contains("unchecked-icon-"));
 
             selected.GetStyle().CssText.Should().Be("display: none");
-            unselected.GetStyle().CssText.Should().BeNullOrEmpty();
+            unselected.GetStyle().CssText.Should().Be("display: block");
 
             selected.ClassList.Should().Contain("mud-primary-text");
             unselected.ClassList.Should().Contain("mud-error-text");
@@ -126,6 +126,29 @@ public async Task CheckBox_Should_Checked_To_Submit()
             await Expect(Page).ToHaveTitleAsync("Home");
         }
 
+        [Fact]
+        public async Task Checkbox_Should_Initialize_True()
+        {
+            var url = typeof(CheckBoxInitTest).ToQueryString();
+
+            await Page.GotoAsync(url);
+
+            var selected = Page.GetByTestId(CheckedIcon());
+            var unselected = Page.GetByTestId(UncheckedIcon());
+            var checkbox = Page.Locator("input[type='checkbox']");
+
+            await Expect(selected).ToBeVisibleAsync();
+            await Expect(unselected).ToBeVisibleAsync(new() { Visible = false });
+
+            await Expect(checkbox).ToBeCheckedAsync();
+
+            await checkbox.UncheckAsync();
+
+            await Expect(checkbox).ToBeCheckedAsync(new() { Checked = false });
+            await Expect(selected).ToBeVisibleAsync(new() { Visible = false });
+            await Expect(unselected).ToBeVisibleAsync();
+        }
+
         [GeneratedRegex("check-icon-*")]
         private static partial Regex CheckedIcon();
 

diff --git a/tests/StaticInput.UnitTests/Components/SwitchTests.cs b/tests/StaticInput.UnitTests/Components/SwitchTests.cs
@@ -117,6 +117,22 @@ public async Task Switch_Should_BeSelected_To_Submit()
             await Expect(Page).ToHaveTitleAsync("Home");
         }
 
+        [Fact]
+        public async Task Switch_Should_Initialize_True()
+        {
+            var url = typeof(SwitchInitTest).ToQueryString();
+
+            await Page.GotoAsync(url);
+
+            var checkbox = Page.Locator("input[type='checkbox']");
+
+            await Expect(checkbox).ToBeCheckedAsync();
+
+            await checkbox.UncheckAsync();
+
+            await Expect(checkbox).ToBeCheckedAsync(new() { Checked = false });
+        }
+
         [GeneratedRegex("switch-container-*")]
         private static partial Regex MyRegex();
     }