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();
}
/**