bug: Keyboard interaction on device with inputs/buttons inside of swiper

[mchl18]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

We have the following setup:

• Ion-Input inside of swiper inside of Ion-Modal

What happens is that when the user tries to blur an input field by tapping inside of another input field or a button, the keyboard will close and then reopen without reliably firing the click events of the input/button that was clicked. This makes it impossible to reliably jump to another input or activate a button in the button bar.

I am aware that this might be indirectly a problem with swiper itself, but as the docs recommend swiper I thought I better raise an issue here.

I could narrow it down to it only happening when inside of a swiper slide. As a test I reimplemented a view with embla and the problem is no longer present.

This problem appears to be present when using the following options within capacitor.config.ts:

Keyboard: {
      resize: KeyboardResize.Body,
      resizeOnFullScreen: true,
    },

We need these options to be set like this, changing them is not an option.

This is just happening on devices (obv. only then we have the onscreen keyboard).

To see the problem in action see this video where I am tapping the "Zurück" (Back) Button without it activating while keyboard jumps up and down: https://www.youtube.com/shorts/G72RcerQLgk

The reproduction doesn't cover the full case because I think it has to do with the keyboard settings which seem to not be set properly in Stackblitz (not sure it's reading my capacitor config) but the effect can easily be seen:

On the initial page I can switch from input to input by tapping them without my keyboard retracting, once I try to do the same inside the modal we see the behaviour that is causing issues.

If the reproduction isn't enough I can maybe try to apply our styles which would make it a bit more precise but I think the problematic behaviour can be observed nonetheless.

Expected Behavior

I can reliably switch between inputs and click buttons when using ion-button within a swiper slide inside an ion-modal. Keyboard doesn't retract when tapping from one input into another and it reliably retracts when I tap a button outside of it.

Steps to Reproduce

1. Create new Project
2. Create a modal view
3. Inside modal place swiper with inputs and buttons
4. set Keyboard Options: { resize: KeyboardResize.Body, resizeOnFullScreen: true }
5. Open modal, focus input
6. Try hitting a button or switching inputs

Code Reproduction URL

https://angular-nr317m.stackblitz.io

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/madbook/.nvm/versions/node/v20.11.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.8.4 @angular-devkit/build-angular : 17.0.7 @angular-devkit/schematics : 17.0.7 @angular/cli : 17.0.7 @ionic/angular-toolkit : 10.0.0

Capacitor:

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

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v20.11.1 (/Users/madbook/.nvm/versions/node/v20.11.1/bin/node) npm : 10.2.4 OS : macOS Unknown

Additional Information

No response

[liamdebeasi]

Does this issue reproduce without Swiper? If it only reproduces with Swiper, then you should file a repo on the Swiper repo instead.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!