bug: Opening card modal sets wrong color on statusbar if swipeToClose is set to true

[torgnywalin]

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

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Opening a card modal with swipeToClose: true will change StatusBar style to the style of the device.

Expected Behavior

I would expect that the behavior is the same regardless of what swipeToClose is set to.
And that if the modal is to change the statusbar it should be able to set it back to what is was set to before.

If keeping track is not possible I think there should be options for:

• If the modal should be able to change the statusbar style at all (default to true for backward compability)
• What style to return to (default to default)

Steps to Reproduce

To reproduce:

• Open app on ios (ionic cap run ios)
• The statusbar style is dark as set in App.vue (Statusbar is white on white)
• Click the "Open card modal (with swipeToClose: false)" button
• The statusbar is visible when modal is visible (No changes to statusbar style)
• Click the "Open card modal (with swipeToClose: true)" button
• The statusbar is visible when modal is visible (Now the statusbar style is changed to light)
• Click the "Open card modal (with swipeToClose: false)" button
• The statusbar is not visible when modal is visible (No changes to statusbar style)

Code Reproduction URL

https://github.com/torgnywalin/issueModalStatusBar

Ionic Info

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

       Require stack:
       - /Users/torgnywalin/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/project/index.js
       - /Users/torgnywalin/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/lib/index.js
       - /Users/torgnywalin/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/index.js
       - /Users/torgnywalin/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

   Ionic CLI       : 6.20.3 (/Users/torgnywalin/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.3.3

Capacitor:

   Capacitor CLI      : 4.4.0
   @capacitor/android : not installed
   @capacitor/core    : 4.4.0
   @capacitor/ios     : 4.4.0

Utility:

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

System:

   NodeJS : v16.13.1 (/Users/torgnywalin/.nvm/versions/node/v16.13.1/bin/node)
   npm    : 8.1.2
   OS     : macOS

Additional Information

No response

[liamdebeasi]

Thanks for the report. Does this issue happen with canDismiss? The swipeToClose property is deprecated and should not be used.

[torgnywalin]

I see the same behavior if i set canDismiss to true.
The StatusBar changes color when card modal is displayed, and never reverts to previous state. (reverts to default for device)

I have made a new commit to reproduction repo with canDismiss instead of swipeToClose.

Step 1: App is started with StatusBar style set to DARK (Status bar is white on white)

Step 2: Opens modal - StatusBar is white on black

Step 3: Closes modal - Status bar is set to device style, not previous state

Documentation
I also think that the documentation needs to be updated to reflect that the swipeToClose property is deprecated.
It's mentioned somewhere on the top, but not at the properties level. I think most people would use this for reference, and not read the top each time.

[realityfilter]

Any good workaround or patch available in the meantime?

[realityfilter]

I use this patch with patch-package:

diff --git a/node_modules/@ionic/core/components/ion-modal.js b/node_modules/@ionic/core/components/ion-modal.js
index e360c89..029bc73 100644
--- a/node_modules/@ionic/core/components/ion-modal.js
+++ b/node_modules/@ionic/core/components/ion-modal.js
@@ -43,7 +43,7 @@ const StatusBar = {
     if (!engine) {
       return;
     }
-    engine.setStyle(options);
+    // engine.setStyle(options);
   },
 };

[sean-perkins]

Hello everyone, can you test with this dev-build and let me know if the problem persists? The dev-build caches the status bar style when the modal is presented and returns back to that value when the modal is dismissed.

6.3.7-dev.11668124677.10f80791

For the provided reproduction:

npm install @ionic/vue@6.3.7-dev.11668124677.10f80791

This is the behavior I am seeing in the dev-build:

Kapture.2022-11-10.at.19.05.48.mp4

Note: Changes are on the fix/status-bar-style branch

[realityfilter]

There is another problem with setting the status bar color in the first place. Take for example https://ionicframework.com/docs/api/modal#mounting-inner-contents
The modal opens full screen and is not stacked. That is how we use it. Ionic still sets the status bar color to light.