Cluster name show validation message when typing characters

Author: ammont82

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

@@ -87,6 +87,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
       validate,
       idPostfix,
       richValidationMessages,
+      noDefaultOnChange,
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -119,6 +120,10 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               isRequired={isRequired}
               aria-describedby={`${fieldId}-helper`}
               className="rich-input__text"
+              onChange={(event) => {
+                if (!popoverOpen) setPopoverOpen(true);
+                !noDefaultOnChange && field.onChange(event);
+              }}
             />
           </InputGroupItem>
           <InputGroupItem>

Diff for: libs/ui-lib/lib/common/components/ui/formik/types.ts

@@ -67,7 +67,7 @@ export interface InputFieldProps extends FieldProps {
   type?: TextInputTypes;
   placeholder?: string;
   noDefaultOnChange?: boolean;
-  onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string) => void;
   onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
   validate?: FieldValidator;
   showErrorMessage?: boolean;