Merge pull request #8510 from kumarrishav/autoFillautoFocusFix

Autofill should focus on first entry Fix #8280
brave · May 3, 2017 · 612350d · 612350d
2 parents de7e8a8 + d1f502a
commit 612350d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -109,7 +109,9 @@ class AutofillAddressPanel extends ImmutableComponent {
       !currentDetail.get('phone') && !currentDetail.get('email')) return true
     return false
   }
-
+  componentDidMount () {
+    this.nameOnAddress.focus()
+  }
   render () {
     return <Dialog onHide={this.props.onHide} testId='autofillAddressPanel' isClickDismiss>
       <CommonFormLarge onClick={this.onClick}>
@@ -136,7 +138,7 @@ class AutofillAddressPanel extends ImmutableComponent {
               )}
                 data-test-id='nameOnAddress'
                 spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
-                value={this.props.currentDetail.get('name')}
+                value={this.props.currentDetail.get('name') || ''}
                 ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
               <div className={css(commonFormStyles.input__marginRow)}>
                 <CommonFormTextbox

diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -78,6 +78,9 @@ class AutofillCreditCardPanel extends ImmutableComponent {
     if (!currentDetail.get('name') && !currentDetail.get('card')) return true
     return false
   }
+  componentDidMount () {
+    this.nameOnCard.focus()
+  }
   render () {
     var ExpMonth = []
     for (let i = 1; i <= 12; ++i) {
@@ -112,17 +115,19 @@ class AutofillCreditCardPanel extends ImmutableComponent {
                   commonFormStyles.input__box,
                   styles.input
                 )}
+                  data-test-id='creditCardName'
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onNameChange}
-                  value={this.props.currentDetail.get('name')}
+                  value={this.props.currentDetail.get('name') || ''}
                   ref={(nameOnCard) => { this.nameOnCard = nameOnCard }}
                 />
               </div>
               <div data-test-id='creditCardNumberWrapper'
                 className={css(commonFormStyles.input__marginRow)
               }>
                 <CommonFormTextbox
+                  data-test-id='creditCardNumber'
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onCardChange}

diff --git a/test/contents/autofillTest.js b/test/contents/autofillTest.js
@@ -44,7 +44,7 @@ describe('Autofill', function () {
         .click(addAddressButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillAddressPanel)
-        .click('[data-test-id="nameOnAddress"]')
+        .waitForElementFocus('[data-test-id="nameOnAddress"]')
         .keys(name)
         .click('[data-test-id="organization"]')
         .keys(organization)
@@ -189,9 +189,9 @@ describe('Autofill', function () {
         .click(addCreditCardButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('[data-test-id="creditCardNameWrapper"]')
+        .waitForElementFocus('[data-test-id="creditCardName"]')
         .keys(cardName)
-        .click('[data-test-id="creditCardNumberWrapper"]')
+        .click('[data-test-id="creditCardNumber"]')
         .keys(cardNumber)
         .selectByValue('[data-test-id="expMonthSelect"]', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
         .selectByValue('[data-test-id="expYearSelect"]', expYear.toString())
@@ -252,10 +252,10 @@ describe('Autofill', function () {
         .click('[data-test-id="EditCreditCard"]')
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('[data-test-id="creditCardNameWrapper"]')
+        .waitForElementFocus('[data-test-id="creditCardName"]')
         .keys(Brave.keys.END)
         .keys('123')
-        .click('[data-test-id="creditCardNumberWrapper"]')
+        .click('[data-test-id="creditCardNumber"]')
         .keys(Brave.keys.END)
         .keys('123')
         .selectByValue('[data-test-id="expMonthSelect"]', (expMonth + 1).toString())
@@ -311,7 +311,7 @@ describe('Autofill', function () {
         .click(addAddressButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillAddressPanel)
-        .click('[data-test-id="nameOnAddress"]')
+        .waitForElementFocus('[data-test-id="nameOnAddress"]')
         .keys(name)
         .click('[data-test-id="organization"]')
         .keys(organization)
@@ -341,9 +341,9 @@ describe('Autofill', function () {
         .click(addCreditCardButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('[data-test-id="creditCardNameWrapper"]')
+        .waitForElementFocus('[data-test-id="creditCardName"]')
         .keys(cardName)
-        .click('[data-test-id="creditCardNumberWrapper"]')
+        .click('[data-test-id="creditCardNumber"]')
         .keys(cardNumber)
         .selectByValue('[data-test-id="expMonthSelect"]', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
         .selectByValue('[data-test-id="expYearSelect"]', expYear.toString())