ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

bug: LoadingController removes added css style classes from body #27234

Closed Midi86 closed 1 year ago

Midi86 commented 1 year ago

Prerequisites

Ionic Framework Version

v6.x

Current Behavior

I start by adding a custom style to the html body:

this.getDocument().body.classList.add(clazz)

I am using a LoadingController to show a spinner when uploading a picture.

When a LoadingController is presented, it will create a new element on top of the existing content, which will be used to display the spinner. This element will have a class of ion-loading-shown added to it, which can be used to apply custom styles to the spinner.

When the LoadingController is dismissed (i.e., the spinner is no longer being displayed), the ion-loading-shown class is removed from the spinner element. Additionally, the LoadingController will also add a hidden attribute to the body element, which is used to hide the spinner element from screen readers.

The custom CSS class i am applying to the body element is being removed by the LoadingController as part of this process.

Expected Behavior

When the LoadingController is dismissed, it should not remove any other style classes that are pragmatically added to the body.

Steps to Reproduce

  1. I start by adding a custom style to the html body: for examle by: window.document.body.classList.add('backdrop-no-scroll');
  2. Use the LoadingController to show a spinner and wait for it to be dismissed
  3. Observe: The custom style is removed from the body

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 5.4.16 Ionic Framework : @ionic/angular 6.3.6 @angular-devkit/build-angular : 14.2.9 @angular-devkit/schematics : 14.2.9 @angular/cli : 14.2.9 @ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.6.2 @capacitor/core : 4.6.2

Cordova:

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

Utility:

cordova-res : 0.15.4 native-run : 1.7.1

System:

Android SDK Tools : 26.1.1 (C:\Users\Emil\AppData\Local\Android\Sdk) NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe) npm : 6.14.13 OS : Windows 10

Additional Information

No response

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

averyjohnston commented 1 year ago

This issue is being closed due to lack of a reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!