diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js index 83b8711bef..89d46de117 100644 --- a/src/components/views/elements/PowerSelector.js +++ b/src/components/views/elements/PowerSelector.js @@ -103,12 +103,23 @@ module.exports = React.createClass({ }, onCustomBlur: function(event) { + event.preventDefault(); + event.stopPropagation(); + this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey); }, - onCustomKeyDown: function(event) { + onCustomKeyPress: function(event) { if (event.key === "Enter") { - this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey); + event.preventDefault(); + event.stopPropagation(); + + // Do not call the onChange handler directly here - it can cause an infinite loop. + // Long story short, a user hits Enter to submit the value which onChange handles as + // raising a dialog which causes a blur which causes a dialog which causes a blur and + // so on. By not causing the onChange to be called here, we avoid the loop because we + // handle the onBlur safely. + event.target.blur(); } }, @@ -118,7 +129,7 @@ module.exports = React.createClass({ picker = ( ); } else {