Fix #2562: Sidebar allow dismissable on non-modal (#2563)

primefaces · Aug 7, 2022 · f6379d4 · f6379d4
1 parent af10210
commit f6379d4
Show file tree

Hide file tree

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