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

…01148) (#101258)

Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

x-pack/plugins/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