nativescript-ripple blocks listview itemTap event

[samuelagm]

I noticed that adding a ripple layout to a listview itemTemplate blocks the listview's itemTap event from firing. This is an example below: ` ```

` ``` the menuTap event handler is never called, unless the ripple layout is removed. tns version 2.1.1 ```

[bradmartin]

Haven't had time to dig into this, could you try removing the <StackLayout> inside the <ListView.itemTemplate> and let me know what happpens.

[michelebombardi]

This happen to me too with version 2.3.0 and angular 2 nativescript project.

[bradmartin]

I've still had no time to try this out personally. Sorry everyone. If it's still an issue let me know, I'm not sure of any quick fixes. Also @samuelagm in the code you have, you should be able to remove the stack-layout inside the item template. The RippleLayout extends ContentView so that should work without the parent StackLayout around the RippleLayout.

[radhajain]

This is still an issue - any chance of a follow up?

[bradmartin]

No progress from me on this @radhajain :( no time to look into it. Although, I'm happy to hear reasoning for wanting to use this plugin's layout? Is it mainly for iOS or lower Android APIs (pre-lollipop)? I really didn't intend for this plugin to get used much so never anticipated having to work on it to improve anything 😄

[LeoDupont]

Hi, I also have this issue in a NativeScript-Angular project, with Ripple being either the root or a child of the list items template:

As the root:

<RadListView [items]="items" (itemTap)="itemTap($event)">
    <ListViewLinearLayout tkListViewLayout scrollDirection="vertical" itemInsertAnimation="Default">

        <ng-template tkListItemTemplate let-item="item">
            <Ripple rippleColor="#ddd">
                <label text="Label"></label>
            </Ripple>
        </ng-template>

    </ListViewLinearLayout>
</RadListView>

And even as a child:

<RadListView [items]="items" (itemTap)="itemTap($event)">
    <ListViewLinearLayout tkListViewLayout scrollDirection="vertical" itemInsertAnimation="Default">

        <ng-template tkListItemTemplate let-item="item">
            <GridLayout>
                <Ripple rippleColor="#ddd">
                    <label text="Label"></label>
                </Ripple>
            </GridLayout>
        </ng-template>

    </ListViewLinearLayout>
</RadListView>

Note that the ripple effect works fine and that if I remove the Ripple tag, the itemTap event is correctly fired.

Is there any news about this issue? Please also consider the fact that other RadListView features are blocked because of this: item selections and swipe actions...

For reference: https://github.com/telerik/nativescript-ui-feedback/issues/332#issuecomment-427432666

[sanghyun5958]

it works for me

<Ripple rippleColor="#a0a0a0" *ngFor="let child of rubrique.children" (tap)="onElementTap($event, child)">