ionic-team / ionic-team/ionic-framework

bug: scroll assist needs improved keyboard estimation on web

Aperta
#23,664 25 commenti 2 reazioni 0 assegnatari Vedi su GitHub
package: core type: bug
Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
1g 15h
PR unite (30g)
51

Descrizione

### Prequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/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

- [ ] v4.x
- [X] v5.x
- [ ] v6.x

### Current Behavior

On iOS Safari (and as an app with "Add to Home Screen"), there is an uncomfortable pause when switching between inputs.

### Expected Behavior

When tapping another input on the page to switch focus, there should be no delay when no scrolling is required and keyboard remains open.

### Steps to Reproduce

1. Open following app in Safari on iOS/iPadOS device or simulator:
- with "Device Preview" QR-code on https://dashboard.ionicframework.com/preview/f7e6e842/mbb6khxjl9
- or directly at https://mbb6khxjl9.appflowapp.com/
2. tap "Address Line 1"
- caret appears at the beginning of Address Line 1
- keyboard shows up
3. tap "Address Line 2"
- caret disappears from "Address Line 1"
- keyboard stays open
- **-- awkward pause lasting about a second --**
- caret appears at the beginning of Address Line 2

reproducible on:
- iPad Air 2 (iPadOS 14.6)
- iPhone 12 mini (iOS 14.4; on Simulator)

### Code Reproduction URL

https://github.com/ippeiukai/ionic-safari-input-issue-23664

### Ionic Info

```
$ ionic info

Ionic:

Ionic CLI : 5.4.16 (/■■■■■■■/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.6.11
@angular-devkit/build-angular : 12.1.2
@angular-devkit/schematics : 12.1.2
@angular/cli : 12.1.2
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.1.1
@capacitor/core : 3.1.1

Utility:

cordova-res : not installed
native-run : 1.4.0

System:

NodeJS : v12.22.3 (/■■■■■■■/bin/node)
npm : 6.14.13
OS : macOS Catalina

────────────────────────────────────────────────────────────

Ionic CLI update available: 5.4.16 → 6.11.8

The package name has changed from ionic to @ionic/cli!

To update, run: npm uninstall -g ionic
Then run: npm i -g @ionic/cli

────────────────────────────────────────────────────────────
```

### Additional Information

Observing the DOM with Web Inspector suggests the `relocateInput` hack is being executed when "Address Line 2" is tapped, although there is no scrolling happening and the keyboard is already open and remains open.
https://github.com/ionic-team/ionic-framework/blob/v5.6.11/core/src/utils/input-shims/hacks/common.ts#L14

Our production app (which uses @ionic/angular 5.3.3) is affected and one of the views has severely degraded user experience as a result. Any help or workaround would be greatly appreciated.

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.