Ionic2 - Custom directives do not work on Android


#1

I’m using the following simple directive to detect the click outside div. Here is the code:

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';
 
@Directive({
	selector: '[clickOutside]'
})
export class ClickOutsideDirective {
	constructor(private _elementRef : ElementRef) {
	}
 
	@Output()
	public clickOutside = new EventEmitter();
 
	@HostListener('document:click', ['$event.target'])
	public onClick(targetElement) {  
		if (this._elementRef) {    
			const clickedInside = this._elementRef.nativeElement.contains(targetElement);
			if (!clickedInside) {                
				this.clickOutside.emit(null);
			}
		}
	}
}

It works well on web browser and iOS, but on android, it doesn’t work when clicking on ion-input or ion-area. I also tried to install crosswalk-webview, it made the situation worse, it didn’t work wherever you clicked.