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

AlessandroFBK · 2022-02-09T15:57:50Z

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

The text was updated successfully, but these errors were encountered:

sean-perkins · 2022-02-09T17:15:03Z

@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 · 2022-02-09T18:16:30Z

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 · 2022-02-09T21:14:25Z

I get a similar bug in @ionic/[email protected] 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/[email protected] 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 · 2022-02-09T22:48:43Z

@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 · 2022-02-10T12:40:40Z

@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/[email protected] everything seems to work just fine. Hope I didn't get you guys confused.

Cheers

Santisosa404 · 2022-02-10T12:52:42Z

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 · 2022-02-10T12:54:42Z

@Santisosa404 yarn add @ionic/[email protected] 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 · 2022-02-10T15:24:29Z

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 · 2022-02-10T20:47:46Z

same problem here: ionic 6.0.7 and email input field

philkonick · 2022-02-11T12:28:29Z

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.

cromdev · 2022-02-11T18:54:16Z

6.0.8-dev.1644430127.1b9bb92 fixed it for me as well, though I see other issue - on ion-input with type="number" pressing dot clears the input. Exactly same issue as here: #18864
I was able to reproduce it both in desktop chrome and cordova based app on android.
Any chance it's connected with latest changes?

andreas-aeschlimann · 2022-02-11T19:16:13Z

