Updated dropdowns to hide after option click

Fixes #429

diff --git a/resources/assets/js/controllers.js b/resources/assets/js/controllers.js
index ac1c3487c8351b45d81eb7d2b1fa526499fe43c0..9337ea8899fd092b9f297c90ad9d1315875a4b9a 100644 (file)
--- a/resources/assets/js/controllers.js
+++ b/resources/assets/js/controllers.js
@@ -379,7 +379,7 @@ module.exports = function (ngApp, events) {
          */
         $scope.discardDraft = function () {
             let url = window.baseUrl('/ajax/page/' + pageId);
          */
         $scope.discardDraft = function () {
             let url = window.baseUrl('/ajax/page/' + pageId);

-            $http.get(url).then((responseData) => {
+            $http.get(url).then(responseData => {

                 if (autoSave) $interval.cancel(autoSave);
                 $scope.draftText = trans('entities.pages_editing_page');
                 $scope.isUpdateDraft = false;
                 if (autoSave) $interval.cancel(autoSave);
                 $scope.draftText = trans('entities.pages_editing_page');
                 $scope.isUpdateDraft = false;

diff --git a/resources/assets/js/directives.js b/resources/assets/js/directives.js
index 51f1b7579ce5f11f0bafbb98939d83e6d4672179..d783fd68243450d40436abdca661a51ca04618d9 100644 (file)
--- a/resources/assets/js/directives.js
+++ b/resources/assets/js/directives.js
@@ -123,25 +123,31 @@ module.exports = function (ngApp, events) {
             restrict: 'A',
             link: function (scope, element, attrs) {
                 const menu = element.find('ul');
             restrict: 'A',
             link: function (scope, element, attrs) {
                 const menu = element.find('ul');

-                element.find('[dropdown-toggle]').on('click', function () {
+
+                function hide() {
+                    menu.hide();
+                    menu.removeClass('anim menuIn');
+                }
+
+                function show() {

                     menu.show().addClass('anim menuIn');
                     menu.show().addClass('anim menuIn');

+                    element.mouseleave(hide);
+
+                    // Focus on input if exist in dropdown and hide on enter press

                     let inputs = menu.find('input');
                     let inputs = menu.find('input');

-                    let hasInput = inputs.length > 0;
-                    if (hasInput) {
-                        inputs.first().focus();
-                        element.on('keypress', 'input', event => {
-                            if (event.keyCode === 13) {
-                                event.preventDefault();
-                                menu.hide();
-                                menu.removeClass('anim menuIn');
-                                return false;
-                            }
-                        });
-                    }
-                    element.mouseleave(function () {
-                        menu.hide();
-                        menu.removeClass('anim menuIn');
-                    });
+                    if (inputs.length > 0) inputs.first().focus();
+                }
+
+                // Hide menu on option click
+                element.on('click', '> ul a', hide);
+                // Show dropdown on toggle click.
+                element.find('[dropdown-toggle]').on('click', show);
+                // Hide menu on enter press in inputs
+                element.on('keypress', 'input', event => {
+                    if (event.keyCode !== 13) return true;
+                    event.preventDefault();
+                    hide();
+                    return false;

                 });
             }
         };
                 });
             }
         };