From fbada5e6cec113552f19ee746c50017e1f56222c Mon Sep 17 00:00:00 2001
From: Ben Elan <benelan@users.noreply.github.com>
Date: Wed, 1 Dec 2021 11:37:27 -0800
Subject: [PATCH] fix(shell-panel): click events correctly pass through the
 host element (#3607)

* fix(shell-panel): click events correctly  pass through the shell-panel host

* add test
---
 .../calcite-shell-panel.e2e.ts                   | 16 ++++++++++++++++
 .../calcite-shell-panel/calcite-shell-panel.scss |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

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);
+  });
 });
diff --git a/src/components/calcite-shell-panel/calcite-shell-panel.scss b/src/components/calcite-shell-panel/calcite-shell-panel.scss
index 20201a1cbe3..2cb49e011db 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;
 }