chore: - added test to assert that modelValue of lion-select is updated when the value or text of one or more options are changed

- added changeset

.changeset/violet-ducks-suffer.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+lion-select: added test to assert that modelValue of lion-select is updated when the value or text of one or more options are changed

packages/ui/components/select/src/LionSelect.js

@@ -64,7 +64,8 @@ export class LionSelect extends LionFieldWithSelect {
     this.__selectObserver = new MutationObserver(() => {
       this._syncValueUpwards();
       // We need to force computation of other values in case model didn't change
-      // TODO: consider bringing this generically in FormatMixin._syncValueUpwards
+      // This can happen when options are loaded asynchronously so the modelValue doesn't change
+      // The MutationObserver detects this and makes sure the modelValue is updated
       this._calculateValues({ source: 'model' });
     });
 

packages/ui/components/select/test/lion-select.test.js

@@ -44,6 +44,31 @@ describe('lion-select', () => {
     expect(lionSelect.formattedValue).to.equal('');
   });
 
+  it('updates the formattedValue correctly when the value for the selected option is updated', async () => {
+    const lionSelect = /** @type {LionSelect} */ (
+      await fixture(html`
+        <lion-select label="Foo item" .modelValue="${'nr2'}">
+          <select slot="input">
+            <option value="nr1">Item 1</option>
+            <option value="nr2"></option>
+            <option value="nr3"></option>
+          </select>
+        </lion-select>
+      `)
+    );
+    expect(lionSelect.serializedValue).to.equal('nr2');
+    expect(lionSelect.formattedValue).to.equal('');
+
+    const select = /** @type {HTMLSlotElement} */ (
+      lionSelect.shadowRoot?.querySelector('slot[name=input]')
+    ).assignedElements()[0];
+    const options = select.querySelectorAll('option');
+    options[1].textContent = 'Item 2';
+
+    await aTimeout;
+    expect(lionSelect.formattedValue).to.equal('Item 2');
+  });
+
   it('is accessible', async () => {
     const lionSelect = await fixture(html`
       <lion-select .modelValue="${'nr2'}">