Fix InputCheckbox when initially checked. Fixes #8502

Author: SteveSandersonMS

src/Components/Components/src/Forms/InputComponents/InputCheckbox.cs

@@ -27,7 +27,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddAttribute(1, "type", "checkbox");
             builder.AddAttribute(2, "id", Id);
             builder.AddAttribute(3, "class", CssClass);
-            builder.AddAttribute(4, "value", BindMethods.GetValue(CurrentValue));
+            builder.AddAttribute(4, "checked", BindMethods.GetValue(CurrentValue));
             builder.AddAttribute(5, "onchange", BindMethods.SetValueHandler(__value => CurrentValue = __value, CurrentValue));
             builder.CloseElement();
         }

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -244,17 +244,27 @@ public void InputCheckboxInteractsWithEditContext()
         {
             var appElement = MountTestComponent<TypicalValidationComponent>();
             var acceptsTermsInput = appElement.FindElement(By.ClassName("accepts-terms")).FindElement(By.TagName("input"));
+            var isEvilInput = appElement.FindElement(By.ClassName("is-evil")).FindElement(By.TagName("input"));
             var messagesAccessor = CreateValidationMessagesAccessor(appElement);
 
+            // Correct initial checkedness
+            Assert.False(acceptsTermsInput.Selected);
+            Assert.True(isEvilInput.Selected);
+
             // Validates on edit
             Browser.Equal("valid", () => acceptsTermsInput.GetAttribute("class"));
+            Browser.Equal("valid", () => isEvilInput.GetAttribute("class"));
             acceptsTermsInput.Click();
+            isEvilInput.Click();
             Browser.Equal("modified valid", () => acceptsTermsInput.GetAttribute("class"));
+            Browser.Equal("modified valid", () => isEvilInput.GetAttribute("class"));
 
             // Can become invalid
             acceptsTermsInput.Click();
+            isEvilInput.Click();
             Browser.Equal("modified invalid", () => acceptsTermsInput.GetAttribute("class"));
-            Browser.Equal(new[] { "Must accept terms" }, messagesAccessor);
+            Browser.Equal("modified invalid", () => isEvilInput.GetAttribute("class"));
+            Browser.Equal(new[] { "Must accept terms", "Must not be evil" }, messagesAccessor);
         }
 
         [Fact]

src/Components/test/testassets/BasicTestApp/FormsTest/TypicalValidationComponent.razor

@@ -39,6 +39,9 @@
     <p class="accepts-terms">
         Accepts terms: <InputCheckbox bind-Value="@person.AcceptsTerms" />
     </p>
+    <p class="is-evil">
+        Is evil: <InputCheckbox bind-Value="@person.IsEvil" />
+    </p>
 
     <button type="submit">Submit</button>
 
@@ -72,6 +75,9 @@
         [Required, Range(typeof(bool), "true", "true", ErrorMessage = "Must accept terms")]
         public bool AcceptsTerms { get; set; }
 
+        [Required, Range(typeof(bool), "false", "false", ErrorMessage = "Must not be evil")]
+        public bool IsEvil { get; set; } = true;
+
         [Required, StringLength(20, ErrorMessage = "Description is max 20 chars")]
         public string Description { get; set; }