ionic-team / ionic-team/ionic-framework

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

Open
#28,470 1 comment 5 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

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

Contributor guide

Open the contributing guide

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.