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 index bcb5b69295b..c0a5fb735c4 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts +++ b/packages/calcite-components/src/components/action-bar/action-bar.e2e.ts @@ -368,6 +368,42 @@ describe("calcite-action-bar", () => { expect(await page.findAll(slottedActionsSelector)).toHaveLength(7); }); + it("should slot 'menu-actions' on sublist changes after being enabled", async () => { + const page = await newE2EPage(); + await page.setContent(html`
+ + + + + + + + + + + + + + + +
`); + await page.waitForChanges(); + await page.waitForTimeout(overflowActionsDebounceInMs + 10); + + expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); + expect(await page.findAll(slottedActionsSelector)).toHaveLength(0); + + const actionBar = await page.find("calcite-action-bar"); + actionBar.setProperty("overflowActionsDisabled", false); + await page.waitForChanges(); + await page.waitForTimeout(overflowActionsDebounceInMs + 10); + + expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8); + expect(await page.findAll(slottedActionsSelector)).toHaveLength(7); + }); + it.skip("should slot 'menu-actions' on resize of component", async () => { const page = await newE2EPage({ html: html`
diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 850d4bf2014..9fb28e23edb 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -114,9 +114,13 @@ export class ActionBar @Watch("overflowActionsDisabled") overflowDisabledHandler(overflowActionsDisabled: boolean): void { - overflowActionsDisabled - ? this.resizeObserver.disconnect() - : this.resizeObserver.observe(this.el); + if (overflowActionsDisabled) { + this.resizeObserver?.disconnect(); + return; + } + + this.resizeObserver?.observe(this.el); + this.overflowActions(); } /**