From fae753d135935b6bc5b0a8f7c33c1d5e0c4b6942 Mon Sep 17 00:00:00 2001
From: Montse Ortega <mortegag@redhat.com>
Date: Wed, 6 Mar 2024 11:40:13 +0100
Subject: [PATCH] Cluster name show validation message when typing characters

---
 .../common/components/ui/formik/RichInputField.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

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..0fddac6ab9 100644
--- a/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
+++ b/libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx
@@ -5,7 +5,7 @@ import {
   FormGroup,
   HelperTextItem,
   TextInput,
-  HelperText as PFHelperText,
+  HelperText,
   HelperTextItemProps,
   Popover,
   PopoverPosition,
@@ -13,7 +13,6 @@ import {
   Button,
   InputGroupItem,
   FormHelperText,
-  HelperText,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
@@ -58,7 +57,7 @@ export const RichValidation: React.FC<RichValidationProps> = ({
   richValidationMessages,
 }) => {
   return (
-    <PFHelperText component="ul" className="rich-input__rules">
+    <HelperText component="ul" className="rich-input__rules">
       {Object.keys(richValidationMessages).map((key) => {
         const variant = getHelperTextVariant(richValidationMessages[key], value, error);
         return (
@@ -67,7 +66,7 @@ export const RichValidation: React.FC<RichValidationProps> = ({
           </HelperTextItem>
         );
       })}
-    </PFHelperText>
+    </HelperText>
   );
 };
 
@@ -99,6 +98,12 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
     const fieldId = getFieldId(props.name, 'input', idPostfix);
     const isValid = !(touched && error?.length);
 
+    React.useEffect(() => {
+      if (value !== '') {
+        setPopoverOpen(true);
+      }
+    }, [value]);
+
     return (
       <FormGroup
         id={`form-control__${fieldId}`}
@@ -128,6 +133,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
               shouldOpen={() => setPopoverOpen(true)}
               aria-label="validation popover"
               position={PopoverPosition.top}
+              withFocusTrap={false}
               bodyContent={
                 <RichValidation
                   value={value}