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

3 files changed, 63 insertions, 20 deletions

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 7a8045134..abb6ae5c6 100644
--- a/web/react/components/mention.jsx
+++ b/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>
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index c5b4030c8..882b0d6ad 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -17,26 +17,44 @@ module.exports = React.createClass({
     displayName: "MentionList",
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
-
-        console.log("here!");
-
         var self = this;
         $('body').on('keypress.mentionlist', '#'+this.props.id,
             function(e) {
-                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) {
+                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.addFirstMention();
+                    self.addCurrentMention();
                 }
                 if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
+                    console.log("here! 38");
                     e.stopPropagation();
                     e.preventDefault();
-                    self.handleFocus(0);
+
+                    if (self.handleSelection(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();
-                    self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1);
+
+                    if (self.handleSelection(self.state.selectedMention + 1))
+                        self.setState({ selectedMention: self.state.selectedMention + 1 });
+                    else
+                        self.setState({ selectedMention: 0 });
                 }
             }
         );
@@ -68,13 +86,17 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleFocus: function(listId) {
+    handleSelection: function(listId) {
         console.log("here! 1");
-        var mention = this.refs['mention' + index];
-        if (!mention) return;
-        var mentionRef = mention.refs.mention;
-        mentionRef.getDOMNode().focus();
-        console.log("here! 2");
+        var mention = this.refs['mention' + listId];
+        if (!mention) 
+            return false;
+        else
+            return true;
+    },
+    addCurrentMention: function() {
+        if (!this.refs['mention' + this.state.selectedMention]) return;
+        this.refs['mention' + this.state.selectedMention].handleClick();
     },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
@@ -93,7 +115,7 @@ module.exports = React.createClass({
         return false;
     },
     getInitialState: function() {
-        return { excludeUsers: [], mentionText: "-1", selectedMention: 1 };
+        return { excludeUsers: [], mentionText: "-1", selectedMention: 0 };
     },
     render: function() {
         var mentionText = this.state.mentionText;
@@ -138,14 +160,14 @@ module.exports = React.createClass({
 
             if (firstName.lastIndexOf(mentionText,0) === 0
                     || lastName.lastIndexOf(mentionText,0) === 0 || users[i].username.lastIndexOf(mentionText,0) === 0) {
-                mentions[i+1] = (
+                mentions[index] = (
                     <Mention
                         ref={'mention' + index}
                         username={users[i].username}
                         secondary_text={users[i].secondary_text}
                         id={users[i].id}
                         listId={index}
-                        handleFocus={this.handleFocus}
+                        isFocus={this.state.selectedMention === index ? true : false}
                         handleClick={this.handleClick} />
                 );
                 index++;
@@ -164,8 +186,6 @@ module.exports = React.createClass({
             left:   $mention_tab.offset().left
         };
 
-        //mentions[this.state.selectedMention].focus();
-
         return (
             <div className="mentions--top" style={style}>
                 <div ref="mentionlist" className="mentions-box">
diff --git a/web/sass-files/sass/partials/_mentions.scss b/web/sass-files/sass/partials/_mentions.scss
index 7e8c1869a..1396f21a1 100644
--- a/web/sass-files/sass/partials/_mentions.scss
+++ b/web/sass-files/sass/partials/_mentions.scss
@@ -37,6 +37,10 @@
 	}
 }
 
+.mentions-focus {
+	background-color: #E6F2FA;
+}
+
 .mentions-text {
 	font-color:black;
 }