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`
+
+
+
+ `)
+ );
+ 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`