From 9cc3d3428521fbc3a31def4f4780275d763a4011 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Sat, 11 Jul 2015 14:25:18 -0700
Subject: Highlighting now occurs as you arrow key thru mention list.  However
 some small bugs remain.

---
 web/react/components/mention_list.jsx | 55 +++++++++++++++++------------------
 1 file changed, 27 insertions(+), 28 deletions(-)

(limited to 'web/react/components/mention_list.jsx')

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;
-- 
cgit v1.2.3-1-g7c22