dashboard: fix edge case with keyboard nav in dashboard search. #10100

If expanding a folder using mouse, unselect current keyboard selection

public/app/core/components/search/search.html

@@ -24,7 +24,9 @@
             <h6 ng-show="!ctrl.isLoading && ctrl.results.length === 0">No dashboards matching your query were found.</h6>
             <h6 ng-show="!ctrl.isLoading && ctrl.results.length === 0">No dashboards matching your query were found.</h6>
             <dashboard-search-results
             <dashboard-search-results
               results="ctrl.results"
               results="ctrl.results"
-              on-tag-selected="ctrl.filterByTag($tag)" />
+              on-tag-selected="ctrl.filterByTag($tag)"
+              on-folder-expanding="ctrl.folderExpanding()"
+              on-folder-expanded="ctrl.folderExpanded($folder)" />
         </div>
         </div>
     </div>
     </div>
 
 

public/app/core/components/search/search.ts

@@ -102,6 +102,11 @@ export class SearchCtrl {
       }
       }
     }
     }
 
 
+    if (direction === 0) {
+      this.selectedIndex = -1;
+      return;
+    }
+
     const max = flattenedResult.length;
     const max = flattenedResult.length;
     let newIndex = this.selectedIndex + direction;
     let newIndex = this.selectedIndex + direction;
     this.selectedIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex;
     this.selectedIndex = ((newIndex %= max) < 0) ? newIndex + max : newIndex;
@@ -182,6 +187,10 @@ export class SearchCtrl {
     this.searchDashboards();
     this.searchDashboards();
   }
   }
 
 
+  folderExpanding() {
+    this.moveSelection(0);
+  }
+
   private getFlattenedResultForNavigation() {
   private getFlattenedResultForNavigation() {
     let folderIndex = 0;
     let folderIndex = 0;
 
 

public/app/core/components/search/search_results.jest.ts

@@ -55,21 +55,43 @@ describe('SearchResultsCtrl', () => {
     });
     });
   });
   });
 
 
-  describe('when toggle a folder', () => {
-    let folderToggled = false;
+  describe('when toggle a collapsed folder', () => {
+    let folderExpanded = false;
+
+    beforeEach(() => {
+      ctrl = new SearchResultsCtrl({});
+      ctrl.onFolderExpanding = () => { folderExpanded = true; };
+
       let folder = {
       let folder = {
-      toggle: () => {
-        folderToggled = true;
-      }
+        expanded: false,
+        toggle: () => {}
       };
       };
 
 
+      ctrl.toggleFolderExpand(folder);
+    });
+
+    it('should trigger folder expanding callback', () => {
+      expect(folderExpanded).toBeTruthy();
+    });
+  });
+
+  describe('when toggle an expanded folder', () => {
+    let folderExpanded = false;
+
     beforeEach(() => {
     beforeEach(() => {
       ctrl = new SearchResultsCtrl({});
       ctrl = new SearchResultsCtrl({});
+      ctrl.onFolderExpanding = () => { folderExpanded = true; };
+
+      let folder = {
+        expanded: true,
+        toggle: () => {}
+      };
+
       ctrl.toggleFolderExpand(folder);
       ctrl.toggleFolderExpand(folder);
     });
     });
 
 
-    it('should trigger folder toggle callback', () => {
-      expect(folderToggled).toBeTruthy();
+    it('should not trigger folder expanding callback', () => {
+      expect(folderExpanded).toBeFalsy();
     });
     });
   });
   });
 });
 });

public/app/core/components/search/search_results.ts

@@ -5,6 +5,7 @@ export class SearchResultsCtrl {
   results: any;
   results: any;
   onSelectionChanged: any;
   onSelectionChanged: any;
   onTagSelected: any;
   onTagSelected: any;
+  onFolderExpanding: any;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor(private $location) {
   constructor(private $location) {
@@ -13,6 +14,10 @@ export class SearchResultsCtrl {
 
 
   toggleFolderExpand(section) {
   toggleFolderExpand(section) {
     if (section.toggle) {
     if (section.toggle) {
+      if (!section.expanded && this.onFolderExpanding) {
+        this.onFolderExpanding();
+      }
+
       section.toggle(section);
       section.toggle(section);
     }
     }
   }
   }
@@ -62,7 +67,8 @@ export function searchResultsDirective() {
       editable: '@',
       editable: '@',
       results: '=',
       results: '=',
       onSelectionChanged: '&',
       onSelectionChanged: '&',
-      onTagSelected: '&'
+      onTagSelected: '&',
+      onFolderExpanding: '&'
     },
     },
   };
   };
 }
 }

public/app/core/services/search_srv.ts

@@ -51,7 +51,7 @@ export class SearchSrv {
     store.set('search.sections.recent', this.recentIsOpen);
     store.set('search.sections.recent', this.recentIsOpen);
 
 
     if (!section.expanded || section.items.length) {
     if (!section.expanded || section.items.length) {
-      return;
+      return Promise.resolve();
     }
     }
 
 
     return this.queryForRecentDashboards().then(result => {
     return this.queryForRecentDashboards().then(result => {
@@ -62,6 +62,7 @@ export class SearchSrv {
   private toggleStarred(section) {
   private toggleStarred(section) {
     this.starredIsOpen = section.expanded = !section.expanded;
     this.starredIsOpen = section.expanded = !section.expanded;
     store.set('search.sections.starred', this.starredIsOpen);
     store.set('search.sections.starred', this.starredIsOpen);
+    return Promise.resolve();
   }
   }
 
 
   private getStarred(sections) {
   private getStarred(sections) {
@@ -189,7 +190,7 @@ export class SearchSrv {
     section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder';
     section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder';
 
 
     if (section.items.length) {
     if (section.items.length) {
-      return;
+      return Promise.resolve();
     }
     }
 
 
     let query = {
     let query = {