From 2447bd1bac2d2d8581260c5d93e7029fb905e75e Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Sun, 18 Jun 2017 10:33:24 +0300
Subject: [PATCH] fix(aio): leave results panel open when opening search result
 on new page

Fixes #17580
---
 .../search-results.component.html             |  4 +-
 .../search-results.component.spec.ts          | 49 +++++++++++++++----
 .../search-results.component.ts               |  7 ++-
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/aio/src/app/search/search-results/search-results.component.html b/aio/src/app/search/search-results/search-results.component.html
index 7619e692c2..c2bd575b97 100644
--- a/aio/src/app/search/search-results/search-results.component.html
+++ b/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>
diff --git a/aio/src/app/search/search-results/search-results.component.spec.ts b/aio/src/app/search/search-results/search-results.component.spec.ts
index 5a82255a03..1e54faafde 100644
--- a/aio/src/app/search/search-results/search-results.component.spec.ts
+++ b/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', () => {
-    const searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
+  describe('when a search result anchor is clicked', () => {
+    let searchResult: SearchResult;
     let selected: SearchResult;
-    component.resultSelected.subscribe(result => selected = result);
+    let anchor: DebugElement;
 
-    searchResults.next({ query: 'something', results: [searchResult] });
-    fixture.detectChanges();
-    expect(selected).toBeUndefined();
+    beforeEach(() => {
+      component.resultSelected.subscribe(result => selected = result);
 
-    const anchor = fixture.debugElement.query(By.css('a'));
-    anchor.triggerEventHandler('click', {});
-    fixture.detectChanges();
-    expect(selected).toEqual(searchResult);
+      selected = null;
+      searchResult = { path: 'news', title: 'News', type: 'marketing', keywords: '', titleWords: '' };
+      searchResults.next({ query: 'something', results: [searchResult] });
+
+      fixture.detectChanges();
+      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', () => {
diff --git a/aio/src/app/search/search-results/search-results.component.ts b/aio/src/app/search/search-results/search-results.component.ts
index 8b81d2835a..adf9291985 100644
--- a/aio/src/app/search/search-results/search-results.component.ts
+++ b/aio/src/app/search/search-results/search-results.component.ts
@@ -45,8 +45,11 @@ export class SearchResultsComponent implements OnInit, OnDestroy {
     this.resultsSubscription.unsubscribe();
   }
 
-  onResultSelected(page: SearchResult) {
-    this.resultSelected.emit(page);
+  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