fix: regenerate FAQ editor keys on locale switch

- Locale switch now regenerates all stable keys so editors remount fresh
- Fixes same-length locale switch (e.g., ru 3 items → en 3 items) reusing wrong editors
- Move keyCounter increment out of functional updater for StrictMode purity
- Remove void locale — prop is now used for key regeneration
This commit is contained in:
Fringg
2026-04-24 15:25:53 +03:00
parent a6850c8cbc
commit 5cfbce0663

View File

@@ -540,7 +540,12 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
const keyCounter = useRef(0); const keyCounter = useRef(0);
const [itemKeys, setItemKeys] = useState<number[]>(() => items.map(() => keyCounter.current++)); const [itemKeys, setItemKeys] = useState<number[]>(() => items.map(() => keyCounter.current++));
// Sync key count when items change externally (e.g., locale switch resets items) // Regenerate all keys on locale switch (items are semantically different)
useEffect(() => {
setItemKeys(items.map(() => keyCounter.current++));
}, [locale]); // eslint-disable-line react-hooks/exhaustive-deps
// Sync key count when items added/removed within the same locale
useEffect(() => { useEffect(() => {
setItemKeys((prev) => { setItemKeys((prev) => {
if (prev.length === items.length) return prev; if (prev.length === items.length) return prev;
@@ -580,7 +585,8 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
); );
const handleAdd = useCallback(() => { const handleAdd = useCallback(() => {
setItemKeys((prev) => [...prev, keyCounter.current++]); const newKey = keyCounter.current++;
setItemKeys((prev) => [...prev, newKey]);
onChange([...items, { q: '', a: '' }]); onChange([...items, { q: '', a: '' }]);
}, [items, onChange]); }, [items, onChange]);
@@ -614,8 +620,6 @@ function FaqBuilder({ items, onChange, locale, localeLabel }: FaqBuilderProps) {
[items, onChange], [items, onChange],
); );
void locale;
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">