mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-03 00:58:50 +01:00
9848f86215
Problem:
--------
Commit 5ed1f2991 introduced a layout shift regression when opening the
sidebar. The UI would visibly "jump" as elements shifted right before
the animation completed. Closing the sidebar worked correctly.
Root Cause Analysis:
--------------------
The accessibility PR added a redundant `{navVisible && ...}` conditional
wrapper around the `<nav>` content inside Nav.tsx's `motion.div`. This
caused a race condition:
1. User clicks "Open Sidebar" button
2. `navVisible` state becomes `true`
3. React renders the `motion.div` AND its children simultaneously
4. The inner `{navVisible && (<nav>...)}` renders content at full width
(320px/260px) BEFORE framer-motion applies `initial={{ width: 0 }}`
5. Brief flash of full-width content causes visible layout shift
6. Animation then starts from width: 0, but damage is done
The ref-based focus management (passing `openSidebarRef`/`closeSidebarRef`
through context) was suspected but was not the actual cause. However,
`requestAnimationFrame` focus calls during animation start could trigger
forced layout calculations, exacerbating the issue.
Solution:
---------
1. Remove redundant conditional rendering in Nav.tsx
- The outer `{navVisible && (<motion.div>...)}` already controls
visibility
- The `overflow-x-hidden` class on motion.div clips content during
animation
- Content should always exist inside motion.div for smooth clipping
2. Replace ref-based focus with ID-based focus management
- Refs passed through component tree can affect React's reconciliation
- Using `document.getElementById()` decouples focus from render cycle
- Exported `CLOSE_SIDEBAR_ID` and `OPEN_SIDEBAR_ID` constants for
consistency
3. Delay focus until after animation completes
- Changed from `requestAnimationFrame` to `setTimeout(..., 250)`
- Animation duration is 200ms; 250ms ensures completion
- Prevents layout thrashing during animation
4. Clean up prop drilling
- Removed `openSidebarRef`/`closeSidebarRef` from Root.tsx context
- Simplified Nav.tsx, Header.tsx, NewChat.tsx prop signatures
- Updated ContextType to remove ref properties
Files Changed:
--------------
- client/src/routes/Root.tsx
- client/src/components/Nav/Nav.tsx
- client/src/components/Nav/NewChat.tsx
- client/src/components/Chat/Header.tsx
- client/src/components/Chat/Menus/OpenSidebar.tsx
- client/src/common/types.ts
Accessibility Note:
-------------------
The original inner conditional was added to prevent keyboard navigation
to hidden sidebar content for screen readers. This is still handled by:
- AnimatePresence unmounting the motion.div after exit animation
- The motion.div having width: 0 during exit (content not reachable)
- Screen readers typically skip content being animated out
- Other: removed non-existant prop from BookmarkNav
Testing:
--------
- Verified smooth animation when opening sidebar (no layout shift)
- Verified smooth animation when closing sidebar (unchanged)
- Verified focus transfers correctly between open/close buttons
- Verified keyboard navigation works as expected
53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { TooltipAnchor, Button, Sidebar } from '@librechat/client';
|
|
import { useLocalize } from '~/hooks';
|
|
import { cn } from '~/utils';
|
|
|
|
/** Element ID for the close sidebar button - used for focus management */
|
|
export const CLOSE_SIDEBAR_ID = 'close-sidebar-button';
|
|
/** Element ID for the open sidebar button - used for focus management */
|
|
export const OPEN_SIDEBAR_ID = 'open-sidebar-button';
|
|
|
|
export default function OpenSidebar({
|
|
setNavVisible,
|
|
className,
|
|
}: {
|
|
setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
|
className?: string;
|
|
}) {
|
|
const localize = useLocalize();
|
|
|
|
const handleClick = () => {
|
|
setNavVisible((prev) => {
|
|
localStorage.setItem('navVisible', JSON.stringify(!prev));
|
|
return !prev;
|
|
});
|
|
// Delay focus until after the sidebar animation completes (200ms)
|
|
setTimeout(() => {
|
|
document.getElementById(CLOSE_SIDEBAR_ID)?.focus();
|
|
}, 250);
|
|
};
|
|
|
|
return (
|
|
<TooltipAnchor
|
|
description={localize('com_nav_open_sidebar')}
|
|
render={
|
|
<Button
|
|
id={OPEN_SIDEBAR_ID}
|
|
size="icon"
|
|
variant="outline"
|
|
data-testid="open-sidebar-button"
|
|
aria-label={localize('com_nav_open_sidebar')}
|
|
aria-expanded={false}
|
|
aria-controls="chat-history-nav"
|
|
className={cn(
|
|
'rounded-xl border border-border-light bg-surface-secondary p-2 hover:bg-surface-hover',
|
|
className,
|
|
)}
|
|
onClick={handleClick}
|
|
>
|
|
<Sidebar aria-hidden="true" />
|
|
</Button>
|
|
}
|
|
/>
|
|
);
|
|
}
|