Added framework for handling up and down arrow key presses to move between different @mention choices

1 files changed, 17 insertions, 1 deletions

diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx
index 103ff29bb..3796d465f 100644
--- a/web/react/components/mention_list.jsx
+++ b/web/react/components/mention_list.jsx
@@ -56,6 +56,22 @@ module.exports = React.createClass({
 
         this.setState({ mentionText: '-1' });
     },
+    handleKeyDown: function(e) {
+        var selectedMention = this.state.selectedMention ? 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 === ? 1 : selectedMention++;
+        } 
+        else if (e.key === "ArrowDown") {
+            selectedMention = selectedMention === 1 ? : selectedMention--;
+        }
+        this.setState({selectedMention: selectedMention});
+    }
     addFirstMention: function() {
         if (!this.refs.mention0) return;
         this.refs.mention0.handleClick();
@@ -144,7 +160,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mentions--top" style={style}>
-                <div ref="mentionlist" className="mentions-box">
+                <div ref="mentionlist" className="mentions-box" onKeyDown={this.handleKeyDown}>
                     { mentions }
                 </div>
             </div>