javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): blur when tapping outside input on iOS

Browse Source 
Closes #5020
This commit is contained in:
Adam Bradley
2016-04-14 13:43:56 -05:00
parent 7fe3f80277
commit f9b46c26cc
2 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ionic/components/input/native-input.ts
View File

@ -14,6 +14,8 @@ import {CSS, hasFocus, raf} from '../../util/dom';
export class NativeInput {
private _relocated: boolean;
private _clone: boolean;
private _blurring: boolean;
private _unrefBlur: Function;
@Output() focusChange: EventEmitter<boolean> = new EventEmitter();
@Output() valueChange: EventEmitter<string> = new EventEmitter();
@ -25,6 +27,7 @@ export class NativeInput {
public ngControl: NgControl
) {
this._clone = config.getBoolean('inputCloning', false);
this._blurring = config.getBoolean('inputBlurring', false);
}
@HostListener('input', ['$event'])
@ -34,13 +37,38 @@ export class NativeInput {
@HostListener('focus')
private _focus() {
this.focusChange.emit(true);
var self = this;
self.focusChange.emit(true);
if (self._blurring) {
// automatically blur input if:
// 1) this input has focus
// 2) the newly tapped document element is not an input
console.debug('input blurring enabled');
function docTouchEnd(ev) {
var tappedElement: any = ev.target;
if (tappedElement && self.element()) {
if (tappedElement.tagName !== 'INPUT' && tappedElement.tagName !== 'TEXTAREA') {
self.element().blur();
}
}
}
document.addEventListener('touchend', docTouchEnd, true);
self._unrefBlur = function() {
console.debug('input blurring disabled');
document.removeEventListener('touchend', docTouchEnd, true);
};
}
}
@HostListener('blur')
private _blur() {
this.focusChange.emit(false);
this.hideFocus(false);
this._unrefBlur && this._unrefBlur();
this._unrefBlur = null;
}
labelledBy(val: string) {
@ -138,6 +166,10 @@ export class NativeInput {
return this._elementRef.nativeElement;
}
ngOnDestroy() {
this._unrefBlur && this._unrefBlur();
}
}
function cloneInput(focusedInputEle, addCssClass) {