Fixed #872 and Fixed #873 - Improve OverlayPanel functionality

primefaces · Apr 29, 2019 · c53b10a · c53b10a
1 parent cd50965
commit c53b10a
Showing 1 changed file with 33 additions and 38 deletions.
diff --git a/src/components/overlaypanel/OverlayPanel.js b/src/components/overlaypanel/OverlayPanel.js
@@ -28,12 +28,11 @@ export class OverlayPanel extends Component {
 
     constructor(props) {
         super(props);
-        this.onPanelClick = this.onPanelClick.bind(this);
         this.onCloseClick = this.onCloseClick.bind(this);
     }
 
     bindDocumentClickListener() {
-        if(!this.documentClickListener) {
+        if(!this.documentClickListener && this.props.dismissable) {
             this.documentClickListener = this.onDocumentClick.bind(this);
             document.addEventListener('click', this.documentClickListener);
         }
@@ -50,66 +49,59 @@ export class OverlayPanel extends Component {
         this.unbindDocumentClickListener();
     }
 
-    onDocumentClick() {
-        if(!this.selfClick && !this.targetEvent) {
+    onDocumentClick(event) {
+        if(!this.container.contains(event.target) && this.target && this.target !== event.target && !this.target.contains(event.target)) {
             this.hide();
         }
-
-        this.selfClick = false;
-        this.targetEvent = false;
-    }
-
-    onPanelClick() {
-        if(this.props.dismissable) {
-            this.selfClick = true;
-        }
     }
 
     onCloseClick(event) {
         this.hide();
 
-        if(this.dismissable) {
-            this.selfClick = true;
-        }
-
         event.preventDefault();
     }
 
-    toggle(event, target) {
-        let currentTarget = (target||event.currentTarget||event.target);
-
-        if(this.isVisible())
+    toggle(event, target) {                                
+        if (this.isVisible()) {
             this.hide();
-        else
-            this.show(currentTarget);
-    }
 
-    show(target) {
-        if(this.props.dismissable) {
-            if(this.documentClickListener) {
-                this.targetEvent = true;
+            if (this.hasTargetChanged(event, target)) {
+                this.target = target||event.currentTarget||event.target;
+
+                setTimeout(() => {
+                    this.show(event, this.target);
+                }, 200);
             }
-
-            this.bindDocumentClickListener();
         }
+        else {
+            this.show(event, target);
+        }
+    }
+
+    show(event, target) {
+        this.target = target||event.currentTarget||event.target;
+
+        this.bindDocumentClickListener();
 
         this.container.style.zIndex = String(DomHandler.generateZIndex());
 
         if(this.isVisible()) {
-            this.align(target);
+            this.align();
         }
         else {
             this.container.style.display = 'block';
-            this.align(target);
+            this.align();
             DomHandler.fadeIn(this.container, 250);
         }
     }
 
-    align(target) {
-        DomHandler.absolutePosition(this.container, target);
+    align() {
+        if (this.target) {
+            DomHandler.absolutePosition(this.container, this.target);
 
-        if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(target).top) {
-            DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
+            if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(this.target).top) {
+                DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
+            }
         }
     }
 
@@ -129,6 +121,10 @@ export class OverlayPanel extends Component {
         return this.container && this.container.offsetParent;
     }
 
+    hasTargetChanged(event, target) {
+        return this.target != null && this.target !== (target||event.currentTarget||event.target);
+    }
+
     renderCloseIcon() {
         if(this.props.showCloseIcon) {
             return (
@@ -147,8 +143,7 @@ export class OverlayPanel extends Component {
         let closeIcon = this.renderCloseIcon();
 
         return (
-            <div id={this.props.id} className={className} style={this.props.style}
-                onClick={this.onPanelClick} ref={el => this.container = el}>
+            <div ref={el => this.container = el} id={this.props.id} className={className} style={this.props.style}>
                 <div className="p-overlaypanel-content">
                     {this.props.children}
                 </div>