diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/editor-constituenta.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/editor-constituenta.tsx index 2b8fc8d5..77ab0892 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/editor-constituenta.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/editor-constituenta.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import clsx from 'clsx'; import { useRoleStore, UserRole } from '@/features/users'; @@ -9,7 +9,7 @@ import { useWindowSize } from '@/hooks/use-window-size'; import { useFitHeight, useMainHeight } from '@/stores/app-layout'; import { useModificationStore } from '@/stores/modification'; import { usePreferencesStore } from '@/stores/preferences'; -import { globalIDs } from '@/utils/constants'; +import { globalIDs, PARAMETER } from '@/utils/constants'; import { useMutatingRSForm } from '../../../backend/use-mutating-rsform'; import { ViewConstituents } from '../../../components/view-constituents'; @@ -43,6 +43,7 @@ export function EditorConstituenta() { const { isModified } = useModificationStore(); const [toggleReset, setToggleReset] = useState(false); + const containerRef = useRef(null); const isProcessing = useMutatingRSForm(); const disabled = !activeCst || !isContentEditable || isProcessing; @@ -57,6 +58,35 @@ export function EditorConstituenta() { } }, [activeCst, selected, setSelected]); + useEffect(() => { + // Trigger tooltip re-initialization after component mounts and tab becomes visible + // This ensures tooltips work when loading the page directly with this tab active + // React-tabs hides inactive panels with CSS (display: none), so react-tooltip v5 + // needs to re-scan the DOM when elements become visible + const timeoutId = setTimeout(() => { + if (!containerRef.current) { + return; + } + + // Force react-tooltip to re-scan by temporarily removing and re-adding data-tooltip-id + // This triggers react-tooltip's internal MutationObserver to re-register the elements + const tooltipElements = containerRef.current.querySelectorAll('[data-tooltip-id]'); + tooltipElements.forEach(element => { + if (element instanceof HTMLElement) { + const tooltipId = element.getAttribute('data-tooltip-id'); + if (tooltipId) { + element.removeAttribute('data-tooltip-id'); + requestAnimationFrame(() => { + element.setAttribute('data-tooltip-id', tooltipId); + }); + } + } + }); + }, PARAMETER.minimalTimeout); + + return () => clearTimeout(timeoutId); + }, []); + function handleInput(event: React.KeyboardEvent) { if (disabled) { return; @@ -96,6 +126,7 @@ export function EditorConstituenta() { return (