fix(action-pad): update layout on action-group elements slotted after…

… initialization. #10353
Esri · Sep 19, 2024 · 3c1f77e · 3c1f77e
1 parent 6f42a86
commit 3c1f77e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts
@@ -532,6 +532,18 @@ describe("calcite-action-bar", () => {
     await page.waitForChanges();
 
     expect(await group.getProperty("layout")).toBe("vertical");
+
+    actionBar.innerHTML = html`
+      <calcite-action-group></calcite-action-group>
+      <calcite-action-group></calcite-action-group>
+    `;
+    await page.waitForChanges();
+
+    const groups = await page.findAll("calcite-action-group");
+
+    groups.forEach(async (group) => {
+      expect(await group.getProperty("layout")).toBe("vertical");
+    });
   });
 
   describe("theme", () => {

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts b/packages/calcite-components/src/components/action-pad/action-pad.e2e.ts
@@ -347,6 +347,18 @@ describe("calcite-action-pad", () => {
     await page.waitForChanges();
 
     expect(await group.getProperty("layout")).toBe("vertical");
+
+    actionPad.innerHTML = html`
+      <calcite-action-group></calcite-action-group>
+      <calcite-action-group></calcite-action-group>
+    `;
+    await page.waitForChanges();
+
+    const groups = await page.findAll("calcite-action-group");
+
+    groups.forEach(async (group) => {
+      expect(await group.getProperty("layout")).toBe("vertical");
+    });
   });
 
   describe("theme", () => {

diff --git a/packages/calcite-components/src/components/action-pad/action-pad.tsx b/packages/calcite-components/src/components/action-pad/action-pad.tsx
@@ -172,12 +172,14 @@ export class ActionPad
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   disconnectedCallback(): void {
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);
+    this.mutationObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {