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

# [release 8.0] Fix radio button reset after submitting enhanced form

Manual backport of #51796

## Description
This PR fixes resetting radio button checked property after submitting an enhanced form.

```html
<form data-enhance>
    <input type="radio" />
    <button>Submit</button>
</form>
```
Workaround is to remove `data-enhance` attribute.

Fixes #51429

## Customer Impact

Without this change customers will have bad experience using enhanced form that contains radio button. Radio button won't get reset after submitting the form.

## Regression?

- [ ] Yes
- [x] No

[If yes, specify the version the behavior has regressed from]

## Risk

- [ ] High
- [ ] Medium
- [x] Low

This is a minor change. We have similar logic for checkbox approved  #50991. There are unit and e2e tests for this change.

## Verification

- [x] Manual (required)
- [x] Automated

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [x] N/A

----

## When servicing release/2.1

- [ ] Make necessary changes in eng/PatchConfig.props

Fixes #51429

Author: surayya-MS

src/Components/Web.JS/dist/Release/blazor.web.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/src/Rendering/DomMerging/DomSync.ts

@@ -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/test/DomSync.test.ts

@@ -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);
+    }
+
     [Fact]
     public void SubmitButtonFormactionAttributeOverridesEnhancedFormAction()
     {

src/Components/test/E2ETest/ServerRenderingTests/FormHandlingTests/FormWithParentBindingContextTest.cs

@@ -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>