diff --git a/src/register/registrationFields/CountryField.jsx b/src/register/registrationFields/CountryField.jsx index 19af5ff9..9428bd17 100644 --- a/src/register/registrationFields/CountryField.jsx +++ b/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()} diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx index bb41c4c1..0b3efff0 100644 --- a/src/register/tests/RegistrationPage.test.jsx +++ b/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()); + 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(); + }); }); });