2 files changed, 11 insertions, 15 deletions
diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx
index 23c93e3..f8213db 100644
--- a/src/console/components/console.jsx
+++ b/src/console/components/console.jsx
@@ -6,6 +6,8 @@ import Completion from './console/completion';
 import Message from './console/message';
 import * as consoleActions from '../../console/actions/console';
 
+const COMPLETION_MAX_ITEMS = 33;
+
 class ConsoleComponent extends Component {
   onBlur() {
     if (this.props.mode === 'command' || this.props.mode === 'find') {
@@ -105,7 +107,7 @@ class ConsoleComponent extends Component {
     case 'command':
     case 'find':
       return <div className='vimvixen-console-command-wrapper'>
-        <Completion />
+        <Completion size={COMPLETION_MAX_ITEMS} />
         <Input
           ref={(c) => { this.input = c; }}
           mode={this.props.mode}
diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx
index 096653b..ae081e6 100644
--- a/src/console/components/console/completion.jsx
+++ b/src/console/components/console/completion.jsx
@@ -1,8 +1,6 @@
 import { Component, h } from 'preact';
 import { connect } from 'preact-redux';
 
-const COMPLETION_MAX_ITEMS = 33;
-
 const CompletionTitle = (props) => {
   return <li className='vimvixen-console-completion-title' >{props.title}</li>;
 };
@@ -38,18 +36,14 @@ class CompletionComponent extends Component {
     }
 
     let viewSelect = (() => {
-      let view = 0;
       let index = 0;
-      for (let group of nextProps.completions) {
-        ++view;
-        // TODO refactor
-        for (let _ of group.items) {
-          if (index === nextProps.select) {
-            return view;
-          }
-          ++view;
-          ++index;
+      for (let i = 0; i < nextProps.completions.length; ++i) {
+        ++index;
+        let g = nextProps.completions[i];
+        if (nextProps.select + i + 1 < index + g.items.length) {
+          return nextProps.select + i + 1;
         }
+        index += g.items.length;
       }
     })();
 
@@ -58,7 +52,7 @@ class CompletionComponent extends Component {
       viewOffset = 0;
     } else if (prevState.select < nextProps.select) {
       viewOffset = Math.max(prevState.viewOffset,
-        viewSelect - COMPLETION_MAX_ITEMS + 1);
+        viewSelect - nextProps.size + 1);
     } else if (prevState.select > nextProps.select) {
       viewOffset = Math.min(prevState.viewOffset, viewSelect);
     }
@@ -83,7 +77,7 @@ class CompletionComponent extends Component {
     }
 
     let viewOffset = this.state.viewOffset;
-    eles = eles.slice(viewOffset, viewOffset + COMPLETION_MAX_ITEMS);
+    eles = eles.slice(viewOffset, viewOffset + this.props.size);
 
     return (
       <ul className='vimvixen-console-completion'>