From 4d8ac73d0c43e1dab92e4ebce79dbeac41133010 Mon Sep 17 00:00:00 2001
From: Ben Elan <belan@esri.com>
Date: Tue, 30 Nov 2021 17:52:33 -0800
Subject: [PATCH 1/2] fix(shell-panel): click events correctly  pass through
 the shell-panel host

---
 src/components/calcite-shell-panel/calcite-shell-panel.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.scss b/src/components/calcite-shell-panel/calcite-shell-panel.scss
index 39328f4dc57..d05fdcf3fb3 100755
--- a/src/components/calcite-shell-panel/calcite-shell-panel.scss
+++ b/src/components/calcite-shell-panel/calcite-shell-panel.scss
@@ -1,7 +1,8 @@
 :host {
   @apply flex
     items-stretch
-    flex-initial;
+    flex-initial
+    pointer-events-none;
   --calcite-shell-panel-detached-max-height: unset;
 }
 

From 2edf36b52ddbe035f4fc3303b854c91f45389c94 Mon Sep 17 00:00:00 2001
From: Ben Elan <belan@esri.com>
Date: Wed, 1 Dec 2021 11:20:28 -0800
Subject: [PATCH 2/2] add test

---
 .../calcite-shell-panel.e2e.ts                   | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts b/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
index d70f7e53809..1fae43e8a19 100644
--- a/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
+++ b/src/components/calcite-shell-panel/calcite-shell-panel.e2e.ts
@@ -386,4 +386,20 @@ describe("calcite-shell-panel", () => {
     expect(separator.getAttribute("aria-valuenow")).toBe("330");
     expect((await content.getComputedStyle()).width).toBe("330px");
   });
+
+  it("click event should pass through host element", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-shell content-behind>
+        <calcite-shell-panel slot="primary-panel" position="start" detached></calcite-shell-panel>
+        <calcite-action text="test" style="height: 100%; width: 100%;" text-enabled></calcite-action>
+      </calcite-shell>`
+    );
+
+    await page.waitForChanges();
+    const shellPanel = await page.find("calcite-shell-panel");
+    await shellPanel.click();
+    await page.waitForChanges();
+    expect(await page.evaluate((selector) => document.activeElement.matches(selector), "calcite-action")).toBe(true);
+  });
 });