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,18 @@ 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);
+                // eslint-disable-next-line no-console
+                console.log(popoverOpen);
+                if (!popoverOpen) setPopoverOpen(true);
+              }}
+              onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
+                setTouched(true, false);
+                event.target.focus();
+              }}
               className="rich-input__text"
             />
           </InputGroupItem>