From 0c6c5a915b136f8fdbad300f719bb852d09fe220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dan=20B=C3=BCschlen?= <danbueschlen@gmail.com>
Date: Tue, 23 Jul 2024 14:16:19 +0200
Subject: [PATCH] fix(dropdown): properly handle the document click events when
 the element is used in a shadow dom

fix(select): properly handle the document click events when the element is used in a shadow dom
---
 src/components/dropdown/Dropdown.js           |  2 +-
 src/components/dropdown/test/dropdown.test.js | 23 ++++++++++++++++---
 src/components/select/Select.js               |  6 +----
 src/components/select/test/select.test.js     | 15 ++++++++++++
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
index 89e488b7..7f3bfa8b 100644
--- a/src/components/dropdown/Dropdown.js
+++ b/src/components/dropdown/Dropdown.js
@@ -65,7 +65,7 @@ export class LeuDropdown extends LeuElement {
   }
 
   _documentClickHandler = (event) => {
-    if (!this.contains(event.target)) {
+    if (!event.composedPath().includes(this)) {
       this.expanded = false
     }
   }
diff --git a/src/components/dropdown/test/dropdown.test.js b/src/components/dropdown/test/dropdown.test.js
index c4b5677f..cc291c16 100644
--- a/src/components/dropdown/test/dropdown.test.js
+++ b/src/components/dropdown/test/dropdown.test.js
@@ -1,10 +1,13 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
 
 import "../leu-dropdown.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-dropdown label="Download">
+async function defaultFixture(args = { expanded: false }) {
+  return fixture(html` <leu-dropdown
+    label="Download"
+    ?expanded=${args.expanded}
+  >
     <leu-menu>
       <leu-menu-item>Als CSV Tabelle</leu-menu-item>
       <leu-menu-item>Als XLS Tabelle</leu-menu-item>
@@ -28,4 +31,18 @@ describe("LeuDropdown", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("closes the popup when the document is clicked outside the component", async () => {
+    const el = await defaultFixture()
+
+    const toggleButton = el.shadowRoot.querySelector("leu-button")
+    toggleButton.click()
+    await elementUpdated(el)
+
+    expect(el.expanded).to.be.true
+
+    document.body.click()
+
+    expect(el.expanded).to.be.false
+  })
 })
diff --git a/src/components/select/Select.js b/src/components/select/Select.js
index 76ee91f8..65d30c07 100644
--- a/src/components/select/Select.js
+++ b/src/components/select/Select.js
@@ -203,11 +203,7 @@ export class LeuSelect extends LeuElement {
    * @param {MouseEvent} event
    */
   _handleDocumentClick = (event) => {
-    if (
-      event.target instanceof Node &&
-      !this.contains(event.target) &&
-      this.open
-    ) {
+    if (!event.composedPath().includes(this) && this.open) {
       this._closeDropdown()
     }
   }
diff --git a/src/components/select/test/select.test.js b/src/components/select/test/select.test.js
index 596c025e..ea719be2 100644
--- a/src/components/select/test/select.test.js
+++ b/src/components/select/test/select.test.js
@@ -404,4 +404,19 @@ describe("LeuSelect", () => {
     const popup = el.shadowRoot.querySelector("leu-popup")
     expect(popup.active).to.not.be.true
   })
+
+  it("closes the popup when the document is clicked outside the component", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    document.body.click()
+
+    const popup = el.shadowRoot.querySelector("leu-popup")
+    expect(popup.active).to.not.be.true
+  })
 })