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`