diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 505df9d8..5210f12d 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -244,6 +244,8 @@ class RegistrationPage extends React.Component { const state = { errors }; if (e.target.name === 'email') { state.skipEmailValidation = false; + } else if (e.target.name === 'username') { + this.props.clearUsernameSuggestions(); } this.setState({ ...state }); } diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index 5d7115f0..b8723dd9 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/src/register/tests/RegistrationPage.test.jsx @@ -10,7 +10,12 @@ import { getConfig, mergeConfig } from '@edx/frontend-platform'; import * as analytics from '@edx/frontend-platform/analytics'; import { IntlProvider, injectIntl, configure } from '@edx/frontend-platform/i18n'; -import { fetchRealtimeValidations, registerNewUser, resetRegistrationForm } from '../data/actions'; +import { + clearUsernameSuggestions, + fetchRealtimeValidations, + registerNewUser, + resetRegistrationForm, +} from '../data/actions'; import { FORBIDDEN_REQUEST, INTERNAL_SERVER_ERROR, TPA_SESSION_EXPIRED } from '../data/constants'; import RegistrationFailureMessage from '../RegistrationFailure'; import RegistrationPage from '../RegistrationPage'; @@ -293,7 +298,7 @@ describe('RegistrationPage', () => { expect(registrationPage.state('errorCode')).toEqual('duplicate-username'); }); - // ******** test clear error messages on focus in ******** + // ******** test field focus in functionality ******** it('should clear field related error messages on input field Focus', () => { const errors = { @@ -319,6 +324,15 @@ describe('RegistrationPage', () => { expect(registrationPage.find('RegistrationPage').state('errors')).toEqual(errors); }); + it('should clear username suggestions when username field is focused in', () => { + store.dispatch = jest.fn(store.dispatch); + + const registrationPage = mount(reduxWrapper()); + registrationPage.find('input#username').simulate('focus'); + + expect(store.dispatch).toHaveBeenCalledWith(clearUsernameSuggestions()); + }); + // ******** test alert messages ******** it('should match third party auth alert', () => {