Merge branch 'master' into list-border-refactor

demos/component-docs/app.scss

@@ -14,6 +14,7 @@ $font-path: '../../dist/fonts';
 @import "cards/background/styles";
 @import "cards/advanced-weather/styles";
 @import "cards/advanced-map/styles";
+@import "grid/basic/styles";
 @import "icons/basic/styles";
 @import "menus/basic/styles";
 @import "slides/basic/styles";
@@ -165,6 +166,6 @@ body.ios img#ios-only {
   top: 0px;
   width: 100%;
   height: auto;
-  z-index: 50;
+  z-index: 9999;
 }
 

demos/component-docs/grid/basic/pages.ts

@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+    templateUrl: 'grid/basic/template.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}

demos/component-docs/grid/basic/styles.scss

@@ -0,0 +1,11 @@
+.grid-page {
+  
+  ion-col div {
+    background-color: #F9FAFB;
+    padding: 5px;
+    border: 1px solid #ddd;
+    border-radius: 2px;
+    text-align: center;
+  }
+  
+}

demos/component-docs/grid/basic/template.html

@@ -0,0 +1,66 @@
+
+<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+  <ion-title>Grid</ion-title>
+</ion-navbar>
+
+<ion-content class="has-header grid-page">
+  <ion-row>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        of text<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row center>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        center<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row center>
+    <ion-col class="col-offset-25"><div>col</div></ion-col>
+    <ion-col><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        center<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row baseline>
+    <ion-col class="col-offset-50"><div>col</div></ion-col>
+    <ion-col>
+      <div>
+        col<br>
+        3 lines<br>
+        baseline<br>   
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row baseline>
+    <ion-col class="col-offset-75">
+      <div>
+        col<br>
+        2 lines<br>
+      </div>
+    </ion-col>
+  </ion-row>
+
+
+</ion-content>

demos/component-docs/grid/grid.ts

@@ -0,0 +1 @@
+export * from './basic/pages';

demos/component-docs/helpers.ts

@@ -4,6 +4,7 @@ import {Platform, Navbar} from 'ionic/ionic';
 import * as actionSheets from './action-sheets/action-sheets';
 import * as buttons from './buttons/buttons';
 import * as cards from './cards/cards';
+import * as grid from './grid/grid';
 import * as labels from './labels/labels';
 import * as icons from './icons/icons';
 import * as inputs from './inputs/inputs';
