ionic-team / ionic-team/ionic-framework

bug: Ionic refresher gesture double mounted with incorrect ion-content-scroll-host

未关闭
#28,470 1 条评论 5 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

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

In certain cases, a non-native IonRefresher gesture handler will get double-mounted (you can tell by stepping through code and seeing `this.gesture` in refresher.ts is called twice in a row).

One of the mounts will have the incorrect `.ion-content-scroll-host` setup and it causes the feed to refresh any time you try to scroll up.

Note: I realize the IonRefresher is being (ab)used, mounted then quickly unmounted and remounted, and there's a better way to do this where it will not cause a double-mounted gesture. However, I'm experiencing this issue in Voyager intermittently (see: https://github.com/aeharding/voyager/issues/718). This reproduction is just the best way I can demonstrate this issue in a consistently reproducible manner.

### Expected Behavior

Gestures should never be double mounted. `.ion-content-scroll-host` should always be correctly connected.

### Steps to Reproduce

1. Clone reproduction
2. `pnpm i`
3. `ionic serve`
4. Using an Android device, or Chrome simulator emulating an Android device, scroll down, then scroll up. See feed refresh.

### Code Reproduction URL

https://github.com/aeharding/refresher-race

### Ionic Info

```
Ionic:

Ionic CLI : 7.1.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.1

Capacitor:

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

Utility:

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

System:

NodeJS : v20.8.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/bin/node)
npm : 10.1.0
OS : macOS Unknown
```

### Additional Information

https://github.com/aeharding/voyager/issues/718

https://github.com/ionic-team/ionic-framework/assets/2166114/069c842d-135b-4d18-8161-5b088db6df50

贡献指南

打开贡献指南

调研方向

Start with the refresher.ts gesture handling and reproduce the race using the linked refresher-race project: install dependencies with pnpm i, run ionic serve, and test Android-mode scrolling. Compare the two gesture mounts and their ion-content-scroll-host connections. Done means gestures mount only once and scrolling up no longer triggers an unintended refresh.

由索引模型根据 Issue 内容生成。

评估

技术栈
react, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。