ccFormat bug when typing quickly about angular-credit-cards HOT 4 CLOSED

Hmm. Not really sure what to do about this. Thanks for reporting it, but I'm not willing to add something like this without a better understanding of what's going on.

from angular-credit-cards.

I think the issue was basically the watch doesn't fire immediately. So during typing the following is entered "4111222|", then the watch fires and adds the spaces, but for some reason it decides my caret should be back one space so the end result is this "4111 22|2". I also had the same issue using the backspace button as I'd end up skipping characters instead of spaces.

from angular-credit-cards.

It fires asynchronously? If you can manage to send a PR that tests this I'm game.

from angular-credit-cards.

I got it! It was the debounce effect - see here: http://plnkr.co/edit/PLZ6PqPc3cu0v9dqfnxW?p=preview

I ended up fixing it by replacing the actual watch with this:

$element.on('input', function formatInput () {
            var input = $element.val();
            var previous = $viewValue();
            if (!input) return
            var element = $element[0]
            var formatted = card.format(card.parse(input))

            //ngModel.$setViewValue(formatted)
            var selectionEnd = element.selectionEnd
            $element.val(formatted);
            //ngModel.$render()
            if (formatted && (!formatted.charAt(selectionEnd - 1).trim())) {
              if (previous && previous.length < formatted.length) {
                selectionEnd++
              } else {
                selectionEnd--
              }
            }
            element.setSelectionRange(selectionEnd, selectionEnd)
          })

Basically this fires before any of the watchers/formatters/parsers so it can't be delayed or intercepted without hooking into the input event again.

from angular-credit-cards.