From 363964e423b0ef240324b9bcda1273e8ea925ad3 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Mon, 4 Mar 2019 13:08:54 -0700
Subject: [PATCH] Don't loop forever if you demote yourself via Enter on a
 PowerSelector

The included comment explains what happens and why this is bad.

Fixes https://github.com/vector-im/riot-web/issues/9039
---
 src/components/views/elements/PowerSelector.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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 = (
                 <Field id={`powerSelector_custom_${this.props.powerLevelKey}`} type="number"
                        label={this.props.label || _t("Power level")} max={this.props.maxValue}
-                       onBlur={this.onCustomBlur} onKeyDown={this.onCustomKeyDown} onChange={this.onCustomChange}
+                       onBlur={this.onCustomBlur} onKeyPress={this.onCustomKeyPress} onChange={this.onCustomChange}
                        value={this.state.customValue} disabled={this.props.disabled} />
             );
         } else {