Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
Since the latest Ionic version v8 (coming from Ionic 6), the ion-range throws errors.
TypeError: Cannot read properties of undefined (reading 'toString')
at getDecimalPlaces (ion-range.entry.js:15:14)
at ion-range.entry.js:50:57
at Array.map (<anonymous>)
at roundToMaxDecimalPlaces (ion-range.entry.js:50:46)
at ratioToValue (ion-range.entry.js:666:12)
at get valA (ion-range.entry.js:394:16)
at Range.renderRangeSlider (ion-range.entry.js:479:22)
at Range.render (ion-range.entry.js:615:300)
This error occurs at least on Angular. I think it's because following:
- Set value: Call
updateRatio: min/max possible undefined - Set min: Call
updateRatio: max/value possible undefined - Set max: Call
updateRatio: min/value possible undefined
This results in runtime error and invisible range component. It's maybe because a framework like Angular creates the attibutes for binding even if the value is not yet ready. In this case, it's undefined first. But idk. Anyway, it would be a good practice to treat undefined, wouldn't it?
Expected Behavior
Handle undefined. It's possible that one value can be undefined.
Steps to Reproduce
<ion-item *ngIf="hasRange()">
<ion-range [(ngModel)]="value" [min]="min" [max]="max"></ion-range>
</ion-item>All values are inputs (Input Angular decorator). The hasRange method returns true if both values (min, max) are available (not undefined) and not equal (min !== max).
In my case I created a modal with componentProps which goes to Angular component inputs.
NOTE: I already catch undefined values. It seems that this problem comes from Ionic framework.
Code Reproduction URL
https://codepen.io/fudom/pen/ZENZxdq
But not really good reproducible in a playground. Just handle undefined values!
Ionic Info
Ionic Angular 8.2.3