Make errors on fields appear on blur (#2322)

Co-authored-by: Montse Ortega <[email protected]>
openshift-assisted · Oct 3, 2023 · 3617b1c · 3617b1c
1 parent 42b9177
commit 3617b1c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/libs/ui-lib/lib/common/components/ui/formik/InputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/InputField.tsx
@@ -29,23 +29,22 @@ const InputField: React.FC<
       idPostfix,
       children,
       noDefaultOnChange,
-      inputError,
       description,
       labelInfo,
       showErrorMessage = true,
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
   ) => {
-    const [field] = useField({
+    const [field, { error, touched }] = useField({
       name: props.name,
       validate,
     });
 
     const fieldId = getFieldId(props.name, 'input', idPostfix);
-    const errorMessage = useFieldErrorMsg({ name: props.name, inputError, validate });
+    const errorMessage = useFieldErrorMsg({ name: props.name, inputError: error, validate });
     const fieldHelperText = <HelperText fieldId={fieldId}>{helperText}</HelperText>;
-    const isValid = !errorMessage;
+    const isValid = !(touched && error);
 
     return (
       <Stack id={`form-control__${fieldId}`}>
@@ -88,7 +87,7 @@ const InputField: React.FC<
           </FormGroup>
         </StackItem>
         <StackItem>
-          {showErrorMessage && errorMessage && (
+          {showErrorMessage && !isValid && (
             <HelperText fieldId={fieldId} isError>
               {errorMessage}
             </HelperText>

diff --git a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
@@ -99,7 +99,8 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
       validate,
     });
     const fieldId = getFieldId(props.name, 'input', idPostfix);
-    const isValid = !touched || !error?.length;
+    const isValid = !(touched && error?.length);
+
     return (
       <FormGroup
         id={`form-control__${fieldId}`}
@@ -133,7 +134,10 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               onChange && onChange(event);
             }}
             className="rich-input__text"
-            onBlur={() => setPopoverOpen(false)}
+            onBlur={() => {
+              setTouched(true, false);
+              setPopoverOpen(false);
+            }}
           />
           <Popover
             isVisible={popoverOpen}