fix: backend error clear on focus

src/forms/fields/email-field/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import messages from './messages';
 import validateEmail from './validator';
 import { useDispatch, useSelector } from '../../../data/storeHooks';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../registration-popup/data/reducers';
+import { fetchRealtimeValidations } from '../../registration-popup/data/reducers';
 import getValidationMessage from '../../reset-password-popup/forgot-password/data/utils';
 
 import './index.scss';
@@ -25,6 +25,7 @@ const EmailField = forwardRef((props, ref) => {
     floatingLabel,
     errorMessage = '',
     handleErrorChange = () => {},
+    handleFocus = () => {},
     validateEmailFromBackend = true,
   } = props;
 
@@ -52,7 +53,7 @@ const EmailField = forwardRef((props, ref) => {
 
   const handleOnFocus = () => {
     handleErrorChange('email', '');
-    dispatch(clearRegistrationBackendError('email'));
+    handleFocus('', 'email');
   };
 
   const handleSuggestionClick = (event) => {
@@ -134,6 +135,7 @@ EmailField.propTypes = {
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleErrorChange: PropTypes.func,
+  handleFocus: PropTypes.func,
   floatingLabel: PropTypes.string.isRequired,
   errorMessage: PropTypes.string,
   isRegistration: PropTypes.bool,

src/forms/fields/email-field/index.test.jsx

@@ -7,7 +7,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 
 import { OnboardingComponentContext } from '../../../data/storeHooks';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../registration-popup/data/reducers';
+import { fetchRealtimeValidations } from '../../registration-popup/data/reducers';
 import getValidationMessage from '../../reset-password-popup/forgot-password/data/utils';
 import { EmailField } from '../index';
 
@@ -67,6 +67,7 @@ describe('EmailField', () => {
       handleChange: jest.fn(),
       floatingLabel: '',
       handleErrorChange: jest.fn(),
+      handleFocus: jest.fn(),
       confirmEmailValue: '',
     };
     window.location = { search: '' };
@@ -200,8 +201,10 @@ describe('EmailField', () => {
 
       const emailInput = container.querySelector('input#email');
       fireEvent.focus(emailInput, { target: { value: '[email protected]', name: 'email' } });
-
-      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('email'));
+      expect(props.handleFocus).toHaveBeenCalledWith(
+        '',
+        'email',
+      );
     });
 
     it('should clear email suggestions when close icon is clicked', () => {

src/forms/fields/name-field/index.jsx

@@ -4,8 +4,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
 import validateName from './validator';
-import { useDispatch } from '../../../data/storeHooks';
-import { clearRegistrationBackendError } from '../../registration-popup/data/reducers';
 import TextField from '../text-field';
 
 /**
@@ -20,11 +18,11 @@ import TextField from '../text-field';
  */
 const NameField = (props) => {
   const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
 
   const {
     handleErrorChange,
     errorMessage = '',
+    handleFocus,
   } = props;
 
   const handleOnBlur = (e) => {
@@ -38,7 +36,7 @@ const NameField = (props) => {
 
   const handleOnFocus = () => {
     handleErrorChange('name', '');
-    dispatch(clearRegistrationBackendError('name'));
+    handleFocus('', 'name');
   };
 
   return (
@@ -56,6 +54,7 @@ NameField.propTypes = {
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleErrorChange: PropTypes.func.isRequired,
+  handleFocus: PropTypes.func.isRequired,
 };
 
 export default NameField;

src/forms/fields/name-field/index.test.jsx

@@ -6,7 +6,6 @@ import { fireEvent, render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 
 import { OnboardingComponentContext } from '../../../data/storeHooks';
-import { clearRegistrationBackendError } from '../../registration-popup/data/reducers';
 import { NameField } from '../index';
 
 const IntlNameField = injectIntl(NameField);
@@ -34,6 +33,7 @@ describe('NameField', () => {
       errorMessage: '',
       handleChange: jest.fn(),
       handleErrorChange: jest.fn(),
+      handleFocus: jest.fn(),
       floatingLabel: '',
       label: '',
     };
@@ -105,7 +105,10 @@ describe('NameField', () => {
 
       fireEvent.focus(nameInput, { target: { value: 'test', name: 'name' } });
 
-      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('name'));
+      expect(props.handleFocus).toHaveBeenCalledWith(
+        '',
+        'name',
+      );
     });
   });
 });

src/forms/fields/password-field/index.jsx

@@ -13,7 +13,7 @@ import messages from './messages';
 import validatePasswordField from './validator';
 import { useDispatch, useSelector } from '../../../data/storeHooks';
 import { LETTER_REGEX, NUMBER_REGEX } from '../../registration-popup/data/constants';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../registration-popup/data/reducers';
+import { fetchRealtimeValidations } from '../../registration-popup/data/reducers';
 import './index.scss';
 
 /**
@@ -91,11 +91,10 @@ const PasswordField = forwardRef((props, ref) => {
     }
 
     if (props.handleFocus) {
-      props.handleFocus(e);
+      props.handleFocus(e, 'password');
     }
     if (handleErrorChange) {
       handleErrorChange('password', '');
-      dispatch(clearRegistrationBackendError('password'));
     }
     setShowPasswordRequirements(showPasswordTooltip && true);
   };

src/forms/registration-popup/index.jsx

@@ -233,6 +233,12 @@ const RegistrationForm = () => {
     }));
   };
 
+  const handleOnFocus = (e, name) => {
+    if (registrationError[name]) {
+      dispatch(clearRegistrationBackendError(name));
+    }
+  };
+
   const handleUserRegistration = () => {
     const totalRegistrationTime = (Date.now() - formStartTime) / 1000;
     const userCountryCode = getCountryCookieValue();
@@ -360,6 +366,7 @@ const RegistrationForm = () => {
                 errorMessage={errors.email}
                 handleChange={handleOnChange}
                 handleErrorChange={handleErrorChange}
+                handleFocus={handleOnFocus}
                 floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)}
                 ref={emailRef}
               />
@@ -370,7 +377,7 @@ const RegistrationForm = () => {
                 errorMessage={errors.name}
                 handleChange={handleOnChange}
                 handleErrorChange={handleErrorChange}
-                handleFocus={() => { }}
+                handleFocus={handleOnFocus}
               />
               {!currentProvider && (
                 <PasswordField
@@ -379,7 +386,7 @@ const RegistrationForm = () => {
                   errorMessage={errors.password}
                   handleChange={handleOnChange}
                   handleErrorChange={handleErrorChange}
-                  handleFocus={() => { }}
+                  handleFocus={handleOnFocus}
                   floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)}
                 />
               )}