Fix radio button reset after submitting enhanced form (#51796)

* fix radio button reset when submitting enhanced form

* rename test

* new fix

* Update src/Components/Web.JS/test/DomSync.test.ts

Co-authored-by: Steve Sanderson <[email protected]>

* Update src/Components/Web.JS/src/Rendering/DomMerging/DomSync.ts

Co-authored-by: Steve Sanderson <[email protected]>

---------

Co-authored-by: Steve Sanderson <[email protected]>

Author: surayya-MS

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -354,7 +354,7 @@ function ensureEditableValueSynchronized(destination: Element, value: any) {
   } else if (destination instanceof HTMLSelectElement && destination.selectedIndex !== value) {
     destination.selectedIndex = value as number;
   } else if (destination instanceof HTMLInputElement) {
-    if (destination.type === 'checkbox') {
+    if (destination.type === 'checkbox' || destination.type === 'radio') {
       if (destination.checked !== value) {
         destination.checked = value as boolean;
       }
@@ -368,7 +368,7 @@ function getEditableElementValue(elem: Element): string | boolean | number | nul
   if (elem instanceof HTMLSelectElement) {
     return elem.selectedIndex;
   } else if (elem instanceof HTMLInputElement) {
-    return elem.type === 'checkbox' ? elem.checked : (elem.getAttribute('value') || '');
+    return elem.type === 'checkbox' || elem.type === 'radio' ? elem.checked : (elem.getAttribute('value') || '');
   } else if (elem instanceof HTMLTextAreaElement) {
     return elem.value;
   } else {

src/Components/Web.JS/dist/Release/blazor.web.js

@@ -485,6 +485,22 @@ describe('DomSync', () => {
     expect(checkboxElem.value).toBe('second');
   });
 
+  test('should handle radio buttons with value attribute', () => {
+    // Radio buttons require even more special-case handling because their 'value' attribute
+    // has to be handled as a regular attribute, and 'checked' must be handled similarly
+    // to 'value' on other inputs
+
+    const destination = makeExistingContent(`<input type='radio' value='first' checked />`);
+    const newContent = makeNewContent(`<input type='radio' value='second' checked />`);
+
+    const checkboxElem = destination.startExclusive.nextSibling as HTMLInputElement;
+
+    // Act/Assert
+    synchronizeDomContent(destination, newContent);
+    expect(checkboxElem.checked).toBeTruthy();
+    expect(checkboxElem.value).toBe('second');
+  });
+
   test('should treat doctype nodes as unchanged', () => {
     // Can't update a doctype after the document is created, nor is there a use case for doing so
     // We just have to skip them, as it would be an error to try removing or inserting them

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -1337,6 +1337,26 @@ void AssertUiState(string expectedStringValue, bool expectedBoolValue)
         }
     }
 
+    [Fact]
+    public void RadioButtonGetsResetAfterSubmittingEnhancedForm()
+    {
+        GoTo("forms/form-with-checkbox-and-radio-button");
+
+        Assert.False(Browser.Exists(By.Id("checkbox")).Selected);
+        Assert.False(Browser.Exists(By.Id("radio-button")).Selected);
+
+        Browser.Exists(By.Id("checkbox")).Click();
+        Browser.Exists(By.Id("radio-button")).Click();
+
+        Assert.True(Browser.Exists(By.Id("checkbox")).Selected);
+        Assert.True(Browser.Exists(By.Id("radio-button")).Selected);
+
+        Browser.Exists(By.Id("submit-button")).Click();
+
+        Assert.False(Browser.Exists(By.Id("checkbox")).Selected);
+        Assert.False(Browser.Exists(By.Id("radio-button")).Selected);
+    }
+
     // Can't just use GetAttribute or GetDomAttribute because they both auto-resolve it
     // to an absolute URL. We want to be able to assert about the attribute's literal value.
     private string ReadFormActionAttribute(IWebElement form)

src/Components/Web.JS/src/Rendering/DomMerging/DomSync.ts

@@ -0,0 +1,8 @@
+@page "/forms/form-with-checkbox-and-radio-button"
+<h1>Form With Radio Button</h1>
+
+<form data-enhance>
+    <input type="checkbox" id="checkbox" value="test-checkbox">
+    <input type="radio" id="radio-button" value="test-radio">
+    <button type="submit" id="submit-button">Submit</button>
+</form>