diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index e89112ece..95aab180a 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -65,13 +65,12 @@ app.views.Publisher = Backbone.View.extend({ // textchange event won't be called in Backbone... this.inputEl.bind("textchange", $.noop); - var _this = this; - $("body").on("click", function(event){ - // if the click event is happened outside the publisher view, then try to close the box - if( _this.el && $(event.target).closest("#publisher").attr("id") !== _this.el.id){ - _this.tryClose(); - } - }); + $("body").click(function(event) { + var $target = $(event.target); + if ($target.closest("#publisher").length === 0 && !$target.hasClass("dropdown-backdrop")) { + this.tryClose(); + } + }.bind(this)); // close publisher on post this.on("publisher:add", function() { diff --git a/spec/javascripts/app/views/publisher_view_spec.js b/spec/javascripts/app/views/publisher_view_spec.js index b80875f10..47e552f3c 100644 --- a/spec/javascripts/app/views/publisher_view_spec.js +++ b/spec/javascripts/app/views/publisher_view_spec.js @@ -101,6 +101,34 @@ describe("app.views.Publisher", function() { expect(this.view.$el.find(".publisher-textarea-wrapper")).toHaveClass("with-poll"); expect(this.view.$el.find(".poll-creator-container")).toBeVisible(); }); + + it("should close the publisher when clicking outside", function() { + expect("#publisher").not.toHaveClass("closed"); + $("body").click(); + expect("#publisher").toHaveClass("closed"); + }); + + it("should not close the publisher when clicking inside", function() { + expect("#publisher").not.toHaveClass("closed"); + $("#publisher").find(".publisher-textarea-wrapper").click(); + expect("#publisher").not.toHaveClass("closed"); + $("#publisher").find(".aspect_dropdown button").click(); + expect("#publisher").not.toHaveClass("closed"); + }); + + it("should not close the publisher when clicking inside on a mobile", function() { + // Bootstrap inserts a .dropdown-backdrop next to the dropdown menu + // that take the whole page when it detects a mobile. + // Clicking on this element should not close the publisher. + // See https://github.com/diaspora/diaspora/issues/6979. + $("#publisher").find(".aspect_dropdown").append("") + .css({position: "fixed", left: 0, right: 0, bottom: 0, top: 0, "z-index": 990}); + expect("#publisher").not.toHaveClass("closed"); + $("#publisher").find(".aspect_dropdown button").click(); + expect("#publisher").not.toHaveClass("closed"); + $("#publisher").find(".dropdown-backdrop").click(); + expect("#publisher").not.toHaveClass("closed"); + }); }); describe("#clear", function() {