No error message on form field without input (#54)

sbutz · Dec 22, 2023 · 5f4121e · 5f4121e
2 parents 35399e7 + 40ae28e
commit 5f4121e
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/client/src/components/FormField.tsx b/client/src/components/FormField.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import dayjs from 'dayjs';
 import {
   Box, FormControl, InputLabel, MenuItem, Select, TextField,
@@ -22,7 +22,13 @@ interface FormFieldProps {
 function FormFieldBuilder({
   label, type = 'text', value, options = [], onChange = undefined, validators = [], disabled = false,
 }: FormFieldProps) {
-  const errorMsg = firstErrorMessage(value, validators || []);
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (value.length > 0) {
+      setTouched(true);
+    }
+  }, [value]);
+  const errorMsg = touched ? firstErrorMessage(value, validators || []) : null;
   let field;
   switch (type) {
     case 'select':