Merge pull request #1949 from SpareBank1/develop_fix-collapse

fix(ffe-collapse-react): remove overflow hidden when expanden
SpareBank1 · Apr 26, 2024 · b4e0230 · b4e0230
2 parents 39bb78c + 7c08b69
commit b4e0230
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 18 deletions.
diff --git a/packages/ffe-collapse-react/less/collapse.less b/packages/ffe-collapse-react/less/collapse.less
@@ -16,3 +16,7 @@
 .ffe-collapse__inner {
     overflow: hidden;
 }
+
+.ffe-collapse__inner.ffe-collapse__inner--visible {
+    overflow: visible;
+}
diff --git a/packages/ffe-collapse-react/src/Collapse.js b/packages/ffe-collapse-react/src/Collapse.js
@@ -7,12 +7,51 @@ export const Collapse = React.forwardRef(
         const internalRef = useRef();
         const collapse = ref ?? internalRef;
         const [isHidden, setIsHidden] = useState(!isOpen);
+        const [overflowVisible, setOverflowVisible] = useState(!!isOpen);
 
         useEffect(() => {
-            if (isOpen) {
-                setIsHidden(false);
-            }
-        }, [isOpen]);
+            const _collapse = collapse;
+            const handleTransition = startOrEnd => e => {
+                if (
+                    e.target === collapse.current &&
+                    e.propertyName === 'grid-template-rows'
+                ) {
+                    setIsHidden(!isOpen);
+                    if (startOrEnd === 'start') {
+                        setOverflowVisible(false);
+                    } else {
+                        if (isOpen) {
+                            setOverflowVisible(true);
+                        }
+                        if (onRest) {
+                            onRest();
+                        }
+                    }
+                }
+            };
+
+            const handleTransitionStart = handleTransition('start');
+            const handleTransitionEnd = handleTransition('end');
+
+            _collapse.current.addEventListener(
+                'transitionstart',
+                handleTransitionStart,
+            );
+            _collapse.current.addEventListener(
+                'transitionend',
+                handleTransitionEnd,
+            );
+            return () => {
+                _collapse.current.removeEventListener(
+                    'transitionstart',
+                    handleTransitionStart,
+                );
+                _collapse.current.removeEventListener(
+                    'transitionend',
+                    handleTransitionEnd,
+                );
+            };
+        }, [collapse, isOpen, onRest]);
 
         return (
             <div
@@ -22,21 +61,14 @@ export const Collapse = React.forwardRef(
                     'ffe-collapse--open': isOpen,
                     'ffe-collapse--hidden': isHidden,
                 })}
-                onTransitionEnd={e => {
-                    if (
-                        e.target === collapse.current &&
-                        e.propertyName === 'grid-template-rows'
-                    ) {
-                        if (onRest) {
-                            onRest();
-                        }
-                        if (!isOpen) {
-                            setIsHidden(true);
-                        }
-                    }
-                }}
             >
-                <div className="ffe-collapse__inner">{children}</div>
+                <div
+                    className={classNames('ffe-collapse__inner', {
+                        'ffe-collapse__inner--visible': overflowVisible,
+                    })}
+                >
+                    {children}
+                </div>
             </div>
         );
     },