Changed model of handling key down and focus change

2 files changed, 40 insertions, 17 deletions

diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx
index 520b81cbb..7a8045134 100644
--- a/web/react/components/mention.jsx
+++ b/web/react/components/mention.jsx
@@ -6,6 +6,23 @@ module.exports = React.createClass({
     handleClick: function() {
         this.props.handleClick(this.props.username);
     },
+    handleKeyDown: 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++;
+            this.props.handleFocus(this.props.listId);
+        } 
+        else if (e.key === "ArrowDown") {
+            //selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
+            this.props.handleFocus(this.props.listId);
+        }
+        else if (e.key === "Enter") {
+            this.handleClick();
+        }
+    },
     render: function() {
         var icon;
         var timestamp = UserStore.getCurrentUser().update_at;
@@ -15,7 +32,7 @@ module.exports = React.createClass({
             icon = <span><i className="mention-img fa fa-users fa-2x"></i></span>;
         }
         return (
-            <div className="mentions-name" onClick={this.handleClick}>
+            <div className="mentions-name" ref="mention" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
                 <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 115ab1b2a..c5b4030c8 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -18,6 +18,8 @@ module.exports = React.createClass({
     componentDidMount: function() {
         PostStore.addMentionDataChangeListener(this._onChange);
 
+        console.log("here!");
+
         var self = this;
         $('body').on('keypress.mentionlist', '#'+this.props.id,
             function(e) {
@@ -26,6 +28,16 @@ module.exports = React.createClass({
                     e.preventDefault();
                     self.addFirstMention();
                 }
+                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 38) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    self.handleFocus(0);
+                }
+                if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 40) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    self.addFirstMention(UserStore.getActiveOnlyProfiles().length - 1);
+                }
             }
         );
         $(document).click(function(e) {
@@ -56,21 +68,13 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
-    handleKeyDown: function(e, numMentions) {
-        var selectedMention = this.state.selectedMention <= nunMentions ? this.state.selectedMention : 1;
-
-        // Need to be able to know number of mentions, use in conditionals & still
-        // need to figure out how to highlight the mention I want every time.
-        // Remember separate Mention Ref within for, second if statement in render
-        // Maybe have the call there instead? Ehhh maybe not but need that to be able
-        // to "select" it maybe...
-        if (e.key === "ArrowUp") {
-            selectedMention = selectedMention === numMentions ? 1 : selectedMention++;
-        } 
-        else if (e.key === "ArrowDown") {
-            selectedMention = selectedMention === 1 ? numMentions : selectedMention--;
-        }
-        this.setState({selectedMention: selectedMention});
+    handleFocus: 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");
     },
     addFirstMention: function() {
         if (!this.refs.mention0) return;
@@ -140,6 +144,8 @@ module.exports = React.createClass({
                         username={users[i].username}
                         secondary_text={users[i].secondary_text}
                         id={users[i].id}
+                        listId={index}
+                        handleFocus={this.handleFocus}
                         handleClick={this.handleClick} />
                 );
                 index++;
@@ -162,7 +168,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown.bind(this, numMentions)}>
+                <div ref="mentionlist" className="mentions-box">
                     { mentions }
                 </div>
             </div>