436
Views
23
Comments
[Input Mask React] Problem with copy + paste in masked input
Question
inputmask-react
Reactive icon
Forge asset 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

2020-03-30 22-22-21
Nick MATES

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

2020-10-08 19-51-35
João Barata
Staff

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,

2020-03-30 22-22-21
Nick MATES

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

UserImage.jpg
Shreelakshmi N S

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

2020-03-30 22-22-21
Nick MATES

We have version 1.02

UserImage.jpg
gonçalo veiga

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.

UserImage.jpg
Lingjie Zhou

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



2020-10-08 19-51-35
João Barata
Staff

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,

UserImage.jpg
Lingjie Zhou

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
2020-10-08 19-51-35
João Barata
Staff

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
2026-03-23 09-58-51
Pedro Domingues
Champion

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

2020-10-08 19-51-35
João Barata
Staff

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,

2026-03-23 09-58-51
Pedro Domingues
Champion


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

2016-01-04 19-12-23
Walter Martins

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

2020-10-08 19-51-35
João Barata
Staff

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,

2016-01-04 19-12-23
Walter Martins


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

2020-10-08 19-51-35
João Barata
Staff

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,


2016-01-04 19-12-23
Walter Martins

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

2020-10-08 19-51-35
João Barata
Staff

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?

2020-12-07 17-12-41
J Grou

Hello @João Barata, Im running version 1.0.8 and I have the same exact issue as described above. Pasted values dont get picked up by the input.  

2024-05-16 23-28-23
Giuliano Ragusa

Hi Joao,

Thanks for the effort you've put in the component, apart from this issue, it's been working as expected! I have the 1.0.8 version installed and seems like the fix isn't there. I'm able to see the fix working on your demo environment but doesn't with my version 1.0.8(demo in gif below). Do you have an idea why? Or can you explain what your fix was to check if I have it on my end? 

It's very strange, as I've even compared your two files InputMaskAuxFunctions_min.js and inputmask_min.js with mine and they are the same.


Regards,

Giuliano


2024-07-09 13-46-34
Tiago Oliveira Matos

Hello João,

I've been using your component for a credit card mask. The version was 1.0.6 and I could Copy-Paste a number to my input and when I click outside the input the value was saved. Now with version 1.0.8, when copy-paste the value remains, but if you click outside the input, the value disappears. Now  I have to hit the enter key or remove a number and write again for the feature copy paste to work. 

Can you help me with this topic?

Best regards, Tiago Oliveira Matos.

2024-07-09 13-46-34
Tiago Oliveira Matos

Hi @João Barata

Everything seems to be fine with the component in the latest version 1.0.8. My problem was really with my code, which had a conflict problem with an onblur event that had on my input. I removed this event, did some changes to my code and it turns out that the Copy-Paste feature is working perfectly. 

Best regards, Tiago Oliveira Matos.

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