[IMP] web: remove popup on click

This commit adds a event listener on window to close
calendar popup when click anywhere outside this popup.

Task: 2193921

addons/web/static/src/js/views/calendar/calendar_renderer.js

@@ -209,6 +209,7 @@ return AbstractRenderer.extend({
         // this.$el.height($(window).height() - this.$el.offset().top);
         this.calendar.render();
         this._renderCalendar();
+        window.addEventListener('click', this._onWindowClick.bind(this));
     },
     /**
      * Called when the field is detached from the DOM.
@@ -216,6 +217,7 @@ return AbstractRenderer.extend({
     on_detach_callback: function () {
         this._super(...arguments);
         this._isInDOM = false;
+        window.removeEventListener('click', this._onWindowClick);
     },
     /**
      * @override
@@ -399,6 +401,8 @@ return AbstractRenderer.extend({
                 self.trigger_up('updateRecord', event);
             },
             eventClick: function (eventClickInfo) {
+                eventClickInfo.jsEvent.preventDefault();
+                eventClickInfo.jsEvent.stopPropagation();
                 var eventData = eventClickInfo.event;
                 self._unselectEvent();
                 $(self.calendarElement).find(_.str.sprintf('[data-event-id=%s]', eventData.id)).addClass('o_cw_custom_highlight');
@@ -961,6 +965,16 @@ return AbstractRenderer.extend({
         this.$('.fc-event').removeClass('o_cw_custom_highlight');
         this.$('.o_cw_popover').popover('dispose');
     },
+    /**
+     * @private
+     * @param {MouseEvent} e
+     */
+    _onWindowClick: function (e) {
+        const popover = this.el.querySelector('.o_cw_popover');
+        if (popover && !popover.contains(e.target)) {
+            this._unselectEvent();
+        }
+    },
     /**
      * @private
      * @param {OdooEvent} event

addons/web/static/tests/views/calendar_tests.js

@@ -3737,6 +3737,45 @@ QUnit.module('Views', {
 
         calendar.destroy();
     });
+
+    QUnit.test('click outside the popup should close it', async function (assert) {
+        assert.expect(4);
+
+        var calendar = await createCalendarView({
+            View: CalendarView,
+            model: 'event',
+            data: this.data,
+            arch:
+                `<calendar
+                    create="false"
+                    event_open_popup="true"
+                    quick_add="false"
+                    date_start="start"
+                    date_stop="stop"
+                    all_day="allday"
+                    mode="month"/>`,
+            archs: archs,
+            viewOptions: {
+                initialDate: initialDate,
+            },
+        });
+
+        assert.containsNone(calendar, '.o_cw_popover');
+
+        await testUtils.dom.click(calendar.el.querySelector('.fc-event .fc-content'));
+        assert.containsOnce(calendar, '.o_cw_popover',
+            'open popup when click on event');
+
+        await testUtils.dom.click(calendar.el.querySelector('.o_cw_body'));
+        assert.containsOnce(calendar, '.o_cw_popover',
+            'keep popup openned when click inside popup');
+
+        await testUtils.dom.click(calendar.el.querySelector('.o_content'));
+        assert.containsNone(calendar, '.o_cw_popover',
+            'close popup when click outside popup');
+
+        calendar.destroy();
+    });
 });
 
 });