Losing Decimal Places When ThousandSeperator is added with Overwrite

[lhalver1]

I am trying to create a currency mask in Angular. When I start entering numbers and get to the thousands place it will "eat" my first decimal place. It seems everytime it adds a "," for thousands seperator it deletes/overwrites/eats my first decimal point, so $1,000.89 will eat my first decimal point and display $1,000._9, then $1,000,000.89 will eat my first decimal point and display $1,000,000._9 and so on.

So, I enter 150.99 (with my cursor in front of the decimal), when I enter another zero, so it should make it $1,500.99, but it will "eat" or get rid of one my first 9 and display $1500._9. I need to be able to enter the dollar amount, then enter the ".", then the cursor moves over to the cents and I can then enter the cents.

Example

Here is a StackBlitz Demo of the issue. Put your cursor just in front of the decimal and type a digit, you should see one of the 9's behind the decimal get deleted.

Code

<input class="text-right"
  [imask]="moneyMask"
  [unmask]="true"
  [(ngModel)]="cost"
  (blur)="onBlur($event)"
/>

moneyMask: any = {
    mask: '$num{.}cents',
    blocks: {
      num: {
        mask: Number,
        signed: true,             //allow negative
        thousandsSeparator: ','
      },
      cents: {
        mask: '`0`0',
        signed: false
      }
    },
    overwrite: true
  };

[ghost]

the same issue for me :(

[blite]

Just curious are you trying to save values as integers here?

I have been trying to wrap my head around how to use this library for storing USD currency values as "cents". Currently filament is encouraging decimal usage with this library, and I'm looking at how to rectify that.