Fix for dismissible option breaking with multiple popovers open

sandywalker#250 Samuel Brodkey on Sep 6, 2017
q2apro · Aug 15, 2019 · a32749e · a32749e
1 parent a763cc5
commit a32749e
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 11 deletions.
diff --git a/demo/test-issue248.html b/demo/test-issue248.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html>
+<head>
+  <title>Issue (#248) - Dismissible option not working with multiple popovers</title>
+
+  <link rel="stylesheet" href="../src/jquery.webui-popover.css" />
+  <script src="jquery.js" ></script>
+  <script src="bootstrap.js" ></script>
+  <script src="../src/jquery.webui-popover.js" ></script>
+
+  <style type="text/css">
+      #popover1, #popover3 {
+        margin-left: 50px;
+        margin-right: 100px;
+      }
+      .pop {
+          display: inline-block;
+          border: 1px solid silver;
+          padding: 2px;
+      }
+      .popContainer {
+        margin-bottom: 60px;
+      }
+      .desc {
+        margin-bottom: 20px;
+      }
+  </style>
+  <script type="text/javascript">
+    $(document).ready(function() {
+        $("#popover1").webuiPopover({
+            dismissible: false,
+            placement: "bottom",
+            content: "I'm not dismissible"
+        });
+        $("#popover2").webuiPopover({
+            dismissible: true,
+            placement: "bottom",
+            content: "I'm dismissible"
+        });
+
+        $("#popover3").webuiPopover({
+            multi: true,
+            dismissible: true,
+            placement: "bottom",
+            content: "I'm popover 3"
+        });
+        $("#popover4").webuiPopover({
+            multi: true,
+            dismissible: true,
+            placement: "bottom",
+            content: "I'm popover 4"
+        });
+    });
+  </script>
+</head>
+<body>
+    <div class="desc">
+        <b>Problem of issue#248</b>: Opening a dismissible popover causes non-dismissible popovers to become dismissible.<br /><br />
+
+        <b>Initial conditions</b>: Popover 1 is not dismissible. Popover 2 is dismissible.<br /><br />
+
+        Step 1) Click popover 1. Observe that it is not dismissible. Close it.<br />
+        Step 2) Click popover 2. Observe that it is dismissible. Close it.<br />
+        Step 3) Click popover 1. Observe that it is now dismissible!<br />
+    </div>
+    <div class="popContainer">
+        <div id="popover1" class="pop">Popover 1</div>
+        <div id="popover2" class="pop">Popover 2</div>
+    </div>
+
+    <div class="desc">
+        <b>With issue#248 solution in place, ensure that</b>: When an outside click is done for two open popovers, 
+        both should dismiss themselves through their own bodyClickHandler individually.<br /><br />
+
+        <b>Initial conditions</b>: Both popovers are dismissible and have multi:true.<br /><br />
+
+        Step 1) Open Popover 3 and Popover 4 so that they're both open at the same time.<br />
+        Step 2) Click outside of both of them. Make sure both close.<br />
+    </div>
+    <div>
+        <div id="popover3" class="pop">Popover 3</div>
+        <div id="popover4" class="pop">Popover 4</div>
+    </div>
+</body>
+</html>
diff --git a/src/jquery.webui-popover.js b/src/jquery.webui-popover.js
@@ -78,7 +78,6 @@
         var _srcElements = [];
         var backdrop = $('<div class="webui-popover-backdrop"></div>');
         var _globalIdSeed = 0;
-        var _isBodyEventHandled = false;
         var _offsetOut = -2000; // the value offset  out of the screen
         var $document = $(document);
 
@@ -739,19 +738,18 @@
             },
 
             bindBodyEvents: function() {
-                if (_isBodyEventHandled) {
-                    return;
-                }
                 if (this.options.dismissible && this.getTrigger() === 'click') {
                     if (isMobile) {
                         $document.off('touchstart.webui-popover').on('touchstart.webui-popover', $.proxy(this.bodyTouchStartHandler, this));
                     } else {
-                        $document.off('keyup.webui-popover').on('keyup.webui-popover', $.proxy(this.escapeHandler, this));
-                        $document.off('click.webui-popover').on('click.webui-popover', $.proxy(this.bodyClickHandler, this));
+                        $document.off('keyup.webui-popover' + this._idSeed)
+                            .on('keyup.webui-popover' + this._idSeed, $.proxy(this.escapeHandler, this));
+                        $document.off('click.webui-popover' + this._idSeed)
+                            .on('click.webui-popover' + this._idSeed, $.proxy(this.bodyClickHandler, this));
                     }
                 } else if (this.getTrigger() === 'hover') {
-                    $document.off('touchend.webui-popover')
-                        .on('touchend.webui-popover', $.proxy(this.bodyClickHandler, this));
+                    $document.off('touchend.webui-popover' + this._idSeed)
+                        .on('touchend.webui-popover' + this._idSeed, $.proxy(this.bodyClickHandler, this));
                 }
             },
 
@@ -782,7 +780,7 @@
             },
             escapeHandler: function(e) {
                 if (e.keyCode === 27) {
-                    this.hideAll();
+                    this.hide();
                 }
             },
             bodyTouchStartHandler: function(e) {
@@ -797,7 +795,6 @@
                 });
             },
             bodyClickHandler: function(e) {
-                _isBodyEventHandled = true;
                 var canHide = true;
                 for (var i = 0; i < _srcElements.length; i++) {
                     var pop = getPopFromElement(_srcElements[i]);
@@ -816,7 +813,7 @@
                     }
                 }
                 if (canHide) {
-                    hideAllPop();
+                    this.hide();
                 }
             },