diff --git a/packages/radio-group/src/LionRadioGroup.js b/packages/radio-group/src/LionRadioGroup.js index ab7d471ef..a70fcc695 100644 --- a/packages/radio-group/src/LionRadioGroup.js +++ b/packages/radio-group/src/LionRadioGroup.js @@ -35,7 +35,8 @@ export class LionRadioGroup extends LionFieldset { } get serializedValue() { - return this._getCheckedRadioElement().serializedValue; + const el = this._getCheckedRadioElement(); + return el ? el.serializedValue : ''; } set serializedValue(value) { @@ -43,7 +44,8 @@ export class LionRadioGroup extends LionFieldset { } get formattedValue() { - return this._getCheckedRadioElement().formattedValue; + const el = this._getCheckedRadioElement(); + return el ? el.formattedValue : ''; } set formattedValue(value) { diff --git a/packages/radio-group/test/lion-radio-group.test.js b/packages/radio-group/test/lion-radio-group.test.js index 77b26eccd..8f5b56835 100644 --- a/packages/radio-group/test/lion-radio-group.test.js +++ b/packages/radio-group/test/lion-radio-group.test.js @@ -211,4 +211,31 @@ describe('', () => { el.formElements['gender[]'][0].choiceChecked = true; expect(el.error.required).to.be.undefined; }); + + it('returns serialized value', async () => { + const group = await fixture(html` + + + + + `); + + await nextFrame(); + group.formElements['gender[]'][0].choiceChecked = true; + + expect(group.serializedValue).to.deep.equal({ checked: true, value: 'male' }); + }); + + it('returns serialized value on unchecked state', async () => { + const group = await fixture(html` + + + + + `); + + await nextFrame(); + + expect(group.serializedValue).to.deep.equal(''); + }); });