CODEWITHSUNDEEP
ionic-frameworkionic2
Stevie Star
Stevie Star

Reputation: 2371

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

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 work.

Then, of course, in my <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. Is this a bug within Ionic or could I be doing something wrong? No error shows up in my console for any of this. I could post some of my code, but the code is pretty much identical between opening the modal from the popover vs opening the modal from a regular page or component.

Thanks in advance, this is really weird :D

Upvotes: 1

Views: 1614

Answers (2)

rolinger
rolinger

Reputation: 3060

My quick fix for this issue is similar to @StevieStar solution, but I applied it to the opener classes for both Popovers and modals as it can happen with either kind of window because they are all kept in the same modalStack

In your custom css file

.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }

This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.

Upvotes: 0

Stevie Star
Stevie Star

Reputation: 2371

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;
}

Upvotes: 4

Related Questions