From f6379d4baccd314fe12bd985df7aa7932edbb915 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Sat, 6 Aug 2022 20:57:54 -0400
Subject: [PATCH] Fix #2562: Sidebar allow dismissable on non-modal (#2563)

---
 components/doc/sidebar/index.js   |  8 ++++----
 components/lib/sidebar/Sidebar.js | 21 +++++++++++++++++++++
 pages/sidebar/index.js            |  2 +-
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/components/doc/sidebar/index.js b/components/doc/sidebar/index.js
index 8581649b5c..07a2acb6db 100644
--- a/components/doc/sidebar/index.js
+++ b/components/doc/sidebar/index.js
@@ -55,7 +55,7 @@ export class SidebarDemo extends Component {
                         <h3>Top Sidebar</h3>
                     </Sidebar>
 
-                    <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })}>
+                    <Sidebar visible={this.state.visibleBottom} position="bottom" onHide={() => this.setState({ visibleBottom: false })} modal={false} dismissable>
                         <h3>Bottom Sidebar</h3>
                     </Sidebar>
 
@@ -121,7 +121,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
@@ -186,7 +186,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
@@ -254,7 +254,7 @@ const SidebarDemo = () => {
                     <h3>Top Sidebar</h3>
                 </Sidebar>
 
-                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                     <h3>Bottom Sidebar</h3>
                 </Sidebar>
 
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
index 7afe75bedd..021fae3bf1 100644
--- a/components/lib/sidebar/Sidebar.js
+++ b/components/lib/sidebar/Sidebar.js
@@ -22,6 +22,22 @@ export const Sidebar = React.forwardRef((props, ref) => {
             }
         }
     });
+  
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        type: 'click', listener: event => {
+             if (event.which === 2) { // left click
+                 return;
+             }
+
+             if (isOutsideClicked(event)) {
+                 onClose(event);
+             }
+        }
+    });
+  
+    const isOutsideClicked = (event) => {
+        return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
+    }
 
     const getPositionClass = () => {
         const positions = ['left', 'right', 'top', 'bottom'];
@@ -71,6 +87,10 @@ export const Sidebar = React.forwardRef((props, ref) => {
         if (props.closeOnEscape) {
             bindDocumentEscapeListener();
         }
+      
+        if (props.dismissable && !props.modal) {
+            bindDocumentClickListener();
+        }
 
         if (props.blockScroll) {
             DomHandler.addClass(document.body, 'p-overflow-hidden');
@@ -79,6 +99,7 @@ export const Sidebar = React.forwardRef((props, ref) => {
 
     const disableDocumentSettings = () => {
         unbindDocumentEscapeListener();
+        unbindDocumentClickListener();
 
         if (props.blockScroll) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js
index a9f207ff16..8cdd380ed7 100644
--- a/pages/sidebar/index.js
+++ b/pages/sidebar/index.js
@@ -53,7 +53,7 @@ const SidebarDemo = () => {
                         <h3>Top Sidebar</h3>
                     </Sidebar>
 
-                    <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                    <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)} modal={false} dismissable>
                         <h3>Bottom Sidebar</h3>
                     </Sidebar>