pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: Scroll position on kanban view when "load more" datas

Browse Source 
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>
This commit is contained in:
Romain Estievenart
2023-03-21 10:44:56 +01:00
parent e2a6471e52
commit 6d87d17919
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/views/kanban/kanban_renderer.js
+9 -1
View File
@@ -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;
});
}
// ------------------------------------------------------------------------
addons/web/static/tests/views/kanban_view_tests.js
+29
View File
@@ -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");
});
});