diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index 808fedaea..b38473d8a 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -159,6 +159,12 @@ export class LionSelectRich extends ScopedElementsMixin( return this.modelValue; } + // Duplicating from FormGroupMixin, because you cannot independently inherit/override getter + setter. + // If you override one, gotta override the other, they go in pairs. + set serializedValue(value) { + super.serializedValue = value; + } + get checkedIndex() { let checkedIndex = -1; this.formElements.forEach((option, i) => { diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 80ee8571e..a8054c01f 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -205,7 +205,7 @@ describe('lion-select-rich', () => { Red - Hotpink + Hotpink Teal @@ -215,6 +215,25 @@ describe('lion-select-rich', () => { expect(el.modelValue).to.equal(''); }); + it('supports changing the selection through serializedValue setter', async () => { + const el = await fixture(html` + + + Red + Hotpink + Teal + + + `); + + expect(el.checkedIndex).to.equal(0); + expect(el.serializedValue).to.equal('red'); + + el.serializedValue = 'hotpink'; + expect(el.checkedIndex).to.equal(1); + expect(el.serializedValue).to.equal('hotpink'); + }); + describe('Invoker', () => { it('generates an lion-select-invoker if no invoker is provided', async () => { const el = await fixture(html`