diff options
Diffstat (limited to 'web/react/components/mention.jsx')
-rw-r--r-- | web/react/components/mention.jsx | 19 |
1 files changed, 18 insertions, 1 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> |