feat: allow only numbers when typing in the Date field (#157)

* feat: allow only numbers for typing in the Date field, improve validation

* chore: remove spurious console log

src/forms/DateField.stories.tsx

@@ -8,17 +8,26 @@ export default {
 }
 
 export const Default = () => {
-  const { register, watch, errors } = useForm({ mode: "onChange" })
+  const { register, watch, errors, setValue, handleSubmit } = useForm()
+
+  const onSubmit = (data: any) => {}
 
   return (
-    <DateField
-      id="appDueDate"
-      name="appDueDate"
-      label="Application Due Date"
-      required={true}
-      register={register}
-      watch={watch}
-      error={errors?.appDueDate}
-    />
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <DateField
+        id="appDueDate"
+        name="appDueDate"
+        label="Application Due Date"
+        register={register}
+        required={true}
+        setValue={setValue}
+        watch={watch}
+        error={errors?.appDueDate}
+      />
+      <br />
+      <button type="submit" className="button">
+        Submit
+      </button>
+    </form>
   )
 }

src/forms/DateField.tsx

@@ -23,6 +23,7 @@ export interface DateFieldProps {
   readerOnly?: boolean
   register: UseFormMethods["register"]
   required?: boolean
+  setValue?: UseFormMethods["setValue"]
   watch: UseFormMethods["watch"]
   dataTestId?: string
   strings?: {
@@ -36,6 +37,10 @@ export interface DateFieldProps {
   }
 }
 
+export const maskNumber = (value: string) => {
+  return value.match(/\d+/g)?.join("")
+}
+
 const DateField = (props: DateFieldProps) => {
   const { defaultDate, error, register, name, id, errorMessage } = props
 
@@ -70,6 +75,11 @@ const DateField = (props: DateFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          onChange={(e) => {
+            if (!props.setValue) return
+
+            props.setValue(getFieldName("month"), maskNumber(e.target.value))
+          }}
           dataTestId={props.dataTestId ? `${props.dataTestId}-month` : undefined}
         />
         <Field
@@ -91,6 +101,11 @@ const DateField = (props: DateFieldProps) => {
           }}
           inputProps={{ maxLength: 2 }}
           register={register}
+          onChange={(e) => {
+            if (!props.setValue) return
+
+            props.setValue(getFieldName("day"), maskNumber(e.target.value))
+          }}
           dataTestId={props.dataTestId ? `${props.dataTestId}-day` : undefined}
         />
         <Field
@@ -105,23 +120,29 @@ const DateField = (props: DateFieldProps) => {
             required: props.required,
             validate: {
               yearRange: (value: string) => {
-                if (props.required && value && parseInt(value) < 1900) return false
-                if (props.required && value && parseInt(value) > dayjs().year() + 10) return false
                 if (!props.required && !value?.length) return true
-                return true
+
+                const numVal = parseInt(value)
+                if (isNaN(numVal)) return false
+                return !(numVal < 1900 || numVal > dayjs().year() + 10)
               },
             },
           }}
           inputProps={{ maxLength: 4 }}
           register={register}
+          onChange={(e) => {
+            if (!props.setValue) return
+
+            props.setValue(getFieldName("year"), maskNumber(e.target.value))
+          }}
           dataTestId={props.dataTestId ? `${props.dataTestId}-year` : undefined}
         />
       </div>
       {props.note && <p className="field-note mb-2 mt-4">{props.note}</p>}
 
       {(error?.month || error?.day || error?.year) && (
         <div className="field error">
-          <span id={`${id}-error`} className="error-message">
+          <span id={`${id || "date-field"}-error`} className="error-message">
             {errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateError")}
           </span>
         </div>