From 86feda19681e5c71e65e422d512106c8a5575797 Mon Sep 17 00:00:00 2001
From: "Dardenne Florent (dafl)" <dafl@odoo.com>
Date: Thu, 1 Sep 2022 08:50:19 +0000
Subject: [PATCH] [IMP] web: kanban: drop card only when a column is
 highlighted

Before, when the user dragged a card outside of a column
(e.g. whitespace to the right), the card was moved to the last stage
for which the event handler for the target was registered.

Now, we move the card only when the card drop is done inside a column.

task-2459381

closes odoo/odoo#98897

Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>
---
 .../src/views/kanban/kanban_renderer.js       | 24 ++++++++++++-------
 .../static/tests/views/kanban_view_tests.js   | 23 ++++++++++++++++++
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index e6c13fb9147..9afe5a36df2 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -71,15 +71,21 @@ export class KanbanRenderer extends Component {
                 },
                 onDrop: async ({ element, previous, parent }) => {
                     element.classList.remove("o_record_draggable");
-                    parent && parent.classList && parent.classList.remove("o_kanban_hover");
-                    const refId = previous ? previous.dataset.id : null;
-                    const targetGroupId = parent && parent.dataset.id;
-                    await this.props.list.moveRecord(
-                        dataRecordId,
-                        dataGroupId,
-                        refId,
-                        targetGroupId
-                    );
+                    if (
+                        !this.props.list.isGrouped ||
+                        parent.classList.contains("o_kanban_hover") ||
+                        parent.dataset.id === element.parentElement.dataset.id
+                    ) {
+                        parent && parent.classList && parent.classList.remove("o_kanban_hover");
+                        const refId = previous ? previous.dataset.id : null;
+                        const targetGroupId = parent && parent.dataset.id;
+                        await this.props.list.moveRecord(
+                            dataRecordId,
+                            dataGroupId,
+                            refId,
+                            targetGroupId
+                        );
+                    }
                     element.classList.add("o_record_draggable");
                 },
             });
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 0ffcb597e52..614c0598648 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -4070,6 +4070,29 @@ QUnit.module("Views", (hooks) => {
         assert.containsNone(target, ".o_kanban_group:nth-child(2).o_kanban_hover");
     });
 
+    QUnit.test("drag and drop outside of a column", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                <field name="product_id"/>
+                <templates><t t-name="kanban-box">
+                <div class="oe_kanban_global_click"><field name="foo"/>
+                </div>
+                </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+        });
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+
+        // first record of first column moved to the right of a column
+        await dragAndDrop(".o_kanban_group:first-child .o_kanban_record", ".o_column_quick_create");
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+    });
+
     QUnit.test("drag and drop a record, grouped by selection", async (assert) => {
         assert.expect(7);