search

braintree / restricted-input

Restrict <input>s to certain valid characters (e.g. formatting phone or card numbers)
https://braintree.github.io/restricted-input/
MIT License
68 stars 25 forks source link

bug: incorrect value after toggle #58

Closed Scrum closed 5 years ago

Scrum commented 5 years ago

General information

Issue description

Bug can look at https://braintree.github.io/restricted-input/

Steps

  1. I enter the value (4111111111111111) in field Card Number (toggle-able)
  2. I press the button toggle twice
  3. and get the formatted value one less character 4111 1111 1111 111
crookedneighbor commented 5 years ago

This is expected, as the pattern it toggles to has 15 characters instead of 16 characters. When the input starts at 16 characters and then is restricted to 15 characters, it makes sense that the final character would be cut off when toggled back.

This particular example is emulating a toggle between a non-American Express card (which usually has 16 digits) and an American Express card (which only has 15 digits).

Scrum commented 5 years ago

Your truth, but I noticed another mistake while trying to understand the reasons for this behavior. This can be seen on my demo page There you may notice that I obviously change the value of the element

function setUnionpay() {
  element.value = data.unionpay.value;
  formattedCreditCardInput.setPattern(creditCardGapsPattern(data.unionpay.gaps, data.unionpay.lengths));
}

function setAmex() {
  element.value = data.amex.value;
  formattedCreditCardInput.setPattern(creditCardGapsPattern(data.amex.gaps, data.amex.lengths));
}

then the unformat method does not take into account the characters used in the pattern.

I created a PR where there is a playback test

Scrum commented 5 years ago

@crookedneighbor tagging you just in case you don’t see this, otherwise.