Fix(lion-radio-group): Resetting a group containing options with form…

…atters (#2101)

* fix(lion-radio-group): Resetting a group containing options with formatters doesn't check the default value

* refactor: update test name

.changeset/forty-books-peel.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+fix: Resetting a radio-group containing options with formatters doesn't check the default value

packages/ui/components/radio-group/src/LionRadioGroup.js

@@ -23,7 +23,7 @@ export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement))
         child.reset();
         // If the value was initially checked save this
         if (child.checked) {
-          initValue = child.value;
+          initValue = child.choiceValue;
         }
       }
     });

packages/ui/components/radio-group/test/lion-radio-group.test.js

@@ -49,6 +49,35 @@ describe('<lion-radio-group>', () => {
       await el.updateComplete;
       expect(el.modelValue).to.deep.equal('female');
     });
+
+    it('restores default values if changes were made to a group containing options with formatters', async () => {
+      const formatter = /** @type {(modelValue: { value: string}) => string} */ modelValue =>
+        modelValue.value.charAt(0);
+      const el = await fixture(html`
+        <lion-radio-group name="gender" label="Gender">
+          <lion-radio label="Male" .formatter=${formatter} .choiceValue=${'male'}></lion-radio>
+          <lion-radio
+            label="Female"
+            .formatter=${formatter}
+            .modelValue=${{ value: 'female', checked: true }}
+          ></lion-radio>
+          <lion-radio label="Other" .formatter=${formatter} .choiceValue=${'other'}></lion-radio>
+        </lion-radio-group>
+      `);
+      el.formElements[0].checked = true;
+      expect(el.modelValue).to.deep.equal('male');
+
+      el.resetGroup();
+      expect(el.modelValue).to.deep.equal('female');
+
+      el.formElements[2].checked = true;
+      expect(el.modelValue).to.deep.equal('other');
+
+      el.resetGroup();
+      await el.formElements[1].updateComplete;
+      await el.updateComplete;
+      expect(el.modelValue).to.deep.equal('female');
+    });
   });
 
   it('should have role = radiogroup', async () => {