[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>

2 files changed, 45 insertions, 0 deletions

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({
diff --git a/addons/web/static/src/js/libs/daterangepicker.js b/addons/web/static/src/js/libs/daterangepicker.js
index 4d4acfeb2b9..dd731eb4cee 100644
--- a/addons/web/static/src/js/libs/daterangepicker.js
+++ b/addons/web/static/src/js/libs/daterangepicker.js
@@ -11,4 +11,14 @@ daterangepicker.prototype.clickDate = function (ev) {
     }
 };
 
+/**
+ * Override to open up or down based on top/bottom space in window.
+ */
+const moveFunction = daterangepicker.prototype.move;
+daterangepicker.prototype.move = function () {
+    const offset = this.element.offset();
+    this.drops = this.container.height() < offset.top ? 'up' : 'down';
+    moveFunction.apply(this, arguments);
+};
+
 });