ionic-team / ionic-team/ionic-framework
bug: keyboard overlapping input fields
- Dominant language
- TypeScript
- Stars
- 52.7k
- Forks
- 13.3k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 51
Description
### Prerequisites
- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### 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_
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and follow the listed steps on Android and iOS, noting the differences with and without a footer. Review the Ionic Vue 8.2.7 and Capacitor 6.1.2 setup shown in the report. Done means the input remains visible when the keyboard opens and after it closes, with consistent behavior across both platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, ios, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100