From 93916bfa5426f399b4cb8ceaca6bdfce5869c13e Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Tue, 7 Jun 2022 12:26:22 +0800
Subject: [PATCH] fix(console): error message in text input component (#1060)

---
 packages/console/src/components/TextInput/index.tsx        | 7 +++----
 .../src/pages/SignInExperience/components/BrandingForm.tsx | 2 +-
 .../src/pages/SignInExperience/components/TermsForm.tsx    | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/console/src/components/TextInput/index.tsx b/packages/console/src/components/TextInput/index.tsx
index 5d09b15b0..844dc802e 100644
--- a/packages/console/src/components/TextInput/index.tsx
+++ b/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>
   );
 };
 
diff --git a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
index 5f7cbe2b7..45736cf0b 100644
--- a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
+++ b/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>
     </>
diff --git a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
index 64ec56235..a08713b53 100644
--- a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
+++ b/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>
     </>