Fix EnterPasswordPage autofocus (#573)

Authenticator-Extension · Jan 14, 2021 · 6e00097 · 6e00097
1 parent f8d31af
commit 6e00097
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -7,14 +7,23 @@
       :value="value"
       @input="$emit('input', $event.target.value)"
       @keyup.enter="$emit('enter')"
-      autofocus
+      ref="textInput"
     />
   </div>
 </template>
 <script lang="ts">
 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
@@ -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 });