Automatically focus first input during restore seed pagination.

Author: valentinewallace

src/action/wallet.js

@@ -56,6 +56,14 @@ class WalletAction {
     this._store.wallet.restoreSeed[index] = word;
   }
 
+  /**
+   * Set which seed restore input is in focus.
+   * @param {number} options.index The index of the input.
+   */
+  setFocusedRestoreInd({ index }) {
+    this._store.wallet.focusedRestoreInd = index;
+  }
+
   //
   // Wallet Password actions
   //
@@ -327,6 +335,7 @@ class WalletAction {
   initNextRestorePage() {
     if (this._store.wallet.restoreIndex < 21) {
       this._store.wallet.restoreIndex += 3;
+      this._store.wallet.focusedRestoreInd = this._store.wallet.restoreIndex;
     } else {
       this.initSetPassword();
     }
@@ -340,6 +349,7 @@ class WalletAction {
   initPrevRestorePage() {
     if (this._store.wallet.restoreIndex >= 3) {
       this._store.wallet.restoreIndex -= 3;
+      this._store.wallet.focusedRestoreInd = this._store.wallet.restoreIndex;
     } else {
       this._nav.goSelectSeed();
     }

src/store.js

@@ -51,6 +51,7 @@ export class Store {
         seedVerify: ['', '', ''],
         seedIndex: 0,
         restoreIndex: 0,
+        focusedRestoreInd: 0,
         restoreSeed: Array(24).fill(''),
       },
       transactions: [],

src/view/restore-seed.js

@@ -52,8 +52,15 @@ const RestoreSeedView = ({ store, wallet }) => (
               wallet.setRestoreSeed({ word, index: seedIndex - 1 })
             }
             key={i}
-            autoFocus={i === 0}
-            onSubmitEditing={() => wallet.initNextRestorePage()}
+            autoFocus={seedIndex - 1 === store.wallet.focusedRestoreInd}
+            onSubmitEditing={() =>
+              i === 2
+                ? wallet.initNextRestorePage()
+                : wallet.setFocusedRestoreInd({ index: seedIndex })
+            }
+            onClick={() =>
+              wallet.setFocusedRestoreInd({ index: seedIndex - 1 })
+            }
           />
         ))}
       </Card>

test/unit/action/wallet.spec.js

@@ -381,6 +381,13 @@ describe('Action Wallet Unit Tests', () => {
     });
   });
 
+  describe('setFocusedRestoreInd()', () => {
+    it('should set the currently focused restore seed index', () => {
+      wallet.setFocusedRestoreInd({ index: 5 });
+      expect(store.wallet.focusedRestoreInd, 'to equal', 5);
+    });
+  });
+
   describe('initPrevRestorePage()', () => {
     it('should navigate to select seed if restoreIndex < 3', () => {
       store.wallet.restoreIndex = 2;
@@ -391,9 +398,11 @@ describe('Action Wallet Unit Tests', () => {
 
     it('should decrement restoreIndex if greater than 2', async () => {
       store.wallet.restoreIndex = 3;
+      store.wallet.focusedRestoreInd = 5;
       wallet.initPrevRestorePage();
       expect(nav.goSelectSeed, 'was not called');
       expect(store.wallet.restoreIndex, 'to equal', 0);
+      expect(store.wallet.focusedRestoreInd, 'to equal', 0);
     });
   });
 
@@ -407,9 +416,11 @@ describe('Action Wallet Unit Tests', () => {
 
     it('should increment restoreIndex if less than 21', async () => {
       store.wallet.restoreIndex = 18;
+      store.wallet.focusedRestoreInd = 19;
       wallet.initNextRestorePage();
       expect(nav.goSetPassword, 'was not called');
       expect(store.wallet.restoreIndex, 'to equal', 21);
+      expect(store.wallet.focusedRestoreInd, 'to equal', 21);
     });
   });