From e6730c6e928587cd7438340cc101c57fee34220b Mon Sep 17 00:00:00 2001
From: Parth Choksi <pch@odoo.com>
Date: Fri, 29 Nov 2019 12:18:47 +0000
Subject: [IMP] web: better positionning of daterangepicker

Before this commit, the daterangepicker always opened below the input,
even when there was not enough space to display it. Moreover, when the
user scrolled while the picker was opened, it wasn't stucked to the
input, so the picker was displayed at a random position after the
scroll.

With this commit, we compute the available space above the picker
when opening it, and if there is enough space, we display it above,
otherwise, we display it below. Moreover, we automatically close
the picker when the user scrolls.

task-2117229

closes odoo/odoo#42161

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>
---
 addons/web/static/src/js/fields/basic_fields.js | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'addons/web/static/src/js/fields/basic_fields.js')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 553a79cad20..7ef6a10368d 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -595,6 +595,10 @@ var LinkButton = AbstractField.extend({
 
 var FieldDateRange = InputField.extend({
     className: 'o_field_date_range',
+    events: Object.assign({}, InputField.prototype.events, {
+        'show.daterangepicker': '_onDateRangePickerShow',
+        'hide.daterangepicker': '_onDateRangePickerHide',
+    }),
     tagName: 'span',
     jsLibs: [
         '/web/static/lib/daterangepicker/daterangepicker.js',
@@ -633,6 +637,9 @@ var FieldDateRange = InputField.extend({
         if (this.$pickerContainer) {
             this.$pickerContainer.remove();
         }
+        if (this._onScroll) {
+            window.removeEventListener('scroll', this._onScroll, true);
+        }
         this._super.apply(this, arguments);
     },
 
@@ -711,6 +718,34 @@ var FieldDateRange = InputField.extend({
             ev.stopPropagation();
         });
     },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Unbind the scroll event handler when the daterangepicker is closed.
+     *
+     * @private
+     */
+    _onDateRangePickerHide() {
+        if (this._onScroll) {
+            window.removeEventListener('scroll', this._onScroll, true);
+        }
+    },
+    /**
+     * Bind the scroll event handle when the daterangepicker is open.
+     *
+     * @private
+     */
+    _onDateRangePickerShow() {
+        this._onScroll = ev => {
+            if (ev.target !== this.$el.data('daterangepicker').element.get(0)) {
+                this.$el.data('daterangepicker').hide();
+            }
+        };
+        window.addEventListener('scroll', this._onScroll, true);
+    },
 });
 
 var FieldDate = InputField.extend({
-- 
cgit v1.2.3