From 70101e4c6692f4faf2f6c5287a00224126acb177 Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Wed, 3 Jan 2024 11:16:28 +0100
Subject: [PATCH] [IMP] parser: .trim modifier implies .lazy modifier

Before to this commit, the .trim modifier did not work correctly. The value
in the model is always trim at each input event but not the visual value
in the input. This difference between the visual and the model value cause
few strange bug.

After reflection, we think that we always want to be in .lazy when we use .trim.
Because we want to trim the final value during the onchange event and not
at each input event. If we do it at each input event, we can't write more then
one word easily.

So this commit change the behavior of the .trim modifier to always be in .lazy
---
 src/compiler/parser.ts                        |  4 +--
 .../__snapshots__/t_model.test.ts.snap        | 21 ++++++++++++++-
 tests/components/t_model.test.ts              | 26 +++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/compiler/parser.ts b/src/compiler/parser.ts
index 7c31945a..11c9bdb7 100644
--- a/src/compiler/parser.ts
+++ b/src/compiler/parser.ts
@@ -367,9 +367,9 @@ function parseDOMNode(node: Element, ctx: ParsingContext): AST | null {
       const isSelect = tagName === "select";
       const isCheckboxInput = isInput && typeAttr === "checkbox";
       const isRadioInput = isInput && typeAttr === "radio";
-      const hasLazyMod = attr.includes(".lazy");
-      const hasNumberMod = attr.includes(".number");
       const hasTrimMod = attr.includes(".trim");
+      const hasLazyMod = hasTrimMod || attr.includes(".lazy");
+      const hasNumberMod = attr.includes(".number");
       const eventType = isRadioInput ? "click" : isSelect || hasLazyMod ? "change" : "input";
 
       model = {
diff --git a/tests/components/__snapshots__/t_model.test.ts.snap b/tests/components/__snapshots__/t_model.test.ts.snap
index 1d1e0e90..dd043ab4 100644
--- a/tests/components/__snapshots__/t_model.test.ts.snap
+++ b/tests/components/__snapshots__/t_model.test.ts.snap
@@ -44,7 +44,26 @@ exports[`t-model directive .trim modifier 1`] = `
   let { text, createBlock, list, multi, html, toggler, comment } = bdom;
   let { toNumber } = helpers;
   
-  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"input\\"/><span><block-text-2/></span></div>\`);
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
+  
+  return function template(ctx, node, key = \\"\\") {
+    const bExpr1 = ctx['state'];
+    const expr1 = 'text';
+    let prop1 = bExpr1[expr1];
+    let hdlr1 = [(ev) => { bExpr1[expr1] = ev.target.value.trim(); }];
+    let txt1 = ctx['state'].text;
+    return block1([prop1, hdlr1, txt1]);
+  }
+}"
+`;
+
+exports[`t-model directive .trim modifier implies .lazy modifier 1`] = `
+"function anonymous(app, bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, comment } = bdom;
+  let { toNumber } = helpers;
+  
+  let block1 = createBlock(\`<div><input block-property-0=\\"value\\" block-handler-1=\\"change\\"/><span><block-text-2/></span></div>\`);
   
   return function template(ctx, node, key = \\"\\") {
     const bExpr1 = ctx['state'];
diff --git a/tests/components/t_model.test.ts b/tests/components/t_model.test.ts
index 2d6fd0bc..83d36787 100644
--- a/tests/components/t_model.test.ts
+++ b/tests/components/t_model.test.ts
@@ -331,6 +331,32 @@ describe("t-model directive", () => {
     expect(fixture.innerHTML).toBe("<div><input><span>test</span></div>");
   });
 
+  test(".trim modifier implies .lazy modifier", async () => {
+    class SomeComponent extends Component {
+      static template = xml`
+        <div>
+            <input t-model.trim="state.text"/>
+            <span><t t-esc="state.text"/></span>
+        </div>
+      `;
+      state = useState({ text: "" });
+    }
+    const comp = await mount(SomeComponent, fixture);
+
+    expect(fixture.innerHTML).toBe("<div><input><span></span></div>");
+
+    const input = fixture.querySelector("input")!;
+    input.value = "test ";
+    input.dispatchEvent(new Event("input"));
+    await nextTick();
+    expect(comp.state.text).toBe("");
+    expect(fixture.innerHTML).toBe("<div><input><span></span></div>");
+    input.dispatchEvent(new Event("change"));
+    await nextTick();
+    expect(comp.state.text).toBe("test");
+    expect(fixture.innerHTML).toBe("<div><input><span>test</span></div>");
+  });
+
   test(".number modifier", async () => {
     class SomeComponent extends Component {
       static template = xml`