Change TextInput to not initially show errors on an empty form

City-of-Helsinki · Jul 26, 2024 · 8a189f4 · 8a189f4
1 parent 1f30db4
commit 8a189f4
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/frontend/src/common/components/forms/TextInput.tsx b/frontend/src/common/components/forms/TextInput.tsx
@@ -9,10 +9,13 @@ const TextInput = ({name, label = "", required, invalid, ...rest}: FormInputProp
 
     const {
         register,
-        formState: {errors},
+        formState: {errors, dirtyFields},
     } = formObject;
     const formText = register(name, {required: required});
-    const fieldError = dotted(errors, formText.name);
+    const isFieldDirty = dirtyFields[name] ?? false;
+    const hasValue = formObject.getValues(formText.name) !== "";
+    const shouldShowError = isFieldDirty || hasValue;
+    const fieldError = shouldShowError ? dotted(errors, formText.name) : undefined;
 
     return (
         <div className={`input-field input-field--text ${required ? "input-field--required" : ""}`}>