diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js
index a65b53ba..7afb6561 100644
--- a/src/js/controller/dialogs/DialogsController.js
+++ b/src/js/controller/dialogs/DialogsController.js
@@ -42,6 +42,8 @@
 
     // adding the .animated class here instead of in the markup to avoid an animation during app startup
     this.dialogWrapper_.classList.add('animated');
+    pskl.utils.Event.addEventListener(this.dialogWrapper_, 'click', this.onWrapperClicked_, this);
+
   };
 
   ns.DialogsController.prototype.onCreatePaletteShortcut_ = function () {
@@ -69,6 +71,12 @@
     this.showDialog(args.dialogId, args.initArgs);
   };
 
+  ns.DialogsController.prototype.onWrapperClicked_ = function (evt) {
+    if (evt.target === this.dialogWrapper_) {
+      this.hideDialog();
+    }
+  };
+
   ns.DialogsController.prototype.showDialog = function (dialogId, initArgs) {
     if (this.isDisplayingDialog_()) {
       return;