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 @@
+