ionic-team / ionic-team/ionic-framework
bug: ion-input placeholder overlaps with icon and jumps on focus near screen bottom when keyboard opens
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 15 h
- PR mergées (30 j)
- 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
When focusing the last `ion-input` near the bottom of the screen in a stacked layout with `labelPlacement="stacked"` and an `icon`, the placeholder or value visibly shifts to the left and overlaps the icon before resetting to the correct position. This behavior only occurs when there are enough inputs stacked to trigger Ionic’s `relocateInput` function to create space for the keyboard.
This results in a poor user experience as the input content jumps and overlaps briefly, making the interface appear unstable.
You can watch the issue here in this screen recording:
https://www.loom.com/share/da7ba040a3684ca48a807f5cfa4dd5a9?t=7&sid=6cdc995c-705b-4eed-9626-d3bdf3fedd73
### Expected Behavior
The `ion-input` should remain visually stable when focused, regardless of its position on the screen or whether the keyboard opens. The placeholder or value should not shift or overlap the icon at any point.
### Steps to Reproduce
1. Create a list of `ion-input` elements stacked in a `div`, ensuring they occupy enough vertical space to require the keyboard to push the last input into view when focused.
• Use at least 10 `ion-inputs` for reproduction.
2. Add the following properties to the `ion-input` elements:
• label with `labelPlacement="stacked"`.
• A `placeholder`.
• An `icon` in the `slot="start"`.
3. Test on a mobile device or in Google Chrome DevTools with mobile emulation enabled (e.g., iPhone SE).
• Ensure the viewport is configured so the last `ion-input` is near the bottom of the screen.
4. Alternate clicking between the labels of any input and the label of the last input.
• When clicking the label of the last input, the placeholder or value briefly shifts left, overlapping the icon, before resetting.
### Code Reproduction URL
https://stackblitz.com/edit/1ne4fk8t?file=src%2Fcomponents%2FExample.vue
### Ionic Info
Ionic:
Ionic CLI : 7.2.0 (/Users/christiangrosskopf/.nvm/versions/node/v20.18.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.4.1
Capacitor:
Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.18.1 (/Users/christiangrosskopf/.nvm/versions/node/v20.18.1/bin/node)
npm : 10.8.2
OS : macOS Unknown
### Additional Information
This issue occurs because Ionic’s `relocateInput` function applies a transform style to move the native input element out of the visible area while creating space for the keyboard. The applied transform briefly affects the input’s layout, causing the visible jump and placeholder/icon overlap.
Relevant Code: `inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;`
This behavior is particularly noticeable for inputs near the bottom of the screen and does not occur on desktop screens, as relocateInput is not triggered in those environments.
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.