Merge pull request #3286 from vigneshTheDev/profile-settings-alert-fix

(fix for issue #3263) hide country selection alert on outside click in

Author: RishiRajSahu

src/routes/settings/routes/profile/components/ProfileSettingsForm.jsx

@@ -37,6 +37,9 @@ class ProfileSettingsForm extends Component {
     this.onChange = this.onChange.bind(this)
     this.onBusinessPhoneCountryChange = this.onBusinessPhoneCountryChange.bind(this)
     this.onCountryChange = this.onCountryChange.bind(this)
+
+    this.hideCountrySelectAlert = this.hideCountrySelectAlert.bind(this)
+    this.hideBusinessPhoneAlert = this.hideBusinessPhoneAlert.bind(this)
   }
 
   onCountryChange(country) {
@@ -82,6 +85,18 @@ class ProfileSettingsForm extends Component {
     }
   }
 
+  hideCountrySelectAlert() {
+    this.setState({
+      countrySelectionDirty: false
+    })
+  }
+
+  hideBusinessPhoneAlert () {
+    this.setState({
+      businessPhoneDirty: false
+    })
+  }
+
   getField(label, name, isRequired=false) {
     let validations = null
     if (name === 'businessPhone') {
@@ -183,6 +198,7 @@ class ProfileSettingsForm extends Component {
               forceCountry={this.state.countrySelected}
               value={this.props.values.settings.businessPhone}
               onChangeCountry={this.onBusinessPhoneCountryChange}
+              onOutsideClick={this.hideBusinessPhoneAlert}
             />
             {
               this.state.businessPhoneDirty &&
@@ -238,6 +254,7 @@ class ProfileSettingsForm extends Component {
               placeholder="- Select country -"
               showDropdownIndicator
               setValueOnly
+              onBlur={this.hideCountrySelectAlert}
             />
             {
               this.state.countrySelectionDirty &&

src/routes/settings/routes/profile/components/ProfileSettingsForm.scss

@@ -176,13 +176,12 @@
   margin: 5px auto;
   @include roboto;
 
-  color: $tc-gray-70;
   font-size: 13px;
   line-height:20px;
   font-style:italic;
-  border: 1px solid $tc-red-30;
+  border: 1px solid $tc-orange-30;
   background: $tc-red-10;
-  color: $tc-red-70;
+  color: $tc-orange-70;
   padding:10px;
   border-radius: 2px;
 }