Nativescript: Android, Angular: longPress on button fires tap event right after

Created on 29 Sep 2016 · 3Comments · Source: NativeScript/NativeScript

Did you verify this is a real problem

yes

Tell us about the problem

If both longPress and tap event are bound to a button, after the button is long pressed, the tap event is fired as well

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

CLI: 2.3.0
Cross-platform modules: 2.3.0
Runtime(s): 2.3.0
packages: "@angular/*": "2.0.1",
"@angular/router": "3.0.1",
"nativescript-angular": "1.0.1",
"rxjs": "5.0.0-beta.12",

Please tell us how to recreate the issue in as much detail as possible.

Add this button:

<Button [text]="'LOG IN'"
                    (tap)="login()" (longPress)="long()"></Button>

Then long-press it.
the long() callback will be called, and then the login() callback as well.
If you release your long-pressing-finger outside the button, the login() callback won't be called.

android question

Source

nirsalon

Most helpful comment

Hi @nirsalon,

I reviewed this issue and found that this is something related with the platform. However if you want to trigger single event for the Button you could attached several gestures on Button loaded event. In this case only one the events will be fired . You could review the below-given example, where has been shown how to do that.
app.component.html

<StackLayout>
    <Label text="Tap the button" class="title"></Label>

    <Button (loaded)="buttonloaded($event)" text="TAP"></Button>

    <Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public buttonloaded(args){
        var button = args.object;
        button.on("loaded, tap, doubleTap, longPress", function (args) {
            console.log("Event: " + args.eventName + ", sender: " + args.object);
        });
    }
}

Let me know whether this helps or if I could help you further.

tsonevn on 30 Sep 2016

👍4

All 3 comments

Hi @nirsalon,

<StackLayout>
    <Label text="Tap the button" class="title"></Label>

    <Button (loaded)="buttonloaded($event)" text="TAP"></Button>

    <Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>

app.component.ts

import {Component} from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public buttonloaded(args){
        var button = args.object;
        button.on("loaded, tap, doubleTap, longPress", function (args) {
            console.log("Event: " + args.eventName + ", sender: " + args.object);
        });
    }
}

Let me know whether this helps or if I could help you further.

tsonevn on 30 Sep 2016

👍4

Thank you, @tsonevn. This also works on ns vue.