From 796bb11de94c7bc605fe15b6abfe15f696dcd304 Mon Sep 17 00:00:00 2001
From: KatriannaSydlik-Badgerow <katrianna.sydlik-badgerow@target.com>
Date: Tue, 10 Dec 2019 10:59:29 -0600
Subject: [PATCH 1/2] added cm '+' adornment

---
 web/src/app/users/UserContactMethodForm.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/app/users/UserContactMethodForm.js b/web/src/app/users/UserContactMethodForm.js
index 782b777a39..9dc0eb1f41 100644
--- a/web/src/app/users/UserContactMethodForm.js
+++ b/web/src/app/users/UserContactMethodForm.js
@@ -4,6 +4,7 @@ import Grid from '@material-ui/core/Grid'
 import TextField from '@material-ui/core/TextField'
 import { FormContainer, FormField } from '../forms'
 import { MenuItem, Typography } from '@material-ui/core'
+import InputAdornment from '@material-ui/core/InputAdornment'
 
 export default class UserContactMethodForm extends React.PureComponent {
   static propTypes = {
@@ -33,14 +34,19 @@ export default class UserContactMethodForm extends React.PureComponent {
     onChange: () => {},
   }
 
+  state = {
+    cmAdornment: true,
+  }
+
   render() {
     const cleanValue = val => {
       val = val.replace(/[^0-9]/g, '')
 
       if (!val) {
+        this.setState({ cmAdornment: true })
         return ''
       }
-
+      this.setState({ cmAdornment: false })
       return '+' + val
     }
     return (
@@ -64,13 +70,20 @@ export default class UserContactMethodForm extends React.PureComponent {
           </Grid>
           <Grid item xs={12}>
             <FormField
-              placeholder='+11235550123'
+              placeholder='11235550123'
               aria-labelledby='countryCodeIndicator'
               fullWidth
               name='value'
               required
               label='Phone Number'
               type='tel'
+              InputProps={{
+                startAdornment: this.state.cmAdornment && (
+                  <InputAdornment style={{ marginBottom: '0.1em' }}>
+                    +
+                  </InputAdornment>
+                ),
+              }}
               component={TextField}
               mapOnChangeValue={cleanValue}
               disabled={this.props.edit}

From f423d2a80555389d3d8034151d89727741a39e90 Mon Sep 17 00:00:00 2001
From: KatriannaSydlik-Badgerow <katrianna.sydlik-badgerow@target.com>
Date: Tue, 10 Dec 2019 11:25:30 -0600
Subject: [PATCH 2/2] removing state

---
 web/src/app/users/UserContactMethodForm.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/web/src/app/users/UserContactMethodForm.js b/web/src/app/users/UserContactMethodForm.js
index 9dc0eb1f41..2d82fff12e 100644
--- a/web/src/app/users/UserContactMethodForm.js
+++ b/web/src/app/users/UserContactMethodForm.js
@@ -34,19 +34,13 @@ export default class UserContactMethodForm extends React.PureComponent {
     onChange: () => {},
   }
 
-  state = {
-    cmAdornment: true,
-  }
-
   render() {
     const cleanValue = val => {
       val = val.replace(/[^0-9]/g, '')
 
       if (!val) {
-        this.setState({ cmAdornment: true })
         return ''
       }
-      this.setState({ cmAdornment: false })
       return '+' + val
     }
     return (
@@ -78,13 +72,14 @@ export default class UserContactMethodForm extends React.PureComponent {
               label='Phone Number'
               type='tel'
               InputProps={{
-                startAdornment: this.state.cmAdornment && (
+                startAdornment: (
                   <InputAdornment style={{ marginBottom: '0.1em' }}>
                     +
                   </InputAdornment>
                 ),
               }}
               component={TextField}
+              mapValue={val => val.replace(/^\+/, '')}
               mapOnChangeValue={cleanValue}
               disabled={this.props.edit}
             />