LoadingController dismiss not removing inert on Angular 19 + Ionic 8

Ionic Framework Ionic Angular
1

Hi everyone,

I’ve recently upgraded my app to Angular 19 and Ionic 8, and I’ve run into a strange issue with the LoadingController.

Whenever I present a loader, it shows up fine, but after dismissing the loader, the inert property is not being removed from my <ion-router-outlet>. Because of this, the entire app UI becomes stuck and unresponsive — even though there are no visible errors in the console.

Here’s the behavior I’m seeing:

  • Loader is presented → works fine.

  • Loader is dismissed → spinner disappears, but the router outlet remains with the inert attribute.

  • Since inert stays, clicks and navigation stop working completely.

Any one else is getting same issue ?

2

I am having the same issue but I’m using Vue. It only seems to be affecting one page in particular for some reason and all other pages on my app are not affected.

3

I think this might have been caused by fix(overlays,picker): remove invalid aria-hidden attribute by joselrio · Pull Request #30563 · ionic-team/ionic-framework · GitHub which was released in Ionic 8.7.4.

Check out this line where inert was added.

Can you downgrade to Ionic 8.7.3 and see if the issue still exists? If it works fine, I would create an Issue.

4

For what it’s worth, I just testing in our Ionic Vue app on Ionic 8.7.4 where we use a LoadingController and once it is dismissed, I can interact just fine with the screen :person_shrugging: I am seeing inert be added and removed.

You might need to provide a reproduction of the issue.

5

I can describe what my app is doing to maybe give some clue to what’s going on. I open a modal which can show an alert popup and when you select an option it shows a loading overlay while a request is made. When the request finishes, the loading overlay is dismissed and the modal is also dismissed. At this point the inert attribute remains.

I tried commenting out the loading overlay and alert popup and it seems to fix the issue. But I need the alert popup for user input, so I have a workaround where I use a timeout before closing the modal and it seems to have solved the issue. I’ve set the delay to 500ms, any less and the issue happens. My guess is that closing the modal before the alert or loading overlay finishes its closing animation causes the app to think they’re still open and not remove the inert attribute.

6

Sounds like your loading and alert components are within your modal? When a modal is dismissed, all content gets unmounted. My guess is that your loading component gets unmounted/destroyed before it’s logic finishes.

You could try using keepContentsMounted - ion-modal: Ionic Mobile App Custom Modal API Component.

Or wait for your alert and loading to finish before dismissing the modal.

7

Yes, the solution I ended up using was putting the modal.dismiss() call inside a setTimeout with a 500ms delay. I’ll definitely keep this in mind when using alerts and other overlays with modals. Thanks for the tip on keepContentsMounted :+1:

8

I was also facing this issue after upgrading to angular 20 and @ionic/angular 8.7.4.
After downgraded it back to 8.7.3, it seems to be working fine.

10

I use ionic 8.7.3 and angular 20. I have a modal I’m presenting with a controller, and within that modal, there’s another inline modal that’ll always be presented, so isOpen is always true. But after dismissing the one with the controller and also setting isOpen to false and dismissing the inline modal, there’s still the inert property.

I even added keepContentsMounted to the inline modal, but it didn’t resolve the inert issue

11

Never mind guys, it was just a missing await on the modal.dismiss()

1 Like