Repository navigation
@HostListener with touch event in directive is preventing the tap event in component (Only in iOS) #4449
Description
Hi,
I am trying to write a directive to change colour of a button on "Touchup" and "TouchDown". But when I attach this directive the (tap) event in the component is not getting called. This happens only in iOS. Is there any workarounds for this. Below is my directive and component.
import { Directive, HostBinding, HostListener, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[btnTch]'
})
export class btnTchDirective {
constructor(private el: ElementRef, private renderer: Renderer2) { }
@HostListener('touch', ['$event'])
toggleColor(event){
if(event.action == "down"){
this.renderer.addClass(this.el.nativeElement, 'pressed');
// this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', "blue");
}else{
this.renderer.removeClass(this.el.nativeElement, 'pressed');
}
}
}
<ActionBar title="Login" actionBarHidden="false"></ActionBar>
<GridLayout columns="*" rows="auto, *, 130" width="100%" height="100%" class="login_bg">
<GridLayout columns="*" rows="*" verticalAlignment="center" horizontalAlignment="center">
<Label text="" style="border-radius:62; width:125; height:125; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
<Label text="" style="border-radius:50; width:100; height:100; padding:0;margin-top:100; margin-bottom:10; background-color:white;opacity:0.1"></Label>
</GridLayout>
<StackLayout col="0" row="1" verticalAlignment="center" style="width:80%">
<Label text="Enter Mobile Number"></Label>
<TextField hint="Enter Mobile Number" [(ngModel)]="userNum" style="border-bottom-width:1; border-style:solid; border-color: red; padding:5 0"></TextField>
<Label *ngIf="!genErrs == '' || null || undefined" text="{{genErrs}}"></Label>
</StackLayout>
<StackLayout col="0" row="2">
<Button text="SIGN IN" btnTch (tap)="Auth_for_OTP()"></Button>
<Label marginTop="15" horizontalAlignment="center" text="REQUEST FOR ACCESS" [nsRouterLink]="['/signup']" ></Label>
</StackLayout>
</GridLayout>
Activity
NickIliev commentedon Jun 27, 2017
This issue was moved to NativeScript/nativescript-angular#866
farfromrefug commentedon Jul 25, 2018
@NickIliev This is not an angular issue and I am facing it right now! This is actually a big issue on iOS!!!
When using TouchGestureRecognizer you don't call the super methods...
This will prevent all other gestures but also buttons state change and even more. All touches will be unhandled on the native side.
Here is a good implementation example:
chrfalch/NControl#17
This issue should be reopened because for now it is impossible to use touch and tap events simultaneously on IOS which is a show blocker for me
Example: https://play.nativescript.org/?template=play-ng&id=46hl3N&v=2
NickIliev commentedon Jul 25, 2018
@farfromrefug it seems that the issue is related when trying to use both
touchandtaponButton(iOS only). Reopening this one for further investigation.Meanwhile, you could use any other layout to implement both gestures
For example a label (this would remove the native feel and look so you would ahve to create your own ripple-like effects)
Steps to reproduce the issue:
farfromrefug commentedon Jul 25, 2018
@NickIliev I already fixed it. It s not related to tap and touch. Just tap and touch is an example of it.
Even without tap you will see that the button "state" does not work anymore. You won't see the button text animations.
I already fixed it. Creating a PR right now.
lock commentedon Aug 26, 2019
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.