The bug appeared since 6.0.2, I encountered it with the e-mail input. Due to another bug (memory leak in modals, #24460) I strongly discourage from downgrading to <6.0.3.

I tried the dev build and it works for me.

1beb · 2022-02-12T05:26:17Z

Same issue appears to be happening for ion-input with type="date"

cromdev · 2022-02-12T10:35:05Z

6.0.8-dev.1644430127.1b9bb92 fixed it for me as well, though I see other issue - on ion-input with type="number" pressing dot clears the input. Exactly same issue as here: #18864 I was able to reproduce it both in desktop chrome and cordova based app on android. Any chance it's connected with latest changes?

FYI, version 6.1.0-dev.202112152233.e254a3a solves both issues for me

mariossavva · 2022-02-13T01:56:02Z

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?

andreas-aeschlimann · 2022-02-13T13:09:26Z

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?

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|_____

ltahiri · 2022-02-14T10:25:57Z

same problem here: ionic 6.0.7 and email input field

sean-perkins · 2022-02-14T15:09:54Z

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 the setSelectionRange method 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!

ghost · 2022-02-14T15:33:26Z

I've got same error using ionic/vue on
<ion-input type="email"></ion-input>

ArcadeMode · 2022-02-14T18:19:41Z

Dev build 6.0.8-dev.1644851030.7f38ebb resolves the issue for me (angular). Before this version my ngModels on email and numeric fields would break too, the dev build resolves it.

sean-perkins · 2022-02-14T19:34:47Z

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!

ciccilleju · 2022-02-14T19:39:27Z

Thank you so muco for your commitment Il Lun 14 Feb 2022, 20:35 Sean Perkins ***@***.***> ha scritto:

…

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! — Reply to this email directly, view it on GitHub <#24753 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKFB5GVT3EY5XHPLLLFKORTU3FKOLANCNFSM5N55FHAA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

sjdrew · 2022-02-14T21:19:35Z

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?

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|_____

I noticed same thing with that IOS fix it seems to rely on selectionStart/End and any directive like a phone number field on top of an ion-input is now not working as cursor position gets messed up. (Seems to be broken since Ionic 6.02 and higher).

leo00723 · 2022-02-14T21:36:12Z

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 the setSelectionRange method 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!

Awesome Thanks works for me. Spent 3 hours retracing my changes thinking I created the error :( , but its fixed

WellingtonGAlves · 2022-02-15T16:50:28Z

I thank everyone here.
It worked with this command on windows for the problem with ( ion-input type=email ):

npm i @ionic/[email protected]

liamdebeasi · 2022-02-15T21:31:09Z

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.

andreas-aeschlimann · 2022-02-16T00:46:08Z

Thank you @liamdebeasi, do you know if #24753 (comment) is also fixed? I think it is related to or even caused in the same way as this issue.

etiennebon · 2022-03-08T15:01:52Z

Hello,

I am seeing the same issue in 6.18.1.

DOMException: An attempt was made to use an object that is not, or is no longer, usable

Thank you.
E

sean-perkins · 2022-03-08T15:05:26Z

Hello,

I am seeing the same issue in 6.18.1.

DOMException: An attempt was made to use an object that is not, or is no longer, usable

Thank you. E

@etiennebon the latest production release of Ionic is 6.0.10. The code that was causing the original issue has been completely removed from the codebase.

Can you double check that you are on the latest version of Ionic dependencies?

Please feel free to open a new issue if you are able to create a reproduction of the problem.

Thanks!

etiennebon · 2022-03-08T18:34:16Z

Hello Sean,

Thank you.
Indeed, my version was not good:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 6.0.7

I just upgraded and now everything goes very well.

Thank you very much for your quick response.

Regards,
Etienne.

ionitron-bot · 2022-04-07T18:39:55Z

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

ionitron-bot bot added the triage label Feb 9, 2022

sean-perkins self-assigned this Feb 9, 2022

sean-perkins added package: core @ionic/core package type: bug a confirmed bug report labels Feb 9, 2022

ionitron-bot bot removed the triage label Feb 9, 2022

sean-perkins mentioned this issue Feb 9, 2022

fix(input): only set native input value if different #24758

Merged

13 tasks

rdlabo mentioned this issue Feb 13, 2022

bug: users cannot log into app using Google Chrome #24778

Closed

6 tasks

sean-perkins closed this as completed in fd031aa Feb 14, 2022

indraraj26 mentioned this issue Feb 15, 2022

bug: Number inputs throw an exception #24786

Closed

6 tasks

This was referenced Mar 1, 2022

build(deps): bump @ionic/angular from 5.6.11 to 6.0.9 numbersprotocol/capture-lite#1327

Closed

build(deps): bump @ionic/core from 5.6.11 to 6.0.9 numbersprotocol/capture-lite#1323

Closed

Saqib92 mentioned this issue Mar 2, 2022

bug: The input element's type ('number') does not support selection #24862

Closed

6 tasks

ionitron-bot bot locked and limited conversation to collaborators Apr 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

AlessandroFBK commented Feb 9, 2022 •

edited

Loading

sean-perkins commented Feb 9, 2022

sean-perkins commented Feb 9, 2022 •

edited

Loading

spicemix commented Feb 9, 2022 •

edited

Loading

sean-perkins commented Feb 9, 2022

papagei-ma commented Feb 10, 2022 •

edited

Loading

Santisosa404 commented Feb 10, 2022

papagei-ma commented Feb 10, 2022

MilotH2 commented Feb 10, 2022

ciccilleju commented Feb 10, 2022

philkonick commented Feb 11, 2022

cromdev commented Feb 11, 2022

andreas-aeschlimann commented Feb 11, 2022

1beb commented Feb 12, 2022

cromdev commented Feb 12, 2022

mariossavva commented Feb 13, 2022 •

edited

Loading

andreas-aeschlimann commented Feb 13, 2022 •

edited

Loading

ltahiri commented Feb 14, 2022

sean-perkins commented Feb 14, 2022

ghost commented Feb 14, 2022

ArcadeMode commented Feb 14, 2022

sean-perkins commented Feb 14, 2022

ciccilleju commented Feb 14, 2022 via email

sjdrew commented Feb 14, 2022 •

edited

Loading

leo00723 commented Feb 14, 2022

WellingtonGAlves commented Feb 15, 2022

liamdebeasi commented Feb 15, 2022

andreas-aeschlimann commented Feb 16, 2022

etiennebon commented Mar 8, 2022

sean-perkins commented Mar 8, 2022

etiennebon commented Mar 8, 2022

ionitron-bot bot commented Apr 7, 2022

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

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

Comments

AlessandroFBK commented Feb 9, 2022 • edited Loading

Prerequisites

Ionic Framework Version

Current Behaviour

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

sean-perkins commented Feb 9, 2022

sean-perkins commented Feb 9, 2022 • edited Loading

spicemix commented Feb 9, 2022 • edited Loading

sean-perkins commented Feb 9, 2022

papagei-ma commented Feb 10, 2022 • edited Loading

Santisosa404 commented Feb 10, 2022

papagei-ma commented Feb 10, 2022

MilotH2 commented Feb 10, 2022

ciccilleju commented Feb 10, 2022

philkonick commented Feb 11, 2022

cromdev commented Feb 11, 2022

andreas-aeschlimann commented Feb 11, 2022

1beb commented Feb 12, 2022

cromdev commented Feb 12, 2022

mariossavva commented Feb 13, 2022 • edited Loading

andreas-aeschlimann commented Feb 13, 2022 • edited Loading

ltahiri commented Feb 14, 2022

sean-perkins commented Feb 14, 2022

ghost commented Feb 14, 2022

ArcadeMode commented Feb 14, 2022

sean-perkins commented Feb 14, 2022

ciccilleju commented Feb 14, 2022 via email

sjdrew commented Feb 14, 2022 • edited Loading

leo00723 commented Feb 14, 2022

WellingtonGAlves commented Feb 15, 2022

liamdebeasi commented Feb 15, 2022

andreas-aeschlimann commented Feb 16, 2022

etiennebon commented Mar 8, 2022

sean-perkins commented Mar 8, 2022

etiennebon commented Mar 8, 2022

ionitron-bot bot commented Apr 7, 2022

AlessandroFBK commented Feb 9, 2022 •

edited

Loading

sean-perkins commented Feb 9, 2022 •

edited

Loading

spicemix commented Feb 9, 2022 •

edited

Loading

papagei-ma commented Feb 10, 2022 •

edited

Loading

mariossavva commented Feb 13, 2022 •

edited

Loading

andreas-aeschlimann commented Feb 13, 2022 •

edited

Loading

sjdrew commented Feb 14, 2022 •

edited

Loading