ionic-team / ionic-team/ionic-framework

bug: IonModal dismissing animation on iOS can look strange with the keyboard up

Ouverte
#30,144 2 commentaires 1 réaction 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

On iOS only, if you use IonModal and have an input box with the keyboard up, when you dismiss the modal, it animates sliding off the screen. Unfortunately, it seems to slide to a position assuming the keyboard remains visible. When the keyboard is hidden, you can still see the modal sitting at the bottom for a second before it disappears. I found an existing issue that describes it better than me and has a video demonstrating it: https://github.com/ionic-team/ionic-framework/issues/20686 I know that issue says it's fixed in Ionic 5, but if that's true, it seems to be back. I plan to work around the issue with
```ts
Keyboard.hide().then(() => {
setTimeout(() => {
this.modalCtrl.dismiss();
}, 150);
});
```
Basically using the Capacitor Keyboard plugin to hide the keyboard, give it a little time for animations and then dismissing the modal (inspired by the suggestion on the old issue.

### Expected Behavior

Dismissing IonModal should have it slide down smoothly off the screen.

### Steps to Reproduce

Open an IonModal that has an input box
Focus the input box so that the keyboard appears (if using the Simulator, you may need to turn off hardware keyboard)
Dismiss the IonModal

### Code Reproduction URL

https://github.com/chrisjdev/ionModalBug

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (~/.nvm/versions/node/v20.16.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 19.1.3
@angular-devkit/schematics : 19.1.3
@angular/cli : 19.1.3
@ionic/angular-toolkit : not installed

Capacitor:

Capacitor CLI : 7.0.1
@capacitor/android : not installed
@capacitor/core : 7.0.1
@capacitor/ios : 7.0.1

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.16.0 (~/.nvm/versions/node/v20.16.0/bin/node)
npm : 10.8.1
OS : macOS Unknown

### Additional Information

I lied when I checked the box for "I have searched for existing issues that already report this problem, without success.". I had to in order to create the issue. I noted the existing (closed) issue that already reports this problem in the description.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start with the IonModal dismissal path in the linked reproduction project and reproduce the issue on iOS with the keyboard visible. Trace how keyboard visibility affects the modal's slide-out animation; done means dismissing the modal slides it smoothly off-screen without leaving it visible at the bottom.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, ios, typescript
Domaine
frontend, mobile-dev
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

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