Skip to content

Commit 42ffdf6

Browse files
authored
Fix radio button reset after submitting enhanced form (#51796) (#52219)
# [release 8.0] Fix radio button reset after submitting enhanced form Manual backport of dotnet/aspnetcore#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 dotnet/aspnetcore#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
1 parent 3de09fa commit 42ffdf6

File tree

3 files changed

+19
-3
lines changed

3 files changed

+19
-3
lines changed

dist/Release/blazor.web.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/Rendering/DomMerging/DomSync.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,7 @@ function ensureEditableValueSynchronized(destination: Element, value: any) {
354354
} else if (destination instanceof HTMLSelectElement && destination.selectedIndex !== value) {
355355
destination.selectedIndex = value as number;
356356
} else if (destination instanceof HTMLInputElement) {
357-
if (destination.type === 'checkbox') {
357+
if (destination.type === 'checkbox' || destination.type === 'radio') {
358358
if (destination.checked !== value) {
359359
destination.checked = value as boolean;
360360
}
@@ -368,7 +368,7 @@ function getEditableElementValue(elem: Element): string | boolean | number | nul
368368
if (elem instanceof HTMLSelectElement) {
369369
return elem.selectedIndex;
370370
} else if (elem instanceof HTMLInputElement) {
371-
return elem.type === 'checkbox' ? elem.checked : (elem.getAttribute('value') || '');
371+
return elem.type === 'checkbox' || elem.type === 'radio' ? elem.checked : (elem.getAttribute('value') || '');
372372
} else if (elem instanceof HTMLTextAreaElement) {
373373
return elem.value;
374374
} else {

test/DomSync.test.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,22 @@ describe('DomSync', () => {
485485
expect(checkboxElem.value).toBe('second');
486486
});
487487

488+
test('should handle radio buttons with value attribute', () => {
489+
// Radio buttons require even more special-case handling because their 'value' attribute
490+
// has to be handled as a regular attribute, and 'checked' must be handled similarly
491+
// to 'value' on other inputs
492+
493+
const destination = makeExistingContent(`<input type='radio' value='first' checked />`);
494+
const newContent = makeNewContent(`<input type='radio' value='second' checked />`);
495+
496+
const checkboxElem = destination.startExclusive.nextSibling as HTMLInputElement;
497+
498+
// Act/Assert
499+
synchronizeDomContent(destination, newContent);
500+
expect(checkboxElem.checked).toBeTruthy();
501+
expect(checkboxElem.value).toBe('second');
502+
});
503+
488504
test('should treat doctype nodes as unchanged', () => {
489505
// Can't update a doctype after the document is created, nor is there a use case for doing so
490506
// We just have to skip them, as it would be an error to try removing or inserting them

0 commit comments

Comments
 (0)