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);