Ionic - Opening a modal from within a popover causes DOM to not function in iOS

Ionic Framework ionic-v3
1

Hey everyone,

I noticed a small issue with trying to open a modal from within a popover. in iOS on both my iPhone 6S Plus as well as the emulators, when I open these modals, the DOM becomes non-responsive. Text areas refuse to be clicked into, buttons won’t run functions when tapped. Buttons in the <ion-navbar> will work. Text inputs or textareas in the <ion-navbar> WON’T allow to be clicked into.

Then, of course, in <ion-content>, nothing will work, buttons, text areas, anything with a (tap) or (click). Has anyone else had this issue?

I should note that when I’m trying to open the modal from a page or other component, it doesn’t have this issue, ONLY when opened from a popover :’(

Thanks in advance!

1 Like
2

Not with ionic, but yes with Xamarin. Attaching a function to your popover onDidDismiss that presents the modal may be the approach you want.

1 Like
3

Hey thanks for the response. This is the function that I’m using. So it looks like I do have the onDidDismiss() function attached to the modal to do some stuff when it’s dismissed. Is this what you’re referring to? It’s really weird behavior :frowning:

openGenreEditor() {
    let modal = this.modalCtrl.create(GenresManager, { genres: this.genres});
    modal.onDidDismiss(data => {
      if(data && data.updateGenres) {
        this.genres = data.genres;
        if(data.genres && data.genres.length > 0) {
          this.formattedGenres = data.genres.join(', ');
        } else if(data.genres && data.genres.length === 0) {
          this.formattedGenres = '';
        } else {
          this.formattedGenres = '';
        }
      }
    });
    modal.present();
  }
4

Adding this to app.scss solved the problem in iOS. I haven’t seen any issues arise from doing this:

 .disable-scroll .ion-page {
    pointer-events: auto;
 }
1 Like
5

Glad you got things running smoothly! You can add an onDidDismiss to your popover controller too, which is what I was thinking.

Let myPopover = this.popoverController.create(GenresManager, {});
myPopover.onDidDismiss( modal.present());

i just put modal.present() there as a placeholder. Did you get things working with your original strategy of presenting the modal directly from the popover?