From 40ae28e9304fe9ddd5e115676f14430f08ee3f91 Mon Sep 17 00:00:00 2001
From: Stefan Butz <mail@butz.st>
Date: Fri, 22 Dec 2023 10:12:21 +0700
Subject: [PATCH] No error message on form field without input

---
 client/src/components/FormField.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/FormField.tsx b/client/src/components/FormField.tsx
index 949ab18..ca5aa08 100644
--- 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':