type='number' on masked input - Throws error on focus and text entry

[z-svoboda-mob]

🐞 bug report

Is this a regression?

No, the issue occurs on 11.1.5 and 11.0.0

Description

Using input type='number' with a mask of mask='0' throws an error on focus and on text entry. It appears to work correctly otherwise.

I am using input type to trigger the number keyboard on mobile devices.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-zd58bk?devtoolsheight=33&file=src/app/app.component.html

🔥 Exception or Error

Chrome:

On focus:

ERROR
Error: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('number') does not support selection.

On text entry:

ERROR
Error: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.

Firefox

Same error for focus and text entry:

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

🌍 Your Environment

Angular Version:

Angular CLI: 11.2.5
Node: 14.15.4
OS: darwin x64

Angular: 11.2.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cdk                    11.2.5
@angular/cli                    11.2.5
@angular/material               11.2.5
@schematics/angular             11.2.5
@schematics/update              0.1102.5
rxjs                            6.6.6
typescript                      4.1.5

[ColinMorris83]

Changing the type to be "tel" should do what you want to

[z-svoboda-mob]

@ColinMorris83 I appreciate the tip! I would not be able to use the native stepper then, is that use case not possible?

[ColinMorris83]

Correct, I think if you require to have the native stepper then only type of number provides that, and that will need code changes in the library to check if input supports selection before certain pieces of code are run

[z-svoboda-mob]

Ok, that makes sense. This seems to be the location of the click event that errors, probably a good place to start: https://github.com/JsDaddy/ngx-mask/blob/develop/projects/ngx-mask-lib/src/lib/mask.directive.ts#L296

Could you elaborate on what kinds of code can't be run on number inputs? Thank you!

(@zacnomore)

[ColinMorris83]

I only know of selection functions which is mentioned here for what type of inputs support them: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

[de-don]

Still actual for 15.0.2

[JWess]

I would like to be able to use type="number so the number keyboard is shown on mobile and the number stepper is shown on desktop. I am using the "percent" mask so the user can input numbers between 0-100 like this:

<input 
  type="number" 
  mask="percent"
  formControlName="poPercentage"
>

When using ngx-mask 14 with Angular 14 on Chrome 114, I am seeing the following:

When I click into the input, I am seeing the error: ERROR DOMException: Failed to set the 'selectionStart' property on 'HTMLInputElement': The input element's type ('number') does not support selection. The backspace button does not work. Clicking the up stepper works, but the up arrow does not. The down stepper and down arrow do work. I can use the right arrow to move the cursor forward, but I can't use the left arrow to move the cursor backward.

[JWess]

Duplicate of https://github.com/JsDaddy/ngx-mask/issues/644

[andriikamaldinov1]

@JWess @de-don @ColinMorris83 @z-svoboda-mob Thanks for using Ngx-mask. Please update to latest version. There will be no errors in the console. But the main logic is tied to selectionStart && selectionEnd. This example will work as expected - https://stackblitz.com/edit/angular-7uxbmy?file=src%2Fmain.ts