From db0737c42875e6f707bce1b910a3de8a35baba13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Tue, 11 Apr 2017 11:16:43 +0200
Subject: [PATCH] Do not auto close query dropdown and focus it

---
 app/assets/stylesheets/layout/_toolbar.sass        |  2 ++
 config/locales/js-en.yml                           |  1 +
 .../has-dropdown-menu-directive.ts                 |  2 +-
 .../wp-query-select/wp-query-select.controller.ts  | 14 +++++++++-----
 .../wp-query-select/wp-query-select.template.html  |  3 +--
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/layout/_toolbar.sass b/app/assets/stylesheets/layout/_toolbar.sass
index f298b9ef90..1519adaba8 100644
--- a/app/assets/stylesheets/layout/_toolbar.sass
+++ b/app/assets/stylesheets/layout/_toolbar.sass
@@ -213,6 +213,8 @@
     display: block
   .search-query-wrapper
     padding: 15px
+  .query-select-dropdown--no-results
+    padding: 15px 15px 0
   input
     box-sizing: border-box
     margin: 0 auto
diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index 55aa5a817a..abf0c3f6d8 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -498,6 +498,7 @@ en:
         errors:
           unretrievable_query: "Unable to retrieve query from URL"
           not_found: "There is no such query"
+        text_no_results: "No matching queries were found."
       table:
         summary: "Table with rows of work package and columns of work package attributes."
         text_inline_edit: "Most cells of this table are buttons that activate inline-editing functionality of that attribute."
diff --git a/frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.ts b/frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.ts
index 196e38c27d..12bdc823cf 100644
--- a/frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.ts
+++ b/frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.ts
@@ -74,7 +74,7 @@ function hasDropdownMenu(contextMenu:ContextMenuService, FocusHelper:any) {
         event.stopPropagation();
         scope.$evalAsync(() => {
           open(event).then((menuElement:JQuery) => {
-            menuElement.find('.menu-item').first().focus();
+            FocusHelper.focusElement(menuElement.find('.menu-item,input').first(), true);
           });
         });
 
diff --git a/frontend/app/components/wp-query-select/wp-query-select.controller.ts b/frontend/app/components/wp-query-select/wp-query-select.controller.ts
index e3e1d2f222..76cab7b355 100644
--- a/frontend/app/components/wp-query-select/wp-query-select.controller.ts
+++ b/frontend/app/components/wp-query-select/wp-query-select.controller.ts
@@ -52,6 +52,7 @@ interface MyI18n {
   label:string;
   scope_global:string;
   scope_private:string;
+  no_results:string;
 }
 
 export class WorkPackageQuerySelectController {
@@ -68,7 +69,8 @@ export class WorkPackageQuerySelectController {
       loading: I18n.t('js.ajax.loading'),
       label: I18n.t('js.toolbar.search_query_label'),
       scope_global: I18n.t('js.label_global_queries'),
-      scope_private: I18n.t('js.label_custom_queries')
+      scope_private: I18n.t('js.label_custom_queries'),
+      no_results: I18n.t('js.work_packages.query.text_no_results')
     };
 
     this.setup();
@@ -93,8 +95,7 @@ export class WorkPackageQuerySelectController {
     this.defineJQueryQueryComplete();
 
     let input = angular.element('#query-title-filter') as IQueryAutocompleteJQuery;
-
-    let close = () => { this.contextMenu.close() }
+    let noResults = angular.element('.query-select-dropdown--no-results');
 
     input.querycomplete({
       delay: 0,
@@ -102,11 +103,14 @@ export class WorkPackageQuerySelectController {
       select: (ul:any, selected:{item:IAutocompleteItem}) => {
         this.loadQuery(selected.item.query);
       },
+      response: (event:any,ui:any) => {
+        // Show the noResults span if we don't have any matches
+        noResults.toggle(ui.content.length === 0);
+      },
       appendTo: '.search-query-wrapper',
       classes: {
         'ui-autocomplete': '-inplace'
-      },
-      close: close
+      }
     });
   }
 
diff --git a/frontend/app/components/wp-query-select/wp-query-select.template.html b/frontend/app/components/wp-query-select/wp-query-select.template.html
index 82a8505266..b16d17f3d8 100644
--- a/frontend/app/components/wp-query-select/wp-query-select.template.html
+++ b/frontend/app/components/wp-query-select/wp-query-select.template.html
@@ -2,11 +2,10 @@
   <div class="search-query-wrapper">
     <label for="title-filter" class="hidden-for-sighted">{{ ::i18n.label }}</label>
     <input type="text"
-           focus
-           ng-disabled="!loaded"
            class="ui-autocomplete--input"
            id="query-title-filter"
            placeholder="{{ i18n.loading }}">
     <i id="magnifier" class="icon-search"></i>
   </div>
+  <p class="query-select-dropdown--no-results" hidden ng-bind="::i18n.no_results"></p>
 </div>