From e4dda761ed6e55695da0bae66ed08c4a7ecf9eb5 Mon Sep 17 00:00:00 2001
From: "Simon Genin (ges)" <ges@odoo.com>
Date: Thu, 18 Jan 2024 12:24:20 +0000
Subject: [PATCH] [FIX] web: kanban column quick create validates on enter

When creating a new column in kanban view, the user should be able to
either hit enter or click the add button. This launched the validation
process to add the column.

There has been a fix in owl that would force a t-model.trim to be lazy.
This was causing problems in this case as the "enter" pressed by the
user was detected through the hotkey system. This was causing the
change event not to fire, resulting in the behavior of the feature being
broken.

We fix this by using the t-on-keydown directive instead of the hotkey.
We also remove the t-model directive as it is no longer of any use.
The trim is done in the validate function.

task id 3691208

closes odoo/odoo#150297

X-original-commit: e3ad26632b00d0b0dded25282e4dc910983ef9dc
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>
---
 .../kanban/kanban_column_quick_create.js      | 21 ++++++-----
 .../kanban/kanban_column_quick_create.xml     |  2 +-
 .../tests/views/kanban/kanban_view_tests.js   | 36 +++++++++++++++++++
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.js b/addons/web/static/src/views/kanban/kanban_column_quick_create.js
index 785b0116b6e..d431bfb2ca4 100644
--- a/addons/web/static/src/views/kanban/kanban_column_quick_create.js
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.js
@@ -12,10 +12,11 @@ export class KanbanColumnQuickCreate extends Component {
         this.dialog = useService("dialog");
         this.root = useRef("root");
         this.state = useState({
-            columnTitle: "",
+            hasInputFocused: false,
         });
 
         useAutofocus();
+        this.inputRef = useRef("autofocus");
 
         // Close on outside click
         useExternalListener(window, "mousedown", (/** @type {MouseEvent} */ ev) => {
@@ -38,11 +39,6 @@ export class KanbanColumnQuickCreate extends Component {
         );
 
         // Key Navigation
-        const inputRef = useRef("autofocus");
-        useHotkey("enter", () => this.validate(), {
-            area: () => inputRef.el,
-            bypassEditableProtection: true,
-        });
         useHotkey("escape", () => this.fold());
     }
 
@@ -65,9 +61,10 @@ export class KanbanColumnQuickCreate extends Component {
     }
 
     validate() {
-        if (this.state.columnTitle.length) {
-            this.props.onValidate(this.state.columnTitle);
-            this.state.columnTitle = "";
+        const title = this.inputRef.el.value.trim();
+        if (title.length) {
+            this.props.onValidate(title);
+            this.inputRef.el.value = "";
         }
     }
 
@@ -88,6 +85,12 @@ export class KanbanColumnQuickCreate extends Component {
             },
         });
     }
+
+    onInputKeydown(ev) {
+        if (ev.key === "Enter") {
+            this.validate();
+        }
+    }
 }
 KanbanColumnQuickCreate.props = {
     exampleData: [Object, { value: null }],
diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
index ddf5500326a..2e1e3e3ddff 100644
--- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
@@ -15,9 +15,9 @@
                             class="form-control bg-view"
                             t-attf-placeholder="{{ relatedFieldName }}..."
                             t-ref="autofocus"
-                            t-model.trim="state.columnTitle"
                             t-on-focus="() => state.hasInputFocused = true"
                             t-on-blur="() => state.hasInputFocused = false"
+                            t-on-keydown="onInputKeydown"
                         />
                         <button class="btn btn-primary o_kanban_add" type="button" t-on-click="validate">
                             Add
diff --git a/addons/web/static/tests/views/kanban/kanban_view_tests.js b/addons/web/static/tests/views/kanban/kanban_view_tests.js
index e936689ce13..81b4bf959cc 100644
--- a/addons/web/static/tests/views/kanban/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban/kanban_view_tests.js
@@ -4499,6 +4499,8 @@ QUnit.module("Views", (hooks) => {
         await editColumnName(target, "new column");
         await validateColumn(target);
 
+        await nextTick();
+
         assert.strictEqual(target.querySelector(".o_column_quick_create input").value, "");
         assert.containsN(target, ".o_kanban_group", 2);
 
@@ -14377,4 +14379,38 @@ QUnit.module("Views", (hooks) => {
             assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
         }
     );
+
+    QUnit.test("can quick create a column when pressing enter when input is focused", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                `<kanban>
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        await createColumn(target);
+        
+        // We don't use the editInput helper as it would trigger a change event automatically.
+        // We need to wait for the enter key to trigger the event.
+        const input = target.querySelector(".o_column_quick_create input");
+        input.value = "New Column";
+        await triggerEvent(input, null, "input");
+
+        await triggerEvent(target, ".o_quick_create_unfolded input", "keydown", {
+            key: "Enter",
+        });
+
+        assert.containsN(target, ".o_kanban_group", 3);
+    });
 });