From 9777b79818938ed8710adc0481d60a74e0c85f37 Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Fri, 6 Sep 2019 09:59:58 -0700
Subject: [PATCH] hide overflow in ExpandingContainer while opening

---
 .../CollapsibleSection/ExpandingContainer.jsx        | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx b/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx
index 07fd6d35b5..8f8d982ac7 100644
--- a/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx
+++ b/awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx
@@ -4,13 +4,19 @@ import styled from 'styled-components';
 
 const Container = styled.div`
   margin: 15px 0;
-  transition: all 0.2s ease-out;
-  ${props => !props.isExpanded && `overflow: hidden;`}
+  transition: height 0.2s ease-out;
+  ${props => props.hideOverflow && `overflow: hidden;`}
 `;
 
 function ExpandingContainer({ isExpanded, children }) {
   const [contentHeight, setContentHeight] = useState(0);
+  const [hideOverflow, setHideOverflow] = useState(!isExpanded);
   const ref = useRef(null);
+  useEffect(() => {
+    ref.current.addEventListener('transitionend', () => {
+      setHideOverflow(!isExpanded);
+    });
+  })
   useEffect(() => {
     setContentHeight(ref.current.scrollHeight);
   });
@@ -21,7 +27,7 @@ function ExpandingContainer({ isExpanded, children }) {
       css={`
         height: ${height}px;
       `}
-      isExpanded={isExpanded}
+      hideOverflow={!isExpanded || hideOverflow}
     >
       {children}
     </Container>