[InputMask React] Problem with copy + paste in masked input
Question
Forge component by João Barata

Hello,


I'm using the MaskCurrency for decimal masks and I have encountered an issue when trying to paste values in the masked field. It seems the pasted values are not correctly recognized, they are masked correctly, but when I look in the variable behind the input it remains empty (or previous value). This causes some errors when trying to reset / filter based on this variables.


I also tried (but unsuccessfully) to remove onpaste event in the input field, but again, it seems some javascript from the mask overrides the possibility to remove this event from the input.


Please let me know if there is something I can do to tackle this issue.


Regards,

Bogdan

I am also experiencing this issue - did you ever find a solution Bogdan?

Hi guys, are you still experiencing this in the latest version of the inputMask?

I had done some improvements to the copy/paste experience.

Let me know what are the input masks settings used on the component and what value are you trying to paste.

Regards,

Updating to the most recent version did solve this - thanks João!

Which is the latest version do we have to update to overcome this issue?

We have version 1.02

Hi joão.

I had the same issue and the version 1.02 resolves my problems for integers, but for decimal numbers still have the same problem. i notice if change decimal part the "copy paste" start working, but if i change the integer part doesn't. I always need change decimal part in order to make it work.

@João Barata, I am using inputmask 1.03. work with datetime. the copy paste does not trigger on change event. 



Hi @LingJie Zhou,

Thank you for, reporting it.

I've just released version 1.0.4 that should have the issue with pasting date masks fixed.

Regards,

Thank you for quick update. I have attach my demo . When I copy to the masked date input, the onchange event does not triggered. and when I move the focus out , the onblue does not pickup the new value. 

That cause the UI and real value different. 

Please advice how to solve the problem . Thanks

InputMaskcopypaste.oml

Hi @LingJie Zhou,

I've changed your sample slightly and as you can see by the GIF below the onChange event is being triggered when you click outside of the input ( blur event) although you don't need to specify the onBlur event as it might mess up the blur event from the component

Using the cut command( ctrl+x ) does not copy the correct value. You will need to copy(ctrl+c), clear the input, and then paste (ctrl+v).

I've attached your example with the changes I did.

Hope this helps,

InputMaskcopypaste.oml

Hi João, how are you?

I am facing the same issue with decimal values.

I am using the number mask and, somehow, when i paste on my input a string like "Text2", the mask automatically removes the non numeric characters, remaining only the number 2.

The problem is that the binded variable is not updated with the number 2, remaining empty.

Have you experienced this before?

Cheers,

Pedro Domingues

Hi Pedro,

Striping out invalid characters is by design. The mask has a regex that prevents invalid characters from being used on Paste. Right after pasting the value, the value does not update. However, once the user clicks outside of the input ( blur) the value should update. This was the solution I found to mitigate the paste issue.

Here's a gif of that behavior:

Notice that after pasting the value is not immediately updated but once the input blurs ( by clicking outside of the input) the value is then updated in the app.

Regards,


Hi João,

First of all, many thanks for the quick response. The observed behavior is only available on the latest version of the component?

Right now i have the version 1.03 and i'm afraid i cannot update to version 1.04 sooner...

Cheers,

Pedro Domingues

Hello @João Barata,

In my environment I have the same problem with copy-paste.

I have the last version of component (version 1.0.7) and installed the last Demo and in my environment when I paste the values they are masked correctly, but when I look in the variable behind the input it remains empty (or previous value).

If I delete the value before paste I have the same problem.

Is there any reason for this to happen in the my environment?


Best regards,

Walter Martins

Hi @Walter Martins ,

Are you clicking outside the input after the paste? Unfortunately, I'm only able to force the value to be sent to the variable on the input blur event.

The delete of the input using for example the "ctrl+x" will also only be reflected after clicking outside of the input to trigger the blur event.

Could you please confirm that the blur event is happening correctly?

Regards,


Hi João Barata,

Thanks for your reply.

Yes, I clicking outside the input after the paste and does not pickup the new value.

Below is a link to a short video to try to explain the problem:

Short Video Link


Thanks.

Best Regards,

Walter Martins

Hi @Walter Martins ,

Thank you for the recording. Unfortunately, I'm not able to replicate it on my side.

Could you please confirm if the issue also happens on the "Try Now" page of the component?

If it doesn't, could you please let me know what is the platform version of your infrastructure?

Regards,


Hi João,

On the "Try Now" the problem only happens if I delete de value before paste.

Versions:
Studio - 11.11.15 (Build 48647)
Platform - 11.10.1 (Build 23852)


Thanks,

Walter Martins

Hi @Walter Martins ,

Thank you for the explanation. I was finally able to replicate it and I've already released a new version with the fix.

Could you please give it a try?

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.