Loader dismiss call will turn swipper to current page

Issue

Im having a swiper and loader. Scenario its very easy . Whenever some calculations are performed its initialized the loader and after we get the sucess result turn off the loader and swip to second slide.

 <swiper-container #slides [allowTouchMove]="false" pagination="false">
    <swiper-slide
      >Slide 1

      <ion-button (click)="changeSlide()" mode="md">Change slide 1</ion-button>
    </swiper-slide>
    <swiper-slide
      >Slide 2
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 2</ion-button
      ></swiper-slide
    >
    <swiper-slide
      >Slide 3
      <ion-button (click)="changeSlide()" mode="md"
        >Change slide 3</ion-button
      ></swiper-slide
    >
  </swiper-container>

Whenever dismised the loader the swipper is just swipping to the next page and coming back again.

 async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Loading...',
    });
    return await loading.present();
  }

  public async changeSlide(): Promise<void> {
   this.presentLoadingOverlay()
      .then((data: any) => {
        data.present();
         this.slideNext(),
          setTimeout(() => {
            data.dismiss();
          }, 3000);

        data.onDidDismiss().then(() => {
          console.log('Loading dismissed! after 3 Seconds');
        });
      })

}

Even putting this.slideNext(), after the timeout will not change nothing. The dismis call will turn back to the current page

Solution

This is solved here: https://github.com/ionic-team/ionic-framework/issues/28058

The problem here is when ion-loading is dismissed, focus is returned to the element that presented it. In this case, the ion-button in slide 0 gets focused. Swiper has logic in https://github.com/nolimits4web/swiper/blob/1cc359e45d637c209ce97ebffb917ae8587fdcf2/src/modules/a11y/a11y.mjs#L220 to show to the slide when an element inside of it is focused. Since the button in slide 0 is being focused, this effectively cancels out or undoes your manual slideNext call.

Both of these behaviors are intentional accessibility features. According to https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/, dialogs should return focus to the element that invoked the dialog.

You can avoid this collision by moving the ion-button that presents the loading outside of the swiper container.

Answered By - Stefani Toto