Ionic-framework: Wrapped ion-slide doesn't respond to click/tap in a looped ion-slides

[djasil]

Ionic version: (check one with "x")
[] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Swipe the slides right-to-left until the first slide wraps around from the right side. It won't respond to clicks/taps. The issue also occurs swiping the other way, and sometimes with the slides in between.

Expected behavior:
ion-slide elements in a looped ion-slides should always respond to click/tap events, no matter its position or how many swipes performed.

Steps to reproduce:
http://plnkr.co/edit/yicpeXF6vvG8MO1r3tgq?p=preview

Related code:

<ion-slides loop slidesPerView="3" spaceBetween="4">
  <ion-slide><div (tap)="doSomething(1)"><img src="http://esocialmarketing.info/wp-content/uploads/2015/02/web-1.gif"/></div></ion-slide>
  <ion-slide><div (tap)="doSomething(2)"><img src="http://esocialmarketing.info/wp-content/uploads/2015/02/web-2.gif"/></div></ion-slide>
  <ion-slide><div (tap)="doSomething(3)"><img src="http://esocialmarketing.info/wp-content/uploads/2015/02/web-2.gif"/></div></ion-slide>
  <ion-slide><div (tap)="doSomething(4)"><img src="http://esocialmarketing.info/wp-content/uploads/2015/02/web-2.gif"/></div></ion-slide>
  <ion-slide><div (tap)="doSomething(5)"><img src="http://esocialmarketing.info/wp-content/uploads/2015/02/web-2.gif"/></div></ion-slide>
</ion-slides>

Other information:
It might be related to this other issue: https://github.com/driftyco/ionic/issues/10330

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.10.0
Xcode version: Not installed

[jgw96]

Hello, thanks for opening an issue with us, we will look into this.

[mebibou]

This also occurs when using (click) and not just (tap). It also only happens when using slidesPerView with more than 1. When inspecting the faulted slide they have the swiper-slide-duplicate class

[levipadre]

Is there a temporary/permanent solution for this? I have the same problem and I can't use loop because of it.

[djasil]

It also only happens when using slidesPerView with more than 1

Here it happens even with slidesPerView=1.

Is there a temporary solution for this? I have the same problem and I can't use loop because of it.

Ionic simulates the loop by inserting cloned elements on both ends of the array. The bug occurs when you click on a clone, because (I assume) the click events are NOT cloned from the originals for some reason (I think Ionic handles clicks differently, so a regular deep clone they're using right now isn't working).

You can still guess the element index based on the getActiveIndex() by getting clicks on the ion-slides itself, but it requires some math with the click position and the slidesPerView you're using. In my case the slidesPerView was 1, so I only had to recalculate the indexes by ignoring the clones inserted on each end.

[AlanRezende]

Is there a temporary/permanent solution for this?

[markterrill]

Hi, also experienced this issue. Had implemented workarounds on the weird index = 1 when using loop so data would work even if the active index returned more than the array of data objects (or -1 if going backwards). However the fact that after doing a loop the first slide will completely freeze and is unresponsive to touch and or 'scope' updates, thats a showstopper.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!