[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>

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 }],

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

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);
+    });
 });