From 0c0ef14cd149e1e4bf325881a11cf657d4d82422 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Thu, 7 Mar 2024 11:37:41 +0100
Subject: [PATCH] Cluster name show validation message when typing characters

---
 .../common/components/ui/formik/RichInputField.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
index 109e444f6b..078c93c1df 100644
--- a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
+++ b/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,16 @@ 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={(event: React.FocusEvent<HTMLInputElement>) => {
+                setTouched(true, false);
+                event.target.focus();
+              }}
               className="rich-input__text"
             />
           </InputGroupItem>