bug: ion-input with type number throws error on value change

[AlessandroFBK]

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

GitHub repository

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

[sean-perkins]

@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.

[sean-perkins]

PR is open to address this issue.

You can test/use the dev build in the interim:

6.0.8-dev.1644851030.7f38ebb

Supports all @ionic/* packages. (react/angular/vue/core).

Edit: This dev build was updated to the latest, based on this comment.

[spicemix]

I get a similar bug in @ionic/angular@6.0.7 I will roll back for now. Surprised this made it all the way out to release.

Edit: Rolling back didn't work immediately (I suppose I have to delete the directory inside node_modules in this case) so I tried yarn add @ionic/angular@6.0.8-dev.1644430127.1b9bb92 and it works fine for me so far. Thanks!

DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('email') does not support selection.
    at Input.valueChanged (http://localhost:4200/node_modules_ionic_core_dist_esm_ion-input_entry_js.js:236:24)
    at http://localhost:4200/vendor.js:81534:40
    at Array.map (<anonymous>)
    at setValue (http://localhost:4200/vendor.js:81531:24)
    at Input.set [as value] (http://localhost:4200/vendor.js:81585:13)
    at HTMLInputElement.Input.onInput (http://localhost:4200/node_modules_ionic_core_dist_esm_ion-input_entry_js.js:124:20) 

[sean-perkins]

@spicemix appreciate you testing and verifying. This bug making it into v6.0.7 was my fault. I wasn't aware that the setSelectionRange API 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!

[papagei-ma]

@sean-perkins the patch doesn't seem to fix the bug on Chrome :(. But on Safari it's fixed.

EDIT: At first I changed the version per hand in package.json, and then run yarn install, so I announced its not fixed :). But after explicitly running yarn add @ionic/angular@6.0.8-dev.1644430127.1b9bb92 everything seems to work just fine. Hope I didn't get you guys confused.

Cheers

[Santisosa404]

Hi, I have recently upgrade my Ionic 5 app to Ionic 6 and I'm facing the same issue. Hope there any new in order to fix it. Thanks!

[papagei-ma]

@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.

[MilotH2]

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.

[ciccilleju]

same problem here: ionic 6.0.7 and email input field