Skip to content

Commit

Permalink
fix: change min/max rent inputs from number to text with only numbers (
Browse files Browse the repository at this point in the history
  • Loading branch information
KrissDrawing authored and ludtkemorgan committed Mar 23, 2023
1 parent 33b33c3 commit c01be41
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 15 deletions.
21 changes: 11 additions & 10 deletions detroit-ui-components/src/forms/Field.tsx
Original file line number Diff line number Diff line change
@@ -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"

Expand Down Expand Up @@ -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(() => {
Expand Down
19 changes: 16 additions & 3 deletions sites/public/src/components/filters/FilterForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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")

Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down
6 changes: 5 additions & 1 deletion sites/public/src/components/finder/FinderRentalCosts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand All @@ -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={
Expand Down
4 changes: 3 additions & 1 deletion sites/public/src/pages/finder.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -324,6 +324,8 @@ const Finder = () => {
trigger={trigger}
minRent={minRent}
maxRent={maxRent}
setValue={setValue}
getValues={getValues}
/>
)}
</>
Expand Down

0 comments on commit c01be41

Please sign in to comment.