From 38dff7cd9eab60667ee415e59dd4287ae9ab8bb0 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 8 Dec 2023 16:50:44 -0800
Subject: [PATCH] fix(action-menu): keep internal popover open property in sync
 (#8387)

**Related Issue:** #7445

## Summary

- Keep open property in sync with open property of internal popover
- Update menu button element when connectedCallback occurs.
- Add test
---
 .../src/components/action-menu/action-menu.e2e.ts        | 4 ++++
 .../src/components/action-menu/action-menu.tsx           | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
index 5ebc0677d44..2a6141135ab 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
+++ b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -139,6 +139,8 @@ describe("calcite-action-menu", () => {
 
     expect(await popover.getProperty("autoClose")).toBe(true);
 
+    expect(await popover.getProperty("open")).toBe(true);
+
     expect(await actionMenu.getProperty("open")).toBe(true);
 
     const outside = await page.find("#outside");
@@ -148,6 +150,8 @@ describe("calcite-action-menu", () => {
     await page.waitForChanges();
 
     expect(await actionMenu.getProperty("open")).toBe(false);
+
+    expect(await popover.getProperty("open")).toBe(false);
   });
 
   it("should close menu if slotted action is clicked", async () => {
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index 556f1b5783f..b095c3a947e 100755
--- a/packages/calcite-components/src/components/action-menu/action-menu.tsx
+++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -43,6 +43,10 @@ export class ActionMenu implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
+  connectedCallback(): void {
+    this.connectMenuButtonEl();
+  }
+
   componentWillLoad(): void {
     setUpLoadableComponent(this);
   }
@@ -294,6 +298,7 @@ export class ActionMenu implements LoadableComponent {
         label={label}
         offsetDistance={0}
         onCalcitePopoverClose={this.handlePopoverClose}
+        onCalcitePopoverOpen={this.handlePopoverOpen}
         open={open}
         overlayPositioning={overlayPositioning}
         placement={placement}
@@ -500,6 +505,10 @@ export class ActionMenu implements LoadableComponent {
     this.open = value;
   };
 
+  private handlePopoverOpen = (): void => {
+    this.open = true;
+  };
+
   private handlePopoverClose = (): void => {
     this.open = false;
   };