Dashboard selector listing all widgets is hidden once the scroll bar is used (#13608)

* Dashboard selector listing all widgets is hidden once the scroll bar is used

* make sure it works even when scrolling, then keep holding mouse down for few seconds before releasing the scroll

1 files changed, 27 insertions, 1 deletions

diff --git a/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js b/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js
index ee1a2cf219..6587118635 100644
--- a/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js
+++ b/plugins/CoreHome/angularjs/common/directives/focus-anywhere-but-here.js
@@ -22,7 +22,18 @@
             restrict: 'A',
             link: function(scope, element, attr, ctrl) {
 
+                var isMouseDown = false;
+                var hasScrolled = false;
+
                 function onClickOutsideElement (event) {
+                    var hadUsedScrollbar = isMouseDown && hasScrolled;
+                    isMouseDown = false;
+                    hasScrolled = false;
+
+                    if (hadUsedScrollbar) {
+                        return;
+                    }
+
                     if (element.has(event.target).length === 0) {
                         setTimeout(function () {
                             scope.$apply(attr.piwikFocusAnywhereButHere);
@@ -30,19 +41,34 @@
                     }
                 }
 
+                function onScroll (event) {
+                    hasScrolled = true;
+                }
+
+                function onMouseDown (event) {
+                    isMouseDown = true;
+                    hasScrolled = false;
+                }
+
                 function onEscapeHandler (event) {
                     if (event.which === 27) {
                         setTimeout(function () {
+                            isMouseDown = false;
+                            hasScrolled = false;
                             scope.$apply(attr.piwikFocusAnywhereButHere);
                         }, 0);
                     }
                 }
 
                 $document.on('keyup', onEscapeHandler);
+                $document.on('mousedown', onMouseDown);
                 $document.on('mouseup', onClickOutsideElement);
+                $document.on('scroll', onScroll);
                 scope.$on('$destroy', function() {
-                    $document.off('mouseup', onClickOutsideElement);
                     $document.off('keyup', onEscapeHandler);
+                    $document.off('mousedown', onMouseDown);
+                    $document.off('mouseup', onClickOutsideElement);
+                    $document.off('scroll', onScroll);
                 });
             }
         };