From 2ac7b0e1a11993ea63c4a1e4bdfe9c69bbc60747 Mon Sep 17 00:00:00 2001
From: Balbina Kotula <41303231+BalbinaK@users.noreply.github.com>
Date: Wed, 28 Sep 2022 10:46:04 +0200
Subject: [PATCH] Revert "Revert "Fix(expandable): glitching animated expansion
 (#151)" (#154)"

This reverts commit d80574195700b75ff5c79a815b12306cbf72850a.
---
 packages/_helpers/expand-transition.tsx            | 10 +++++++++-
 packages/expandable/stories/Expandable.stories.tsx |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/_helpers/expand-transition.tsx b/packages/_helpers/expand-transition.tsx
index d436fb49..4a70c0f6 100644
--- a/packages/_helpers/expand-transition.tsx
+++ b/packages/_helpers/expand-transition.tsx
@@ -8,6 +8,7 @@ export function ExpandTransition({
   const [removeElement, setRemoveElement] = useState(!show);
   const expandableRef = useRef<HTMLDivElement>(null);
   const isMounted = useRef(false);
+  const initialShow = useRef<boolean>(show === true);
 
   function collapseElement(el: HTMLElement) {
     collapse(el, () => setRemoveElement(true));
@@ -37,8 +38,15 @@ export function ExpandTransition({
     }
   }, [show]);
 
+  // Set initial style to prevent glitching bug
+  const initialStyle = !initialShow.current ? 'overflow-hidden h-0' : undefined;
+
   return (
-    <div ref={expandableRef} aria-hidden={!show ? true : undefined}>
+    <div
+      className={initialStyle}
+      ref={expandableRef}
+      aria-hidden={!show ? true : undefined}
+    >
       {removeElement ? null : children}
     </div>
   );
diff --git a/packages/expandable/stories/Expandable.stories.tsx b/packages/expandable/stories/Expandable.stories.tsx
index d29ec5b2..682c9e73 100644
--- a/packages/expandable/stories/Expandable.stories.tsx
+++ b/packages/expandable/stories/Expandable.stories.tsx
@@ -87,6 +87,14 @@ export const Animated = () => {
   );
 };
 
+export const AnimatedExpanded = () => {
+  return (
+    <Expandable title="Animated box" expanded box info animated>
+      <h1>I am expandable</h1>
+    </Expandable>
+  );
+};
+
 export const Heading = () => {
   return (
     <Expandable title="I'm also a heading" headingLevel={1}>