Remove checked attr for radio-button by default

packages/dom/src/serialize-inputs.js

@@ -7,6 +7,16 @@ export function serializeInputElements({ dom, clone, warnings }) {
     switch (elem.type) {
       case 'checkbox':
       case 'radio':
+        /*
+          here we are removing the checked attr if present by default,
+          so that only the current selected radio-button will have the checked attr present in the dom
+
+          this happens because in html, when the checked attribute is present in the multiple radio-buttons by default,
+          the browser will only render the last checked radio-button as when the user is selecting any particular button,
+          the checked attribute on other buttons is not removed,
+          hence sometimes it shows inconsistent state even though the `element.checked` attribute returns correct state
+        */
+        cloneEl.removeAttribute('checked');
         if (elem.checked) {
           cloneEl.setAttribute('checked', '');
         }

packages/dom/test/serialize-inputs.test.js

@@ -16,12 +16,19 @@ describe('serializeInputs', () => {
         <input id="mailing" type="checkbox" />
         <label for="mailing">Subscribe?</label>
 
-        <input id="radio" type="radio" />
+        <input id="radio" type="radio" checked=""/>
         <label for="radio">Radio</label>
 
         <input id="nevercheckedradio" type="radio" />
         <label for="nevercheckedradio">Never checked</label>
 
+        <form>
+          <input type="radio" id="option1" name="option" value="option1" checked>
+          <label for="option1">Option 1</label><br>
+          <input type="radio" id="option2" name="option" value="option2" checked>
+          <label for="option2">Option 2</label><br>
+        </form>
+
         <label for="singleSelect">Does this work?</label>
         <select id="singleSelect">
           <option value="yes">Yes</option>
@@ -84,9 +91,20 @@ describe('serializeInputs', () => {
     });
 
     it(`${platform}: serializes checked radio buttons`, () => {
+      expect($('#radio')[0].outerHTML).toContain('checked=""');
       expect($('#radio')[0].checked).toBe(true);
     });
 
+    it(`${platform}: removes checked attr from radio-buttons if present in dom by default but radio is not checked`, () => {
+      // validates `checked=""` is removed from the dom for option1 as it is not checked
+      expect($('#option1')[0].outerHTML).not.toContain('checked=""');
+      expect($('#option1')[0].checked).toBe(false);
+
+      // validates `checked=""` is not removed from the dom for option2 as it is in checked state
+      expect($('#option2')[0].outerHTML).toContain('checked=""');
+      expect($('#option2')[0].checked).toBe(true);
+    });
+
     it(`${platform}: serializes textareas`, () => {
       expect($('#feedback')[0].innerText).toBe('This is my feedback... And it is not very helpful');
     });
@@ -124,7 +142,7 @@ describe('serializeInputs', () => {
 
     it(`${platform}: adds a guid data-attribute to the original DOM`, () => {
       // plain platform has extra element #test-shadow
-      expect(dom.querySelectorAll('[data-percy-element-id]')).toHaveSize(platform === 'plain' ? 10 : 9);
+      expect(dom.querySelectorAll('[data-percy-element-id]')).toHaveSize(platform === 'plain' ? 12 : 11);
     });
 
     it(`${platform}: adds matching guids to the orignal DOM and cloned DOM`, () => {