From b9355b7f8f40bf83eac580f92fc4dce7bdf23b47 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 17 Apr 2024 16:17:46 +0200
Subject: [PATCH] fix(frontend): Fix autosize within hidden components

---
 frontend/src/lib/autosize.ts | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/autosize.ts b/frontend/src/lib/autosize.ts
index cdf560bd80..a5e8f7811a 100644
--- a/frontend/src/lib/autosize.ts
+++ b/frontend/src/lib/autosize.ts
@@ -14,7 +14,37 @@ export const action = (node) => {
 		node.dispatchEvent(update)
 	}
 
+	const getParents = (element: Node): HTMLElement[] => {
+		const parents: HTMLElement[] = []
+		while (element.parentNode && element.parentNode.nodeName.toLowerCase() !== 'body') {
+			element = element.parentNode as HTMLElement
+			parents.push(element as HTMLElement)
+		}
+		return parents
+	}
+
+	const hasInvisibleParent = (): boolean => {
+		return getParents(node).some(
+			(parent) => parent.classList.contains('hidden') || parent.style.display === 'none'
+		)
+	}
+
 	const setInitialHeight = () => {
+		if (hasInvisibleParent()) {
+			const observer = new MutationObserver(() => {
+				if (!hasInvisibleParent()) {
+					adjustHeight()
+					observer.disconnect()
+				}
+			})
+
+			observer.observe(node, { attributes: true, childList: true, subtree: true })
+		} else {
+			adjustHeight()
+		}
+	}
+
+	const adjustHeight = () => {
 		let height = 0
 
 		if (node.value) {
@@ -37,7 +67,7 @@ export const action = (node) => {
 
 	const setHeight = () => {
 		node.style.height = '0px'
-		node.style.height = Math.max(node.scrollHeight, 40) + 5 + 'px'
+		node.style.height = Math.max(node.scrollHeight ?? 0, 40) + 5 + 'px'
 	}
 
 	const addStyles = () => {