Caret jumps before decimal when typing . with prefix="$" and [leadZero]="true" in separator mask (FormControl bound)

[BobMakhlin]

🐞 bug report

Is this a regression?

No

Description

When using mask="separator.2" together with prefix="$" and [leadZero]="true" on a reactive FormControl, typing a single . causes the caret to jump before the decimal ($][.) instead of staying at the end ($0.|).

This only happens when the input is bound to a FormControl.
When used as a standalone (unbound) input, the caret remains in the correct position.

🔬 Minimal Reproduction

StackBlitz reproduction: https://stackblitz.com/edit/stackblitz-starters-py3ewu1x?file=src%2Fmain.ts

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

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

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

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.2000.0
@angular-devkit/core         20.0.0
@angular-devkit/schematics   20.0.0
@schematics/angular          20.0.0
rxjs                         7.8.2
typescript                   5.8.2
zone.js                      0.15.0

💡 Workaround

A temporary directive can restore correct caret placement:

@HostListener('input')
onInput() {
  if (this.input.value === '$.' || this.input.value === '$0.') {
    queueMicrotask(() => {
      requestAnimationFrame(() => {
        const end = this.input.value.length;
        this.input.setSelectionRange(end, end);
      });
    });
  }
}

Ngx-mask version: 20.0.3