From 93dbf85a14f10c700e2c152590e508966457e75b Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Sat, 22 Jun 2019 18:31:09 -0700
Subject: [PATCH] GUACAMOLE-723: Automatically close menus upon click unless
 explicitly marked as interactive.

---
 .../webapp/app/client/templates/client.html   |  2 +-
 .../app/navigation/directives/guacMenu.js     | 29 ++++++++++++-------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 446d68566..3f56a9de0 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -54,7 +54,7 @@
             <div class="header">
                 <h2 ng-hide="rootConnectionGroups">{{client.name}}</h2>
                 <h2 class="connection-select-menu" ng-show="rootConnectionGroups">
-                    <guac-menu menu-title="client.name">
+                    <guac-menu menu-title="client.name" interactive="true">
                         <div class="all-connections">
                             <guac-group-list-filter connection-groups="rootConnectionGroups"
                                 filtered-connection-groups="filteredRootConnectionGroups"
diff --git a/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js b/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js
index 92e2c6c6d..230e9028d 100644
--- a/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js
+++ b/guacamole/src/main/webapp/app/navigation/directives/guacMenu.js
@@ -34,7 +34,16 @@ angular.module('navigation').directive('guacMenu', [function guacMenu() {
              *
              * @type String
              */
-            menuTitle : '='
+            menuTitle : '=',
+
+            /**
+             * Whether the menu should remain open while the user interacts
+             * with the contents of the menu. By default, the menu will close
+             * if the user clicks within the menu contents.
+             *
+             * @type Boolean
+             */
+            interactive : '='
 
         },
 
@@ -81,21 +90,19 @@ angular.module('navigation').directive('guacMenu', [function guacMenu() {
                 $scope.menuShown = !$scope.menuShown;
             };
 
-            // Close menu when use clicks anywhere else
-            document.body.addEventListener('click', function clickOutsideMenu() {
+            // Close menu when user clicks anywhere outside this specific menu
+            document.body.addEventListener('click', function clickOutsideMenu(e) {
                 $scope.$apply(function closeMenu() {
-                    $scope.menuShown = false;
+                    if (e.target !== element && !element.contains(e.target))
+                        $scope.menuShown = false;
                 });
             }, false);
 
-            // Prevent click within menu from triggering the outside-menu handler
-            element.addEventListener('click', function clickInsideMenu(e) {
-                e.stopPropagation();
-            }, false);
-
-            // Prevent click within menu contents from toggling menu visibility
+            // Prevent clicks within menu contents from toggling menu visibility
+            // if the menu contents are intended to be interactive
             contents.addEventListener('click', function clickInsideMenuContents(e) {
-                e.stopPropagation();
+                if ($scope.interactive)
+                    e.stopPropagation();
             }, false);
 
         }] // end controller