From 6d87d1791974717df9ea8821cfba4efada40f2aa Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Fri, 17 Mar 2023 13:12:41 +0000
Subject: [PATCH] [FIX] web: Scroll position on kanban view when "load more"
 datas

Steps to reproduce:

- Open a kanban view with enough records for a 'load more' button to be
  displayed
- click on Load more
  => the column remains scrolled all the way down, making the user lose
     track of where they were before clicking on the button => bug

This problem occurs because the foreach using by the xml trigger a full
rerender of the node in owl. To avoid these weird behavior, we now keep
the scrollTop of the scroll item, the column should remain at the same
place the end user was when clicking on the 'load more' button

Task ID: 3196763

closes odoo/odoo#115975

X-original-commit: b6731193004dc2d1a174fc6fc4de9e99db8e247a
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Romain Estievenart (res) <res@odoo.com>
---
 .../src/views/kanban/kanban_renderer.js       | 10 ++++++-
 .../static/tests/views/kanban_view_tests.js   | 29 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index ad59cf0b8be..773a0f70f55 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -18,7 +18,7 @@ import { KanbanColumnQuickCreate } from "./kanban_column_quick_create";
 import { KanbanRecord } from "./kanban_record";
 import { KanbanRecordQuickCreate } from "./kanban_record_quick_create";
 
-import { Component, onWillDestroy, useRef, useState } from "@odoo/owl";
+import { Component, onWillDestroy, useRef, useState, onPatched, onWillPatch } from "@odoo/owl";
 
 const DRAGGABLE_GROUP_TYPES = ["many2one"];
 const MOVABLE_RECORD_TYPES = ["char", "boolean", "integer", "selection", "many2one"];
@@ -199,6 +199,14 @@ export class KanbanRenderer extends Component {
         useHotkey("ArrowDown", ({ area }) => this.focusNextCard(area, "down"), arrowsOptions);
         useHotkey("ArrowLeft", ({ area }) => this.focusNextCard(area, "left"), arrowsOptions);
         useHotkey("ArrowRight", ({ area }) => this.focusNextCard(area, "right"), arrowsOptions);
+
+        let previousScrollTop = 0;
+        onWillPatch(() => {
+            previousScrollTop = this.rootRef.el.scrollTop;
+        });
+        onPatched(() => {
+            this.rootRef.el.scrollTop = previousScrollTop;
+        });
     }
 
     // ------------------------------------------------------------------------
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 82db9473e19..847c0386d94 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -13107,4 +13107,33 @@ QUnit.module("Views", (hooks) => {
             assert.verifySteps(["execute_action"]);
         }
     );
+
+    QUnit.test("Keep scrollTop when loading records with load more", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `<kanban>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div style="height:1000px;"><field name="id"/></div>
+                    </t>
+                </templates>
+            </kanban>`,
+            groupBy: ["bar"],
+            limit: 1,
+        });
+        target.querySelector(".o_kanban_renderer").style.overflow = "scroll";
+        target.querySelector(".o_kanban_renderer").style.height = "500px";
+        const loadMoreButton = target.querySelector(".o_kanban_load_more button");
+        loadMoreButton.scrollIntoView();
+        const previousScrollTop = target.querySelector(".o_kanban_renderer").scrollTop;
+        await click(loadMoreButton);
+        assert.strictEqual(
+            previousScrollTop,
+            target.querySelector(".o_kanban_renderer").scrollTop,
+            "Should have the same scrollTop value"
+        );
+        assert.notEqual(previousScrollTop, 0, "Should not have the scrollTop value at 0");
+    });
 });