From c6d02b2c261361b7c9db5eea9c11c2c43b5000ea Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 10:38:37 +0000
Subject: [PATCH 01/20] Move tab-complete logic out from MessageComposer

Moved to a `TabComplete` class. Make it more generic (list of strings rather
than RoomMembers) and sort the member list by last_active_ago. Everything still
seems to work.
---
 src/TabComplete.js                            | 151 ++++++++++++++++++
 src/components/views/rooms/MessageComposer.js | 151 +++++-------------
 2 files changed, 191 insertions(+), 111 deletions(-)
 create mode 100644 src/TabComplete.js

diff --git a/src/TabComplete.js b/src/TabComplete.js
new file mode 100644
index 0000000000..5a6bfa8343
--- /dev/null
+++ b/src/TabComplete.js
@@ -0,0 +1,151 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const DELAY_TIME_MS = 500;
+const KEY_TAB = 9;
+const KEY_SHIFT = 16;
+
+class TabComplete {
+
+    constructor(opts) {
+        opts.startingWordSuffix = opts.startingWordSuffix || "";
+        opts.wordSuffix = opts.wordSuffix || "";
+        this.opts = opts;
+
+        this.tabStruct = {
+            completing: false,
+            original: null,
+            index: 0
+        };
+        this.list = [];
+        this.textArea = opts.textArea;
+    }
+
+    /**
+     * @param {String[]} completeList
+     */
+    setCompletionList(completeList) {
+        this.list = completeList;
+    }
+
+    setTextArea(textArea) {
+        this.textArea = textArea;
+    }
+
+    next() {
+        this.tabStruct.index++;
+        this.setCompletionOption();
+    }
+
+    prev() {
+        this.tabStruct.index --;
+        if (this.tabStruct.index < 0) {
+            // wrap to the last search match, and fix up to a real index
+            // value after we've matched.
+            this.tabStruct.index = Number.MAX_VALUE;
+        }
+        this.setCompletionOption();
+    }
+
+    setCompletionOption() {
+        var searchIndex = 0;
+        var targetIndex = this.tabStruct.index;
+        var text = this.tabStruct.original;
+
+        var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
+        // console.log("Searched in '%s' - got %s", text, search);
+        if (targetIndex === 0) { // 0 is always the original text
+            this.textArea.value = text;
+        }
+        else if (search && search[1]) {
+            // console.log("search found: " + search+" from "+text);
+            var expansion;
+
+            // FIXME: could do better than linear search here
+            for (var i=0; i < this.list.length; i++) {
+                if (searchIndex < targetIndex) {
+                    if (this.list[i].toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
+                        expansion = this.list[i];
+                        searchIndex++;
+                    }
+                }
+            }
+
+            if (searchIndex === targetIndex || targetIndex === Number.MAX_VALUE) {
+                if (search[0].length === text.length) {
+                    expansion += this.opts.startingWordSuffix;
+                }
+                else {
+                    expansion += this.opts.wordSuffix;
+                }
+                this.textArea.value = text.replace(
+                    /@?([a-zA-Z0-9_\-:\.]+)$/, expansion
+                );
+                // cancel blink
+                this.textArea.style["background-color"] = "";
+                if (targetIndex === Number.MAX_VALUE) {
+                    // wrap the index around to the last index found
+                    this.tabStruct.index = searchIndex;
+                    targetIndex = searchIndex;
+                }
+            }
+            else {
+                // console.log("wrapped!");
+                this.textArea.style["background-color"] = "#faa";
+                setTimeout(() => { // yay for lexical 'this'!
+                     this.textArea.style["background-color"] = "";
+                }, 150);
+                this.textArea.value = text;
+                this.tabStruct.index = 0;
+            }
+        }
+        else {
+            this.tabStruct.index = 0;
+        }
+    }
+
+    onKeyDown(ev) {
+        if (ev.keyCode !== KEY_TAB) {
+            if (ev.keyCode !== KEY_SHIFT && this.tabStruct.completing) {
+                // they're resuming typing; reset tab complete state vars.
+                this.tabStruct.completing = false;
+                this.tabStruct.index = 0;
+            }
+            return false;
+        }
+        // init struct if necessary
+        if (!this.tabStruct.completing) {
+            this.tabStruct.completing = true;
+            this.tabStruct.index = 0;
+            // cache starting text
+            this.tabStruct.original = this.textArea.value;
+        }
+
+        if (ev.shiftKey) {
+            this.prev();
+        }
+        else {
+            this.next();
+        }
+        // prevent the default TAB operation (typically focus shifting)
+        ev.preventDefault();
+        return true;
+    }
+
+};
+
+
+module.exports = TabComplete;
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 7c228b5c9d..3978ef2154 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -31,6 +31,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var CallHandler = require('../../../CallHandler');
+var TabComplete = require("../../../TabComplete");
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -67,11 +68,6 @@ module.exports = React.createClass({
     componentWillMount: function() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
-        this.tabStruct = {
-            completing: false,
-            original: null,
-            index: 0
-        };
         var self = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent
@@ -172,6 +168,14 @@ module.exports = React.createClass({
             this.props.room.roomId
         );
         this.resizeInput();
+
+        // xchat-style tab complete, add a colon if tab
+        // completing at the start of the text
+        this._tabComplete = new TabComplete({
+            textArea: this.refs.textarea,
+            startingWordSuffix: ": ",
+            wordSuffix: " "
+        });
     },
 
     componentWillUnmount: function() {
@@ -198,11 +202,38 @@ module.exports = React.createClass({
             this.onEnter(ev);
         }
         else if (ev.keyCode === KeyCode.TAB) {
-            var members = [];
+            var memberList = [];
             if (this.props.room) {
-                members = this.props.room.getJoinedMembers();
+                // TODO: We should cache this list and only update it when the
+                // member list changes
+                memberList = this.props.room.getJoinedMembers().sort(function(a, b) {
+                    var userA = a.user;
+                    var userB = b.user;
+                    if (userA && !userB) {
+                        return -1; // a comes first
+                    }
+                    else if (!userA && userB) {
+                        return 1; // b comes first
+                    }
+                    else if (!userA && !userB) {
+                        return 0; // don't care
+                    }
+                    else { // both User objects exist
+                        if (userA.lastActiveAgo < userB.lastActiveAgo) {
+                            return -1; // a comes first
+                        }
+                        else if (userA.lastActiveAgo > userB.lastActiveAgo) {
+                            return 1; // b comes first
+                        }
+                        else {
+                            return 0; // same last active ago
+                        }
+                    }
+                }).map(function(m) {
+                    return m.name || m.userId;
+                });
             }
-            this.onTab(ev, members);
+            this._tabComplete.setCompletionList(memberList);
         }
         else if (ev.keyCode === KeyCode.UP) {
             var input = this.refs.textarea.value;
@@ -222,11 +253,7 @@ module.exports = React.createClass({
                 this.resizeInput();
             }
         }
-        else if (ev.keyCode !== KeyCode.SHIFT && this.tabStruct.completing) {
-            // they're resuming typing; reset tab complete state vars.
-            this.tabStruct.completing = false;
-            this.tabStruct.index = 0;
-        }
+        this._tabComplete.onKeyDown(ev);
 
         var self = this;
         setTimeout(function() {
@@ -346,104 +373,6 @@ module.exports = React.createClass({
         ev.preventDefault();
     },
 
-    onTab: function(ev, sortedMembers) {
-        var textArea = this.refs.textarea;
-        if (!this.tabStruct.completing) {
-            this.tabStruct.completing = true;
-            this.tabStruct.index = 0;
-            // cache starting text
-            this.tabStruct.original = textArea.value;
-        }
-
-        // loop in the right direction
-        if (ev.shiftKey) {
-            this.tabStruct.index --;
-            if (this.tabStruct.index < 0) {
-                // wrap to the last search match, and fix up to a real index
-                // value after we've matched.
-                this.tabStruct.index = Number.MAX_VALUE;
-            }
-        }
-        else {
-            this.tabStruct.index++;
-        }
-
-        var searchIndex = 0;
-        var targetIndex = this.tabStruct.index;
-        var text = this.tabStruct.original;
-
-        var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
-        // console.log("Searched in '%s' - got %s", text, search);
-        if (targetIndex === 0) { // 0 is always the original text
-            textArea.value = text;
-        }
-        else if (search && search[1]) {
-            // console.log("search found: " + search+" from "+text);
-            var expansion;
-
-            // FIXME: could do better than linear search here
-            for (var i=0; i<sortedMembers.length; i++) {
-                var member = sortedMembers[i];
-                if (member.name && searchIndex < targetIndex) {
-                    if (member.name.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
-                        expansion = member.name;
-                        searchIndex++;
-                    }
-                }
-            }
-
-            if (searchIndex < targetIndex) { // then search raw mxids
-                for (var i=0; i<sortedMembers.length; i++) {
-                    if (searchIndex >= targetIndex) {
-                        break;
-                    }
-                    var userId = sortedMembers[i].userId;
-                    // === 1 because mxids are @username
-                    if (userId.toLowerCase().indexOf(search[1].toLowerCase()) === 1) {
-                        expansion = userId;
-                        searchIndex++;
-                    }
-                }
-            }
-
-            if (searchIndex === targetIndex ||
-                    targetIndex === Number.MAX_VALUE) {
-                // xchat-style tab complete, add a colon if tab
-                // completing at the start of the text
-                if (search[0].length === text.length) {
-                    expansion += ": ";
-                }
-                else {
-                    expansion += " ";
-                }
-                textArea.value = text.replace(
-                    /@?([a-zA-Z0-9_\-:\.]+)$/, expansion
-                );
-                // cancel blink
-                textArea.style["background-color"] = "";
-                if (targetIndex === Number.MAX_VALUE) {
-                    // wrap the index around to the last index found
-                    this.tabStruct.index = searchIndex;
-                    targetIndex = searchIndex;
-                }
-            }
-            else {
-                // console.log("wrapped!");
-                textArea.style["background-color"] = "#faa";
-                setTimeout(function() {
-                     textArea.style["background-color"] = "";
-                }, 150);
-                textArea.value = text;
-                this.tabStruct.index = 0;
-            }
-        }
-        else {
-            this.tabStruct.index = 0;
-        }
-        // prevent the default TAB operation (typically focus shifting)
-        ev.preventDefault();
-    },
-
     onTypingActivity: function() {
         this.isTyping = true;
         if (!this.userTypingTimer) {

From 26dc3cc553e49ee889e5579c32ca022cc7126961 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 10:59:10 +0000
Subject: [PATCH 02/20] Push up instantiation of TabComplete to RoomView

RoomView is the parent component which creates MessageComposer AND the status
bar. By making RoomView instantiate TabComplete we can scope instances
correctly rather than relying on singleton behaviour through dispatches. This
also makes communication between status bar and the MessageComposer infinitely
easier since they are now sharing the same TabComplete object.
---
 src/TabComplete.js                            | 16 ++++++++++++
 src/components/structures/RoomView.js         | 11 +++++++-
 src/components/views/rooms/MessageComposer.js | 25 +++++++++++--------
 3 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 5a6bfa8343..c49ef19e7f 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -45,6 +45,10 @@ class TabComplete {
         this.textArea = textArea;
     }
 
+    isTabCompleting() {
+        return this.tabStruct.completing;
+    }
+
     next() {
         this.tabStruct.index++;
         this.setCompletionOption();
@@ -117,15 +121,27 @@ class TabComplete {
         }
     }
 
+    /**
+     * @param {DOMEvent} e
+     * @return {Boolean} True if the tab complete state changed as a result of
+     * this event.
+     */
     onKeyDown(ev) {
         if (ev.keyCode !== KEY_TAB) {
             if (ev.keyCode !== KEY_SHIFT && this.tabStruct.completing) {
                 // they're resuming typing; reset tab complete state vars.
                 this.tabStruct.completing = false;
                 this.tabStruct.index = 0;
+                return true;
             }
             return false;
         }
+
+        if (!this.textArea) {
+            console.error("onKeyDown called before a <textarea> was set!");
+            return false;
+        }
+
         // init struct if necessary
         if (!this.tabStruct.completing) {
             this.tabStruct.completing = true;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index e7b97021df..853eda65a7 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -34,6 +34,7 @@ var WhoIsTyping = require("../../WhoIsTyping");
 var Modal = require("../../Modal");
 var sdk = require('../../index');
 var CallHandler = require('../../CallHandler');
+var TabComplete = require("../../TabComplete");
 var Resend = require("../../Resend");
 var dis = require("../../dispatcher");
 
@@ -85,6 +86,12 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
         this.savedScrollState = {atBottom: true};
+        // xchat-style tab complete, add a colon if tab
+        // completing at the start of the text
+        this.tabComplete = new TabComplete({
+            startingWordSuffix: ": ",
+            wordSuffix: " "
+        });
     },
 
     componentWillUnmount: function() {
@@ -1357,7 +1364,9 @@ module.exports = React.createClass({
             );
             if (canSpeak) {
                 messageComposer =
-                    <MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} callState={this.state.callState} />
+                    <MessageComposer
+                        room={this.state.room} roomView={this} uploadFile={this.uploadFile}
+                        callState={this.state.callState} tabComplete={this.tabComplete} />
             }
 
             // TODO: Why aren't we storing the term/scope/count in this format
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 3978ef2154..f4a694a123 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -31,7 +31,6 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var CallHandler = require('../../../CallHandler');
-var TabComplete = require("../../../TabComplete");
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -65,6 +64,10 @@ function mdownToHtml(mdown) {
 module.exports = React.createClass({
     displayName: 'MessageComposer',
 
+    propTypes: {
+        tabComplete: React.PropTypes.any
+    },
+
     componentWillMount: function() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
@@ -168,14 +171,9 @@ module.exports = React.createClass({
             this.props.room.roomId
         );
         this.resizeInput();
-
-        // xchat-style tab complete, add a colon if tab
-        // completing at the start of the text
-        this._tabComplete = new TabComplete({
-            textArea: this.refs.textarea,
-            startingWordSuffix: ": ",
-            wordSuffix: " "
-        });
+        if (this.props.tabComplete) {
+            this.props.tabComplete.setTextArea(this.refs.textarea);
+        }
     },
 
     componentWillUnmount: function() {
@@ -233,7 +231,9 @@ module.exports = React.createClass({
                     return m.name || m.userId;
                 });
             }
-            this._tabComplete.setCompletionList(memberList);
+            if (this.props.tabComplete) {
+                this.props.tabComplete.setCompletionList(memberList);
+            }
         }
         else if (ev.keyCode === KeyCode.UP) {
             var input = this.refs.textarea.value;
@@ -253,7 +253,10 @@ module.exports = React.createClass({
                 this.resizeInput();
             }
         }
-        this._tabComplete.onKeyDown(ev);
+
+        if (this.props.tabComplete) {
+            this.props.tabComplete.onKeyDown(ev);
+        }
 
         var self = this;
         setTimeout(function() {

From 400b5196bbe5076602d5f1e8d10e85721fc66ed2 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 14:11:34 +0000
Subject: [PATCH 03/20] Add TabCompleteBar. Hook up display to whether we are
 currently tab completing.

---
 src/TabComplete.js                           |  6 ++++
 src/component-index.js                       |  1 +
 src/components/structures/RoomView.js        | 11 ++++++-
 src/components/views/rooms/TabCompleteBar.js | 30 ++++++++++++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 src/components/views/rooms/TabCompleteBar.js

diff --git a/src/TabComplete.js b/src/TabComplete.js
index c49ef19e7f..1a798feba7 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -132,6 +132,9 @@ class TabComplete {
                 // they're resuming typing; reset tab complete state vars.
                 this.tabStruct.completing = false;
                 this.tabStruct.index = 0;
+                if (this.opts.onStateChange) {
+                    this.opts.onStateChange(this.tabStruct.completing);
+                }
                 return true;
             }
             return false;
@@ -148,6 +151,9 @@ class TabComplete {
             this.tabStruct.index = 0;
             // cache starting text
             this.tabStruct.original = this.textArea.value;
+            if (this.opts.onStateChange) {
+                this.opts.onStateChange(this.tabStruct.completing);
+            }
         }
 
         if (ev.shiftKey) {
diff --git a/src/component-index.js b/src/component-index.js
index 2f89e6d94b..8e87ef65cd 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -65,6 +65,7 @@ module.exports.components['views.rooms.RoomHeader'] = require('./components/view
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
+module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
 module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar');
 module.exports.components['views.settings.ChangeDisplayName'] = require('./components/views/settings/ChangeDisplayName');
 module.exports.components['views.settings.ChangePassword'] = require('./components/views/settings/ChangePassword');
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 853eda65a7..b7341e4f89 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -90,7 +90,10 @@ module.exports = React.createClass({
         // completing at the start of the text
         this.tabComplete = new TabComplete({
             startingWordSuffix: ": ",
-            wordSuffix: " "
+            wordSuffix: " ",
+            onStateChange: (isCompleting) => {
+                this.forceUpdate();
+            }
         });
     },
 
@@ -1284,6 +1287,12 @@ module.exports = React.createClass({
                         </div>
                     );
                 }
+                else if (this.tabComplete.isTabCompleting()) {
+                    var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
+                    statusBar = (
+                        <TabCompleteBar />
+                    );
+                }
                 else if (this.state.hasUnsentMessages) {
                     statusBar = (
                         <div className="mx_RoomView_connectionLostBar">
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
new file mode 100644
index 0000000000..c060202099
--- /dev/null
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+
+module.exports = React.createClass({
+    displayName: 'TabCompleteBar',
+
+    render: function() {
+        return (
+            <div> Tab Complete </div>
+        );
+    }
+});

From 41d4c1d14e6c36469092ef23c37d84f5391bccd7 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 14:34:25 +0000
Subject: [PATCH 04/20] Add TabComplete.Entry so we can render images AND
 text(!) - Add peek() option, all broken.

---
 src/TabComplete.js                            | 46 +++++++++++++------
 src/components/structures/RoomView.js         |  2 +-
 src/components/views/rooms/MessageComposer.js |  3 +-
 src/components/views/rooms/TabCompleteBar.js  | 12 ++++-
 4 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 1a798feba7..a14a7dadc6 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -26,16 +26,16 @@ class TabComplete {
         this.opts = opts;
 
         this.tabStruct = {
-            completing: false,
             original: null,
             index: 0
         };
+        this.completing = false;
         this.list = [];
         this.textArea = opts.textArea;
     }
 
     /**
-     * @param {String[]} completeList
+     * @param {TabComplete.Entry[]} completeList
      */
     setCompletionList(completeList) {
         this.list = completeList;
@@ -46,7 +46,7 @@ class TabComplete {
     }
 
     isTabCompleting() {
-        return this.tabStruct.completing;
+        return this.completing;
     }
 
     next() {
@@ -54,6 +54,15 @@ class TabComplete {
         this.setCompletionOption();
     }
 
+    /**
+     * @param {Number} numAheadToPeek
+     * @return {TabComplete.Entry[]}
+     */
+    peek(numAheadToPeek) {
+        var current = this.list[this.tabStruct.index];
+        return [current];
+    }
+
     prev() {
         this.tabStruct.index --;
         if (this.tabStruct.index < 0) {
@@ -81,8 +90,8 @@ class TabComplete {
             // FIXME: could do better than linear search here
             for (var i=0; i < this.list.length; i++) {
                 if (searchIndex < targetIndex) {
-                    if (this.list[i].toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
-                        expansion = this.list[i];
+                    if (this.list[i].text.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
+                        expansion = this.list[i].text;
                         searchIndex++;
                     }
                 }
@@ -121,6 +130,12 @@ class TabComplete {
         }
     }
 
+    notifyStateChange() {
+        if (this.opts.onStateChange) {
+            this.opts.onStateChange(this.completing);
+        }
+    }
+
     /**
      * @param {DOMEvent} e
      * @return {Boolean} True if the tab complete state changed as a result of
@@ -128,13 +143,11 @@ class TabComplete {
      */
     onKeyDown(ev) {
         if (ev.keyCode !== KEY_TAB) {
-            if (ev.keyCode !== KEY_SHIFT && this.tabStruct.completing) {
+            if (ev.keyCode !== KEY_SHIFT && this.completing) {
                 // they're resuming typing; reset tab complete state vars.
-                this.tabStruct.completing = false;
+                this.completing = false;
                 this.tabStruct.index = 0;
-                if (this.opts.onStateChange) {
-                    this.opts.onStateChange(this.tabStruct.completing);
-                }
+                this.notifyStateChange();
                 return true;
             }
             return false;
@@ -146,14 +159,11 @@ class TabComplete {
         }
 
         // init struct if necessary
-        if (!this.tabStruct.completing) {
-            this.tabStruct.completing = true;
+        if (!this.completing) {
+            this.completing = true;
             this.tabStruct.index = 0;
             // cache starting text
             this.tabStruct.original = this.textArea.value;
-            if (this.opts.onStateChange) {
-                this.opts.onStateChange(this.tabStruct.completing);
-            }
         }
 
         if (ev.shiftKey) {
@@ -164,10 +174,16 @@ class TabComplete {
         }
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
+        this.notifyStateChange();
         return true;
     }
 
 };
 
+TabComplete.Entry = function(text, image) {
+    this.text = text;
+    this.image = image;
+};
+
 
 module.exports = TabComplete;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index b7341e4f89..80f65ce0a4 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1290,7 +1290,7 @@ module.exports = React.createClass({
                 else if (this.tabComplete.isTabCompleting()) {
                     var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
                     statusBar = (
-                        <TabCompleteBar />
+                        <TabCompleteBar entries={this.tabComplete.peek(3)} />
                     );
                 }
                 else if (this.state.hasUnsentMessages) {
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index f4a694a123..4d68cace8d 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -31,6 +31,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var CallHandler = require('../../../CallHandler');
+var TabComplete = require("../../../TabComplete");
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -228,7 +229,7 @@ module.exports = React.createClass({
                         }
                     }
                 }).map(function(m) {
-                    return m.name || m.userId;
+                    return new TabComplete.Entry(m.name || m.userId);
                 });
             }
             if (this.props.tabComplete) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index c060202099..af695eccc5 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -22,9 +22,19 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 module.exports = React.createClass({
     displayName: 'TabCompleteBar',
 
+    propTypes: {
+        entries: React.PropTypes.array.isRequired
+    },
+
     render: function() {
         return (
-            <div> Tab Complete </div>
+            <div>
+            {this.props.entries.map(function(entry, i) {
+                return (
+                    <div key={i + ""}>{entry.text}</div>
+                );
+            })}
+            </div>
         );
     }
 });

From ab0a277d94c11439437f372b770c6ee3c563ba71 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 16:35:39 +0000
Subject: [PATCH 05/20] Rewrite tab-complete logic to allow peeking ahead

This primarily means pre-calculating the list of things we'll be looping over
and then returning matches from this list. Make the regex match be more generic
rather than sorta-kinda-user-id-like-ish.
---
 src/TabComplete.js | 210 +++++++++++++++++++++++++--------------------
 1 file changed, 119 insertions(+), 91 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index a14a7dadc6..23fea68f38 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -18,20 +18,22 @@ const DELAY_TIME_MS = 500;
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
 
+// word boundary -> 1 or more non-whitespace chars (group) -> end of line
+const MATCH_REGEX = /\b(\S+)$/;
+
 class TabComplete {
 
     constructor(opts) {
         opts.startingWordSuffix = opts.startingWordSuffix || "";
         opts.wordSuffix = opts.wordSuffix || "";
         this.opts = opts;
-
-        this.tabStruct = {
-            original: null,
-            index: 0
-        };
         this.completing = false;
-        this.list = [];
-        this.textArea = opts.textArea;
+        this.list = []; // full set of tab-completable things
+        this.matchedList = []; // subset of completable things to loop over
+        this.currentIndex = 0; // index in matchedList currently
+        this.originalText = null; // original input text when tab was first hit
+        this.textArea = opts.textArea; // DOMElement
+        this.isFirstWord = false; // true if you tab-complete on the first word
     }
 
     /**
@@ -41,99 +43,48 @@ class TabComplete {
         this.list = completeList;
     }
 
+    /**
+     * @param {DOMElement}
+     */
     setTextArea(textArea) {
         this.textArea = textArea;
     }
 
+    /**
+     * @return {Boolean}
+     */
     isTabCompleting() {
         return this.completing;
     }
 
-    next() {
-        this.tabStruct.index++;
-        this.setCompletionOption();
-    }
-
     /**
-     * @param {Number} numAheadToPeek
+     * @param {Number} numAheadToPeek Return *up to* this many elements.
      * @return {TabComplete.Entry[]}
      */
     peek(numAheadToPeek) {
-        var current = this.list[this.tabStruct.index];
-        return [current];
-    }
-
-    prev() {
-        this.tabStruct.index --;
-        if (this.tabStruct.index < 0) {
-            // wrap to the last search match, and fix up to a real index
-            // value after we've matched.
-            this.tabStruct.index = Number.MAX_VALUE;
+        if (this.matchedList.length === 0) {
+            return [];
         }
-        this.setCompletionOption();
-    }
 
-    setCompletionOption() {
-        var searchIndex = 0;
-        var targetIndex = this.tabStruct.index;
-        var text = this.tabStruct.original;
-
-        var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
-        // console.log("Searched in '%s' - got %s", text, search);
-        if (targetIndex === 0) { // 0 is always the original text
-            this.textArea.value = text;
-        }
-        else if (search && search[1]) {
-            // console.log("search found: " + search+" from "+text);
-            var expansion;
-
-            // FIXME: could do better than linear search here
-            for (var i=0; i < this.list.length; i++) {
-                if (searchIndex < targetIndex) {
-                    if (this.list[i].text.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
-                        expansion = this.list[i].text;
-                        searchIndex++;
-                    }
-                }
+        var peekList = [
+            this.matchedList[this.currentIndex]
+        ];
+        // return the current match item and then one with an index higher, and
+        // so on until we've reached the requested limit OR we've looped back
+        // around to our starting index.
+        for (var i = 1; i < numAheadToPeek; i++) {
+            var nextIndex = this.currentIndex + i;
+            if (nextIndex >= this.matchedList.length) {
+                // wrap around and take account of how far we've wrapped
+                nextIndex -= this.matchedList.length;
             }
-
-            if (searchIndex === targetIndex || targetIndex === Number.MAX_VALUE) {
-                if (search[0].length === text.length) {
-                    expansion += this.opts.startingWordSuffix;
-                }
-                else {
-                    expansion += this.opts.wordSuffix;
-                }
-                this.textArea.value = text.replace(
-                    /@?([a-zA-Z0-9_\-:\.]+)$/, expansion
-                );
-                // cancel blink
-                this.textArea.style["background-color"] = "";
-                if (targetIndex === Number.MAX_VALUE) {
-                    // wrap the index around to the last index found
-                    this.tabStruct.index = searchIndex;
-                    targetIndex = searchIndex;
-                }
-            }
-            else {
-                // console.log("wrapped!");
-                this.textArea.style["background-color"] = "#faa";
-                setTimeout(() => { // yay for lexical 'this'!
-                     this.textArea.style["background-color"] = "";
-                }, 150);
-                this.textArea.value = text;
-                this.tabStruct.index = 0;
+            // check for looping back to start
+            if (nextIndex === this.currentIndex) {
+                break; // no more items to return without looping
             }
+            peekList.push(this.matchedList[nextIndex]);
         }
-        else {
-            this.tabStruct.index = 0;
-        }
-    }
-
-    notifyStateChange() {
-        if (this.opts.onStateChange) {
-            this.opts.onStateChange(this.completing);
-        }
+        return peekList;
     }
 
     /**
@@ -146,8 +97,8 @@ class TabComplete {
             if (ev.keyCode !== KEY_SHIFT && this.completing) {
                 // they're resuming typing; reset tab complete state vars.
                 this.completing = false;
-                this.tabStruct.index = 0;
-                this.notifyStateChange();
+                this.currentIndex = 0;
+                this._notifyStateChange();
                 return true;
             }
             return false;
@@ -161,23 +112,100 @@ class TabComplete {
         // init struct if necessary
         if (!this.completing) {
             this.completing = true;
-            this.tabStruct.index = 0;
-            // cache starting text
-            this.tabStruct.original = this.textArea.value;
+            this.currentIndex = 0;
+            this._calculateCompletions();
         }
 
         if (ev.shiftKey) {
-            this.prev();
+            this.nextMatchedEntry(-1);
         }
         else {
-            this.next();
+            this.nextMatchedEntry(1);
         }
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
-        this.notifyStateChange();
+        this._notifyStateChange();
         return true;
     }
 
+    /**
+     * Set the textarea to the next value in the matched list.
+     * @param {Number} offset Offset to apply *before* setting the next value.
+     */
+    nextMatchedEntry(offset) {
+        if (this.matchedList.length === 0) {
+            return;
+        }
+
+        var looped = false;
+        // work out the new index, wrapping if necessary.
+        this.currentIndex += offset;
+        if (this.currentIndex >= this.matchedList.length) {
+            this.currentIndex = 0;
+            looped = true;
+        }
+        else if (this.currentIndex < 0) {
+            this.currentIndex = this.matchedList.length - 1;
+        }
+
+        var suffix = "";
+
+        if (this.currentIndex !== 0) { // don't suffix the original text!
+            suffix = this.isFirstWord ? this.opts.startingWordSuffix : this.opts.wordSuffix;
+        }
+
+        // set textarea to this new value
+        this.textArea.value = this._replaceWith(
+            this.matchedList[this.currentIndex].text + suffix
+        );
+
+        // visual display to the user that we looped - TODO: This should be configurable
+        if (looped) {
+            this.textArea.style["background-color"] = "#faa";
+            setTimeout(() => { // yay for lexical 'this'!
+                 this.textArea.style["background-color"] = "";
+            }, 150);
+        }
+        else {
+            this.textArea.style["background-color"] = ""; // cancel blinks TODO: required?
+        }
+    }
+
+    _replaceWith(newVal) {
+        return this.originalText.replace(MATCH_REGEX, newVal);
+    }
+
+    _calculateCompletions() {
+        this.originalText = this.textArea.value; // cache starting text
+
+        // grab the partial word from the text which we'll be tab-completing
+        var res = MATCH_REGEX.exec(this.originalText);
+        if (!res) {
+            this.matchedList = [];
+            return;
+        }
+        var [ ,group] = res; // ES6 destructuring; ignore first element
+        this.isFirstWord = group.length === this.originalText.length;
+
+        this.matchedList = [
+            new TabComplete.Entry(group) // first entry is always the original partial
+        ];
+
+        // find matching entries in the set of entries given to us
+        this.list.forEach((entry) => {
+            if (entry.text.toLowerCase().indexOf(group.toLowerCase()) === 0) {
+                this.matchedList.push(entry);
+            }
+        });
+
+        // console.log("_calculateCompletions => %s", JSON.stringify(this.matchedList));
+    }
+
+    _notifyStateChange() {
+        if (this.opts.onStateChange) {
+            this.opts.onStateChange(this.completing);
+        }
+    }
 };
 
 TabComplete.Entry = function(text, image) {

From 4e79c3c4c8194cb917826161c40fc614f49e5672 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 17:16:49 +0000
Subject: [PATCH 06/20] Add allowLooping opt for tab completion. Make peeking
 work.

---
 src/TabComplete.js                    | 44 ++++++++++++++++-----------
 src/components/structures/RoomView.js |  1 +
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 23fea68f38..7bb411b2b7 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -26,6 +26,7 @@ class TabComplete {
     constructor(opts) {
         opts.startingWordSuffix = opts.startingWordSuffix || "";
         opts.wordSuffix = opts.wordSuffix || "";
+        opts.allowLooping = opts.allowLooping || false;
         this.opts = opts;
         this.completing = false;
         this.list = []; // full set of tab-completable things
@@ -57,6 +58,12 @@ class TabComplete {
         return this.completing;
     }
 
+    stopTabCompleting() {
+        this.completing = false;
+        this.currentIndex = 0;
+        this._notifyStateChange();
+    }
+
     /**
      * @param {Number} numAheadToPeek Return *up to* this many elements.
      * @return {TabComplete.Entry[]}
@@ -65,25 +72,25 @@ class TabComplete {
         if (this.matchedList.length === 0) {
             return [];
         }
+        var peekList = [];
 
-        var peekList = [
-            this.matchedList[this.currentIndex]
-        ];
         // return the current match item and then one with an index higher, and
-        // so on until we've reached the requested limit OR we've looped back
-        // around to our starting index.
-        for (var i = 1; i < numAheadToPeek; i++) {
-            var nextIndex = this.currentIndex + i;
-            if (nextIndex >= this.matchedList.length) {
-                // wrap around and take account of how far we've wrapped
-                nextIndex -= this.matchedList.length;
+        // so on until we've reached the requested limit. If we hit the end of
+        // the list of options we're done.
+        for (var i = 0; i < numAheadToPeek; i++) {
+            var nextIndex;
+            if (this.opts.allowLooping) {
+                nextIndex = (this.currentIndex + i) % this.matchedList.length;
             }
-            // check for looping back to start
-            if (nextIndex === this.currentIndex) {
-                break; // no more items to return without looping
+            else {
+                nextIndex = this.currentIndex + i;
+                if (nextIndex === this.matchedList.length) {
+                    break;
+                }
             }
             peekList.push(this.matchedList[nextIndex]);
         }
+        // console.log("Peek list(%s): %s", numAheadToPeek, JSON.stringify(peekList));
         return peekList;
     }
 
@@ -96,9 +103,7 @@ class TabComplete {
         if (ev.keyCode !== KEY_TAB) {
             if (ev.keyCode !== KEY_SHIFT && this.completing) {
                 // they're resuming typing; reset tab complete state vars.
-                this.completing = false;
-                this.currentIndex = 0;
-                this._notifyStateChange();
+                this.stopTabCompleting();
                 return true;
             }
             return false;
@@ -137,16 +142,15 @@ class TabComplete {
             return;
         }
 
-        var looped = false;
         // work out the new index, wrapping if necessary.
         this.currentIndex += offset;
         if (this.currentIndex >= this.matchedList.length) {
             this.currentIndex = 0;
-            looped = true;
         }
         else if (this.currentIndex < 0) {
             this.currentIndex = this.matchedList.length - 1;
         }
+        var looped = this.currentIndex === 0; // catch forward and backward looping
 
         var suffix = "";
 
@@ -165,6 +169,10 @@ class TabComplete {
             setTimeout(() => { // yay for lexical 'this'!
                  this.textArea.style["background-color"] = "";
             }, 150);
+
+            if (!this.opts.allowLooping) {
+                this.stopTabCompleting();
+            }
         }
         else {
             this.textArea.style["background-color"] = ""; // cancel blinks TODO: required?
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 80f65ce0a4..d3b516c786 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -91,6 +91,7 @@ module.exports = React.createClass({
         this.tabComplete = new TabComplete({
             startingWordSuffix: ": ",
             wordSuffix: " ",
+            allowLooping: false,
             onStateChange: (isCompleting) => {
                 this.forceUpdate();
             }

From ba63b5dfffde60fc68b6ede68cf0bcd9a2025fd6 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 17:28:04 +0000
Subject: [PATCH 07/20] Add image URLs to TabComplete.Entry objects

---
 src/TabComplete.js                            |  4 ++--
 src/components/views/rooms/MessageComposer.js | 12 ++++++++++--
 src/components/views/rooms/TabCompleteBar.js  |  8 +++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 7bb411b2b7..32d25da554 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -216,9 +216,9 @@ class TabComplete {
     }
 };
 
-TabComplete.Entry = function(text, image) {
+TabComplete.Entry = function(text, imgUrl) {
     this.text = text;
-    this.image = image;
+    this.imgUrl = imgUrl;
 };
 
 
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 4d68cace8d..838f2cbb9a 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -204,7 +204,7 @@ module.exports = React.createClass({
             var memberList = [];
             if (this.props.room) {
                 // TODO: We should cache this list and only update it when the
-                // member list changes
+                // member list changes. It's also horrendous that this is done here.
                 memberList = this.props.room.getJoinedMembers().sort(function(a, b) {
                     var userA = a.user;
                     var userB = b.user;
@@ -229,7 +229,15 @@ module.exports = React.createClass({
                         }
                     }
                 }).map(function(m) {
-                    return new TabComplete.Entry(m.name || m.userId);
+                    var url = m.getAvatarUrl(
+                        MatrixClientPeg.get().getHomeserverUrl(), 32, 32, "crop"
+                    );
+                    return new TabComplete.Entry(
+                        m.name || m.userId,
+                        // TODO: annoying that the JS SDK can return 0-len strings when
+                        // it should be returning null.. can't use truthy constructs!
+                        url && url.length > 0 ? url : null
+                    );
                 });
             }
             if (this.props.tabComplete) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index af695eccc5..a4c804e28f 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -30,8 +30,14 @@ module.exports = React.createClass({
         return (
             <div>
             {this.props.entries.map(function(entry, i) {
+                var image = (
+                    entry.imgUrl ? <img src={entry.imgUrl} /> : null
+                );
                 return (
-                    <div key={i + ""}>{entry.text}</div>
+                    <div key={i + ""}>
+                        {image}
+                        {entry.text}
+                    </div>
                 );
             })}
             </div>

From c8aaee46d736be32fcd32d61ef8cf23b1deb3a23 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 21 Dec 2015 17:58:36 +0000
Subject: [PATCH 08/20] Mark a TODO for timeout handling

---
 src/TabComplete.js                    | 37 ++++++++++++++++++++++++---
 src/components/structures/RoomView.js |  1 +
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 32d25da554..be1520c5cd 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -27,6 +27,7 @@ class TabComplete {
         opts.startingWordSuffix = opts.startingWordSuffix || "";
         opts.wordSuffix = opts.wordSuffix || "";
         opts.allowLooping = opts.allowLooping || false;
+        opts.autoEnterTabComplete = opts.autoEnterTabComplete || false;
         this.opts = opts;
         this.completing = false;
         this.list = []; // full set of tab-completable things
@@ -35,6 +36,7 @@ class TabComplete {
         this.originalText = null; // original input text when tab was first hit
         this.textArea = opts.textArea; // DOMElement
         this.isFirstWord = false; // true if you tab-complete on the first word
+        this.enterTabCompleteTimerId = null;
     }
 
     /**
@@ -64,6 +66,12 @@ class TabComplete {
         this._notifyStateChange();
     }
 
+    startTabCompleting() {
+        this.completing = true;
+        this.currentIndex = 0;
+        this._calculateCompletions();
+    }
+
     /**
      * @param {Number} numAheadToPeek Return *up to* this many elements.
      * @return {TabComplete.Entry[]}
@@ -106,6 +114,31 @@ class TabComplete {
                 this.stopTabCompleting();
                 return true;
             }
+
+            if (this.opts.autoEnterTabComplete) {
+                /*
+                TODO:
+                 - This is passive so we shouldn't clobber the partial word that
+                   the user may have entered. This requires more logic to handle
+                   that vs a normal TAB which does clobber.
+                 - The first invocation of this timer will give no results because
+                   we horribly set the enumeration onKeyDown in MessageComposer, which
+                   was never actually hit. We should hook into RoomView's RoomState.members
+                   event and set the list there.
+                
+
+                clearTimeout(this.enterTabCompleteTimerId);
+                this.enterTabCompleteTimerId = setTimeout(() => {
+                    if (!this.completing) {
+                        // inject a fake tab event so we use the same code paths
+                        this.onKeyDown({
+                            keyCode: KEY_TAB,
+                            preventDefault: function(){} // NOP
+                        })
+                    }
+                }, DELAY_TIME_MS); */
+            }
+
             return false;
         }
 
@@ -116,9 +149,7 @@ class TabComplete {
 
         // init struct if necessary
         if (!this.completing) {
-            this.completing = true;
-            this.currentIndex = 0;
-            this._calculateCompletions();
+            this.startTabCompleting();
         }
 
         if (ev.shiftKey) {
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index d3b516c786..6233986362 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -92,6 +92,7 @@ module.exports = React.createClass({
             startingWordSuffix: ": ",
             wordSuffix: " ",
             allowLooping: false,
+            autoEnterTabComplete: true,
             onStateChange: (isCompleting) => {
                 this.forceUpdate();
             }

From 618978d955f5d2f2c838b667854b5dce0d832801 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 22 Dec 2015 00:47:04 +0000
Subject: [PATCH 09/20] add appropriate CSS for the TabCompleteBar

---
 src/components/structures/RoomView.js        | 11 ++++++++++-
 src/components/views/rooms/TabCompleteBar.js | 10 ++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 6233986362..d34cb28dca 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1292,7 +1292,16 @@ module.exports = React.createClass({
                 else if (this.tabComplete.isTabCompleting()) {
                     var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
                     statusBar = (
-                        <TabCompleteBar entries={this.tabComplete.peek(3)} />
+                        <div className="mx_RoomView_tabCompleteBar">
+                            <div className="mx_RoomView_tabCompleteImage">...</div>
+                            <div className="mx_RoomView_tabCompleteWrapper">
+                                <TabCompleteBar entries={this.tabComplete.peek(6)} />
+                                <div className="mx_RoomView_tabCompleteEol">
+                                    <img src="img/eol.svg" width="22" height="16" alt="->|"/>
+                                    Auto-complete
+                                </div>
+                            </div>
+                        </div>
                     );
                 }
                 else if (this.state.hasUnsentMessages) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index a4c804e28f..05bf2a7901 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -28,15 +28,17 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div>
+            <div className="mx_TabCompleteBar">
             {this.props.entries.map(function(entry, i) {
                 var image = (
-                    entry.imgUrl ? <img src={entry.imgUrl} /> : null
+                    entry.imgUrl ? <img src={entry.imgUrl} width="24" height="24"/> : null
                 );
                 return (
-                    <div key={i + ""}>
+                    <div key={i + ""} className="mx_TabCompleteBar_item">
                         {image}
-                        {entry.text}
+                        <span className="mx_TabCompleteBar_text">
+                            {entry.text}
+                        </span>
                     </div>
                 );
             })}

From 0dbb8d52945c6ea72e8da0ed7745ec8ebcf56c06 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 10:00:30 +0000
Subject: [PATCH 10/20] Use MemberAvatar to generate image JSX. Split out
 entries from tab-complete logic

---
 src/TabComplete.js                            | 13 ++--
 src/TabCompleteEntries.js                     | 65 +++++++++++++++++++
 src/components/views/rooms/MessageComposer.js | 12 +---
 src/components/views/rooms/TabCompleteBar.js  |  7 +-
 4 files changed, 73 insertions(+), 24 deletions(-)
 create mode 100644 src/TabCompleteEntries.js

diff --git a/src/TabComplete.js b/src/TabComplete.js
index be1520c5cd..7e5a02c7ea 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -13,6 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+var Entry = require("./TabCompleteEntries").Entry;
 
 const DELAY_TIME_MS = 500;
 const KEY_TAB = 9;
@@ -40,7 +41,7 @@ class TabComplete {
     }
 
     /**
-     * @param {TabComplete.Entry[]} completeList
+     * @param {Entry[]} completeList
      */
     setCompletionList(completeList) {
         this.list = completeList;
@@ -74,7 +75,7 @@ class TabComplete {
 
     /**
      * @param {Number} numAheadToPeek Return *up to* this many elements.
-     * @return {TabComplete.Entry[]}
+     * @return {Entry[]}
      */
     peek(numAheadToPeek) {
         if (this.matchedList.length === 0) {
@@ -227,7 +228,7 @@ class TabComplete {
         this.isFirstWord = group.length === this.originalText.length;
 
         this.matchedList = [
-            new TabComplete.Entry(group) // first entry is always the original partial
+            new Entry(group) // first entry is always the original partial
         ];
 
         // find matching entries in the set of entries given to us
@@ -247,10 +248,4 @@ class TabComplete {
     }
 };
 
-TabComplete.Entry = function(text, imgUrl) {
-    this.text = text;
-    this.imgUrl = imgUrl;
-};
-
-
 module.exports = TabComplete;
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
new file mode 100644
index 0000000000..00af3473c8
--- /dev/null
+++ b/src/TabCompleteEntries.js
@@ -0,0 +1,65 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require("react");
+var sdk = require("./index");
+
+class Entry {
+    constructor(text) {
+        this.text = text;
+    }
+
+    /**
+     * @return {string} The text to display in this entry.
+     */
+    getText() {
+        return this.text;
+    }
+
+    /**
+     * @return {ReactClass} Raw JSX
+     */
+    getImageJsx() {
+        return null;
+    }
+
+    /**
+     * @return {?string} The unique key= prop for React dedupe
+     */
+    getKey() {
+        return null;
+    }
+}
+
+class MemberEntry extends Entry {
+    constructor(member) {
+        super(member.name || member.userId);
+        this.member = member;
+    }
+
+    getImageJsx() {
+        var MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        return (
+            <MemberAvatar member={this.member} width={24} height={24} />
+        );
+    }
+
+    getKey() {
+        return this.member.userId;
+    }
+}
+
+module.exports.Entry = Entry;
+module.exports.MemberEntry = MemberEntry;
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 838f2cbb9a..2e35614f9c 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -31,7 +31,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var CallHandler = require('../../../CallHandler');
-var TabComplete = require("../../../TabComplete");
+var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -229,15 +229,7 @@ module.exports = React.createClass({
                         }
                     }
                 }).map(function(m) {
-                    var url = m.getAvatarUrl(
-                        MatrixClientPeg.get().getHomeserverUrl(), 32, 32, "crop"
-                    );
-                    return new TabComplete.Entry(
-                        m.name || m.userId,
-                        // TODO: annoying that the JS SDK can return 0-len strings when
-                        // it should be returning null.. can't use truthy constructs!
-                        url && url.length > 0 ? url : null
-                    );
+                    return new MemberEntry(m);
                 });
             }
             if (this.props.tabComplete) {
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index 05bf2a7901..413aacbb3b 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -30,12 +30,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_TabCompleteBar">
             {this.props.entries.map(function(entry, i) {
-                var image = (
-                    entry.imgUrl ? <img src={entry.imgUrl} width="24" height="24"/> : null
-                );
                 return (
-                    <div key={i + ""} className="mx_TabCompleteBar_item">
-                        {image}
+                    <div key={entry.getKey() || i + ""} className="mx_TabCompleteBar_item">
+                        {entry.getImageJsx()}
                         <span className="mx_TabCompleteBar_text">
                             {entry.text}
                         </span>

From e541ddb060c1f47fced0ca6b25b8fead58e339b7 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 11:14:36 +0000
Subject: [PATCH 11/20] Auto-complete clicked suggestions

---
 src/TabComplete.js                            | 40 ++++++++++++++-----
 src/TabCompleteEntries.js                     |  7 ++++
 src/components/structures/RoomView.js         |  1 +
 src/components/views/rooms/MessageComposer.js |  6 +--
 src/components/views/rooms/TabCompleteBar.js  |  5 ++-
 5 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 7e5a02c7ea..fc3478b8f7 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -29,6 +29,7 @@ class TabComplete {
         opts.wordSuffix = opts.wordSuffix || "";
         opts.allowLooping = opts.allowLooping || false;
         opts.autoEnterTabComplete = opts.autoEnterTabComplete || false;
+        opts.onClickCompletes = opts.onClickCompletes || false;
         this.opts = opts;
         this.completing = false;
         this.list = []; // full set of tab-completable things
@@ -45,6 +46,14 @@ class TabComplete {
      */
     setCompletionList(completeList) {
         this.list = completeList;
+        if (this.opts.onClickCompletes) {
+            // assign onClick listeners for each entry to complete the text
+            this.list.forEach((l) => {
+                l.onClick = () => {
+                    this.completeTo(l.getText());
+                }
+            });
+        }
     }
 
     /**
@@ -73,6 +82,17 @@ class TabComplete {
         this._calculateCompletions();
     }
 
+    /**
+     * Do an auto-complete with the given word. This terminates the tab-complete.
+     * @param {string} someVal
+     */
+    completeTo(someVal) {
+        this.textArea.value = this._replaceWith(someVal, true);
+        this.stopTabCompleting();
+        // keep focus on the text area
+        this.textArea.focus();
+    }
+
     /**
      * @param {Number} numAheadToPeek Return *up to* this many elements.
      * @return {Entry[]}
@@ -184,15 +204,10 @@ class TabComplete {
         }
         var looped = this.currentIndex === 0; // catch forward and backward looping
 
-        var suffix = "";
-
-        if (this.currentIndex !== 0) { // don't suffix the original text!
-            suffix = this.isFirstWord ? this.opts.startingWordSuffix : this.opts.wordSuffix;
-        }
-
         // set textarea to this new value
         this.textArea.value = this._replaceWith(
-            this.matchedList[this.currentIndex].text + suffix
+            this.matchedList[this.currentIndex].text,
+            this.currentIndex !== 0 // don't suffix the original text!
         );
 
         // visual display to the user that we looped - TODO: This should be configurable
@@ -211,8 +226,15 @@ class TabComplete {
         }
     }
 
-    _replaceWith(newVal) {
-        return this.originalText.replace(MATCH_REGEX, newVal);
+    _replaceWith(newVal, includeSuffix) {
+        var replacementText = (
+            newVal + (
+                includeSuffix ?
+                    (this.isFirstWord ? this.opts.startingWordSuffix : this.opts.wordSuffix) :
+                    ""
+            )
+        );
+        return this.originalText.replace(MATCH_REGEX, replacementText);
     }
 
     _calculateCompletions() {
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
index 00af3473c8..81a51c10bd 100644
--- a/src/TabCompleteEntries.js
+++ b/src/TabCompleteEntries.js
@@ -41,6 +41,13 @@ class Entry {
     getKey() {
         return null;
     }
+
+    /**
+     * Called when this entry is clicked.
+     */
+    onClick() {
+        // NOP
+    }
 }
 
 class MemberEntry extends Entry {
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index d34cb28dca..a7520de94f 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -93,6 +93,7 @@ module.exports = React.createClass({
             wordSuffix: " ",
             allowLooping: false,
             autoEnterTabComplete: true,
+            onClickCompletes: true,
             onStateChange: (isCompleting) => {
                 this.forceUpdate();
             }
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 2e35614f9c..95b3616b40 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -201,8 +201,8 @@ module.exports = React.createClass({
             this.onEnter(ev);
         }
         else if (ev.keyCode === KeyCode.TAB) {
-            var memberList = [];
-            if (this.props.room) {
+            if (this.props.tabComplete && this.props.room) {
+                var memberList = [];
                 // TODO: We should cache this list and only update it when the
                 // member list changes. It's also horrendous that this is done here.
                 memberList = this.props.room.getJoinedMembers().sort(function(a, b) {
@@ -231,8 +231,6 @@ module.exports = React.createClass({
                 }).map(function(m) {
                     return new MemberEntry(m);
                 });
-            }
-            if (this.props.tabComplete) {
                 this.props.tabComplete.setCompletionList(memberList);
             }
         }
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
index 413aacbb3b..9668c4b3ac 100644
--- a/src/components/views/rooms/TabCompleteBar.js
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -31,10 +31,11 @@ module.exports = React.createClass({
             <div className="mx_TabCompleteBar">
             {this.props.entries.map(function(entry, i) {
                 return (
-                    <div key={entry.getKey() || i + ""} className="mx_TabCompleteBar_item">
+                    <div key={entry.getKey() || i + ""} className="mx_TabCompleteBar_item"
+                            onClick={entry.onClick.bind(entry)} >
                         {entry.getImageJsx()}
                         <span className="mx_TabCompleteBar_text">
-                            {entry.text}
+                            {entry.getText()}
                         </span>
                     </div>
                 );

From e077517faf6218a9acb284ca4795e85f55a8fbd4 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 15:13:11 +0000
Subject: [PATCH 12/20] Ignore more keys when determining if the user is typing

Specifically ignore CTRL, ALT, META, SHIFT, WINDOWS.
---
 src/TabComplete.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index fc3478b8f7..958ec76118 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -18,6 +18,7 @@ var Entry = require("./TabCompleteEntries").Entry;
 const DELAY_TIME_MS = 500;
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
+const KEY_WINDOWS = 91;
 
 // word boundary -> 1 or more non-whitespace chars (group) -> end of line
 const MATCH_REGEX = /\b(\S+)$/;
@@ -130,7 +131,8 @@ class TabComplete {
      */
     onKeyDown(ev) {
         if (ev.keyCode !== KEY_TAB) {
-            if (ev.keyCode !== KEY_SHIFT && this.completing) {
+            if (this.completing && ev.keyCode !== KEY_SHIFT &&
+                    !ev.metaKey && !ev.ctrlKey && !ev.altKey && ev.keyCode !== KEY_WINDOWS) {
                 // they're resuming typing; reset tab complete state vars.
                 this.stopTabCompleting();
                 return true;

From 460f68caef1486afdfc3d6c41362462025336aaf Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 15:38:23 +0000
Subject: [PATCH 13/20] Move RoomMember[] -> MemberEntry[] conversion somewhere
 sensible

This is required for automatically entering tab-complete mode because
onKeyDown is NOT called in that case, so we need to make sure to have a
membership list hanging around.
---
 src/TabCompleteEntries.js                     | 29 ++++++++++++++++
 src/components/structures/RoomView.js         | 18 ++++++++++
 src/components/views/rooms/MessageComposer.js | 34 -------------------
 3 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
index 81a51c10bd..6d1a51c9b2 100644
--- a/src/TabCompleteEntries.js
+++ b/src/TabCompleteEntries.js
@@ -68,5 +68,34 @@ class MemberEntry extends Entry {
     }
 }
 
+MemberEntry.fromMemberList = function(members) {
+    return members.sort(function(a, b) {
+        var userA = a.user;
+        var userB = b.user;
+        if (userA && !userB) {
+            return -1; // a comes first
+        }
+        else if (!userA && userB) {
+            return 1; // b comes first
+        }
+        else if (!userA && !userB) {
+            return 0; // don't care
+        }
+        else { // both User objects exist
+            if (userA.lastActiveAgo < userB.lastActiveAgo) {
+                return -1; // a comes first
+            }
+            else if (userA.lastActiveAgo > userB.lastActiveAgo) {
+                return 1; // b comes first
+            }
+            else {
+                return 0; // same last active ago
+            }
+        }
+    }).map(function(m) {
+        return new MemberEntry(m);
+    });
+}
+
 module.exports.Entry = Entry;
 module.exports.MemberEntry = MemberEntry;
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 2e649b71c0..20f724c609 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -35,6 +35,7 @@ var Modal = require("../../Modal");
 var sdk = require('../../index');
 var CallHandler = require('../../CallHandler');
 var TabComplete = require("../../TabComplete");
+var MemberEntry = require("../../TabCompleteEntries").MemberEntry;
 var Resend = require("../../Resend");
 var dis = require("../../dispatcher");
 
@@ -264,6 +265,11 @@ module.exports = React.createClass({
     },
 
     onRoomStateMember: function(ev, state, member) {
+        if (member.roomId === this.props.roomId) {
+            // a member state changed in this room, refresh the tab complete list
+            this._updateTabCompleteList(this.state.room);
+        }
+
         if (!this.props.ConferenceHandler) {
             return;
         }
@@ -326,6 +332,18 @@ module.exports = React.createClass({
 
         window.addEventListener('resize', this.onResize);
         this.onResize();
+
+        this._updateTabCompleteList(this.state.room);
+    },
+
+    _updateTabCompleteList: function(room) {
+        if (!room || !this.tabComplete) {
+            return;
+        }
+        console.log("_updateTabCompleteList");
+        this.tabComplete.setCompletionList(
+            MemberEntry.fromMemberList(room.getJoinedMembers())
+        );
     },
 
     _initialiseMessagePanel: function() {
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index acfdd55694..5ac4a24908 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -200,40 +200,6 @@ module.exports = React.createClass({
             this.sentHistory.push(input);
             this.onEnter(ev);
         }
-        else if (ev.keyCode === KeyCode.TAB) {
-            if (this.props.tabComplete && this.props.room) {
-                var memberList = [];
-                // TODO: We should cache this list and only update it when the
-                // member list changes. It's also horrendous that this is done here.
-                memberList = this.props.room.getJoinedMembers().sort(function(a, b) {
-                    var userA = a.user;
-                    var userB = b.user;
-                    if (userA && !userB) {
-                        return -1; // a comes first
-                    }
-                    else if (!userA && userB) {
-                        return 1; // b comes first
-                    }
-                    else if (!userA && !userB) {
-                        return 0; // don't care
-                    }
-                    else { // both User objects exist
-                        if (userA.lastActiveAgo < userB.lastActiveAgo) {
-                            return -1; // a comes first
-                        }
-                        else if (userA.lastActiveAgo > userB.lastActiveAgo) {
-                            return 1; // b comes first
-                        }
-                        else {
-                            return 0; // same last active ago
-                        }
-                    }
-                }).map(function(m) {
-                    return new MemberEntry(m);
-                });
-                this.props.tabComplete.setCompletionList(memberList);
-            }
-        }
         else if (ev.keyCode === KeyCode.UP) {
             var input = this.refs.textarea.value;
             var offset = this.refs.textarea.selectionStart || 0;

From 452c265e6a5c0e062dd4be284f4391423b10a9df Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 16:49:58 +0000
Subject: [PATCH 14/20] Implement automatically entering tab complete mode
 after a short delay

This seems to work. Manually tested for sanity.
---
 src/TabComplete.js                    | 54 ++++++++++++++++-----------
 src/components/structures/RoomView.js |  1 -
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 958ec76118..e806833242 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -15,7 +15,7 @@ limitations under the License.
 */
 var Entry = require("./TabCompleteEntries").Entry;
 
-const DELAY_TIME_MS = 500;
+const DELAY_TIME_MS = 1000;
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
 const KEY_WINDOWS = 91;
@@ -40,6 +40,7 @@ class TabComplete {
         this.textArea = opts.textArea; // DOMElement
         this.isFirstWord = false; // true if you tab-complete on the first word
         this.enterTabCompleteTimerId = null;
+        this.inPassiveMode = false;
     }
 
     /**
@@ -68,7 +69,8 @@ class TabComplete {
      * @return {Boolean}
      */
     isTabCompleting() {
-        return this.completing;
+        // actually have things to tab over
+        return this.completing && this.matchedList.length > 1;
     }
 
     stopTabCompleting() {
@@ -130,36 +132,35 @@ class TabComplete {
      * this event.
      */
     onKeyDown(ev) {
+        var wasInPassiveMode = this.inPassiveMode && !ev.passive;
+        this.inPassiveMode = ev.passive;
+
         if (ev.keyCode !== KEY_TAB) {
             if (this.completing && ev.keyCode !== KEY_SHIFT &&
                     !ev.metaKey && !ev.ctrlKey && !ev.altKey && ev.keyCode !== KEY_WINDOWS) {
                 // they're resuming typing; reset tab complete state vars.
                 this.stopTabCompleting();
-                return true;
+
+                // fall through to auto-enter-tab-completing if set
+                if (!this.opts.autoEnterTabComplete) {
+                    return true;
+                }
             }
 
             if (this.opts.autoEnterTabComplete) {
-                /*
-                TODO:
-                 - This is passive so we shouldn't clobber the partial word that
-                   the user may have entered. This requires more logic to handle
-                   that vs a normal TAB which does clobber.
-                 - The first invocation of this timer will give no results because
-                   we horribly set the enumeration onKeyDown in MessageComposer, which
-                   was never actually hit. We should hook into RoomView's RoomState.members
-                   event and set the list there.
-                
-
                 clearTimeout(this.enterTabCompleteTimerId);
                 this.enterTabCompleteTimerId = setTimeout(() => {
                     if (!this.completing) {
                         // inject a fake tab event so we use the same code paths
+                        // as much as possible. Add a 'passive' flag to indicate
+                        // that they didn't really hit this key.
                         this.onKeyDown({
                             keyCode: KEY_TAB,
+                            passive: true,
                             preventDefault: function(){} // NOP
                         })
                     }
-                }, DELAY_TIME_MS); */
+                }, DELAY_TIME_MS);
             }
 
             return false;
@@ -179,8 +180,12 @@ class TabComplete {
             this.nextMatchedEntry(-1);
         }
         else {
-            this.nextMatchedEntry(1);
+            // if we were in passive mode we got out of sync by incrementing the
+            // index to show the peek view but not set the text area. Therefore,
+            // we want to set the *current* index rather than the *next* index.
+            this.nextMatchedEntry(wasInPassiveMode ? 0 : 1);
         }
+
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
         this._notifyStateChange();
@@ -204,14 +209,19 @@ class TabComplete {
         else if (this.currentIndex < 0) {
             this.currentIndex = this.matchedList.length - 1;
         }
-        var looped = this.currentIndex === 0; // catch forward and backward looping
-
-        // set textarea to this new value
-        this.textArea.value = this._replaceWith(
-            this.matchedList[this.currentIndex].text,
-            this.currentIndex !== 0 // don't suffix the original text!
+        var looped = (
+            // impossible to loop if they've never hit tab; catch forward and backward looping
+            !this.inPassiveMode && this.currentIndex === 0
         );
 
+        if (!this.inPassiveMode) {
+            // set textarea to this new value
+            this.textArea.value = this._replaceWith(
+                this.matchedList[this.currentIndex].text,
+                this.currentIndex !== 0 // don't suffix the original text!
+            );
+        }
+
         // visual display to the user that we looped - TODO: This should be configurable
         if (looped) {
             this.textArea.style["background-color"] = "#faa";
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 20f724c609..f1ce0fb6ba 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -340,7 +340,6 @@ module.exports = React.createClass({
         if (!room || !this.tabComplete) {
             return;
         }
-        console.log("_updateTabCompleteList");
         this.tabComplete.setCompletionList(
             MemberEntry.fromMemberList(room.getJoinedMembers())
         );

From 62c378a619e9c95fbac5d2cd7c2fbf156c7d93eb Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 22 Dec 2015 17:38:24 +0000
Subject: [PATCH 15/20] Sort out the mess that is Javascript's \b - Fixes
 vector-im/vector-web#189
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

\b is *the worst*. From MDN:

Note: JavaScript's regular expression engine defines a specific set of
characters to be "word" characters. Any character not in that set is considered
a word break. This set of characters is fairly limited: it consists solely of
the Roman alphabet in both upper- and lower-case, decimal digits, and the
underscore character. Accented characters, such as "é" or "ü" are,
unfortunately, treated as word breaks.

We fix this by matching on whitespace instead, but then need to tweak the
replace() code since that bluntly replaces the entire match (which now includes
whitespace). It all works now and I can happily tab-complete non-ascii names.
---
 src/TabComplete.js | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index e806833242..64c4479efb 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -20,8 +20,14 @@ const KEY_TAB = 9;
 const KEY_SHIFT = 16;
 const KEY_WINDOWS = 91;
 
-// word boundary -> 1 or more non-whitespace chars (group) -> end of line
-const MATCH_REGEX = /\b(\S+)$/;
+// NB: DO NOT USE \b its "words" are roman alphabet only!
+//
+// Capturing group containing the start
+// of line or a whitespace char
+//     \_______________       __________Capturing group of 1 or more non-whitespace chars
+//                    _|__  _|_         followed by the end of line
+//                   /    \/   \
+const MATCH_REGEX = /(^|\s)(\S+)$/;
 
 class TabComplete {
 
@@ -239,8 +245,22 @@ class TabComplete {
     }
 
     _replaceWith(newVal, includeSuffix) {
+        // The regex to replace the input matches a character of whitespace AND
+        // the partial word. If we just use string.replace() with the regex it will
+        // replace the partial word AND the character of whitespace. We want to
+        // preserve whatever that character is (\n, \t, etc) so find out what it is now.
+        var boundaryChar;
+        var res = MATCH_REGEX.exec(this.originalText);
+        if (res) {
+            boundaryChar = res[1]; // the first captured group
+        }
+        if (boundaryChar === undefined) {
+            console.warn("Failed to find boundary char on text: '%s'", this.originalText);
+            boundaryChar = "";
+        }
+
         var replacementText = (
-            newVal + (
+            boundaryChar + newVal + (
                 includeSuffix ?
                     (this.isFirstWord ? this.opts.startingWordSuffix : this.opts.wordSuffix) :
                     ""
@@ -258,16 +278,17 @@ class TabComplete {
             this.matchedList = [];
             return;
         }
-        var [ ,group] = res; // ES6 destructuring; ignore first element
-        this.isFirstWord = group.length === this.originalText.length;
+        // ES6 destructuring; ignore first element (the complete match)
+        var [ , boundaryGroup, partialGroup] = res;
+        this.isFirstWord = partialGroup.length === this.originalText.length;
 
         this.matchedList = [
-            new Entry(group) // first entry is always the original partial
+            new Entry(partialGroup) // first entry is always the original partial
         ];
 
         // find matching entries in the set of entries given to us
         this.list.forEach((entry) => {
-            if (entry.text.toLowerCase().indexOf(group.toLowerCase()) === 0) {
+            if (entry.text.toLowerCase().indexOf(partialGroup.toLowerCase()) === 0) {
                 this.matchedList.push(entry);
             }
         });

From 7e1b107f4cf091a0bafa70449f7ddfbb83d80f23 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 09:34:34 +0000
Subject: [PATCH 16/20] Review comments

---
 src/TabComplete.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 64c4479efb..9cd438892a 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -134,8 +134,6 @@ class TabComplete {
 
     /**
      * @param {DOMEvent} e
-     * @return {Boolean} True if the tab complete state changed as a result of
-     * this event.
      */
     onKeyDown(ev) {
         var wasInPassiveMode = this.inPassiveMode && !ev.passive;
@@ -215,8 +213,8 @@ class TabComplete {
         else if (this.currentIndex < 0) {
             this.currentIndex = this.matchedList.length - 1;
         }
-        var looped = (
-            // impossible to loop if they've never hit tab; catch forward and backward looping
+        var isTransitioningToOriginalText = (
+            // impossible to transition if they've never hit tab
             !this.inPassiveMode && this.currentIndex === 0
         );
 
@@ -229,7 +227,7 @@ class TabComplete {
         }
 
         // visual display to the user that we looped - TODO: This should be configurable
-        if (looped) {
+        if (isTransitioningToOriginalText) {
             this.textArea.style["background-color"] = "#faa";
             setTimeout(() => { // yay for lexical 'this'!
                  this.textArea.style["background-color"] = "";
@@ -266,7 +264,9 @@ class TabComplete {
                     ""
             )
         );
-        return this.originalText.replace(MATCH_REGEX, replacementText);
+        return this.originalText.replace(MATCH_REGEX, function() {
+            return replacementText; // function form to avoid `$` special-casing
+        });
     }
 
     _calculateCompletions() {

From 095f82feeef57ca0b010f2d965884fb34b65c883 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 10:35:54 +0000
Subject: [PATCH 17/20] Remove boolean returns

---
 src/TabComplete.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 9cd438892a..b6c10af532 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -147,7 +147,7 @@ class TabComplete {
 
                 // fall through to auto-enter-tab-completing if set
                 if (!this.opts.autoEnterTabComplete) {
-                    return true;
+                    return;
                 }
             }
 
@@ -167,12 +167,12 @@ class TabComplete {
                 }, DELAY_TIME_MS);
             }
 
-            return false;
+            return;
         }
 
         if (!this.textArea) {
             console.error("onKeyDown called before a <textarea> was set!");
-            return false;
+            return;
         }
 
         // init struct if necessary
@@ -193,7 +193,6 @@ class TabComplete {
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
         this._notifyStateChange();
-        return true;
     }
 
     /**

From b80015c69c39e2a9df8038a46f121156a233fd1e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 13:33:44 +0000
Subject: [PATCH 18/20] More comments; remove redundant if statement

---
 src/TabComplete.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index b6c10af532..fb2571a8f8 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -140,17 +140,15 @@ class TabComplete {
         this.inPassiveMode = ev.passive;
 
         if (ev.keyCode !== KEY_TAB) {
+            // pressing any key (except shift, windows, cmd (OSX) and ctrl/alt combinations)
+            // aborts the current tab completion
             if (this.completing && ev.keyCode !== KEY_SHIFT &&
                     !ev.metaKey && !ev.ctrlKey && !ev.altKey && ev.keyCode !== KEY_WINDOWS) {
                 // they're resuming typing; reset tab complete state vars.
                 this.stopTabCompleting();
-
-                // fall through to auto-enter-tab-completing if set
-                if (!this.opts.autoEnterTabComplete) {
-                    return;
-                }
             }
 
+            // pressing any key at all (except tab) restarts the automatic tab-complete timer
             if (this.opts.autoEnterTabComplete) {
                 clearTimeout(this.enterTabCompleteTimerId);
                 this.enterTabCompleteTimerId = setTimeout(() => {
@@ -170,6 +168,8 @@ class TabComplete {
             return;
         }
 
+        // tab key has been pressed at this point
+
         if (!this.textArea) {
             console.error("onKeyDown called before a <textarea> was set!");
             return;

From 82ff5c5e529fa78524240a0c33137105944c617d Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 13:48:44 +0000
Subject: [PATCH 19/20] Factor out handleTabPress and remove passive flag
 onKeyDown

---
 src/TabComplete.js | 61 +++++++++++++++++++++++-----------------------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index fb2571a8f8..334c9a93ab 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -132,12 +132,38 @@ class TabComplete {
         return peekList;
     }
 
+    handleTabPress(passive, shiftKey) {
+        var wasInPassiveMode = this.inPassiveMode && !passive;
+        console.log(
+            "handleTabPress passive=%s, shift=%s wasPassive=%s",
+            passive, shiftKey, wasInPassiveMode
+        );
+        this.inPassiveMode = passive;
+
+        if (!this.completing) {
+            this.startTabCompleting();
+        }
+
+        if (shiftKey) {
+            this.nextMatchedEntry(-1);
+        }
+        else {
+            // if we were in passive mode we got out of sync by incrementing the
+            // index to show the peek view but not set the text area. Therefore,
+            // we want to set the *current* index rather than the *next* index.
+            this.nextMatchedEntry(wasInPassiveMode ? 0 : 1);
+        }
+        this._notifyStateChange();
+    }
+
     /**
      * @param {DOMEvent} e
      */
     onKeyDown(ev) {
-        var wasInPassiveMode = this.inPassiveMode && !ev.passive;
-        this.inPassiveMode = ev.passive;
+        if (!this.textArea) {
+            console.error("onKeyDown called before a <textarea> was set!");
+            return;
+        }
 
         if (ev.keyCode !== KEY_TAB) {
             // pressing any key (except shift, windows, cmd (OSX) and ctrl/alt combinations)
@@ -153,14 +179,7 @@ class TabComplete {
                 clearTimeout(this.enterTabCompleteTimerId);
                 this.enterTabCompleteTimerId = setTimeout(() => {
                     if (!this.completing) {
-                        // inject a fake tab event so we use the same code paths
-                        // as much as possible. Add a 'passive' flag to indicate
-                        // that they didn't really hit this key.
-                        this.onKeyDown({
-                            keyCode: KEY_TAB,
-                            passive: true,
-                            preventDefault: function(){} // NOP
-                        })
+                        this.handleTabPress(true, false);
                     }
                 }, DELAY_TIME_MS);
             }
@@ -169,30 +188,10 @@ class TabComplete {
         }
 
         // tab key has been pressed at this point
-
-        if (!this.textArea) {
-            console.error("onKeyDown called before a <textarea> was set!");
-            return;
-        }
-
-        // init struct if necessary
-        if (!this.completing) {
-            this.startTabCompleting();
-        }
-
-        if (ev.shiftKey) {
-            this.nextMatchedEntry(-1);
-        }
-        else {
-            // if we were in passive mode we got out of sync by incrementing the
-            // index to show the peek view but not set the text area. Therefore,
-            // we want to set the *current* index rather than the *next* index.
-            this.nextMatchedEntry(wasInPassiveMode ? 0 : 1);
-        }
+        this.handleTabPress(false, ev.shiftKey)
 
         // prevent the default TAB operation (typically focus shifting)
         ev.preventDefault();
-        this._notifyStateChange();
     }
 
     /**

From fb151b35c835175ce550123fffc16a4799d094f0 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 23 Dec 2015 14:17:56 +0000
Subject: [PATCH 20/20] Remove debug logging

---
 src/TabComplete.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/TabComplete.js b/src/TabComplete.js
index 334c9a93ab..b84192e418 100644
--- a/src/TabComplete.js
+++ b/src/TabComplete.js
@@ -134,10 +134,6 @@ class TabComplete {
 
     handleTabPress(passive, shiftKey) {
         var wasInPassiveMode = this.inPassiveMode && !passive;
-        console.log(
-            "handleTabPress passive=%s, shift=%s wasPassive=%s",
-            passive, shiftKey, wasInPassiveMode
-        );
         this.inPassiveMode = passive;
 
         if (!this.completing) {