From 8bab94aacb3a17e938a1e8c2bf5daa6a9bd84e9e Mon Sep 17 00:00:00 2001
From: Kerwin Bryant <kerwin612@qq.com>
Date: Sat, 12 Apr 2025 04:57:07 +0000
Subject: [PATCH] fix

---
 web_src/css/base.css                      |  2 +-
 web_src/js/webcomponents/overflow-menu.ts | 23 ++++++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index a4fc94ad2e..1757ff0538 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -748,7 +748,7 @@ overflow-menu .overflow-menu-button {
 }
 
 overflow-menu .overflow-menu-button.active {
-  margin: 0 0 -2px;
+  padding: 2px 0 0;
   border-bottom: 2px solid transparent;
   background-color: transparent;
   border-color: currentcolor;
diff --git a/web_src/js/webcomponents/overflow-menu.ts b/web_src/js/webcomponents/overflow-menu.ts
index cfcd3e3a4f..a3ebf7b3fc 100644
--- a/web_src/js/webcomponents/overflow-menu.ts
+++ b/web_src/js/webcomponents/overflow-menu.ts
@@ -14,6 +14,11 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   mutationObserver: MutationObserver;
   lastWidth: number;
 
+  updateButtonActivationState() {
+    if (!this.button || !this.tippyContent) return;
+    toggleClass(this.button, 'active', Boolean(this.tippyContent.querySelector('.item.active')));
+  }
+
   updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
@@ -125,9 +130,18 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
       this.tippyContent.append(item);
     }
 
+    // close tippy when clicking item of tippy
+    const items = this.tippyContent.querySelectorAll<HTMLElement>('.item');
+    for (const item of items) {
+      item.addEventListener('click', () => {
+        this.button?._tippy.hide();
+      });
+    }
+
     // update existing tippy
     if (this.button?._tippy) {
       this.button._tippy.setContent(this.tippyContent);
+      this.updateButtonActivationState();
       return;
     }
 
@@ -138,6 +152,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
     btn.innerHTML = octiconKebabHorizontal;
     this.append(btn);
     this.button = btn;
+    this.updateButtonActivationState();
 
     createTippy(btn, {
       trigger: 'click',
@@ -153,10 +168,6 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
         }, 0);
       },
     });
-
-    this.tippyContent.querySelector('.item').addEventListener('click', () => {
-      this.button._tippy.hide();
-    });
   });
 
   init() {
@@ -225,9 +236,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   }
 
   attributeChangedCallback() {
-    if (!this.button || !this.tippyContent) return;
-    const containActiveInTippy = this.tippyContent.querySelector('.item.active');
-    toggleClass(this.button, 'active', Boolean(containActiveInTippy));
+    this.updateButtonActivationState();
   }
 
   disconnectedCallback() {