ionic-team / ionic-team/ionic-framework

bug: clicking non-focusable part of certain components inside ion-accordion will focus accordion header, triggering scroll

Đang mở
#25,064 6 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

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

### Current Behavior

When clicking on an IonIcon inside an IonItemOption inside an IonAccordian, it scrolls (or jumps, rather) to the top of the page. The click event for the IonItemOption is also not triggered.

### Expected Behavior

The click event for the IonItemOption should be triggered and it should not scroll/jump to the top.

### Steps to Reproduce

I have upgraded to the latest version of the Ionic CLI and created a minimum reproducible example of this in a new Ionic project. The project is using @Ionic/react 6.0.14.

Given the following conditions:

- You have an IonAccordion with IonItemSliding components in it and those have an IonItemOption that has an IonIcon in it
- You are not scrolled to the top of the page
- You slide open an item and click on the icon (not on another part of the button, on the icon itself)

Then instead of triggering a normal click event on the option button, it takes you to the top of the page.

The issue does NOT occur under the following circumstances:

- If you click on another part of any option button first and then click on the icon
- If you are at the top of the page already

The issue still occurs regardless of the slot used for the IonIcon element, or if no slot is given. It also occurs regardless of whether or not there is text in the option, as well.

### Code Reproduction URL

https://github.com/DevonStern/ionic-bug-ion-icon-in-ion-item-option/blob/master/src/pages/Home.tsx

### Ionic Info

Ionic:

Ionic CLI : 6.19.0 (C:\Users\DevonStern\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/react 6.0.14

Capacitor:

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

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v16.13.2 (C:\Program Files\nodejs\node.exe)
npm : 8.3.2
OS : Windows 10

### Additional Information

In the code reproduction, check out src/pages/Home.tsx (the link takes you straight there).

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

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

Hướng nghiên cứu

Start by running the reproduction linked in src/pages/Home.tsx with @ionic/react 6.0.14, focusing on IonAccordion, IonItemSliding, IonItemOption, and IonIcon. Trace the focus and click behavior when the icon is clicked while the page is scrolled. Done means the option click fires and the page does not jump to the top, with regression coverage for the reported interaction.

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

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 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
35/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.