fix(Popper): prevent flash of incorrectly positioned popper on open

Use requestAnimationFrame to ensure Popper.js has calculated and applied position transforms before transitioning opacity to 1.

Signed-off-by: Mohamed Fall <[email protected]>

Author: fallmo

packages/react-core/src/helpers/Popper/Popper.tsx

@@ -483,8 +483,14 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     clearTimeouts([transitionTimerRef, hideTimerRef]);
     showTimerRef.current = setTimeout(() => {
       setInternalIsVisible(true);
-      setOpacity(1);
-      onShown();
+      // Ensures React has committed the DOM changes and the popper element is rendered
+      requestAnimationFrame(() => {
+        // Ensures Popper.js has calculated and applied the position transform before making element visible
+        requestAnimationFrame(() => {
+          setOpacity(1);
+          onShown();
+        });
+      });
     }, entryDelay);
   };