[FIX] web: Not hide daterange if scrolling on mobile + unit test

Issue

	- Install "Field Service" app
	- Create new task
	- Try to select Planned start/end date and valid

	Daterange picker is hiding when trying to scroll down to valid selection.

Cause

	The daterange picker is closed when ev.target is not inside the picker,
	however ev.target always return the document element.

Solution

	Do not hide daterange picker on scrolling if on mobile.

	Note : It will only apply if scrolling on the daterange picker and
	       will still hide if scrolling outside this last one.

opw-2428099

closes odoo/odoo#65423

X-original-commit: fb01006342c6d6fd902e13a5f4c2642c87fe452d
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

1 files changed, 49 insertions, 0 deletions

diff --git a/addons/web/static/tests/fields/basic_fields_mobile_tests.js b/addons/web/static/tests/fields/basic_fields_mobile_tests.js
index d4657a65856..4b8b435378d 100644
--- a/addons/web/static/tests/fields/basic_fields_mobile_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_mobile_tests.js
@@ -173,6 +173,55 @@ QUnit.module('basic_fields', {
 
         form.destroy();
     });
+
+    QUnit.module('FieldDateRange');
+
+    QUnit.test('date field: toggle daterangepicker then scroll', async function (assert) {
+        assert.expect(4);
+        const scrollEvent = new UIEvent('scroll');
+
+        function scrollAtHeight(height) {
+            window.scrollTo(0, height);
+            document.dispatchEvent(scrollEvent);
+        }
+        this.data.partner.fields.date_end = {string: 'Date End', type: 'date'};
+
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form>' +
+                    '<field name="date" widget="daterange" options="{\'related_end_date\': \'date_end\'}"/>' +
+                    '<field name="date_end" widget="daterange" options="{\'related_start_date\': \'date\'}"/>' +
+                '</form>',
+            session: {
+                getTZOffset: function () {
+                    return 330;
+                },
+            },
+        });
+
+        // Check date range picker initialization
+        assert.containsN(document.body, '.daterangepicker', 2,
+            "should initialize 2 date range picker");
+
+        // Open date range picker
+        await testUtils.dom.click("input[name=date]");
+        assert.isVisible($('.daterangepicker:first'),
+            "date range picker should be opened");
+
+        // Scroll
+        scrollAtHeight(50);
+        assert.isVisible($('.daterangepicker:first'),
+            "date range picker should be opened");
+
+        // Close picker
+        await testUtils.dom.click($('.daterangepicker:first .cancelBtn'));
+        assert.isNotVisible($('.daterangepicker:first'),
+            "date range picker should be closed");
+
+        form.destroy();
+    });
 });
 });
 });