fix: country field is not populated on page load (#1151)

Description: Country field is not populated when page load VAN-1795
openedx · Feb 1, 2024 · 02d14a6 · 02d14a6
1 parent a6a473e
commit 02d14a6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/src/register/RegistrationFields/CountryField/CountryField.jsx b/src/register/RegistrationFields/CountryField/CountryField.jsx
@@ -49,6 +49,11 @@ const CountryField = (props) => {
         { target: { name: 'country' } },
         { countryCode, displayValue: countryDisplayValue },
       );
+    } else if (!selectedCountry.countryCode) {
+      onChangeHandler(
+        { target: { name: 'country' } },
+        { countryCode: '', displayValue: '' },
+      );
     }
   }, [backendCountryCode, countryList]); // eslint-disable-line react-hooks/exhaustive-deps
 

diff --git a/src/register/RegistrationFields/CountryField/CountryField.test.jsx b/src/register/RegistrationFields/CountryField/CountryField.test.jsx
@@ -172,7 +172,7 @@ describe('CountryField', () => {
       const dropdownItem = container.querySelector('.dropdown-item');
       fireEvent.click(dropdownItem);
 
-      expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
+      expect(props.onChangeHandler).toHaveBeenCalledTimes(2);
       expect(props.onChangeHandler).toHaveBeenCalledWith(
         { target: { name: 'country' } },
         { countryCode: 'PK', displayValue: 'Pakistan' },
@@ -187,7 +187,7 @@ describe('CountryField', () => {
       const countryInput = container.querySelector('input[name="country"]');
       fireEvent.change(countryInput, { target: { value: 'pak', name: 'country' } });
 
-      expect(props.onChangeHandler).toHaveBeenCalledTimes(1);
+      expect(props.onChangeHandler).toHaveBeenCalledTimes(2);
       expect(props.onChangeHandler).toHaveBeenCalledWith(
         { target: { name: 'country' } },
         { countryCode: '', displayValue: 'pak' },

diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -46,12 +46,6 @@ const ConfigurableRegistrationForm = (props) => {
     showMarketingEmailOptInCheckbox: getConfig().MARKETING_EMAILS_OPT_IN,
   };
 
-  useEffect(() => {
-    if (!formFields.country) {
-      setFormFields(prevState => ({ ...prevState, country: { countryCode: '', displayValue: '' } }));
-    }
-  });
-
   /**
    * If auto submitting register form, we will check tos and honor code fields if they exist for feature parity.
    */