Highlighting now occurs as you arrow key thru mention list. However some small bugs remain.

web/react/components/mention.jsx

@@ -6,32 +6,10 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
-    /*handleUp: function(e) {
-        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
-
-        console.log("Here: keyDown");
-
-        if (e.key === "ArrowUp") {
-            //selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
-            e.preventDefault();
-            this.props.handleFocus(this.props.listId);
-        } 
-        else if (e.key === "ArrowDown") {
-            //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
-            e.preventDefault();
-            this.props.handleFocus(this.props.listId);
-        }
-        else if (e.key === "Enter") {
-            e.preventDefault();
-            this.handleClick();
-        }
-    },*/
-    handleFocus: function() {
-        console.log("Entering " + this.props.listId);
+    select: function() {
         this.setState({ isFocused: "mentions-focus" })
     },
-    handleBlur: function() {
-        console.log("Leaving " + this.props.listId);
+    deselect: function() {
         this.setState({ isFocused: "" });
     },
     getInitialState: function() {
@@ -51,7 +29,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}>
+            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick}>
                 <div className="pull-left">{icon}</div>
                 <div className="pull-left mention-align"><span>@{this.props.username}</span><span className="mention-fullname">{this.props.secondary_text}</span></div>
             </div>