bug: ion-toast does not remove backdrop-no-scroll from body when dismiss

[tobiloeb]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

We are currently migrating to Ionic 8.4.1 from Ionic 7 with Angular 18.2.

Now we are facing following issue with ion-toast:
When an ion-toast will be present the css class "backdrop-no-scroll" is added to the body. And the class will be removed from body after the toast dismiss. This was the behaviour with Ionic 7 and with Ionic 8. But with Ionic 8.4.1 the class stay there and is not removed from body after the toast dismiss.

For me this seems to be a bug and I am able to reproduce this very easy. With the following code you can reproduce the issue. Just take a look at the HTML (body in iframe). After you change the ionic version to 8.4.1 in the package.json and reload the code you see the difference.

In case this is a new feature or I did something wrong, maybe someone can tell me how to remove this class on my one. :)

Expected Behavior

The "backdrop-no-scroll" css class is removed from body when toast dismiss.

Steps to Reproduce

1. Got to: https://stackblitz.com/edit/angular-ywh4p1-cszqn3rp
2. Take a look at the HTML, the class is removed from body after the toast dismiss (in the iframe)
3. Go to package.json and set ionic version to 8.4.1 - wait for loading dependencies
4. Reload the page and take a look at the body tag (in the iframe) again.

Code Reproduction URL

https://stackblitz.com/edit/angular-ywh4p1-cszqn3rp

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/tobias/.nvm/versions/node/v22.11.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 12.1.1

Capacitor:

Capacitor CLI : 5.7.0
@capacitor/android : 5.7.0
@capacitor/core : 5.7.0
@capacitor/ios : 5.7.0

Cordova:

Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : not installed globally
native-run : 2.0.1

Additional Information

No response

[tobiloeb]

I dig deeper to the overlay.ts in ionic/core and found some changes 3 month ago. This is the issue to the changes: #29773
Without this changes (Version 8.3.3) the "backdrop-no-scroll" is removed from body after the toast dismiss.
With version 8.3.3 I am facing the issue.

@thetaPC Is it possible that the changes 3 month ago in overlay.ts result in this behavior? Thanks :)

[thetaPC]

Thank you for submitting the issue!

I do see the issue in the provided StackBlitz but I couldn't replicate it through the examples provided on the Ionic docs.

I would recommend reviewing the docs. If the issue still persists after that, please provide minimal reproduction that only includes the toast component.

Thanks!

[tobiloeb]

Thanks for you fast reply! Good point, I did't think about the examples from the docs. But I can reproduce the issue with the docs example as well. I just had to click on the StackBlitz icon in the example. :)

After short debugging, I may see the root cause of this. The new changes made 3 month ago, checks that the last overlay is NOT a toast. And just in case the last overlay is NOT a toast the aria hidden attribute is set to false AND the backdrop-no-scroll is removed from body tag.
Before these changes, both is done for every overlay.

When I got it right, only the aria hidden attribute should not be set to false in case the last overlay is a toast, but the backdrop-no-scroll, should be removed anyway. Right?

[thetaPC]

@tobiloeb Please provide the playground link that showcases the issue. I'm still unable to reproduce it and that might due to us not looking at the same playground.

[tobiloeb]

Sure: https://stackblitz.com/edit/v9suj8rk (I used the link from the ionic docs for controller toast with angular)

I wrote a short unit test to reproduce the issue, its included in my PR. :)