From f5eb0eaabfcfdb3e666439436d4b5c9a559984d5 Mon Sep 17 00:00:00 2001
From: oki07 <takashi.oki@uzabase.com>
Date: Sat, 23 Nov 2024 14:31:28 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?=
 =?UTF-8?q?=E7=AB=AF=E3=82=92=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=E3=82=82=E9=96=89=E3=81=98=E3=81=A6=E3=81=97=E3=81=BE?=
 =?UTF-8?q?=E3=81=86=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dropdownAction/sp-dropdown-action.ts      | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/dropdownAction/sp-dropdown-action.ts b/src/components/dropdownAction/sp-dropdown-action.ts
index 3968024..c10cd7f 100644
--- a/src/components/dropdownAction/sp-dropdown-action.ts
+++ b/src/components/dropdownAction/sp-dropdown-action.ts
@@ -94,7 +94,7 @@ export class SpDropdownAction extends HTMLElement {
   connectedCallback() {
     this.#buttonElement.addEventListener(
       "click",
-      this.#toggleMenuVisibility.bind(this),
+      this.#handleClickButton.bind(this),
     );
 
     this.#baseElement.appendChild(this.#buttonElement);
@@ -103,8 +103,8 @@ export class SpDropdownAction extends HTMLElement {
     this.#menuElement.role = "menu";
     this.#menuElement.appendChild(this.#menuSlotElement);
 
-    this.#menuSlotElement.addEventListener("click", this.#closeMenu.bind(this));
-    window.addEventListener("click", this.#closeMenu.bind(this));
+    this.#menuSlotElement.addEventListener("click", this.#handleClickMenu.bind(this));
+    window.addEventListener("click", this.#handleClickOutside.bind(this));
 
     this.#baseElement.appendChild(this.#menuElement);
     this.#baseElement.classList.add("base");
@@ -116,8 +116,8 @@ export class SpDropdownAction extends HTMLElement {
   }
 
   disconnectedCallback() {
-    this.#menuSlotElement.removeEventListener("click", this.#closeMenu.bind(this));
-    window.removeEventListener("click", this.#closeMenu.bind(this));
+    this.#menuSlotElement.removeEventListener("click", this.#handleClickMenu.bind(this));
+    window.removeEventListener("click", this.#handleClickOutside.bind(this));
   }
 
   attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@@ -142,22 +142,29 @@ export class SpDropdownAction extends HTMLElement {
     }
   }
 
-  #toggleMenuVisibility(event: MouseEvent) {
+  #handleClickButton(event: MouseEvent) {
     event.stopPropagation();
 
     this.open = !this.open;
     this.#updateAriaExpandedAttribute();
   }
 
-  #closeMenu() {
-    if (!this.open) {
-      return
-    };
+  #handleClickMenu(event: MouseEvent) {
+    event.stopPropagation();
 
     this.open = false;
     this.#updateAriaExpandedAttribute();
   }
   
+  #handleClickOutside(event: MouseEvent) {
+    event.stopPropagation();
+
+    if (!this.contains(event.target as Node)) {
+      this.open = false;
+      this.#updateAriaExpandedAttribute();
+    }
+  }
+  
   #updateMenuDisplay() {
     this.#menuElement.style.display = this.open && !this.disabled ? "block" : "none";
   }