Merge pull request #3961 from vigneshTheDev/fix-business-phone-validation

fix business phone validation and clipped text issue in country selection #3833.

Author: maxceem

src/components/Select/Select.scss

@@ -4,6 +4,7 @@
 	$reactselectheight : 40px;
 	$reactselectcontentheight: 20px;
 	@mixin reactselectstyles {
+		line-height: normal;
 
 		&.height-auto .react-select__control{
 			height: auto;

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

@@ -67,7 +67,7 @@ class ProfileSettingsForm extends Component {
     }
   }
 
-  onBusinessPhoneCountryChange({ country, externalChange, isValid }) {
+  onBusinessPhoneCountryChange({ country, externalChange, isValid: isValidForApi }) {
     const { countrySelected: previousSelectedCountry } = this.state
 
     if (country && country.code) {
@@ -78,14 +78,14 @@ class ProfileSettingsForm extends Component {
           countrySelected: country.name,
         })
       }
-      if (!this.state.businessPhoneValid && isValid) {
-        this.setState({
-          businessPhoneValid: true,
-        })
-      }
     }
 
-    if (this.state.businessPhoneValid && !isValid) {
+    const isValid = isValidForApi && country && country.code
+    if (!this.state.businessPhoneValid && isValid) {
+      this.setState({
+        businessPhoneValid: true,
+      })
+    } else if (this.state.businessPhoneValid && !isValid) {
       this.setState({
         businessPhoneValid: false,
       })