Do not auto close query dropdown and focus it

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

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."

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);
           });
         });
 

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
+      }
     });
   }
 

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>