bug: ion-menu's swipe-gesture causes error on other pages

Open Beginner friendly
#31,314 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend, mobile-dev

Research direction

Start in core/src/components/menu/menu.tsx around lines 592-593, where the issue identifies deltaX divided by this.width and animation.progressStep being called. Reproduce the iOS navigation and left-edge swipe sequence with ion-menu enabled, then verify the swipe path no longer raises the non-finite-value error when the menu is not rendered.

Written by the indexing model from the issue text.

Description

triage
Prerequisites
Ionic Framework Version

v8.x

Current Behavior

On iOS, if you add ion-menu with swipe-gesture enabled on a page, and then navigate to a different page, and swipe from left side of screen to the right, there is a javascript error:

TypeError The provided value is non-finite

Here is stacktrace:

    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:2217 
    [native code] forEach
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:2210 Q
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5030 progressStep
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5022 
    [native code] forEach
    f://localhost/assets/p-CtukzcyX-BJW7t2Im.js:2:5002 progressStep
    f://localhost/assets/smartRouter-CIhTEPpS.js:2:463597 onMove

It seems to come from the code:

const step = deltaX / this.width; // deltaX / 0 = NaN
this.animation.progressStep(NaN); // throws "The provided value is non-finite"

This could be due to swipe using a full document listener, but menu has 0 width since it's not currently rendered.

Expected Behavior

No error

Steps to Reproduce

See above.

Code Reproduction URL

https://github.com/ionic-team/ionic-framework/blob/163cd24fc1eaa8bcce7a03524a375954cbb86bc4/core/src/components/menu/menu.tsx#L592-L593

Ionic Info

[repositories/fareclock-tc-next] $ ionic info

Ionic:

Ionic CLI : 7.2.1 (/Users/jacob/.volta/tools/image/packages/@ionic/cli/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 8.8.13

Capacitor:

Capacitor CLI : 8.4.1
@capacitor/android : 8.4.1
@capacitor/core : 8.4.1
@capacitor/ios : 8.4.1

Utility:

cordova-res : 0.15.4
native-run : 2.0.3

System:

NodeJS : v24.14.0 (/Users/jacob/.volta/tools/image/node/24.14.0/bin/node)
npm : 11.9.0
OS : macOS Unknown

Additional Information

No response

Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
2d 20h
Merged PRs (30d)
35

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from ionic-team/ionic-framework

All issues in ionic-team/ionic-framework

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.