ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: ion-range emit value 'NaN' when dragging to the far left end of the screen when the browser is full screen

Open dodo-Riley opened this issue 1 year ago • 0 comments

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

Peek 2024-08-23 14-31.webm Please refer to the attached video.

In event handlers such as ionInput or ionKnobMoveEnd on an ion-range, it can happen that the event.detail.value is NaN. When specifying currentX in the onEnd function inside range.js, detail.currentX can be 0. But, If it is 0, it tries to assign clientX to currentX by || even though it is a GestureDetail. However, in this case, clientX is undefined, which causes a NaN to occur later.

The problematic part of the code is attached as the image below. image (18) The bug can be fixed if it is modified to pass 0 when detail.currentX is 0.

Expected Behavior

When detail.currentX is 0, the value should be passed as is.

Steps to Reproduce

  1. clone reproduction code.
  2. start project
  3. set browser to full screen
  4. drag knob to the far left end of the screen

Code Reproduction URL

https://github.com/dodo-Riley/ionic-range-test

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/home/toonsquare/.nvm/versions/node/v18.18.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.8.6 @angular-devkit/build-angular : 15.2.11 @angular-devkit/schematics : 15.2.11 @angular/cli : 15.2.11 @ionic/angular-toolkit : 11.0.1

Utility:

cordova-res : 0.15.4 native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v18.18.1 (/home/toonsquare/.nvm/versions/node/v18.18.1/bin/node) npm : 9.8.1 OS : Linux 6.5

Additional Information

No response

dodo-Riley avatar Aug 23 '24 05:08 dodo-Riley