ionic-framework: bug: ion-input with type number throws error on value change
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
- v4.x
- v5.x
- v6.x
Current Behaviour
Given an ion-input with type number
<ion-input
inputmode="decimal"
type="number"
></ion-input>
the following error is thrown on each value change:
Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
I notice that version 6.0.6 has recently changed the code that performs setSelectionRange on input element (link).
The bug does not occur on previous version (6.0.5).
Expected Behavior
Typing in an ion-input with type number should not result into an error.
Steps to Reproduce
In an Angular application, add
<ion-input
inputmode="decimal"
type="number"
></ion-input>
Then type some value in the input element and check out the console log.
Code Reproduction URL
Ionic Info
Ionic:
Ionic CLI : 6.18.1 (/home/alessandro/.nvm/versions/node/v16.11.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.6
@angular-devkit/build-angular : 12.2.12
@angular-devkit/schematics : 12.2.16
@angular/cli : 12.2.16
@ionic/angular-toolkit : 5.0.3
Capacitor:
Capacitor CLI : 3.4.0
@capacitor/android : 3.4.0
@capacitor/core : 3.4.0
@capacitor/ios : 3.4.0
Utility:
cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0
System:
NodeJS : v16.11.1 (/home/alessandro/.nvm/versions/node/v16.11.1/bin/node)
npm : 8.0.0
OS : Linux 5.4
Additional Information
No response
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 15
- Comments: 31 (7 by maintainers)
@spicemix appreciate you testing and verifying. This bug making it into v6.0.7 was my fault. I wasn’t aware that the
setSelectionRangeAPI was only applicable to certain input types.I’ll likely be introducing tests to validate that no console errors happen in our examples (currently researching the best mechanism to handle this well). Goof-ups are always an opportunity to strengthen the process to prevent future ones!
Hi everyone,
A fix for this issue has been released as part of Ionic 6.0.8. Please update your apps to receive this fix.
Note: This issue only impacts Ionic 6. Ionic 4 and 5 apps are not impacted.
Thank you for your patience as we worked to resolve this issue.
same problem here: ionic 6.0.7 and email input field
The PR to address this issue has been merged and will be available in 6.0.8 (tentative release date is Feb 16, this Wednesday).
Thank you everyone for testing the dev builds and organizing the conversation in this thread!
I had the same problem with field type email, using 6.0.2 and Angular 13.2.2.
The 6.0.8-dev.1644430127.1b9bb92 branch fixed it for me.
Since I updated to 6.0.8-dev, the focus of input fields is messed up when I programmatically change its value. For example, if I add 2 chars to an input when the user starts typing, the cursor will not stay at the end of the value but instead stay before the two added values like this:
Telephone: ________
User types a 0, I programmatically add +41 instead of the 0, the cursor | is like this now:
Telephone: +|41_____
Expected:
Telephone: +41|_____
this happens with input type email also. I upgraded from 6.0.4 to 6.0.7, downgraded and trying different versions without success on this issue.
This happens only on Android and not on iOS.
Updating to 6.0.8-dev.1644430127.1b9bb92 it did the trick.
@Santisosa404 yarn add @ionic/angular@6.0.8-dev.1644430127.1b9bb92 In case you have an ionic/angular app. I mean you can use this patch, until there is a stable release with the fix.
PR is open to address this issue.
You can test/use the dev build in the interim:
Supports all
@ionic/*packages. (react/angular/vue/core).Edit: This dev build was updated to the latest, based on this comment.
@AlessandroFBK thanks for reporting this issue. This was caused in a recent change to fix another issue with Safari/iOS 15.3.
I’ll update that code to only reference the supported types and get a dev build available to test with.
Hello everyone, here’s an updated dev build to verify with:
6.0.8-dev.1644851030.7f38ebb.You can install it for your respective
@ionic/*packages. This dev build re-works the approach that required thesetSelectionRangemethod to be used. It should resolve both the exception that developers are experiencing with 6.0.7 as well as fix the cursor position issues with dynamically setting the value on an input.I will update my original comment above, so that anyone coming across this issue does not install the outdated dev build. Thanks!
This is not an issue on iOS 15 but the setSelectionRange does cause a side effect of setting the focus to the input box that the value changed even if it doesn’t have focus. For example if you change dynamically the ngModel value of an input box that doesn’t have focus it will automatically get focus. This was not an issue before.
Can we make sure that the setSelectionRange is called only if the input has focus?
Same issue appears to be happening for
ion-inputwithtype="date"