From 89778468f1bfeab2154065a71bb716de421dfa56 Mon Sep 17 00:00:00 2001
From: Marcos Caceres <marcos@marcosc.com>
Date: Thu, 19 May 2016 17:57:33 +1000
Subject: [PATCH] Fix(ui): close ui when doc is clicked (closes #772)

---
 js/core/ui.js              | 10 ++++++++--
 tests/spec/core/ui-spec.js | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/js/core/ui.js b/js/core/ui.js
index 6609284df2..ba83da8d0e 100644
--- a/js/core/ui.js
+++ b/js/core/ui.js
@@ -14,7 +14,7 @@
 define(
     ["shortcut", "core/jquery-enhanced"],
     function (shortcut) {
-        var $menu = $("<div></div>")
+        var $menu = $("<div id=respec-menu></div>")
                         .css({
                             background:     "#fff"
                         ,   border:         "1px solid #000"
@@ -125,11 +125,17 @@ define(
                                     ,   border:         "1px solid #ccc"
                                     ,   borderRadius:   "5px"
                                     })
-                                    .click(function () {
+                                    .click(function (e) {
+                                        e.stopPropagation();
                                         $menu.toggle();
                                     })
                                     .appendTo($div)
                                     ;
+                window.document.firstElementChild.addEventListener("click", function(ev){
+                    if($menu[0].style.display === "block"){
+                        $menu.fadeOut(200);
+                    }
+                });
                 $menu.appendTo($div);
                 shortcut.add("Esc", function () {
                     ui.closeModal();
diff --git a/tests/spec/core/ui-spec.js b/tests/spec/core/ui-spec.js
index 16cacecf69..f98fa6258b 100644
--- a/tests/spec/core/ui-spec.js
+++ b/tests/spec/core/ui-spec.js
@@ -19,4 +19,22 @@ describe("Core - Ui", function () {
       expect(pillContainer.classList.contains("respec-hidden")).toBe(false);
     }).then(done);
   });
+
+  it("hides the UI when document is clicked", function (done) {
+    makeRSDoc(makeStandardOps(), function (doc) {
+      var menu = doc.querySelector("#respec-menu");
+      expect(window.getComputedStyle(menu).display).toEqual("none");
+      doc.querySelector("#respec-pill").click();
+      // spin the event loop
+      doc.body.click();
+      new Promise(function(resolve){
+        setTimeout(resolve, 500)
+      })
+      .then(function(){
+        expect(window.getComputedStyle(menu).display).toEqual("none");
+        done();
+      });
+      // give it time to fade out
+    });
+  });
 });