fix(aio): leave results panel open when opening search result on new page

Fixes #17580

aio/src/app/search/search-results/search-results.component.html

@@ -8,14 +8,14 @@
     <h3>{{area.name}} ({{area.pages.length + area.priorityPages.length}})</h3>
     <ul class="priority-pages" >
       <li class="search-page" *ngFor="let page of area.priorityPages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
           <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
         </a>
       </li>
     </ul>
     <ul>
       <li class="search-page" *ngFor="let page of area.pages">
-        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page)">
+        <a class="search-result-item" href="{{ page.path }}" (click)="onResultSelected(page, $event)">
           <span class="symbol {{page.type}}" *ngIf="area.name === 'api'"></span>{{ page.title }}
         </a>
       </li>

aio/src/app/search/search-results/search-results.component.spec.ts

@@ -1,3 +1,4 @@
+import { DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Observable } from 'rxjs/Observable';
@@ -128,19 +129,47 @@ describe('SearchResultsComponent', () => {
     expect(component.searchAreas).toEqual([]);
   });
 
-  it('should emit a "resultSelected" event when a search result anchor is clicked', () => {
+  describe('when a search result anchor is clicked', () => {
-    const searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
+    let searchResult: SearchResult;
     let selected: SearchResult;
+    let anchor: DebugElement;
+
+    beforeEach(() => {
       component.resultSelected.subscribe(result => selected = result);
 
+      selected = null;
+      searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
       searchResults.next({ query: 'something', results: [searchResult] });
-    fixture.detectChanges();
-    expect(selected).toBeUndefined();
 
-    const anchor = fixture.debugElement.query(By.css('a'));
-    anchor.triggerEventHandler('click', {});
       fixture.detectChanges();
-    expect(selected).toEqual(searchResult);
+      anchor = fixture.debugElement.query(By.css('a'));
+
+      expect(selected).toBeNull();
+    });
+
+    it('should emit a "resultSelected" event', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: false});
+      fixture.detectChanges();
+      expect(selected).toBe(searchResult);
+    });
+
+    it('should not emit an event if mouse button is not zero (middle or right)', () => {
+      anchor.triggerEventHandler('click', {button: 1, ctrlKey: false, metaKey: false});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
+    });
+
+    it('should not emit an event if the `ctrl` key is pressed', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: true, metaKey: false});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
+    });
+
+    it('should not emit an event if the `meta` key is pressed', () => {
+      anchor.triggerEventHandler('click', {button: 0, ctrlKey: false, metaKey: true});
+      fixture.detectChanges();
+      expect(selected).toBeNull();
+    });
   });
 
   describe('when no query results', () => {

aio/src/app/search/search-results/search-results.component.ts

@@ -45,9 +45,12 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
     this.resultsSubscription.unsubscribe();
   }
 
-  onResultSelected(page: SearchResult) {
+  onResultSelected(page: SearchResult, event: MouseEvent) {
+    // Emit a `resultSelected` event if the result is to be displayed on this page.
+    if (event.button === 0 && !event.ctrlKey && !event.metaKey) {
       this.resultSelected.emit(page);
     }
+  }
 
   // Map the search results into groups by area
   private processSearchResults(search: SearchResults) {