medipass / react-payment-inputs

A React Hook & Container to help with payment card input fields.
https://medipass.github.io/react-payment-inputs
342 stars 62 forks source link

fixed deprecated keyCode to supported e.key #40

Closed Hopp3r closed 4 years ago

Hopp3r commented 4 years ago

Use of event.keyCode returned 0 on all keys, non-numeric and numeric, and backspace returned 8. This caused code to be unreachable in several blocks. For example in handleKeyPressCVC the following code:

if (e.keyCode !== utils.ENTER_KEY_CODE) {
        if (!utils.validator.isNumeric(e)) {
          e.preventDefault();
        }
        if (cardType && cvc.length >= cardType.code.length) {
          e.preventDefault();
        }
        if (cvc.length >= 4) {
          e.preventDefault();
        }
    }

was only reachable when e.keyCode did not equal 0 (i.e on a backspace).

I fixed this by switching to using the supported key (as keyCode has been deprecated and had issues in Firefox) https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

This has fixed a variety of issues such as the ones mentioned by me in #39 , and others in #37 #20