Fix handling only number in genereate mutliple modal

saleor · Oct 12, 2023 · daf9a3d · daf9a3d
1 parent bdd04e8
commit daf9a3d
Showing 1 changed file with 8 additions and 18 deletions.
diff --git a/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx b/src/discounts/components/VoucherCodesGenerateDialog/VoucherCodesGenerateDialog.tsx
@@ -24,6 +24,7 @@ const initialData: GenerateMultipleVoucherCodeFormData = {
 };
 
 const MAX_VOUCHER_CODES = 50;
+const numberRegexp = /\d+/;
 
 export const VoucherCodesGenerateDialog = ({
   open,
@@ -33,26 +34,15 @@ export const VoucherCodesGenerateDialog = ({
   const intl = useIntl();
   const { change, submit, data, reset } = useForm(initialData, onSubmit);
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (
-      /\D/.test(e.key) &&
-      ![
-        "Backspace",
-        "ArrowDown",
-        "ArrowUp",
-        "ArrowLeft",
-        "ArrowRight",
-        "Tab",
-      ].includes(e.key)
-    ) {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.currentTarget.value;
+
+    if (!numberRegexp.test(value) && value !== "") {
       e.preventDefault();
+      return;
     }
-  };
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.currentTarget.value);
 
-    if (Number.isNaN(value) || value > MAX_VOUCHER_CODES) {
+    if (Number(value) > MAX_VOUCHER_CODES) {
       e.preventDefault();
       return;
     }
@@ -86,7 +76,7 @@ export const VoucherCodesGenerateDialog = ({
             label={intl.formatMessage(messages.codeQuantity, {
               maxCodes: MAX_VOUCHER_CODES,
             })}
-            onKeyDown={handleKeyDown}
+            // onKeyDown={handleKeyDown}
             value={data.quantity}
             onChange={handleChange}
           />