From 0662c7e34d5ecd5d0dbb994c968274e36911882f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Zi=C4=99cina?= <kriss.kontakt@gmail.com>
Date: Thu, 23 Mar 2023 20:43:35 +0100
Subject: [PATCH] fix: change min/max rent inputs from number to text with only
 numbers (#1599)

---
 detroit-ui-components/src/forms/Field.tsx     | 21 ++++++++++---------
 .../src/components/filters/FilterForm.tsx     | 19 ++++++++++++++---
 .../components/finder/FinderRentalCosts.tsx   |  6 +++++-
 sites/public/src/pages/finder.tsx             |  4 +++-
 4 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/detroit-ui-components/src/forms/Field.tsx b/detroit-ui-components/src/forms/Field.tsx
index d8c7991841..62a2a47fcb 100644
--- a/detroit-ui-components/src/forms/Field.tsx
+++ b/detroit-ui-components/src/forms/Field.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react"
+import React, { ChangeEvent, useMemo } from "react"
 import { ErrorMessage } from "@bloom-housing/ui-components"
 import { UseFormMethods, RegisterOptions } from "react-hook-form"
 
@@ -59,20 +59,21 @@ const Field = (props: FieldProps) => {
   if (props.bordered && (props.type === "radio" || props.type === "checkbox"))
     controlClasses.push("field-border")
 
-  const formatValue = () => {
-    if (props.getValues && props.setValue) {
-      const currencyValue = props.getValues(props.name)
-      const numericIncome = parseFloat(currencyValue)
-      if (!isNaN(numericIncome)) {
-        props.setValue(props.name, numericIncome.toFixed(2))
-      }
+  const filterNumbers = (e: ChangeEvent<HTMLInputElement>) => {
+    if (props.setValue) {
+      props.setValue(props.name, e.target.value.replace(/[a-z]|[A-Z]/g, "").match(/^\d*\.?\d?\d?/g))
     }
   }
 
   let inputProps = { ...props.inputProps }
-  if (props.type === "currency") inputProps = { ...inputProps, step: 0.01, onBlur: formatValue }
+  if (props.type === "currency") {
+    inputProps = {
+      ...inputProps,
+      onChange: filterNumbers,
+    }
+  }
 
-  const type = (props.type === "currency" && "number") || props.type || "text"
+  const type = (props.type === "currency" && "text") || props.type || "text"
   const isRadioOrCheckbox = ["radio", "checkbox"].includes(type)
 
   const label = useMemo(() => {
diff --git a/sites/public/src/components/filters/FilterForm.tsx b/sites/public/src/components/filters/FilterForm.tsx
index 8917469173..021b7a26ae 100644
--- a/sites/public/src/components/filters/FilterForm.tsx
+++ b/sites/public/src/components/filters/FilterForm.tsx
@@ -118,7 +118,16 @@ const FilterForm = (props: FilterFormProps) => {
   // This is causing a linting issue with unbound-method, see issue:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, errors, register, reset, trigger, watch: formWatch } = useForm()
+  const {
+    handleSubmit,
+    errors,
+    register,
+    reset,
+    trigger,
+    watch: formWatch,
+    setValue,
+    getValues,
+  } = useForm()
   const minRent = formWatch("minRent")
   const maxRent = formWatch("maxRent")
 
@@ -247,10 +256,12 @@ const FilterForm = (props: FilterFormProps) => {
             <Field
               id={"minRent"}
               name={FrontendListingFilterStateKeys.minRent}
-              type="number"
+              type="currency"
               placeholder={t("publicFilter.rentRangeMin")}
               label={t("publicFilter.rentRangeMinReader")}
               register={register}
+              setValue={setValue}
+              getValues={getValues}
               prepend={"$"}
               defaultValue={localFilterState?.minRent}
               error={errors?.minRent !== undefined}
@@ -273,11 +284,13 @@ const FilterForm = (props: FilterFormProps) => {
           <GridCell span={1}>
             <Field
               id={"maxRent"}
-              type="number"
+              type="currency"
               name={FrontendListingFilterStateKeys.maxRent}
               placeholder={t("publicFilter.rentRangeMax")}
               label={t("publicFilter.rentRangeMaxReader")}
               register={register}
+              setValue={setValue}
+              getValues={getValues}
               prepend={"$"}
               defaultValue={localFilterState?.maxRent}
               error={errors?.maxRent !== undefined}
diff --git a/sites/public/src/components/finder/FinderRentalCosts.tsx b/sites/public/src/components/finder/FinderRentalCosts.tsx
index 61cfd32c87..15a06f45bd 100644
--- a/sites/public/src/components/finder/FinderRentalCosts.tsx
+++ b/sites/public/src/components/finder/FinderRentalCosts.tsx
@@ -12,6 +12,8 @@ const FinderRentalCosts = (props: {
   trigger: UseFormMethods["trigger"]
   minRent: number
   maxRent: number
+  getValues?: UseFormMethods["getValues"]
+  setValue?: UseFormMethods["setValue"]
 }) => {
   const dollarSign = useRouter().locale !== "ar"
   const numericFields = props.activeQuestion?.fields.filter((field) => field.type === "number")
@@ -26,11 +28,13 @@ const FinderRentalCosts = (props: {
             <Field
               id={field.label}
               name={FrontendListingFilterStateKeys[field.label]}
-              type="number"
+              type="currency"
               placeholder={t(`finder.rentalCosts.${isMin ? "min" : "max"}Placeholder`)}
               label={field.translation}
               ariaLabel={t(`publicFilter.rentRange${isMin ? "Min" : "Max"}Reader`)}
               register={props.register}
+              setValue={props.setValue}
+              getValues={props.getValues}
               prepend={dollarSign && "$"}
               defaultValue={typeof field?.value != "boolean" && field?.value}
               error={
diff --git a/sites/public/src/pages/finder.tsx b/sites/public/src/pages/finder.tsx
index adf22e8ab7..cdf449f008 100644
--- a/sites/public/src/pages/finder.tsx
+++ b/sites/public/src/pages/finder.tsx
@@ -81,7 +81,7 @@ const ProgressHeader = forwardRef(
 
 const Finder = () => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { register, handleSubmit, trigger, errors, watch } = useForm()
+  const { register, handleSubmit, trigger, errors, watch, setValue, getValues } = useForm()
   const [questionIndex, setQuestionIndex] = useState<number>(0)
   const [formData, setFormData] = useState<FinderQuestion[]>([])
   const [isDisclaimer, setIsDisclaimer] = useState<boolean>(false)
@@ -324,6 +324,8 @@ const Finder = () => {
                           trigger={trigger}
                           minRent={minRent}
                           maxRent={maxRent}
+                          setValue={setValue}
+                          getValues={getValues}
                         />
                       )}
                     </>