@@ -108,6 +109,7 @@ export function getPageFor(hash) {
         'stacked-labels': labels.StackedPage,
 
         'icons': icons.BasicPage,
+        'grid': grid.BasicPage,
 
         'lists': lists.BasicPage,
         'list-lines': lists.BasicPage,

ionic/components/action-sheet/test/basic/index.ts

@@ -4,7 +4,7 @@ import {App, ActionSheet} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
 
   constructor(actionSheet: ActionSheet) {
     this.actionSheet = actionSheet;

ionic/components/checkbox/test/basic/index.ts

@@ -14,7 +14,7 @@ import {
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.fruitsForm = new ControlGroup({
       "appleCtrl": new Control(),

ionic/components/content/content.ts

@@ -2,6 +2,7 @@ import {Component, ElementRef, Optional, NgZone} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
+import {raf}  from '../../util/dom';
 import {Keyboard} from '../../util/keyboard';
 import {ViewController} from '../nav/view-controller';
 import {Animation} from '../../animations/animation';
@@ -71,19 +72,34 @@ export class Content extends Ion {
     }
   }
 
-  onScrollEnd(callback, debounceWait=400) {
-    let timerId, deregister;
+  onScrollEnd(callback) {
+    let lastScrollTop = null;
+    let framesUnchanged = 0;
+    let scrollElement = this.scrollElement;
 
-    function debounce() {
-      console.debug('onScroll')
-      clearTimeout(timerId);
-      timerId = setTimeout(() => {
-        deregister();
-        callback();
-      }, debounceWait);
+    function next() {
+      let currentScrollTop = scrollElement.scrollTop;
+      if (lastScrollTop !== null) {
+
+        if (Math.round(lastScrollTop) === Math.round(currentScrollTop)) {
+          framesUnchanged++;
+        } else {
+          framesUnchanged = 0;
+        }
+
+        if (framesUnchanged > 9) {
+          return callback();
+        }
+      }
+
+      lastScrollTop = currentScrollTop;
+
+      raf(() => {
+        raf(next);
+      });
     }
 
-    deregister = this.addScrollEventListener(debounce);
+    setTimeout(next, 100);
   }
 
   /**

ionic/components/grid/grid.scss

@@ -18,13 +18,16 @@ $grid-responsive-lg-break:        1023px !default; // smaller than landscape tab
     #{$selector} {
       flex-direction: column;
 
-      .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
-        flex: 1;
-        margin-bottom: ($grid-padding-width * 3) / 2;
-        margin-left: 0;
-        max-width: 100%;
-        width: 100%;
+      ion-col {
+        &[width-10], &[width-20], &[width-25], &[width-33], &[width-34], &[width-50], &[width-66], &[width-67], &[width-75], &[width-80], &[width-90] {
+          flex: 1;
+          margin-bottom: ($grid-padding-width * 3) / 2;
+          margin-left: 0;
+          max-width: 100%;
+          width: 100%;
+        }
       }
+
     }
   }
 }
@@ -43,10 +46,6 @@ ion-row {
     padding: 0;
   }
 
-  > .col {
-    padding: 0;
-  }
-
   &[top] {
     align-items: flex-start;
   }
@@ -82,44 +81,48 @@ ion-col {
   &[bottom] {
     align-self: flex-end;
   }
+
   &[center] {
     align-self: center;
   }
+  &[stretch] {
+    align-self: stretch;
+  }
+  &[baseline] {
+    align-self: baseline;
+  }
 }
 
 
-/* Vertically Align Columns */
-/* .row-* vertically aligns every .col in the .row */
-
-/* .col-* vertically aligns an individual .col */
-
 /* Column Offsets */
-.col-offset-10 {
-  margin-left: 10%;
-}
-.col-offset-20 {
-  margin-left: 20%;
-}
-.col-offset-25 {
-  margin-left: 25%;
-}
-.col-offset-33, .col-offset-34 {
-  margin-left: 33.3333%;
-}
-.col-offset-50 {
-  margin-left: 50%;
-}
-.col-offset-66, .col-offset-67 {
-  margin-left: 66.6666%;
-}
-.col-offset-75 {
-  margin-left: 75%;
-}
-.col-offset-80 {
-  margin-left: 80%;
-}
-.col-offset-90 {
-  margin-left: 90%;
+ion-col {
+  &[offset-10] {
+    margin-left: 10%;
+  }
+  &[offset-20] {
+    margin-left: 20%;
+  }
+  &[offset-25] {
+    margin-left: 25%;
+  }
+  &[offset-33], &[offset-34] {
+    margin-left: 33.3333%;
+  }
+  &[offset-50] {
+    margin-left: 50%;
+  }
+  &[offset-66], &[offset-67] {
+    margin-left: 66.6666%;
+  }
+  &[offset-75] {
+    margin-left: 75%;
+  }
+  &[offset-80] {
+    margin-left: 80%;
+  }
+  &[offset-90] {
+    margin-left: 90%;
+  }
 }
 
 
@@ -127,50 +130,52 @@ ion-col {
 /* By default each grid column will evenly distribute */
 /* across the grid. However, you can specify individual */
 /* columns to take up a certain size of the available area */
-.col-10 {
-  flex: 0, 0, 10%;
-  max-width: 10%;
-}
-.col-20 {
-  flex: 0, 0, 20%;
-  max-width: 20%;
-}
-.col-25 {
-  flex: 0, 0, 25%;
-  max-width: 25%;
-}
-.col-33, .col-34 {
-  flex: 0, 0, 33.3333%;
-  max-width: 33.3333%;
-}
-.col-50 {
-  flex: 0, 0, 50%;
-  max-width: 50%;
-}
-.col-66, .col-67 {
-  flex: 0, 0, 66.6666%;
-  max-width: 66.6666%;
-}
-.col-75 {
-  flex: 0, 0, 75%;
-  max-width: 75%;
-}
-.col-80 {
-  flex: 0, 0, 80%;
-  max-width: 80%;
-}
-.col-90 {
-  flex: 0, 0, 90%;
-  max-width: 90%;
+ion-col {
+  &[width-10] {
+    flex: 0 0 10%;
+    max-width: 10%;
+  }
+  &[width-20] {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  &[width-25] {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  &[width-33], &[width-34] {
+    flex: 0 0 33.3333%;
+    max-width: 33.3333%;
+  }
+  &[width-50] {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  &[width-66], &[width-67] {
+    flex: 0 0 66.6666%;
+    max-width: 66.6666%;
+  }
+  &[width-75] {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  &[width-80] {
+    flex: 0 0 80%;
+    max-width: 80%;
+  }
+  &[width-90] {
+    flex: 0 0 90%;
+    max-width: 90%;
+  }
 }
 
 
 /* Responsive Grid Classes */
 /* Adding a class of responsive-X to a row */
-/* will trigger the flex-direction to */
+/* will trigger the width-direction to */
 /* change to column and add some margin */
 /* to any columns in the row for clearity */
 
-@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
-@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
-@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);
+@include responsive-grid-break('[responsive-sm]', $grid-responsive-sm-break);
+@include responsive-grid-break('[responsive-md]', $grid-responsive-md-break);
+@include responsive-grid-break('[responsive-lg]', $grid-responsive-lg-break);

ionic/components/grid/test/basic/main.html

@@ -2,43 +2,257 @@
 
 <ion-content class="grid-demo">
   <ion-row>
-    <ion-col>Col 1</ion-col>
-    <ion-col>Col 2</ion-col>
-    <ion-col>Col 3</ion-col>
     <ion-col>
-       Col 4<br>
-       w/ 3 lines<br>
-       of text<br>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col width-50>
+      <div>
+        ion-col[width-50]
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col width-25>
+      <div>
+        ion-col[width-25]
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col width-25>
+      <div>
+        ion-col[width-25]
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col width-25>
+      <div>
+        ion-col[width-25]
+      </div>
+    </ion-col>
+    <ion-col width-25 offset-25>
+      <div>
+        ion-col[width-25][offset-25]
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <div>
+        ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#<br>#
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col top>
+      <div>
+        ion-col[top]
+      </div>
+    </ion-col>
+    <ion-col center>
+      <div>
+        ion-col[center]
+      </div>
+    </ion-col>
+    <ion-col bottom>
+      <div>
+        ion-col[bottom]
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row top>
+    <ion-col>
+      <div>
+        [top] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [top] ion-col
+      </div>
+    </ion-col>
+    <ion-col bottom>
+      <div>
+        [top] ion-col[bottom]
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#
+      </div>
     </ion-col>
   </ion-row>
 
   <ion-row center>
-    <ion-col>Col 1</ion-col>
-    <ion-col>Col 2</ion-col>
-    <ion-col>Col 3</ion-col>
     <ion-col>
-      Col 4<br>
-      w/ 3 lines<br>
-      center<br>
+      <div>
+        [center] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [center] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [center] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#
+      </div>
     </ion-col>
   </ion-row>
 
-  <ion-row baseline>
-    <ion-col>Col 1</ion-col>
-    <ion-col>Col 2</ion-col>
-    <ion-col>Col 3</ion-col>
+  <ion-row bottom>
     <ion-col>
-      Col 4<br>
-      w/ 3 lines<br>
-      baseline<br>
+      <div>
+        [bottom] ion-col
+      </div>
+    </ion-col>
+    <ion-col top>
+      <div>
+        [bottom] ion-col[top]
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [bottom] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        ion-col<br>#<br>#
+      </div>
     </ion-col>
   </ion-row>
+
+  <ion-row responsive-sm>
+    <ion-col>
+      <div>
+        [responsive-sm] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-sm] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-sm] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-sm] ion-col
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row responsive-md>
+    <ion-col>
+      <div>
+        [responsive-md] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-md] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-md] ion-col
+      </div>
+    </ion-col>
+    <ion-col>
+      <div>
+        [responsive-md] ion-col
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row responsive-lg>
+    <ion-col width-50 offset-25>
+      <div>
+        [responsive-lg] ion-col[width-50][offset-25]
+      </div>
+    </ion-col>
+    <ion-col width-25>
+      <div>
+        [responsive-lg] ion-col[width-25]
+      </div>
+    </ion-col>
+  </ion-row>
+
 </ion-content>
 
 <style>
-  .grid-demo ion-col {
+  .grid-demo ion-col div {
     background-color: #f7f7f7;
     border: 1px solid #ddd;
-    margin: 1px;
+    padding: 10px 5px;
   }
 </style>

ionic/components/item/modes/md.scss

@@ -43,6 +43,7 @@ ion-note {
 }
 
 .item {
+  position: relative;
   padding-right: 0;
   padding-left: ($item-md-padding-left);
   font-size: $item-md-font-size;

ionic/components/list/test/group/index.ts

@@ -0,0 +1,15 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+    this.people = [
+      {"name": "Adam Bradley", "components": [ "all the things"]},
+      {"name": "Max Lynch", "components": [ "checkbox", "content", "form"]},
+      {"name": "Tim Lancina", "components": [ "tabs"]}
+    ];
+  }
+}

ionic/components/list/test/infinite/index.ts

@@ -9,7 +9,7 @@ import {App, List} from 'ionic/ionic';
   templateUrl: 'main.html',
   directives: [forwardRef(() => ItemCellTemplate)]
 })
-class IonicApp {
+class E2EApp {
   constructor() {
 
     this.items = []

ionic/components/list/test/repeat-headers/index.ts

@@ -4,7 +4,7 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.people = [
       {"name": "Adam Bradley", "components": [ "all the things"]},

ionic/components/list/test/sticky/index.ts

@@ -4,7 +4,7 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.groups = [];
 

ionic/components/radio/test/basic/index.ts

@@ -15,7 +15,7 @@ import {
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.fruits = new Control("");
 

ionic/components/searchbar/test/basic/index.ts

@@ -14,7 +14,7 @@ function randomTitle() {
   providers: [NgControl],
   directives: [FORM_DIRECTIVES]
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     var fb = new FormBuilder();
     this.searchQuery = '';

ionic/components/searchbar/test/floating/index.ts

@@ -7,7 +7,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   templateUrl: 'main.html',
   directives: [FORM_DIRECTIVES]
 })
-class IonicApp {
+class E2EApp {
   defaultSearch: string;
   customPlaceholder: string;
   defaultCancel: string;

ionic/components/searchbar/test/model/index.ts

@@ -14,7 +14,7 @@ function randomTitle() {
   providers: [NgControl],
   directives: [FORM_DIRECTIVES]
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     var fb = new FormBuilder();
 

ionic/components/searchbar/test/toolbar/index.ts

@@ -6,7 +6,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   toolbarSearch: string;
 
   constructor() {

ionic/components/show-hide-when/test/basic/index.ts

@@ -14,7 +14,7 @@ import {
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.fruitsForm = new ControlGroup({
       "appleCtrl": new Control(),

ionic/components/switch/test/basic/index.ts

@@ -14,7 +14,7 @@ import {
 @App({
   templateUrl: 'main.html'
 })
-class IonicApp {
+class E2EApp {
   constructor() {
     this.fruitsForm = new ControlGroup({
       "appleCtrl": new Control(),

ionic/components/tabs/tabs.ts

@@ -66,7 +66,7 @@ import {Icon} from '../icon/icon';
     'tabbarPlacement': 'bottom',
     'tabbarIcons': 'top',
     'tabbarStyle': 'default',
-    'preloadTabs': true
+    'preloadTabs': false
   },
   template:
     '<ion-navbar-section>' +
@@ -113,7 +113,6 @@ export class Tabs extends Ion {
   ) {
     super(elementRef, config);
     this.app = app;
-    this.preload = config.get('preloadTabs');
     this.subPages = config.get('tabSubPages');
 
     // collection of children "Tab" instances, which extends NavController
@@ -139,6 +138,8 @@ export class Tabs extends Ion {
    */
   onInit() {
     super.onInit();
+    this.preloadTabs = (this.preloadTabs !== "false" && this.preloadTabs !== false);
+
     if (this.highlight) {
       this.platform.onResize(() => {
         this.highlight.select(this.getSelected());

ionic/components/tabs/test/advanced/tabs.html

@@ -1,5 +1,5 @@
 
-<ion-tabs>
+<ion-tabs preload-tabs="true">
   <ion-tab tab-title="Recents" tab-icon="call" [root]="tab1Root"></ion-tab>
   <ion-tab tab-title="Favorites" tab-icon="star" [root]="tab2Root"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings" [root]="tab3Root"></ion-tab>

ionic/components/text-input/text-input.ts

@@ -83,11 +83,19 @@ export class TextInput {
 
     let self = this;
     self.scrollMove = (ev) => {
-      console.debug('content scrollMove');
-      self.deregListeners();
+      if (!self.app.isTransitioning()) {
+        self.deregMove();
 
-      if (self.hasFocus) {
-        //self.input.hideFocus();
+        if (self.hasFocus) {
+          self.input.hideFocus(true);
+          this.scrollView.onScrollEnd(() => {
+            self.input.hideFocus(false);
+
+            if (self.hasFocus) {
+              self.regMove();
+            }
+          });
+        }
       }
     };
   }
@@ -131,6 +139,7 @@ export class TextInput {
       ev.stopPropagation();
 
       this.setFocus();
+      this.regMove();
     }
   }
 
@@ -149,10 +158,12 @@ export class TextInput {
       let ele = this.elementRef.nativeElement;
 
       let scrollData = TextInput.getScollData(ele.offsetTop, ele.offsetHeight, scrollView.getDimensions(), this.keyboardHeight, this.platform.height());
-      if (scrollData.noScroll) {
+      if (scrollData.scrollAmount > -3 && scrollData.scrollAmount < 3) {
         // the text input is in a safe position that doesn't require
         // it to be scrolled into view, just set focus now
-        return this.setFocus();
+        this.setFocus();
+        this.regMove();
+        return;
       }
 
       // add padding to the bottom of the scroll view (if needed)
@@ -178,11 +189,13 @@ export class TextInput {
         // all good, allow clicks again
         this.app.setEnabled(true);
         this.app.setTransitioning(false);
+        this.regMove();
       });
 
     } else {
       // not inside of a scroll view, just focus it
       this.setFocus();
+      this.regMove();
     }
 
   }
@@ -224,13 +237,6 @@ export class TextInput {
     7) Input top below safe area, no room to scroll, input larger than safe area
     */
 
-    if (inputTopWithinSafeArea && inputBottomWithinSafeArea) {
-      // Input top within safe area, bottom within safe area
-      // no need to scroll to a position, it's good as-is
-      return { noScroll: true };
-    }
-
-    // looks like we'll have to do some auto-scrolling
     let scrollData = {
       scrollAmount: 0,
       scrollTo: 0,
@@ -238,6 +244,13 @@ export class TextInput {
       inputSafeY: 0
     };
 
+    if (inputTopWithinSafeArea && inputBottomWithinSafeArea) {
+      // Input top within safe area, bottom within safe area
+      // no need to scroll to a position, it's good as-is
+      return scrollData;
+    }
+
+    // looks like we'll have to do some auto-scrolling
     if (inputTopBelowSafeArea || inputBottomBelowSafeArea) {
       // Input top and bottom below safe area
       // auto scroll the input up so at least the top of it shows
@@ -245,13 +258,13 @@ export class TextInput {
       if (safeAreaHeight > inputOffsetHeight) {
         // safe area height is taller than the input height, so we
         // can bring it up the input just enough to show the input bottom
-        scrollData.scrollAmount = (safeAreaBottom - inputBottom);
+        scrollData.scrollAmount = Math.round(safeAreaBottom - inputBottom);
 
       } else {
         // safe area height is smaller than the input height, so we can
         // only scroll it up so the input top is at the top of the safe area
         // however the input bottom will be below the safe area
-        scrollData.scrollAmount = (safeAreaTop - inputTop);
+        scrollData.scrollAmount = Math.round(safeAreaTop - inputTop);
       }
 
       scrollData.inputSafeY = -(inputTop - safeAreaTop) + 4;
@@ -259,10 +272,9 @@ export class TextInput {
     } else if (inputTopAboveSafeArea) {
       // Input top above safe area
       // auto scroll the input down so at least the top of it shows
-      scrollData.scrollAmount = (safeAreaTop - inputTop);
+      scrollData.scrollAmount = Math.round(safeAreaTop - inputTop);
 
       scrollData.inputSafeY = (safeAreaTop - inputTop) + 4;
-
     }
 
     // figure out where it should scroll to for the best position to the input
@@ -287,7 +299,7 @@ export class TextInput {
     //   window.safeAreaEle = document.createElement('div');
     //   window.safeAreaEle.style.position = 'absolute';
     //   window.safeAreaEle.style.background = 'rgba(0, 128, 0, 0.7)';
-    //   window.safeAreaEle.style.padding = '10px';
+    //   window.safeAreaEle.style.padding = '2px 5px';
     //   window.safeAreaEle.style.textShadow = '1px 1px white';
     //   window.safeAreaEle.style.left = '0px';
     //   window.safeAreaEle.style.right = '0px';
@@ -316,7 +328,8 @@ export class TextInput {
   focusChange(hasFocus) {
     this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
     if (!hasFocus) {
-      this.deregListeners();
+      this.deregMove();
+      this.input.hideFocus(false);
     }
   }
 
@@ -340,17 +353,24 @@ export class TextInput {
       // ensure the body hasn't scrolled down
       document.body.scrollTop = 0;
     }
+  }
 
+  /**
+   * @private
+   */
+  regMove() {
     if (this.scrollAssist && this.scrollView) {
-      this.deregListeners();
-      this.deregScroll = this.scrollView.addScrollEventListener(this.scrollMove);
+      setTimeout(() => {
+        this.deregMove();
+        this.deregScroll = this.scrollView.addScrollEventListener(this.scrollMove);
+      }, 80);
     }
   }
 
   /**
    * @private
    */
-  deregListeners() {
+  deregMove() {
     this.deregScroll && this.deregScroll();
   }
 
@@ -365,7 +385,7 @@ export class TextInput {
    * @private
    */
   onDestroy() {
-    this.deregListeners();
+    this.deregMove();
     this.form.deregister(this);
   }
 
@@ -428,12 +448,14 @@ export class TextInputElement {
       if (shouldRelocate) {
         let clonedInputEle = focusedInputEle.cloneNode(true);
         clonedInputEle.classList.add('cloned-input');
+        clonedInputEle.classList.remove('hide-focused-input');
         clonedInputEle.setAttribute('aria-hidden', true);
         clonedInputEle.tabIndex = -1;
-        focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
 
         focusedInputEle.classList.add('hide-focused-input');
         focusedInputEle.style[dom.CSS.transform] = `translate3d(-9999px,${inputRelativeY}px,0)`;
+        focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+
         this.wrapper.setFocus();
 
       } else {
@@ -449,19 +471,27 @@ export class TextInputElement {
     }
   }
 
-  hideFocus() {
-    console.debug('hideFocus');
+  hideFocus(shouldHideFocus) {
     let focusedInputEle = this.getNativeElement();
 
-    let hiddenInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
-    if (!hiddenInputEle) {
-      hiddenInputEle = focusedInputEle.cloneNode(true);
-      hiddenInputEle.classList.add('cloned-hidden');
-      hiddenInputEle.setAttribute('aria-hidden', true);
-      hiddenInputEle.tabIndex = -1;
-      focusedInputEle.parentNode.appendChild(hiddenInputEle);
+    if (shouldHideFocus) {
+      let clonedInputEle = focusedInputEle.cloneNode(true);
+      clonedInputEle.classList.add('cloned-hidden');
+      clonedInputEle.setAttribute('aria-hidden', true);
+      clonedInputEle.tabIndex = -1;
+
+      focusedInputEle.classList.add('hide-focused-input');
+      focusedInputEle.style[dom.CSS.transform] = 'translate3d(-9999px,0,0)';
+      focusedInputEle.parentNode.insertBefore(clonedInputEle, focusedInputEle);
+
+    } else {
+      focusedInputEle.classList.remove('hide-focused-input');
+      focusedInputEle.style[dom.CSS.transform] = '';
+      let clonedInputEle = focusedInputEle.parentNode.querySelector('.cloned-hidden');
+      if (clonedInputEle) {
+        clonedInputEle.parentNode.removeChild(clonedInputEle);
+      }
     }
-    hiddenInputEle.focus();
   }
 
   get hasFocus() {

ionic/platform/registry.ts

@@ -48,7 +48,7 @@ Platform.register({
   ],
   settings: {
     hoverCSS: false,
-    keyboardHeight: 290,
+    keyboardHeight: 300,
     mode: 'md',
     scrollAssist: true,
   },
@@ -71,7 +71,7 @@ Platform.register({
   ],
   settings: {
     hoverCSS: false,
-    keyboardHeight: 290,
+    keyboardHeight: 300,
     mode: 'ios',
     scrollAssist: isIOSDevice,
     swipeBackEnabled: isIOSDevice,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-framework",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.33",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",