Nativescript: @HostListener with touch event in directive is preventing the tap event in component (Only in iOS)

[umeshrs]

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>

[NickIliev]

This issue was moved to NativeScript/nativescript-angular#866

[farfromrefug]

@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:
https://github.com/chrfalch/NControl/issues/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]

@farfromrefug it seems that the issue is related when trying to use both touch and tap on Button (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)

<Label text="Touch Me" (touch)="onTouch($event)" (tap)="onTap($event)" class="btn btn-primary btn-active">
</Label>

Steps to reproduce the issue:

• Use the Playground created by @farfromrefug (the above comment)

[farfromrefug]

@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[bot]]

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.