From 853c517ec035b4396754b004270783a5fc5a18af Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Tue, 5 Jul 2022 16:31:44 +0200
Subject: [PATCH] fix(select): sync values with async option contents

---
 packages/ui/components/select/src/LionSelect.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/ui/components/select/src/LionSelect.js b/packages/ui/components/select/src/LionSelect.js
index 0a53b51d6..1ae4b7f0a 100644
--- a/packages/ui/components/select/src/LionSelect.js
+++ b/packages/ui/components/select/src/LionSelect.js
@@ -60,6 +60,19 @@ export class LionSelect extends LionFieldWithSelect {
   connectedCallback() {
     super.connectedCallback();
     this._inputNode.addEventListener('change', this._proxyChangeEvent);
+
+    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._calculateValues({ source: 'model' });
+    });
+
+    this.__selectObserver.observe(this._inputNode, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
   }
 
   /** @param {import('lit').PropertyValues } changedProperties */
@@ -82,6 +95,7 @@ export class LionSelect extends LionFieldWithSelect {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._inputNode.removeEventListener('change', this._proxyChangeEvent);
+    this.__selectObserver?.disconnect();
   }
 
   /**