NativeScript: ListView itemTap does not fire when there is a button in the ListView.item template

When a ListView.itemTemplate contains a button element, the itemTap event does not trigger anymore.

test.xml

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <ListView items="{{ items }}" itemTap="onTap">
      <ListView.itemTemplate>
        <StackLayout>
          <Label text="{{ $value }}" />
          <Button text="Button" />
        </StackLayout>
      </ListView.itemTemplate>
    </ListView>
</Page>

test.js

var observable = require("data/observable");
var observableArray = require("data/observable-array");

var items = ['one', 'two', 'three', 'four'];
var viewModel = {
    items: items
};

exports.pageLoaded = function (args) {
    var page = args.object;
    page.bindingContext = viewModel;
};

exports.onTap = function (args) {
    var index = args.index;
    console.log('Clicked item with index ' + index);
};

I’m not sure if this is made on purpose, but for me it was very hard to figure out why the itemTap event doesn’t fire.

If this behaviour is intended, it should be mentioned in the ListView documentation.

list-view-with-buttons

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 3
Comments: 21 (3 by maintainers)

Most upvoted comments

Looks like this is known issue with buttons inside ListView in Android

Here is an example how to do this in {N}:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
  <ListView items="{{ items }}" itemTap="onTap">
    <ListView.itemTemplate>
      <StackLayout>
        <Label text="{{ $value }}" />
        <Button text="Button" loaded="btnLoaded" />
      </StackLayout>
    </ListView.itemTemplate>
  </ListView>
</Page>

var observable = require("data/observable");
var observableArray = require("data/observable-array");

var items = ['one', 'two', 'three', 'four'];
var viewModel = {
    items: items
};

exports.pageLoaded = function (args) {
    var page = args.object;
    page.bindingContext = viewModel;
};

exports.btnLoaded = function (args) {
    var btn = args.object;
    btn.android.setFocusable(false);
};

exports.onTap = function (args) {
    var index = args.index;
    console.log('Clicked item with index ' + index);
};

enchev on Aug 27, 2015

Ah, gotcha. Thanks for the enlightenment 😄

roblav96 on Sep 9, 2016

@Jayuda, as far as I remember I haven’t tried @enchev’s workaround, because in the end I just used a label with on-tap event instead of a button.

tsvetan-ganev on Apr 4, 2016