fix(select-rich): sync selected el after add item on selected index

packages/select-rich/src/LionSelectRich.js

@@ -360,8 +360,10 @@ export class LionSelectRich extends OverlayMixin(
     const foundChecked = this.modelValue.find(subModelValue => subModelValue.checked);
     if (foundChecked && foundChecked.value !== this.checkedValue) {
       this.checkedValue = foundChecked.value;
+    }
 
-      // sync to invoker
+    // sync to invoker
+    if (this._invokerNode) {
       this._invokerNode.selectedElement = this.formElements[this.checkedIndex];
     }
 

packages/select-rich/test/lion-select-rich.test.js

@@ -7,6 +7,7 @@ import {
   unsafeStatic,
   nextFrame,
 } from '@open-wc/testing';
+import { LitElement } from '@lion/core';
 import '@lion/option/lion-option.js';
 import { OverlayController } from '@lion/overlays';
 
@@ -435,6 +436,90 @@ describe('lion-select-rich', () => {
         active: false,
       });
     });
+
+    it('keeps showing the selected item after a new item has been added in the selectedIndex position', async () => {
+      const mySelectContainerTagString = defineCE(
+        class extends LitElement {
+          static get properties() {
+            return {
+              colorList: Array,
+            };
+          }
+
+          constructor() {
+            super();
+            this.colorList = [];
+          }
+
+          render() {
+            return html`
+              <lion-select-rich label="Favorite color" name="color">
+                <lion-options slot="input">
+                  ${this.colorList.map(
+                    colorObj => html`
+                      <lion-option
+                        .modelValue=${{ value: colorObj.value, checked: colorObj.checked }}
+                        >${colorObj.label}</lion-option
+                      >
+                    `,
+                  )}
+                </lion-options>
+              </lion-select-rich>
+            `;
+          }
+        },
+      );
+      const mySelectContainerTag = unsafeStatic(mySelectContainerTagString);
+      const el = await fixture(html`
+        <${mySelectContainerTag}></${mySelectContainerTag}>
+      `);
+
+      const colorList = [
+        {
+          label: 'Red',
+          value: 'red',
+          checked: false,
+        },
+        {
+          label: 'Hotpink',
+          value: 'hotpink',
+          checked: true,
+        },
+        {
+          label: 'Teal',
+          value: 'teal',
+          checked: false,
+        },
+      ];
+
+      el.colorList = colorList;
+      el.requestUpdate();
+      await el.updateComplete;
+
+      const selectRich = el.shadowRoot.querySelector('lion-select-rich');
+      const invoker = selectRich._invokerNode;
+
+      // needed to properly set the checkedIndex and checkedValue
+      selectRich.requestUpdate();
+      await selectRich.updateComplete;
+
+      expect(selectRich.checkedIndex).to.equal(1);
+      expect(selectRich.checkedValue).to.equal('hotpink');
+      expect(invoker.selectedElement.value).to.equal('hotpink');
+
+      colorList.splice(1, 0, {
+        label: 'Blue',
+        value: 'blue',
+        checked: false,
+      });
+
+      el.requestUpdate();
+      await el.updateComplete;
+
+      expect(selectRich.checkedIndex).to.equal(2);
+      expect(selectRich.checkedValue).to.equal('hotpink');
+      expect(invoker.selectedElement.value).to.equal('hotpink');
+    });
   });
 
   describe('Subclassers', () => {