fix(keyboard): remove content padding after input blur

Closes #5800
ionic-team · Apr 12, 2016 · e21c4d5 · e21c4d5
1 parent 3cf4e52
commit e21c4d5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
@@ -3,6 +3,7 @@ import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEn
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {Config} from '../../config/config';
+import {Keyboard} from '../../util/keyboard';
 import {raf, transitionEnd, pointerCoord}  from '../../util/dom';
 import {ViewController} from '../nav/view-controller';
 import {Animation} from '../../animations/animation';
@@ -38,6 +39,7 @@ import {ScrollView} from '../../util/scroll-view';
 })
 export class Content extends Ion {
   private _padding: number = 0;
+  private _inputPolling: boolean = false;
   private _scroll: ScrollView;
   private _scLsn: Function;
   private _scrollEle: HTMLElement;
@@ -46,6 +48,7 @@ export class Content extends Ion {
     private _elementRef: ElementRef,
     private _config: Config,
     private _app: IonicApp,
+    private _keyboard: Keyboard,
     private _zone: NgZone,
     @Optional() viewCtrl: ViewController
   ) {
@@ -356,7 +359,7 @@ export class Content extends Ion {
    * Adds padding to the bottom of the scroll element when the keyboard is open
    * so content below the keyboard can be scrolled into view.
    */
-  addScrollPadding(newPadding) {
+  addScrollPadding(newPadding: number) {
     if (newPadding > this._padding) {
       console.debug('content addScrollPadding', newPadding);
 
@@ -365,4 +368,17 @@ export class Content extends Ion {
     }
   }
 
+  clearScrollPaddingFocusOut() {
+    if (!this._inputPolling) {
+      this._inputPolling = true;
+
+      this._keyboard.onClose(() => {
+        this._padding = 0;
+        this._scrollEle.style.paddingBottom = '';
+        this._inputPolling = false;
+        this.addScrollPadding(0);
+      }, 200, Infinity);
+    }
+  }
+
 }
diff --git a/ionic/components/input/input-base.ts b/ionic/components/input/input-base.ts
@@ -21,7 +21,8 @@ export class InputBase {
   protected _keyboardHeight;
   protected _scrollMove: EventListener;
   protected _type: string = 'text';
-  protected _useAssist: boolean = true;
+  protected _useAssist: boolean;
+  protected _usePadding: boolean;
   protected _value = '';
   protected _isTouch: boolean;
   protected _autoFocusAssist: string;
@@ -47,8 +48,9 @@ export class InputBase {
     protected _nav: NavController,
     ngControl: NgControl
   ) {
-    this._useAssist = config.get('scrollAssist');
-    this._keyboardHeight = config.get('keyboardHeight');
+    this._useAssist = config.getBoolean('scrollAssist', false);
+    this._usePadding = config.getBoolean('scrollPadding', this._useAssist);
+    this._keyboardHeight = config.getNumber('keyboardHeight');
 
     this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
     this._autoComplete = config.get('autocomplete', 'off');
@@ -359,8 +361,10 @@ export class InputBase {
         return;
       }
 
-      // add padding to the bottom of the scroll view (if needed)
-      scrollView.addScrollPadding(scrollData.scrollPadding);
+      if (this._usePadding) {
+        // add padding to the bottom of the scroll view (if needed)
+        scrollView.addScrollPadding(scrollData.scrollPadding);
+      }
 
       // manually scroll the text input to the top
       // do not allow any clicks while it's scrolling
@@ -385,6 +389,10 @@ export class InputBase {
         this._app.setEnabled(true);
         this._nav && this._nav.setTransitioning(false);
         this.regScrollMove();
+
+        if (this._usePadding) {
+          this._scrollView.clearScrollPaddingFocusOut();
+        }
       });
 
     } else {

diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts
@@ -70,7 +70,7 @@ export class Keyboard {
  * @param {function} callback method you want to call when the keyboard has been closed
  * @return {function} returns a callback that gets fired when the keyboard is closed
  */
-  onClose(callback, pollingInternval = KEYBOARD_CLOSE_POLLING) {
+  onClose(callback, pollingInternval = KEYBOARD_CLOSE_POLLING, pollingChecksMax = KEYBOARD_POLLING_CHECKS_MAX) {
     console.debug('keyboard onClose');
     const self = this;
     let checks = 0;
@@ -84,7 +84,7 @@ export class Keyboard {
 
     function checkKeyboard() {
       console.debug('keyboard isOpen', self.isOpen(), checks);
-      if (!self.isOpen() || checks > 100) {
+      if (!self.isOpen() || checks > pollingChecksMax) {
         rafFrames(30, () => {
           self._zone.run(() => {
             console.debug('keyboard closed');
@@ -183,3 +183,4 @@ export class Keyboard {
 }
 
 const KEYBOARD_CLOSE_POLLING = 150;
+const KEYBOARD_POLLING_CHECKS_MAX = 100;