3 files changed, 14 insertions, 23 deletions
diff --git a/src/console/components/completion.js b/src/console/components/completion.js
index 5033b5c..a49a221 100644
--- a/src/console/components/completion.js
+++ b/src/console/components/completion.js
@@ -3,6 +3,10 @@ export default class Completion {
     this.wrapper = wrapper;
     this.store = store;
     this.prevState = {};
+
+    store.subscribe(() => {
+      this.update();
+    });
   }
 
   update() {
diff --git a/src/console/components/console.js b/src/console/components/console.js
index dcd4041..5028e2a 100644
--- a/src/console/components/console.js
+++ b/src/console/components/console.js
@@ -4,7 +4,6 @@ import * as consoleActions from 'console/actions/console';
 export default class ConsoleComponent {
   constructor(wrapper, store) {
     this.wrapper = wrapper;
-    this.prevValue = '';
     this.prevState = {};
     this.completionOrigin = '';
     this.store = store;
@@ -13,10 +12,14 @@ export default class ConsoleComponent {
     let input = doc.querySelector('#vimvixen-console-command-input');
     input.addEventListener('blur', this.onBlur.bind(this));
     input.addEventListener('keydown', this.onKeyDown.bind(this));
-    input.addEventListener('keyup', this.onKeyUp.bind(this));
+    input.addEventListener('input', this.onInput.bind(this));
 
     this.hideCommand();
     this.hideMessage();
+
+    store.subscribe(() => {
+      this.update();
+    });
   }
 
   onBlur() {
@@ -49,22 +52,14 @@ export default class ConsoleComponent {
     }
   }
 
-  onKeyUp(e) {
-    if (e.keyCode === KeyboardEvent.DOM_VK_TAB) {
-      return;
-    }
-    if (e.target.value === this.prevValue) {
-      return;
-    }
-
+  onInput(e) {
     let doc = this.wrapper.ownerDocument;
     let input = doc.querySelector('#vimvixen-console-command-input');
     this.completionOrigin = input.value;
 
-    this.prevValue = e.target.value;
     return browser.runtime.sendMessage({
       type: messages.CONSOLE_QUERY_COMPLETIONS,
-      text: e.target.value
+      text: e.target.value,
     }).then((completions) => {
       this.store.dispatch(consoleActions.setCompletions(completions));
     });
@@ -109,7 +104,7 @@ export default class ConsoleComponent {
     input.focus();
 
     window.focus();
-    this.prevValue = '';
+    this.onInput({ target: input });
   }
 
   hideCommand() {
diff --git a/src/console/index.js b/src/console/index.js
index 2ae5779..36473fe 100644
--- a/src/console/index.js
+++ b/src/console/index.js
@@ -7,14 +7,11 @@ import { createStore } from 'shared/store';
 import * as consoleActions from 'console/actions/console';
 
 const store = createStore(reducers);
-let completionComponent = null;
-let consoleComponent = null;
 
 window.addEventListener('load', () => {
   let wrapper = document.querySelector('#vimvixen-console-completion');
-  completionComponent = new CompletionComponent(wrapper, store);
-
-  consoleComponent = new ConsoleComponent(document.body, store);
+  new CompletionComponent(wrapper, store); // eslint-disable-line no-new
+  new ConsoleComponent(document.body, store); // eslint-disable-line no-new
 });
 
 const onMessage = (message) => {
@@ -30,11 +27,6 @@ const onMessage = (message) => {
   }
 };
 
-store.subscribe(() => {
-  completionComponent.update();
-  consoleComponent.update();
-});
-
 browser.runtime.onMessage.addListener(onMessage);
 window.addEventListener('message', (event) => {
   onMessage(JSON.parse(event.data));