diff --git a/src/register/CountryDropdown.jsx b/src/register/CountryDropdown.jsx
index 71049897..6b464c88 100644
--- a/src/register/CountryDropdown.jsx
+++ b/src/register/CountryDropdown.jsx
@@ -117,9 +117,14 @@ class CountryDropdown extends React.Component {
if (this.props.handleFocus) { this.props.handleFocus(e); }
}
- handleOnBlur(e, itemClicked = false) {
+ handleOnBlur(e, itemClicked = false, country = '') {
const { name } = e.target;
- const countryValue = itemClicked ? e.target.value : this.state.displayValue;
+ let countryValue = '';
+ if (country) {
+ countryValue = country;
+ } else {
+ countryValue = itemClicked ? e.target.value : this.state.displayValue;
+ }
// For a better user experience, do not validate when focus out from 'country' field
// and focus on 'countryItem' or 'countryExpand' button.
if (e.relatedTarget && e.relatedTarget.name === 'countryItem' && (name === 'country' || name === 'countryExpand')) {
@@ -134,8 +139,12 @@ class CountryDropdown extends React.Component {
}
handleItemClick(e) {
+ let countryValue = '';
+ if (!e.target.value) {
+ countryValue = e.target.parentElement.parentElement.value;
+ }
this.setState({ dropDownItems: '', icon: this.expandMoreButton() });
- this.handleOnBlur(e, true);
+ this.handleOnBlur(e, true, countryValue);
}
expandMoreButton() {
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index 25d2e7b4..d72fdd88 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -525,7 +525,8 @@ class RegistrationPage extends React.Component {
value = value.trim(); // eslint-disable-line no-param-reassign
if (value) {
const normalizedValue = value.toLowerCase();
- let selectedCountry = this.countryList.find((o) => o[COUNTRY_DISPLAY_KEY].toLowerCase() === normalizedValue);
+ let selectedCountry = (
+ this.countryList.find((o) => o[COUNTRY_DISPLAY_KEY].toLowerCase().trim() === normalizedValue));
if (selectedCountry) {
value = selectedCountry[COUNTRY_CODE_KEY]; // eslint-disable-line no-param-reassign
errors.country = '';
@@ -533,7 +534,8 @@ class RegistrationPage extends React.Component {
} else {
// Handling a case here where user enters a valid country code that needs to be
// evaluated and set its value as a valid value.
- selectedCountry = this.countryList.find((o) => o[COUNTRY_CODE_KEY].toLowerCase() === normalizedValue);
+ selectedCountry = (
+ this.countryList.find((o) => o[COUNTRY_CODE_KEY].toLowerCase().trim() === normalizedValue));
if (selectedCountry) {
value = selectedCountry[COUNTRY_CODE_KEY]; // eslint-disable-line no-param-reassign
errors.country = '';
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index 7fdd83e2..e95f969a 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -4,7 +4,9 @@ import { Provider } from 'react-redux';
import CookiePolicyBanner from '@edx/frontend-component-cookie-policy-banner';
import { getConfig, mergeConfig } from '@edx/frontend-platform';
import * as analytics from '@edx/frontend-platform/analytics';
-import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import {
+ configure, getLocale, injectIntl, IntlProvider,
+} from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import renderer from 'react-test-renderer';
@@ -25,6 +27,10 @@ import RegistrationFailureMessage from '../RegistrationFailure';
import RegistrationPage from '../RegistrationPage';
jest.mock('@edx/frontend-platform/analytics');
+jest.mock('@edx/frontend-platform/i18n', () => ({
+ ...jest.requireActual('@edx/frontend-platform/i18n'),
+ getLocale: jest.fn(),
+}));
analytics.sendTrackEvent = jest.fn();
analytics.sendPageEvent = jest.fn();
@@ -147,6 +153,7 @@ describe('RegistrationPage', () => {
// ******** test registration form submission ********
it('should submit form for valid input', () => {
+ getLocale.mockImplementation(() => ('en-us'));
jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
delete window.location;
@@ -1012,6 +1019,34 @@ describe('RegistrationPage', () => {
registerPage.find('RegistrationPage').instance().shouldComponentUpdate(nextProps);
expect(registerPage.find('RegistrationPage').state('country')).toEqual('PK');
});
+
+ it('should set country in component state on country change with translations', () => {
+ getLocale.mockImplementation(() => ('ar-ae'));
+ registrationFormData = {
+ errors: { ...registrationFormData.errors },
+ country: 'AF',
+ };
+ store.dispatch = jest.fn(store.dispatch);
+
+ const registerPage = mount(reduxWrapper());
+ registerPage.find('input#country').simulate('focus');
+ registerPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: 'أفغانستان ', name: 'countryItem' } });
+ expect(store.dispatch).toHaveBeenCalledWith(setRegistrationFormData(registrationFormData));
+ });
+
+ it('should set country in component state on country change with chrome translations', () => {
+ getLocale.mockImplementation(() => ('en-us'));
+ registrationFormData = {
+ errors: { ...registrationFormData.errors },
+ country: 'AF',
+ };
+ store.dispatch = jest.fn(store.dispatch);
+
+ const registerPage = mount(reduxWrapper());
+ registerPage.find('input#country').simulate('focus');
+ registerPage.find('button.dropdown-item').at(0).simulate('click', { target: { value: undefined, name: undefined, parentElement: { parentElement: { value: 'Afghanistan' } } } });
+ expect(store.dispatch).toHaveBeenCalledWith(setRegistrationFormData(registrationFormData));
+ });
});
describe('TestDynamicFields', () => {