Wrong value when select all (ctrl+a) and paste another value.

[Cruyff97]

• Describe the bug
• When I select all or a part of the value and paste a previously copied value, the value is pasted three times.
• You can see this bug also in the demo with decimal Mask.

[OleksandrOleniuk]

Do you have any updates on this issue?

[AlexandreXYZ]

When a user types the character "1" in a field with the "decimal" mask of Inputmask, the value is formatted correctly as "0.01". However, if the user selects the entire content of the field and pastes the text "1", the value becomes "110,01" instead of "1,00". This happens in versions 5.0.8 and 5.0.7 of Inputmask.

The issue seems to be related to the alias: 'decimal' and numericInput properties of the mask options. These properties are causing the error when the user pastes the value in the field.

To reproduce the issue, you can use the following code:

https://codesandbox.io/s/react-inputmask-decimal-alias-numericinput-bug-mn53pg?file=/src/App.js

Or

import Inputmask from "inputmask";
import { useEffect, useRef } from "react";

export default function App() {
  const ref = useRef();

  const maskOptions = {
    alias: "decimal",
    numericInput: true,
    groupSeparator: ".",
    placeholder: "0",
    radixPoint: ",",
    rightAlign: false
  };

  useEffect(() => {
    if (ref.current) new Inputmask(maskOptions).mask(ref.current);
  }, [ref]);

  return (
    <div className="App">
      <input ref={ref} />
    </div>
  );
}

I hope this information helps to identify and solve the issue with the Inputmask decimal mask.

[ivanlysianok]

Hi everyone!

I had very simillar issue in the project and I work on it with it last 2 days and finally I came to very simple solution! Maybe following information helps you...

Is needit to say that our project runs in Angular, maybe in other frameworks this bug is not occurs.

Nevertheless the problem was following: User had some decimals in the input, lets say 123 123. Then he selected value with CTRL + A and pasted new value from clipboard, lets say it was 999 999. Expected behavior was that input value changed to 999 999 but at this moment our bug happened and user had this uggly value: 123 123 999 999 123 123.

The solution:

HTML:

<input
  ...
  [inputMask]="inputMask" // This is our InputMask
  ...
  (paste)="onCopyPaste($event)" // You need to add "paste" event and bind some method
  #input
/>

` TS:

  @ViewChild('input') public inputElement?: ElementRef<HTMLInputElement>;
  ...
  public onCopyPaste(event: ClipboardEvent): void {
   // Here I check if input mask is presented (we had input mask as the Input) and if user
   // had value in the clipboard
    if (!this.inputElement || !this.inputMask || !event?.clipboardData?.getData('text')) return;
    const data: string = event.clipboardData?.getData('text');
    // This logic you can ignore but I dont want to allow user add some other stuff then numbers
    if (typeof +data !== 'number') return;
   //  !!! IMPORTANT !!!
   // Yes, this is thing that solves my bug. You need clear value here because entire problem happened because of
   // input mask triggers control.valueChanges TWO times and the second time was adding some uggly logic.
    this.inputElement.nativeElement.value = '';
  }

Hopefully it helps you :)

[DariusCorp]

For me it seems that an update to 5.0.9 cleared the issue right up. Before I was on 5.0.8