From 8efb22595c893da534020fb27acb6442c553ec08 Mon Sep 17 00:00:00 2001
From: Blue <ahtesham-quraish@users.noreply.github.com>
Date: Fri, 3 May 2024 10:27:32 +0500
Subject: [PATCH] fix: add new entry for another US label (#1244)

Add new entry for for another US label which is United States
---
 .../RegistrationFields/CountryField/CountryField.jsx        | 2 +-
 src/register/components/ConfigurableRegistrationForm.jsx    | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/register/RegistrationFields/CountryField/CountryField.jsx b/src/register/RegistrationFields/CountryField/CountryField.jsx
index c411750bc8..4f9e06c692 100644
--- a/src/register/RegistrationFields/CountryField/CountryField.jsx
+++ b/src/register/RegistrationFields/CountryField/CountryField.jsx
@@ -97,7 +97,7 @@ const CountryField = (props) => {
   };
 
   const getCountryList = () => countryList.map((country) => (
-    <FormAutosuggestOption key={country[COUNTRY_CODE_KEY]} id={country[COUNTRY_CODE_KEY]}>
+    <FormAutosuggestOption key={country[COUNTRY_DISPLAY_KEY]} id={country[COUNTRY_CODE_KEY]}>
       {country[COUNTRY_DISPLAY_KEY]}
     </FormAutosuggestOption>
   ));
diff --git a/src/register/components/ConfigurableRegistrationForm.jsx b/src/register/components/ConfigurableRegistrationForm.jsx
index be1f9c27d1..8c300b7ee7 100644
--- a/src/register/components/ConfigurableRegistrationForm.jsx
+++ b/src/register/components/ConfigurableRegistrationForm.jsx
@@ -33,7 +33,11 @@ const ConfigurableRegistrationForm = (props) => {
     autoSubmitRegistrationForm,
   } = props;
 
-  const countryList = useMemo(() => getCountryList(getLocale()), []);
+  /** The reason for adding the entry 'United States' is that Chrome browser aut-fill the form with the 'Unites
+  States' instead of 'United States of America' which does not exist in country dropdown list and gets the user
+  confused and unable to create an account. So we added the United States entry in the dropdown list.
+ */
+  const countryList = useMemo(() => getCountryList(getLocale()).concat([{ code: 'US', name: 'United States' }]), []);
 
   let showTermsOfServiceAndHonorCode = false;
   let showCountryField = false;