fix(password): Always display helper panel once a value is typed

Stop relying on focus state
getlago · Oct 13, 2022 · 6f9c821 · 6f9c821
1 parent b007908
commit 6f9c821
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/pages/Invitation.tsx b/src/pages/Invitation.tsx
@@ -81,7 +81,6 @@ const Invitation = () => {
   const [formFields, setFormFields] = useState<Fields>({
     password: '',
   })
-  const [isPswFocused, setIsPswFocused] = useState(false)
   const [errors, setErrors] = useState<FORM_ERRORS[]>([])
   const validationSchema = useMemo(
     () =>
@@ -178,14 +177,14 @@ const Invitation = () => {
                   onChange={(value) => setFormFields((prev) => ({ ...prev, password: value }))}
                   label={translate('text_63246f875e2228ab7b63dce9')}
                   placeholder={translate('text_63246f875e2228ab7b63dcf0')}
-                  onFocus={() => setIsPswFocused(true)}
-                  onBlur={() => setIsPswFocused(false)}
                 />
                 <PasswordValidation
                   data-test={
-                    isPswFocused ? 'password-validation--visible' : 'password-validation--hidden'
+                    !!formFields.password
+                      ? 'password-validation--visible'
+                      : 'password-validation--hidden'
                   }
-                  $visible={isPswFocused}
+                  $visible={!!formFields.password}
                 >
                   {errors.some((err) => PASSWORD_VALIDATION.includes(err)) ? (
                     PASSWORD_VALIDATION.map((err) => {

diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
@@ -67,7 +67,6 @@ const SignUp = () => {
     password: '',
     organizationName: '',
   })
-  const [isPswFocused, setIsPswFocused] = useState(false)
   const [errors, setErrors] = useState<FORM_ERRORS[]>([])
   const validationSchema = useMemo(
     () =>
@@ -151,14 +150,14 @@ const SignUp = () => {
               onChange={(value) => setFormFields((prev) => ({ ...prev, password: value }))}
               label={translate('text_620bc4d4269a55014d493f53')}
               placeholder={translate('text_620bc4d4269a55014d493f5b')}
-              onFocus={() => setIsPswFocused(true)}
-              onBlur={() => setIsPswFocused(false)}
             />
             <PasswordValidation
               data-test={
-                isPswFocused ? 'password-validation--visible' : 'password-validation--hidden'
+                !!formFields.password
+                  ? 'password-validation--visible'
+                  : 'password-validation--hidden'
               }
-              $visible={isPswFocused}
+              $visible={!!formFields.password}
             >
               {errors.some((err) => PASSWORD_VALIDATION.includes(err)) ? (
                 PASSWORD_VALIDATION.map((err) => {