From d30d5ffbc83ddd22178d233968ae8e3ebcd8349c Mon Sep 17 00:00:00 2001 From: Anthony Tseng Date: Wed, 24 May 2017 16:03:59 -0700 Subject: [PATCH] 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 --- .../autofill/autofillAddressPanel.js | 78 ++++++++++++++----- .../autofill/autofillCreditCardPanel.js | 5 +- .../bookmarks/addEditBookmarkHanger.js | 7 +- app/renderer/components/common/textbox.js | 6 +- .../components/styles/commonStyles.js | 5 ++ 5 files changed, 76 insertions(+), 25 deletions(-) diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js index 711bdd9231b..bb20fa9d2e1 100644 --- a/app/renderer/components/autofill/autofillAddressPanel.js +++ b/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 @@ -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 }} />
- + ref={(organization) => { this.organization = organization }} />
- + ref={(streetAddress) => { this.streetAddress = streetAddress }} />
- + ref={(city) => { this.city = city }} />
- + ref={(state) => { this.state = state }} />
- + ref={(postalCode) => { this.postalCode = postalCode }} />
- + ref={(country) => { this.country = country }} />
- + ref={(phone) => { this.phone = phone }} />
- + ref={(email) => { this.email = email }} />
diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js index 064dcd173e6..1ba303beeb0 100644 --- a/app/renderer/components/autofill/autofillCreditCardPanel.js +++ b/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 }} /> diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js index da5a432ed02..28eb3dcb378 100644 --- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js +++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js @@ -97,12 +97,15 @@ class AddEditBookmarkHanger extends ImmutableComponent { this.updateFolders(nextProps) } } + componentDidUpdate () { + } 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 +141,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 +232,6 @@ class AddEditBookmarkHanger extends ImmutableComponent { spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange} - value={this.displayBookmarkName} ref={(bookmarkName) => { this.bookmarkName = bookmarkName }} /> diff --git a/app/renderer/components/common/textbox.js b/app/renderer/components/common/textbox.js index 24bcca8a56a..6de92ffa90d 100644 --- a/app/renderer/components/common/textbox.js +++ b/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' }, diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js index d2fecb0c8de..0ffa4b810fa 100644 --- a/app/renderer/components/styles/commonStyles.js +++ b/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%' } })