From a47a6e615baa40d320c0499e028333077d96a1e0 Mon Sep 17 00:00:00 2001
From: Danny Moerkerke <danny.moerkerke@ing.com>
Date: Wed, 1 Feb 2023 14:58:28 +0100
Subject: [PATCH] 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             |  5 ++++
 .../ui/components/select/src/LionSelect.js    |  3 ++-
 .../select/test/lion-select.test.js           | 25 +++++++++++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/violet-ducks-suffer.md

diff --git a/.changeset/violet-ducks-suffer.md b/.changeset/violet-ducks-suffer.md
new file mode 100644
index 000000000..d82dabf31
--- /dev/null
+++ b/.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
diff --git a/packages/ui/components/select/src/LionSelect.js b/packages/ui/components/select/src/LionSelect.js
index 1ae4b7f0a..7c8d0515c 100644
--- a/packages/ui/components/select/src/LionSelect.js
+++ b/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' });
     });
 
diff --git a/packages/ui/components/select/test/lion-select.test.js b/packages/ui/components/select/test/lion-select.test.js
index 9b3ac4d9a..20f2867e9 100644
--- a/packages/ui/components/select/test/lion-select.test.js
+++ b/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'}">