Ionic-framework: ion-slides not working in modal when ion-button is present in modal

[kduvnjak]

Bug Report

Ionic version:


[x] 4.0.1

Current behavior:
On second opening of modal view with ion-slides and ion-button inside of modal template ion-slides becomes unresponsive, without ion-button everything is working correctly

Expected behavior:
ion-slides should work correctly everytime modal is opened and it should not depend on other components in templates like ion-button

Steps to reproduce:
Use ionic source code, core->src->components->modal->test->basic and add to test ion-slides, first time when modal is opened everything is ok, second time that modal is opened it is unresponsive, if you change ion-button in test with anchor tag everything is going to be ok

Related code:

Not working

 async function createModal() {
    // initialize controller
    const modalController = document.querySelector('ion-modal-controller');
    await modalController.componentOnReady();

    // create component to open
    const element = document.createElement('div');
    element.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Content of doom</h1>
        <div>Here's some more content</div>
        <ion-slides mode="md">
          <ion-slide>
            <div>1</div>
          </ion-slide>
          <ion-slide>
            <div>2</div>
          </ion-slide>
          <ion-slide>
            <div>3</div>
          </ion-slide>
        </ion-slides>
      <ion-button class="dismiss">Dismiss Modal</ion-button>
    </ion-content>
      `;

    // listen for close event
    const button = element.querySelector('ion-button');
    button.addEventListener('click', () => {
      modalController.dismiss();
    });

    // present the modal
    const modalElement = await modalController.create({
      component: element
    });
    return modalElement;
  }

Working

  async function createModal() {
    // initialize controller
    const modalController = document.querySelector('ion-modal-controller');
    await modalController.componentOnReady();

    // create component to open
    const element = document.createElement('div');
    element.innerHTML = `
      <ion-header>
        <ion-toolbar>
          <ion-title>Super Modal</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <h1>Content of doom</h1>
        <div>Here's some more content</div>
        <ion-slides mode="md">
          <ion-slide>
            <div>1</div>
          </ion-slide>
          <ion-slide>
            <div>2</div>
          </ion-slide>
          <ion-slide>
            <div>3</div>
          </ion-slide>
        </ion-slides>
      <a class="dismiss">Dismiss Modal</a>
    </ion-content>
      `;

    // listen for close event
    const button = element.querySelector('a');
    button.addEventListener('click', () => {
      modalController.dismiss();
    });

    // present the modal
    const modalElement = await modalController.create({
      component: element
    });
    return modalElement;
  }

Other information:

Ionic info:

insert the output from ionic info here

[pipoa]

same here,
showing IonSlides in a modal page result in a serious DEAD LOCK, chrome stops responding.
no matter <ion-button> or <button>, the issue persistent.
temperory solution is adding a settimeout to delay show IonSlides

<div *ngIf="showSlides" class="slides-container">
    <ion-slides>
      <ion-slide *ngFor="let photo of photos">
        <img data-src="{{photo.url}}" class="slide-image"/>
        <div class="title" *ngIf="photo.title">{{photo.title}}</div>
      </ion-slide>
    </ion-slides>
</div>

ngOnInit() {
setTimeout(() => {
this.showSlides = true;
}, 0);
}

@ionic/angular 4.0.2

[creat-or]

+1

[manuelmager]

+1

[nichovski]

+1

[msigwart]

I've got the same issue. Just on Android though, iOS is working fine.

[JMooreo]

Better solution, use Ionic lifecycle hook:

ionViewDidEnter() {
    this.showSlides = true;
}

It's more clear what the code is trying to accomplish rather than arbitrary timeouts.

[zankevich]

Better solution, use Ionic lifecycle hook:

ionViewDidEnter() {
    this.showSlides = true;
}

It's more clear what the code is trying to accomplish rather than arbitrary timeouts.

In my case that was a fix:

import { IonSlides } from '@ionic/angular';

@ViewChild(IonSlides, { static: true }) slides: IonSlides;

ngOnInit() {
  this.slides.update();
}

[EinfachHans]

Thank you @pipoa 😃!!!

[edgarMejia]

Better solution, use Ionic lifecycle hook:

ionViewDidEnter() {
    this.showSlides = true;
}

It's more clear what the code is trying to accomplish rather than arbitrary timeouts.

In my case that was a fix:

import { IonSlides } from '@ionic/angular';

@ViewChild(IonSlides, { static: true }) slides: IonSlides;

ngOnInit() {
  this.slides.update();
}

Works for me! thanks!.

[danielrf121]

Better solution, use Ionic lifecycle hook:

ionViewDidEnter() {
    this.showSlides = true;
}

It's more clear what the code is trying to accomplish rather than arbitrary timeouts.

In my case that was a fix:

import { IonSlides } from '@ionic/angular';

@ViewChild(IonSlides, { static: true }) slides: IonSlides;

ngOnInit() {
  this.slides.update();
}

Save my day :)

[foreinger]

Thank you very match!!!!)))

[yigitbacakoglu]

Better solution, use Ionic lifecycle hook:

ionViewDidEnter() {
    this.showSlides = true;
}

It's more clear what the code is trying to accomplish rather than arbitrary timeouts.

In my case that was a fix:

import { IonSlides } from '@ionic/angular';

@ViewChild(IonSlides, { static: true }) slides: IonSlides;

ngOnInit() {
  this.slides.update();
}

Save my day :)

I'm using slides in a modal view to make pictures zoomable. On a page where multiple pictures, each picture opens a modal with ion slides in it. Slides work well with first open, but after the first open on the same page, slides were let me swipe into empty - out of the screen with no content.

Your fix worked.
Thanks

[liamdebeasi]

Hi everyone,

Is this still an issue with the latest version of Ionic Framework? If so, can you please provide a repo with the code required to reproduce the issue?

Thanks!

[raymondboswel]

@liamdebeasi We encountered this today in a project using @ionic/angular: 5.0.4. The workaround worked, but I had to change @ViewChild('comp', { static: true }) to @ViewChild('comp', { static: false }). Unfortunately I can't share the code :/

[quangtam]

Hi,
This is work for me:

import {ViewChild, AfterViewChecked} from '@angular/core';
import {IonSlides} from '@ionic/angular';
...........................................
export class ModalPage implements OnInit, AfterViewChecked {

  @ViewChild(IonSlides, { static: false }) slides: IonSlides;
............................
 ngAfterViewChecked(): void {
    this.slides.update(); // This will update slide after view checked
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. 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!