Remove unnecessary Modal.createDialogWithElement, complete with its broken onFinished() support. Switch SetDisplayNameDialog to use Modal.createDialog(). Explicitly pass false to closeDialog if the user tries to cancel dialogs by clicking on the background, rather than passing in an event object which evaluates to true.

src/Modal.js

@@ -35,36 +35,13 @@ module.exports = {
         return container;
     },
 
-    createDialogWithElement: function(element, props, className) {
-        var self = this;
-
-        var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
-            if (props && props.onFinished) props.onFinished.apply(null, arguments);
-        };
-
-        var dialog = (
-            <div className={"mx_Dialog_wrapper " + className}>
-                <div className="mx_Dialog">
-                    {element}
-                </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
-            </div>
-        );
-
-        ReactDOM.render(dialog, this.getOrCreateContainer());
-
-        return {close: closeDialog};
-    },
-
     createDialog: function (Element, props, className) {
         var self = this;
 
+        // never call this via modal.close() from onFinished() otherwise it will loop
         var closeDialog = function() {
-            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
-
             if (props && props.onFinished) props.onFinished.apply(null, arguments);
+            ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
         };
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
@@ -74,7 +51,7 @@ module.exports = {
                 <div className="mx_Dialog">
                     <Element {...props} onFinished={closeDialog}/>
                 </div>
-                <div className="mx_Dialog_background" onClick={closeDialog}></div>
+                <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>
         );
 

src/components/structures/RoomView.js

@@ -522,16 +522,22 @@ module.exports = React.createClass({
                     var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
                     var dialog_defer = q.defer();
                     var dialog_ref;
-                    var modal;
+                    Modal.createDialog(SetDisplayNameDialog, {
-                    var dialog_instance = <SetDisplayNameDialog currentDisplayName={result.displayname} ref={(r) => {
+                        currentDisplayName: result.displayname,
+                        ref: (r) => {
                             dialog_ref = r;
-                    }} onFinished={() => {
+                        },
-                        cli.setDisplayName(dialog_ref.getValue()).done(() => {
+                        onFinished: (submitted) => {
-                            dialog_defer.resolve();
+                            if (submitted) {
-                        });
+                                cli.setDisplayName(dialog_ref.getValue()).done(() => {
-                        modal.close();
+                                    dialog_defer.resolve();
-                    }} />
+                                });
-                    modal = Modal.createDialogWithElement(dialog_instance);
+                            }
+                            else {
+                                dialog_defer.reject();
+                            }
+                        }
+                    });
                     return dialog_defer.promise;
                 }
             });
@@ -561,6 +567,8 @@ module.exports = React.createClass({
                 joining: false,
                 joinError: error
             });
+
+            if (!error) return;
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {