From 4ebc4ece34296a964021f5c2ec19090033444546 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 19 Feb 2026 18:31:38 +0200
Subject: [PATCH] fix(mobile/tree): "toggle sidebar" tooltip shown after
 opening sidebar

---
 .../mobile_widgets/toggle_sidebar_button.tsx      | 15 ++++++++++-----
 apps/client/src/widgets/react/ActionButton.tsx    |  4 ++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx b/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx
index 8e689954b0..b87e8cb90e 100644
--- a/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx
+++ b/apps/client/src/widgets/mobile_widgets/toggle_sidebar_button.tsx
@@ -1,5 +1,5 @@
-import ActionButton from "../react/ActionButton";
 import { t } from "../../services/i18n";
+import ActionButton from "../react/ActionButton";
 import { useNoteContext } from "../react/hooks";
 
 export default function ToggleSidebarButton() {
@@ -10,10 +10,15 @@ export default function ToggleSidebarButton() {
             { noteContext?.isMainContext() && <ActionButton
                 icon="bx bx-sidebar"
                 text={t("note_tree.toggle-sidebar")}
-                onClick={() => parentComponent?.triggerCommand("setActiveScreen", {
-                    screen: "tree"
-                })}
+                onClick={(e) => {
+                    // Remove focus to prevent tooltip showing on top of the sidebar.
+                    (e.currentTarget as HTMLButtonElement).blur();
+
+                    parentComponent?.triggerCommand("setActiveScreen", {
+                        screen: "tree"
+                    });
+                }}
             />}
         </div>
-    )
+    );
 }
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index feb5972ef4..764e155c44 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "preact/hooks";
 
 import { CommandNames } from "../../components/app_context";
 import keyboard_actions from "../../services/keyboard_actions";
+import { isMobile } from "../../services/utils";
 import { useStaticTooltip } from "./hooks";
 
 export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu" | "style"> {
@@ -17,6 +18,8 @@ export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement
     disabled?: boolean;
 }
 
+const cachedIsMobile = isMobile();
+
 export default function ActionButton({ text, icon, className, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled, ...restProps }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
@@ -25,6 +28,7 @@ export default function ActionButton({ text, icon, className, triggerCommand, ti
         title: keyboardShortcut?.length ? `${text} (${keyboardShortcut?.join(",")})` : text,
         placement: titlePosition ?? "bottom",
         fallbackPlacements: [ titlePosition ?? "bottom" ],
+        trigger: cachedIsMobile ? "focus" : "hover focus",
         animation: false
     });