fix: Fix input cursor jumping to wrong position on ELO type

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Raí Siqueira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-payment-inputs",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A zero-dependency React Hook & Container to help with payment card input fields.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,7 +13,7 @@
     "images"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "build": "yarn clean && yarn create-proxies && rollup -c",
     "create-proxies": "node scripts/create-proxies.js",
     "remove-proxies": "node scripts/remove-proxies.js",
     "clean": "rimraf es/ lib/ umd/ && yarn remove-proxies",
@@ -69,4 +69,4 @@
   "keywords": [
     "react-component"
   ]
-}
+}

src/usePaymentInputs.js

@@ -107,9 +107,7 @@ export default function usePaymentCard({
         // the input field. Here, we want to reposition the cursor to the correct place.
         requestAnimationFrame(() => {
           if (document.activeElement !== cardNumberField.current) return;
-          if (cardNumberField.current.value[cursorPosition - 1] === ' ') {
-            cursorPosition = cursorPosition + 1;
-          }
+          cursorPosition = cursorPosition + 1;
           cardNumberField.current.setSelectionRange(cursorPosition, cursorPosition);
         });
 
@@ -126,7 +124,7 @@ export default function usePaymentCard({
 
   const handleFocusCardNumber = React.useCallback((props = {}) => {
     return e => {
-      props.onFocus && props.onFocus();
+      props.onFocus && props.onFocus(e);
       setFocused('cardNumber');
     };
   }, []);
@@ -205,7 +203,7 @@ export default function usePaymentCard({
 
   const handleFocusExpiryDate = React.useCallback((props = {}) => {
     return e => {
-      props.onFocus && props.onFocus();
+      props.onFocus && props.onFocus(e);
       setFocused('expiryDate');
     };
   }, []);
@@ -303,7 +301,7 @@ export default function usePaymentCard({
 
   const handleFocusCVC = React.useCallback((props = {}) => {
     return e => {
-      props.onFocus && props.onFocus();
+      props.onFocus && props.onFocus(e);
       setFocused('cvc');
     };
   }, []);
@@ -395,7 +393,7 @@ export default function usePaymentCard({
 
   const handleFocusZIP = React.useCallback((props = {}) => {
     return e => {
-      props.onFocus && props.onFocus();
+      props.onFocus && props.onFocus(e);
       setFocused('zip');
     };
   }, []);