From 95c7031027cd8e86fb896e4a0cc3f6610b063fed Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Thu, 20 Apr 2023 06:23:48 +0000
Subject: [PATCH] [FIX] web: kanban: read more is briefly shown when quick
 create

Before this commit, when quick creating a new record in a kanban view,
the "read more" button is briefly shown (flickering). This issue occurs
because, when creating a new record, we increment the number of records
in the group before adding the record to the list of displayed records.
This means that for a brief moment the number of records of the group is
bigger than the number of displayed records, therefore the "load more"
button is show.

Note that this flickering was introduced due to the following
refactoring : https://github.com/odoo/odoo/commit/067bcac53336b5f66f695b1c10b333d8c722225d

Now, we increment the number of records on the group after we added the
record to the displayed records' list.

closes odoo/odoo#119142

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../web/static/src/views/relational_model.js  | 10 +++--
 .../static/tests/views/kanban_view_tests.js   | 43 +++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/relational_model.js b/addons/web/static/src/views/relational_model.js
index 38a3444bb7e..1a18ed6f102 100644
--- a/addons/web/static/src/views/relational_model.js
+++ b/addons/web/static/src/views/relational_model.js
@@ -2406,7 +2406,10 @@ export class DynamicGroupList extends DynamicList {
     async _loadGroups() {
         const firstGroupByName = this.firstGroupBy.split(":")[0];
         const _orderBy = this.orderBy.filter(
-            (o) => o.name === firstGroupByName || (this.fieldNames.includes(o.name) && this.fields[o.name].group_operator !== undefined)
+            (o) =>
+                o.name === firstGroupByName ||
+                (this.fieldNames.includes(o.name) &&
+                    this.fields[o.name].group_operator !== undefined)
         );
         const orderby = orderByToString(_orderBy);
         const { groups, length } = await this.model.orm.webReadGroup(
@@ -2597,9 +2600,10 @@ export class Group extends DataPoint {
         return this.list.addRecord(record, index);
     }
 
-    addExistingRecord(resId, atFirstPosition = false) {
+    async addExistingRecord(resId, atFirstPosition = false) {
+        const record = await this.list.addExistingRecord(resId, atFirstPosition);
         this.count++;
-        return this.list.addExistingRecord(resId, atFirstPosition);
+        return record;
     }
 
     createRecord(params = {}, atFirstPosition = false) {
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index f6cace3976b..75e0cd1132e 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -1849,6 +1849,49 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
     });
 
+    QUnit.test("quick create record flickering (load more)", async (assert) => {
+        let def;
+        serverData.views["partner,some_view_ref,form"] = `
+            <form>
+                <field name="foo"/>
+            </form>`;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create" quick_create_view="some_view_ref">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["bar"],
+            async mockRPC(route, args) {
+                if (args.method === "read") {
+                    await def;
+                }
+            },
+        });
+
+        // click on 'Create' -> should open the quick create in the first column
+        await createRecord();
+
+        // fill the quick create and validate
+        await editQuickCreateInput("foo", "new partner");
+        def = makeDeferred();
+        await validateRecord();
+        assert.containsNone(target, ".o_kanban_load_more");
+        def.resolve();
+        await nextTick();
+        assert.containsNone(target, ".o_kanban_load_more");
+    });
+
     QUnit.test(
         "quick create record should focus default field [REQUIRE FOCUS]",
         async function (assert) {