From a800fdb320b66d1c7e0a4876b0d0f291939306e3 Mon Sep 17 00:00:00 2001
From: kumarrishav <rishav006@gmail.com>
Date: Wed, 26 Apr 2017 22:53:26 +0530
Subject: [PATCH 1/2] Autofill should focus on first entry Fix #8280

---
 app/renderer/components/autofill/autofillAddressPanel.js    | 6 ++++--
 app/renderer/components/autofill/autofillCreditCardPanel.js | 5 ++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index b1cdc56388..127142fb6c 100644
--- 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
index 795b0f3067..f4afbc34d8 100644
--- 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) {
@@ -115,7 +118,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
                   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>

From d1f502ad662ceaf8792fcc25a219c083f6fee577 Mon Sep 17 00:00:00 2001
From: Anthony Tseng <darkdh@gmail.com>
Date: Wed, 3 May 2017 08:39:13 -0700
Subject: [PATCH 2/2] Add fist entry focus test

Auditors: @kumarrishav, @bsclifton
---
 .../autofill/autofillCreditCardPanel.js          |  2 ++
 test/contents/autofillTest.js                    | 16 ++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
index f4afbc34d8..0d37a569a1 100644
--- a/app/renderer/components/autofill/autofillCreditCardPanel.js
+++ b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -115,6 +115,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
                   commonFormStyles.input__box,
                   styles.input
                 )}
+                  data-test-id='creditCardName'
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
                   onChange={this.onNameChange}
@@ -126,6 +127,7 @@ class AutofillCreditCardPanel extends ImmutableComponent {
                 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
index 279082375a..ccdb098311 100644
--- 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())