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

2 files changed, 30 insertions, 53 deletions

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index abb6ae5c6..4abf8d0df 100644
--- a/web/react/components/mention.jsx
+++ b/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>
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 882b0d6ad..0bef41905 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -18,43 +18,42 @@ module.exports = React.createClass({
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
         var self = this;
-        $('body').on('keypress.mentionlist', '#'+this.props.id,
-            function(e) {
-                if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    self.addCurrentMention();
-                }
-            }
-        );
+
         $('body').on('keydown.mentionlist', '#'+this.props.id,
             function(e) {
-                console.log("here! top");
                 if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 13 || e.which === 9)) {
                     e.stopPropagation();
                     e.preventDefault();
                     self.addCurrentMention();
                 }
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
-                    console.log("here! 38");
+                else if (!self.isEmpty() && self.state.mentionText != '-1' && (e.which === 38 || e.which === 40)) {
                     e.stopPropagation();
                     e.preventDefault();
 
-                    if (self.handleSelection(self.state.selectedMention - 1))
-                        self.setState({ selectedMention: self.state.selectedMention - 1 });
+                    if (!self.getSelection(self.state.selectedMention)) {
+                        self.setState({ selectedMention: 0 });
+                        self.refs['mention' + self.state.selectedMention].deselect();
+                    }
                     else {
-                        self.setState({ selectedMention: 0});
+                        self.refs['mention' + self.state.selectedMention].deselect();
+                        if (e.which === 38) {    
+                            if (self.getSelection(self.state.selectedMention - 1))
+                                self.setState({ selectedMention: self.state.selectedMention - 1 });
+                            else {
+                                var tempSelectedMention = -1;
+                                while (self.getSelection(++tempSelectedMention))
+                                    ;
+                                self.setState({ selectedMention: tempSelectedMention - 1 });
+                            }
+                        }
+                        else {
+                            if (self.getSelection(self.state.selectedMention + 1))
+                                self.setState({ selectedMention: self.state.selectedMention + 1 });
+                            else
+                                self.setState({ selectedMention: 0 });
+                        }
                     }
-                }
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
-                    console.log("here! 40");
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                    if (self.handleSelection(self.state.selectedMention + 1))
-                        self.setState({ selectedMention: self.state.selectedMention + 1 });
-                    else
-                        self.setState({ selectedMention: 0 });
+                    self.refs['mention' + self.state.selectedMention].select();
                 }
             }
         );
@@ -86,8 +85,7 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleSelection: function(listId) {
-        console.log("here! 1");
+    getSelection: function(listId) {
         var mention = this.refs['mention' + listId];
         if (!mention) 
             return false;
@@ -95,7 +93,7 @@ module.exports = React.createClass({
             return true;
     },
     addCurrentMention: function() {
-        if (!this.refs['mention' + this.state.selectedMention]) return;
+        if (!this.refs['mention' + this.state.selectedMention]) this.addFirstMention();
         this.refs['mention' + this.state.selectedMention].handleClick();
     },
     addFirstMention: function() {
@@ -173,6 +171,7 @@ module.exports = React.createClass({
                 index++;
             }
         }
+
         var numMentions = Object.keys(mentions).length;
 
         if (numMentions < 1) return null;