Check input value before set it

fix #9017

Auditors: @bsclifton, @bbondy

Test Plan:
1. Open editBookmark/autofill address/autofill credit card dialog
2. Make sure IME can input appropriately on text input value

app/renderer/components/autofill/autofillAddressPanel.js

@@ -17,11 +17,18 @@ const {
   CommonFormLarge,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
+const commonForm = css(
+  commonStyles.formControl,
+  commonStyles.textbox,
+  commonStyles.textbox__outlineable,
+  commonStyles.isCommonForm,
+  commonFormStyles.input__box
+)
+
 class AutofillAddressPanel extends ImmutableComponent {
   constructor () {
     super()
@@ -41,46 +48,73 @@ class AutofillAddressPanel extends ImmutableComponent {
   onNameChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('name', e.target.value)
+    if (this.nameOnAddress.value !== e.target.value) {
+      this.nameOnAddress.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onOrganizationChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('organization', e.target.value)
+    if (this.organization.value !== e.target.value) {
+      this.organization.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onStreetAddressChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('streetAddress', e.target.value)
+    if (this.streetAddress.value !== e.target.value) {
+      this.streetAddress.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onCityChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('city', e.target.value)
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
+    if (this.city.value !== e.target.value) {
+      this.city.value = e.target.value
+    }
   }
   onStateChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('state', e.target.value)
+    if (this.state.value !== e.target.value) {
+      this.state.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onPostalCodeChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('postalCode', e.target.value)
+    if (this.postalCode.value !== e.target.value) {
+      this.postalCode.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onCountryChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('country', e.target.value)
+    if (this.country.value !== e.target.value) {
+      this.country.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onPhoneChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('phone', e.target.value)
+    if (this.phone.value !== e.target.value) {
+      this.phone.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onEmailChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('email', e.target.value)
+    if (this.email.value !== e.target.value) {
+      this.email.value = e.target.value
+    }
     windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
   }
   onKeyDown (e) {
@@ -111,6 +145,15 @@ class AutofillAddressPanel extends ImmutableComponent {
   }
   componentDidMount () {
     this.nameOnAddress.focus()
+    this.nameOnAddress.value = this.props.currentDetail.get('name') || ''
+    this.organization.value = this.props.currentDetail.get('organization') || ''
+    this.streetAddress.value = this.props.currentDetail.get('streetAddress') || ''
+    this.city.value = this.props.currentDetail.get('city') || ''
+    this.state.value = this.props.currentDetail.get('state') || ''
+    this.postalCode.value = this.props.currentDetail.get('postalCode') || ''
+    this.country.value = this.props.currentDetail.get('country') || ''
+    this.phone.value = this.props.currentDetail.get('phone') || ''
+    this.email.value = this.props.currentDetail.get('email') || ''
   }
   render () {
     return <Dialog onHide={this.props.onHide} testId='autofillAddressPanel' isClickDismiss>
@@ -138,55 +181,54 @@ class AutofillAddressPanel extends ImmutableComponent {
               )}
                 data-test-id='nameOnAddress'
                 spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
-                value={this.props.currentDetail.get('name') || ''}
                 ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='organization'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
-                  value={this.props.currentDetail.get('organization')} />
+                  ref={(organization) => { this.organization = organization }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='streetAddress'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
-                  value={this.props.currentDetail.get('streetAddress')} />
+                  ref={(streetAddress) => { this.streetAddress = streetAddress }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='city'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
-                  value={this.props.currentDetail.get('city')} />
+                  ref={(city) => { this.city = city }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='state'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
-                  value={this.props.currentDetail.get('state')} />
+                  ref={(state) => { this.state = state }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='postalCode'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
-                  value={this.props.currentDetail.get('postalCode')} />
+                  ref={(postalCode) => { this.postalCode = postalCode }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='country'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
-                  value={this.props.currentDetail.get('country')} />
+                  ref={(country) => { this.country = country }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='phone'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
-                  value={this.props.currentDetail.get('phone')} />
+                  ref={(phone) => { this.phone = phone }} />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormTextbox
+                <input className={commonForm}
                   data-test-id='email'
                   spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
-                  value={this.props.currentDetail.get('email')} />
+                  ref={(email) => { this.email = email }} />
               </div>
             </div>
           </div>

app/renderer/components/autofill/autofillCreditCardPanel.js

@@ -38,6 +38,9 @@ class AutofillCreditCardPanel extends ImmutableComponent {
   onNameChange (e) {
     let currentDetail = this.props.currentDetail
     currentDetail = currentDetail.set('name', e.target.value)
+    if (this.nameOnCard.value !== e.target.value) {
+      this.nameOnCard.value = e.target.value
+    }
     windowActions.setAutofillCreditCardDetail(currentDetail, this.props.originalDetail)
   }
   onCardChange (e) {
@@ -80,6 +83,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
   }
   componentDidMount () {
     this.nameOnCard.focus()
+    this.nameOnCard.value = this.props.currentDetail.get('name') || ''
   }
   render () {
     var ExpMonth = []
@@ -119,7 +123,6 @@ class AutofillCreditCardPanel extends ImmutableComponent {
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onNameChange}
-                  value={this.props.currentDetail.get('name') || ''}
                   ref={(nameOnCard) => { this.nameOnCard = nameOnCard }}
                 />
               </div>

app/renderer/components/bookmarks/addEditBookmarkHanger.js

@@ -97,12 +97,16 @@ class AddEditBookmarkHanger extends ImmutableComponent {
       this.updateFolders(nextProps)
     }
   }
+  componentDidUpdate () {
+    console.log(this.displayBookmarkName)
+  }
   componentDidMount () {
     // Automatically save if this is triggered by the url star
     if (!this.props.isModal && !this.props.shouldShowLocation) {
       this.onSave(false)
     }
     this.setDefaultFocus()
+    this.bookmarkName.value = this.displayBookmarkName
   }
   onKeyDown (e) {
     switch (e.keyCode) {
@@ -138,6 +142,9 @@ class AddEditBookmarkHanger extends ImmutableComponent {
       // are not saved.
       currentDetail = currentDetail.set('customTitle', name || 0)
     }
+    if (this.bookmarkName.value !== name) {
+      this.bookmarkName.value = name
+    }
     windowActions.setBookmarkDetail(currentDetail, this.props.originalDetail, this.props.destinationDetail, this.props.shouldShowLocation, !this.props.isModal)
   }
   onLocationChange (e) {
@@ -226,7 +233,6 @@ class AddEditBookmarkHanger extends ImmutableComponent {
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onNameChange}
-                  value={this.displayBookmarkName}
                   ref={(bookmarkName) => { this.bookmarkName = bookmarkName }}
                 />
               </div>

app/renderer/components/common/textbox.js

@@ -16,7 +16,7 @@ class Textbox extends ImmutableComponent {
       this.props['data-isFormControl'] && commonStyles.formControl,
       styles.textbox,
       (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable,
-      this.props['data-isCommonForm'] && styles.isCommonForm,
+      this.props['data-isCommonForm'] && commonStyles.isCommonForm,
       this.props['data-isSettings'] && styles.isSettings,
       this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
     )
@@ -75,10 +75,6 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
-  isCommonForm: {
-    fontSize: globalStyles.fontSize.flyoutDialog,
-    width: '100%'
-  },
   isSettings: {
     width: '280px'
   },

app/renderer/components/styles/commonStyles.js

@@ -193,6 +193,11 @@ const styles = StyleSheet.create({
     /* TODO: refactor siteDetails.less */
     marginTop: '0 !important',
     marginLeft: globalStyles.spacing.aboutPageSectionPadding
+  },
+
+  isCommonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog,
+    width: '100%'
   }
 })