From b8356bc962aff048d1639ad3db82df58c710cabe Mon Sep 17 00:00:00 2001
From: Awais Jibran <awaisdar001@gmail.com>
Date: Wed, 10 Mar 2021 13:14:10 +0500
Subject: [PATCH] Revert "Workaround an issue between React and Google
 Translate (#397)" (#412)

This reverts commit fa4c5ef872d503fcb7d824f000d53074e7c72a1a.
---
 src/account-settings/AccountSettingsPage.jsx | 59 ++++++++------------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx
index 93afb60..46f59b5 100644
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -325,48 +325,37 @@ class AccountSettingsPage extends React.Component {
             options={yearOfBirthOptions}
             {...editableFieldProps}
           />
-          {/*
-            There is an issue with conditional rendering of state between react UI and google translate.
-            As state depends upon country component, we need to wrap them inside "notranslate" class so
-            The hack is to disabling Chrome's translation by wrapping these components in inside
-            "notranslate" class until the underlying issue is fixed.
-            TNL-7867
-           */
-          }
-          <div className="notranslate">
+          <EditableField
+            name="country"
+            type="select"
+            value={this.props.formValues.country}
+            options={countryOptions}
+            label={this.props.intl.formatMessage(messages['account.settings.field.country'])}
+            emptyLabel={
+              this.isEditable('country')
+                ? this.props.intl.formatMessage(messages['account.settings.field.country.empty'])
+                : this.renderEmptyStaticFieldMessage()
+            }
+            isEditable={this.isEditable('country')}
+            {...editableFieldProps}
+          />
+          {showState
+            && (
             <EditableField
-              name="country"
+              name="state"
               type="select"
-              value={this.props.formValues.country}
-              options={countryOptions}
-              label={this.props.intl.formatMessage(messages['account.settings.field.country'])}
+              value={this.props.formValues.state}
+              options={stateOptions}
+              label={this.props.intl.formatMessage(messages['account.settings.field.state'])}
               emptyLabel={
-                this.isEditable('country')
-                  ? this.props.intl.formatMessage(messages['account.settings.field.country.empty'])
+                this.isEditable('state')
+                  ? this.props.intl.formatMessage(messages['account.settings.field.state.empty'])
                   : this.renderEmptyStaticFieldMessage()
               }
-              isEditable={this.isEditable('country')}
+              isEditable={this.isEditable('state')}
               {...editableFieldProps}
             />
-
-            {showState
-              && (
-                <EditableField
-                  name="state"
-                  type="select"
-                  value={this.props.formValues.state}
-                  options={stateOptions}
-                  label={this.props.intl.formatMessage(messages['account.settings.field.state'])}
-                  emptyLabel={
-                    this.isEditable('state')
-                      ? this.props.intl.formatMessage(messages['account.settings.field.state.empty'])
-                      : this.renderEmptyStaticFieldMessage()
-                  }
-                  isEditable={this.isEditable('state')}
-                  {...editableFieldProps}
-                />
-              )}
-          </div>
+            )}
         </div>
 
         <div className="account-section" id="profile-information" ref={this.navLinkRefs['#profile-information']}>