From 6e00097a573d026c5faa91600153b364134d1d04 Mon Sep 17 00:00:00 2001
From: mymindstorm <mymindstorm@evermiss.net>
Date: Wed, 13 Jan 2021 21:26:41 -0600
Subject: [PATCH] Fix EnterPasswordPage autofocus (#573)

---
 src/components/Popup/EnterPasswordPage.vue     |  1 +
 src/components/common/TextInput.vue            | 13 +++++++++++--
 src/test/components/Popup/EnterPasswordPage.ts | 16 ++++++++++++++--
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Popup/EnterPasswordPage.vue b/src/components/Popup/EnterPasswordPage.vue
index bfe0ede09..06ec69aa9 100644
--- a/src/components/Popup/EnterPasswordPage.vue
+++ b/src/components/Popup/EnterPasswordPage.vue
@@ -6,6 +6,7 @@
       v-model="password"
       @enter="applyPassphrase()"
       :class="{ badInput: wrongPassword }"
+      :autofocus="true"
     />
     <label class="warning" v-show="wrongPassword">{{
       i18n.phrase_not_match
diff --git a/src/components/common/TextInput.vue b/src/components/common/TextInput.vue
index 830cd9bab..b8ec8b4d5 100644
--- a/src/components/common/TextInput.vue
+++ b/src/components/common/TextInput.vue
@@ -7,7 +7,7 @@
       :value="value"
       @input="$emit('input', $event.target.value)"
       @keyup.enter="$emit('enter')"
-      autofocus
+      ref="textInput"
     />
   </div>
 </template>
@@ -15,6 +15,15 @@
 import Vue from "vue";
 
 export default Vue.extend({
-  props: ["label", "value", "type"],
+  props: ["label", "value", "type", "autofocus"],
+  mounted() {
+    if (!this.$props.autofocus) {
+      return;
+    }
+    const textInput = this.$refs.textInput;
+    if (textInput instanceof HTMLInputElement) {
+      textInput.focus();
+    }
+  },
 });
 </script>
diff --git a/src/test/components/Popup/EnterPasswordPage.ts b/src/test/components/Popup/EnterPasswordPage.ts
index d19ed00ae..ab1c16489 100644
--- a/src/test/components/Popup/EnterPasswordPage.ts
+++ b/src/test/components/Popup/EnterPasswordPage.ts
@@ -10,7 +10,7 @@ import CommonComponents from "../../../components/common/index";
 import EnterPasswordPage from "../../../components/Popup/EnterPasswordPage.vue";
 import { loadI18nMessages } from "../../../store/i18n";
 
-chai.should();
+const should = chai.should();
 chai.use(sinonChai);
 mocha.setup("bdd");
 const localVue = createLocalVue();
@@ -41,7 +41,7 @@ describe("EnterPasswordPage", () => {
 
   beforeEach(() => {
     // TODO: find a nicer var
-    storeOpts.modules.accounts.actions.applyPassphrase = sinon.fake();
+    storeOpts.modules.accounts.actions.applyPassphrase.resetHistory();
     store = new Vuex.Store(storeOpts);
   });
 
@@ -72,6 +72,18 @@ describe("EnterPasswordPage", () => {
     );
   });
 
+  it("should autofocus password input", () => {
+    const wrapper = mount(EnterPasswordPage, {
+      store,
+      localVue,
+      attachToDocument: true,
+    });
+
+    const passwordInput = wrapper.find("input");
+
+    passwordInput.element.should.eq(document.activeElement);
+  });
+
   it("should not show incorrect password message", () => {
     const wrapper = mount(EnterPasswordPage, { store, localVue });