Hack the drawer to close it when clicking outside

customize.dist/src/less/dropdown.less

@@ -21,6 +21,10 @@
             margin-right: 0px;
             margin-left: 5px;
         }
+        * {
+            .unselectable();
+            cursor: default;
+        }
     }
 
     .dropdown-bar-content {

customize.dist/src/less/toolbar.less

@@ -912,7 +912,7 @@ body .cryptpad-toolbar {
         background: @dropdown-bg;
         display: flex;
         flex-flow: column;
-        z-index:1000;
+        z-index:10000;
         color: black;
         .fa {
             font-size: 17px;
@@ -920,7 +920,7 @@ body .cryptpad-toolbar {
         &> span {
             box-sizing: border-box;
             min-width: 150px;
-            height: 26px;
+            height: 32px;
             border-radius: 0;
             border: 0;
         }

www/common/toolbar2.js

@@ -81,15 +81,31 @@ define([
 
         var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS);
         if (!config.hideDrawer) {
-            var $drawerContent = $('<div>', {'class': DRAWER_CLS}).appendTo($rightside).hide();
+            var $drawerContent = $('<div>', {
+                'class': DRAWER_CLS,// + ' dropdown-bar-content cryptpad-dropdown'
+                'tabindex': 1
+            }).appendTo($rightside).hide();
             var $drawer = Cryptpad.createButton('more', true).appendTo($rightside);
             $drawer.click(function () {
                 $drawerContent.toggle();
                 $drawer.removeClass('active');
                 if ($drawerContent.is(':visible')) {
                     $drawer.addClass('active');
+                    $drawerContent.focus();
                 }
             });
+            var onBlur = function (e) {
+                if (e.relatedTarget) {
+                    if ($(e.relatedTarget).is('.drawer-button')) { return; }
+                    if ($(e.relatedTarget).parents('.'+DRAWER_CLS).length) {
+                        $(e.relatedTarget).blur(onBlur);
+                        return;
+                    }
+                }
+                $drawer.removeClass('active');
+                $drawerContent.hide();
+            };
+            $drawerContent.blur(onBlur);
         }
 
         // The 'notitle' class removes the line added for the title with a small screen