Improved selection logic when using both the mouse and arrow keys

web/react/components/mention.jsx

@@ -21,6 +21,7 @@ module.exports = React.createClass({
         }
     },
     render: function() {
+        var self = this;
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
         if (this.props.id != null) {
@@ -29,7 +30,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} onClick={this.handleClick}>
+            <div className={"mentions-name " + this.state.isFocused} onClick={this.handleClick} onMouseEnter={function(){self.props.handleMouseEnter(self.props.listId)}}>
                 <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>