Have arrow key selection working, but visually does not highlight correct mention. Also if user continues to type things might get weird.

web/react/components/mention.jsx

@@ -6,22 +6,41 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
-    handleKeyDown: function(e) {
+    /*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);
+        this.setState({ isFocused: "mentions-focus" })
+    },
+    handleBlur: function() {
+        console.log("Leaving " + this.props.listId);
+        this.setState({ isFocused: "" });
+    },
+    getInitialState: function() {
+        if (this.props.isFocus) {
+            return { isFocused: "mentions-focus" };
+        }
+        else {
+            return { isFocused: "" };
+        }
     },
     render: function() {
         var icon;
@@ -32,7 +51,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
+            <div className={"mentions-name " + this.state.isFocused} tabIndex={this.props.id} onClick={this.handleClick} onFocus={this.handleFocus} onBlur={this.handleBlur}>
                 <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>