🎨 fix https://github.com/siyuan-note/siyuan/issues/7075

app/src/assets/scss/_menu.scss

@@ -5,6 +5,12 @@
   background-color: var(--b3-menu-background);
   padding: 8px;
   z-index: 210;
+  max-height: 80vh;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   &--list {
     overflow: auto;
@@ -20,7 +26,7 @@
   }
 
   &__item {
-    padding: 0 16px 0 8px;
+    padding: 0 8px;
     border-radius: 4px;
     user-select: none;
     display: flex;
@@ -43,18 +49,8 @@
     &--show {
       background-color: var(--b3-list-hover);
 
-      .b3-menu__submenu {
+      & > .b3-menu__submenu {
         display: block;
-        border: 1px solid var(--b3-theme-surface-lighter);
-        border-radius: 4px;
-        background-color: var(--b3-menu-background);
-        padding: 8px;
-        position: absolute;
-        left: calc(100% + 8px);
-        top: -8px;
-        box-shadow: var(--b3-dialog-shadow);
-        mix-blend-mode: difference;
-
 
         &--row {
           display: flex;
@@ -91,7 +87,7 @@
     &--current {
       background-color: var(--b3-list-hover);
 
-      .b3-menu__action {
+      & > .b3-menu__action {
         opacity: 1;
       }
     }
@@ -170,6 +166,18 @@
   &__submenu {
     overflow: auto;
     display: none;
+    max-height: 80vh;
+    border: 1px solid var(--b3-theme-surface-lighter);
+    border-radius: 4px;
+    background-color: var(--b3-menu-background);
+    padding: 8px;
+    position: fixed;
+    box-shadow: var(--b3-dialog-shadow);
+    z-index: 1;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &__accelerator {

app/src/layout/status.ts

@@ -35,9 +35,9 @@ export const initStatus = () => {
     <div class="b3-menu fn__none" style="bottom: 32px;right: 5px">
         <button id="barHelp" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconHelp"></use></svg><span class="b3-menu__label">${window.siyuan.languages.help}</span></button>
         <a href="${"zh_CN" === window.siyuan.config.lang ? "https://ld246.com/article/1649901726096" : "https://github.com/siyuan-note/siyuan/issues"}" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconHeart"></use></svg><span class="b3-menu__label">${window.siyuan.languages.feedback}</span></a>
+        <button id="barDebug" class="b3-menu__item${isBrowser() ? " fn__none" : ""}"><svg class="b3-menu__icon""><use xlink:href="#iconBug"></use></svg><span class="b3-menu__label">${window.siyuan.languages.debug}</span></button>
         <a href="https://b3log.org/siyuan" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconSiYuan"></use></svg><span class="b3-menu__label">${window.siyuan.languages["_trayMenu"].officialWebsite}</span></a>
         <a href="https://github.com/siyuan-note/siyuan" class="b3-menu__item"><svg class="b3-menu__icon""><use xlink:href="#iconGithub"></use></svg><span class="b3-menu__label">${window.siyuan.languages["_trayMenu"].openSource}</span></a>
-        <button id="barDebug" class="b3-menu__item${isBrowser() ? " fn__none" : ""}"><svg class="b3-menu__icon""><use xlink:href="#iconBug"></use></svg><span class="b3-menu__label">${window.siyuan.languages.debug}</span></button>
     </div>
 </div>`;
     const dockElement = document.getElementById("barDock");

app/src/menus/Menu.ts

@@ -20,9 +20,9 @@ export class Menu {
             if (itemElement.classList.contains("b3-menu__item--readonly")) {
                 return;
             }
-            const subMenuElement = itemElement.querySelector(".b3-menu__submenu");
+            const subMenuElement = itemElement.querySelector(".b3-menu__submenu") as HTMLElement;
             this.element.querySelectorAll(".b3-menu__item--show").forEach((item) => {
-                if (!item.contains(itemElement)) {
+                if (!item.contains(itemElement) && !item.isSameNode(itemElement) && !itemElement.contains(item)) {
                     item.classList.remove("b3-menu__item--show");
                 }
             });
@@ -38,25 +38,22 @@ export class Menu {
         });
     }
 
-    public showSubMenu(subMenuElement: Element) {
+    public showSubMenu(subMenuElement: HTMLElement) {
+        const parentRect = subMenuElement.parentElement.getBoundingClientRect();
+        subMenuElement.style.top = (parentRect.top - 8) + "px";
+        subMenuElement.style.left = (parentRect.right + 8) + "px";
+        subMenuElement.style.bottom = "auto";
         const rect = subMenuElement.getBoundingClientRect();
-        let style = "";
+        if (rect.right > window.innerWidth) {
-        const leftPosition = rect.left - this.element.clientWidth - rect.width;
+            if (parentRect.left - 8 > rect.width) {
-        if (rect.right > window.innerWidth && (
+                subMenuElement.style.left = (parentRect.left - 8 - rect.width) + "px";
-            leftPosition > 0 || Math.abs(leftPosition) < (rect.right - window.innerWidth))) {
-            if (leftPosition >= 0) {
-                style = "left:auto;right:calc(100% + 8px);";
             } else {
-                style = `z-index:1;mix-blend-mode: normal;left:-${this.element.style.left};`;
+                subMenuElement.style.left = (window.innerWidth - rect.width) + "px";
             }
-        } else if (rect.right > window.innerWidth) {
-            style = `z-index:1;mix-blend-mode: normal;left:${window.innerWidth - rect.width - this.element.offsetLeft}px;`;
         }
         if (rect.bottom > window.innerHeight) {
-            style += `top: auto;bottom:-5px;max-height:${Math.min(rect.top, window.innerHeight * 0.4)}px`;
+            subMenuElement.style.top = "auto";
-        }
+            subMenuElement.style.bottom = "8px";
-        if (style) {
-            subMenuElement.setAttribute("style", style);
         }
     }
 
@@ -87,7 +84,7 @@ export class Menu {
         this.element.append(element);
     }
 
-    public popup(options: { x: number, y: number, h?: number , w?: number }, isLeft = false) {
+    public popup(options: { x: number, y: number, h?: number, w?: number }, isLeft = false) {
         if (this.element.innerHTML === "") {
             return;
         }
@@ -183,44 +180,46 @@ export const bindMenuKeydown = (event: KeyboardEvent) => {
     if (window.siyuan.menus.menu.element.classList.contains("fn__none") || event.altKey || event.shiftKey || isCtrl(event)) {
         return false;
     }
-    if (event.code === "ArrowDown") {
+    if (event.code === "ArrowDown" || event.code === "ArrowUp") {
         const currentElement = window.siyuan.menus.menu.element.querySelector(".b3-menu__item--current");
         let actionMenuElement;
         if (!currentElement) {
-            actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.firstElementChild, true);
+            if (event.code === "ArrowUp") {
+                actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.lastElementChild, false);
+            } else {
+                actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.firstElementChild, true);
+            }
         } else {
             currentElement.classList.remove("b3-menu__item--current", "b3-menu__item--show");
-            actionMenuElement = getActionMenu(currentElement.nextElementSibling, true);
+            if (event.code === "ArrowUp") {
-            if (!actionMenuElement) {
+                actionMenuElement = getActionMenu(currentElement.previousElementSibling, false);
-                actionMenuElement = getActionMenu(currentElement.parentElement.firstElementChild, true);
+                if (!actionMenuElement) {
+                    actionMenuElement = getActionMenu(currentElement.parentElement.lastElementChild, false);
+                }
+            } else {
+                actionMenuElement = getActionMenu(currentElement.nextElementSibling, true);
+                if (!actionMenuElement) {
+                    actionMenuElement = getActionMenu(currentElement.parentElement.firstElementChild, true);
+                }
             }
         }
         if (actionMenuElement) {
             actionMenuElement.classList.add("b3-menu__item--current");
             actionMenuElement.classList.remove("b3-menu__item--show");
-        }
+
-    } else if (event.code === "ArrowUp") {
+            const parentRect = actionMenuElement.parentElement.getBoundingClientRect();
-        const currentElement = window.siyuan.menus.menu.element.querySelector(".b3-menu__item--current");
+            const actionMenuRect = actionMenuElement.getBoundingClientRect();
-        let actionMenuElement;
+            if (parentRect.top > actionMenuRect.top || parentRect.bottom < actionMenuRect.bottom) {
-        if (!currentElement) {
+                actionMenuElement.scrollIntoView(parentRect.top > actionMenuRect.top);
-            actionMenuElement = getActionMenu(window.siyuan.menus.menu.element.lastElementChild, false);
-        } else {
-            currentElement.classList.remove("b3-menu__item--current", "b3-menu__item--show");
-            actionMenuElement = getActionMenu(currentElement.previousElementSibling, false);
-            if (!actionMenuElement) {
-                actionMenuElement = getActionMenu(currentElement.parentElement.lastElementChild, false);
             }
         }
-        if (actionMenuElement) {
+        return true;
-            actionMenuElement.classList.add("b3-menu__item--current");
-            actionMenuElement.classList.remove("b3-menu__item--show");
-        }
     } else if (event.code === "ArrowRight") {
         const currentElement = window.siyuan.menus.menu.element.querySelector(".b3-menu__item--current");
         if (!currentElement) {
             return true;
         }
-        const subMenuElement = currentElement.querySelector(".b3-menu__submenu");
+        const subMenuElement = currentElement.querySelector(".b3-menu__submenu") as HTMLElement;
         if (!subMenuElement) {
             return true;
         }
@@ -231,19 +230,7 @@ export const bindMenuKeydown = (event: KeyboardEvent) => {
         if (actionMenuElement) {
             actionMenuElement.classList.add("b3-menu__item--current");
         }
-
+        window.siyuan.menus.menu.showSubMenu(subMenuElement);
-        const rect = subMenuElement.getBoundingClientRect();
-        let style = "";
-        if (rect.right > window.innerWidth && (rect.left - subMenuElement.clientWidth - rect.width > 0 ||
-            Math.abs(rect.left - subMenuElement.clientWidth - rect.width) < (rect.right - window.innerWidth))) {
-            style = "left:auto;right:calc(100% + 8px);";
-        }
-        if (rect.bottom > window.innerHeight) {
-            style += `top: auto;bottom:-5px;max-height:${Math.min(rect.top, window.innerHeight * 0.4)}px`;
-        }
-        if (style) {
-            subMenuElement.setAttribute("style", style);
-        }
         return true;
     } else if (event.code === "ArrowLeft") {
         const currentElement = window.siyuan.menus.menu.element.querySelector(".b3-menu__submenu .b3-menu__item--current");
@@ -273,18 +260,4 @@ export const bindMenuKeydown = (event: KeyboardEvent) => {
         }
         return true;
     }
-
-    // submenu scroll
-    if (event.code === "ArrowUp" || event.code === "ArrowDown") {
-        const currentMenuElement = window.siyuan.menus.menu.element.querySelector(".b3-menu__item--current") as HTMLElement;
-        const currentParentElement = currentMenuElement.parentElement;
-        if (currentParentElement.classList.contains("b3-menu__submenu")) {
-            if (currentMenuElement.offsetTop + currentMenuElement.clientHeight > currentParentElement.scrollTop + currentParentElement.clientHeight) {
-                currentParentElement.scrollTop = currentMenuElement.offsetTop + currentMenuElement.clientHeight - currentParentElement.clientHeight;
-            } else if (currentMenuElement.offsetTop < currentParentElement.scrollTop) {
-                currentParentElement.scrollTop = currentMenuElement.offsetTop;
-            }
-        }
-        return true;
-    }
 };