From 01ae18f9d0d3ca920300c621b3eaffe2ad785cbe Mon Sep 17 00:00:00 2001
From: Trevor Scandalios <5877597+scandycuz@users.noreply.github.com>
Date: Wed, 23 Oct 2024 10:45:15 -0700
Subject: [PATCH] ensures numeric input values stored in formik as numbers
 (#758)

---
 packages/elements/src/lib/NumericInput.tsx    | 41 ++-----------------
 .../elements/src/lib/form/TextInputField.tsx  | 40 ++++++++++++++----
 2 files changed, 35 insertions(+), 46 deletions(-)

diff --git a/packages/elements/src/lib/NumericInput.tsx b/packages/elements/src/lib/NumericInput.tsx
index 0e65713e5..24e6a4927 100644
--- a/packages/elements/src/lib/NumericInput.tsx
+++ b/packages/elements/src/lib/NumericInput.tsx
@@ -1,54 +1,21 @@
-import {
-  ChangeEvent,
-  ForwardRefRenderFunction,
-  InputHTMLAttributes,
-  forwardRef,
-} from "react";
-import { NumericFormat } from "react-number-format";
+import { ForwardRefRenderFunction, forwardRef } from "react";
+import { NumericFormat, NumericFormatProps } from "react-number-format";
 import StyledInput from "./styled/Input";
 
-interface NumericInputProps
-  extends Omit<
-    InputHTMLAttributes<HTMLInputElement>,
-    "value" | "defaultValue"
-  > {
-  readonly defaultValue: string | number | null | undefined;
-  readonly value: string | number | null | undefined;
-}
-
 /**
  * Replacement for an input component with a type of "number"
  * that handles formatting the displayed value.
  */
 export const NumericInput: ForwardRefRenderFunction<
   HTMLInputElement,
-  NumericInputProps
-> = ({ type, onChange, ...props }, ref) => {
-  /**
-   * Converts the event target's value to a number
-   * and calls the onChange prop.
-   */
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    if (onChange) {
-      const value = event.target.value;
-      const numberValue = value ? Number(value.replace(/,/g, "")) : null;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const newTarget = event.target as any;
-      newTarget.value = numberValue;
-      event.target = newTarget;
-
-      onChange(event);
-    }
-  };
-
+  NumericFormatProps
+> = ({ type, ...props }, ref) => {
   return (
     <NumericFormat
       { ...props }
       customInput={ StyledInput }
       getInputRef={ ref }
       thousandSeparator=","
-      onChange={ handleChange }
     />
   );
 };
diff --git a/packages/elements/src/lib/form/TextInputField.tsx b/packages/elements/src/lib/form/TextInputField.tsx
index c3a9bc9f0..3a9ccc43b 100644
--- a/packages/elements/src/lib/form/TextInputField.tsx
+++ b/packages/elements/src/lib/form/TextInputField.tsx
@@ -1,4 +1,4 @@
-import { ForwardRefRenderFunction, forwardRef } from "react";
+import { ChangeEvent, ForwardRefRenderFunction, forwardRef } from "react";
 import { Field, FieldProps } from "formik";
 import TextInput, { TextInputProps } from "../TextInput";
 
@@ -8,14 +8,36 @@ const TextInputField: ForwardRefRenderFunction<
 > = (props, ref) => {
   return (
     <Field name={ props.name }>
-      { ({ field, meta }: FieldProps) => (
-        <TextInput
-          errorMessage={ meta.touched ? meta.error : "" }
-          ref={ ref }
-          { ...field }
-          { ...props }
-        />
-      ) }
+      { ({ field, form, meta }: FieldProps) => {
+        const convertNumberStringToNumber = (value: string) => {
+          return !isNaN(parseFloat(value))
+            ? Number(value.replace(/,/g, ""))
+            : value;
+        };
+
+        /**
+         * Necessary for the "react-number-format" library's
+         * NumericInput component in order to store number input
+         * values as numbers instead of strings.
+         */
+        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+          const formattedValue = convertNumberStringToNumber(
+            event.target.value
+          );
+
+          form.setFieldValue(field.name, formattedValue);
+        };
+
+        return (
+          <TextInput
+            errorMessage={ meta.touched ? meta.error : "" }
+            ref={ ref }
+            { ...field }
+            { ...props }
+            onChange={ handleChange }
+          />
+        );
+      } }
     </Field>
   );
 };