[Lens] setFocusTrap after animation is ended and not with timeout (#1…

…01148)
elastic · Jun 3, 2021 · 4e5652d · 4e5652d
1 parent 83b47c1
commit 4e5652d
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -44,15 +44,6 @@ export function DimensionContainer({
     setFocusTrapIsEnabled(false);
   }, [handleClose]);
 
-  useEffect(() => {
-    if (isOpen) {
-      // without setTimeout here the flyout pushes content when animating
-      setTimeout(() => {
-        setFocusTrapIsEnabled(true);
-      }, 255);
-    }
-  }, [isOpen]);
-
   const closeOnEscape = useCallback(
     (event: KeyboardEvent) => {
       if (event.key === keys.ESCAPE) {
@@ -83,6 +74,13 @@ export function DimensionContainer({
             role="dialog"
             aria-labelledby="lnsDimensionContainerTitle"
             className="lnsDimensionContainer euiFlyout"
+            onAnimationEnd={() => {
+              if (isOpen) {
+                // EuiFocusTrap interferes with animating elements with absolute position:
+                // running this onAnimationEnd, otherwise the flyout pushes content when animating
+                setFocusTrapIsEnabled(true);
+              }
+            }}
           >
             <EuiFlyoutHeader hasBorder className="lnsDimensionContainer__header">
               <EuiFlexGroup