uNmAnNeR / imaskjs

vanilla javascript input mask
https://imask.js.org
MIT License
4.96k stars 258 forks source link

Unable to paste values without mask from clipboard #1063

Open pyymenta opened 3 months ago

pyymenta commented 3 months ago

Bug Description I encountered and unexpected behavior with several custom Inputs using react-imasked. When attempting to paste a value without a mask, the onChange callback fails to trigger.

I have created a CodePen demo to illustrate this issue:

onchange-paste

View Demo

Initially, I attempted to address this by adding an onPaste event to invoke the same onChange method callback. However, this approach resulted in an empty value being returned:

Incorrect onPaste Behavior

To resolve this, I implemented a workaround using setTimeout, which successfully achieved the expected behavior:

Correct onPaste Behavior with setTimeout

Despite its effectiveness, the setTimeout solution is not ideal. I am reaching out to address this issue and inquire if there is a better way to resolve it. Thank you for your assistance!

Steps to Reproduce

Codepen Demo

  1. Open the provided CodePen demo.
  2. Open the codepen console.
  3. Paste a value without a mask into the input field.

Expected Behavior The onChange event should trigger when pasting a value without a mask.

Environment:

Additional Context Include any additional relevant information about the problem here.

MilanDeruelle commented 1 week ago

Any news on that? I'm dealing with a similar issue, however I'm using imask-react with mantine. I'm guessing its internally relying on the onChange event and imask-rect loses all its "Plug and Play" compatability if we have to rely on onAccept