ionic-team / ionic-team/ionic-framework

bug: ion-input placeholder overlaps with icon and jumps on focus near screen bottom when keyboard opens

Ouverte
#30,103 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
triage
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.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.