From 9e2af29d8d0053230e9f36d6db3a513c39976809 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Fri, 25 Nov 2022 10:13:21 -0500
Subject: [PATCH] Fix #3122: Prevent overlay flickering (#3706)

* Fix #3122: Prevent overlay flickering

* Fix #3122: Prevent overlay flickering

* Fix #3122: Prevent overlay flickering
---
 components/doc/sidebar/sizedoc.js            | 14 ++++++++------
 components/lib/dialog/Dialog.css             |  5 +++++
 components/lib/dialog/Dialog.js              |  3 ++-
 components/lib/menu/Menu.css                 |  3 +++
 components/lib/overlaypanel/OverlayPanel.css |  4 +++-
 components/lib/sidebar/Sidebar.css           |  5 +++++
 6 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/components/doc/sidebar/sizedoc.js b/components/doc/sidebar/sizedoc.js
index b28c26765d..86669c59eb 100644
--- a/components/doc/sidebar/sizedoc.js
+++ b/components/doc/sidebar/sizedoc.js
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { Sidebar } from '../../lib/sidebar/Sidebar';
 import { Button } from '../../lib/button/Button';
+import { Sidebar } from '../../lib/sidebar/Sidebar';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
@@ -9,7 +9,7 @@ export function SizeDoc(props) {
 
     const code = {
         basic: `
-<Sidebar visible={visibleLeft} position="left" style={{ width: '20em' }} onHide={() => setVisibleLeft(false)}>
+<Sidebar visible={visibleLeft} position="left" style={{ width: '30em' }} onHide={() => setVisibleLeft(false)}>
     <h3>Sidebar Size</h3>
 </Sidebar>
 <Button icon="pi pi-arrow-left" onClick={() => setVisibleLeft(true)} className="mr-2" />
@@ -24,7 +24,7 @@ export default function SizeDoc() {
 
     return (
         <div>
-            <Sidebar visible={visibleLeft} position="left" style={{ width: '20em' }} onHide={() => setVisibleLeft(false)}>
+            <Sidebar visible={visibleLeft} position="left" style={{ width: '30em' }} onHide={() => setVisibleLeft(false)}>
                 <h3>Sidebar Size</h3>
             </Sidebar>
             <Button icon="pi pi-arrow-left" onClick={() => setVisibleLeft(true)} className="mr-2" />
@@ -42,7 +42,7 @@ export default function SizeDoc() {
 
     return (
         <div>
-            <Sidebar visible={visibleLeft} position="left" style={{ width: '20em' }} onHide={() => setVisibleLeft(false)}>
+            <Sidebar visible={visibleLeft} position="left" style={{ width: '30em' }} onHide={() => setVisibleLeft(false)}>
                 <h3>Sidebar Size</h3>
             </Sidebar>
             <Button icon="pi pi-arrow-left" onClick={() => setVisibleLeft(true)} className="mr-2" />
@@ -55,10 +55,12 @@ export default function SizeDoc() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
+                <p>
+                    Sidebar size can be changed using a fixed style value or using one of the three predefined classes <i>p-sidebar-sm</i>, <i>p-sidebar-md</i>, <i>p-sidebar-lg</i>.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Sidebar visible={visibleLeft} position="left" style={{ width: '20em' }} onHide={() => setVisibleLeft(false)}>
+                <Sidebar visible={visibleLeft} position="left" style={{ width: '30em' }} onHide={() => setVisibleLeft(false)}>
                     <h3>Sidebar Size</h3>
                 </Sidebar>
                 <Button icon="pi pi-arrow-left" onClick={() => setVisibleLeft(true)} className="mr-2" />
diff --git a/components/lib/dialog/Dialog.css b/components/lib/dialog/Dialog.css
index 87a3c57bab..91d5a2882d 100644
--- a/components/lib/dialog/Dialog.css
+++ b/components/lib/dialog/Dialog.css
@@ -29,6 +29,11 @@
     position: relative;
 }
 
+/* Github #3122: Prevent animation flickering */
+.p-dialog:not([class*='p-dialog-']) {
+    display: none;
+}
+
 .p-dialog-content {
     overflow-y: auto;
     flex-grow: 1;
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
index e051f0fd43..6b55ba9845 100644
--- a/components/lib/dialog/Dialog.js
+++ b/components/lib/dialog/Dialog.js
@@ -511,7 +511,8 @@ export const Dialog = React.forwardRef((props, ref) => {
         const otherProps = ObjectUtils.findDiffKeys(props, Dialog.defaultProps);
         const className = classNames('p-dialog p-component', props.className, {
             'p-dialog-rtl': props.rtl,
-            'p-dialog-maximized': maximized
+            'p-dialog-maximized': maximized,
+            'p-dialog-default': !maximized
         });
         const maskClassName = classNames(
             'p-dialog-mask',
diff --git a/components/lib/menu/Menu.css b/components/lib/menu/Menu.css
index d4c5c91d76..5a593c519c 100644
--- a/components/lib/menu/Menu.css
+++ b/components/lib/menu/Menu.css
@@ -1,5 +1,8 @@
 .p-menu-overlay {
     position: absolute;
+    /* Github #3122: Prevent animation flickering  */
+    top: -9999px;
+    left: -9999px;
 }
 
 .p-menu ul {
diff --git a/components/lib/overlaypanel/OverlayPanel.css b/components/lib/overlaypanel/OverlayPanel.css
index 045b672c2f..a5dd380156 100644
--- a/components/lib/overlaypanel/OverlayPanel.css
+++ b/components/lib/overlaypanel/OverlayPanel.css
@@ -1,9 +1,11 @@
 .p-overlaypanel {
     position: absolute;
     margin-top: 10px;
+    /* Github #3122: Prevent animation flickering  */
+    top: -9999px;
+    left: -9999px;
 }
 
-
 .p-overlaypanel-flipped {
     margin-top: 0;
     margin-bottom: 10px;
diff --git a/components/lib/sidebar/Sidebar.css b/components/lib/sidebar/Sidebar.css
index 69e44f36bd..8865d8caed 100644
--- a/components/lib/sidebar/Sidebar.css
+++ b/components/lib/sidebar/Sidebar.css
@@ -28,6 +28,11 @@
     position: relative;
 }
 
+/* Github #3122: Prevent animation flickering */
+.p-sidebar:not([class*="p-sidebar-"]){
+    display: none;
+}
+
 .p-sidebar-content {
     overflow-y: auto;
     flex-grow: 1;