jondavidjohn / payform

:credit_card: A library for building credit card forms, validating inputs, and formatting numbers.
https://jondavidjohn.github.io/payform/
Other
427 stars 81 forks source link

Input event is prevented on auto-formatting #28

Open slavafomin opened 6 years ago

slavafomin commented 6 years ago

Hello!

Thank you for this great module!

However, when using auto-formatter and entering the numbers into input field, some events are prevented. This happens right before space character is automatically inserted, e.g. when entering 5213 2…:

This makes data-binding to fail, because we can't know when value is changed (I'm integrating it with custom Angular 2+ component).

What could be done about this?

Thanks!

slavafomin commented 6 years ago

I've managed to work around this issue using the following approach:

inputElement.addEventListener('keydown', () => {
  setTimeout(() => this.propagateValue(inputElement.value), 10);
});

The keydown event is fired every time, so we could rely on it. But the value is not yet updated when it's fired, so we need to wait for some time until it does.

This is kinda ugly, but works.

I would rather listen for input event, which is sealed by the library.

jondavidjohn commented 6 years ago

Might be related to #13

Thanks for the report.

eduarguz commented 5 years ago

Would not this be resolved by removing this line https://github.com/jondavidjohn/payform/blob/master/src/payform.coffee#L295 or by emitting a new input event at this point? Not sure what issues could this bring