ionic-team / ionic-team/ionic-framework

bug: scroll assist does not prevent default browser adjustment in sheet modal

Đang mở
#27,493 11 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

### Prerequisites

- [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

v7.x

### Current Behavior

The inputs when opened inside a sheetModal, get covered by the keyboard
The expected behavior is for the content to move up to make space for the keyboard so the activated input is displayed and not covered

I'm including a video of the first test using the ionic starter-app taken from my cellphone..

https://github.com/ionic-team/ionic-framework/assets/105754419/868430bb-59c3-4f44-b2a1-8ae56eccace9

Then a video with stackblitz running on the chrome inspector showing the same behavior. I couldn't boot stackblitz on the cellphone but //fortunately// the behavior shows up on inspector. (fortunately meaning hopefully easier to debug)

https://github.com/ionic-team/ionic-framework/assets/105754419/2bffb7aa-8969-47f7-bbf9-8e23df0c4723

### Expected Behavior

Scroll Assist should auto scroll / create space to allow for the input to not being hidden behind the keyboard

### Steps to Reproduce

The stackblitz url i'm including followed the described steps but adds some additional code, to show the correct behavior on a regular modal and on a regular page

1. Create a new stackblitz starting with ion-modal controllers https://ionicframework.com/docs/api/modal#controller-modals
2. Add the breakpoints:[0.5] option to the modalController.create() command
3. Add 250px margin-top to the div containing the ion-input element in the modal-example.html
4. Verify bad behavior.

### Code Reproduction URL

https://stackblitz.com/edit/angular-cjmmkn

### Ionic Info

n/a.. running on stackblitz on latest

https://angular-cjmmkn.stackblitz.io/

### Additional Information

This was recently covered on a recent bugfix:
https://github.com/ionic-team/ionic-framework/pull/25849
by @liamdebeasi

But I'm guessing the sheetModal component is breaking the functionality.

There are some more scroll assist issues posted, but nothing really related to this specific case..

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with the Angular StackBlitz reproduction and the modalController.create() setup using breakpoints:[0.5], then compare its sheet modal behavior with the regular modal and page cases. Review the scroll-assist bugfix in PR #25849 and use the ion-input with 250px top margin to reproduce the issue. Done means the focused input remains visible when the keyboard opens.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.