diff --git a/apps/client/src/widgets/react/Collapsible.css b/apps/client/src/widgets/react/Collapsible.css index 7dca2f5651..a3222d20a8 100644 --- a/apps/client/src/widgets/react/Collapsible.css +++ b/apps/client/src/widgets/react/Collapsible.css @@ -17,6 +17,10 @@ .collapsible-body { height: 0; overflow: hidden; + + &.fully-expanded { + overflow: visible; + } } .collapsible-inner-body { diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx index a6e1957b34..212de203dc 100644 --- a/apps/client/src/widgets/react/Collapsible.tsx +++ b/apps/client/src/widgets/react/Collapsible.tsx @@ -27,6 +27,7 @@ export function ExternallyControlledCollapsible({ title, children, className, ex const { height } = useElementSize(innerRef) ?? {}; const contentId = useUniqueName(); const [ transitionEnabled, setTransitionEnabled ] = useState(false); + const [ fullyExpanded, setFullyExpanded ] = useState(false); useEffect(() => { const timeout = setTimeout(() => { @@ -35,6 +36,21 @@ export function ExternallyControlledCollapsible({ title, children, className, ex return () => clearTimeout(timeout); }, []); + useEffect(() => { + if (expanded) { + if (transitionEnabled) { + const timeout = setTimeout(() => { + setFullyExpanded(true); + }, 250); + return () => clearTimeout(timeout); + } else { + setFullyExpanded(true); + } + } else { + setFullyExpanded(false); + } + }, [expanded, transitionEnabled]) + return (