fix: [VAN-1135] Fix selecting country error while creating account (#656)

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() {

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 = '';

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(<IntlRegistrationPage {...props} />));
+      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(<IntlRegistrationPage {...props} />));
+      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', () => {