insin / react-maskedinput

Masked <input/> React component

Home Page:http://insin.github.io/react-maskedinput/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fails with Safari Credit Card Autofill

dwbruhn opened this issue · comments

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.

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.

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.