diff --git a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx b/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx index a9f2fb472..d423276d2 100644 --- a/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx +++ b/client/src/components/production-board-kanban/trello-board/components/Lane/HeightMemoryWrapper.jsx @@ -1,40 +1,56 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import PropTypes from "prop-types"; +const heightMap = new Map(); + /** * Height Memory Wrapper * @param children * @param maxHeight * @param setMaxHeight * @param override - Override the minHeight style from being set + * @param key - Unique key to preserve height for items with the same key * @returns {Element} * @constructor */ -const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override }) => { +const HeightMemoryWrapper = ({ children, maxHeight, setMaxHeight, override, itemKey }) => { const ref = useRef(null); + const [localMaxHeight, setLocalMaxHeight] = useState(maxHeight); useEffect(() => { const currentRef = ref.current; // Step 1: Capture the current ref value const updateHeight = () => { const currentHeight = currentRef?.firstChild?.clientHeight || 0; + if (itemKey) { + const keyHeight = heightMap.get(itemKey) || 0; + const newHeight = Math.max(keyHeight, currentHeight); + heightMap.set(itemKey, newHeight); + setLocalMaxHeight(newHeight); + } else { + setLocalMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight)); + } setMaxHeight((prevHeight) => Math.max(prevHeight, currentHeight)); }; const resizeObserver = new ResizeObserver(updateHeight); if (currentRef?.firstChild) { - // Step 2: Use the captured ref for observing resizeObserver.observe(currentRef.firstChild); } return () => { if (currentRef?.firstChild) { - // Step 2: Use the captured ref for observing resizeObserver.unobserve(currentRef.firstChild); } }; - }, [setMaxHeight]); + }, [itemKey, setMaxHeight]); - const style = override ? {} : { minHeight: maxHeight }; + useEffect(() => { + if (itemKey && heightMap.has(itemKey)) { + setLocalMaxHeight(heightMap.get(itemKey)); + } + }, [itemKey]); + + const style = override ? {} : { minHeight: localMaxHeight }; return (