[EuiResizableContainer] Initialize after DOM is ready (#4447)

* init after dom ready * revert me * render check * Revert "revert me" This reverts commit f8c0fd9. * CL
elastic · Jan 28, 2021 · 4d8afb1 · 4d8afb1
1 parent 1176832
commit 4d8afb1
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 **Bug fixes**
 
 - Fixed heights of `append` and `prepend` in `EuiComboBox` ([#4410](https://github.com/elastic/eui/pull/4410))
+- Fixed `EuiResizableContainer` initialization timing based on DOM readiness ([#4447](https://github.com/elastic/eui/pull/4447))
 
 ## [`31.3.0`](https://github.com/elastic/eui/tree/v31.3.0)
 

diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx
@@ -128,7 +128,9 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
   );
 
   useEffect(() => {
-    initialize();
+    if (containerSize.width > 0 && containerSize.height > 0) {
+      initialize();
+    }
   }, [initialize, containerSize]);
 
   const onMouseDown = useCallback(
@@ -273,7 +275,7 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
         onTouchMove={onMouseMove}
         onTouchEnd={onMouseUp}
         {...rest}>
-        {!!reducerState.containerSize && render()}
+        {render()}
       </div>
     </EuiResizableContainerContextProvider>
   );