search

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
50.94k stars 13.51k forks source link

bug: keyboard overlapping input fields #29825

Open Andr9651 opened 3 weeks ago

Andr9651 commented 3 weeks ago

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

The keyboard overlaps input fields in certain scenarios on Android and always on iOS. My main issue in my own project is a footer that hides the input field on iOS, but I've tested both with and without a footer here, which both seem to cause issues.

https://github.com/user-attachments/assets/cf57ba60-8cbe-4c01-b5c1-a780976c5318

https://github.com/user-attachments/assets/4503a8bc-2aba-4e00-b1ad-c280c4828dda

Expected Behavior

I expect that Android and iOS behave in the same way.

I expect the input-field to be visible when I close the keyboard as well.

Steps to Reproduce

  1. Go on tab 2 or 3
  2. Tap input-field
  3. Check if input-field is visible
  4. Close keyboard
  5. Check if input-field is visible

Code Reproduction URL

https://stackblitz.com/edit/ionic-input-overlap?terminal=dev

Ionic Info

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

   Require stack:
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\lib\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\index.js
   - C:\Users\---\Desktop\test\ionic-input-test\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.0 (C:\Users---\Desktop\test\ionic-input-test\node_modules\@ionic\cli) Ionic Framework : @ionic/vue 8.2.7

Capacitor:

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

Utility:

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

System:

NodeJS : v20.15.1 (C:\Program Files\nodejs\node.exe) npm : 10.7.0 OS : Windows 10

=================================

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 8.2.7

Capacitor:

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

Utility:

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

System:

NodeJS : v18.17.1 (/usr/local/bin/node) npm : 9.6.7 OS : macOS Unknown

Additional Information

No response

dev-p26 commented 1 day ago

Same issue on v8.x

It was working fine in the older versions