fix

src/routes/selfRegister/components/SignUp.js

@@ -19,6 +19,7 @@ import Instance from '../../../components/Connection';
 
 import Checkbox from 'material-ui/Checkbox';
 
+import InputMask from 'react-input-mask';
 import ValidationErrorsInfoDialog from '../../../components/Shared/ValidationErrorsInfoDialog';
 
 class SignUp extends React.Component {
@@ -61,15 +62,15 @@ class SignUp extends React.Component {
 
   componentDidMount = () => { }
 
-  getFormattedPhoneNumber(){
-    if(this.state.phone_number && this.state.phone_number.length > 0) {
-      return this.state.phone_number.replace('+1','').replace('(','').replace(')','').replace('-','').replace(' ','').trim()
+  getFormattedPhoneNumber(phone){
+    if(phone && phone.length > 0) {
+      return phone.replace('+1','').replace('(','').replace(')','').replace('-','').replace(' ','').trim()
     }
     return '';
   }
 
   isPhoneNumberFormatValid() {
-    let formattedNumber = this.getFormattedPhoneNumber();
+    let formattedNumber = this.getFormattedPhoneNumber(this.state.phone_number);
     return !isNaN(formattedNumber) && (formattedNumber.toString().length === 10);
   }
 
@@ -108,7 +109,7 @@ class SignUp extends React.Component {
   };
 
   handlePhone = (event) => {
-    let phone = event.target.value;
+    let phone = this.getFormattedPhoneNumber(event.target.value);
     if (phone.indexOf("+1") < 0 && phone.length == 10) {
       phone = "+1" + phone;
       phone = phone.substring(0, 12);
@@ -245,7 +246,9 @@ class SignUp extends React.Component {
                     type="telephone"
                     onChange={this.handlePhone}
                     onBlur={this.buttonValidated}
-                  />
+                  >
+                    <InputMask mask="(999) 999-9999" maskChar={null} value={this.state.phone_number} />
+                  </TextField>
                 </div>
                 <div className="form-group">
                   <TextField