bug(slides): ion-button not working after page scrolled

Bug Report

Ionic version:

[x] 4.x

I’m submitting a …

[x] bug report [ ] feature request

Current behavior: If you have a button inside ion-slides and press it, all is working. But if you scroll on the page and then go to the button again and press it, it’s not working anymore. See the following gif: Press button working, now I scroll go back and click again - not working.

We have to find out if this is an issue of swiper.js or ion-slides / ion-button. If I lock the swipes ( this.slides.lockSwipes(true)) the button is working. Maybe it’s the scrolling of ion-slides, that is blocking the clicking?

Expected behavior: Button should be tappable after scrolling in ion-slides

Steps to reproduce: @persn ( #15301 ) created an repository for that which is a good example -> https://github.com/persn/ionic-slides-scroll-bug

If you tap the button, sometimes it works, but after scrolling, it will not.

[CFT-Chris]

I have a PR coming soon, but depends on a PR in @types/swiper first.

We can set the touchStartPreventDefault Swiper API param to false by default in slides.tsx to effectively do what my suggested fix wants to do without any drastic changes to swiper code.

Workaround: In the meantime, you can explicitly add the following param to your ion-slides options property:

your.page.html

<ion-slides [options]="swiperParams">
  ...
</ion-slides>

your.page.ts

@Component({
  templateUrl: './your.page.html'
  ...
})
export class YourPage {
  swiperParams = {
    touchStartPreventDefault: false
  }
}

[CFT-Chris]

Hi @liamdebeasi,

I ran the test I made in the PR without the touchStartPreventDefault set to false by default, and it passes the test. So it technically doesn’t repro anymore, and it appears to be fixed by #17170.

However, I can confirm that there is still some, albeit minor, undesirable behavior without the changes in my PR: the button effect doesn’t show after scrolling the ion-content and then clicking the ion-button. The (click) action though does execute, changing the background to blue in the test. If touchStartPreventDefault = false, the ion-button will correctly show the swoop animation effect on click.

Not sure if that’s worth checking in the fix, but if not, perhaps just integrating the test to catch future bugs might be helpful.

Also it might also be helpful to merge the change in the PR’s package.json. It updates the required dev dependency swiper/types since slides.tsx was failing to build for me with a typescript error. This was happening without my touchStartPreventDefault change (updateAutoHeight added by #17208 caused my build to break without latest swiper/types).