ConceptProd/ConceptPortal-public
1
0
Fork 0
mirror of https://github.com/IRBorisov/ConceptPortal.git synced 2025-11-15 17:21:38 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

B: Fix tooltips not working for first load in Constituenta Editor

Browse Source
This commit is contained in:
Ivan 2025-11-06 01:56:35 +03:00
parent 2d1fe16f40
commit 0904aed260
1 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-constituenta/editor-constituenta.tsx
View File

@ -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<HTMLDivElement>(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<HTMLDivElement>) {
if (disabled) {
return;
@ -96,6 +126,7 @@ export function EditorConstituenta() {
return (
<div
ref={containerRef}
tabIndex={-1}
className={clsx(
'relative ',