fix(keyboard): remove content padding after input blur

Closes #5800
This commit is contained in:
Adam Bradley
2016-04-11 22:57:26 -05:00
parent 3cf4e522c9
commit e21c4d5927
3 changed files with 33 additions and 8 deletions

View File

@ -3,6 +3,7 @@ import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEn
import {Ion} from '../ion'; import {Ion} from '../ion';
import {IonicApp} from '../app/app'; import {IonicApp} from '../app/app';
import {Config} from '../../config/config'; import {Config} from '../../config/config';
import {Keyboard} from '../../util/keyboard';
import {raf, transitionEnd, pointerCoord} from '../../util/dom'; import {raf, transitionEnd, pointerCoord} from '../../util/dom';
import {ViewController} from '../nav/view-controller'; import {ViewController} from '../nav/view-controller';
import {Animation} from '../../animations/animation'; import {Animation} from '../../animations/animation';
@ -38,6 +39,7 @@ import {ScrollView} from '../../util/scroll-view';
}) })
export class Content extends Ion { export class Content extends Ion {
private _padding: number = 0; private _padding: number = 0;
private _inputPolling: boolean = false;
private _scroll: ScrollView; private _scroll: ScrollView;
private _scLsn: Function; private _scLsn: Function;
private _scrollEle: HTMLElement; private _scrollEle: HTMLElement;
@ -46,6 +48,7 @@ export class Content extends Ion {
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _config: Config, private _config: Config,
private _app: IonicApp, private _app: IonicApp,
private _keyboard: Keyboard,
private _zone: NgZone, private _zone: NgZone,
@Optional() viewCtrl: ViewController @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 * Adds padding to the bottom of the scroll element when the keyboard is open
* so content below the keyboard can be scrolled into view. * so content below the keyboard can be scrolled into view.
*/ */
addScrollPadding(newPadding) { addScrollPadding(newPadding: number) {
if (newPadding > this._padding) { if (newPadding > this._padding) {
console.debug('content addScrollPadding', newPadding); 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);
}
}
} }

View File

@ -21,7 +21,8 @@ export class InputBase {
protected _keyboardHeight; protected _keyboardHeight;
protected _scrollMove: EventListener; protected _scrollMove: EventListener;
protected _type: string = 'text'; protected _type: string = 'text';
protected _useAssist: boolean = true; protected _useAssist: boolean;
protected _usePadding: boolean;
protected _value = ''; protected _value = '';
protected _isTouch: boolean; protected _isTouch: boolean;
protected _autoFocusAssist: string; protected _autoFocusAssist: string;
@ -47,8 +48,9 @@ export class InputBase {
protected _nav: NavController, protected _nav: NavController,
ngControl: NgControl ngControl: NgControl
) { ) {
this._useAssist = config.get('scrollAssist'); this._useAssist = config.getBoolean('scrollAssist', false);
this._keyboardHeight = config.get('keyboardHeight'); this._usePadding = config.getBoolean('scrollPadding', this._useAssist);
this._keyboardHeight = config.getNumber('keyboardHeight');
this._autoFocusAssist = config.get('autoFocusAssist', 'delay'); this._autoFocusAssist = config.get('autoFocusAssist', 'delay');
this._autoComplete = config.get('autocomplete', 'off'); this._autoComplete = config.get('autocomplete', 'off');
@ -359,8 +361,10 @@ export class InputBase {
return; return;
} }
// add padding to the bottom of the scroll view (if needed) if (this._usePadding) {
scrollView.addScrollPadding(scrollData.scrollPadding); // add padding to the bottom of the scroll view (if needed)
scrollView.addScrollPadding(scrollData.scrollPadding);
}
// manually scroll the text input to the top // manually scroll the text input to the top
// do not allow any clicks while it's scrolling // do not allow any clicks while it's scrolling
@ -385,6 +389,10 @@ export class InputBase {
this._app.setEnabled(true); this._app.setEnabled(true);
this._nav && this._nav.setTransitioning(false); this._nav && this._nav.setTransitioning(false);
this.regScrollMove(); this.regScrollMove();
if (this._usePadding) {
this._scrollView.clearScrollPaddingFocusOut();
}
}); });
} else { } else {

View File

@ -70,7 +70,7 @@ export class Keyboard {
* @param {function} callback method you want to call when the keyboard has been closed * @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 * @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'); console.debug('keyboard onClose');
const self = this; const self = this;
let checks = 0; let checks = 0;
@ -84,7 +84,7 @@ export class Keyboard {
function checkKeyboard() { function checkKeyboard() {
console.debug('keyboard isOpen', self.isOpen(), checks); console.debug('keyboard isOpen', self.isOpen(), checks);
if (!self.isOpen() || checks > 100) { if (!self.isOpen() || checks > pollingChecksMax) {
rafFrames(30, () => { rafFrames(30, () => {
self._zone.run(() => { self._zone.run(() => {
console.debug('keyboard closed'); console.debug('keyboard closed');
@ -183,3 +183,4 @@ export class Keyboard {
} }
const KEYBOARD_CLOSE_POLLING = 150; const KEYBOARD_CLOSE_POLLING = 150;
const KEYBOARD_POLLING_CHECKS_MAX = 100;