diff --git a/src/Modal.js b/src/Modal.js
index d3a5404e1e..44072b9278 100644
--- a/src/Modal.js
+++ b/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>
         );
 
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 389d7be9fb..1cb576d14f 100644
--- a/src/components/structures/RoomView.js
+++ b/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;
-                    var dialog_instance = <SetDisplayNameDialog currentDisplayName={result.displayname} ref={(r) => {
+                    Modal.createDialog(SetDisplayNameDialog, {
+                        currentDisplayName: result.displayname,
+                        ref: (r) => {
                             dialog_ref = r;
-                    }} onFinished={() => {
-                        cli.setDisplayName(dialog_ref.getValue()).done(() => {
-                            dialog_defer.resolve();
-                        });
-                        modal.close();
-                    }} />
-                    modal = Modal.createDialogWithElement(dialog_instance);
+                        },
+                        onFinished: (submitted) => {
+                            if (submitted) {
+                                cli.setDisplayName(dialog_ref.getValue()).done(() => {
+                                    dialog_defer.resolve();
+                                });
+                            }
+                            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, {