fix: password validation with correct password value on icon blur (#1054)

Author: syedsajjadkazmii

src/common-components/PasswordField.jsx

@@ -24,18 +24,33 @@ const PasswordField = (props) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   const handleBlur = (e) => {
-    if (e.target?.name === 'password' && e.relatedTarget?.name === 'passwordIcon') {
-      return; // Do not validations on password icon click
+    const { name, value } = e.target;
+    if (name === props.name && e.relatedTarget?.name === 'passwordIcon') {
+      return; // Do not run validations on password icon click
+    }
+
+    let passwordValue = value;
+    if (name === 'passwordIcon') {
+      // To validate actual password value when onBlur is triggered by focusing out the password icon
+      passwordValue = props.value;
+    }
+
+    if (props.handleBlur) {
+      props.handleBlur({
+        target: {
+          name: props.name,
+          value: passwordValue,
+        },
+      });
     }
 
-    if (props.handleBlur) { props.handleBlur(e); }
     setShowTooltip(props.showRequirements && false);
     if (props.handleErrorChange) { // If rendering from register page
-      const fieldError = validatePasswordField(e.target.value, formatMessage);
+      const fieldError = validatePasswordField(passwordValue, formatMessage);
       if (fieldError) {
         props.handleErrorChange('password', fieldError);
       } else if (!validationApiRateLimited) {
-        dispatch(fetchRealtimeValidations({ password: e.target.value }));
+        dispatch(fetchRealtimeValidations({ password: passwordValue }));
       }
     }
   };

src/common-components/tests/FormField.test.jsx

@@ -147,7 +147,7 @@ describe('PasswordField', () => {
     expect(props.handleBlur).toHaveBeenCalledTimes(1);
   });
 
-  it('should run validations when blur event when rendered from register page', () => {
+  it('should run validations on blur event when rendered from register page', () => {
     props = {
       ...props,
       handleErrorChange: jest.fn(),
@@ -225,4 +225,30 @@ describe('PasswordField', () => {
 
     expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ password: 'password123' }));
   });
+
+  it('should use password value from prop when password icon is focused out (blur due to icon)', () => {
+    store.dispatch = jest.fn(store.dispatch);
+    props = {
+      ...props,
+      value: 'testPassword',
+      handleErrorChange: jest.fn(),
+      handleBlur: jest.fn(),
+    };
+    const passwordField = mount(reduxWrapper(<IntlPasswordField {...props} />));
+
+    passwordField.find('button[aria-label="Show password"]').simulate('blur', {
+      target: {
+        name: 'passwordIcon',
+        value: undefined,
+      },
+    });
+
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      target: {
+        name: 'password',
+        value: 'testPassword',
+      },
+    });
+  });
 });

src/reset-password/ResetPasswordPage.jsx

@@ -91,20 +91,7 @@ const ResetPasswordPage = (props) => {
   };
 
   const handleOnBlur = (event) => {
-    let { name, value } = event.target;
-
-    // Do not validate when focus out from 'newPassword' and focus on 'passwordValidation' icon
-    // for better user experience.
-    if (event.relatedTarget
-      && event.relatedTarget.name === 'password'
-      && name === 'newPassword'
-    ) {
-      return;
-    }
-    if (name === 'password') {
-      name = 'newPassword';
-      value = newPassword;
-    }
+    const { name, value } = event.target;
     validateInput(name, value);
   };
 

src/reset-password/tests/ResetPasswordPage.test.jsx

@@ -184,23 +184,7 @@ describe('ResetPasswordPage', () => {
     resetPasswordPage.find('input#newPassword').simulate('blur', { target: { value: 'aziz156', name: 'newPassword' } });
     expect(resetPasswordPage.find('div[feedback-for="newPassword"]').text()).toEqual(expectedText);
   });
-  it('should not call validation when typing and click on show icon button', async () => {
-    const resetPasswordPage = mount(reduxWrapper(<IntlResetPasswordPage {...props} />));
-    await act(async () => {
-      await resetPasswordPage.find('input#newPassword').simulate('change', { target: { value: 'aziz156@', name: 'newPassword' } });
-      await resetPasswordPage.find('button[aria-label="Show password"]').at(0).simulate('click');
-      await resetPasswordPage.find('button[aria-label="Hide password"]').at(0).simulate('blur');
-    });
 
-    expect(resetPasswordPage.find('div[feedback-for="newPassword"]').exists()).toBe(false);
-  });
-  it('should call validation click on show icon button and then focus out', () => {
-    const resetPasswordPage = mount(reduxWrapper(<IntlResetPasswordPage {...props} />));
-    resetPasswordPage.find('input#newPassword').simulate('focus', { target: { value: 'aziz156@', name: 'newPassword' } });
-    resetPasswordPage.find('input#newPassword').simulate('blur', { relatedTarget: { name: 'password' } });
-    resetPasswordPage.find('button[aria-label="Show password"]').at(0).simulate('click');
-    expect(resetPasswordPage.find('div[feedback-for="newPassword"]').exists()).toBe(false);
-  });
   it('show spinner when api call is pending', () => {
     store.dispatch = jest.fn(store.dispatch);
     props = {