Skip to content

ngxMask in MS Edge can cause unwanted value change by mishandling separators #1573

@BarnT

Description

@BarnT

🐞 bug report

Is this a regression?

No

Description

By using toLocaleString within ngxMask source code, the behavior of the ngMask varies between different browsers, which can even cause unwanted changes in some cases. See Reproduction for more details.

🔬 Minimal Reproduction

Assume that you force US number formatting across your application by using "." as the decimal separator and "," as thousandSeparator. In some cases that you populate your inputs with preformatted values (eg. "10,000", which means 10000). (The Slakbitz example is set up this way)

Assume that your user is using windows, with Austrian Regional settings: In Windows settings, go to Time & language > Language & region. Set English (Austria) for Regional format.

Now open the slakbitz ( https://stackblitz.com/edit/j7hh9yzj?file=src%2Fapp%2Fapp.ts ) with both Chrome and Edge. See the differences between the behavior of these browsers by:

    1. checking how the initial value appears in the input
    1. checking what happens when you focus the input, delete one zero from the and and then type a zero again (in Edge this changes the value while the user could think that nothing has changed)
    1. checking what happens when you programmatically set a preformatted number by pushing the Set 20,000 button

🌍 Your Environment

Angular Version: 20


Angular CLI: 20.3.6
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
    

Angular: 20.3.6
... build, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.6
@angular-devkit/core         20.3.6
@angular-devkit/schematics   20.3.6
@schematics/angular          20.3.6
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions