App not responding to clicks after dismissing loading modal


I have a rather strange issue. Unfortunately, I don’t have a simple sample to share. Will try to reproduce and get one.

Either way, it goes like this -

I have 2 pages - A & B

I can perform a certain action to go A -> B and similar another to go B -> A.
A by product of the action is a Loading Modal which is displayed as soon as the action is performed and is dismissed just before the navigation.

So, A -> B is fine but when I do B -> A, the UI doesn’t respond after A comes up.


  1. The action is a network request, so if I set Chrome to throttle its speed, everything is fine.
    Maybe dismissing the loading too fast is the problem?
  2. If I try the element selection in chrome dev tools, the complete page is selected. It doesn’t catch any of the underlying elements.
    Maybe there is a hidden div? I tried removing them (in chome dev tools) but to no avail.

The only out of the ordinary (crazy) thing in the app is that I have a custom component which handles the loading controller as a sibling to the root ion-nav. It gets its requests via ngrx to show or dismiss the loading modal.

All this information is probably not that helpful without a sample app though. Was just hoping someone came across a similar issue and fixed it.
Will try getting one if I am able to reproduce it.

I unexpectedly found the problem and the solution. Not sure if its a bug though.

So, basically, one important piece of information, that I’m not sure if it would’ve helped before, is that the action for B -> A, was from a button in the side menu.

So, on clicking this button, if things moved too fast, the ion-nav tag ended up still having .menu-content-open on which the ion-content in the page ended up getting pointer-events: none.
This was the root of the problem and if you were wondering, I did have the menuClose directive.

The only workaround I found for now was to call this.menuCtrl.close(); in the button click handler.

Hope this helps someone :wink: