From 948cdbcc3f921d024ff9ea7495d9f7b4585e2dcb Mon Sep 17 00:00:00 2001 From: Waleed Date: Fri, 17 Apr 2026 17:38:37 -0700 Subject: [PATCH] fix(chat): prevent @-mention menu focus loss and stabilize render identity (#4218) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(docs): preserve gif playback position in lightbox and clean up ui components - Capture currentTime on click and seek lightbox video to match using useLayoutEffect - Convert lightboxStartTime from useState to useRef (no independent render needed) - Apply same fix to ActionVideo in action-media.tsx - Remove dead AnimatedBlocks component (zero imports) - Fix language-dropdown to derive currentLang during render instead of mirroring into state via effect - Replace template literals with cn() in faq.tsx and video.tsx * fix(chat): prevent @-mention menu focus loss and stabilize render identity Radix DropdownMenu's FocusScope was restoring focus from the search input to the content root whenever registered menu items mounted or unmounted inside the content, interrupting typing after a keystroke or two. - Keep the default tree always mounted under `hidden` instead of swapping subtrees when the filter activates. - Render filtered results as plain @@ -81,11 +83,10 @@ export function FAQ({ items, title = 'Common Questions' }: FAQProps) { {items.map((item, index) => (
{ - const langFromParams = params?.lang as string - return langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en' - }) - - useEffect(() => { - const langFromParams = params?.lang as string - - if (langFromParams && Object.keys(languages).includes(langFromParams)) { - if (langFromParams !== currentLang) { - setCurrentLang(langFromParams) - } - } else { - if (currentLang !== 'en') { - setCurrentLang('en') - } - } - }, [params]) + const langFromParams = params?.lang as string + const currentLang = + langFromParams && Object.keys(languages).includes(langFromParams) ? langFromParams : 'en' const handleLanguageChange = (locale: string) => { if (locale === currentLang) return diff --git a/apps/docs/components/ui/lightbox.tsx b/apps/docs/components/ui/lightbox.tsx index 983bba33c2..4f218ad828 100644 --- a/apps/docs/components/ui/lightbox.tsx +++ b/apps/docs/components/ui/lightbox.tsx @@ -1,6 +1,6 @@ 'use client' -import { useEffect, useRef } from 'react' +import { useEffect, useLayoutEffect, useRef } from 'react' import { getAssetUrl } from '@/lib/utils' interface LightboxProps { @@ -9,10 +9,12 @@ interface LightboxProps { src: string alt: string type: 'image' | 'video' + startTime?: number } -export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) { +export function Lightbox({ isOpen, onClose, src, alt, type, startTime }: LightboxProps) { const overlayRef = useRef(null) + const videoRef = useRef(null) useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { @@ -40,6 +42,12 @@ export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) { } }, [isOpen, onClose]) + useLayoutEffect(() => { + if (isOpen && type === 'video' && videoRef.current && startTime != null && startTime > 0) { + videoRef.current.currentTime = startTime + } + }, [isOpen, startTime, type]) + if (!isOpen) return null return ( @@ -61,6 +69,7 @@ export function Lightbox({ isOpen, onClose, src, alt, type }: LightboxProps) { /> ) : (