From 267d60ccae7be1fe51af003feef68de2c22047c7 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 25 Sep 2023 09:23:53 -0700
Subject: [PATCH 1/3] fix(action-bar): overflow actions when
 overflowActionsDisabled is set to false.

---
 .../src/components/action-bar/action-bar.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

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

From 39d12f009c73ed5b96a1aba4d1415514441e5205 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 25 Sep 2023 15:16:06 -0700
Subject: [PATCH 2/3] add test

---
 .../components/action-bar/action-bar.e2e.ts   | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)

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..d09eba614ca 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,43 @@ 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({
+        html: html`<div style="width:500px; height:500px;">
+          <calcite-action-bar style="height: 290px" overflow-actions-disabled>
+            <calcite-action-group id="dynamic-group"
+              ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
+              <calcite-action text="Styles" icon="shapes"></calcite-action>
+              <calcite-action text="Styles" icon="shapes"></calcite-action>
+              <calcite-action text="Filter" icon="layer-filter"></calcite-action>
+              <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
+              <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
+              <calcite-action text="Labels" icon="label" active></calcite-action>
+              <calcite-action text="Table" icon="table"></calcite-action
+            ></calcite-action-group>
+            <calcite-action-group>
+              <calcite-action text="Save" icon="save" disabled></calcite-action>
+              <calcite-action icon="layers" text="Layers"></calcite-action>
+            </calcite-action-group>
+            <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
+          </calcite-action-bar>
+        </div>`,
+      });
+      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`<div style="width:500px; height:500px;">

From d580622f6bb90e56acc3a248ff1d1dee732ee31a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 27 Sep 2023 10:40:15 -0700
Subject: [PATCH 3/3] review fixes

---
 .../components/action-bar/action-bar.e2e.ts   | 41 +++++++++----------
 .../src/components/action-bar/action-bar.tsx  |  4 +-
 2 files changed, 22 insertions(+), 23 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
index d09eba614ca..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
@@ -369,27 +369,26 @@ describe("calcite-action-bar", () => {
     });
 
     it("should slot 'menu-actions' on sublist changes after being enabled", async () => {
-      const page = await newE2EPage({
-        html: html`<div style="width:500px; height:500px;">
-          <calcite-action-bar style="height: 290px" overflow-actions-disabled>
-            <calcite-action-group id="dynamic-group"
-              ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
-              <calcite-action text="Styles" icon="shapes"></calcite-action>
-              <calcite-action text="Styles" icon="shapes"></calcite-action>
-              <calcite-action text="Filter" icon="layer-filter"></calcite-action>
-              <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
-              <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
-              <calcite-action text="Labels" icon="label" active></calcite-action>
-              <calcite-action text="Table" icon="table"></calcite-action
-            ></calcite-action-group>
-            <calcite-action-group>
-              <calcite-action text="Save" icon="save" disabled></calcite-action>
-              <calcite-action icon="layers" text="Layers"></calcite-action>
-            </calcite-action-group>
-            <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
-          </calcite-action-bar>
-        </div>`,
-      });
+      const page = await newE2EPage();
+      await page.setContent(html`<div style="width:500px; height:500px;">
+        <calcite-action-bar style="height: 290px" overflow-actions-disabled>
+          <calcite-action-group id="dynamic-group"
+            ><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
+            <calcite-action text="Styles" icon="shapes"></calcite-action>
+            <calcite-action text="Styles" icon="shapes"></calcite-action>
+            <calcite-action text="Filter" icon="layer-filter"></calcite-action>
+            <calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
+            <calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
+            <calcite-action text="Labels" icon="label" active></calcite-action>
+            <calcite-action text="Table" icon="table"></calcite-action
+          ></calcite-action-group>
+          <calcite-action-group>
+            <calcite-action text="Save" icon="save" disabled></calcite-action>
+            <calcite-action icon="layers" text="Layers"></calcite-action>
+          </calcite-action-group>
+          <calcite-action slot="actions-end" text="Tips" icon="lightbulb"></calcite-action>
+        </calcite-action-bar>
+      </div>`);
       await page.waitForChanges();
       await page.waitForTimeout(overflowActionsDebounceInMs + 10);
 
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 8d3717bb89b..9fb28e23edb 100755
--- a/packages/calcite-components/src/components/action-bar/action-bar.tsx
+++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx
@@ -115,11 +115,11 @@ export class ActionBar
   @Watch("overflowActionsDisabled")
   overflowDisabledHandler(overflowActionsDisabled: boolean): void {
     if (overflowActionsDisabled) {
-      this.resizeObserver.disconnect();
+      this.resizeObserver?.disconnect();
       return;
     }
 
-    this.resizeObserver.observe(this.el);
+    this.resizeObserver?.observe(this.el);
     this.overflowActions();
   }