Cluster name show validation message when typing characters

Author: ammont82

Diff for: libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx

@@ -87,12 +87,14 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
       validate,
       idPostfix,
       richValidationMessages,
+      noDefaultOnChange,
+      onChange,
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
   ) => {
     const [popoverOpen, setPopoverOpen] = React.useState(false);
-    const [field, { error, value, touched }] = useField<string>({
+    const [field, { error, value, touched }, { setTouched }] = useField<string>({
       name: props.name,
       validate,
     });
@@ -118,6 +120,15 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               id={fieldId}
               isRequired={isRequired}
               aria-describedby={`${fieldId}-helper`}
+              onChange={(event) => {
+                !noDefaultOnChange && field.onChange(event);
+                setTouched(true, false);
+                onChange && onChange(event);
+                if (!popoverOpen) setPopoverOpen(true);
+              }}
+              onBlur={() => {
+                setPopoverOpen(false);
+              }}
               className="rich-input__text"
             />
           </InputGroupItem>
@@ -135,6 +146,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   richValidationMessages={richValidationMessages as Record<string, string>}
                 />
               }
+              withFocusTrap={false}
             >
               <Button variant="plain" aria-label="Validation">
                 {!isValid ? (