bug: Keyboard not respecting that screen is locked in portrait mode when rotating iPhone

[sorenfruergaard]

Bug Report

Capacitor Version

npx cap doctor output:

💊 Capacitor Doctor 💊

Latest Dependencies:

@capacitor/cli: 2.1.0

@capacitor/core: 2.1.0

@capacitor/android: 2.1.0

@capacitor/electron: 2.1.0

@capacitor/ios: 2.1.0

Installed Dependencies:

@capacitor/electron not installed

@capacitor/cli 2.1.0

@capacitor/core 2.1.0

@capacitor/android 2.1.0

@capacitor/ios 2.1.0

Found 6 Capacitor plugins for ios:
cordova-plugin-advanced-http (2.4.1)
cordova-plugin-email-composer (0.9.2)
cordova-plugin-file (6.0.2)
cordova-plugin-iroot (0.8.1)
cordova-plugin-screen-orientation (3.0.2)
es6-promise-plugin (4.2.2)
[success] iOS looking great! 👌

Affected Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

After upgrading to version 2 of capacitor the keyboard is not respecting that the screen orientation is locked in portrait mode and rotates to horizontal.

Expected Behavior

The keyboard should also be constrained to portrait mode when the screen is locked in portrait mode.

Sample Code or Sample Application Repo

Reproduction Steps

1. Use an application where the screen is locked to portrait mode
2. Place cursor in input field and see that keyboard is visible
3. Rotate phone to horizontal mode. The screen is still in portrait mode (correct) but the keyboard is now in horizontal mode (incorrect).

Other Technical Details

We have tried using both version 2.0.2 and 2.1.0 of capacitor and this issue is in both.
The version we used to use was 1.5.1 which worked without errors

npm --version output:

6.11.3

node --version output:

v10.17.0

pod --version output (iOS issues only):

1.8.4

Other Information

apache/cordova-plugin-screen-orientation#62

[jakobe]

Here's a repo that reproduces the issue with latest Capacitor (2.1):
https://github.com/jakobe/cap-keyboard-orientation

[jcesarmobile]

I've sent a PR that fixes the issue, but I would recommend not using cordova-plugin-screen-orientation unless you need to programmatically change/lock the orientation only in certain cases/screens.

If what you need is that your app only support portrait orientation, instead of using cordova-plugin-screen-orientation, it's better to set the app's supported orientations on Xcode.

[jakobe]

@jcesarmobile Thx a lot! We are excactly using the cordova-plugin-screen-orientation for this purpose, that is, programmatically change/lock the orientation only in certain cases/screens.
Thx for the quick fix and release, we'll give that a try 👍

[jakobe]

@jcesarmobile Unfortunately the issue hasn't been resolved. I've updated the repo, that reproduces the issue to latest Capacitor (2.1.1) but the issue still persists:

[sorenfruergaard]

@jcesarmobile Will you reopen the issue?

Just to be clear @jakobe and me are working on the same project.

[kensodemann]

@sorenfruergaard / @jakobe - please see the ZD ticket you have open with me.

[jakobe]

Hi @jcesarmobile,

I'm very sorry, apparently it was a false negative because of a cache in my Xcode.
I only cleaned node_modules and did a fresh npm install + rebuild + npx cap sync ios, but didn't think of cleaning my Xcode build... :(

So: Problem solved!

Thanks again for the quick fix and release!

[shahramSo]

I have an experience like this problem but with orientation change on Android, after some working days, I knew the issue comes when the plugin "es6-promise-plugin" is added automatically by capacitor, so if you remove it manually, Capacitor still add it automatically by update command.I think " es6-promise-plugin" is not compatible with some Cordova plugins which is used by Capacitor. for more, if you remove all Cordova plugins by npm uninstall command, the "es6-promise-plugin" is not removed, finally check this problem for using any orientation change plugins like "platform" and "cordova-plugin-screen-orientation".

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.