fix: update parent checkbox state when new children are added dynamic…

…ally
telekom · Sep 25, 2023 · 04ab7ff · 04ab7ff
1 parent 8001a87
commit 04ab7ff
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -58,6 +58,8 @@ export class CheckboxGroup {
   private groupNode;
   private actionText: string;
 
+  private observer: MutationObserver;
+
   @Listen('scaleChange')
   handleCheckboxChange(ev) {
     const el = ev.composedPath()[0];
@@ -95,6 +97,23 @@ export class CheckboxGroup {
     }
   }
 
+  componentDidLoad() {
+    this.updateParentCheckboxState();
+    const slot = this.host.querySelector('fieldset');
+    this.observer = new MutationObserver(() => {
+      this.updateParentCheckboxState();
+    });
+    this.observer.observe(slot, {
+      childList: true,
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
   getChildNodes() {
     return Array.from(
       this.host.querySelector('fieldset').querySelectorAll('scale-checkbox')
@@ -161,8 +180,4 @@ export class CheckboxGroup {
       </Host>
     );
   }
-
-  componentDidLoad() {
-    this.updateParentCheckboxState();
-  }
 }