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 {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);
}
}
}

View File

@@ -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 {