(frontend) fix focus scroll jump during side panel animation

preventScroll avoids layout shift that broke the slide-in chat animation

Signed-off-by: Cyril <c.gromoff@gmail.com>
This commit is contained in:
Cyril
2025-12-16 10:15:30 +01:00
parent 9093371d25
commit 90c0442d35

View File

@@ -48,14 +48,17 @@ export function Chat({ ...props }: ChatProps) {
// Chat just opened // Chat just opened
if (!wasChatOpen && isChatPanelOpen) { if (!wasChatOpen && isChatPanelOpen) {
chatTriggerRef.current = document.activeElement as HTMLElement | null chatTriggerRef.current = document.activeElement as HTMLElement | null
inputRef.current?.focus() // Avoid layout "jump" during the side panel slide-in animation.
// Focusing can trigger scroll into view; preventScroll keeps the animation smooth.
requestAnimationFrame(() => {
inputRef.current?.focus({ preventScroll: true })
})
} }
// Chat just closed // Chat just closed
if (wasChatOpen && !isChatPanelOpen) { if (wasChatOpen && !isChatPanelOpen) {
const trigger = chatTriggerRef.current const trigger = chatTriggerRef.current
if (trigger && document.contains(trigger)) { if (trigger && document.contains(trigger)) {
trigger.focus() trigger.focus({ preventScroll: true })
} }
chatTriggerRef.current = null chatTriggerRef.current = null
} }
@@ -72,7 +75,7 @@ export function Chat({ ...props }: ChatProps) {
async function handleSubmit(text: string) { async function handleSubmit(text: string) {
if (!send || !text) return if (!send || !text) return
await send(text) await send(text)
inputRef?.current?.focus() inputRef?.current?.focus({ preventScroll: true })
} }
// TEMPORARY: This is a brittle workaround that relies on message count tracking // TEMPORARY: This is a brittle workaround that relies on message count tracking