From 91fe51ecc5857aae92c1f68fddb6ccd6f71baa07 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Sat, 4 May 2024 08:24:48 -0400
Subject: [PATCH] Fix #6448: Dialog onHide basic example (#6567)

---
 .eslintignore                            |  2 +-
 components/doc/dialog/basicdoc.js        | 16 ++++++++++++----
 components/doc/dialog/footerdoc.js       | 17 +++++++++++++----
 components/doc/dialog/headlessdoc.js     | 11 +++++++----
 components/doc/dialog/longcontentdoc.js  | 16 ++++++++++++----
 components/doc/dialog/maximizabledoc.js  | 17 +++++++++++++----
 components/doc/dialog/positiondoc.js     | 20 ++++++++++++++++----
 components/doc/dialog/responsivedoc.js   | 17 +++++++++++++----
 components/doc/dialog/templatedoc.js     | 20 +++++++++++++++-----
 components/doc/dialog/withoutmodaldoc.js | 17 +++++++++++++----
 10 files changed, 115 insertions(+), 38 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 72e8ffc0db..8b13789179 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1 @@
-*
+
diff --git a/components/doc/dialog/basicdoc.js b/components/doc/dialog/basicdoc.js
index 6b583f59e4..584e8846d1 100644
--- a/components/doc/dialog/basicdoc.js
+++ b/components/doc/dialog/basicdoc.js
@@ -10,7 +10,7 @@ export function BasicDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -30,7 +30,7 @@ export default function BasicDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -53,7 +53,7 @@ export default function BasicDoc() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -76,7 +76,15 @@ export default function BasicDoc() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/footerdoc.js b/components/doc/dialog/footerdoc.js
index 82a1bf2abf..4f5056a727 100644
--- a/components/doc/dialog/footerdoc.js
+++ b/components/doc/dialog/footerdoc.js
@@ -16,7 +16,7 @@ export function FooterDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent}>
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -42,7 +42,7 @@ export default function FooterDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -71,7 +71,7 @@ export default function FooterDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -94,7 +94,16 @@ export default function FooterDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    footer={footerContent}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/headlessdoc.js b/components/doc/dialog/headlessdoc.js
index c5c142261d..d373a8fdaf 100644
--- a/components/doc/dialog/headlessdoc.js
+++ b/components/doc/dialog/headlessdoc.js
@@ -14,7 +14,7 @@ export function HeadlessDoc(props) {
 <Dialog
     visible={visible}
     modal
-    onHide={() => setVisible(false)}
+    onHide={() => {if (!visible) return; setVisible(false); }}
     content={({ hide }) => (
         <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
             <...>
@@ -36,7 +36,7 @@ export default function HeadlessDemo() {
             <Dialog
                 visible={visible}
                 modal
-                onHide={() => setVisible(false)}
+                onHide={() => {if (!visible) return; setVisible(false); }}
                 content={({ hide }) => (
                     <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
                         <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
@@ -96,7 +96,7 @@ export default function HeadlessDemo() {
             <Dialog
                 visible={visible}
                 modal
-                onHide={() => setVisible(false)}
+                onHide={() => {if (!visible) return; setVisible(false); }}
                 content={({ hide }) => (
                     <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
                         <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
@@ -156,7 +156,10 @@ export default function HeadlessDemo() {
                 <Dialog
                     visible={visible}
                     modal
-                    onHide={() => setVisible(false)}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
                     content={({ hide }) => (
                         <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
                             <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
diff --git a/components/doc/dialog/longcontentdoc.js b/components/doc/dialog/longcontentdoc.js
index 6bbeb37104..18d3f9e9ca 100644
--- a/components/doc/dialog/longcontentdoc.js
+++ b/components/doc/dialog/longcontentdoc.js
@@ -10,7 +10,7 @@ export function LongContentDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
     <p className="mb-5">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -56,7 +56,7 @@ export default function LongContentDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="mb-5">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -105,7 +105,7 @@ export default function LongContentDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="mb-5">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -152,7 +152,15 @@ export default function LongContentDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
                     <p className="mb-5">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/maximizabledoc.js b/components/doc/dialog/maximizabledoc.js
index 8b37efd2bd..ca7dce6042 100644
--- a/components/doc/dialog/maximizabledoc.js
+++ b/components/doc/dialog/maximizabledoc.js
@@ -10,7 +10,7 @@ export function MaximizableDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -30,7 +30,7 @@ export default function MaximizableDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -53,7 +53,7 @@ export default function MaximizableDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -76,7 +76,16 @@ export default function MaximizableDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    maximizable
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/positiondoc.js b/components/doc/dialog/positiondoc.js
index 55519bcbfe..2aa1dd6ef6 100644
--- a/components/doc/dialog/positiondoc.js
+++ b/components/doc/dialog/positiondoc.js
@@ -36,7 +36,7 @@ export function PositionDoc(props) {
     <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
 </div>
 
-<Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent} draggable={false} resizable={false}>
+<Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -82,7 +82,7 @@ export default function PositionDemo() {
                 <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
             </div>
 
-            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent} draggable={false} resizable={false}>
+            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -131,7 +131,7 @@ export default function PositionDemo() {
                 <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
             </div>
 
-            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent} draggable={false} resizable={false}>
+            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -168,7 +168,19 @@ export default function PositionDemo() {
                     <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
                 </div>
 
-                <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => setVisible(false)} footer={footerContent} draggable={false} resizable={false}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    position={position}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    footer={footerContent}
+                    draggable={false}
+                    resizable={false}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/responsivedoc.js b/components/doc/dialog/responsivedoc.js
index 5ade076d08..9f912614d0 100644
--- a/components/doc/dialog/responsivedoc.js
+++ b/components/doc/dialog/responsivedoc.js
@@ -10,7 +10,7 @@ export function ResponsiveDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} onHide={() => setVisible(false)}
+<Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
     style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
@@ -31,7 +31,7 @@ export default function ResponsiveDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} onHide={() => setVisible(false)}
+            <Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
                 style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
@@ -55,7 +55,7 @@ export default function ResponsiveDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} onHide={() => setVisible(false)}
+            <Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
                 style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
@@ -80,7 +80,16 @@ export default function ResponsiveDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} onHide={() => setVisible(false)} style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    style={{ width: '50vw' }}
+                    breakpoints={{ '960px': '75vw', '641px': '100vw' }}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/templatedoc.js b/components/doc/dialog/templatedoc.js
index 17a312d40f..780dd0e69c 100644
--- a/components/doc/dialog/templatedoc.js
+++ b/components/doc/dialog/templatedoc.js
@@ -1,9 +1,9 @@
 import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
 import { Button } from '@/components/lib/button/Button';
 import { Dialog } from '@/components/lib/dialog/Dialog';
 import { useState } from 'react';
-import { Avatar } from '@/components/lib/avatar/Avatar';
 
 export function TemplateDoc(props) {
     const [visible, setVisible] = useState(false);
@@ -24,7 +24,7 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -58,7 +58,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => setVisible(false)}>
+            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -93,7 +93,7 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => setVisible(false)}>
+            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -112,7 +112,17 @@ export default function TemplateDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => setVisible(false)}>
+                <Dialog
+                    visible={visible}
+                    modal
+                    header={headerElement}
+                    footer={footerContent}
+                    style={{ width: '50rem' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/components/doc/dialog/withoutmodaldoc.js b/components/doc/dialog/withoutmodaldoc.js
index 69cfeddaf7..98e66a11b2 100644
--- a/components/doc/dialog/withoutmodaldoc.js
+++ b/components/doc/dialog/withoutmodaldoc.js
@@ -10,7 +10,7 @@ export function WithoutModalDoc(props) {
     const code = {
         basic: `
 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
     <p className="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -30,7 +30,7 @@ export default function WithoutModalDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -53,7 +53,7 @@ export default function WithoutModalDemo() {
     return (
         <div className="card flex justify-content-center">
             <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
                 <p className="m-0">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -76,7 +76,16 @@ export default function WithoutModalDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
-                <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    modal={false}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
                     <p className="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.