ionic-team / ionic-team/ionic-framework

bug: keyboard overlapping input fields

Open
#29,825 3 comments 1 reaction 0 assignees View on GitHub
triage
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.