insin / react-maskedinput

Masked <input/> React component
http://insin.github.io/react-maskedinput/
MIT License
730 stars 197 forks source link

Fails with Safari Credit Card Autofill #111

Closed dwbruhn closed 6 years ago

dwbruhn commented 6 years ago

Hi, thanks for the awesome component!

It doesn't appear to handle Safari Credit Card Autofill correctly, however. I've created a small demo app to reproduce the problem:

https://github.com/dwbruhn/mask-test

Some initial debugging points to the _onChange method, which isn't really editing the mask.

dwbruhn commented 6 years ago

Just to follow up: If I'm understanding the code correctly, the bug seems to reside in the design that handles all data-adding edits in _onKeyPress and _onPaste, leaving _onChange to handle only Cut & Delete operations.

The problem is that Autofill provides the input data only in an onchange event, and _onChange simply discards that data.

dwbruhn commented 6 years ago

So a possible fix would be to remove the assumption that onchange events only involve cut operations and handle actual data changes in _onChange. But note that this would slightly change the behavior of cutting and deleting.