From 5cc3566b4f96805b39481c0e61a659417120d576 Mon Sep 17 00:00:00 2001
From: Trevor Paley <10186337+TheUnlocked@users.noreply.github.com>
Date: Wed, 12 Oct 2022 06:54:49 -0400
Subject: [PATCH] [Popover] Fix paper position flash on open (#34546)

---
 packages/mui-material/src/Popover/Popover.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
index 15812e8ede33d8..8c28b441130b90 100644
--- a/packages/mui-material/src/Popover/Popover.js
+++ b/packages/mui-material/src/Popover/Popover.js
@@ -278,6 +278,8 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold],
   );
 
+  const [isPositioned, setIsPositioned] = React.useState(open);
+
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -294,6 +296,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
       element.style.left = positioning.left;
     }
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -304,6 +307,10 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -366,6 +373,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
         appear
         in={open}
         onEntering={handleEntering}
+        onExited={handleExited}
         timeout={transitionDuration}
         {...TransitionProps}
       >
@@ -374,6 +382,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
           {...PaperProps}
           ref={handlePaperRef}
           className={clsx(classes.paper, PaperProps.className)}
+          {...(isPositioned ? undefined : { style: { ...PaperProps.style, opacity: 0 } })}
           ownerState={ownerState}
         >
           {children}