fix(console): error message in text input component (#1060)

packages/console/src/components/TextInput/index.tsx

@@ -14,22 +14,21 @@ const TextInput = (
   reference: ForwardedRef<HTMLInputElement>
 ) => {
   return (
-    <>
+    <div className={className}>
       <div
         className={classNames(
           styles.container,
           hasError && styles.error,
           icon && styles.withIcon,
           disabled && styles.disabled,
-          readOnly && styles.readOnly,
-          className
+          readOnly && styles.readOnly
         )}
       >
         {icon && <span className={styles.icon}>{icon}</span>}
         <input type="text" {...rest} ref={reference} disabled={disabled} readOnly={readOnly} />
       </div>
       {hasError && errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
-    </>
+    </div>
   );
 };
 

packages/console/src/pages/SignInExperience/components/BrandingForm.tsx

@@ -111,7 +111,7 @@ const BrandingForm = () => {
       <FormField isRequired={isSloganRequired} title="admin_console.sign_in_exp.branding.slogan">
         <TextInput
           {...register('branding.slogan', { required: isSloganRequired })}
-          hasError={Boolean(isSloganRequired && errors.branding?.slogan)}
+          hasError={Boolean(errors.branding?.slogan)}
         />
       </FormField>
     </>

packages/console/src/pages/SignInExperience/components/TermsForm.tsx

@@ -34,7 +34,7 @@ const TermsForm = () => {
       >
         <TextInput
           {...register('termsOfUse.contentUrl', { required: enabled })}
-          hasError={Boolean(enabled && errors.termsOfUse)}
+          hasError={Boolean(errors.termsOfUse)}
         />
       </FormField>
     </>