From 2f35392cd8618154da96970c5a92e2dd96761c21 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 31 May 2017 01:15:54 +0300
Subject: [PATCH] fix(aio): make the search-pane larger (and improve the
 search-box) (#17105)

* fix(aio): make the search-pane larger

Fixes #17094

* feat(aio): give the search-box a type of "search"

This enables browsers to style it better (e.g. add an `x` button for clearing
the field, which allows users to quickly reset the search query and hide
results).
---
 .../app/search/search-box/search-box.component.spec.ts    | 8 ++++++++
 aio/src/app/search/search-box/search-box.component.ts     | 2 ++
 aio/src/styles/2-modules/_search-results.scss             | 5 ++---
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/aio/src/app/search/search-box/search-box.component.spec.ts b/aio/src/app/search/search-box/search-box.component.spec.ts
index 8b373512a5..c8c9618544 100644
--- a/aio/src/app/search/search-box/search-box.component.spec.ts
+++ b/aio/src/app/search/search-box/search-box.component.spec.ts
@@ -44,6 +44,14 @@ describe('SearchBoxComponent', () => {
     }));
   });
 
+  describe('on input', () => {
+    it('should trigger the search event', () => {
+      const input = fixture.debugElement.query(By.css('input'));
+      input.triggerEventHandler('input', { target: { value: 'some query' } });
+      expect(host.doSearch).toHaveBeenCalledWith('some query');
+    });
+  });
+
   describe('on keyup', () => {
     it('should trigger the search event', () => {
       const input = fixture.debugElement.query(By.css('input'));
diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index 00578803ab..5073d41906 100644
--- a/aio/src/app/search/search-box/search-box.component.ts
+++ b/aio/src/app/search/search-box/search-box.component.ts
@@ -14,8 +14,10 @@ import { LocationService } from 'app/shared/location.service';
 @Component({
   selector: 'aio-search-box',
   template: `<input #searchBox
+    type="search"
     aria-label="search"
     placeholder="Search"
+    (input)="onSearch($event.target.value)"
     (keyup)="onSearch($event.target.value)"
     (focus)="onSearch($event.target.value)"
     (click)="onSearch($event.target.value)">`
diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss
index 16adc61012..9ec33bd153 100644
--- a/aio/src/styles/2-modules/_search-results.scss
+++ b/aio/src/styles/2-modules/_search-results.scss
@@ -10,7 +10,7 @@ aio-search-results {
     padding: 68px 32px 0;
     color: $offwhite;
     width: auto;
-    max-height: 50%;
+    max-height: 95vh;
     position: fixed;
     top: 0;
     left: 0;
@@ -18,11 +18,10 @@ aio-search-results {
     z-index: 5;
     background-color: $darkgray;
     box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+    box-sizing: border-box;
 
     @media (max-width: 480px) {
         display: block;
-        max-height: 70%;
-        box-sizing: border-box;
         .search-area {
             display: block;
             margin: 16px 16px;