Fix #3122: Prevent overlay flickering (#3706)

* Fix #3122: Prevent overlay flickering * Fix #3122: Prevent overlay flickering * Fix #3122: Prevent overlay flickering
primefaces · Nov 25, 2022 · 9e2af29 · 9e2af29
1 parent 16ae57c
commit 9e2af29
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;