ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: keyboard overlapping input fields

Open Andr9651 opened this issue 1 year ago • 1 comments

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

Andr9651 avatar Sep 02 '24 14:09 Andr9651