diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts index d44ed86af66..4ea16861019 100644 --- 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 index 8c9d91d3c21..204e2c9547d 100644 --- 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 index 94b9d8e4544..61009130a1d 100644 --- 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;