diff --git a/app/components/Sidebar/App.tsx b/app/components/Sidebar/App.tsx
index 84de17ab5..d14f45419 100644
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -82,7 +82,10 @@ function AppSidebar() {
}
- onClick={ui.toggleCollapsedSidebar}
+ onClick={() => {
+ ui.toggleCollapsedSidebar();
+ (document.activeElement as HTMLElement)?.blur();
+ }}
/>
diff --git a/app/components/Sidebar/Settings.tsx b/app/components/Sidebar/Settings.tsx
index fe4cc7de5..437a1749e 100644
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -50,7 +50,10 @@ function SettingsSidebar() {
}
- onClick={ui.toggleCollapsedSidebar}
+ onClick={() => {
+ ui.toggleCollapsedSidebar();
+ (document.activeElement as HTMLElement)?.blur();
+ }}
/>
diff --git a/app/components/Sidebar/Sidebar.tsx b/app/components/Sidebar/Sidebar.tsx
index bf22e985d..30d0b8510 100644
--- a/app/components/Sidebar/Sidebar.tsx
+++ b/app/components/Sidebar/Sidebar.tsx
@@ -48,6 +48,7 @@ const Sidebar = React.forwardRef(function _Sidebar(
const [isHovering, setHovering] = React.useState(false);
const [isAnimating, setAnimating] = React.useState(false);
const [isResizing, setResizing] = React.useState(false);
+ const [hasPointerMoved, setPointerMoved] = React.useState(false);
const isSmallerThanMinimum = width < minWidth;
const handleDrag = React.useCallback(
@@ -100,21 +101,33 @@ const Sidebar = React.forwardRef(function _Sidebar(
);
const handlePointerMove = React.useCallback(() => {
- setHovering(true);
- }, []);
+ if (ui.sidebarIsClosed) {
+ setHovering(true);
+ setPointerMoved(true);
+ }
+ }, [ui.sidebarIsClosed]);
const handlePointerLeave = React.useCallback(
(ev) => {
- setHovering(
- ev.pageX < width &&
- ev.pageX > 0 &&
- ev.pageY < window.innerHeight &&
- ev.pageY > 0
- );
+ if (hasPointerMoved) {
+ setHovering(
+ ev.pageX < width &&
+ ev.pageX > 0 &&
+ ev.pageY < window.innerHeight &&
+ ev.pageY > 0
+ );
+ }
},
- [width]
+ [width, hasPointerMoved]
);
+ React.useEffect(() => {
+ if (ui.sidebarIsClosed) {
+ setHovering(false);
+ setPointerMoved(false);
+ }
+ }, [ui.sidebarIsClosed]);
+
React.useEffect(() => {
if (isAnimating) {
setTimeout(() => setAnimating(false), ANIMATION_MS);