Skip to content

Commit

Permalink
Prevent extra enter after submitting message
Browse files Browse the repository at this point in the history
* Check _onChange so not set the state to the "\n".
* Seems that setting state from _onKeyDown triggers rendering, with
  state set to '', but then the _onChange event is called, somehow with
  the event.target.value set "\n".
* Is there some way to stop event propagation in the _onKeyDown?
* Tried event.stopPropgation in _onKeyDown, but that didn't work.
  • Loading branch information
justin808 committed Sep 6, 2014
1 parent 7326508 commit 643ca19
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion examples/flux-chat/js/components/MessageComposer.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,14 @@ var MessageComposer = React.createClass({
},

_onChange: function(event, value) {
this.setState({text: event.target.value});
// ENTER_KEY_CODE handled by _onKeyDown
if (event.target.value !== "\n") {
this.setState({text: event.target.value});
}
},

_onKeyDown: function(event) {
// Trap the ENTER_KEY_CODE to send the message
if (event.keyCode === ENTER_KEY_CODE) {
var text = this.state.text.trim();
if (text) {
Expand Down

1 comment on commit 643ca19

@justin808
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I confirmed that I could combine the two event handlers like this. However, I'm not changeing the code, as using the _onKeyDown seems correct if ones wants to trap the shift-enter to allow embedded returns.

  _onChange: function(event, value) {
    // ENTER_KEY_CODE handled by _onKeyDown
    if (event.target.value.slice(-1) !== "\n") {
      this.setState({text: event.target.value});
    } else {
      var text = event.target.value.trim();
      if (text) {
        ChatMessageActionCreators.createMessage(text);
      }
      this.setState({text: ''});
    }
  }

Please sign in to comment.