diff --git a/src/forms/fields/email-field/index.jsx b/src/forms/fields/email-field/index.jsx index 2a449ec3..16a51b9e 100644 --- a/src/forms/fields/email-field/index.jsx +++ b/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, diff --git a/src/forms/fields/email-field/index.test.jsx b/src/forms/fields/email-field/index.test.jsx index 8c7f93ca..7d507752 100644 --- a/src/forms/fields/email-field/index.test.jsx +++ b/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: 'a@gmail.com', name: 'email' } }); - - expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('email')); + expect(props.handleFocus).toHaveBeenCalledWith( + '', + 'email', + ); }); it('should clear email suggestions when close icon is clicked', () => { diff --git a/src/forms/fields/name-field/index.jsx b/src/forms/fields/name-field/index.jsx index 988b9991..c2c1cad9 100644 --- a/src/forms/fields/name-field/index.jsx +++ b/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; diff --git a/src/forms/fields/name-field/index.test.jsx b/src/forms/fields/name-field/index.test.jsx index cd1c33ae..d68a46bf 100644 --- a/src/forms/fields/name-field/index.test.jsx +++ b/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', + ); }); }); }); diff --git a/src/forms/fields/password-field/index.jsx b/src/forms/fields/password-field/index.jsx index 1bc9734e..6d624a4f 100644 --- a/src/forms/fields/password-field/index.jsx +++ b/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); }; diff --git a/src/forms/registration-popup/index.jsx b/src/forms/registration-popup/index.jsx index 5256983d..da159eb4 100644 --- a/src/forms/registration-popup/index.jsx +++ b/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 && ( { errorMessage={errors.password} handleChange={handleOnChange} handleErrorChange={handleErrorChange} - handleFocus={() => { }} + handleFocus={handleOnFocus} floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)} /> )}