New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reinitialize Cleave on a field disrupt input event value #403

wattswing opened this Issue Sep 20, 2018 · 0 comments


1 participant

wattswing commented Sep 20, 2018

馃憢 there !
First of all, thanks for working on this useful JS lib : it's a pretty nice work you've done here. 馃槏

I browsed some issues of the repo (thinking about #176) to find a way to change options on-the-fly, and found there is no other way to do it (other than re-initialize a new instance on the field).

There is my issue :
I'm currently working with Cleave.js on a credit card form field. To KISS, it exposes :

  • a credit card number input
  • a PIN verification code

I use the onCreditCardTypeChanged callback option on the credit card field instanciation.
It aims to re-initialize a new Cleave instance on the PIN field to restrain the input value to 3 (all credit cards) / 4 (for amex cards) digits.
The problem I encountered seem to happen at the moment the reinitialization occurs (right after using .destroy() on it). Any input listener callback on the PIN field will receive an extra character, weather the input value length is correct or not.

To reproduce :

  1. Open this codepen, and open the web console to watch it log things up.
  2. Watch the handleInput log its currentTarget.value properly (transmitted event value is what you type in the PIN field)
  3. type a 4 in the credit card field to trigger the creditCardTypeChange callback (it re-instanciates a cleave instance on the PIN field).
  4. now when you populate back the PIN field (expecting to find a 3-chars-max value here), you'll observe that an extra fourth char (not present in the input field) is sent to the handleInput callback. Also you'll see this last extra char can be any char type (on a restrained type field { numericOnly: true })

Well I surely could do all sort of post-treatment on the received value, but I was expecting this strange behavior to be explained before. Also I didn't found any relevant explanation by browsing the source code.
Maybe I did something forbidden ?

Thanks a lot for your feedback, kindly,

  • Watts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment