[Popover] Fix paper position flash on open (#34546)

mui · Oct 12, 2022 · 5cc3566 · 5cc3566
1 parent bd57024
commit 5cc3566
Showing 1 changed file with 9 additions and 0 deletions.
diff --git 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}