Cluster name show validation message when typing characters

libs/ui-lib/lib/common/components/ui/formik/RichInputField.tsx

@@ -5,15 +5,14 @@ import {
   FormGroup,
   HelperTextItem,
   TextInput,
-  HelperText as PFHelperText,
+  HelperText,
   HelperTextItemProps,
   Popover,
   PopoverPosition,
   InputGroup,
   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}