fix: bugs in country field (#913)

VAN-1415

src/register/registrationFields/CountryField.jsx

@@ -15,6 +15,14 @@ const CountryField = (props) => {
     if (props.onBlurHandler) { props.onBlurHandler({ target: { name: 'country', value } }); }
   };
 
+  const onBlurHandler = (event) => {
+    // Do not run validations when drop-down arrow is clicked
+    if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {
+      return;
+    }
+    if (props.onBlurHandler) { props.onBlurHandler(event); }
+  };
+
   const onFocusHandler = (event) => {
     if (props.onFocusHandler) { props.onFocusHandler(event); }
   };
@@ -40,7 +48,7 @@ const CountryField = (props) => {
         value={selectedCountry.displayValue || ''}
         onSelected={(value) => handleSelected(value)}
         onFocus={(e) => onFocusHandler(e)}
-        onBlur={(e) => handleSelected(e.target.value)}
+        onBlur={(e) => onBlurHandler(e)}
         onChange={(value) => onChangeHandler(value)}
       >
         {getCountryList()}

src/register/tests/RegistrationPage.test.jsx

@@ -1326,5 +1326,16 @@ describe('RegistrationPage', () => {
       expect(registrationPage.find('div.alert-heading').length).toEqual(1);
       expect(registrationPage.find('div.alert').first().text()).toContain('An error occured');
     });
+
+    it('should not run country field validation when onBlur is fired by drop-down arrow icon click', () => {
+      getLocale.mockImplementation(() => ('en-us'));
+
+      const registrationPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
+      registrationPage.find('input[name="country"]').simulate('blur', {
+        target: { value: '', name: 'country' },
+        relatedTarget: { type: 'button', className: 'btn-icon pgn__form-autosuggest__icon-button' },
+      });
+      expect(registrationPage.find('div[feedback-for="country"]').exists()).toBeFalsy();
+    });
   });
 });