✨(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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user