From 3e6bbb4ebd221bc3f9623a116e18194064363a11 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:40:51 +0000
Subject: [PATCH 01/50] [REF] web: linting and small code improvements

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/browser/browser.js |  4 +-
 .../static/src/core/file_input/file_input.xml |  2 +-
 addons/web/static/src/core/macro.js           |  4 +-
 addons/web/static/src/core/ui/ui_service.js   | 56 +++++++------------
 addons/web/static/src/core/utils/numbers.js   |  4 +-
 addons/web/static/src/core/utils/strings.js   |  5 +-
 addons/web/static/src/env.js                  |  2 +-
 .../src/webclient/actions/client_actions.js   |  4 +-
 .../core/commands/command_service_tests.js    | 14 ++---
 .../tests/core/l10n/translation_tests.js      |  4 +-
 .../static/tests/core/position_hook_tests.js  | 11 ++--
 11 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/addons/web/static/src/core/browser/browser.js b/addons/web/static/src/core/browser/browser.js
index 0223cc526d6..eb341750fa5 100644
--- a/addons/web/static/src/core/browser/browser.js
+++ b/addons/web/static/src/core/browser/browser.js
@@ -52,11 +52,11 @@ Object.defineProperty(browser, "location", {
     configurable: true,
 });
 
-Object.defineProperty(browser, 'innerHeight', {
+Object.defineProperty(browser, "innerHeight", {
     get: () => window.innerHeight,
     configurable: true,
 });
-Object.defineProperty(browser, 'innerWidth', {
+Object.defineProperty(browser, "innerWidth", {
     get: () => window.innerWidth,
     configurable: true,
 });
diff --git a/addons/web/static/src/core/file_input/file_input.xml b/addons/web/static/src/core/file_input/file_input.xml
index aec7608927d..cb94c5d790d 100644
--- a/addons/web/static/src/core/file_input/file_input.xml
+++ b/addons/web/static/src/core/file_input/file_input.xml
@@ -9,7 +9,7 @@
                 </t>
             </span>
             <input type="file" name="ufile" class="o_input_file d-none"
-                t-att="{multiple: props.multi_upload, accept: props.accepted_file_extensions}"
+                t-att-multiple="props.multi_upload" t-att-accept="props.accepted_file_extensions"
                 t-ref="file-input"
                 t-on-change="onFileInputChange"
             />
diff --git a/addons/web/static/src/core/macro.js b/addons/web/static/src/core/macro.js
index 3fd121ca403..7511e564dab 100644
--- a/addons/web/static/src/core/macro.js
+++ b/addons/web/static/src/core/macro.js
@@ -4,7 +4,9 @@ import { browser } from "@web/core/browser/browser";
 
 // rough approximation of a visible element. not perfect (does not take into
 // account opacity = 0 for example), but good enough for our purpose
-const isVisible = (e) => e.offsetWidth > 0 || e.offsetHeight > 0;
+function isVisible(e) {
+    return e.offsetWidth > 0 || e.offsetHeight > 0;
+}
 
 export const ACTION_HELPERS = {
     click(el, _step) {
diff --git a/addons/web/static/src/core/ui/ui_service.js b/addons/web/static/src/core/ui/ui_service.js
index 70e5245e707..6ad6ce1e9ec 100644
--- a/addons/web/static/src/core/ui/ui_service.js
+++ b/addons/web/static/src/core/ui/ui_service.js
@@ -55,7 +55,7 @@ export const MEDIAS_BREAKPOINTS = [
  *
  * @returns {MediaQueryList[]}
  */
- export function getMediaQueryLists() {
+export function getMediaQueryLists() {
     return MEDIAS_BREAKPOINTS.map(({ minWidth, maxWidth }) => {
         if (!maxWidth) {
             return window.matchMedia(`(min-width: ${minWidth}px)`);
@@ -72,11 +72,9 @@ const MEDIAS = getMediaQueryLists();
 
 export const uiService = {
     getSize() {
-        return MEDIAS.findIndex(media => media.matches);
+        return MEDIAS.findIndex((media) => media.matches);
     },
     start(env) {
-        let ui = {};
-
         // block/unblock code
         const bus = new EventBus();
         registry.category("main_components").add("BlockUI", { Component: BlockUI, props: { bus } });
@@ -101,18 +99,6 @@ export const uiService = {
             }
         }
 
-        Object.assign(ui, {
-            bus,
-            block,
-            unblock,
-        });
-
-        Object.defineProperty(ui, "isBlocked", {
-            get() {
-                return blockCount > 0;
-            },
-        });
-
         // UI active element code
         let activeElems = [document];
 
@@ -132,34 +118,34 @@ export const uiService = {
             }
         }
 
-        Object.assign(ui, {
+        const ui = {
+            bus,
+            size: this.getSize(),
+            get activeElement() {
+                return activeElems[activeElems.length - 1];
+            },
+            get isBlocked() {
+                return blockCount > 0;
+            },
+            get isSmall() {
+                return ui.size <= SIZES.SM;
+            },
+            block,
+            unblock,
             activateElement,
             deactivateElement,
             getActiveElementOf,
-        });
-        Object.defineProperty(ui, "activeElement", {
-            get() {
-                return activeElems[activeElems.length - 1];
-            },
-        });
+        };
 
         // listen to media query status changes
-        function updateSize() {
+        const updateSize = () => {
             ui.size = this.getSize();
-        }
-        browser.addEventListener("resize", debounce(updateSize.bind(this), 100));
+        };
+        browser.addEventListener("resize", debounce(updateSize, 100));
 
-        Object.assign(ui, {
-            size: this.getSize(),
-        });
-        Object.defineProperty(ui, "isSmall", {
-            get() {
-                return ui.size <= SIZES.SM;
-            },
-        });
         Object.defineProperty(env, "isSmall", {
             get() {
-                return ui.size <= SIZES.SM;
+                return ui.isSmall;
             },
         });
 
diff --git a/addons/web/static/src/core/utils/numbers.js b/addons/web/static/src/core/utils/numbers.js
index 38a9d09e7da..a7bc46b8676 100644
--- a/addons/web/static/src/core/utils/numbers.js
+++ b/addons/web/static/src/core/utils/numbers.js
@@ -23,10 +23,10 @@ export function computeVariation(value, comparisonValue) {
 
 /**
  * Returns value clamped to the inclusive range of min and max.
- * 
+ *
  * @param {Number} num
  * @param {Number} min
- * @param {Number} max 
+ * @param {Number} max
  * @returns {Number}
  */
 export function clamp(num, min, max) {
diff --git a/addons/web/static/src/core/utils/strings.js b/addons/web/static/src/core/utils/strings.js
index 879355ccebc..88b5185e3f9 100644
--- a/addons/web/static/src/core/utils/strings.js
+++ b/addons/web/static/src/core/utils/strings.js
@@ -91,9 +91,9 @@ export function intersperse(str, indices, separator = "") {
 export function sprintf(s, ...values) {
     if (values.length === 1 && Object.prototype.toString.call(values[0]) === "[object Object]") {
         const valuesDict = values[0];
-        s = s.replace(/\%\(?([^\)]+)\)s/g, (match, value) => valuesDict[value]);
+        s = s.replace(/%\(?([^)]+)\)s/g, (match, value) => valuesDict[value]);
     } else if (values.length > 0) {
-        s = s.replace(/\%s/g, () => values.shift());
+        s = s.replace(/%s/g, () => values.shift());
     }
     return s;
 }
@@ -108,6 +108,7 @@ export function capitalize(s) {
     return s ? s[0].toUpperCase() + s.slice(1) : "";
 }
 
+/* eslint-disable */
 // prettier-ignore
 const diacriticsMap = {
 '\u0041': 'A','\u24B6': 'A','\uFF21': 'A','\u00C0': 'A','\u00C1': 'A','\u00C2': 'A','\u1EA6': 'A','\u1EA4': 'A','\u1EAA': 'A','\u1EA8': 'A',
diff --git a/addons/web/static/src/env.js b/addons/web/static/src/env.js
index bee4ef2fd4d..721fec8b261 100644
--- a/addons/web/static/src/env.js
+++ b/addons/web/static/src/env.js
@@ -118,7 +118,7 @@ async function _startServices(env, toStart) {
             }
             if (value instanceof Promise) {
                 proms.push(
-                    new Promise(async (resolve) => {
+                    new Promise((resolve) => {
                         value
                             .then((val) => {
                                 services[name] = val || null;
diff --git a/addons/web/static/src/webclient/actions/client_actions.js b/addons/web/static/src/webclient/actions/client_actions.js
index 844142f381e..e157040d885 100644
--- a/addons/web/static/src/webclient/actions/client_actions.js
+++ b/addons/web/static/src/webclient/actions/client_actions.js
@@ -6,7 +6,7 @@ import { escape, sprintf } from "@web/core/utils/strings";
 
 const { Component, onMounted, xml } = owl;
 
-export const displayNotificationAction = (env, action) => {
+export function displayNotificationAction(env, action) {
     const params = action.params || {};
     const options = {
         className: params.className || "",
@@ -20,7 +20,7 @@ export const displayNotificationAction = (env, action) => {
     const message = owl.markup(sprintf(escape(params.message), ...links));
     env.services.notification.add(message, options);
     return params.next;
-};
+}
 
 registry.category("actions").add("display_notification", displayNotificationAction);
 
diff --git a/addons/web/static/tests/core/commands/command_service_tests.js b/addons/web/static/tests/core/commands/command_service_tests.js
index 98b98579008..960030ffe7c 100644
--- a/addons/web/static/tests/core/commands/command_service_tests.js
+++ b/addons/web/static/tests/core/commands/command_service_tests.js
@@ -228,13 +228,13 @@ QUnit.test("data-hotkey added to command palette", async (assert) => {
     }
     MyComponent.components = { TestComponent };
     MyComponent.template = xml`
-    <div>
-      <button title="Aria Stark" data-hotkey="a" t-on-click="onClick" />
-      <input title="Bran Stark" type="text" data-hotkey="b" />
-      <button title="Sansa Stark" data-hotkey="b" style="display: none;" />
-      <TestComponent />
-    </div>
-  `;
+        <div>
+            <button title="Aria Stark" data-hotkey="a" t-on-click="onClick" />
+            <input title="Bran Stark" type="text" data-hotkey="b" />
+            <button title="Sansa Stark" data-hotkey="c" style="display: none;" />
+            <TestComponent />
+        </div>
+    `;
     await mount(MyComponent, target, { env });
 
     // Open palette
diff --git a/addons/web/static/tests/core/l10n/translation_tests.js b/addons/web/static/tests/core/l10n/translation_tests.js
index 56048645de8..e675b319d2c 100644
--- a/addons/web/static/tests/core/l10n/translation_tests.js
+++ b/addons/web/static/tests/core/l10n/translation_tests.js
@@ -24,7 +24,7 @@ class TestComponent extends Component {}
  * @param {string} lang
  * @returns {Promise<void>}
  */
-const patchLang = async (lang) => {
+async function patchLang(lang) {
     const { defaultLocale, defaultNumberingSystem } = Settings;
     registerCleanup(() => {
         Settings.defaultLocale = defaultLocale;
@@ -50,7 +50,7 @@ const patchLang = async (lang) => {
     });
     serviceRegistry.add("localization", localizationService);
     await makeTestEnv();
-};
+}
 
 QUnit.module("Translations");
 
diff --git a/addons/web/static/tests/core/position_hook_tests.js b/addons/web/static/tests/core/position_hook_tests.js
index f95c6134f18..7004c188ab3 100644
--- a/addons/web/static/tests/core/position_hook_tests.js
+++ b/addons/web/static/tests/core/position_hook_tests.js
@@ -153,7 +153,7 @@ QUnit.test("has no effect when component is destroyed", async (assert) => {
     );
 });
 
-const getPositionTest = (position, positionToCheck) => {
+function getPositionTest(position, positionToCheck) {
     return async (assert) => {
         assert.expect(2);
         positionToCheck = positionToCheck || position;
@@ -167,7 +167,8 @@ const getPositionTest = (position, positionToCheck) => {
         });
         await mount(TestComp, container);
     };
-};
+}
+
 QUnit.test("position top", getPositionTest("top"));
 QUnit.test("position left", getPositionTest("left"));
 QUnit.test("position bottom", getPositionTest("bottom"));
@@ -198,7 +199,8 @@ const CONTAINER_STYLE_MAP = {
     h125: { height: "125px" }, // height of popper + 1/2 reference
     w125: { width: "125px" }, // width of popper + 1/2 reference
 };
-const getRepositionTest = (from, to, containerStyleChanges) => {
+
+function getRepositionTest(from, to, containerStyleChanges) {
     return async (assert) => {
         assert.expect(4);
         const TestComp = getTestComponent({
@@ -220,7 +222,8 @@ const getRepositionTest = (from, to, containerStyleChanges) => {
         [d, v = "middle"] = to.split("-");
         assert.verifySteps([`${d}-${v}`], `has ${to} position`);
     };
-};
+}
+
 // -----------------------------------------------------------------------------
 QUnit.test(
     "reposition from top-start to bottom-start",

From 7e1ed51c5eba89c7312f1025ded12e9112fa3fe4 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Thu, 23 Jun 2022 20:31:01 +0000
Subject: [PATCH 02/50] [FIX] web: domain: can follow field relations

Before this commit, a domain like
```
   [["partner_id.name", "ilike", "Agrolait"]]
```
would crash when being evaluated.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/domain.js         |  8 +++
 addons/web/static/tests/core/domain_tests.js | 56 +++++++++++++++++---
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/addons/web/static/src/core/domain.js b/addons/web/static/src/core/domain.js
index af1e0f5c3a4..592bf95a70b 100644
--- a/addons/web/static/src/core/domain.js
+++ b/addons/web/static/src/core/domain.js
@@ -187,6 +187,14 @@ function matchCondition(record, condition) {
         return condition;
     }
     const [field, operator, value] = condition;
+
+    if (typeof field === "string") {
+        const names = field.split(".");
+        if (names.length >= 2) {
+            return matchCondition(record[names[0]], [names.slice(1).join("."), operator, value]);
+        }
+    }
+
     const fieldValue = typeof field === "number" ? field : record[field];
     switch (operator) {
         case "=":
diff --git a/addons/web/static/tests/core/domain_tests.js b/addons/web/static/tests/core/domain_tests.js
index e7499740540..3cc6d4b0463 100644
--- a/addons/web/static/tests/core/domain_tests.js
+++ b/addons/web/static/tests/core/domain_tests.js
@@ -161,16 +161,37 @@ QUnit.module("domain", {}, () => {
             '[("name", "=", "true")]'
         );
         assert.strictEqual(new Domain().toString(), "[]");
-        assert.strictEqual(new Domain([['name', 'in', [true, false]]]).toString(), '[("name", "in", [True, False])]');
-        assert.strictEqual(new Domain([['name', 'in', [null]]]).toString(), '[("name", "in", [None])]');
-        assert.strictEqual(new Domain([['name', 'in', ["foo", "bar"]]]).toString(), '[("name", "in", ["foo", "bar"])]');
-        assert.strictEqual(new Domain([['name', 'in', [1, 2]]]).toString(), '[("name", "in", [1, 2])]');
-        assert.strictEqual(new Domain(['&', ['name', '=', 'foo'], ['type', '=', 'bar']]).toString(), '["&", ("name", "=", "foo"), ("type", "=", "bar")]');
-        assert.strictEqual(new Domain(['|', ['name', '=', 'foo'], ['type', '=', 'bar']]).toString(), '["|", ("name", "=", "foo"), ("type", "=", "bar")]');
+        assert.strictEqual(
+            new Domain([["name", "in", [true, false]]]).toString(),
+            '[("name", "in", [True, False])]'
+        );
+        assert.strictEqual(
+            new Domain([["name", "in", [null]]]).toString(),
+            '[("name", "in", [None])]'
+        );
+        assert.strictEqual(
+            new Domain([["name", "in", ["foo", "bar"]]]).toString(),
+            '[("name", "in", ["foo", "bar"])]'
+        );
+        assert.strictEqual(
+            new Domain([["name", "in", [1, 2]]]).toString(),
+            '[("name", "in", [1, 2])]'
+        );
+        assert.strictEqual(
+            new Domain(["&", ["name", "=", "foo"], ["type", "=", "bar"]]).toString(),
+            '["&", ("name", "=", "foo"), ("type", "=", "bar")]'
+        );
+        assert.strictEqual(
+            new Domain(["|", ["name", "=", "foo"], ["type", "=", "bar"]]).toString(),
+            '["|", ("name", "=", "foo"), ("type", "=", "bar")]'
+        );
         assert.strictEqual(new Domain().toString(), "[]");
 
         // string domains are only reformatted
-        assert.strictEqual(new Domain('[("name","ilike","foo")]').toString(), '[("name", "ilike", "foo")]');
+        assert.strictEqual(
+            new Domain('[("name","ilike","foo")]').toString(),
+            '[("name", "ilike", "foo")]'
+        );
     });
 
     QUnit.test("implicit &", function (assert) {
@@ -310,6 +331,27 @@ QUnit.module("domain", {}, () => {
         assert.throws(() => new Domain(["!"]), /invalid domain .* \(missing 1 segment/);
     });
 
+    QUnit.test("follow relations", function (assert) {
+        assert.ok(
+            new Domain([["partner.city", "ilike", "Bru"]]).contains({
+                name: "Lucas",
+                partner: {
+                    city: "Bruxelles",
+                },
+            })
+        );
+        assert.ok(
+            new Domain([["partner.city.name", "ilike", "Bru"]]).contains({
+                name: "Lucas",
+                partner: {
+                    city: {
+                        name: "Bruxelles",
+                    },
+                },
+            })
+        );
+    });
+
     // ---------------------------------------------------------------------------
     // Normalization
     // ---------------------------------------------------------------------------

From aa7a901678293328978cf18b4daa84756e929853 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 23 Jun 2022 20:31:43 +0000
Subject: [PATCH 03/50] [FIX] web: domain: correctly compare arrays

With this commit, we ensure that array values in domains are
correctly compared, w.r.t. the = and <> operators.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/domain.js          |  6 +++-
 addons/web/static/src/core/utils/arrays.js    | 18 ++++++++++
 addons/web/static/tests/core/domain_tests.js  |  9 +++++
 .../static/tests/core/utils/arrays_tests.js   | 35 ++++++++++++++++++-
 4 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/core/domain.js b/addons/web/static/src/core/domain.js
index 592bf95a70b..58bfb2326e1 100644
--- a/addons/web/static/src/core/domain.js
+++ b/addons/web/static/src/core/domain.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { shallowEqual } from "@web/core/utils/arrays";
 import { evaluate, formatAST, parseExpr } from "./py_js/py";
 import { toPyValue } from "./py_js/py_utils";
 
@@ -199,10 +200,13 @@ function matchCondition(record, condition) {
     switch (operator) {
         case "=":
         case "==":
+            if (Array.isArray(fieldValue) && Array.isArray(value)) {
+                return shallowEqual(fieldValue, value);
+            }
             return fieldValue === value;
         case "!=":
         case "<>":
-            return fieldValue !== value;
+            return JSON.stringify(fieldValue) !== JSON.stringify(value);
         case "<":
             return fieldValue < value;
         case "<=":
diff --git a/addons/web/static/src/core/utils/arrays.js b/addons/web/static/src/core/utils/arrays.js
index f73d4cc121c..da7e771c7b3 100644
--- a/addons/web/static/src/core/utils/arrays.js
+++ b/addons/web/static/src/core/utils/arrays.js
@@ -151,6 +151,24 @@ export function cartesian() {
     }
 }
 
+/**
+ * Shallow compares two arrays.
+ * @param {any[]} arrayA
+ * @param {any[]} arrayB
+ * @returns {boolean} true iff arrayA and arrayB are shallow equal
+ */
+export function shallowEqual(arrayA, arrayB) {
+    if (arrayA.length !== arrayB.length) {
+        return false;
+    }
+    for (let i = 0; i < arrayA.length; i++) {
+        if (arrayA[i] !== arrayB[i]) {
+            return false;
+        }
+    }
+    return true;
+}
+
 /**
  * Returns all initial sections of a given array, e.g. for [1, 2] the array
  * [[], [1], [1, 2]] is returned.
diff --git a/addons/web/static/tests/core/domain_tests.js b/addons/web/static/tests/core/domain_tests.js
index 3cc6d4b0463..d70f0d435b9 100644
--- a/addons/web/static/tests/core/domain_tests.js
+++ b/addons/web/static/tests/core/domain_tests.js
@@ -352,6 +352,15 @@ QUnit.module("domain", {}, () => {
         );
     });
 
+    QUnit.test("Arrays comparison", (assert) => {
+        const domain = new Domain(["&", ["a", "==", []], ["b", "!=", []]]);
+
+        assert.ok(domain.contains({ a: [] }));
+        assert.ok(domain.contains({ a: [], b: [4] }));
+        assert.notOk(domain.contains({ a: [1] }));
+        assert.notOk(domain.contains({ b: [] }));
+    });
+
     // ---------------------------------------------------------------------------
     // Normalization
     // ---------------------------------------------------------------------------
diff --git a/addons/web/static/tests/core/utils/arrays_tests.js b/addons/web/static/tests/core/utils/arrays_tests.js
index d78bfc2098a..6dd1a278b2e 100644
--- a/addons/web/static/tests/core/utils/arrays_tests.js
+++ b/addons/web/static/tests/core/utils/arrays_tests.js
@@ -1,6 +1,13 @@
 /** @odoo-module **/
 
-import { cartesian, groupBy, intersection, sortBy, unique } from "@web/core/utils/arrays";
+import {
+    cartesian,
+    groupBy,
+    intersection,
+    shallowEqual,
+    sortBy,
+    unique,
+} from "@web/core/utils/arrays";
 
 QUnit.module("utils", () => {
     QUnit.module("Arrays");
@@ -233,4 +240,30 @@ QUnit.module("utils", () => {
         assert.deepEqual(unique([1, 2, 3, 2, 4, 3, 1, 4]), [1, 2, 3, 4]);
         assert.deepEqual(unique("a d c a b c d b".split(" ")), "a d c b".split(" "));
     });
+
+    QUnit.test("shallowEqual: simple valid cases", function (assert) {
+        assert.ok(shallowEqual([], []));
+        assert.ok(shallowEqual([1], [1]));
+        assert.ok(shallowEqual([1, "a"], [1, "a"]));
+    });
+
+    QUnit.test("shallowEqual: simple invalid cases", function (assert) {
+        assert.notOk(shallowEqual([1], []));
+        assert.notOk(shallowEqual([], [1]));
+        assert.notOk(shallowEqual([1, "b"], [1, "a"]));
+    });
+
+    QUnit.test("shallowEqual: arrays with non primitive values", function (assert) {
+        const obj = { b: 3 };
+        assert.ok(shallowEqual([obj], [obj]));
+        assert.notOk(shallowEqual([{ b: 3 }], [{ b: 3 }]));
+
+        const arr = ["x", "y", "z"];
+        assert.ok(shallowEqual([arr], [arr]));
+        assert.notOk(shallowEqual([["x", "y", "z"]], [["x", "y", "z"]]));
+
+        const fn = () => {};
+        assert.ok(shallowEqual([fn], [fn]));
+        assert.notOk(shallowEqual([() => {}], [() => {}]));
+    });
 });

From 3c870eacf6bb260c013ef6d347b94a5d2543ee41 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Thu, 23 Jun 2022 07:17:11 +0000
Subject: [PATCH 04/50] [FIX] web: urls: encode keys and correctly handle falsy
 values

This commit ensures that keys in the hash or querystring in the url
is URI encoded. Moreover, it properly handles the case where a
value in the hash is falsy. Before this commit, if a value, say "x",
was falsy, it resulted in the url in "x", which produces a crash
when decoding. With this commit, it generates "x=" in that case.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/utils/urls.js             | 4 ++--
 addons/web/static/tests/core/router_service_tests.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/core/utils/urls.js b/addons/web/static/src/core/utils/urls.js
index fb78bd9ad5c..48fc9e2196f 100644
--- a/addons/web/static/src/core/utils/urls.js
+++ b/addons/web/static/src/core/utils/urls.js
@@ -3,7 +3,7 @@
 import { browser } from "../browser/browser";
 
 /**
- * Trasnforms a key value mapping to a string formatted as url hash, e.g.
+ * Transforms a key value mapping to a string formatted as url hash, e.g.
  * {a: "x", b: 2} -> "a=x&b=2"
  *
  * @param {Object} obj
@@ -11,7 +11,7 @@ import { browser } from "../browser/browser";
  */
 export function objectToUrlEncodedString(obj) {
     return Object.entries(obj)
-        .map(([k, v]) => (v ? `${k}=${encodeURIComponent(v)}` : k))
+        .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v || "")}`)
         .join("&");
 }
 
diff --git a/addons/web/static/tests/core/router_service_tests.js b/addons/web/static/tests/core/router_service_tests.js
index 718cea0ade9..fa0fb566e97 100644
--- a/addons/web/static/tests/core/router_service_tests.js
+++ b/addons/web/static/tests/core/router_service_tests.js
@@ -98,7 +98,7 @@ QUnit.test("routeToUrl encodes URI compatible strings", (assert) => {
     assert.strictEqual(routeToUrl(route), "/asf?a=11&g=summer%20wine");
 
     route.hash = { b: "2", c: "", e: "kloug,gloubi" };
-    assert.strictEqual(routeToUrl(route), "/asf?a=11&g=summer%20wine#b=2&c&e=kloug%2Cgloubi");
+    assert.strictEqual(routeToUrl(route), "/asf?a=11&g=summer%20wine#b=2&c=&e=kloug%2Cgloubi");
 });
 
 QUnit.test("can redirect an URL", async (assert) => {

From 35c2f217b0ea476512dcfed1031eda55671bd9c2 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 23 Jun 2022 06:50:04 +0000
Subject: [PATCH 05/50] [FIX] web: parseDate(Time): can handle short notations

In the wowl codebase, we use luxon instead of moment to manipulate
dates. Moment was able to parse dates with short notations (e.g.
08/15/22 for the format MM/DD/YYYY). Luxon is more strict and does
not support those cases (the format must be perfectly respected).
As a consequence, moving from moment to luxon would introduce a
regression in our date and datetime fields. This commit implements
the same kind of logic as what is done in moment, in our date
parsers, such that those cases are handled.

Part-of: odoo/odoo#92475
---
 .../static/src/core/datepicker/datepicker.js  | 149 +++++++++---------
 .../static/src/core/datepicker/datepicker.xml |   9 +-
 addons/web/static/src/core/l10n/dates.js      | 113 ++++++++-----
 .../web/static/tests/core/datepicker_tests.js |  41 ++++-
 .../web/static/tests/core/l10n/dates_tests.js |  34 ++++
 5 files changed, 227 insertions(+), 119 deletions(-)

diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
index e24b2e5f44a..48cc42b07f9 100644
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -1,7 +1,14 @@
 /** @odoo-module **/
 
+import {
+    areDateEquals,
+    formatDate,
+    formatDateTime,
+    parseDate,
+    parseDateTime,
+} from "@web/core/l10n/dates";
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
 import { localization } from "@web/core/l10n/localization";
-import { registry } from "@web/core/registry";
 import { useAutofocus } from "@web/core/utils/hooks";
 
 const {
@@ -15,38 +22,47 @@ const {
 } = owl;
 const { DateTime } = luxon;
 
-const formatters = registry.category("formatters");
-const parsers = registry.category("parsers");
-
 let datePickerId = 0;
 
 /**
  * @param {DateTime} date
  * @returns {moment}
  */
-const luxonDateToMomentDate = (date) => {
+function luxonDateToMomentDate(date) {
     return window.moment(String(date));
-};
+}
 
 /**
  * @param {string} format
  * @returns {string}
  */
-const luxonFormatToMomentFormat = (format) => {
+function luxonFormatToMomentFormat(format) {
     return format.replace(/[dy]/g, (x) => x.toUpperCase());
-};
+}
 
 /**
  * @param {string} format
  * @returns {boolean}
  */
-const isValidStaticFormat = (format) => {
-    try {
-        return /^[\d\s/:-]+$/.test(DateTime.local().toFormat(format));
-    } catch (_err) {
-        return false;
-    }
-};
+function isValidStaticFormat(format) {
+    return /^[\d\s/:-]+$/.test(DateTime.local().toFormat(format));
+}
+
+/**
+ * @param {Function} fn
+ * @returns {[any, null] | [null, Error]}
+ */
+function wrapError(fn) {
+    return (...args) => {
+        const result = [null, null];
+        try {
+            result[0] = fn(...args);
+        } catch (_err) {
+            result[1] = _err;
+        }
+        return result;
+    };
+}
 
 /**
  * Date picker
@@ -63,7 +79,7 @@ const isValidStaticFormat = (format) => {
  */
 export class DatePicker extends Component {
     setup() {
-        this.root = useRef("root");
+        this.rootRef = useRef("root");
         this.inputRef = useRef("input");
         this.state = useState({ warning: false });
 
@@ -73,8 +89,7 @@ export class DatePicker extends Component {
         this.datePickerShown = false;
 
         this.initFormat();
-        this.setDate(this.props);
-        this.setFormat(this.props);
+        this.setDateAndFormat(this.props);
 
         useAutofocus();
         useExternalListener(window, "scroll", this.onWindowScroll);
@@ -88,43 +103,33 @@ export class DatePicker extends Component {
         this.bootstrapDateTimePicker(this.props);
         this.updateInput();
 
-        window.$(this.root.el).on("show.datetimepicker", () => {
+        window.$(this.rootRef.el).on("show.datetimepicker", () => {
             this.datePickerShown = true;
             this.inputRef.el.select();
         });
-        window.$(this.root.el).on("hide.datetimepicker", () => {
+        window.$(this.rootRef.el).on("hide.datetimepicker", () => {
             this.datePickerShown = false;
             this.onDateChange({ useStatic: true });
         });
-        window.$(this.root.el).on("error.datetimepicker", () => false);
+        window.$(this.rootRef.el).on("error.datetimepicker", () => false);
     }
 
     onWillUpdateProps(nextProps) {
         const pickerParams = {};
-        let shouldUpdateInput = false;
         for (const prop in nextProps) {
-            const prev = this.props[prop];
-            const next = nextProps[prop];
-            if ((prev instanceof DateTime && !prev.equals(next)) || prev !== next) {
+            if (!areDateEquals(this.props[prop], nextProps[prop])) {
                 pickerParams[prop] = nextProps[prop];
-                if (prop === "date") {
-                    this.setDate(nextProps);
-                    shouldUpdateInput = true;
-                } else if (prop === "format") {
-                    this.setFormat(nextProps);
-                    shouldUpdateInput = true;
-                }
             }
         }
-        if (shouldUpdateInput) {
+        this.setDateAndFormat(nextProps);
+        if ("date" in pickerParams || "format" in pickerParams) {
             this.updateInput();
         }
         this.bootstrapDateTimePicker(pickerParams);
     }
 
     onWillUnmount() {
-        window.$(this.root.el).off(); // Removes all jQuery events
-
+        window.$(this.rootRef.el).off(); // Removes all jQuery events
         this.bootstrapDateTimePicker("destroy");
     }
 
@@ -136,7 +141,7 @@ export class DatePicker extends Component {
         return {
             format:
                 !useStatic || isValidStaticFormat(this.format) ? this.format : this.staticFormat,
-            locale: this.date.locale,
+            locale: this.props.locale || (this.date && this.date.locale),
             timezone: this.isLocal,
         };
     }
@@ -147,8 +152,8 @@ export class DatePicker extends Component {
     initFormat() {
         this.defaultFormat = localization.dateFormat;
         this.staticFormat = "yyyy/MM/dd";
-        this.formatValue = formatters.get("date");
-        this.parseValue = parsers.get("date");
+        this.formatValue = wrapError(formatDate);
+        this.parseValue = wrapError(parseDate);
         this.isLocal = false;
     }
 
@@ -158,17 +163,10 @@ export class DatePicker extends Component {
      * @param {Object} params
      * @param {DateTime} params.date
      * @param {string} [params.locale]
-     */
-    setDate({ date, locale }) {
-        this.date = locale ? date.setLocale(locale) : date;
-    }
-
-    /**
-     * Sets the current format.
-     * @param {Object} params
      * @param {string} [params.format]
      */
-    setFormat({ format }) {
+    setDateAndFormat({ date, locale, format }) {
+        this.date = date && locale ? date.setLocale(locale) : date;
         // Fallback to default localization format in `@web/core/l10n/dates.js`.
         this.format = format || this.defaultFormat;
     }
@@ -179,10 +177,9 @@ export class DatePicker extends Component {
      * @param {boolean} [params.useStatic]
      */
     updateInput({ useStatic } = {}) {
-        try {
-            this.inputRef.el.value = this.formatValue(this.date, this.getOptions(useStatic));
-        } catch (_err) {
-            // Do nothing
+        const [formattedDate] = this.formatValue(this.date, this.getOptions(useStatic));
+        if (formattedDate) {
+            this.inputRef.el.value = formattedDate;
         }
     }
 
@@ -197,20 +194,20 @@ export class DatePicker extends Component {
     bootstrapDateTimePicker(commandOrParams) {
         if (typeof commandOrParams === "object") {
             const format = isValidStaticFormat(this.format) ? this.format : this.staticFormat;
-            const params = { ...commandOrParams, format: luxonFormatToMomentFormat(format) };
-            if (!params.locale && commandOrParams.date) {
-                params.locale = commandOrParams.date.locale;
-            }
+            const params = {
+                ...commandOrParams,
+                date: this.date || null,
+                format: luxonFormatToMomentFormat(format),
+                locale: commandOrParams.locale || (this.date && this.date.locale),
+            };
             for (const prop in params) {
                 if (params[prop] instanceof DateTime) {
-                    const luxonDate = params[prop];
-                    const momentDate = luxonDateToMomentDate(luxonDate);
-                    params[prop] = momentDate;
+                    params[prop] = luxonDateToMomentDate(params[prop]);
                 }
             }
             commandOrParams = params;
         }
-        return window.$(this.root.el).datetimepicker(commandOrParams);
+        return window.$(this.rootRef.el).datetimepicker(commandOrParams);
     }
 
     //---------------------------------------------------------------------
@@ -232,17 +229,26 @@ export class DatePicker extends Component {
      * @param {boolean} [params.useStatic]
      */
     onDateChange({ useStatic } = {}) {
-        let date;
-        try {
-            date = this.parseValue(this.inputRef.el.value, this.getOptions(useStatic));
-        } catch (_err) {
+        const { value } = this.inputRef.el;
+        const options = this.getOptions(useStatic);
+        const parsedDate = value && this.parseValue(value, options)[0];
+        this.state.warning = parsedDate && parsedDate > DateTime.local();
+        if (value && !parsedDate) {
             // Reset to default (= given) date.
-        }
-        if (!date || date.equals(this.date)) {
             this.updateInput();
-        } else {
-            this.state.warning = date > DateTime.local();
-            this.props.onDateTimeChanged(date);
+        }
+        if (!areDateEquals(this.date, parsedDate)) {
+            this.props.onDateTimeChanged(parsedDate);
+        }
+    }
+
+    onInputKeydown(ev) {
+        const hotkey = getActiveHotkey(ev);
+        if (this.datePickerShown && hotkey === "escape") {
+            this.bootstrapDateTimePicker("hide");
+            this.inputRef.el.select();
+            ev.preventDefault();
+            ev.stopPropagation();
         }
     }
 
@@ -277,7 +283,7 @@ DatePicker.defaultProps = {
 DatePicker.props = {
     // Components props
     onDateTimeChanged: Function,
-    date: DateTime,
+    date: { type: [DateTime, { value: false }], optional: true },
     warn_future: { type: Boolean, optional: true },
     // Bootstrap datepicker options
     buttons: {
@@ -313,6 +319,7 @@ DatePicker.props = {
     readonly: { type: Boolean, optional: true },
     useCurrent: { type: Boolean, optional: true },
     widgetParent: { type: String, optional: true },
+    daysOfWeekDisabled: { type: Array, optional: true },
 };
 DatePicker.template = "web.DatePicker";
 
@@ -333,8 +340,8 @@ export class DateTimePicker extends DatePicker {
     initFormat() {
         this.defaultFormat = localization.dateTimeFormat;
         this.staticFormat = "yyyy/MM/dd HH:mm:ss";
-        this.formatValue = formatters.get("datetime");
-        this.parseValue = parsers.get("datetime");
+        this.formatValue = wrapError(formatDateTime);
+        this.parseValue = wrapError(parseDateTime);
         this.isLocal = true;
     }
 }
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
index 3278d0c3705..66665ca7c52 100644
--- a/addons/web/static/src/core/datepicker/datepicker.xml
+++ b/addons/web/static/src/core/datepicker/datepicker.xml
@@ -13,10 +13,13 @@
                 t-ref="input"
                 t-on-change="() => this.onDateChange()"
                 t-on-click="onInputClick"
+                t-on-keydown="onInputKeydown"
+            />
+            <span
+                t-if="props.warn_future and state.warning"
+                class="fa fa-exclamation-triangle text-danger o_tz_warning o_datepicker_warning"
+                data-tooltip="This date is on the future. Make sure it is what you expected."
             />
-            <span t-if="props.warn_future and state.warning" class="fa fa-exclamation-triangle text-danger o_tz_warning o_datepicker_warning">
-                <t>This date is on the future. Make sure it is what you expected.</t>
-            </span>
             <span class="o_datepicker_button" />
         </div>
     </t>
diff --git a/addons/web/static/src/core/l10n/dates.js b/addons/web/static/src/core/l10n/dates.js
index a6ace94719a..8a737a2e4d8 100644
--- a/addons/web/static/src/core/l10n/dates.js
+++ b/addons/web/static/src/core/l10n/dates.js
@@ -51,6 +51,15 @@ const smartDateUnits = {
 };
 const smartDateRegex = new RegExp(`^([+-])(\\d+)([${Object.keys(smartDateUnits).join("")}]?)$`);
 
+/**
+ * @param {any} d1
+ * @param {any} d2
+ * @returns {boolean}
+ */
+export function areDateEquals(d1, d2) {
+    return d1 instanceof DateTime && d2 instanceof DateTime ? d1.equals(d2) : d1 === d2;
+}
+
 /**
  * Smart date inputs are shortcuts to write dates quicker.
  * These shortcuts should respect the format ^[+-]\d+[dmwy]?$
@@ -86,14 +95,10 @@ function parseSmartDateInput(value) {
  * Returns false otherwise.
  *
  * @param {DateTime | false} date
- * @returns {DateTime | false}
+ * @returns {boolean}
  */
-function constrain(dt) {
-    let valid = dt !== false;
-    valid = valid && dt.isValid;
-    valid = valid && dt.year >= 1000;
-    valid = valid && dt.year < 10000;
-    return valid ? dt : false;
+function isValidDateTime(dt) {
+    return dt && dt.isValid && dt.year >= 1000 && dt.year < 10000;
 }
 
 /**
@@ -187,7 +192,7 @@ export function formatDateTime(value, options = {}) {
         return "";
     }
     const format = options.format || localization.dateTimeFormat;
-    const numberingSystem = options.numberingSystem || Settings.defaultNumberingSystem;
+    const numberingSystem = options.numberingSystem || Settings.defaultNumberingSystem || "latn";
     const zone = options.timezone ? "system" : "utc";
     value = value.setZone(zone, { keepLocaltime: options.timezone });
     return value.toFormat(format, { numberingSystem });
@@ -208,6 +213,9 @@ export function formatDateTime(value, options = {}) {
  * @returns {DateTime | false} Luxon DateTime object
  */
 export function parseDate(value, options = {}) {
+    if (!value) {
+        return false;
+    }
     return parseDateTime(value, { timezone: false, ...options }).startOf("day");
 }
 
@@ -256,46 +264,75 @@ export function parseDateTime(value, options = {}) {
         return false;
     }
 
-    const valueDigitsOnly = value.replace(nonDigitsRegex, "");
+    const fmt = options.format || localization.dateTimeFormat;
     const parseOpts = {
         setZone: true,
         zone: options.timezone ? "system" : "utc",
         locale: options.locale,
-        numberingSystem: options.numberingSystem || Settings.defaultNumberingSystem,
+        numberingSystem: options.numberingSystem || Settings.defaultNumberingSystem || "latn",
     };
 
-    let result = constrain(parseSmartDateInput(value));
+    // Base case: try parsing with the given format and options
+    let result = DateTime.fromFormat(value, fmt, parseOpts);
 
-    if (!result) {
-        const fmt = options.format || localization.dateTimeFormat;
+    // Try parsing as a smart date
+    if (!isValidDateTime(result)) {
+        result = parseSmartDateInput(value);
+    }
+
+    // Try parsing with partial date parts
+    if (!isValidDateTime(result)) {
         const fmtWoZero = stripAlphaDupes(fmt);
+        result = DateTime.fromFormat(value, fmtWoZero, parseOpts);
+    }
 
+    // Try parsing with custom shorthand date parts
+    if (!isValidDateTime(result)) {
         // Luxon is not permissive regarding delimiting characters in the format.
         // So if the value to parse has less characters than the format, we would
         // try to parse without the delimiting characters.
-        const woSeps = {
-            val: valueDigitsOnly,
-            fmt: fmt.replace(nonAlphaRegex, "").slice(0, valueDigitsOnly.length),
-        };
+        const digitList = value.split(nonDigitsRegex).filter(Boolean);
+        const fmtList = fmt.split(nonAlphaRegex).filter(Boolean);
+        const valWoSeps = digitList.join("");
 
-        result =
-            constrain(DateTime.fromFormat(value, fmt, parseOpts)) ||
-            constrain(DateTime.fromFormat(value, fmtWoZero, parseOpts)) ||
-            constrain(DateTime.fromFormat(woSeps.val, woSeps.fmt, parseOpts));
+        // This is the weird part: we try to adapt the given format to comply with
+        // the amount of digits in the given value. To do this we split the format
+        // and the value on non-letter and non-digit characters respectively. This
+        // should create the same amount of grouping parameters, and the format
+        // groups are trimmed according to the length of their corresponding
+        // digit group. The 'carry' variable allows for the length of a digit
+        // group to overflow to the next format group. This is typically the case
+        // when the given value doesn't have non-digit separators and generates
+        // one big digit group instead.
+        let carry = 0;
+        const fmtWoSeps = fmtList
+            .map((part, i) => {
+                const digitLength = (digitList[i] || "").length;
+                const actualPart = part.slice(0, digitLength + carry);
+                carry += digitLength - actualPart.length;
+                return actualPart;
+            })
+            .join("");
+
+        result = DateTime.fromFormat(valWoSeps, fmtWoSeps, parseOpts);
     }
 
-    if (!result) {
-        if (valueDigitsOnly.length > 4) {
-            // Also try some fallback formats, but only if value counts more than
-            // four digit characters as this could get misinterpreted as the time of
-            // the actual date.
-            result =
-                constrain(DateTime.fromISO(value, parseOpts)) || // ISO8601
-                constrain(DateTime.fromSQL(value, parseOpts)); // last try: SQL
+    // Try with defaul ISO or SQL formats
+    if (!isValidDateTime(result)) {
+        // Also try some fallback formats, but only if value counts more than
+        // four digit characters as this could get misinterpreted as the time of
+        // the actual date.
+        const valueDigits = value.replace(nonDigitsRegex, "");
+        if (valueDigits.length > 4) {
+            result = DateTime.fromISO(value, parseOpts); // ISO8601
+            if (!isValidDateTime(result)) {
+                result = DateTime.fromSQL(value, parseOpts); // last try: SQL
+            }
         }
     }
 
-    if (!result) {
+    // No working parsing methods: throw an error
+    if (!isValidDateTime(result)) {
         throw new Error(sprintf(_t("'%s' is not a correct date or datetime"), value));
     }
 
@@ -307,45 +344,45 @@ export function parseDateTime(value, options = {}) {
  * @param {string} value
  * @returns {DateTime | false}
  */
-export const deserializeDate = (value) => {
+export function deserializeDate(value) {
     return parseDate(value, {
         format: SERVER_DATE_FORMAT,
         numberingSystem: "latn",
     });
-};
+}
 
 /**
  * Returns a datetime object parsed from the given serialized string.
  * @param {string} value
  * @returns {DateTime | false}
  */
-export const deserializeDateTime = (value) => {
+export function deserializeDateTime(value) {
     return parseDateTime(value, {
         format: `${SERVER_DATE_FORMAT} ${SERVER_TIME_FORMAT}`,
         numberingSystem: "latn",
     });
-};
+}
 
 /**
  * Returns a serialized string representing the given date.
  * @param {DateTime} value
  * @returns {string}
  */
-export const serializeDate = (value) => {
+export function serializeDate(value) {
     return formatDate(value, {
         format: SERVER_DATE_FORMAT,
         numberingSystem: "latn",
     });
-};
+}
 
 /**
  * Returns a serialized string representing the given datetime.
  * @param {DateTime} value
  * @returns {string}
  */
-export const serializeDateTime = (value) => {
+export function serializeDateTime(value) {
     return formatDateTime(value, {
         format: `${SERVER_DATE_FORMAT} ${SERVER_TIME_FORMAT}`,
         numberingSystem: "latn",
     });
-};
+}
diff --git a/addons/web/static/tests/core/datepicker_tests.js b/addons/web/static/tests/core/datepicker_tests.js
index ce3d76cb1b5..ce72f2a32a6 100644
--- a/addons/web/static/tests/core/datepicker_tests.js
+++ b/addons/web/static/tests/core/datepicker_tests.js
@@ -4,6 +4,7 @@ import { applyFilter, toggleMenu } from "@web/../tests/search/helpers";
 import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
 import { registry } from "@web/core/registry";
 import { uiService } from "@web/core/ui/ui_service";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import ActionModel from "web.ActionModel";
 import CustomFilterItem from "web.CustomFilterItem";
 import { createComponent } from "web.test_utils";
@@ -25,7 +26,7 @@ let target;
  * @param {Object} props
  * @returns {Promise<DatePicker>}
  */
-const mountPicker = async (Picker, props) => {
+async function mountPicker(Picker, props) {
     serviceRegistry
         .add(
             "localization",
@@ -34,7 +35,8 @@ const mountPicker = async (Picker, props) => {
                 dateTimeFormat: "dd/MM/yyyy HH:mm:ss",
             })
         )
-        .add("ui", uiService);
+        .add("ui", uiService)
+        .add("hotkey", hotkeyService);
 
     class Parent extends Component {
         setup() {
@@ -54,9 +56,9 @@ const mountPicker = async (Picker, props) => {
 
     const env = await makeTestEnv();
     await mount(Parent, target, { env, props: { Picker } });
-};
+}
 
-const useFRLocale = () => {
+function useFRLocale() {
     if (!window.moment.locales().includes("fr")) {
         // Mocks the FR locale if not loaded
         const originalLocale = window.moment.locale();
@@ -76,9 +78,9 @@ const useFRLocale = () => {
         registerCleanup(() => window.moment.updateLocale("fr", null));
     }
     return "fr";
-};
+}
 
-const useNOLocale = () => {
+function useNOLocale() {
     if (!window.moment.locales().includes("nb")) {
         const originalLocale = window.moment.locale();
         window.moment.defineLocale("nb", {
@@ -97,7 +99,7 @@ const useNOLocale = () => {
         registerCleanup(() => window.moment.updateLocale("nb", null));
     }
     return "nb";
-};
+}
 
 QUnit.module("Components", ({ beforeEach }) => {
     beforeEach(() => {
@@ -527,4 +529,29 @@ QUnit.module("Components", ({ beforeEach }) => {
         await editSelect(valueInput, "05/05/2005");
         await applyFilter(target);
     });
+
+    QUnit.test("start with no value", async function (assert) {
+        assert.expect(6);
+
+        await mountPicker(DateTimePicker, {
+            onDateTimeChanged(date) {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    date.toFormat("dd/MM/yyyy HH:mm:ss"),
+                    "08/02/1997 15:45:05",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+
+        const input = target.querySelector(".o_datepicker_input");
+        assert.strictEqual(input.value, "");
+
+        assert.verifySteps([]);
+        input.value = "08/02/1997 15:45:05";
+        await triggerEvent(target, ".o_datepicker_input", "change");
+
+        assert.verifySteps(["datetime-changed"]);
+        assert.strictEqual(input.value, "08/02/1997 15:45:05");
+    });
 });
diff --git a/addons/web/static/tests/core/l10n/dates_tests.js b/addons/web/static/tests/core/l10n/dates_tests.js
index 0b40a6de5fb..866f60fff96 100644
--- a/addons/web/static/tests/core/l10n/dates_tests.js
+++ b/addons/web/static/tests/core/l10n/dates_tests.js
@@ -664,6 +664,33 @@ QUnit.module(
             });
         });
 
+        QUnit.test("parseDate with short notations", async (assert) => {
+            assert.strictEqual(
+                parseDate("20-10-20", { format: "yyyy-MM-dd" }).toISO(),
+                "2020-10-20T00:00:00.000Z"
+            );
+            assert.strictEqual(
+                parseDate("20/10/20", { format: "yyyy/MM/dd" }).toISO(),
+                "2020-10-20T00:00:00.000Z"
+            );
+            assert.strictEqual(
+                parseDate("10-20-20", { format: "MM-dd-yyyy" }).toISO(),
+                "2020-10-20T00:00:00.000Z"
+            );
+            assert.strictEqual(
+                parseDate("10-20-20", { format: "MM-yyyy-dd" }).toISO(),
+                "2020-10-20T00:00:00.000Z"
+            );
+            assert.strictEqual(
+                parseDate("1-20-2", { format: "MM-yyyy-dd" }).toISO(),
+                "2020-01-02T00:00:00.000Z"
+            );
+            assert.strictEqual(
+                parseDate("20/1/2", { format: "yyyy/MM/dd" }).toISO(),
+                "2020-01-02T00:00:00.000Z"
+            );
+        });
+
         QUnit.test("parseDateTime", async (assert) => {
             /**
              * Type of testSet key: string
@@ -756,6 +783,13 @@ QUnit.module(
             });
         });
 
+        QUnit.test("parseDateTime with short notations", async (assert) => {
+            assert.strictEqual(
+                parseDateTime("20-10-20 8:5:3", { format: "yyyy-MM-dd hh:mm:ss" }).toISO(),
+                "2020-10-20T08:05:03.000Z"
+            );
+        });
+
         QUnit.test("parseDateTime (with legacy options.isUTC = true)", async (assert) => {
             /**
              * Type of testSet key: string

From 442d855c2e990d533313a4a9b8ff4e70056ce0dc Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:08:57 +0000
Subject: [PATCH 06/50] [FIX] web: notification: properly use className option

Before this commit, opening a notification with the className
option would result in a notification being displayed without the
given className. That className was overriden by the transition
className. This commit ensures we keep all classNames.

Part-of: odoo/odoo#92475
---
 .../core/notifications/notification_container.js    |  2 +-
 .../tests/core/notifications/notifications_tests.js | 13 +++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/notifications/notification_container.js b/addons/web/static/src/core/notifications/notification_container.js
index 03ee640d5f2..0eb9617186f 100644
--- a/addons/web/static/src/core/notifications/notification_container.js
+++ b/addons/web/static/src/core/notifications/notification_container.js
@@ -15,7 +15,7 @@ NotificationContainer.template = xml`
     <div class="o_notification_manager">
         <t t-foreach="notifications" t-as="notification" t-key="notification">
             <Transition leaveDuration="0" name="'o_notification_fade'" t-slot-scope="transition">
-                <Notification t-props="notification_value.props" className="transition.className"/>
+                <Notification t-props="notification_value.props" className="(notification_value.props.className || '') + ' ' + transition.className"/>
             </Transition>
         </t>
     </div>`;
diff --git a/addons/web/static/tests/core/notifications/notifications_tests.js b/addons/web/static/tests/core/notifications/notifications_tests.js
index d7d516f8944..a8266fd50b1 100644
--- a/addons/web/static/tests/core/notifications/notifications_tests.js
+++ b/addons/web/static/tests/core/notifications/notifications_tests.js
@@ -38,6 +38,19 @@ QUnit.test("can display a basic notification", async (assert) => {
     assert.hasClass(notif, "border-warning");
 });
 
+QUnit.test("can display a notification with a className", async (assert) => {
+    const env = await makeTestEnv({ serviceRegistry });
+    const { Component: NotificationContainer, props } = registry
+        .category("main_components")
+        .get("NotificationContainer");
+    const notifService = env.services.notification;
+    await mount(NotificationContainer, target, { env, props });
+
+    notifService.add("I'm a basic notification", { className: "abc" });
+    await nextTick();
+    assert.containsOnce(target, ".o_notification.abc");
+});
+
 QUnit.test("title and message are escaped by default", async (assert) => {
     const env = await makeTestEnv({ serviceRegistry });
     const { Component: NotificationContainer, props } = registry

From a535d7c6fb5a6abe083e7d665d7243f5061a4773 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Fri, 24 Jun 2022 07:49:01 +0000
Subject: [PATCH 07/50] [FIX] web_tour: native events + better error messages

This commit is two-fold:
 1) events triggered with jQuery do not go through the native
    layer, so if an handler has been bound natively, it won't be
    called. Since our new code no longer uses jQuery, this caused
    issue in some tours.
 2) this commit explicitely logs the failing step when a tour
    crashes, which helps debugging.

Part-of: odoo/odoo#92475
---
 .../web_tour/static/src/js/running_tour_action_helper.js | 2 +-
 addons/web_tour/static/src/js/tour_manager.js            | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/addons/web_tour/static/src/js/running_tour_action_helper.js b/addons/web_tour/static/src/js/running_tour_action_helper.js
index cee5a221cc4..f0c27750b4a 100644
--- a/addons/web_tour/static/src/js/running_tour_action_helper.js
+++ b/addons/web_tour/static/src/js/running_tour_action_helper.js
@@ -110,7 +110,7 @@ var RunningTourActionHelper = core.Class.extend({
             values.$element.focusInEnd();
             values.$element.trigger($.Event( "keyup", {key: '_', keyCode: 95}));
         }
-        values.$element.trigger("change");
+        values.$element[0].dispatchEvent(new Event("change", { bubbles: true, cancelable: false }));
     },
     _text_blur: function (values, text) {
         this._text(values, text);
diff --git a/addons/web_tour/static/src/js/tour_manager.js b/addons/web_tour/static/src/js/tour_manager.js
index 8e180c96150..a6b35709cce 100644
--- a/addons/web_tour/static/src/js/tour_manager.js
+++ b/addons/web_tour/static/src/js/tour_manager.js
@@ -189,7 +189,7 @@ return core.Class.extend(mixins.EventDispatcherMixin, ServicesMixin, {
         // redirect to its starting point (or /web by default)
         window.location.href = window.location.origin + (tour.url || '/web');
     },
-    run: function (tour_name, step_delay) {
+    run: async function (tour_name, step_delay) {
         console.log(_.str.sprintf("Preparing tour %s", tour_name));
         if (this.running_tour) {
             this._deactivate_tip(this.active_tooltips[this.running_tour]);
@@ -534,7 +534,12 @@ return core.Class.extend(mixins.EventDispatcherMixin, ServicesMixin, {
                 tip.run.call(tip.widget, action_helper);
             } else if (tip.run !== undefined) {
                 var m = tip.run.match(/^([a-zA-Z0-9_]+) *(?:\(? *(.+?) *\)?)?$/);
-                action_helper[m[1]](m[2]);
+                try {
+                    action_helper[m[1]](m[2]);
+                } catch (e) {
+                    console.error(`Tour ${tour_name} failed at step ${self._describeTip(tip)}: ${e.message}`);
+                    throw e;
+                }
             } else if (tour.current_step === tour.steps.length - 1) {
                 console.log('Tour %s: ignoring action (auto) of last step', tour_name);
             } else {

From 178aa2360beaf989dba641313fc7db4b63904acc Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:09:22 +0000
Subject: [PATCH 08/50] [IMP] web: orm service: add nameGet

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/orm_service.js     | 11 +++++++++-
 .../static/tests/core/orm_service_tests.js    | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/orm_service.js b/addons/web/static/src/core/orm_service.js
index efe349ad013..b5f929e92cf 100644
--- a/addons/web/static/src/core/orm_service.js
+++ b/addons/web/static/src/core/orm_service.js
@@ -125,6 +125,14 @@ export class ORM {
         return this.call(model, "create", [state], { context: ctx });
     }
 
+    nameGet(model, ids, ctx) {
+        validatePrimitiveList("ids", "number", ids);
+        if (!ids.length) {
+            return Promise.resolve([]);
+        }
+        return this.call(model, "name_get", [ids], { context: ctx });
+    }
+
     read(model, ids, fields, ctx) {
         validatePrimitiveList("ids", "number", ids);
         if (fields) {
@@ -187,7 +195,7 @@ export class ORM {
             fields,
             context: ctx,
         };
-        assignOptions(kwargs, options, ["lazy", "offset", "orderby", "limit"]);
+        assignOptions(kwargs, options, ["lazy", "offset", "orderby", "limit", "expand"]);
         return this.call(model, "web_read_group", [], kwargs);
     }
 
@@ -223,6 +231,7 @@ export const ormService = {
     async: [
         "call",
         "create",
+        "name_get",
         "read",
         "readGroup",
         "search",
diff --git a/addons/web/static/tests/core/orm_service_tests.js b/addons/web/static/tests/core/orm_service_tests.js
index 04742690c64..24ad25e17ba 100644
--- a/addons/web/static/tests/core/orm_service_tests.js
+++ b/addons/web/static/tests/core/orm_service_tests.js
@@ -114,6 +114,27 @@ QUnit.test("create method", async (assert) => {
     });
 });
 
+QUnit.test("nameGet method", async (assert) => {
+    const [query, rpc] = makeFakeRPC();
+    serviceRegistry.add("rpc", rpc);
+    const env = await makeTestEnv();
+    await env.services.orm.nameGet("sale.order", [2, 5], { complete: true });
+    assert.strictEqual(query.route, "/web/dataset/call_kw/sale.order/name_get");
+    assert.deepEqual(query.params, {
+        args: [[2, 5]],
+        kwargs: {
+            context: {
+                complete: true,
+                lang: "en",
+                tz: "taht",
+                uid: 7,
+            },
+        },
+        method: "name_get",
+        model: "sale.order",
+    });
+});
+
 QUnit.test("unlink method", async (assert) => {
     const [query, rpc] = makeFakeRPC();
     serviceRegistry.add("rpc", rpc);

From 5501744a83cb9dc99c90fbfda7699f26729c9a68 Mon Sep 17 00:00:00 2001
From: "Xavier BOL (xbo)" <xbo@odoo.com>
Date: Tue, 14 Jun 2022 08:47:57 +0000
Subject: [PATCH 09/50] [IMP] web: add searchCount implementation in ORM
 service

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/orm_service.js     |  8 ++++++++
 .../static/tests/core/orm_service_tests.js    | 20 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/addons/web/static/src/core/orm_service.js b/addons/web/static/src/core/orm_service.js
index b5f929e92cf..56933502625 100644
--- a/addons/web/static/src/core/orm_service.js
+++ b/addons/web/static/src/core/orm_service.js
@@ -177,6 +177,14 @@ export class ORM {
         return this.call(model, "search_read", [], kwargs);
     }
 
+    searchCount(model, domain, ctx = {}) {
+        validateArray('domain', domain);
+        const kwargs = {
+            context: ctx,
+        };
+        return this.call(model, 'search_count', [domain], kwargs);
+    }
+
     unlink(model, ids, ctx) {
         validatePrimitiveList("ids", "number", ids);
         if (!ids.length) {
diff --git a/addons/web/static/tests/core/orm_service_tests.js b/addons/web/static/tests/core/orm_service_tests.js
index 24ad25e17ba..cf3f7fb0869 100644
--- a/addons/web/static/tests/core/orm_service_tests.js
+++ b/addons/web/static/tests/core/orm_service_tests.js
@@ -257,6 +257,26 @@ QUnit.test("searchRead method", async (assert) => {
     });
 });
 
+QUnit.test("searchCount method", async (assert) => {
+    const [query, rpc] = makeFakeRPC();
+    serviceRegistry.add("rpc", rpc);
+    const env = await makeTestEnv();
+    await env.services.orm.searchCount("sale.order", [["user_id", "=", 2]]);
+    assert.strictEqual(query.route, "/web/dataset/call_kw/sale.order/search_count");
+    assert.deepEqual(query.params, {
+        args: [[["user_id", "=", 2]]],
+        kwargs: {
+            context: {
+                lang: "en",
+                tz: "taht",
+                uid: 7,
+            },
+        },
+        method: "search_count",
+        model: "sale.order",
+    });
+});
+
 QUnit.test("webSearchRead method", async (assert) => {
     const [query, rpc] = makeFakeRPC();
     serviceRegistry.add("rpc", rpc);

From 313052ffb80b55fcecc13f8e3d1b5285dc7129bd Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:11:43 +0000
Subject: [PATCH 10/50] [IMP] web: object utils: add pluck function

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/utils/objects.js         | 10 ++++++++++
 addons/web/static/tests/core/utils/objects_tests.js | 10 +++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/utils/objects.js b/addons/web/static/src/core/utils/objects.js
index 4e7638b0b53..eaf24f0bf8d 100644
--- a/addons/web/static/src/core/utils/objects.js
+++ b/addons/web/static/src/core/utils/objects.js
@@ -21,3 +21,13 @@ export function shallowEqual(obj1, obj2) {
 export function deepCopy(obj) {
     return JSON.parse(JSON.stringify(obj));
 }
+
+/**
+ * @template {T}
+ * @param {T} object
+ * @param {...(keyof T)} properties
+ * @returns {Partial<T>}
+ */
+export function pluck(object, ...properties) {
+    return Object.fromEntries(Object.entries(object).filter(([k]) => properties.includes(k)));
+}
diff --git a/addons/web/static/tests/core/utils/objects_tests.js b/addons/web/static/tests/core/utils/objects_tests.js
index 27e14807ea4..41cde986927 100644
--- a/addons/web/static/tests/core/utils/objects_tests.js
+++ b/addons/web/static/tests/core/utils/objects_tests.js
@@ -1,10 +1,18 @@
 /** @odoo-module **/
 
-import { shallowEqual } from "@web/core/utils/objects";
+import { pluck, shallowEqual } from "@web/core/utils/objects";
 
 QUnit.module("utils", () => {
     QUnit.module("Objects");
 
+    QUnit.test("pluck", function (assert) {
+        assert.deepEqual(pluck({}), {});
+        assert.deepEqual(pluck({}, "a"), {});
+        assert.deepEqual(pluck({ a: 3, b: "a", c: [] }, "a"), { a: 3 });
+        assert.deepEqual(pluck({ a: 3, b: "a", c: [] }, "a", "c"), { a: 3, c: [] });
+        assert.deepEqual(pluck({ a: 3, b: "a", c: [] }, "a", "b", "c"), { a: 3, b: "a", c: [] });
+    });
+
     QUnit.test("shallowEqual: simple valid cases", function (assert) {
         assert.ok(shallowEqual({}, {}));
         assert.ok(shallowEqual({ a: 1 }, { a: 1 }));

From 7a8052efd8b1cdd01f3944516d6d487a32e2db5d Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:10:43 +0000
Subject: [PATCH 11/50] [IMP] web: concurrency utils: add Deferred

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/utils/concurrency.js  | 15 +++++++++++++++
 .../static/tests/core/utils/concurrency_tests.js | 16 +++++++++++++++-
 addons/web/static/tests/helpers/utils.js         | 13 +++----------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/core/utils/concurrency.js b/addons/web/static/src/core/utils/concurrency.js
index b673cb6b8b4..9fa431c121a 100644
--- a/addons/web/static/src/core/utils/concurrency.js
+++ b/addons/web/static/src/core/utils/concurrency.js
@@ -154,3 +154,18 @@ export class Race {
         return this.currentProm;
     }
 }
+
+/**
+ * Deferred is basically a resolvable/rejectable extension of Promise.
+ */
+export class Deferred {
+    constructor() {
+        let resolve;
+        let reject;
+        const prom = new Promise((res, rej) => {
+            resolve = res;
+            reject = rej;
+        });
+        return Object.assign(prom, { resolve, reject });
+    }
+}
diff --git a/addons/web/static/tests/core/utils/concurrency_tests.js b/addons/web/static/tests/core/utils/concurrency_tests.js
index bf61402ee69..b8bbc888188 100644
--- a/addons/web/static/tests/core/utils/concurrency_tests.js
+++ b/addons/web/static/tests/core/utils/concurrency_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { Mutex, KeepLast, Race } from "@web/core/utils/concurrency";
+import { Deferred, Mutex, KeepLast, Race } from "@web/core/utils/concurrency";
 import { nextTick, makeDeferred } from "../../helpers/utils";
 
 QUnit.module("utils", () => {
@@ -312,4 +312,18 @@ QUnit.module("utils", () => {
         assert.verifySteps(["ok (44)"]);
         assert.strictEqual(race.getCurrentProm(), null);
     });
+
+    QUnit.test("Deferred: basic use", async function (assert) {
+        const def1 = new Deferred();
+        def1.then((v) => assert.step(`ok (${v})`));
+        def1.resolve(44);
+        await nextTick();
+        assert.verifySteps(["ok (44)"]);
+
+        const def2 = new Deferred();
+        def2.catch((v) => assert.step(`ko (${v})`));
+        def2.reject(44);
+        await nextTick();
+        assert.verifySteps(["ko (44)"]);
+    });
 });
diff --git a/addons/web/static/tests/helpers/utils.js b/addons/web/static/tests/helpers/utils.js
index 8354eaafe65..0abdc2ee4da 100644
--- a/addons/web/static/tests/helpers/utils.js
+++ b/addons/web/static/tests/helpers/utils.js
@@ -2,9 +2,10 @@
 
 import { browser } from "@web/core/browser/browser";
 import { isMacOS } from "@web/core/browser/feature_detection";
+import { download } from "@web/core/network/download";
+import { Deferred } from "@web/core/utils/concurrency";
 import { patch, unpatch } from "@web/core/utils/patch";
 import { registerCleanup } from "./cleanup";
-import { download } from "@web/core/network/download";
 
 const { App, onMounted, onPatched, useComponent } = owl;
 
@@ -150,15 +151,7 @@ export async function nextTick() {
 }
 
 export function makeDeferred() {
-    /** @type {(value:any)=>void} */
-    let resolve;
-    /** @type {(reason?:any)=>void} */
-    let reject;
-    const prom = new Promise((res, rej) => {
-        resolve = res;
-        reject = rej;
-    });
-    return Object.assign(prom, { resolve, reject });
+    return new Deferred();
 }
 
 function findElement(el, selector) {

From e5152781cc3e9b64cf8d7d153f3c0a00dff8a786 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Thu, 23 Jun 2022 07:16:48 +0000
Subject: [PATCH 12/50] [IMP] web: debounce: support "animationFrame" delay

By passing "animationFrame" as delay value, the debounced function
will be called just before the next animation frame following the
moment if has been effectively called.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/utils/timing.js    | 33 +++++++++++--------
 .../web/static/tests/core/ui_service_tests.js |  2 +-
 .../static/tests/core/utils/timing_tests.js   | 18 +++++++++-
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/addons/web/static/src/core/utils/timing.js b/addons/web/static/src/core/utils/timing.js
index 5d9101335fa..7cc64925030 100644
--- a/addons/web/static/src/core/utils/timing.js
+++ b/addons/web/static/src/core/utils/timing.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { browser } from "../browser/browser";
+import { browser } from "@web/core/browser/browser";
 
 /**
  * Creates a version of the function where only the last call between two
@@ -33,7 +33,7 @@ export function throttleForAnimation(func) {
 
 /**
  * Creates and returns a new debounced version of the passed function (func)
- * which will postpone its execution until after wait milliseconds
+ * which will postpone its execution until after 'delay' milliseconds
  * have elapsed since the last time it was invoked. The debounced function
  * will return a Promise that will be resolved when the function (func)
  * has been fully executed. If `immediate` is passed, trigger the function
@@ -41,26 +41,31 @@ export function throttleForAnimation(func) {
  *
  * @template T the return type of the original function
  * @param {(...args) => T} func the function to debounce
- * @param {number} wait how long should elapse before the function is called
+ * @param {number | "animationFrame"} delay how long should elapse before the function
+ *      is called. If 'animationFrame' is given instead of a number, 'requestAnimationFrame'
+ *      will be used instead of 'setTimeout'.
  * @param {boolean} [immediate=false] whether the function should be called on
  *      the leading edge instead of the trailing edge.
  * @returns {{ (...args): Promise<T>, cancel: () => void }} the debounced function
  */
-export function debounce(func, wait, immediate = false) {
-    let timeout;
+export function debounce(func, delay, immediate = false) {
+    let handle;
     const funcName = func.name ? func.name + " (debounce)" : "debounce";
+    const useAnimationFrame = delay === "animationFrame";
+    const setFnName = useAnimationFrame ? "requestAnimationFrame" : "setTimeout";
+    const clearFnName = useAnimationFrame ? "cancelAnimationFrame" : "clearTimeout";
     return Object.assign(
         {
             [funcName](...args) {
                 return new Promise((resolve) => {
-                    const callNow = immediate && !timeout;
-                    browser.clearTimeout(timeout);
-                    timeout = browser.setTimeout(() => {
-                        timeout = null;
+                    const callNow = immediate && !handle;
+                    browser[clearFnName](handle);
+                    handle = browser[setFnName](() => {
+                        handle = null;
                         if (!immediate) {
                             Promise.resolve(func.apply(this, args)).then(resolve);
                         }
-                    }, wait);
+                    }, delay);
                     if (callNow) {
                         Promise.resolve(func.apply(this, args)).then(resolve);
                     }
@@ -69,7 +74,7 @@ export function debounce(func, wait, immediate = false) {
         }[funcName],
         {
             cancel() {
-                browser.clearTimeout(timeout);
+                browser[clearFnName](handle);
             },
         }
     );
@@ -82,10 +87,10 @@ export function debounce(func, wait, immediate = false) {
  * @deprecated this function has behaviour that is unexpected considering its
  *      name, prefer _.throttle until this function is rewritten
  * @param {Function} func
- * @param {number} wait
+ * @param {number} delay
  * @returns {Function}
  */
-export function throttle(func, wait) {
+export function throttle(func, delay) {
     let waiting = false;
     const funcName = func.name ? func.name + " (throttle)" : "throttle";
     return {
@@ -96,7 +101,7 @@ export function throttle(func, wait) {
                 browser.setTimeout(function () {
                     waiting = false;
                     func.call(context, ...args);
-                }, wait);
+                }, delay);
             }
         },
     }[funcName];
diff --git a/addons/web/static/tests/core/ui_service_tests.js b/addons/web/static/tests/core/ui_service_tests.js
index a528702c9f8..3a145436bef 100644
--- a/addons/web/static/tests/core/ui_service_tests.js
+++ b/addons/web/static/tests/core/ui_service_tests.js
@@ -14,7 +14,7 @@ let browser;
 let baseConfig;
 let BlockUI, props;
 
-QUnit.module("UI", {
+QUnit.module("UI service", {
     async beforeEach() {
         target = getFixture();
         serviceRegistry.add("ui", uiService);
diff --git a/addons/web/static/tests/core/utils/timing_tests.js b/addons/web/static/tests/core/utils/timing_tests.js
index 87a1746062c..db0f03d4042 100644
--- a/addons/web/static/tests/core/utils/timing_tests.js
+++ b/addons/web/static/tests/core/utils/timing_tests.js
@@ -74,7 +74,7 @@ QUnit.module("utils", () => {
             assert.step("myFunc");
             return 42;
         };
-        const myDebouncedFunc = debounce(myFunc, 3000, true);
+        const myDebouncedFunc = debounce(myFunc, 3000, { immediate: true });
         myDebouncedFunc().then((x) => {
             assert.step("resolved " + x);
         });
@@ -98,6 +98,22 @@ QUnit.module("utils", () => {
         assert.verifySteps(["resolved 42"]);
     });
 
+    QUnit.test("debounce with 'animationFrame' delay", async function (assert) {
+        const { execRegisteredTimeouts } = mockTimeout();
+        const execRegisteredAnimationFrames = mockAnimationFrame();
+        const myFunc = () => {
+            assert.step("myFunc");
+        };
+        debounce(myFunc, "animationFrame")();
+        assert.verifySteps([]);
+
+        execRegisteredTimeouts(); // should have no effect as we wait for the animation frame
+        assert.verifySteps([]);
+
+        execRegisteredAnimationFrames(); // should call the function
+        assert.verifySteps(["myFunc"]);
+    });
+
     QUnit.test("debounced call can be cancelled", async function (assert) {
         assert.expect(3);
         const { execRegisteredTimeouts } = mockTimeout();

From ebb410accbe3aac051e73031384f640a40544efc Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 23 Jun 2022 06:15:26 +0000
Subject: [PATCH 13/50] [IMP] web: introduce useSortable hook

This hook offers an alternative to jQuery UI sortable and
draggable. It's a step in the way to removing jQuery UI. This
hook will be used by the new owl list and kanban views.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/utils/sortable.js  | 552 ++++++++++++++++++
 addons/web/static/src/core/utils/ui.js        |  42 ++
 .../web/static/tests/core/utils/ui_tests.js   | 277 +++++++++
 3 files changed, 871 insertions(+)
 create mode 100644 addons/web/static/src/core/utils/sortable.js
 create mode 100644 addons/web/static/tests/core/utils/ui_tests.js

diff --git a/addons/web/static/src/core/utils/sortable.js b/addons/web/static/src/core/utils/sortable.js
new file mode 100644
index 00000000000..e3c78a3f694
--- /dev/null
+++ b/addons/web/static/src/core/utils/sortable.js
@@ -0,0 +1,552 @@
+/** @odoo-module **/
+
+import { clamp } from "@web/core/utils/numbers";
+import { debounce } from "@web/core/utils/timing";
+
+const { useEffect, useEnv, useExternalListener, onWillUnmount } = owl;
+
+/**
+ * @typedef SortableParams
+ *
+ * MANDATORY
+ *
+ * @property {{ el: HTMLElement | null }} ref
+ * @property {string} elements defines sortable elements
+ *
+ * OPTIONAL
+ *
+ * @property {boolean | () => boolean} [enable] whether the sortable system should
+ *  be enabled.
+ * @property {string | () => string} [groups] defines parent groups of sortable
+ *  elements. This allows to add `onGroupEnter` and `onGroupLeave` callbacks to
+ *  work on group elements during the dragging sequence.
+ * @property {string | () => string} [handle] additional selector for when the dragging
+ *  sequence must be initiated when dragging on a certain part of the element.
+ * @property {boolean | () => boolean} [connectGroups] whether elements can be dragged
+ *  accross different parent groups. Note that it requires a `groups` param to work.
+ * @property {string | () => string} [cursor] cursor style during the dragging sequence.
+ *
+ * HANDLERS (also optional)
+ *
+ * @property {(group: HTMLElement | null, element: HTMLElement) => any} [onStart]
+ *  called when a dragging sequence is initiated.
+ * @property {(element: HTMLElement) => any} [onElementEnter] called when the cursor
+ *  enters another sortable element.
+ * @property {(element: HTMLElement) => any} [onElementLeave] called when the cursor
+ *  leaves another sortable element.
+ * @property {(group: HTMLElement) => any} [onGroupEnter] (if a `groups` is specified):
+ *  will be called when the cursor enters another group element.
+ * @property {(group: HTMLElement) => any} [onGroupLeave] (if a `groups` is specified):
+ *  will be called when the cursor leaves another group element.
+ * @property {(group: HTMLElement | null, element: HTMLElement) => any} [onStop]
+ *  called when the dragging sequence ends, regardless of the reason.
+ * @property {(params: DropParams) => any} [onDrop] called when the dragging sequence
+ *  ends on a mouseup action AND the dragged element has been moved elsewhere. The
+ *  callback will be given an object with any useful element regarding the new position
+ *  of the dragged element (@see DropParams ).
+ */
+
+/**
+ * @typedef DropParams
+ * @property {HTMLElement} element
+ * @property {HTMLElement | null} group
+ * @property {HTMLElement | null} previous
+ * @property {HTMLElement | null} next
+ * @property {HTMLElement | null} parent
+ */
+
+const LEFT_CLICK = 0;
+const MANDATORY_SORTABLE_PARAMS = ["ref", "elements"];
+const SORTABLE_PARAMS = {
+    enable: ["boolean", "function"],
+    ref: ["object"],
+    elements: ["string"],
+    groups: ["string", "function"],
+    handle: ["string", "function"],
+    connectGroups: ["boolean", "function"],
+    cursor: ["string"],
+};
+
+/**
+ * Cancels the default behavior and propagation of a given event.
+ * @param {Event} ev
+ */
+function cancelEvent(ev) {
+    ev.stopPropagation();
+    ev.stopImmediatePropagation();
+    ev.preventDefault();
+}
+
+/**
+ * @param {SortableParams} params
+ * @returns {[string, string | boolean][]}
+ */
+function computeParams(params) {
+    const computedParams = { enable: true };
+    for (const prop in SORTABLE_PARAMS) {
+        if (prop in params) {
+            computedParams[prop] = params[prop];
+            if (typeof params[prop] === "function") {
+                computedParams[prop] = computedParams[prop]();
+            }
+        }
+    }
+    return Object.entries(computedParams);
+}
+
+/**
+ * Converts a CSS pixel value to a number, removing the 'px' part.
+ * @param {string} val
+ * @returns {number}
+ */
+function cssValueToNumber(val) {
+    return Number(val.slice(0, -2));
+}
+
+/**
+ * Basic error builder for the sortable hook.
+ * @param {string} reason
+ * @returns {Error}
+ */
+function sortableError(reason) {
+    return new Error(`Unable to use sortable feature: ${reason}.`);
+}
+
+/**
+ * Sortable feature hook.
+ *
+ * This hook needs 2 things to work:
+ *
+ * 1) a `ref` object (@see owl.useRef) which will be used as the root element to
+ * calculate boundaries of dragged elements;
+ *
+ * 2) an `elements` selector string or function that will determine which elements
+ * are sortable in the reference element.
+ *
+ * All other parameters are optional and define the constraints of the dragged elements
+ * (and the appearance of the cursor during a dragging sequence), or the different
+ * available handlers triggered during the drag sequence.
+ * @see SortableParams
+ *
+ * @param {SortableParams} params
+ */
+export function useSortable(params) {
+    const env = useEnv();
+    const { ref } = params;
+    /** @type {(() => any)[]} */
+    const cleanups = [];
+
+    // Basic error handling asserting that the parameters are valid.
+    for (const prop in SORTABLE_PARAMS) {
+        if (params[prop] && !SORTABLE_PARAMS[prop].includes(typeof params[prop])) {
+            throw sortableError(`invalid type for property "${prop}" in parameters`);
+        } else if (!params[prop] && MANDATORY_SORTABLE_PARAMS.includes(prop)) {
+            throw sortableError(`missing required property "${prop}" in parameters`);
+        }
+    }
+
+    /**
+     * Stores the current element selector.
+     * @type {string | null}
+     */
+    let groupSelector = null;
+    /**
+     * Stores the current group selector (optional).
+     * @type {string | null}
+     */
+    let elementSelector = null;
+    /**
+     * Stores the full selector used to initiate a drag sequence.
+     * @type {string | null}
+     */
+    let fullSelector = null;
+
+    /**
+     * Stores the style of the cursor, if defined.
+     * @type {string | null}
+     */
+    let cursor = null;
+    /**
+     * Stores whether the sortable elements can be dragged in different groups.
+     * @type {boolean}
+     */
+    let connectGroups = false;
+    /**
+     * Stores the position and dimensions of the confining element (ref or
+     * parent).
+     * @type {DOMRect | null}
+     */
+    let currentContainerRect = null;
+
+    /**
+     * Stores the current dragged element.
+     * @type {HTMLElement | null}
+     */
+    let currentElement = null;
+    /**
+     * Stores the dimensions and position of the dragged element.
+     * @type {DOMRect | null}
+     */
+    let currentElementRect = null;
+    /**
+     * Stores the group in which the current element originated.
+     * @type {HTMLElement | null}
+     */
+    let currentGroup = null;
+    /**
+     * Stores the ghost element taking place of the actual dragged element.
+     * @type {HTMLElement | null}
+     */
+    let ghost = null;
+
+    /**
+     * Stores whether a drag sequence can be initiated.
+     * This is determined by both the given ref being in the document and the
+     * `setup` function returning the required params (namely: `elements`).
+     * @type {boolean}
+     */
+    let enabled = false;
+    /**
+     * Stores whether a drag sequence has been initiated.
+     * @type {boolean}
+     */
+    let started = false;
+
+    /**
+     * These 2 variables store the initial offset between the initial mousedown
+     * position and the top-left corner of the dragged element.
+     */
+    /** @type {number} */
+    let offsetX = 0;
+    /** @type {number} */
+    let offsetY = 0;
+
+    /**
+     * Adds an event listener to be cleaned up after the next drag sequence
+     * has stopped. An additionnal `timeout` param allows the handler to be
+     * delayed after a timeout.
+     * @param {EventTarget} el
+     * @param {string} event
+     * @param {(...args: any[]) => any} callback
+     * @param {boolean | Record<string, boolean>} [options]
+     */
+    const addListener = (el, event, callback, options) => {
+        el.addEventListener(event, callback, options);
+        cleanups.push(() => el.removeEventListener(event, callback, options));
+    };
+
+    /**
+     * Adds style to an element to be cleaned up after the next drag sequence has
+     * stopped.
+     * @param {HTMLElement} el
+     * @param {Record<string, string | number>} style
+     */
+    const addStyle = (el, style) => {
+        const originalStyle = el.getAttribute("style");
+        cleanups.push(() =>
+            originalStyle ? el.setAttribute("style", originalStyle) : el.removeAttribute("style")
+        );
+        for (const key in style) {
+            el.style[key] = style[key];
+        }
+    };
+
+    /**
+     * Safely executes a handler from the `params`, so that the drag sequence can
+     * be interrupted if an error occurs.
+     * @param {string} callbackName
+     * @param  {...any} args
+     */
+    const execHandler = (callbackName, ...args) => {
+        if (typeof params[callbackName] === "function") {
+            try {
+                params[callbackName](...args);
+            } catch (err) {
+                dragStop(true, true);
+                throw err;
+            }
+        }
+    };
+
+    /**
+     * Element "mouseenter" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onElementMouseenter = (ev) => {
+        const element = ev.currentTarget;
+        if (connectGroups || !groupSelector || currentGroup === element.closest(groupSelector)) {
+            const pos = ghost.compareDocumentPosition(element);
+            if (pos === 2 /* BEFORE */) {
+                element.before(ghost);
+            } else if (pos === 4 /* AFTER */) {
+                element.after(ghost);
+            }
+        }
+        execHandler("onElementEnter", element);
+    };
+
+    /**
+     * Element "mouseleave" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onElementMouseleave = (ev) => {
+        const element = ev.currentTarget;
+        execHandler("onElementLeave", element);
+    };
+
+    /**
+     * Group "mouseenter" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onGroupMouseenter = (ev) => {
+        const group = ev.currentTarget;
+        group.appendChild(ghost);
+        execHandler("onGroupEnter", group);
+    };
+
+    /**
+     * Group "mouseleave" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onGroupMouseleave = (ev) => {
+        const group = ev.currentTarget;
+        execHandler("onGroupLeave", group);
+    };
+
+    /**
+     * Window "keydown" event handler.
+     * @param {KeyboardEvent} ev
+     */
+    const onKeydown = (ev) => {
+        if (!enabled || !started) {
+            return;
+        }
+        switch (ev.key) {
+            case "Escape":
+            case "Tab": {
+                cancelEvent(ev);
+                dragStop(true);
+            }
+        }
+    };
+
+    /**
+     * Global (= ref) "mousedown" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onMousedown = (ev) => {
+        // A drag sequence can still be in progress if the mouseup occurred
+        // outside of the window.
+        dragStop(true);
+
+        if (ev.button !== LEFT_CLICK || !enabled || !ev.target.closest(fullSelector)) {
+            return;
+        }
+
+        currentElement = ev.target.closest(elementSelector);
+        currentGroup = groupSelector && ev.target.closest(groupSelector);
+        offsetX = ev.clientX;
+        offsetY = ev.clientY;
+    };
+
+    /**
+     * Window "mousemove" event handler.
+     * @param {MouseEvent} ev
+     */
+    const onMousemove = (ev) => {
+        if (!enabled || !currentElement) {
+            return;
+        }
+        if (started) {
+            // Updates the position of the dragged element.
+            currentElement.style.left = `${clamp(
+                ev.clientX - offsetX,
+                currentContainerRect.x,
+                currentContainerRect.x + currentContainerRect.width - currentElementRect.width
+            )}px`;
+            currentElement.style.top = `${clamp(
+                ev.clientY - offsetY,
+                currentContainerRect.y,
+                currentContainerRect.y + currentContainerRect.height - currentElementRect.height
+            )}px`;
+        } else {
+            dragStart();
+        }
+    };
+
+    /**
+     * Window "mouseup" event handler.
+     */
+    const onMouseup = () => dragStop(false);
+
+    /**
+     * Main entry function to start a drag sequence.
+     */
+    const dragStart = () => {
+        started = true;
+
+        // Calculates the bounding rectangles of the current element, and of the
+        // container element (`parentElement` or `ref.el`).
+        const container = connectGroups || !groupSelector ? ref.el : currentGroup;
+        const containerStyle = getComputedStyle(container);
+        const [pleft, pright, ptop, pbottom] = [
+            "padding-left",
+            "padding-right",
+            "padding-top",
+            "padding-bottom",
+        ].map((prop) => cssValueToNumber(containerStyle.getPropertyValue(prop)));
+
+        currentElementRect = currentElement.getBoundingClientRect();
+        currentContainerRect = container.getBoundingClientRect();
+        const { x, y, width, height } = currentElementRect;
+
+        // Reduces the container's dimensions according to its padding.
+        currentContainerRect.x += pleft;
+        currentContainerRect.width -= pleft + pright;
+        currentContainerRect.y += ptop;
+        currentContainerRect.height -= ptop + pbottom;
+
+        // Prepares the ghost element
+        ghost = currentElement.cloneNode(true);
+        ghost.style.visibility = "hidden";
+        cleanups.push(() => ghost.remove());
+
+        // Binds handlers on eligible groups, if the elements are not confined to
+        // their parents and a 'groupSelector' has been provided.
+        if (connectGroups && groupSelector) {
+            for (const siblingGroup of ref.el.querySelectorAll(groupSelector)) {
+                addListener(siblingGroup, "mouseenter", onGroupMouseenter);
+                addListener(siblingGroup, "mouseleave", onGroupMouseleave);
+                addStyle(siblingGroup, { "pointer-events": "auto" });
+            }
+        }
+
+        // Binds handlers on eligible elements
+        for (const siblingElement of ref.el.querySelectorAll(elementSelector)) {
+            if (siblingElement !== currentElement && siblingElement !== ghost) {
+                addListener(siblingElement, "mouseenter", onElementMouseenter);
+                addListener(siblingElement, "mouseleave", onElementMouseleave);
+                addStyle(siblingElement, { "pointer-events": "auto" });
+            }
+        }
+
+        execHandler("onStart", currentGroup, currentElement);
+
+        // Ghost is initially added right after the current element.
+        currentElement.after(ghost);
+
+        // Adjusts the offset
+        offsetX -= x;
+        offsetY -= y;
+
+        addStyle(currentElement, {
+            position: "fixed",
+            "pointer-events": "none",
+            "z-index": 1000,
+            width: `${width}px`,
+            height: `${height}px`,
+            left: `${x}px`,
+            top: `${y}px`,
+        });
+
+        const bodyStyle = {
+            "pointer-events": "none",
+            "user-select": "none",
+        };
+        if (cursor) {
+            bodyStyle.cursor = cursor;
+        }
+        addStyle(document.body, bodyStyle);
+    };
+
+    /**
+     * Main exit function to stop a drag sequence. Note that it can be called
+     * even if a drag sequence did not start yet to perform a cleanup of all
+     * current context variables.
+     * @param {boolean} cancelled
+     * @param {boolean} [inErrorState] can be set to true when an error
+     *  occurred to avoid falling into an infinite loop if the error
+     *  originated from one of the handlers.
+     */
+    const dragStop = (cancelled, inErrorState) => {
+        if (started) {
+            if (!inErrorState) {
+                execHandler("onStop", currentGroup, currentElement);
+                const previous = ghost.previousElementSibling;
+                const next = ghost.nextElementSibling;
+                if (!cancelled && previous !== currentElement && next !== currentElement) {
+                    execHandler("onDrop", {
+                        group: currentGroup,
+                        element: currentElement,
+                        previous,
+                        next,
+                        parent: groupSelector && ghost.closest(groupSelector),
+                    });
+                }
+            }
+        }
+
+        // Performes all registered clean-ups.
+        while (cleanups.length) {
+            cleanups.pop()();
+        }
+
+        currentContainerRect = null;
+
+        currentElement = null;
+        currentElementRect = null;
+        currentGroup = null;
+        ghost = null;
+
+        started = false;
+    };
+
+    // OWL HOOKS
+
+    // Effect depending on the params to update them.
+    useEffect(
+        (...deps) => {
+            const actualParams = Object.fromEntries(deps);
+            enabled = Boolean(ref.el && !env.isSmall && actualParams.enable);
+            if (!enabled) {
+                return;
+            }
+
+            // Selectors
+            elementSelector = actualParams.elements;
+            groupSelector = actualParams.groups || null;
+            if (!elementSelector) {
+                throw sortableError(`no value found by "elements" selector: ${elementSelector}`);
+            }
+            const allSelectors = [elementSelector];
+            cursor = actualParams.cursor;
+            if (groupSelector) {
+                allSelectors.unshift(groupSelector);
+            }
+            if (actualParams.handle) {
+                allSelectors.push(actualParams.handle);
+            }
+            fullSelector = allSelectors.join(" ");
+
+            // Connection accross groups
+            connectGroups = actualParams.connectGroups;
+        },
+        () => computeParams(params)
+    );
+    // Effect depending on the `ref.el` to add triggering mouse events listener.
+    useEffect(
+        (el) => {
+            if (el) {
+                el.addEventListener("mousedown", onMousedown);
+                return () => el.removeEventListener("mousedown", onMousedown);
+            }
+        },
+        () => [ref.el]
+    );
+    // Other global mouse event listeners.
+    const debouncedMousemove = debounce(onMousemove, "animationFrame", true);
+    useExternalListener(window, "mousemove", debouncedMousemove);
+    useExternalListener(window, "mouseup", onMouseup);
+    useExternalListener(window, "keydown", onKeydown, true);
+    onWillUnmount(() => dragStop(true));
+}
diff --git a/addons/web/static/src/core/utils/ui.js b/addons/web/static/src/core/utils/ui.js
index 418d04295e2..79c7381ffe2 100644
--- a/addons/web/static/src/core/utils/ui.js
+++ b/addons/web/static/src/core/utils/ui.js
@@ -15,3 +15,45 @@ export function getVisibleElements(activeElement, selector) {
     }
     return visibleElements;
 }
+
+// -----------------------------------------------------------------------------
+// Get Tabable Elements
+// -----------------------------------------------------------------------------
+// TODISCUSS:
+//  - leave the following in this file ?
+//  - redefine this selector in tests env with ":not(#qunit *)" ?
+
+// Following selector is based on this spec: https://html.spec.whatwg.org/multipage/interaction.html#dom-tabindex
+let TABABLE_SELECTOR = "[tabindex], a, area, button, frame, iframe, input, object, select, textarea, details > summary:nth-child(1),"
+    .split(",")
+    .join(':not([tabindex="-1"]):not(:disabled),');
+TABABLE_SELECTOR = TABABLE_SELECTOR.slice(0, TABABLE_SELECTOR.length - 1);
+
+export function getTabableElements(container = document.body) {
+    const elements = container.querySelectorAll(TABABLE_SELECTOR);
+    const byTabIndex = {};
+    for (const el of [...elements]) {
+        if (!byTabIndex[el.tabIndex]) {
+            byTabIndex[el.tabIndex] = [];
+        }
+        byTabIndex[el.tabIndex].push(el);
+    }
+
+    const withTabIndexZero = byTabIndex[0] || [];
+    delete byTabIndex[0];
+    return [...Object.values(byTabIndex).flat(), ...withTabIndexZero];
+}
+
+export function getNextTabableElement(container = document.body) {
+    const tabableElements = getTabableElements(container);
+    const index = tabableElements.indexOf(document.activeElement);
+    return index === -1 ? tabableElements[0] : tabableElements[index + 1] || null;
+}
+
+export function getPreviousTabableElement(container = document.body) {
+    const tabableElements = getTabableElements(container);
+    const index = tabableElements.indexOf(document.activeElement);
+    return index === -1
+        ? tabableElements[tabableElements.length - 1]
+        : tabableElements[index - 1] || null;
+}
diff --git a/addons/web/static/tests/core/utils/ui_tests.js b/addons/web/static/tests/core/utils/ui_tests.js
new file mode 100644
index 00000000000..61e27c8a429
--- /dev/null
+++ b/addons/web/static/tests/core/utils/ui_tests.js
@@ -0,0 +1,277 @@
+/** @odoo-module **/
+
+import { dragAndDrop, getFixture, mount, nextTick } from "@web/../tests/helpers/utils";
+import { useSortable } from "@web/core/utils/sortable";
+
+const { Component, reactive, useRef, useState, xml } = owl;
+
+let target;
+QUnit.module("UI", ({ beforeEach }) => {
+    beforeEach(() => (target = getFixture()));
+
+    QUnit.module("Sortable hook");
+
+    QUnit.test("Parameters error handling", async (assert) => {
+        assert.expect(8);
+
+        const mountListAndAssert = async (setupList, shouldThrow) => {
+            class List extends Component {
+                setup() {
+                    setupList();
+                }
+            }
+
+            List.template = xml`
+                <div t-ref="root" class="root">
+                    <ul class="list">
+                        <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item" />
+                    </ul>
+                </div>`;
+
+            let err;
+            await mount(List, target).catch((e) => (err = e));
+
+            assert.ok(
+                shouldThrow ? err : !err,
+                `An error should${shouldThrow ? "" : "n't"} have been thrown when mounting.`
+            );
+        };
+
+        // Incorrect params
+        await mountListAndAssert(() => {
+            useSortable({});
+        }, true);
+        await mountListAndAssert(() => {
+            useSortable({
+                ref: useRef("root"),
+            });
+        }, true);
+        await mountListAndAssert(() => {
+            useSortable({
+                elements: ".item",
+            });
+        }, true);
+        await mountListAndAssert(() => {
+            useSortable({
+                elements: ".item",
+                groups: ".list",
+            });
+        }, true);
+        await mountListAndAssert(() => {
+            useSortable({
+                ref: useRef("root"),
+                setup: () => ({ elements: ".item" }),
+            });
+        }, true);
+        await mountListAndAssert(() => {
+            useSortable({
+                ref: useRef("root"),
+                elements: () => ".item",
+            });
+        }, true);
+
+        // Correct params
+        await mountListAndAssert(() => {
+            useSortable({
+                ref: {},
+                elements: ".item",
+                enable: false,
+            });
+        }, false);
+        await mountListAndAssert(() => {
+            useSortable({
+                ref: useRef("root"),
+                elements: ".item",
+                connectGroups: () => true,
+            });
+        }, false);
+    });
+
+    QUnit.test("Simple sorting in single group", async (assert) => {
+        assert.expect(19);
+
+        class List extends Component {
+            setup() {
+                useSortable({
+                    ref: useRef("root"),
+                    elements: ".item",
+                    onStart(group, element) {
+                        assert.step("start");
+                        assert.notOk(group);
+                        assert.strictEqual(element.innerText, "1");
+                    },
+                    onElementEnter(element) {
+                        assert.step("elemententer");
+                        assert.strictEqual(element.innerText, "2");
+                    },
+                    onStop(group, element) {
+                        assert.step("stop");
+                        assert.notOk(group);
+                        assert.strictEqual(element.innerText, "1");
+                        assert.containsN(target, ".item", 4);
+                    },
+                    onDrop({ group, element, previous, next, parent }) {
+                        assert.step("drop");
+                        assert.notOk(group);
+                        assert.strictEqual(element.innerText, "1");
+                        assert.strictEqual(previous.innerText, "2");
+                        assert.strictEqual(next.innerText, "3");
+                        assert.notOk(parent);
+                    },
+                });
+            }
+        }
+
+        List.template = xml`
+            <div t-ref="root" class="root">
+                <ul class="list">
+                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item" />
+                </ul>
+            </div>`;
+
+        await mount(List, target);
+
+        assert.containsN(target, ".item", 3);
+        assert.verifySteps([]);
+
+        // First item after 2nd item
+        await dragAndDrop(".item:first-child", ".item:nth-child(2)");
+
+        assert.containsN(target, ".item", 3);
+        assert.verifySteps(["start", "elemententer", "stop", "drop"]);
+    });
+
+    QUnit.test("Simple sorting in multiple groups", async (assert) => {
+        assert.expect(20);
+
+        class List extends Component {
+            setup() {
+                useSortable({
+                    ref: useRef("root"),
+                    elements: ".item",
+                    groups: ".list",
+                    connectGroups: true,
+                    onStart(group, element) {
+                        assert.step("start");
+                        assert.hasClass(group, "list2");
+                        assert.strictEqual(element.innerText, "2 1");
+                    },
+                    onGroupEnter(group) {
+                        assert.step("groupenter");
+                        assert.hasClass(group, "list1");
+                    },
+                    onStop(group, element) {
+                        assert.step("stop");
+                        assert.hasClass(group, "list2");
+                        assert.strictEqual(element.innerText, "2 1");
+                    },
+                    onDrop({ group, element, previous, next, parent }) {
+                        assert.step("drop");
+                        assert.hasClass(group, "list2");
+                        assert.strictEqual(element.innerText, "2 1");
+                        assert.strictEqual(previous.innerText, "1 3");
+                        assert.notOk(next);
+                        assert.hasClass(parent, "list1");
+                    },
+                });
+            }
+        }
+
+        List.template = xml`
+            <div t-ref="root" class="root">
+                <ul t-foreach="[1, 2, 3]" t-as="l" t-key="l" t-attf-class="list p-3 list{{ l }}">
+                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="l + ' ' + i" class="item" />
+                </ul>
+            </div>`;
+
+        await mount(List, target);
+
+        assert.containsN(target, ".list", 3);
+        assert.containsN(target, ".item", 9);
+        assert.verifySteps([]);
+
+        // First item of 2nd list appended to first list
+        await dragAndDrop(".list2 .item:first-child", ".list1");
+
+        assert.containsN(target, ".list", 3);
+        assert.containsN(target, ".item", 9);
+        assert.verifySteps(["start", "groupenter", "stop", "drop"]);
+    });
+
+    QUnit.test("Dynamically disable sortable feature", async (assert) => {
+        assert.expect(4);
+
+        let state = reactive({ enableSortable: true });
+        class List extends Component {
+            setup() {
+                this.state = useState(state);
+                useSortable({
+                    ref: useRef("root"),
+                    elements: ".item",
+                    enable: () => this.state.enableSortable,
+                    onStart() {
+                        assert.step("start");
+                    },
+                });
+            }
+        }
+
+        List.template = xml`
+            <div t-ref="root" class="root">
+                <ul class="list">
+                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item" />
+                </ul>
+            </div>`;
+
+        await mount(List, target);
+
+        assert.verifySteps([]);
+
+        // First item before last item
+        await dragAndDrop(".item:first-child", ".item:last-child");
+
+        // Drag should have occurred
+        assert.verifySteps(["start"]);
+
+        state.enableSortable = false;
+        await nextTick();
+
+        // First item before last item
+        await dragAndDrop(".item:first-child", ".item:last-child");
+
+        // Drag shouldn't have occurred
+        assert.verifySteps([]);
+    });
+
+    QUnit.test("Disabled in small environment", async (assert) => {
+        assert.expect(2);
+
+        class List extends Component {
+            setup() {
+                useSortable({
+                    ref: useRef("root"),
+                    elements: ".item",
+                    onStart() {
+                        throw new Error("Shouldn't start the sortable feature.");
+                    },
+                });
+            }
+        }
+
+        List.template = xml`
+            <div t-ref="root" class="root">
+                <ul class="list">
+                    <li t-foreach="[1, 2, 3]" t-as="i" t-key="i" t-esc="i" class="item" />
+                </ul>
+            </div>`;
+
+        await mount(List, target, { env: { isSmall: true } });
+
+        assert.containsN(target, ".item", 3);
+
+        // First item after 2nd item
+        await dragAndDrop(".item:first-child", ".item:nth-child(2)");
+
+        assert.ok(true, "No drag sequence should have been initiated");
+    });
+});

From a8b13c24815b4a8bd74ca01274f1d50d236ee7ab Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Thu, 23 Jun 2022 06:29:12 +0000
Subject: [PATCH 14/50] [IMP] web: add AutoComplete component

This commit introduces an AutoComplete component, which displays
an input and reacts to input events to display a list of suggestions
in a dropdown. The main usecase for this component is the Many2One
field.

Part-of: odoo/odoo#92475
---
 .../src/core/autocomplete/autocomplete.js     | 318 ++++++++++++++++++
 .../src/core/autocomplete/autocomplete.scss   |  11 +
 .../src/core/autocomplete/autocomplete.xml    |  59 ++++
 addons/web/static/src/core/utils/timing.js    |  60 ++--
 .../static/tests/core/autocomplete_tests.js   | 204 +++++++++++
 5 files changed, 629 insertions(+), 23 deletions(-)
 create mode 100644 addons/web/static/src/core/autocomplete/autocomplete.js
 create mode 100644 addons/web/static/src/core/autocomplete/autocomplete.scss
 create mode 100644 addons/web/static/src/core/autocomplete/autocomplete.xml
 create mode 100644 addons/web/static/tests/core/autocomplete_tests.js

diff --git a/addons/web/static/src/core/autocomplete/autocomplete.js b/addons/web/static/src/core/autocomplete/autocomplete.js
new file mode 100644
index 00000000000..d90b99c5eec
--- /dev/null
+++ b/addons/web/static/src/core/autocomplete/autocomplete.js
@@ -0,0 +1,318 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { useDebounced } from "@web/core/utils/timing";
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
+import { usePosition } from "@web/core/position_hook";
+
+const { Component, useExternalListener, useRef, useState, useEffect } = owl;
+
+export class AutoComplete extends Component {
+    setup() {
+        this.nextSourceId = 0;
+        this.nextOptionId = 0;
+        this.sources = [];
+
+        this.state = useState({
+            navigationRev: 0,
+            optionsRev: 0,
+            open: false,
+            activeSourceOption: null,
+        });
+
+        this.inputRef = useRef("input");
+        this.root = useRef("root");
+        this.debouncedOnInput = useDebounced(this.onInput, this.constructor.timeout);
+        useExternalListener(window, "scroll", this.onWindowScroll, true);
+
+        this.hotkey = useService("hotkey");
+        this.hotkeysToRemove = [];
+
+        owl.onWillUpdateProps((nextProps) => {
+            if (nextProps.forceClose) {
+                this.inputRef.el.value = nextProps.value;
+                this.close();
+            }
+        });
+
+        // position and size
+        const sourcesListRef = useRef("sourcesList");
+        useEffect(
+            () => {
+                if (sourcesListRef.el) {
+                    sourcesListRef.el.style.width =
+                        this.inputRef.el.getBoundingClientRect().width + "px";
+                }
+            },
+            () => [sourcesListRef.el]
+        );
+        usePosition(() => this.inputRef.el, {
+            popper: "sourcesList",
+        });
+    }
+
+    get isOpened() {
+        return this.state.open;
+    }
+
+    open(useInput = false) {
+        this.state.open = true;
+        this.loadSources(useInput);
+    }
+
+    close() {
+        this.state.open = false;
+        this.state.activeSourceOption = null;
+    }
+
+    loadSources(useInput) {
+        const sources = [];
+        const proms = [];
+        for (const pSource of this.props.sources) {
+            const source = this.makeSource(pSource);
+            sources.push(source);
+
+            const options = this.loadOptions(
+                pSource.options,
+                useInput ? this.inputRef.el.value.trim() : ""
+            );
+            if (options instanceof Promise) {
+                source.isLoading = true;
+                const prom = options.then((options) => {
+                    source.options = options.map((option) => this.makeOption(option));
+                    source.isLoading = false;
+                    this.state.optionsRev++;
+                });
+                proms.push(prom);
+            } else {
+                source.options = options.map((option) => this.makeOption(option));
+            }
+        }
+        this.sources = sources;
+        Promise.all(proms).then(() => {
+            this.navigate(0);
+        });
+    }
+    loadOptions(options, request) {
+        if (typeof options === "function") {
+            return options(request);
+        } else {
+            return options;
+        }
+    }
+    makeOption(option) {
+        return Object.assign(Object.create(option), {
+            id: ++this.nextOptionId,
+        });
+    }
+    makeSource(source) {
+        return {
+            id: ++this.nextSourceId,
+            options: [],
+            isLoading: false,
+            placeholder: source.placeholder,
+            optionTemplate: source.optionTemplate,
+        };
+    }
+
+    isActiveSourceOption([sourceIndex, optionIndex]) {
+        return (
+            this.state.activeSourceOption &&
+            this.state.activeSourceOption[0] === sourceIndex &&
+            this.state.activeSourceOption[1] === optionIndex
+        );
+    }
+    selectOption(indices, params = {}) {
+        this.inputRef.el.value = "";
+
+        const option = this.sources[indices[0]].options[indices[1]];
+        if (option.unselectable) {
+            return;
+        }
+
+        this.props.onSelect(option, {
+            ...params,
+            inputValue: this.inputRef.el.value.trim(),
+            input: this.inputRef.el,
+        });
+        this.close();
+    }
+
+    navigate(direction) {
+        let step = Math.sign(direction);
+        if (!step) {
+            this.state.activeSourceOption = null;
+            step = 1;
+        } else {
+            this.state.navigationRev++;
+        }
+
+        if (this.state.activeSourceOption) {
+            let [sourceIndex, optionIndex] = this.state.activeSourceOption;
+            let source = this.sources[sourceIndex];
+
+            optionIndex += step;
+            if (0 > optionIndex || optionIndex >= source.options.length) {
+                sourceIndex += step;
+                source = this.sources[sourceIndex];
+
+                while (source && source.isLoading) {
+                    sourceIndex += step;
+                    source = this.sources[sourceIndex];
+                }
+
+                if (source) {
+                    optionIndex = step < 0 ? source.options.length - 1 : 0;
+                }
+            }
+
+            this.state.activeSourceOption = source ? [sourceIndex, optionIndex] : null;
+        } else {
+            let sourceIndex = step < 0 ? this.sources.length - 1 : 0;
+            let source = this.sources[sourceIndex];
+
+            while (source && source.isLoading) {
+                sourceIndex += step;
+                source = this.sources[sourceIndex];
+            }
+
+            if (source) {
+                const optionIndex = step < 0 ? source.options.length - 1 : 0;
+                this.state.activeSourceOption = [sourceIndex, optionIndex];
+            }
+        }
+    }
+
+    onInputBlur() {
+        const value = this.inputRef.el.value;
+        if (
+            this.props.autoSelect &&
+            this.state.activeSourceOption &&
+            value.length > 0 &&
+            value !== this.props.value
+        ) {
+            this.selectOption(this.state.activeSourceOption, { triggeredOnBlur: true });
+        } else {
+            this.props.onBlur({
+                inputValue: value,
+            });
+            this.close();
+        }
+    }
+    onInputClick() {
+        if (!this.isOpened) {
+            this.open(this.inputRef.el.value.trim() !== this.props.value);
+        } else {
+            this.close();
+        }
+    }
+    onInputChange() {
+        this.props.onChange({
+            inputValue: this.inputRef.el.value,
+        });
+    }
+    onInput() {
+        this.props.onInput({
+            inputValue: this.inputRef.el.value,
+        });
+        this.open(true);
+    }
+
+    onInputKeydown(ev) {
+        const hotkey = getActiveHotkey(ev);
+        switch (hotkey) {
+            case "enter":
+                if (!this.isOpened || !this.state.activeSourceOption) {
+                    return;
+                }
+                this.selectOption(this.state.activeSourceOption);
+                break;
+            case "escape":
+                if (!this.isOpened) {
+                    return;
+                }
+                this.close();
+                break;
+            case "tab":
+                if (!this.isOpened) {
+                    return;
+                }
+                if (
+                    this.props.autoSelect &&
+                    this.state.activeSourceOption &&
+                    (this.state.navigationRev > 0 || this.inputRef.el.value.length > 0)
+                ) {
+                    this.selectOption(this.state.activeSourceOption);
+                }
+                this.close();
+                return;
+            case "arrowup":
+                this.navigate(-1);
+                if (!this.isOpened) {
+                    this.open(true);
+                }
+                break;
+            case "arrowdown":
+                this.navigate(+1);
+                if (!this.isOpened) {
+                    this.open(true);
+                }
+                break;
+            default:
+                return;
+        }
+
+        ev.stopPropagation();
+        ev.preventDefault();
+    }
+
+    onOptionMouseEnter(indices) {
+        this.state.activeSourceOption = indices;
+    }
+    onOptionMouseLeave() {
+        this.state.activeSourceOption = null;
+    }
+    onOptionClick(indices) {
+        this.selectOption(indices);
+    }
+
+    onWindowScroll(ev) {
+        if (this.isOpened && !this.root.el.contains(ev.target)) {
+            this.close();
+        }
+    }
+}
+Object.assign(AutoComplete, {
+    template: "web.AutoComplete",
+    props: {
+        value: { type: String },
+        id: { type: String, optional: true },
+        onSelect: { type: Function },
+        sources: {
+            type: Array,
+            element: {
+                type: Object,
+                shape: {
+                    placeholder: { type: String, optional: true },
+                    optionTemplate: { type: String, optional: true },
+                    options: [Array, Function],
+                },
+            },
+        },
+        placeholder: { type: String, optional: true },
+        autoSelect: { type: Boolean, optional: true },
+        onInput: { type: Function, optional: true },
+        onChange: { type: Function, optional: true },
+        onBlur: { type: Function, optional: true },
+        forceClose: { type: Boolean, optional: true },
+    },
+    defaultProps: {
+        placeholder: "",
+        autoSelect: false,
+        onInput: () => {},
+        onChange: () => {},
+        onBlur: () => {},
+        forceClose: false,
+    },
+    timeout: 250,
+});
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.scss b/addons/web/static/src/core/autocomplete/autocomplete.scss
new file mode 100644
index 00000000000..2f186ac15b1
--- /dev/null
+++ b/addons/web/static/src/core/autocomplete/autocomplete.scss
@@ -0,0 +1,11 @@
+
+.o-autocomplete {
+    .o-autocomplete--input {
+        width: 100%;
+    }
+
+    .o-autocomplete--dropdown-menu {
+        left: 0;
+        right: 0;
+    }
+}
diff --git a/addons/web/static/src/core/autocomplete/autocomplete.xml b/addons/web/static/src/core/autocomplete/autocomplete.xml
new file mode 100644
index 00000000000..2654ff87029
--- /dev/null
+++ b/addons/web/static/src/core/autocomplete/autocomplete.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.AutoComplete" owl="1">
+        <div class="o-autocomplete dropdown" t-ref="root">
+            <input
+                type="text"
+                t-att-id="props.id"
+                class="o-autocomplete--input o_input"
+                t-att-placeholder="props.placeholder"
+                t-att-value="props.value"
+                t-on-blur="onInputBlur"
+                t-on-click="onInputClick"
+                t-on-change="onInputChange"
+                t-on-input="debouncedOnInput"
+                t-on-keydown="onInputKeydown"
+                t-ref="input"
+            />
+            <t t-if="isOpened">
+                <ul class="o-autocomplete--dropdown-menu dropdown-menu ui-widget ui-autocomplete show" t-on-mousedown.prevent="" t-ref="sourcesList">
+                    <t t-foreach="sources" t-as="source" t-key="source.id">
+                        <t t-if="source.isLoading">
+                            <li class="o-autocomplete--dropdown-item ui-menu-item">
+                                <a href="#" class="dropdown-item ui-menu-item-wrapper">
+                                    <i class="fa fa-spin fa-circle-o-notch" /> <t t-esc="source.placeholder" />
+                                </a>
+                            </li>
+                        </t>
+                        <t t-else="">
+                            <t t-foreach="source.options" t-as="option" t-key="option.id">
+                                <li
+                                    class="o-autocomplete--dropdown-item ui-menu-item"
+                                    t-att-class="option.classList"
+                                    t-on-mouseenter="() => this.onOptionMouseEnter([source_index, option_index])"
+                                    t-on-mouseleave="() => this.onOptionMouseLeave([source_index, option_index])"
+                                    t-on-click="() => this.onOptionClick([source_index, option_index])"
+                                >
+                                    <a
+                                        href="#"
+                                        class="dropdown-item ui-menu-item-wrapper"
+                                        t-att-class="{ 'ui-state-active': isActiveSourceOption([source_index, option_index]) }"
+                                    >
+                                        <t t-if="source.optionTemplate">
+                                            <t t-call="{{ source.optionTemplate }}" />
+                                        </t>
+                                        <t t-else="">
+                                            <t t-esc="option.label" />
+                                        </t>
+                                    </a>
+                                </li>
+                            </t>
+                        </t>
+                    </t>
+                </ul>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/utils/timing.js b/addons/web/static/src/core/utils/timing.js
index 7cc64925030..b40470dab23 100644
--- a/addons/web/static/src/core/utils/timing.js
+++ b/addons/web/static/src/core/utils/timing.js
@@ -2,6 +2,8 @@
 
 import { browser } from "@web/core/browser/browser";
 
+const { onWillUnmount, useComponent } = owl;
+
 /**
  * Creates a version of the function where only the last call between two
  * animation frames is executed before the browser's next repaint. This
@@ -31,6 +33,33 @@ export function throttleForAnimation(func) {
     );
 }
 
+/**
+ * Returns a function, that, as long as it continues to be invoked, will be
+ * triggered every N milliseconds.
+ *
+ * @deprecated this function has behaviour that is unexpected considering its
+ *      name, prefer _.throttle until this function is rewritten
+ * @param {Function} func
+ * @param {number} delay
+ * @returns {Function}
+ */
+export function throttle(func, delay) {
+    let waiting = false;
+    const funcName = func.name ? func.name + " (throttle)" : "throttle";
+    return {
+        [funcName](...args) {
+            const context = this;
+            if (!waiting) {
+                waiting = true;
+                browser.setTimeout(function () {
+                    waiting = false;
+                    func.call(context, ...args);
+                }, delay);
+            }
+        },
+    }[funcName];
+}
+
 /**
  * Creates and returns a new debounced version of the passed function (func)
  * which will postpone its execution until after 'delay' milliseconds
@@ -81,28 +110,13 @@ export function debounce(func, delay, immediate = false) {
 }
 
 /**
- * Returns a function, that, as long as it continues to be invoked, will be
- * triggered every N milliseconds.
- *
- * @deprecated this function has behaviour that is unexpected considering its
- *      name, prefer _.throttle until this function is rewritten
- * @param {Function} func
- * @param {number} delay
- * @returns {Function}
+ * Hook that returns a debounced version of the given function, and cancels
+ * the potential pending execution on willUnmount.
+ * @see debounce
  */
-export function throttle(func, delay) {
-    let waiting = false;
-    const funcName = func.name ? func.name + " (throttle)" : "throttle";
-    return {
-        [funcName](...args) {
-            const context = this;
-            if (!waiting) {
-                waiting = true;
-                browser.setTimeout(function () {
-                    waiting = false;
-                    func.call(context, ...args);
-                }, delay);
-            }
-        },
-    }[funcName];
+export function useDebounced(callback, delay) {
+    const component = useComponent();
+    const debounced = debounce(callback.bind(component), delay);
+    onWillUnmount(() => debounced.cancel());
+    return debounced;
 }
diff --git a/addons/web/static/tests/core/autocomplete_tests.js b/addons/web/static/tests/core/autocomplete_tests.js
new file mode 100644
index 00000000000..5f1b07d1613
--- /dev/null
+++ b/addons/web/static/tests/core/autocomplete_tests.js
@@ -0,0 +1,204 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
+import { registry } from "@web/core/registry";
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { makeTestEnv } from "../helpers/mock_env";
+import {
+    click,
+    getFixture,
+    mount,
+    patchWithCleanup,
+    triggerEvent,
+    triggerEvents,
+} from "../helpers/utils";
+
+const { Component, useState, xml } = owl;
+
+const serviceRegistry = registry.category("services");
+
+let env;
+let target;
+
+QUnit.module("Components", (hooks) => {
+    hooks.beforeEach(async () => {
+        serviceRegistry.add("hotkey", hotkeyService);
+        env = await makeTestEnv();
+        target = getFixture();
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+    });
+
+    QUnit.module("AutoComplete");
+
+    QUnit.test("can be rendered", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, ".o-autocomplete");
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+
+        await click(target, ".o-autocomplete--input");
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+
+        const options = [...target.querySelectorAll(".o-autocomplete--dropdown-item")];
+        assert.deepEqual(
+            options.map((el) => el.textContent),
+            ["World", "Hello"]
+        );
+    });
+
+    QUnit.test("select option", async (assert) => {
+        class Parent extends Component {
+            setup() {
+                this.state = useState({
+                    value: "Hello",
+                });
+            }
+            get sources() {
+                return [
+                    {
+                        options: [{ label: "World" }, { label: "Hello" }],
+                    },
+                ];
+            }
+            onSelect(option) {
+                this.state.value = option.label;
+                assert.step(option.label);
+            }
+        }
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="state.value"
+                sources="sources"
+                onSelect="(option) => this.onSelect(option)"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "Hello");
+
+        await click(target, ".o-autocomplete--input");
+        await click(target.querySelectorAll(".o-autocomplete--dropdown-item")[0]);
+        assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "World");
+        assert.verifySteps(["World"]);
+
+        await click(target, ".o-autocomplete--input");
+        await click(target.querySelectorAll(".o-autocomplete--dropdown-item")[1]);
+        assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "Hello");
+        assert.verifySteps(["Hello"]);
+    });
+
+    QUnit.test("open dropdown on input", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+        await triggerEvent(target, ".o-autocomplete--input", "input");
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+    });
+
+    QUnit.test("close dropdown on escape keydown", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvents(target, ".o-autocomplete--input", ["focus", "click"]);
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvent(target, ".o-autocomplete--input", "keydown", { key: "Escape" });
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+    });
+
+    QUnit.test("scroll outside should close dropdown", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+
+        await click(target, ".o-autocomplete--input");
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvent(target, null, "scroll");
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+    });
+
+    QUnit.test("scroll inside should keep dropdown open", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+
+        await click(target, ".o-autocomplete--input");
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvent(target, ".o-autocomplete--dropdown-menu", "scroll");
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+    });
+
+    QUnit.test("losing focus should close dropdown", async (assert) => {
+        class Parent extends Component {}
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <AutoComplete
+                value="'Hello'"
+                sources="[{ options: [{ label: 'World' }, { label: 'Hello' }] }]"
+                onSelect="() => {}"
+            />
+        `;
+
+        await mount(Parent, target, { env });
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvents(target, ".o-autocomplete--input", ["focus", "click"]);
+        assert.containsOnce(target, ".o-autocomplete--dropdown-menu");
+
+        await triggerEvent(target, ".o-autocomplete--input", "blur");
+        assert.containsNone(target, ".o-autocomplete--dropdown-menu");
+    });
+});

From 0096f6f32ebad9a7bfe49cd39b0fccfbeebb305a Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Thu, 23 Jun 2022 07:39:41 +0000
Subject: [PATCH 15/50] [IMP] web: add Notebook component

This commit introduces a Notebook component, which displays tabs
and an active page. The component is configurable to display the
notebook vertically (e.g. form views) or horizontally (e.g. kanban
examples dialog).

Part-of: odoo/odoo#92475
---
 .../web/static/src/core/notebook/notebook.js  | 160 ++++++++++
 .../static/src/core/notebook/notebook.scss    |  18 ++
 .../web/static/src/core/notebook/notebook.xml |  22 ++
 .../web/static/tests/core/notebook_tests.js   | 296 ++++++++++++++++++
 4 files changed, 496 insertions(+)
 create mode 100644 addons/web/static/src/core/notebook/notebook.js
 create mode 100644 addons/web/static/src/core/notebook/notebook.scss
 create mode 100644 addons/web/static/src/core/notebook/notebook.xml
 create mode 100644 addons/web/static/tests/core/notebook_tests.js

diff --git a/addons/web/static/src/core/notebook/notebook.js b/addons/web/static/src/core/notebook/notebook.js
new file mode 100644
index 00000000000..e6f6bc59942
--- /dev/null
+++ b/addons/web/static/src/core/notebook/notebook.js
@@ -0,0 +1,160 @@
+/** @odoo-module **/
+
+import { scrollTo } from "@web/core/utils/scrolling";
+
+const { Component, onWillDestroy, onWillUpdateProps, useEffect, useRef, useState } = owl;
+
+/**
+ * A notebook component that will render only the current page and allow
+ * switching between its pages.
+ *
+ * You can also set pages using a template component. Use an array with
+ * the `pages` props to do such rendering.
+ *
+ * Pages can also specify their index in the notebook.
+ *
+ *      e.g.:
+ *          PageTemplate.template = xml`
+                    <h1 t-esc="props.title" />
+                    <p t-esc="props.text" />`;
+
+ *      `pages` could be:
+ *      [
+ *          {
+ *              Component: PageTemplate,
+ *              props: {
+ *                  title: "Some Title 1",
+ *                  isVisible: bool,
+ *                  text: "Text Content 1",
+ *              },
+ *              name: 'some_name' // optional
+ *          },
+ *          {
+ *              Component: PageTemplate,
+ *              props: {
+ *                  title: "Some Title 2",
+ *                  isVisible: bool,
+ *                  text: "Text Content 2",
+ *              },
+ *          },
+ *      ]
+ *
+ * <Notebook pages="pages">
+ *    <t t-set-slot="Page Name 1" title="Some Title" isVisible="bool">
+ *      <div>Page Content 1</div>
+ *    </t>
+ *    <t t-set-slot="Page Name 2" title="Some Title" isVisible="bool">
+ *      <div>Page Content 2</div>
+ *    </t>
+ * </Notebook>
+ *
+ * @extends Component
+ */
+
+export class Notebook extends Component {
+    setup() {
+        this.activePane = useRef("activePane");
+        this.anchorTarget = null;
+        this.pages = this.computePages(this.props);
+        this.state = useState({ currentPage: null });
+        this.state.currentPage = this.props.defaultPage || this.computeActivePage();
+        const onAnchorClicked = this.onAnchorClicked.bind(this);
+        this.env.bus.addEventListener("SCROLLER:ANCHOR_LINK_CLICKED", onAnchorClicked);
+        useEffect(
+            () => {
+                this.props.onPageUpdate(this.state.currentPage);
+                if (this.anchorTarget) {
+                    const matchingEl = this.activePane.el.querySelector(`#${this.anchorTarget}`);
+                    scrollTo(matchingEl, { isAnchor: true });
+                    this.anchorTarget = null;
+                }
+            },
+            () => [this.state.currentPage]
+        );
+        onWillUpdateProps((nextProps) => {
+            this.pages = this.computePages(nextProps);
+            this.state.currentPage = this.computeActivePage();
+        });
+        onWillDestroy(() => {
+            this.env.bus.removeEventListener("SCROLLER:ANCHOR_LINK_CLICKED", onAnchorClicked);
+        });
+    }
+
+    get navItems() {
+        return this.pages.filter((e) => e[1].isVisible);
+    }
+
+    get page() {
+        const page = this.pages.find((e) => e[0] === this.state.currentPage)[1];
+        return page.Component && page;
+    }
+
+    onAnchorClicked(ev) {
+        if (!this.props.anchors) {
+            return;
+        }
+        const id = ev.detail.detail.id.substring(1);
+        if (this.props.anchors[id]) {
+            if (this.state.currentPage !== this.props.anchors[id].target) {
+                ev.preventDefault();
+                ev.detail.detail.originalEv.preventDefault();
+                this.anchorTarget = id;
+                this.state.currentPage = this.props.anchors[id].target;
+            }
+        }
+    }
+
+    computePages(props) {
+        if (!props.slots && !props.pages) {
+            return [];
+        }
+        const pages = [];
+        const pagesWithIndex = [];
+        for (const [k, v] of Object.entries({ ...props.slots, ...props.pages })) {
+            if (v.props) {
+                v.isVisible = v.props.isVisible;
+                v.title = v.props.title;
+                v.index = v.props.index;
+            }
+            const id = v.id || k;
+            if (v.index) {
+                pagesWithIndex.push([id, v]);
+            } else {
+                pages.push([id, v]);
+            }
+        }
+        for (const page of pagesWithIndex) {
+            pages.splice(page[1].index, 0, page);
+        }
+        return pages;
+    }
+
+    computeActivePage() {
+        if (!this.pages.length) {
+            return null;
+        }
+        const current = this.state.currentPage;
+        if (!current || (current && !this.pages.find((e) => e[0] === current)[1].isVisible)) {
+            const candidate = this.pages.find((v) => v[1].isVisible);
+            return candidate ? candidate[0] : null;
+        }
+        return current;
+    }
+}
+
+Notebook.template = "web.Notebook";
+Notebook.defaultProps = {
+    className: "",
+    orientation: "horizontal",
+    onPageUpdate: () => {},
+};
+Notebook.props = {
+    slots: { type: Object, optional: true },
+    pages: { type: Object, optional: true },
+    class: { optional: true },
+    className: { type: String, optional: true },
+    anchors: { type: Object, optional: true },
+    defaultPage: { type: String, optional: true },
+    orientation: { type: String, optional: true },
+    onPageUpdate: { type: Function, optional: true },
+};
diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss
new file mode 100644
index 00000000000..77553ab1d36
--- /dev/null
+++ b/addons/web/static/src/core/notebook/notebook.scss
@@ -0,0 +1,18 @@
+.o_notebook {
+    &.horizontal {
+        flex-direction: column;
+
+        .nav.nav-tabs {
+            flex-flow: row nowrap;
+        }
+        
+    }
+
+    &.vertical {
+        flex-direction: row;
+
+        .nav.nav-pills {
+            width: max-content;
+        }
+    }
+}
diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml
new file mode 100644
index 00000000000..2604f6a501a
--- /dev/null
+++ b/addons/web/static/src/core/notebook/notebook.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Notebook" owl="1">
+        <div t-attf-class="o_notebook d-flex w-100 {{ props.orientation }} {{ props.className }}" t-if="state.currentPage">
+            <div class="o_notebook_headers">
+                <ul t-attf-class="nav {{ props.orientation === 'horizontal' ? 'nav-tabs' : 'nav-pills flex-column' }}">
+                    <li t-foreach="navItems" t-as="navItem" t-key="navItem[0]" class="nav-item" t-if="navItem[1].isVisible">
+                        <a class="nav-link" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-att-class="{ active: navItem[0] === state.currentPage}" t-esc="navItem[1].title"/>
+                    </li>
+                </ul>
+            </div>
+            <div class="o_notebook_content tab-content">
+                <div class="tab-pane active" t-ref="activePane">
+                    <t t-if="page" t-component="page.Component" t-key="state.currentPage" t-props="page.props" />
+                    <t t-else="" t-slot="{{ state.currentPage }}" />
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/core/notebook_tests.js b/addons/web/static/tests/core/notebook_tests.js
new file mode 100644
index 00000000000..53be41c4b4f
--- /dev/null
+++ b/addons/web/static/tests/core/notebook_tests.js
@@ -0,0 +1,296 @@
+/** @odoo-module **/
+
+import { Notebook } from "@web/core/notebook/notebook";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { click, getFixture, mount } from "@web/../tests/helpers/utils";
+
+const { Component, xml } = owl;
+let target;
+
+QUnit.module("Components", (hooks) => {
+    hooks.beforeEach(async () => {
+        target = getFixture();
+    });
+
+    QUnit.module("Notebook");
+
+    QUnit.test("not rendered if empty slots", async (assert) => {
+        const env = await makeTestEnv();
+        await mount(Notebook, target, { env, props: {} });
+        assert.containsNone(target, "div.o_notebook");
+    });
+
+    QUnit.test("notebook with multiple pages given as slots", async (assert) => {
+        const env = await makeTestEnv();
+
+        class Parent extends Component {}
+        Parent.template = xml`<Notebook>
+                <t t-set-slot="page_about" title="'About'" isVisible="true">
+                    <h3>About the bird</h3>
+                    <p>Owls are birds from the order Strigiformes which includes over
+                    200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, ...</p>
+                </t>
+                <t t-set-slot="page_hunting" title="'Owl Activities'" isVisible="true">
+                    <h3>Their favorite activity: hunting</h3>
+                    <p>Owls are called raptors, or birds of prey, which means they use sharp talons and curved bills to hunt, kill, and eat other animals.</p>
+                </t>
+                <t t-set-slot="page_secret" title="'Secret about OWLs'" isVisible="false">
+                    <p>TODO find a great secret about OWLs.</p>
+                </t>
+            </Notebook>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.o_notebook");
+        assert.hasClass(
+            target.querySelector(".o_notebook"),
+            "horizontal",
+            "default orientation is set as horizontal"
+        );
+        assert.hasClass(
+            target.querySelector(".nav"),
+            "nav-tabs",
+            "navigation container uses the right class to display as horizontal tabs"
+        );
+        assert.containsN(
+            target,
+            ".o_notebook_headers a.nav-link",
+            2,
+            "navigation link is present for each visible page"
+        );
+        assert.hasClass(
+            target.querySelector(".o_notebook_headers .nav-item:first-child a"),
+            "active",
+            "first page is selected by default"
+        );
+        assert.strictEqual(
+            target.querySelector(".tab-pane.active").firstElementChild.textContent,
+            "About the bird",
+            "first page content is displayed by the notebook"
+        );
+
+        await click(target, ".o_notebook_headers .nav-item:nth-child(2) a");
+        assert.hasClass(
+            target.querySelector(".o_notebook_headers .nav-item:nth-child(2) a"),
+            "active",
+            "second page is now selected"
+        );
+        assert.strictEqual(
+            target.querySelector(".tab-pane.active").firstElementChild.textContent,
+            "Their favorite activity: hunting",
+            "second page content is displayed by the notebook"
+        );
+    });
+
+    QUnit.test("notebook with defaultPage props", async (assert) => {
+        const env = await makeTestEnv();
+
+        class Parent extends Component {}
+        Parent.template = xml`<Notebook defaultPage="'page_hunting'">
+                <t t-set-slot="page_about" title="'About'" isVisible="true">
+                    <h3>About the bird</h3>
+                    <p>Owls are birds from the order Strigiformes which includes over
+                    200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, ...</p>
+                </t>
+                <t t-set-slot="page_hunting" title="'Owl Activities'" isVisible="true">
+                    <h3>Their favorite activity: hunting</h3>
+                    <p>Owls are called raptors, or birds of prey, which means they use sharp talons and curved bills to hunt, kill, and eat other animals.</p>
+                </t>
+                <t t-set-slot="page_secret" title="'Secret about OWLs'" isVisible="false">
+                    <p>TODO find a great secret about OWLs.</p>
+                </t>
+            </Notebook>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.o_notebook");
+        assert.hasClass(
+            target.querySelector(".o_notebook_headers .nav-item:nth-child(2) a"),
+            "active",
+            "second page is selected by default"
+        );
+        assert.strictEqual(
+            target.querySelector(".tab-pane.active").firstElementChild.textContent,
+            "Their favorite activity: hunting",
+            "second page content is displayed by the notebook"
+        );
+    });
+
+    QUnit.test("notebook with defaultPage set on invisible page", async (assert) => {
+        const env = await makeTestEnv();
+
+        class Parent extends Component {}
+        Parent.template = xml`<Notebook defaultPage="'page_secret'">
+                <t t-set-slot="page_about" title="'About'" isVisible="true">
+                    <h3>About the bird</h3>
+                    <p>Owls are birds from the order Strigiformes which includes over
+                    200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, ...</p>
+                </t>
+                <t t-set-slot="page_hunting" title="'Owl Activities'" isVisible="true">
+                    <h3>Their favorite activity: hunting</h3>
+                    <p>Owls are called raptors, or birds of prey, which means they use sharp talons and curved bills to hunt, kill, and eat other animals.</p>
+                </t>
+                <t t-set-slot="page_secret" title="'Secret about OWLs'" isVisible="false">
+                    <h3>Oooops</h3>
+                    <p>TODO find a great secret to reveal about OWLs.</p>
+                </t>
+            </Notebook>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.o_notebook");
+        assert.containsNone(
+            target,
+            ".o_notebook_headers .nav-item a.active",
+            "no tab is selected as the default page is not visible"
+        );
+        assert.containsN(
+            target,
+            ".o_notebook_headers a.nav-link",
+            2,
+            "navigation link is only present for visible pages"
+        );
+        assert.strictEqual(
+            target.querySelector(".tab-pane.active").firstElementChild.textContent,
+            "Oooops",
+            "third page content is displayed by the notebook"
+        );
+    });
+
+    QUnit.test("notebook set vertically", async (assert) => {
+        const env = await makeTestEnv();
+
+        class Parent extends Component {}
+        Parent.template = xml`<Notebook orientation="'vertical'">
+                <t t-set-slot="page_about" title="'About'" isVisible="true">
+                    <h3>About the bird</h3>
+                    <p>Owls are birds from the order Strigiformes which includes over
+                    200 species of mostly solitary and nocturnal birds of prey typified by an upright stance, ...</p>
+                </t>
+                <t t-set-slot="page_hunting" title="'Owl Activities'" isVisible="true">
+                    <h3>Their favorite activity: hunting</h3>
+                    <p>Owls are called raptors, or birds of prey, which means they use sharp talons and curved bills to hunt, kill, and eat other animals.</p>
+                </t>
+            </Notebook>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.o_notebook");
+        assert.hasClass(
+            target.querySelector(".o_notebook"),
+            "vertical",
+            "orientation is set as vertical"
+        );
+        assert.hasClass(
+            target.querySelector(".nav"),
+            "nav-pills",
+            "navigation container uses the right class to display as vertical buttons"
+        );
+    });
+
+    QUnit.test("notebook pages rendered by a template component", async (assert) => {
+        const env = await makeTestEnv();
+
+        class NotebookPageRenderer extends Component {}
+        NotebookPageRenderer.template = xml`
+                <h3 t-esc="props.title"></h3>
+                <p t-esc="props.text" />
+            `;
+
+        class Parent extends Component {
+            setup() {
+                this.pages = [
+                    {
+                        Component: NotebookPageRenderer,
+                        props: {
+                            index: 1,
+                            isVisible: true,
+                            title: "Page 2",
+                            text: "Second page rendered by a template component",
+                        },
+                    },
+                    {
+                        Component: NotebookPageRenderer,
+                        props: {
+                            index: 2,
+                            isVisible: true,
+                            title: "Page 3",
+                            text: "Third page rendered by a template component",
+                        },
+                        id: "page_three", // required to be set as default page
+                    },
+                ];
+            }
+        }
+        Parent.template = xml`<Notebook defaultPage="'page_three'" pages="pages">
+                <t t-set-slot="page_one" title="'Page 1'" isVisible="true">
+                    <h3>Page 1</h3>
+                    <p>First page set directly as a slot</p>
+                </t>
+                <t t-set-slot="page_four" title="'Page 4'" isVisible="true">
+                    <h3>Page 4</h3>
+                </t>
+            </Notebook>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+
+        assert.containsOnce(target, "div.o_notebook");
+        assert.hasClass(
+            target.querySelector(".o_notebook_headers .nav-item:nth-child(3) a"),
+            "active",
+            "third page is selected by default"
+        );
+
+        await click(target.querySelector(".o_notebook_headers .nav-item:nth-child(2) a"));
+        assert.strictEqual(
+            target.querySelector(".o_notebook_content p").textContent,
+            "Second page rendered by a template component",
+            "displayed content corresponds to the current page"
+        );
+    });
+
+    QUnit.test("each page is different", async (assert) => {
+        const env = await makeTestEnv();
+
+        class Page extends Component {}
+        Page.template = xml`<h3>Coucou</h3>`;
+
+        class Parent extends Component {
+            setup() {
+                this.pages = [
+                    {
+                        Component: Page,
+                        props: {
+                            index: 1,
+                            isVisible: true,
+                            title: "Page 1",
+                        },
+                    },
+                    {
+                        Component: Page,
+                        props: {
+                            index: 2,
+                            isVisible: true,
+                            title: "Page 2",
+                        },
+                    },
+                ];
+            }
+        }
+        Parent.template = xml`<Notebook pages="pages"/>`;
+        Parent.components = { Notebook };
+
+        await mount(Parent, target, { env });
+
+        const firstPage = target.querySelector("h3");
+        assert.ok(firstPage instanceof HTMLElement);
+
+        await click(target.querySelector(".o_notebook_headers .nav-item:nth-child(2) a"));
+
+        const secondPage = target.querySelector("h3");
+        assert.ok(firstPage instanceof HTMLElement);
+
+        assert.notEqual(firstPage, secondPage);
+    });
+});

From ec8ed943fc25d256764fcbba6f8b92216665b251 Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Thu, 23 Jun 2022 07:40:39 +0000
Subject: [PATCH 16/50] [IMP] web: new DomainSelector in owl

This commit introduces the DomainSelector and ModelFieldSelector
components. They will especially be used by the owl DomainField.

Part-of: odoo/odoo#92475
---
 .../core/domain_selector/domain_selector.js   | 207 +++++++++
 .../core/domain_selector/domain_selector.xml  |  21 +
 .../domain_selector_branch_node.js            |  30 ++
 .../domain_selector_branch_node.xml           |  31 ++
 .../domain_selector_branch_operator.js        |  20 +
 .../domain_selector_branch_operator.xml       |  27 ++
 .../domain_selector_control_panel.js          |  39 ++
 .../domain_selector_control_panel.xml         |  40 ++
 .../domain_selector_leaf_node.js              | 101 +++++
 .../domain_selector_leaf_node.xml             |  71 ++++
 .../domain_selector_operators.js              | 166 ++++++++
 .../domain_selector_root_node.js              |  33 ++
 .../domain_selector_root_node.xml             |  53 +++
 .../fields/domain_selector_boolean_field.js   |  47 +++
 .../fields/domain_selector_boolean_field.xml  |  13 +
 .../fields/domain_selector_datetime_field.js  |  47 +++
 .../fields/domain_selector_datetime_field.xml |  10 +
 .../fields/domain_selector_field_input.js     |  18 +
 .../fields/domain_selector_field_input.xml    |   8 +
 .../domain_selector_field_input_with_tags.js  |  25 ++
 .../domain_selector_field_input_with_tags.xml |  31 ++
 .../fields/domain_selector_number_field.js    |  39 ++
 .../fields/domain_selector_number_field.xml   |  10 +
 .../fields/domain_selector_relation_field.js  |  29 ++
 .../fields/domain_selector_relation_field.xml |  10 +
 .../fields/domain_selector_selection_field.js |  26 ++
 .../domain_selector_selection_field.xml       |  18 +
 .../fields/domain_selector_text_field.js      |  32 ++
 .../fields/domain_selector_text_field.xml     |  15 +
 .../model_field_selector/model_field_hook.js  |  43 ++
 .../model_field_selector.js                   | 120 ++++++
 .../model_field_selector.xml                  |  31 ++
 .../model_field_selector_popover.js           | 107 +++++
 .../model_field_selector_popover.scss         |  83 ++++
 .../model_field_selector_popover.xml          |  59 +++
 .../tests/core/domain_selector_tests.js       | 342 +++++++++++++++
 .../tests/core/model_field_selector_tests.js  | 392 ++++++++++++++++++
 37 files changed, 2394 insertions(+)
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector.xml
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_branch_node.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_branch_node.xml
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_branch_operator.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_branch_operator.xml
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_control_panel.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_control_panel.xml
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_leaf_node.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_leaf_node.xml
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_operators.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_root_node.js
 create mode 100644 addons/web/static/src/core/domain_selector/domain_selector_root_node.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.xml
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.js
 create mode 100644 addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.xml
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_hook.js
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector.js
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector.xml
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector_popover.js
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
 create mode 100644 addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
 create mode 100644 addons/web/static/tests/core/domain_selector_tests.js
 create mode 100644 addons/web/static/tests/core/model_field_selector_tests.js

diff --git a/addons/web/static/src/core/domain_selector/domain_selector.js b/addons/web/static/src/core/domain_selector/domain_selector.js
new file mode 100644
index 00000000000..15557df18b0
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector.js
@@ -0,0 +1,207 @@
+/** @odoo-module **/
+
+import { Domain } from "@web/core/domain";
+import { DomainSelectorRootNode } from "./domain_selector_root_node";
+
+const { Component } = owl;
+
+export class DomainSelector extends Component {
+    setup() {
+        this.nextNodeId = 0;
+    }
+
+    buildTree() {
+        try {
+            const domain = new Domain(this.props.value);
+            const ctx = {
+                parent: null,
+                index: 0,
+                domain: domain.toList(),
+                get currentElement() {
+                    return ctx.domain[ctx.index];
+                },
+                next() {
+                    ctx.index++;
+                },
+                getFullDomain() {
+                    return rootNode.computeDomain().toString();
+                },
+            };
+
+            const rootNode = this.makeRootNode(ctx);
+            ctx.parent = rootNode;
+            this.traverseNode(ctx);
+
+            return ctx.parent;
+        } catch (_e) {
+            // WOWL TODO: rethrow error when not the expected type
+            return false;
+        }
+    }
+
+    traverseNode(ctx) {
+        if (ctx.index < ctx.domain.length) {
+            if (typeof ctx.currentElement === "string" && ["&", "|"].includes(ctx.currentElement)) {
+                this.traverseBranchNode(ctx);
+            } else {
+                this.traverseLeafNode(ctx);
+            }
+        }
+    }
+    traverseBranchNode(ctx) {
+        if (ctx.parent.type !== "branch" || ctx.parent.operator !== ctx.currentElement) {
+            const node = this.makeBranchNode(ctx, ctx.currentElement, []);
+            ctx.parent.operands.push(node);
+            ctx = Object.assign(Object.create(ctx), { parent: node });
+        }
+        ctx.next();
+        this.traverseNode(ctx);
+        ctx.next();
+        this.traverseNode(ctx);
+    }
+    traverseLeafNode(ctx) {
+        const condition = ctx.currentElement;
+        const [leftOperand, operator, rightOperand] = condition;
+        const node = this.makeLeafNode(ctx, operator, [leftOperand, rightOperand]);
+        ctx.parent.operands.push(node);
+    }
+
+    makeBranchNode(ctx, operator, operands) {
+        const updateDomain = () => this.props.update(ctx.getFullDomain());
+        const makeFakeNode = this.makeFakeNode.bind(this);
+
+        return {
+            type: "branch",
+            id: this.nextNodeId++,
+            operator,
+            operands,
+            computeDomain() {
+                return Domain.combine(
+                    this.operands.map((operand) => operand.computeDomain()),
+                    this.operator === "&" ? "AND" : "OR"
+                );
+            },
+            update(operator) {
+                this.operator = operator;
+                updateDomain();
+            },
+            insert(newNodeType) {
+                const newNode = makeFakeNode(ctx, newNodeType);
+                const operands = ctx.parent.operands;
+                operands.splice(operands.indexOf(this) + 1, 0, newNode);
+                updateDomain();
+            },
+            delete() {
+                const operands = ctx.parent.operands;
+                operands.splice(operands.indexOf(this), 1);
+                updateDomain();
+            },
+        };
+    }
+    makeLeafNode(ctx, operator, operands) {
+        const updateDomain = () => this.props.update(ctx.getFullDomain());
+        const makeFakeNode = this.makeFakeNode.bind(this);
+
+        return {
+            type: "leaf",
+            id: this.nextNodeId++,
+            operator,
+            operands,
+            computeDomain() {
+                return new Domain([[this.operands[0], this.operator, this.operands[1]]]);
+            },
+            update(changes) {
+                if ("fieldName" in changes) {
+                    this.operands[0] = changes.fieldName;
+                }
+                if ("operator" in changes) {
+                    this.operator = changes.operator;
+                }
+                if ("value" in changes) {
+                    this.operands[1] = changes.value;
+                }
+                updateDomain();
+            },
+            insert(newNodeType) {
+                const newNode = makeFakeNode(ctx, newNodeType);
+                const operands = ctx.parent.operands;
+                operands.splice(operands.indexOf(this) + 1, 0, newNode);
+                updateDomain();
+            },
+            delete() {
+                const operands = ctx.parent.operands;
+                operands.splice(operands.indexOf(this), 1);
+                updateDomain();
+            },
+        };
+    }
+    makeRootNode(ctx) {
+        const updateDomain = (...args) => this.props.update(...args);
+        const makeFakeNode = this.makeFakeNode.bind(this);
+
+        return {
+            type: "root",
+            id: this.nextNodeId++,
+            operator: "&",
+            operands: [],
+            computeDomain() {
+                return Domain.combine(
+                    this.operands.map((operand) => operand.computeDomain()),
+                    "AND"
+                );
+            },
+            update(newValue, fromDebug) {
+                if (typeof newValue === "string") {
+                    updateDomain(newValue, fromDebug);
+                } else if (this.operands.length) {
+                    this.operands[0].update(newValue);
+                }
+            },
+            insert(newNodeType) {
+                const newNode = makeFakeNode(ctx, newNodeType);
+                if (ctx.parent) {
+                    const operands = ctx.parent.operands;
+                    operands.splice(operands.indexOf(this) + 1, 0, newNode);
+                } else {
+                    this.operands.push(newNode);
+                }
+                updateDomain(ctx.getFullDomain());
+            },
+            delete() {},
+        };
+    }
+
+    makeFakeNode(ctx, type) {
+        const [field, op, value] = this.props.defaultLeafValue;
+        if (type === "branch") {
+            return this.makeBranchNode(ctx, ctx.parent.operator === "&" ? "|" : "&", [
+                this.makeLeafNode(ctx, op, [field, value]),
+                this.makeLeafNode(ctx, op, [field, value]),
+            ]);
+        } else {
+            return this.makeLeafNode(ctx, op, [field, value]);
+        }
+    }
+}
+
+Object.assign(DomainSelector, {
+    template: "web._DomainSelector",
+    components: {
+        DomainSelectorRootNode,
+    },
+    props: {
+        className: { type: String, optional: true },
+        resModel: String,
+        value: String,
+        readonly: { type: Boolean, optional: true },
+        update: { type: Function, optional: true },
+        isDebugMode: { type: Boolean, optional: true },
+        defaultLeafValue: { type: Array, optional: true },
+    },
+    defaultProps: {
+        readonly: true,
+        update: () => {},
+        isDebugMode: false,
+        defaultLeafValue: ["id", "=", 1],
+    },
+});
diff --git a/addons/web/static/src/core/domain_selector/domain_selector.xml b/addons/web/static/src/core/domain_selector/domain_selector.xml
new file mode 100644
index 00000000000..4b0fe8f42a6
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web._DomainSelector" owl="1">
+        <t t-set="tree" t-value="buildTree()"/>
+        <t t-if="tree">
+            <DomainSelectorRootNode
+                value="props.value"
+                node="tree"
+                readonly="props.readonly"
+                resModel="props.resModel"
+                isDebugMode="props.isDebugMode"
+                className="props.className"
+            />
+        </t>
+        <t t-else="">
+            <div t-att-class="props.className">This domain is not supported.</div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_branch_node.js b/addons/web/static/src/core/domain_selector/domain_selector_branch_node.js
new file mode 100644
index 00000000000..3ec2351b66c
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_branch_node.js
@@ -0,0 +1,30 @@
+/** @odoo-module **/
+
+import { DomainSelectorBranchOperator } from "./domain_selector_branch_operator";
+import { DomainSelectorControlPanel } from "./domain_selector_control_panel";
+import { DomainSelectorLeafNode } from "./domain_selector_leaf_node";
+
+const { Component, useRef } = owl;
+
+export class DomainSelectorBranchNode extends Component {
+    setup() {
+        this.root = useRef("root");
+    }
+    onHoverDeleteNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_btns", hovering);
+    }
+    onHoverInsertLeafNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_add_node", hovering);
+    }
+    onHoverInsertBranchNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_add_node", hovering);
+        this.root.el.classList.toggle("o_hover_add_inset_node", hovering);
+    }
+}
+DomainSelectorBranchNode.template = "web.DomainSelectorBranchNode";
+DomainSelectorBranchNode.components = {
+    DomainSelectorBranchNode,
+    DomainSelectorBranchOperator,
+    DomainSelectorControlPanel,
+    DomainSelectorLeafNode,
+};
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_branch_node.xml b/addons/web/static/src/core/domain_selector/domain_selector_branch_node.xml
new file mode 100644
index 00000000000..359ccb224c7
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_branch_node.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorBranchNode" owl="1">
+        <div class="o_domain_node o_domain_tree" t-ref="root">
+            <div class="o_domain_tree_header o_domain_selector_row">
+                <t t-if="!props.readonly">
+                    <DomainSelectorControlPanel
+                        node="props.node"
+                        onHoverDeleteNodeBtn.bind="onHoverDeleteNodeBtn"
+                        onHoverInsertLeafNodeBtn.bind="onHoverInsertLeafNodeBtn"
+                        onHoverInsertBranchNodeBtn.bind="onHoverInsertBranchNodeBtn"
+                    />
+                </t>
+                <DomainSelectorBranchOperator node="props.node" readonly="props.readonly" />
+                <span class="ml4">of:</span>
+            </div>
+            <div class="o_domain_node_children_container">
+                <t t-foreach="props.node.operands" t-as="subNode" t-key="subNode.id">
+                    <t t-if="subNode.type === 'branch'">
+                        <DomainSelectorBranchNode t-props="{ ...props, node: subNode }" />
+                    </t>
+                    <t t-elif="subNode.type === 'leaf'">
+                        <DomainSelectorLeafNode t-props="{ ...props, node: subNode }" />
+                    </t>
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.js b/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.js
new file mode 100644
index 00000000000..539ed130048
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.js
@@ -0,0 +1,20 @@
+/** @odoo-module **/
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+const { Component } = owl;
+
+export class DomainSelectorBranchOperator extends Component {
+    onOperatorSelected(operator) {
+        this.props.node.update(operator);
+    }
+}
+DomainSelectorBranchOperator.components = {
+    Dropdown,
+    DropdownItem,
+};
+DomainSelectorBranchOperator.template = "web.DomainSelectorBranchOperator";
+DomainSelectorBranchOperator.props = {
+    node: Object,
+    readonly: Boolean,
+};
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.xml b/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.xml
new file mode 100644
index 00000000000..2d2a31ab6e6
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_branch_operator.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorBranchOperator" owl="1">
+        <t t-if="!props.readonly">
+            <div class="btn-group o_domain_tree_operator_selector" aria-atomic="true">
+                <Dropdown togglerClass="'btn btn-sm btn-primary o_domain_tree_operator_caret'">
+                    <t t-set-slot="toggler">
+                            <t t-if="props.node.operator === '&amp;'">All</t>
+                            <t t-elif="props.node.operator === '|'">Any</t>
+                            <t t-elif="props.node.operator === '!'">None</t>
+                    </t>
+                    <DropdownItem onSelected="() => this.onOperatorSelected('&amp;')">All</DropdownItem>
+                    <DropdownItem onSelected="() => this.onOperatorSelected('|')">Any</DropdownItem>
+                </Dropdown>
+            </div>
+        </t>
+        <t t-else="">
+            <strong>
+                <t t-if="props.node.operator === '&amp;'">ALL</t>
+                <t t-elif="props.node.operator === '|'">ANY</t>
+                <t t-elif="props.node.operator === '!'">NONE</t>
+            </strong>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_control_panel.js b/addons/web/static/src/core/domain_selector/domain_selector_control_panel.js
new file mode 100644
index 00000000000..501d08abc79
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_control_panel.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+const { Component, toRaw } = owl;
+
+export class DomainSelectorControlPanel extends Component {
+    deleteNode() {
+        this.props.node.delete();
+    }
+
+    insertNode(newNodeType) {
+        toRaw(this.props.node).insert(newNodeType); // FIXME WOWL reactivity
+    }
+
+    onEnterDeleteNodeBtn() {
+        this.props.onHoverDeleteNodeBtn(true);
+    }
+    onLeaveDeleteNodeBtn() {
+        this.props.onHoverDeleteNodeBtn(false);
+    }
+    onEnterInsertLeafNodeBtn() {
+        this.props.onHoverInsertLeafNodeBtn(true);
+    }
+    onLeaveInsertLeafNodeBtn() {
+        this.props.onHoverInsertLeafNodeBtn(false);
+    }
+    onEnterInsertBranchNodeBtn() {
+        this.props.onHoverInsertBranchNodeBtn(true);
+    }
+    onLeaveInsertBranchNodeBtn() {
+        this.props.onHoverInsertBranchNodeBtn(false);
+    }
+}
+DomainSelectorControlPanel.template = "web.DomainSelectorControlPanel";
+DomainSelectorControlPanel.props = {
+    node: Object,
+    onHoverDeleteNodeBtn: Function,
+    onHoverInsertLeafNodeBtn: Function,
+    onHoverInsertBranchNodeBtn: Function,
+};
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_control_panel.xml b/addons/web/static/src/core/domain_selector/domain_selector_control_panel.xml
new file mode 100644
index 00000000000..c60a708ce69
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_control_panel.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorControlPanel" owl="1">
+        <div class="o_domain_node_control_panel" role="toolbar" aria-label="Domain node">
+            <button
+                class="btn btn-link text-danger o_domain_delete_node_button"
+                title="Delete node"
+                aria-label="Delete node"
+                t-on-click="deleteNode"
+                t-on-mouseenter="onEnterDeleteNodeBtn"
+                t-on-mouseleave="onLeaveDeleteNodeBtn"
+            >
+                <i class="fa fa-times"/>
+            </button>
+            <button
+                class="btn o_domain_add_node_button"
+                title="Add node"
+                aria-label="Add node"
+                t-on-click="() => this.insertNode('leaf')"
+                t-on-mouseenter="onEnterInsertLeafNodeBtn"
+                t-on-mouseleave="onLeaveInsertLeafNodeBtn"
+            >
+                <i class="fa fa-plus-circle"/>
+            </button>
+            <button
+                class="btn o_domain_add_node_button"
+                title="Add branch"
+                aria-label="Add branch"
+                data-branch="1"
+                t-on-click="() => this.insertNode('branch')"
+                t-on-mouseenter="onEnterInsertBranchNodeBtn"
+                t-on-mouseleave="onLeaveInsertBranchNodeBtn"
+            >
+                <i class="fa fa-ellipsis-h"/>
+            </button>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.js b/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.js
new file mode 100644
index 00000000000..2a1a9d3bf9b
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.js
@@ -0,0 +1,101 @@
+/** @odoo-module **/
+
+import { useModelField } from "@web/core/model_field_selector/model_field_hook";
+import { ModelFieldSelector } from "@web/core/model_field_selector/model_field_selector";
+import { registry } from "@web/core/registry";
+import { DomainSelectorControlPanel } from "./domain_selector_control_panel";
+
+const { Component, onWillStart, onWillUpdateProps, useRef } = owl;
+
+export class DomainSelectorLeafNode extends Component {
+    setup() {
+        this.root = useRef("root");
+        this.modelField = useModelField();
+        this.fieldInfo = {
+            type: "integer",
+            string: "ID",
+        };
+        onWillStart(async () => {
+            this.fieldInfo = await this.loadField(this.props.resModel, this.props.node.operands[0]);
+        });
+        onWillUpdateProps(async (nextProps) => {
+            this.fieldInfo = await this.loadField(nextProps.resModel, nextProps.node.operands[0]);
+        });
+    }
+
+    get displayedOperator() {
+        const op = this.getOperatorInfo(this.props.node.operator);
+        return op ? op.label : "?";
+    }
+    get isValueHidden() {
+        return this.getOperatorInfo(this.props.node.operator).hideValue;
+    }
+
+    async loadField(resModel, fieldName) {
+        const chain = await this.modelField.loadChain(resModel, fieldName);
+        if (!chain[chain.length - 1].field && chain.length > 1) {
+            return chain[chain.length - 2].field;
+        }
+        return (
+            chain[chain.length - 1].field || {
+                type: "integer",
+                string: "ID",
+            }
+        );
+    }
+
+    getFieldComponent(type) {
+        return registry.category("domain_selector/fields").get(type, null);
+    }
+    getOperatorInfo(operator) {
+        return this.getFieldComponent(this.fieldInfo.type)
+            .getOperators()
+            .find((op) =>
+                op.matches({
+                    field: this.fieldInfo,
+                    operator,
+                    value: this.props.node.operands[1],
+                })
+            );
+    }
+
+    async onFieldChange(fieldName) {
+        const changes = { fieldName };
+        const fieldInfo = await this.loadField(this.props.resModel, fieldName);
+        const component = this.getFieldComponent(fieldInfo.type);
+        Object.assign(changes, component.onDidTypeChange(fieldInfo));
+        this.props.node.update(changes);
+    }
+    onOperatorChange(ev) {
+        const component = this.getFieldComponent(this.fieldInfo.type);
+        const operatorInfo = component.getOperators()[parseInt(ev.target.value, 10)];
+        const changes = { operator: operatorInfo.value };
+        Object.assign(
+            changes,
+            operatorInfo.onDidChange(
+                this.getOperatorInfo(this.props.node.operator),
+                component.onDidTypeChange
+            )
+        );
+        this.props.node.update(changes);
+    }
+
+    onHoverDeleteNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_btns", hovering);
+    }
+    onHoverInsertLeafNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_add_node", hovering);
+    }
+    onHoverInsertBranchNodeBtn(hovering) {
+        this.root.el.classList.toggle("o_hover_add_node", hovering);
+        this.root.el.classList.toggle("o_hover_add_inset_node", hovering);
+    }
+}
+
+Object.assign(DomainSelectorLeafNode, {
+    template: "web.DomainSelectorLeafNode",
+    components: {
+        DomainSelectorControlPanel,
+        ModelFieldSelector,
+    },
+});
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.xml b/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.xml
new file mode 100644
index 00000000000..19bd49e603a
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_leaf_node.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorLeafNode" owl="1">
+        <div class="o_domain_node o_domain_leaf o_domain_selector_row" t-ref="root">
+            <t t-if="props.readonly">
+                <div class="o_domain_leaf_info">
+                    <ModelFieldSelector fieldName="props.node.operands[0]" resModel="props.resModel" readonly="props.readonly" isDebugMode="props.isDebugMode" />
+                    <t t-if="typeof props.node.operands[1] === 'string'">
+                        <span class="o_domain_leaf_operator"> <t t-esc="displayedOperator" /></span>
+                        <span class="o_domain_leaf_value text-primary"> "<t t-esc="props.node.operands[1]" />"</span>
+                    </t>
+                    <t t-elif="typeof props.node.operands[1] === 'number'">
+                        <span class="o_domain_leaf_operator"> <t t-esc="displayedOperator" /></span>
+                        <span class="o_domain_leaf_value text-primary"> <t t-esc="props.node.operands[1]" /></span>
+                    </t>
+                    <t t-elif="typeof props.node.operands[1] === 'boolean'">
+                        is
+                        <t t-if="(props.node.operator === '=' and props.node.operands[1] === false) or (props.node.operator === '!=' and props.node.operands[1] === true)">
+                            not
+                        </t>
+                        set
+                    </t>
+                    <t t-elif="Array.isArray(props.node.operands[1])">
+                        <span class="o_domain_leaf_operator"> <t t-esc="displayedOperator" /></span>
+                        <t t-foreach="props.node.operands[1]" t-as="value" t-key="value_index">
+                            <span class="o_domain_leaf_value text-primary"> "<t t-esc="value"/>"</span>
+                            <t t-if="!value_last"> or </t>
+                        </t>
+                    </t>
+                </div>
+            </t>
+            <t t-else="">
+                <DomainSelectorControlPanel
+                    node="props.node"
+                    onHoverDeleteNodeBtn.bind="onHoverDeleteNodeBtn"
+                    onHoverInsertLeafNodeBtn.bind="onHoverInsertLeafNodeBtn"
+                    onHoverInsertBranchNodeBtn.bind="onHoverInsertBranchNodeBtn"
+                />
+                <div class="o_domain_leaf_edition">
+                    <ModelFieldSelector fieldName="props.node.operands[0]" resModel="props.resModel" readonly="props.readonly" update="(name) => this.onFieldChange(name)" isDebugMode="props.isDebugMode" />
+                    <t t-set="field" t-value="getFieldComponent(fieldInfo.type)" />
+                    <t t-if="field">
+                        <div>
+                            <select class="o_domain_leaf_operator_select o_input" t-on-change="onOperatorChange">
+                                <t t-foreach="field.getOperators()" t-as="operator" t-key="operator.value">
+                                    <option
+                                        t-att-value="operator_index"
+                                        t-att-selected="operator.matches({ fieldInfo, operator: props.node.operator, value: props.node.operands[1] })"
+                                        t-esc="operator.label"
+                                    />
+                                </t>
+                            </select>
+                        </div>
+                        <t t-if="!isValueHidden">
+                            <t
+                                t-component="field"
+                                t-key="fieldInfo.type"
+                                field="fieldInfo"
+                                operator="getOperatorInfo(props.node.operator)"
+                                value="props.node.operands[1]"
+                                update="(changes) => props.node.update(changes)"
+                            />
+                        </t>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_operators.js b/addons/web/static/src/core/domain_selector/domain_selector_operators.js
new file mode 100644
index 00000000000..54e35368c65
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_operators.js
@@ -0,0 +1,166 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+function onDidChange(action) {
+    return function (oldOperator, fieldChange) {
+        if (this.category !== oldOperator.category) {
+            return action(fieldChange);
+        }
+        return {};
+    };
+}
+
+function matchValue() {
+    return function ({ operator }) {
+        return operator === this.value;
+    };
+}
+
+const dso = registry.category("domain_selector/operator");
+dso.add("=", {
+    category: "equality",
+    label: "=",
+    value: "=",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches({ operator, value }) {
+        return operator === this.value && typeof value !== "boolean";
+    },
+});
+dso.add("!=", {
+    category: "equality",
+    label: _lt("is not ="),
+    value: "!=",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches({ operator, value }) {
+        return operator === this.value && typeof value !== "boolean";
+    },
+});
+dso.add(">", {
+    category: "comparison",
+    label: ">",
+    value: ">",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches: matchValue(),
+});
+dso.add(">=", {
+    category: "comparison",
+    label: ">=",
+    value: ">=",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches: matchValue(),
+});
+dso.add("<", {
+    category: "comparison",
+    label: "<",
+    value: "<",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches: matchValue(),
+});
+dso.add("<=", {
+    category: "comparison",
+    label: "<=",
+    value: "<=",
+    onDidChange: onDidChange((fieldChange) => fieldChange()),
+    matches: matchValue(),
+});
+dso.add("ilike", {
+    category: "like",
+    label: _lt("contains"),
+    value: "ilike",
+    onDidChange: onDidChange(() => ({ value: "" })),
+    matches: matchValue(),
+});
+dso.add("not ilike", {
+    category: "like",
+    label: _lt("does not contain"),
+    value: "not ilike",
+    onDidChange: onDidChange(() => ({ value: "" })),
+    matches: matchValue(),
+});
+dso.add("like", {
+    category: "like",
+    label: _lt("like"),
+    value: "like",
+    onDidChange: onDidChange(() => ({ value: "" })),
+});
+dso.add("not like", {
+    category: "like",
+    label: _lt("not like"),
+    value: "not like",
+    onDidChange: onDidChange(() => ({ value: "" })),
+    matches: matchValue(),
+});
+dso.add("=like", {
+    category: "like",
+    label: _lt("=like"),
+    value: "=like",
+    onDidChange: onDidChange(() => ({ value: "" })),
+    matches: matchValue(),
+});
+dso.add("=ilike", {
+    category: "like",
+    label: _lt("=ilike"),
+    value: "=ilike",
+    onDidChange: onDidChange(() => ({ value: "" })),
+    matches: matchValue(),
+});
+dso.add("child_of", {
+    category: "relation",
+    label: _lt("child of"),
+    value: "child_of",
+    onDidChange: onDidChange(() => ({ value: 1 })),
+    matches: matchValue(),
+});
+dso.add("parent_of", {
+    category: "relation",
+    label: _lt("parent of"),
+    value: "parent_of",
+    onDidChange: onDidChange(() => ({ value: 1 })),
+    matches: matchValue(),
+});
+dso.add("in", {
+    category: "in",
+    label: _lt("in"),
+    value: "in",
+    onDidChange: onDidChange(() => ({ value: [] })),
+    matches: matchValue(),
+});
+dso.add("not in", {
+    category: "in",
+    label: _lt("not in"),
+    value: "not in",
+    onDidChange: onDidChange(() => ({ value: [] })),
+    matches: matchValue(),
+});
+dso.add("set", {
+    category: "set",
+    label: _lt("is set"),
+    value: "set",
+    hideValue: true,
+    onDidChange() {
+        return {
+            operator: "!=",
+            value: false,
+        };
+    },
+    matches({ operator, value }) {
+        return operator === "!=" && typeof value === "boolean";
+    },
+});
+dso.add("not set", {
+    category: "set",
+    label: _lt("is not set"),
+    value: "not set",
+    hideValue: true,
+    onDidChange() {
+        return {
+            operator: "=",
+            value: false,
+        };
+    },
+    matches({ operator, value }) {
+        return operator === "=" && typeof value === "boolean";
+    },
+});
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_root_node.js b/addons/web/static/src/core/domain_selector/domain_selector_root_node.js
new file mode 100644
index 00000000000..0d5ecee2251
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_root_node.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import { DomainSelectorBranchNode } from "./domain_selector_branch_node";
+import { DomainSelectorBranchOperator } from "./domain_selector_branch_operator";
+import { DomainSelectorLeafNode } from "./domain_selector_leaf_node";
+
+const { Component } = owl;
+
+export class DomainSelectorRootNode extends Component {
+    get hasNode() {
+        return this.props.node.operands.length > 0;
+    }
+    get node() {
+        return this.props.node.operands[0];
+    }
+
+    insertNode(newNodeType) {
+        this.props.node.insert(newNodeType);
+    }
+
+    onOperatorSelected(ev) {
+        this.props.node.update(ev.detail.payload.operator);
+    }
+    onChange(ev) {
+        this.props.node.update(ev.target.value, true);
+    }
+}
+DomainSelectorRootNode.template = "web.DomainSelectorRootNode";
+DomainSelectorRootNode.components = {
+    DomainSelectorBranchNode,
+    DomainSelectorBranchOperator,
+    DomainSelectorLeafNode,
+};
diff --git a/addons/web/static/src/core/domain_selector/domain_selector_root_node.xml b/addons/web/static/src/core/domain_selector/domain_selector_root_node.xml
new file mode 100644
index 00000000000..a42f52d1527
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/domain_selector_root_node.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorRootNode" owl="1">
+        <div
+            class="o_domain_node o_domain_tree o_domain_selector"
+            aria-atomic="true"
+            t-attf-class="{{ props.className }} {{ props.readonly ? 'o_read_mode' : 'o_edit_mode'}}"
+        >
+            <t t-if="!hasNode">
+                <span>Match <strong>All records</strong></span>
+                <t t-if="!props.readonly">
+                    <button
+                        class="btn btn-sm btn-primary o_domain_add_first_node_button"
+                        t-on-click="() => this.insertNode('leaf')"
+                    >
+                        <i class="fa fa-plus"/> Add filter
+                    </button>
+                </t>
+            </t>
+            <t t-else="">
+                <t t-if="node.type === 'leaf'">
+                    Match records with the following rule:
+                    <div class="o_domain_node_children_container">
+                        <DomainSelectorLeafNode t-props="{ ...props, node }" />
+                    </div>
+                </t>
+                <t t-else="">
+                    <span>Match records with </span>
+                    <DomainSelectorBranchOperator node="node" readonly="props.readonly" />
+                    <span> of the following rules:</span>
+                    <div class="o_domain_node_children_container">
+                        <t t-foreach="node.operands" t-as="subNode" t-key="subNode.id">
+                            <t t-if="subNode.type === 'branch'">
+                                <DomainSelectorBranchNode t-props="{ ...props, node: subNode }" />
+                            </t>
+                            <t t-elif="subNode.type === 'leaf'">
+                                <DomainSelectorLeafNode t-props="{ ...props, node: subNode }" />
+                            </t>
+                        </t>
+                    </div>
+                </t>
+            </t>
+            <t t-if="props.isDebugMode and !props.readonly">
+                <label class="o_domain_debug_container">
+                    <span class="small"># Code editor</span>
+                    <textarea type="text" class="o_domain_debug_input" t-att-value="props.value" t-on-change="onChange" />
+                </label>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.js
new file mode 100644
index 00000000000..7661d2e478c
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+const dsf = registry.category("domain_selector/fields");
+
+export class DomainSelectorBooleanField extends Component {
+    onChange(ev) {
+        this.props.update({
+            value: ev.target.value === "1",
+        });
+    }
+}
+Object.assign(DomainSelectorBooleanField, {
+    template: "web.DomainSelectorBooleanField",
+
+    onDidTypeChange() {
+        return { value: true };
+    },
+    getOperators() {
+        return [
+            {
+                category: "equality",
+                label: _lt("is"),
+                value: "=",
+                onDidChange() {},
+                matches({ operator }) {
+                    return operator === this.value;
+                },
+            },
+            {
+                category: "equality",
+                label: _lt("is not"),
+                value: "!=",
+                onDidChange() {},
+                matches({ operator }) {
+                    return operator === this.value;
+                },
+            },
+        ];
+    },
+});
+
+dsf.add("boolean", DomainSelectorBooleanField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.xml
new file mode 100644
index 00000000000..7d2d8d0803e
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_boolean_field.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorBooleanField" owl="1">
+        <div class="o_ds_value_cell">
+            <select class="o_input" t-on-change="onChange">
+                <option value="1" t-att-selected="props.value">set (true)</option>
+                <option value="0" t-att-selected="!props.value">not set (false)</option>
+            </select>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.js
new file mode 100644
index 00000000000..cd3b62a497e
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
+import { serializeDate, serializeDateTime } from "@web/core/l10n/dates";
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+const parsers = registry.category("parsers");
+const dsf = registry.category("domain_selector/fields");
+const dso = registry.category("domain_selector/operator");
+
+export class DomainSelectorDateTimeField extends Component {
+    get component() {
+        const { DatePicker, DateTimePicker } = this.constructor.components;
+        return this.props.field.type === "date" ? DatePicker : DateTimePicker;
+    }
+    get parser() {
+        return parsers.get(this.props.field.type);
+    }
+    get parsedValue() {
+        return this.props.value ? this.parser(this.props.value) : luxon.DateTime.local();
+    }
+
+    onChange(value) {
+        const serialize = this.props.field.type === "date" ? serializeDate : serializeDateTime;
+        this.props.update({ value: serialize(value) });
+    }
+}
+Object.assign(DomainSelectorDateTimeField, {
+    template: "web.DomainSelectorDateTimeField",
+    components: {
+        DatePicker,
+        DateTimePicker,
+    },
+
+    onDidTypeChange(field) {
+        const serialize = field.type === "date" ? serializeDate : serializeDateTime;
+        return { value: serialize(luxon.DateTime.local()) };
+    },
+    getOperators() {
+        return ["=", "!=", ">", "<", ">=", "<=", "set", "not set"].map((key) => dso.get(key));
+    },
+});
+
+dsf.add("date", DomainSelectorDateTimeField);
+dsf.add("datetime", DomainSelectorDateTimeField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.xml
new file mode 100644
index 00000000000..a1f20a38d20
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_datetime_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorDateTimeField" owl="1">
+        <div class="o_ds_value_cell">
+            <t t-component="component" date="parsedValue" onDateTimeChanged.bind="onChange" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.js
new file mode 100644
index 00000000000..a5dbdaf9be3
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.js
@@ -0,0 +1,18 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+const parsers = registry.category("parsers");
+
+export class DomainSelectorFieldInput extends Component {
+    parseValue(value) {
+        const parser = parsers.get(this.props.field.type, (value) => value);
+        return parser(value);
+    }
+
+    onChange(ev) {
+        this.props.update({ value: this.parseValue(ev.target.value) });
+    }
+}
+DomainSelectorFieldInput.template = "web.DomainSelectorFieldInput";
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.xml
new file mode 100644
index 00000000000..9f5c3aed451
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorFieldInput" owl="1">
+        <input type="text" class="o_input o_domain_leaf_value_input" t-att-value="props.value" t-on-change="onChange" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.js
new file mode 100644
index 00000000000..5d946388906
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.js
@@ -0,0 +1,25 @@
+/** @odoo-module **/
+
+const { Component, useRef } = owl;
+
+export class DomainSelectorFieldInputWithTags extends Component {
+    setup() {
+        this.inputRef = useRef("input");
+    }
+
+    removeTag(tagIndex) {
+        const value = [...this.props.value];
+        value.splice(tagIndex, 1);
+        this.props.update({ value });
+    }
+    addTag(value) {
+        this.props.update({ value: this.props.value.concat(value) });
+    }
+
+    onBtnClick() {
+        const value = this.inputRef.el.value;
+        this.inputRef.el.value = "";
+        this.addTag(value);
+    }
+}
+DomainSelectorFieldInputWithTags.template = "web.DomainSelectorFieldInputWithTags";
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
new file mode 100644
index 00000000000..be682f47125
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_field_input_with_tags.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorFieldInputWithTags" owl="1">
+        <div class="o_ds_value_cell">
+            <div class="o_domain_leaf_value_input">
+                <t t-foreach="props.value" t-as="tag" t-key="tag_index">
+                    <span class="badge badge-pill">
+                        <t t-esc="tag" /> <i
+                            class="o_domain_leaf_value_remove_tag_button fa fa-times"
+                            role="img"
+                            aria-label="Remove tag"
+                            title="Remove tag"
+                            t-on-click="removeTag(tag_index)"
+                        />
+                    </span>
+                </t>
+            </div>
+            <div class="o_domain_leaf_value_tags">
+                <input type="text" class="o_input" placeholder="Add new value" t-ref="input" />
+                <button
+                    class="btn btn-sm btn-primary fa fa-plus o_domain_leaf_value_add_tag_button"
+                    aria-label="Add tag"
+                    title="Add tag"
+                    t-on-click="onBtnClick"
+                />
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.js
new file mode 100644
index 00000000000..74209e1b4a2
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { DomainSelectorFieldInput } from "./domain_selector_field_input";
+
+const { Component } = owl;
+
+const dsf = registry.category("domain_selector/fields");
+const dso = registry.category("domain_selector/operator");
+
+export class DomainSelectorNumberField extends Component {}
+Object.assign(DomainSelectorNumberField, {
+    template: "web.DomainSelectorNumberField",
+    components: {
+        DomainSelectorFieldInput,
+    },
+
+    onDidTypeChange() {
+        return { value: 0 };
+    },
+    getOperators() {
+        return [
+            "=",
+            "!=",
+            ">",
+            "<",
+            ">=",
+            "<=",
+            "ilike",
+            "not ilike",
+            "set",
+            "not set",
+        ].map((key) => dso.get(key));
+    },
+});
+
+dsf.add("integer", DomainSelectorNumberField);
+dsf.add("float", DomainSelectorNumberField);
+dsf.add("monetary", DomainSelectorNumberField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.xml
new file mode 100644
index 00000000000..d6b94178301
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_number_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorNumberField" owl="1">
+        <div class="o_ds_value_cell">
+            <DomainSelectorFieldInput t-props="props" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.js
new file mode 100644
index 00000000000..f6a5bb945d5
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.js
@@ -0,0 +1,29 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { DomainSelectorFieldInput } from "./domain_selector_field_input";
+
+const { Component } = owl;
+
+const dso = registry.category("domain_selector/operator");
+
+export class DomainSelectorRelationField extends Component {}
+Object.assign(DomainSelectorRelationField, {
+    template: "web.DomainSelectorRelationField",
+    components: {
+        DomainSelectorFieldInput,
+    },
+
+    onDidTypeChange() {
+        return { value: "0" };
+    },
+    getOperators() {
+        return ["=", "!=", "ilike", "not ilike", "set", "not set"].map((key) => dso.get(key));
+    },
+});
+
+registry
+    .category("domain_selector/fields")
+    .add("one2many", DomainSelectorRelationField)
+    .add("many2one", DomainSelectorRelationField)
+    .add("many2many", DomainSelectorRelationField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.xml
new file mode 100644
index 00000000000..7d7b0728582
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_relation_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorRelationField" owl="1">
+        <div class="o_ds_value_cell">
+            <DomainSelectorFieldInput t-props="props" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.js
new file mode 100644
index 00000000000..27821b335d4
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.js
@@ -0,0 +1,26 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+const dsf = registry.category("domain_selector/fields");
+const dso = registry.category("domain_selector/operator");
+
+export class DomainSelectorSelectionField extends Component {
+    onChange(ev) {
+        this.props.update({ value: ev.target.value });
+    }
+}
+Object.assign(DomainSelectorSelectionField, {
+    template: "web.DomainSelectorSelectionField",
+
+    onDidTypeChange(field) {
+        return { value: field.selection[0][0] };
+    },
+    getOperators() {
+        return ["=", "!=", "set", "not set"].map((key) => dso.get(key));
+    },
+});
+
+dsf.add("selection", DomainSelectorSelectionField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.xml
new file mode 100644
index 00000000000..a779098d0b2
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_selection_field.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorSelectionField" owl="1">
+        <div class="o_ds_value_cell">
+            <select class="o_input o_domain_leaf_value_input" t-on-change="onChange">
+                <t t-foreach="props.field.selection" t-as="option" t-key="option[0]">
+                    <option
+                        t-att-value="option[0]"
+                        t-att-selected="option[0] === props.value"
+                        t-esc="option[1]"
+                    />
+                </t>
+            </select>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.js b/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.js
new file mode 100644
index 00000000000..03d76a21877
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.js
@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { DomainSelectorFieldInput } from "./domain_selector_field_input";
+import { DomainSelectorFieldInputWithTags } from "./domain_selector_field_input_with_tags";
+
+const { Component } = owl;
+
+const dsf = registry.category("domain_selector/fields");
+const dso = registry.category("domain_selector/operator");
+
+export class DomainSelectorTextField extends Component {}
+Object.assign(DomainSelectorTextField, {
+    template: "web.DomainSelectorTextField",
+    components: {
+        DomainSelectorFieldInput,
+        DomainSelectorFieldInputWithTags,
+    },
+
+    onDidTypeChange() {
+        return { value: "" };
+    },
+    getOperators() {
+        return ["=", "!=", "ilike", "not ilike", "set", "not set", "in", "not in"].map((key) =>
+            dso.get(key)
+        );
+    },
+});
+
+dsf.add("char", DomainSelectorTextField);
+dsf.add("html", DomainSelectorTextField);
+dsf.add("text", DomainSelectorTextField);
diff --git a/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.xml b/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.xml
new file mode 100644
index 00000000000..07399ec1ef0
--- /dev/null
+++ b/addons/web/static/src/core/domain_selector/fields/domain_selector_text_field.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainSelectorTextField" owl="1">
+        <t t-if="props.operator.category === 'in'">
+            <DomainSelectorFieldInputWithTags t-props="props" />
+        </t>
+        <t t-else="">
+            <div class="o_ds_value_cell">
+                <DomainSelectorFieldInput t-props="props" />
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_hook.js b/addons/web/static/src/core/model_field_selector/model_field_hook.js
new file mode 100644
index 00000000000..b19fdb78d25
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_hook.js
@@ -0,0 +1,43 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+
+export function useModelField() {
+    const orm = useService("orm");
+
+    const loadModelFields = (resModel) => {
+        // should be cached
+        return orm.call(resModel, "fields_get", [
+            false,
+            ["store", "searchable", "type", "string", "relation", "selection", "related"],
+        ]);
+    };
+
+    const loadChain = async (resModel, fieldName) => {
+        const fieldNameChain = fieldName.length ? fieldName.split(".") : [];
+        let currentNode = {
+            resModel,
+            field: null,
+        };
+        const chain = [currentNode];
+        for (const fieldName of fieldNameChain) {
+            const fieldsInfo = await loadModelFields(currentNode.resModel);
+            Object.assign(currentNode, {
+                field: { ...fieldsInfo[fieldName], name: fieldName },
+            });
+            if (fieldsInfo[fieldName].relation) {
+                currentNode = {
+                    resModel: fieldsInfo[fieldName].relation,
+                    field: null,
+                };
+                chain.push(currentNode);
+            }
+        }
+        return chain;
+    };
+
+    return {
+        loadModelFields,
+        loadChain,
+    };
+}
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector.js b/addons/web/static/src/core/model_field_selector/model_field_selector.js
new file mode 100644
index 00000000000..3c1473e9538
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector.js
@@ -0,0 +1,120 @@
+/** @odoo-module **/
+
+import { usePopover } from "@web/core/popover/popover_hook";
+import { useModelField } from "./model_field_hook";
+import { ModelFieldSelectorPopover } from "./model_field_selector_popover";
+
+const { Component, onWillStart, onWillUpdateProps } = owl;
+
+function useUniquePopover() {
+    const popover = usePopover();
+    let remove = null;
+    return Object.assign(Object.create(popover), {
+        add(target, component, props, options) {
+            if (remove) {
+                remove();
+            }
+            remove = popover.add(target, component, props, options);
+            return () => {
+                remove();
+                remove = null;
+            };
+        },
+    });
+}
+
+export class ModelFieldSelector extends Component {
+    setup() {
+        this.popover = useUniquePopover();
+        this.modelField = useModelField();
+        this.chain = [];
+
+        onWillStart(async () => {
+            this.chain = await this.loadChain(this.props.resModel, this.props.fieldName);
+        });
+        onWillUpdateProps(async (nextProps) => {
+            this.chain = await this.loadChain(nextProps.resModel, nextProps.fieldName);
+        });
+    }
+
+    get fieldNameChain() {
+        return this.getFieldNameChain(this.props.fieldName);
+    }
+
+    getFieldNameChain(fieldName) {
+        return fieldName.length ? fieldName.split(".") : [];
+    }
+
+    async loadChain(resModel, fieldName) {
+        if ("01".includes(fieldName)) {
+            return [{ resModel, field: { string: fieldName } }];
+        }
+        const fieldNameChain = this.getFieldNameChain(fieldName);
+        let currentNode = {
+            resModel,
+            field: null,
+        };
+        const chain = [currentNode];
+        for (const fieldName of fieldNameChain) {
+            const fieldsInfo = await this.modelField.loadModelFields(currentNode.resModel);
+            Object.assign(currentNode, {
+                field: { ...fieldsInfo[fieldName], name: fieldName },
+            });
+            if (fieldsInfo[fieldName].relation) {
+                currentNode = {
+                    resModel: fieldsInfo[fieldName].relation,
+                    field: null,
+                };
+                chain.push(currentNode);
+            }
+        }
+        return chain;
+    }
+    update(chain) {
+        this.props.update(chain.join("."));
+    }
+
+    onFieldSelectorClick(ev) {
+        if (this.props.readonly) {
+            return;
+        }
+        this.popover.add(
+            ev.currentTarget,
+            this.constructor.components.Popover,
+            {
+                chain: this.chain,
+                update: this.update.bind(this),
+                showSearchInput: this.props.showSearchInput,
+                isDebugMode: this.props.isDebugMode,
+                loadChain: this.loadChain.bind(this),
+                filter: this.props.filter,
+            },
+            {
+                closeOnClickAway: true,
+            }
+        );
+    }
+}
+
+Object.assign(ModelFieldSelector, {
+    template: "web._ModelFieldSelector",
+    components: {
+        Popover: ModelFieldSelectorPopover,
+    },
+    props: {
+        fieldName: String,
+        resModel: String,
+        readonly: { type: Boolean, optional: true },
+        showSearchInput: { type: Boolean, optional: true },
+        isDebugMode: { type: Boolean, optional: true },
+        update: { type: Function, optional: true },
+        filter: { type: Function, optional: true },
+    },
+    defaultProps: {
+        readonly: true,
+        isDebugMode: false,
+        showSearchInput: true,
+        update: () => {},
+        filter: () => true,
+    },
+});
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector.xml b/addons/web/static/src/core/model_field_selector/model_field_selector.xml
new file mode 100644
index 00000000000..713a8de381b
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web._ModelFieldSelector" owl="1">
+        <div
+            class="o_field_selector"
+            aria-atomic="true"
+            t-att-class="props.readonly ? 'o_read_mode' : 'o_edit_mode o_input'"
+            t-on-click="onFieldSelectorClick"
+        >
+            <div class="o_field_selector_value" tabindex="0">
+                <t t-foreach="chain" t-as="node" t-key="node_index">
+                    <t t-if="node.field">
+                        <t t-if="!node_first">
+                            <i class="fa fa-chevron-right" role="img" aria-label="Followed by" title="Followed-by" />
+                        </t>
+                        <span class="o_field_selector_chain_part">
+                            <t t-esc="node.field.string" />
+                        </span>
+                    </t>
+                </t>
+            </div>
+            <t t-if="!fieldNameChain.length">
+                <div class="o_field_selector_controls" tabindex="0">
+                    <i role="alert" class="fa fa-exclamation-triangle o_field_selector_warning" title="Invalid field chain" aria-label="Invalid field chain"/>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.js b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.js
new file mode 100644
index 00000000000..39629cce948
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.js
@@ -0,0 +1,107 @@
+/** @odoo-module **/
+
+import { sortBy } from "../utils/arrays";
+import { useModelField } from "./model_field_hook";
+
+import { fuzzyLookup } from "@web/core/utils/search";
+
+const { Component, onWillStart } = owl;
+
+export class ModelFieldSelectorPopover extends Component {
+    setup() {
+        this.chain = Array.from(this.props.chain);
+        this.modelField = useModelField();
+        this.fields = {};
+        this.fieldKeys = [];
+        this.searchValue = "";
+        this.fullFieldName = this.fieldNameChain.join(".");
+
+        onWillStart(async () => {
+            await this.loadFields();
+        });
+    }
+
+    get currentNode() {
+        return this.chain[this.chain.length - 1];
+    }
+    get currentFieldName() {
+        const nodes = this.chain.filter((node) => node.field);
+        return nodes.length ? nodes[nodes.length - 1].field.string : "";
+    }
+
+    get fieldNameChain() {
+        return this.chain.filter((node) => node.field).map((node) => node.field.name);
+    }
+
+    async loadFields() {
+        this.fields = await this.modelField.loadModelFields(this.currentNode.resModel);
+        this.fieldKeys = this.sortedKeys(this.fields);
+    }
+    sortedKeys(obj) {
+        const keys = Object.keys(obj);
+        return sortBy(keys, (key) => obj[key].string);
+    }
+    async update() {
+        const fieldNameChain = this.fieldNameChain;
+        this.fullFieldName = fieldNameChain.join(".");
+        await this.props.update(fieldNameChain);
+        await this.loadFields();
+        this.render();
+    }
+
+    onSearch(ev) {
+        this.searchValue = ev.target.value;
+        let fieldKeys = this.sortedKeys(this.fields);
+        if (this.searchValue) {
+            fieldKeys = fuzzyLookup(this.searchValue, fieldKeys, (key) => this.fields[key].string);
+        }
+        this.fieldKeys = fieldKeys;
+        this.render();
+    }
+    onPreviousBtnClick() {
+        this.searchValue = "";
+        if (this.chain.length > 1) {
+            this.chain.pop();
+        }
+        this.currentNode.field = null;
+        this.update();
+    }
+    onFieldSelected(field) {
+        this.searchValue = "";
+        this.currentNode.field = field;
+        if (!field.relation) {
+            this.props.close();
+        } else {
+            this.chain.push({
+                resModel: field.relation,
+                field: null,
+            });
+        }
+        this.update();
+    }
+    async onFieldNameChange(ev) {
+        this.fullFieldName = ev.target.value.replace(/\s+/g, "");
+        try {
+            this.chain = await this.props.loadChain(this.fullFieldName);
+            this.update();
+        } catch (_error) {
+            // WOWL TODO: rethrow error when not the expected type
+            this.chain = [{ resModel: this.props.chain[0], field: null }];
+            await this.props.update([]);
+            this.render();
+        }
+    }
+}
+
+Object.assign(ModelFieldSelectorPopover, {
+    template: "web.ModelFieldSelectorPopover",
+    props: {
+        chain: Array,
+        update: Function,
+        showSearchInput: Boolean,
+        isDebugMode: Boolean,
+        loadChain: Function,
+        filter: Function,
+        close: Function,
+    },
+});
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
new file mode 100644
index 00000000000..25fd6916b69
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.scss
@@ -0,0 +1,83 @@
+
+.o_field_selector_popover {
+    width: 265px;
+    background: white;
+
+    &:focus {
+        outline: none;
+    }
+
+    .o_field_selector_popover_header {
+        color: white;
+        background: theme-color('primary');
+        font-weight: bold;
+        padding: 5px 0 5px 0.4em;
+
+        .o_field_selector_title {
+            width: 100%;
+            @include o-text-overflow;
+            padding: 0px 35px;
+            text-align: center;
+        }
+        .o_field_selector_search {
+            padding-right: 0.4rem;
+            > .o_input {
+                padding: 5px 0.4rem;
+            }
+        }
+        .o_field_selector_popover_option {
+            @include o-position-absolute($top: 0);
+            padding: 8px;
+
+            &.o_field_selector_prev_page {
+                left: 0;
+            }
+            &.o_field_selector_close {
+                right: 0;
+            }
+            &:hover {
+                background: darken(theme-color('primary'), 10%);
+            }
+        }
+    }
+    .o_field_selector_popover_body {
+        .o_field_selector_page {
+            position: relative;
+            max-height: 320px;
+            overflow: auto;
+            margin: 0;
+            padding: 0;
+
+            > .o_field_selector_item {
+                list-style: none;
+                position: relative;
+                padding: 5px 0 5px 0.4em;
+                cursor: pointer;
+                font-family: Arial;
+                font-size: 13px;
+                color: #444;
+                border-bottom: 1px solid #eee;
+                &.active {
+                    background: #f5f5f5;
+                }
+                .o_field_selector_item_title {
+                    font-size: 12px;
+                }
+                .o_field_selector_relation_icon {
+                    @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
+                    display: flex;
+                    align-items: center;
+                    padding: 10px;
+                }
+            }
+        }
+    }
+    .o_field_selector_popover_footer {
+        background: theme-color('primary');
+        padding: 5px 0.4em;
+
+        > input {
+            width: 100%;
+        }
+    }
+}
diff --git a/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
new file mode 100644
index 00000000000..8b3dc043a16
--- /dev/null
+++ b/addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ModelFieldSelectorPopover" owl="1">
+        <div class="o_field_selector_popover" tabindex="0">
+            <div class="o_field_selector_popover_header text-center">
+                <t t-if="chain.length > 1">
+                    <i
+                        class="fa fa-arrow-left o_field_selector_popover_option o_field_selector_prev_page"
+                        title="Previous"
+                        role="img"
+                        aria-label="Previous"
+                        t-on-click="onPreviousBtnClick"
+                    />
+                </t>
+                <div class="o_field_selector_title" t-esc="currentFieldName" />
+                <i
+                    class="fa fa-times o_field_selector_popover_option o_field_selector_close"
+                    title="Close"
+                    role="img"
+                    aria-label="Close"
+                    t-on-click="props.close"
+                />
+
+                <t t-if="props.showSearchInput">
+                    <div class="o_field_selector_search mt-2">
+                        <input type="text" placeholder='Search...' class="o_input" t-att-value="searchValue" t-on-input="onSearch" />
+                    </div>
+                </t>
+            </div>
+            <div class="o_field_selector_popover_body">
+                <ul class="o_field_selector_page">
+                    <t t-foreach="fieldKeys" t-as="fieldKey" t-key="fieldKey">
+                        <t t-set="field" t-value="fields[fieldKey]" />
+                        <t t-if="field.searchable and props.filter(field)">
+                            <li class="o_field_selector_item" t-on-click="() => this.onFieldSelected({ ...field, name: fieldKey })">
+                                <t t-esc="field.string" />
+                                <t t-if="field.relation">
+                                    <i
+                                        class="fa fa-chevron-right o_field_selector_relation_icon"
+                                        role="img"
+                                        aria-label="Relation to follow"
+                                        title="Relation to follow"
+                                    />
+                                </t>
+                            </li>
+                        </t>
+                    </t>
+                </ul>
+            </div>
+            <t t-if="props.isDebugMode">
+                <div class="o_field_selector_popover_footer">
+                    <input type="text" class="o_input o_field_selector_debug" t-att-value="fullFieldName" t-on-change="onFieldNameChange" />
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/core/domain_selector_tests.js b/addons/web/static/tests/core/domain_selector_tests.js
new file mode 100644
index 00000000000..cbbb2b125c7
--- /dev/null
+++ b/addons/web/static/tests/core/domain_selector_tests.js
@@ -0,0 +1,342 @@
+/** @odoo-module **/
+
+import { DomainSelector } from "@web/core/domain_selector/domain_selector";
+import { MainComponentsContainer } from "@web/core/main_components_container";
+import { ormService } from "@web/core/orm_service";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
+import { popoverService } from "@web/core/popover/popover_service";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
+import { makeTestEnv } from "../helpers/mock_env";
+import { click, getFixture, mount, triggerEvent } from "../helpers/utils";
+import { makeFakeLocalizationService } from "../helpers/mock_services";
+
+const { Component, xml } = owl;
+
+let serverData;
+let env;
+let target;
+
+QUnit.module("Components", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: { string: "Foo", type: "char", searchable: true },
+                        bar: { string: "Bar", type: "boolean", searchable: true },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            searchable: true,
+                        },
+                        datetime: { string: "Date Time", type: "datetime", searchable: true },
+                    },
+                    records: [
+                        { id: 1, foo: "yop", bar: true, product_id: 37 },
+                        { id: 2, foo: "blip", bar: true, product_id: false },
+                        { id: 4, foo: "abc", bar: false, product_id: 41 },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        { id: 37, display_name: "xphone" },
+                        { id: 41, display_name: "xpad" },
+                    ],
+                },
+            },
+        };
+
+        registry.category("services").add("popover", popoverService);
+        registry.category("services").add("orm", ormService);
+        registry.category("services").add("ui", uiService);
+        registry.category("services").add("hotkey", hotkeyService);
+        registry.category("services").add("localization", makeFakeLocalizationService());
+
+        env = await makeTestEnv({ serverData });
+        target = getFixture();
+
+        await mount(MainComponentsContainer, target, { env });
+    });
+
+    QUnit.module("DomainSelector");
+
+    QUnit.test("creating a domain from scratch", async (assert) => {
+        assert.expect(12);
+
+        class Parent extends Component {
+            setup() {
+                this.value = "[]";
+            }
+            onUpdate(newValue) {
+                this.value = newValue;
+                this.render();
+            }
+        }
+        Parent.components = { DomainSelector };
+        Parent.template = xml`
+            <DomainSelector
+                resModel="'partner'"
+                value="value"
+                readonly="false"
+                isDebugMode="true"
+                update="(newValue) => this.onUpdate(newValue)"
+            />
+        `;
+
+        // Create the domain selector and its mock environment
+        await mount(Parent, target, {
+            env,
+            props: {
+                resModel: "partner",
+                value: "[]",
+                readonly: false,
+                isDebugMode: true,
+            },
+        });
+
+        // As we gave an empty domain, there should be a visible button to add
+        // the first domain part
+        assert.containsOnce(
+            target,
+            ".o_domain_add_first_node_button",
+            "there should be a button to create first domain element"
+        );
+
+        // Clicking on the button should add a visible field selector in the
+        // widget so that the user can change the field chain
+        await click(target, ".o_domain_add_first_node_button");
+        assert.containsOnce(target, ".o_field_selector", "there should be a field selector");
+
+        // Focusing the field selector input should open a field selector popover
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // The field selector popover should contain the list of "partner"
+        // fields. "Bar" should be among them.
+        assert.strictEqual(
+            document.body.querySelector(".o_field_selector_popover li").textContent,
+            "Bar",
+            "field selector popover should contain the 'Bar' field"
+        );
+
+        // Clicking the "Bar" field should change the internal domain and this
+        // should be displayed in the debug textarea
+        await click(document.body.querySelector(".o_field_selector_popover li"));
+        assert.containsOnce(target, "textarea.o_domain_debug_input");
+        assert.strictEqual(
+            target.querySelector(".o_domain_debug_input").value,
+            `[("bar", "=", True)]`,
+            "the domain input should contain a domain with 'bar'"
+        );
+
+        // There should be a "+" button to add a domain part; clicking on it
+        // should add the default "['id', '=', 1]" domain
+        assert.containsOnce(target, ".fa-plus-circle", "there should be a '+' button");
+        await click(target, ".fa-plus-circle");
+        assert.strictEqual(
+            target.querySelector(".o_domain_debug_input").value,
+            `["&", ("bar", "=", True), ("id", "=", 1)]`,
+            "the domain input should contain a domain with 'bar' and 'id'"
+        );
+
+        // There should be two "..." buttons to add a domain group; clicking on
+        // the first one, should add this group with defaults "['id', '=', 1]"
+        // domains and the "|" operator
+        assert.containsN(target, ".fa-ellipsis-h", 2, "there should be two '...' buttons");
+
+        await click(target.querySelector(".fa-ellipsis-h"));
+        assert.strictEqual(
+            target.querySelector(".o_domain_debug_input").value,
+            `["&", ("bar", "=", True), "&", "|", ("id", "=", 1), ("id", "=", 1), ("id", "=", 1)]`,
+            "the domain input should contain a domain with 'bar', 'id' and a subgroup"
+        );
+
+        // There should be five "-" buttons to remove domain part; clicking on
+        // the two last ones, should leave a domain with only the "bar" and
+        // "foo" fields, with the initial "&" operator
+        assert.containsN(
+            target,
+            ".o_domain_delete_node_button",
+            5,
+            "there should be five 'x' buttons"
+        );
+        let buttons = target.querySelectorAll(".o_domain_delete_node_button");
+        await click(buttons[buttons.length - 1]);
+        buttons = target.querySelectorAll(".o_domain_delete_node_button");
+        await click(buttons[buttons.length - 1]);
+        assert.strictEqual(
+            target.querySelector(".o_domain_debug_input").value,
+            `["&", ("bar", "=", True), ("id", "=", 1)]`,
+            "the domain input should contain a domain with 'bar' and 'id'"
+        );
+    });
+
+    QUnit.test("building a domain with a datetime", async (assert) => {
+        assert.expect(2);
+
+        // Create the domain selector and its mock environment
+        await mount(DomainSelector, target, {
+            env,
+            props: {
+                resModel: "partner",
+                value: `[("datetime", "=", "2017-03-27 15:42:00")]`,
+                readonly: false,
+                update: (newValue) => {
+                    assert.notStrictEqual(
+                        newValue,
+                        `[("datetime", "=", "2017-03-27 15:42:00")]`,
+                        "datepicker value should have changed"
+                    );
+                },
+            },
+        });
+
+        // Check that there is a datepicker to choose the date
+        assert.containsOnce(target, ".o_datepicker", "there should be a datepicker");
+        await click(target, ".o_datepicker_input");
+
+        await click(
+            document.body.querySelector(
+                `.bootstrap-datetimepicker-widget :not(.today)[data-action="selectDay"]`
+            )
+        );
+        await click(
+            document.body.querySelector(`.bootstrap-datetimepicker-widget a[data-action="close"]`)
+        );
+    });
+
+    QUnit.test("building a domain with a m2o without following the relation", async (assert) => {
+        assert.expect(1);
+
+        // Create the domain selector and its mock environment
+        await mount(DomainSelector, target, {
+            env,
+            props: {
+                resModel: "partner",
+                value: `[("product_id", "ilike", 1)]`,
+                readonly: false,
+                isDebugMode: true,
+                update: (newValue) => {
+                    assert.strictEqual(
+                        newValue,
+                        `[("product_id", "ilike", "pad")]`,
+                        "string should have been allowed as m2o value"
+                    );
+                },
+            },
+        });
+
+        const input = target.querySelector(".o_domain_leaf_value_input");
+        input.value = "pad";
+        await triggerEvent(input, null, "change");
+    });
+
+    QUnit.test("editing a domain with `parent` key", async (assert) => {
+        assert.expect(1);
+
+        // Create the domain selector and its mock environment
+        await mount(DomainSelector, target, {
+            env,
+            props: {
+                resModel: "product",
+                value: `[("name", "=", parent.foo)]`,
+                readonly: false,
+                isDebugMode: true,
+            },
+        });
+        assert.strictEqual(
+            target.lastElementChild.innerHTML,
+            "This domain is not supported.",
+            "an error message should be displayed because of the `parent` key"
+        );
+    });
+
+    QUnit.test("creating a domain with a default option", async (assert) => {
+        assert.expect(1);
+
+        // Create the domain selector and its mock environment
+        await mount(DomainSelector, target, {
+            env,
+            props: {
+                resModel: "partner",
+                value: "[]",
+                readonly: false,
+                isDebugMode: true,
+                defaultLeafValue: ["foo", "=", "kikou"],
+                update: (newValue) => {
+                    assert.strictEqual(
+                        newValue,
+                        `[("foo", "=", "kikou")]`,
+                        "the domain input should contain the default domain"
+                    );
+                },
+            },
+        });
+
+        // Clicking on the button should add a visible field selector in the
+        // widget so that the user can change the field chain
+        await click(target, ".o_domain_add_first_node_button");
+    });
+
+    QUnit.test("edit a domain with the debug textarea", async (assert) => {
+        assert.expect(5);
+
+        let newValue;
+
+        class Parent extends Component {
+            setup() {
+                this.value = `[("product_id", "ilike", 1)]`;
+            }
+            onUpdate(value, fromDebug) {
+                assert.strictEqual(value, newValue);
+                assert.ok(fromDebug);
+            }
+        }
+        Parent.components = { DomainSelector };
+        Parent.template = xml`
+            <DomainSelector
+                value="value"
+                resModel="'partner'"
+                readonly="false"
+                isDebugMode="true"
+                update="(...args) => this.onUpdate(...args)"
+            />
+        `;
+        // Create the domain selector and its mock environment
+        await mount(Parent, target, { env });
+
+        assert.containsOnce(
+            target,
+            ".o_domain_node.o_domain_leaf",
+            "should have a single domain node"
+        );
+        newValue = `
+[
+    ['product_id', 'ilike', 1],
+    ['id', '=', 0]
+]`;
+        const input = target.querySelector(".o_domain_debug_input");
+        input.value = newValue;
+        await triggerEvent(input, null, "change");
+        assert.strictEqual(
+            target.querySelector(".o_domain_debug_input").value,
+            newValue,
+            "the domain should not have been formatted"
+        );
+        assert.containsOnce(
+            target,
+            ".o_domain_node.o_domain_leaf",
+            "should still have a single domain node"
+        );
+    });
+});
diff --git a/addons/web/static/tests/core/model_field_selector_tests.js b/addons/web/static/tests/core/model_field_selector_tests.js
new file mode 100644
index 00000000000..8f0fcea37ef
--- /dev/null
+++ b/addons/web/static/tests/core/model_field_selector_tests.js
@@ -0,0 +1,392 @@
+/** @odoo-module **/
+
+import { ModelFieldSelector } from "@web/core/model_field_selector/model_field_selector";
+import { MainComponentsContainer } from "@web/core/main_components_container";
+import { ormService } from "@web/core/orm_service";
+import { popoverService } from "@web/core/popover/popover_service";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
+import { makeTestEnv } from "../helpers/mock_env";
+import { click, getFixture, triggerEvent, mount } from "../helpers/utils";
+import { makeFakeLocalizationService } from "../helpers/mock_services";
+
+const { Component, xml } = owl;
+
+let env;
+let target;
+let fieldSelector;
+
+QUnit.module("Components", (hooks) => {
+    hooks.beforeEach(async () => {
+        const serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: { string: "Foo", type: "char", searchable: true },
+                        bar: { string: "Bar", type: "boolean", searchable: true },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        { id: 1, foo: "yop", bar: true, product_id: 37 },
+                        { id: 2, foo: "blip", bar: true, product_id: false },
+                        { id: 4, foo: "abc", bar: false, product_id: 41 },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        { id: 37, display_name: "xphone" },
+                        { id: 41, display_name: "xpad" },
+                    ],
+                },
+            },
+        };
+
+        registry.category("services").add("popover", popoverService);
+        registry.category("services").add("orm", ormService);
+        registry.category("services").add("localization", makeFakeLocalizationService());
+        registry.category("services").add("ui", uiService);
+
+        env = await makeTestEnv({ serverData });
+        target = getFixture();
+
+        await mount(MainComponentsContainer, target, { env });
+    });
+
+    QUnit.module("ModelFieldSelector");
+
+    QUnit.test("creating a field chain from scratch", async (assert) => {
+        assert.expect(14);
+
+        function getValueFromDOM(el) {
+            return [...el.querySelectorAll(".o_field_selector_chain_part")]
+                .map((part) => part.textContent.trim())
+                .join(" -> ");
+        }
+
+        class Parent extends Component {
+            setup() {
+                this.fieldName = "";
+            }
+            onUpdate(value) {
+                this.fieldName = value;
+                this.render();
+            }
+        }
+        Parent.components = { ModelFieldSelector };
+        Parent.template = xml`
+            <ModelFieldSelector
+                readonly="false"
+                resModel="'partner'"
+                fieldName="fieldName"
+                isDebugMode="true"
+                update="(value) => this.onUpdate(value)"
+            />
+        `;
+
+        // Create the field selector and its mock environment
+        fieldSelector = await mount(Parent, target, { env, props: {} });
+
+        // Focusing the field selector input should open a field selector popover
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // The field selector popover should contain the list of "partner"
+        // fields. "Bar" should be among them.
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_item").textContent,
+            "Bar",
+            "field selector popover should contain the 'Bar' field"
+        );
+
+        // Clicking the "Bar" field should close the popover and set the field
+        // chain to "bar" as it is a basic field
+        await click(target.querySelector(".o_field_selector_popover .o_field_selector_item"));
+        assert.containsNone(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be closed now"
+        );
+        assert.strictEqual(
+            getValueFromDOM(target),
+            "Bar",
+            "field selector value should be displayed with a 'Bar' tag"
+        );
+        assert.strictEqual(
+            fieldSelector.fieldName,
+            "bar",
+            "the selected field should be correctly set"
+        );
+
+        // Focusing the input again should open the same popover
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // The field selector popover should contain the list of "partner"
+        // fields. "Product" should be among them.
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_relation_icon",
+            "field selector popover should contain the 'Product' field"
+        );
+
+        // Clicking on the "Product" field should update the popover to show
+        // the product fields (so only "Product Name" should be there)
+        await click(
+            target.querySelector(".o_field_selector_popover .o_field_selector_relation_icon")
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            "there should be only one field proposition for 'product' model"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_item").textContent,
+            "Product Name",
+            "the name of the only suggestion should be 'Product Name'"
+        );
+
+        // Clicking on "Product Name" should close the popover and set the chain
+        // to "product_id.name"
+        await click(target.querySelector(".o_field_selector_popover .o_field_selector_item"));
+        assert.containsNone(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be closed now"
+        );
+        assert.strictEqual(
+            getValueFromDOM(target),
+            "Product -> Product Name",
+            "field selector value should be displayed with two tags: 'Product' and 'Product Name'"
+        );
+
+        // Remove the current selection and recreate it again
+        await click(target, ".o_field_selector");
+        await click(target, ".o_field_selector_prev_page");
+        await click(target, ".o_field_selector_close");
+
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_relation_icon",
+            "field selector popover should contain the 'Product' field"
+        );
+
+        await click(
+            target.querySelector(".o_field_selector_popover .o_field_selector_relation_icon")
+        );
+        await click(target.querySelector(".o_field_selector_popover .o_field_selector_item"));
+        assert.containsNone(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be closed now"
+        );
+        assert.strictEqual(
+            getValueFromDOM(target),
+            "Product -> Product Name",
+            "field selector value should be displayed with two tags: 'Product' and 'Product Name'"
+        );
+    });
+
+    QUnit.test("default field chain should set the page data correctly", async (assert) => {
+        assert.expect(3);
+
+        // Create the field selector and its mock environment
+        // passing 'product_id' as a prefilled field-chain
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                fieldName: "product_id",
+                resModel: "partner",
+                isDebugMode: true,
+            },
+        });
+
+        // Focusing the field selector input should open a field selector popover
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // The field selector popover should contain the list of "product"
+        // fields. "Product Name" should be among them.
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            "there should be only one field proposition for 'product' model"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_item").textContent,
+            "Product Name",
+            "the name of the only suggestion should be 'Product Name'"
+        );
+    });
+
+    QUnit.test("use the filter option", async (assert) => {
+        assert.expect(2);
+
+        // Create the field selector and its mock environment
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                fieldName: "",
+                resModel: "partner",
+                filter: (field) => field.type === "many2one",
+            },
+        });
+
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            "there should only be one element"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_page").textContent,
+            "Product",
+            "the available field should be the many2one"
+        );
+    });
+
+    QUnit.test("default `showSearchInput` option", async (assert) => {
+        assert.expect(6);
+
+        // Create the field selector and its mock environment
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                fieldName: "",
+                resModel: "partner",
+            },
+        });
+
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_search",
+            "there should be a search input"
+        );
+
+        // without search
+        assert.containsN(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            3,
+            "there should be three available fields"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_page").textContent,
+            "BarFooProduct",
+            "the available field should be correct"
+        );
+
+        const input = target.querySelector(
+            ".o_field_selector_popover .o_field_selector_search input"
+        );
+        input.value = "xx";
+        await triggerEvent(input, null, "input");
+        assert.containsNone(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            "there shouldn't be any element"
+        );
+
+        input.value = "Pro";
+        await triggerEvent(input, null, "input");
+        assert.containsOnce(
+            target,
+            ".o_field_selector_popover .o_field_selector_item",
+            "there should only be one element"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_popover .o_field_selector_page").textContent,
+            "Product",
+            "the available field should be the Product"
+        );
+    });
+
+    QUnit.test("false `showSearchInput` option", async (assert) => {
+        assert.expect(1);
+
+        // Create the field selector and its mock environment
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                showSearchInput: false,
+                fieldName: "",
+                resModel: "partner",
+            },
+        });
+
+        await click(target, ".o_field_selector");
+        assert.containsNone(
+            target,
+            ".o_field_selector_popover .o_field_selector_search",
+            "there should be no search input"
+        );
+    });
+
+    QUnit.test("create a field chain with value 1 i.e. TRUE_LEAF", async (assert) => {
+        assert.expect(1);
+
+        //create the field selector with domain value ["1"]
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                showSearchInput: false,
+                fieldName: "1",
+                resModel: "partner",
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_chain_part").textContent.trim(),
+            "1",
+            "field name value should be 1."
+        );
+    });
+
+    QUnit.test("create a field chain with value 0 i.e. FALSE_LEAF", async (assert) => {
+        assert.expect(1);
+
+        //create the field selector with domain value ["0"]
+        await mount(ModelFieldSelector, target, {
+            env,
+            props: {
+                readonly: false,
+                showSearchInput: false,
+                fieldName: "0",
+                resModel: "partner",
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_selector_chain_part").textContent.trim(),
+            "0",
+            "field name value should be 0."
+        );
+    });
+});

From bbc0f0c76e21875a84d56ae532f6d53334e4973b Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 23 Jun 2022 07:40:21 +0000
Subject: [PATCH 17/50] [IMP] web: add ColorList component

This commit introduces a ColorList component which allows to
choose a color from a list. There are several usecases for such
a component in Odoo (e.g. ColorPicker, Many2ManyTags, KanbanRecord).

Part-of: odoo/odoo#92475
---
 .../static/src/core/colorlist/colorlist.js    |  54 +++++++++
 .../static/src/core/colorlist/colorlist.scss  |  39 +++++++
 .../static/src/core/colorlist/colorlist.xml   |  15 +++
 .../web/static/tests/core/colorlist_tests.js  | 107 ++++++++++++++++++
 4 files changed, 215 insertions(+)
 create mode 100644 addons/web/static/src/core/colorlist/colorlist.js
 create mode 100644 addons/web/static/src/core/colorlist/colorlist.scss
 create mode 100644 addons/web/static/src/core/colorlist/colorlist.xml
 create mode 100644 addons/web/static/tests/core/colorlist_tests.js

diff --git a/addons/web/static/src/core/colorlist/colorlist.js b/addons/web/static/src/core/colorlist/colorlist.js
new file mode 100644
index 00000000000..28ffecd3032
--- /dev/null
+++ b/addons/web/static/src/core/colorlist/colorlist.js
@@ -0,0 +1,54 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+
+const { Component, useRef, useState, useExternalListener } = owl;
+
+export class ColorList extends Component {
+    setup() {
+        this.colorlistRef = useRef("colorlist");
+        this.state = useState({ isExpanded: false });
+        useExternalListener(window, "click", this.onOutsideClick);
+    }
+    get colors() {
+        return this.constructor.COLORS;
+    }
+    onColorSelected(id) {
+        this.props.onColorSelected(id);
+        this.state.isExpanded = false;
+    }
+    onOutsideClick(ev) {
+        if (this.colorlistRef.el.contains(ev.target)) {
+            return;
+        }
+        this.state.isExpanded = false;
+    }
+    onToggle(focus = true) {
+        this.state.isExpanded = !this.state.isExpanded;
+        if (focus) {
+            this.colorlistRef.el.firstElementChild.focus();
+        }
+    }
+}
+
+ColorList.COLORS = [
+    _lt("No color"),
+    _lt("Red"),
+    _lt("Orange"),
+    _lt("Yellow"),
+    _lt("Light blue"),
+    _lt("Dark purple"),
+    _lt("Salmon pink"),
+    _lt("Medium blue"),
+    _lt("Dark blue"),
+    _lt("Fuchsia"),
+    _lt("Green"),
+    _lt("Purple"),
+];
+ColorList.template = "web.ColorList";
+ColorList.props = {
+    colors: Array,
+    isExpanded: { type: Boolean, optional: true },
+    onColorSelected: Function,
+    togglerColor: { type: Number, optional: true },
+};
diff --git a/addons/web/static/src/core/colorlist/colorlist.scss b/addons/web/static/src/core/colorlist/colorlist.scss
new file mode 100644
index 00000000000..865c4e858fe
--- /dev/null
+++ b/addons/web/static/src/core/colorlist/colorlist.scss
@@ -0,0 +1,39 @@
+.o_colorlist {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    max-width: 100%;
+    gap: 10px;
+
+    button {
+        padding: 0;
+        border: 1px solid white;
+        box-shadow: 0 0 0 1px #c9ccd2;
+        width: 22px;
+        height: 17px;
+    }
+}
+
+// Set all the colors but the "no-color" one
+@for $size from 2 through length($o-colors) {
+    .o_colorlist_item_color_#{$size - 1} {
+        background-color: nth($o-colors, $size);
+    }
+}
+
+// Set the "no-color", a red bar on white background
+.o_colorlist_item_color_0 {
+    position: relative;
+    &::before {
+        content: "";
+        @include o-position-absolute(-2px, $left: 10px);
+        display: block;
+        width: 1px;
+        height: 19px;
+        transform: rotate(45deg);
+        background-color: red;
+    }
+    &::after {
+        background-color: white;
+    }
+}
diff --git a/addons/web/static/src/core/colorlist/colorlist.xml b/addons/web/static/src/core/colorlist/colorlist.xml
new file mode 100644
index 00000000000..33a7abcbe99
--- /dev/null
+++ b/addons/web/static/src/core/colorlist/colorlist.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ColorList" owl="1">
+        <div class="o_colorlist" aria-atomic="true" t-ref="colorlist">
+            <t t-if="props.togglerColor !== undefined and !state.isExpanded">
+                <button t-on-click.prevent.stop="onToggle" role="menuitem" t-att-title="colors[props.togglerColor]" t-att-data-color="props.togglerColor" t-att-aria-label="colors[props.togglerColor]" t-attf-class="{{'btn o_colorlist_toggler o_colorlist_item_color_' + props.togglerColor }}"/>
+            </t>
+            <t t-else="" t-foreach="props.colors" t-as="colorId" t-key="colorId">
+                <button t-on-click.prevent.stop="() => this.onColorSelected(colorId)" role="menuitem" t-att-title="colors[colorId]" t-att-data-color="colorId" t-att-aria-label="colors[colorId]" t-attf-class="{{'btn o_colorlist_item_color_' + colorId }}"/>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/core/colorlist_tests.js b/addons/web/static/tests/core/colorlist_tests.js
new file mode 100644
index 00000000000..3d8d2ae85aa
--- /dev/null
+++ b/addons/web/static/tests/core/colorlist_tests.js
@@ -0,0 +1,107 @@
+/** @odoo-module **/
+
+import { ColorList } from "@web/core/colorlist/colorlist";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
+import { makeTestEnv } from "../helpers/mock_env";
+import { click, getFixture, mount } from "../helpers/utils";
+
+const { Component, xml } = owl;
+const serviceRegistry = registry.category("services");
+
+let target;
+
+/**
+ * @param {typeof ColorList} Picker
+ * @param {Object} props
+ * @returns {Promise<ColorList>}
+ */
+async function mountComponent(Picker, props) {
+    serviceRegistry.add("ui", uiService);
+    target = getFixture();
+
+    class Parent extends Component {}
+    Parent.template = xml/* xml */ `
+        <t t-component="props.Picker" t-props="props.props"/>
+        <div class="outsideDiv"/>
+    `;
+
+    const env = await makeTestEnv();
+    if (!props.onColorSelected) {
+        props.onColorSelected = () => {};
+    }
+    const parent = await mount(Parent, target, { env, props: { Picker, props } });
+    return parent;
+}
+
+QUnit.module("Components", () => {
+    QUnit.module("ColorList");
+
+    QUnit.test("basic rendering", async function (assert) {
+        assert.expect(4);
+
+        await mountComponent(ColorList, {
+            colors: [0, 9],
+        });
+
+        assert.containsOnce(target, ".o_colorlist");
+        assert.containsN(target, "button", 2, "two buttons are available");
+        const secondBtn = target.querySelectorAll(".o_colorlist button")[1];
+        assert.strictEqual(
+            secondBtn.attributes.title.value,
+            "Fuchsia",
+            "second button color is Fuchsia"
+        );
+        assert.hasClass(
+            secondBtn,
+            "o_colorlist_item_color_9",
+            "second button has the corresponding class"
+        );
+    });
+
+    QUnit.test("toggler is available if togglerColor props is given", async function (assert) {
+        assert.expect(9);
+
+        const togglerColorId = 0;
+        await mountComponent(ColorList, {
+            colors: [4, 5, 6],
+            togglerColor: togglerColorId,
+            onColorSelected: (colorId) => assert.step("color #" + colorId + " is selected"),
+        });
+
+        assert.containsOnce(target, ".o_colorlist");
+        assert.containsOnce(
+            target,
+            "button.o_colorlist_toggler",
+            "only the toggler button is available"
+        );
+        assert.hasClass(
+            target.querySelector(".o_colorlist button"),
+            "o_colorlist_item_color_" + togglerColorId,
+            "toggler has the right class"
+        );
+
+        await click(target.querySelector(".o_colorlist button"));
+
+        assert.containsNone(
+            target,
+            "button.o_colorlist_toggler",
+            "toggler button is no longer visible"
+        );
+        assert.containsN(target, "button", 3, "three buttons are available");
+
+        await click(target.querySelector(".outsideDiv"));
+        assert.containsN(target, "button", 1, "only one button is available");
+        assert.containsOnce(
+            target,
+            "button.o_colorlist_toggler",
+            "colorlist has been closed and toggler is visible"
+        );
+
+        // reopen the colorlist and select a color
+        await click(target.querySelector(".o_colorlist_toggler"));
+        await click(target.querySelectorAll(".o_colorlist button")[2]);
+
+        assert.verifySteps(["color #6 is selected"]);
+    });
+});

From 37271102be920fcc5b9ead8b64105839d0e34e70 Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Thu, 23 Jun 2022 07:06:56 +0000
Subject: [PATCH 18/50] [IMP] web: dropdown: various small changes

1) Force the cursor: pointer for dropdown items containing a
   checkbox (e.g. optional field dropdown in list views)
2) Always stop click events in dropdown togglers as they are
   handled
3) Add a test for the "tooltip" props

Part-of: odoo/odoo#92475
---
 .../static/src/core/dropdown/dropdown.scss    |  4 +++-
 .../web/static/src/core/dropdown/dropdown.xml |  2 +-
 .../src/core/dropdown/dropdown_item.xml       |  2 +-
 .../web/static/tests/core/dropdown_tests.js   | 19 ++++++++++++++++++-
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index d75e89f2e94..328aff055ac 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -12,7 +12,9 @@
 .dropdown-item:not(.disabled):not(:disabled) {
   // Needed 'cause <DropdownItem> generate <span> html tags that for browsers are
   // normally not clickable.
-  cursor: pointer;
+  &,label {
+    cursor: pointer;
+  }
 }
 
 button.dropdown-toggle {
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index 7d8021175a8..b442305bae8 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -19,7 +19,7 @@
           {{props.togglerClass || ''}}
           {{parentDropdown ? 'dropdown-item' : ''}}
         "
-        t-on-click="onTogglerClick"
+        t-on-click.stop="onTogglerClick"
         t-on-mouseenter="onTogglerMouseEnter"
         t-att-title="props.title"
         t-att-data-hotkey="props.hotkey"
diff --git a/addons/web/static/src/core/dropdown/dropdown_item.xml b/addons/web/static/src/core/dropdown/dropdown_item.xml
index 6dc718b8e0c..38d7c332393 100644
--- a/addons/web/static/src/core/dropdown/dropdown_item.xml
+++ b/addons/web/static/src/core/dropdown/dropdown_item.xml
@@ -7,7 +7,7 @@
       t-att-href="props.href"
       class="dropdown-item"
       t-att-class="props.class"
-      t-on-click="onClick"
+      t-on-click.stop="onClick"
       t-att-title="props.title"
       t-att-data-hotkey="props.hotkey"
       t-att="dataAttributes"
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index 445813042ec..77b21b11920 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -19,6 +19,7 @@ import {
     patchWithCleanup,
     triggerHotkey,
 } from "../helpers/utils";
+import { makeParent } from "./tooltip/tooltip_service_tests";
 
 const { App, Component, xml } = owl;
 const serviceRegistry = registry.category("services");
@@ -177,7 +178,7 @@ QUnit.module("Components", ({ beforeEach }) => {
             close() {
                 assert.step("dropdown will close");
                 this._super();
-            }
+            },
         });
         class Parent extends Component {
             clicked() {
@@ -986,4 +987,20 @@ QUnit.module("Components", ({ beforeEach }) => {
             "My tooltip"
         );
     });
+
+    QUnit.test("Dropdown with a tooltip", async (assert) => {
+        assert.expect(2);
+
+        class MyComponent extends owl.Component {}
+        MyComponent.template = owl.xml`
+            <Dropdown tooltip="'My tooltip'">
+                <DropdownItem/>
+            </Dropdown>`;
+        MyComponent.components = { Dropdown };
+
+        await makeParent(MyComponent);
+        await mouseEnter(target, "button.dropdown-toggle");
+        assert.containsOnce(target, ".o-tooltip");
+        assert.strictEqual(target.querySelector(".o-tooltip").textContent, "My tooltip");
+    });
 });

From aa97c19814c8b9cd02b83ad4e3ef2261c054ced3 Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Thu, 23 Jun 2022 07:06:45 +0000
Subject: [PATCH 19/50] [IMP] web: add hotkey service options

This commit adds two options to the hotkey service to improve its
usability in some cases:
- `area` which is a function that returns an HTMLElement that restricts
  the operating area for an hotkey registration
- `validate` which is a function that returns a boolean that tells if
  the hotkey registration's callback should be called or not

Some typings adaptations were made in:
- @web/core/commands/command_palette
- @web/core/commands/command_service
- @web/core/utils/ui

Part-of: odoo/odoo#92475
---
 .../src/core/commands/command_palette.js      |   2 +-
 .../src/core/commands/command_service.js      |   5 +-
 .../static/src/core/hotkeys/hotkey_hook.js    |  11 +-
 .../static/src/core/hotkeys/hotkey_service.js | 167 +++++++----
 addons/web/static/src/core/utils/ui.js        |   8 +-
 .../core/hotkeys/hotkey_service_tests.js      | 279 ++++++++++++++++--
 6 files changed, 366 insertions(+), 106 deletions(-)

diff --git a/addons/web/static/src/core/commands/command_palette.js b/addons/web/static/src/core/commands/command_palette.js
index ba403c4d6c6..ed27aaa2f77 100644
--- a/addons/web/static/src/core/commands/command_palette.js
+++ b/addons/web/static/src/core/commands/command_palette.js
@@ -45,7 +45,7 @@ const FUZZY_NAMESPACES = ["default"];
 
 /**
  * @typedef {{
- *  configByNamespace?: {[namespace]: NamespaceConfig};
+ *  configByNamespace?: {[namespace: string]: NamespaceConfig};
  *  FooterComponent?: Component;
  *  providers: Provider[];
  *  searchValue?: string;
diff --git a/addons/web/static/src/core/commands/command_service.js b/addons/web/static/src/core/commands/command_service.js
index 2db5be5bdae..c2c15b272b0 100644
--- a/addons/web/static/src/core/commands/command_service.js
+++ b/addons/web/static/src/core/commands/command_service.js
@@ -18,11 +18,8 @@ const { Component, xml } = owl;
  */
 
 /**
- * @typedef {{
- *  activeElement?: HTMLElement;
+ * @typedef {import("../hotkeys/hotkey_service").HotkeyOptions & {
  *  category?: string;
- *  global?: boolean;
- *  hotkey?: string;
  * }} CommandOptions
  */
 
diff --git a/addons/web/static/src/core/hotkeys/hotkey_hook.js b/addons/web/static/src/core/hotkeys/hotkey_hook.js
index 1ab5a2511c4..bd8e19dfbe3 100644
--- a/addons/web/static/src/core/hotkeys/hotkey_hook.js
+++ b/addons/web/static/src/core/hotkeys/hotkey_hook.js
@@ -9,15 +9,8 @@ const { useEffect } = owl;
  * when the caller component will mount/unmount.
  *
  * @param {string} hotkey
- * @param {()=>void} callback
- * @param {Object} options additional options
- * @param {boolean} [options.allowRepeat=false]
- *  allow registration to perform multiple times when hotkey is held down
- * @param {boolean} [options.bypassEditableProtection=false]
- *  if true the hotkey service will call this registration
- *  even if an editable element is focused
- * @param {boolean} [options.global=false]
- *  allow registration to perform no matter the UI active element
+ * @param {import("./hotkey_service").HotkeyCallback} callback
+ * @param {import("./hotkey_service").HotkeyOptions} [options] additional options
  */
 export function useHotkey(hotkey, callback, options = {}) {
     const hotkeyService = useService("hotkey");
diff --git a/addons/web/static/src/core/hotkeys/hotkey_service.js b/addons/web/static/src/core/hotkeys/hotkey_service.js
index 3ecf33357f1..c6301aead52 100644
--- a/addons/web/static/src/core/hotkeys/hotkey_service.js
+++ b/addons/web/static/src/core/hotkeys/hotkey_service.js
@@ -5,6 +5,29 @@ import { registry } from "../registry";
 import { browser } from "../browser/browser";
 import { getVisibleElements } from "../utils/ui";
 
+/**
+ * @typedef {(context: { area: HTMLElement, target: EventTarget }) => void} HotkeyCallback
+ *
+ * @typedef {Object} HotkeyOptions
+ * @property {boolean} [allowRepeat]
+ *  allow registration to perform multiple times when hotkey is held down
+ * @property {boolean} [bypassEditableProtection]
+ *  if true the hotkey service will call this registration
+ *  even if an editable element is focused
+ * @property {boolean} [global]
+ *  allow registration to perform no matter the UI active element
+ * @property {() => HTMLElement} [area]
+ *  adds a restricted operating area for this hotkey
+ * @property {(target: EventTarget) => boolean} [validate]
+ *  adds a validation before calling the hotkey registration's callback
+ *
+ * @typedef {HotkeyOptions & {
+ *  hotkey: string,
+ *  callback: HotkeyCallback,
+ *  activeElement: HTMLElement,
+ * }} HotkeyRegistration
+ */
+
 const ALPHANUM_KEYS = "abcdefghijklmnopqrstuvwxyz0123456789".split("");
 const NAV_KEYS = [
     "arrowleft",
@@ -19,16 +42,56 @@ const NAV_KEYS = [
     "enter",
     "tab",
     "delete",
+    "space",
 ];
 const MODIFIERS = ["alt", "control", "shift"];
 const AUTHORIZED_KEYS = [...ALPHANUM_KEYS, ...NAV_KEYS, "escape"];
 
+/**
+ * Get the actual hotkey being pressed.
+ *
+ * @param {KeyboardEvent} ev
+ * @returns {string} the active hotkey, in lowercase
+ */
+export function getActiveHotkey(ev) {
+    const hotkey = [];
+
+    // ------- Modifiers -------
+    // Modifiers are pushed in ascending order to the hotkey.
+    if (isMacOS() ? ev.ctrlKey : ev.altKey) {
+        hotkey.push("alt");
+    }
+    if (isMacOS() ? ev.metaKey : ev.ctrlKey) {
+        hotkey.push("control");
+    }
+    if (ev.shiftKey) {
+        hotkey.push("shift");
+    }
+
+    // ------- Key -------
+    let key = ev.key.toLowerCase();
+    // Identify if the user has tapped on the number keys above the text keys.
+    if (ev.code && ev.code.indexOf("Digit") === 0) {
+        key = ev.code.slice(-1);
+    }
+    // Prefer physical keys for non-latin keyboard layout.
+    if (!AUTHORIZED_KEYS.includes(key) && ev.code && ev.code.indexOf("Key") === 0) {
+        key = ev.code.slice(-1).toLowerCase();
+    }
+    // Make sure we do not duplicate a modifier key
+    if (!MODIFIERS.includes(key)) {
+        hotkey.push(key);
+    }
+    return hotkey.join("+");
+}
+
 export const hotkeyService = {
     dependencies: ["ui"],
     // Be aware that all odoo hotkeys are designed with this modifier in mind,
     // so changing the overlay modifier may conflict with some shortcuts.
     overlayModifier: "alt",
     start(env, { ui }) {
+        /** @type {Map<number, HotkeyRegistration>} */
         const registrations = new Map();
         let nextToken = 0;
         let overlaysVisible = false;
@@ -111,6 +174,7 @@ export const hotkeyService = {
                 activeElement,
                 hotkey,
                 isRepeated: event.repeat,
+                target: event.target,
                 shouldProtectEditable,
             };
             const dispatched = dispatch(infos);
@@ -140,33 +204,60 @@ export const hotkeyService = {
          *  activeElement: HTMLElement,
          *  hotkey: string,
          *  isRepeated: boolean,
+         *  target: EventTarget,
          *  shouldProtectEditable: boolean,
          * }} infos
          * @returns {boolean} true if has been dispatched
          */
         function dispatch(infos) {
-            const { activeElement, hotkey, isRepeated, shouldProtectEditable } = infos;
+            const { activeElement, hotkey, isRepeated, target, shouldProtectEditable } = infos;
 
             // Prepare registrations and the common filter
             const reversedRegistrations = Array.from(registrations.values()).reverse();
             const domRegistrations = getDomRegistrations(hotkey, activeElement);
             const allRegistrations = reversedRegistrations.concat(domRegistrations);
 
-            // Dispatch actual hotkey to first matching registration
-            const match = allRegistrations.find(
+            // Find all candidates
+            const candidates = allRegistrations.filter(
                 (reg) =>
                     reg.hotkey === hotkey &&
                     (reg.allowRepeat || !isRepeated) &&
                     (reg.bypassEditableProtection || !shouldProtectEditable) &&
-                    (reg.global || reg.activeElement === activeElement)
+                    (reg.global || reg.activeElement === activeElement) &&
+                    (!reg.validate || reg.validate(target)) &&
+                    (!reg.area ||
+                        (target instanceof Node && reg.area() && reg.area().contains(target)))
             );
-            if (match) {
-                match.callback();
+
+            // First candidate
+            let winner = candidates.shift();
+            if (winner && winner.area) {
+                // If there is an area, find the closest one
+                for (const candidate of candidates) {
+                    if (candidate.area() && winner.area().contains(candidate.area())) {
+                        winner = candidate;
+                    }
+                }
+            }
+
+            // Dispatch actual hotkey to the matching registration
+            if (winner) {
+                winner.callback({
+                    area: winner.area && winner.area(),
+                    target,
+                });
                 return true;
             }
             return false;
         }
 
+        /**
+         * Get a list of registrations from the [data-hotkey] defined in the DOM
+         *
+         * @param {string} hotkey
+         * @param {HTMLElement} activeElement
+         * @returns {HotkeyRegistration[]}
+         */
         function getDomRegistrations(hotkey, activeElement) {
             const overlayModParts = hotkeyService.overlayModifier.split("+");
             if (!overlayModParts.every((el) => hotkey.includes(el))) {
@@ -194,7 +285,7 @@ export const hotkeyService = {
 
         /**
          * Add the hotkey overlays respecting the ui active element.
-         * @param {Element} activeElement
+         * @param {HTMLElement} activeElement
          */
         function addHotkeyOverlays(activeElement) {
             for (const el of getVisibleElements(activeElement, "[data-hotkey]:not(:disabled)")) {
@@ -247,57 +338,12 @@ export const hotkeyService = {
             overlaysVisible = false;
         }
 
-        /**
-         * Get the actual hotkey being pressed.
-         *
-         * @param {KeyboardEvent} ev
-         * @returns {string} the active hotkey, in lowercase
-         */
-        function getActiveHotkey(ev) {
-            const hotkey = [];
-
-            // ------- Modifiers -------
-            // Modifiers are pushed in ascending order to the hotkey.
-            if (isMacOS() ? ev.ctrlKey : ev.altKey) {
-                hotkey.push("alt");
-            }
-            if (isMacOS() ? ev.metaKey : ev.ctrlKey) {
-                hotkey.push("control");
-            }
-            if (ev.shiftKey) {
-                hotkey.push("shift");
-            }
-
-            // ------- Key -------
-            let key = ev.key.toLowerCase();
-            // Identify if the user has tapped on the number keys above the text keys.
-            if (ev.code && ev.code.indexOf("Digit") === 0) {
-                key = ev.code.slice(-1);
-            }
-            // Prefer physical keys for non-latin keyboard layout.
-            if (!AUTHORIZED_KEYS.includes(key) && ev.code && ev.code.indexOf("Key") === 0) {
-                key = ev.code.slice(-1).toLowerCase();
-            }
-            // Make sure we do not duplicate a modifier key
-            if (!MODIFIERS.includes(key)) {
-                hotkey.push(key);
-            }
-            return hotkey.join("+");
-        }
-
         /**
          * Registers a new hotkey.
          *
          * @param {string} hotkey
-         * @param {()=>void} callback
-         * @param {Object} options additional options
-         * @param {boolean} [options.allowRepeat=false]
-         *  allow registration to perform multiple times when hotkey is held down
-         * @param {boolean} [options.bypassEditableProtection=false]
-         *  if true the hotkey service will call this registration
-         *  even if an editable element is focused
-         * @param {boolean} [options.global=false]
-         *  allow registration to perform no matter the UI active element
+         * @param {HotkeyCallback} callback
+         * @param {HotkeyOptions} [options]
          * @returns {number} registration token
          */
         function registerHotkey(hotkey, callback, options = {}) {
@@ -336,6 +382,7 @@ export const hotkeyService = {
 
             // Add registration
             const token = nextToken++;
+            /** @type {HotkeyRegistration} */
             const registration = {
                 hotkey: hotkey.toLowerCase(),
                 callback,
@@ -343,8 +390,9 @@ export const hotkeyService = {
                 allowRepeat: options && options.allowRepeat,
                 bypassEditableProtection: options && options.bypassEditableProtection,
                 global: options && options.global,
+                area: options && options.area,
+                validate: options && options.validate,
             };
-            registrations.set(token, registration);
 
             // Due to the way elements are mounted in the DOM by Owl (bottom-to-top),
             // we need to wait the next micro task tick to set the context owner of the registration.
@@ -352,6 +400,7 @@ export const hotkeyService = {
                 registration.activeElement = ui.activeElement;
             });
 
+            registrations.set(token, registration);
             return token;
         }
 
@@ -367,11 +416,8 @@ export const hotkeyService = {
         return {
             /**
              * @param {string} hotkey
-             * @param {() => void} callback
-             * @param {Object} options
-             * @param {boolean} [options.allowRepeat=false]
-             * @param {boolean} [options.bypassEditableProtection=false]
-             * @param {boolean} [options.global=false]
+             * @param {HotkeyCallback} callback
+             * @param {HotkeyOptions} [options]
              * @returns {() => void}
              */
             add(hotkey, callback, options = {}) {
@@ -391,3 +437,4 @@ export const hotkeyService = {
 };
 
 registry.category("services").add("hotkey", hotkeyService);
+/** @typedef {ReturnType<hotkeyService["start"]>} HotkeyService */
diff --git a/addons/web/static/src/core/utils/ui.js b/addons/web/static/src/core/utils/ui.js
index 79c7381ffe2..09740b0f4da 100644
--- a/addons/web/static/src/core/utils/ui.js
+++ b/addons/web/static/src/core/utils/ui.js
@@ -1,13 +1,15 @@
 /** @odoo-module **/
 
 /**
- * @param {Document} activeElement
- * @param {DOMString} selector
+ * @param {Element} activeElement
+ * @param {String} selector
  * @returns all selected and visible elements present in the activeElement
  */
 export function getVisibleElements(activeElement, selector) {
     const visibleElements = [];
-    for (const el of activeElement.querySelectorAll(selector)) {
+    /** @type {NodeListOf<HTMLElement>} */
+    const elements = activeElement.querySelectorAll(selector);
+    for (const el of elements) {
         const isVisible = el.offsetWidth > 0 && el.offsetHeight > 0;
         if (isVisible) {
             visibleElements.push(el);
diff --git a/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js b/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
index 78c425e9d31..907320a678b 100644
--- a/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
+++ b/addons/web/static/tests/core/hotkeys/hotkey_service_tests.js
@@ -16,7 +16,7 @@ import {
     triggerHotkey,
 } from "../../helpers/utils";
 
-const { Component, useState, xml } = owl;
+const { Component, useRef, useState, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let env;
@@ -242,18 +242,18 @@ QUnit.test("non-MacOS usability", async (assert) => {
 
     const hotkey = env.services.hotkey;
     const key = "q";
+    const commentEventAttrs = { key, bubbles: true };
 
     // On non-MacOS, ALT is NOT replaced by CONTROL key
     let removeHotkey = hotkey.add(`alt+${key}`, () => assert.step(`alt+${key}`));
     await nextTick();
-
-    let keydown = new KeyboardEvent("keydown", { key, altKey: true });
-    window.dispatchEvent(keydown);
+    let keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, altKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([`alt+${key}`]);
 
-    keydown = new KeyboardEvent("keydown", { key, ctrlKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, ctrlKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([]);
 
@@ -263,13 +263,13 @@ QUnit.test("non-MacOS usability", async (assert) => {
     removeHotkey = hotkey.add(`control+${key}`, () => assert.step(`control+${key}`));
     await nextTick();
 
-    keydown = new KeyboardEvent("keydown", { key, ctrlKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, ctrlKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([`control+${key}`]);
 
-    keydown = new KeyboardEvent("keydown", { key, metaKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, metaKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([]);
 
@@ -407,18 +407,19 @@ QUnit.test("MacOS usability", async (assert) => {
 
     const hotkey = env.services.hotkey;
     const key = "q";
+    const commentEventAttrs = { key, bubbles: true };
 
     // On MacOS, ALT is replaced by CONTROL key
     let removeHotkey = hotkey.add(`alt+${key}`, () => assert.step(`alt+${key}`));
     await nextTick();
 
-    let keydown = new KeyboardEvent("keydown", { key, altKey: true });
-    window.dispatchEvent(keydown);
+    let keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, altKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([]);
 
-    keydown = new KeyboardEvent("keydown", { key, ctrlKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, ctrlKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([`alt+${key}`]);
 
@@ -428,13 +429,13 @@ QUnit.test("MacOS usability", async (assert) => {
     removeHotkey = hotkey.add(`control+${key}`, () => assert.step(`control+${key}`));
     await nextTick();
 
-    keydown = new KeyboardEvent("keydown", { key, ctrlKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, ctrlKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([]);
 
-    keydown = new KeyboardEvent("keydown", { key, metaKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commentEventAttrs, metaKey: true });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([`control+${key}`]);
 
@@ -761,11 +762,12 @@ QUnit.test("protects editable elements", async (assert) => {
     const input = target.querySelector(".foo");
 
     assert.verifySteps([]);
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(["called"]);
 
-    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    input.focus();
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(
         [],
@@ -785,11 +787,12 @@ QUnit.test("protects editable elements: can bypassEditableProtection", async (as
     const input = target.querySelector(".foo");
 
     assert.verifySteps([]);
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(["called"]);
 
-    input.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    input.focus();
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(
         ["called"],
@@ -809,15 +812,17 @@ QUnit.test("protects editable elements: an editable can allow hotkeys", async (a
     const barInput = target.querySelector(".bar");
 
     assert.verifySteps([]);
-    document.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(["called"]);
 
-    fooInput.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    fooInput.focus();
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(["called"], "the callback gets called as the foo editable allows it");
 
-    barInput.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }));
+    barInput.focus();
+    triggerHotkey("ArrowLeft");
     await nextTick();
     assert.verifySteps(
         [],
@@ -829,17 +834,21 @@ QUnit.test("ignore numpad keys", async (assert) => {
     assert.expect(3);
 
     const key = "1";
+    const commonEventAttrs = {
+        altKey: true,
+        bubbles: true,
+    };
 
     env.services.hotkey.add(`alt+${key}`, () => assert.step(key));
     await nextTick();
 
-    let keydown = new KeyboardEvent("keydown", { key, code: "Numpad1", altKey: true });
-    window.dispatchEvent(keydown);
+    let keydown = new KeyboardEvent("keydown", { ...commonEventAttrs, key, code: "Numpad1" });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps([]);
 
-    keydown = new KeyboardEvent("keydown", { key: "&", code: "Digit1", altKey: true });
-    window.dispatchEvent(keydown);
+    keydown = new KeyboardEvent("keydown", { ...commonEventAttrs, key: "&", code: "Digit1" });
+    document.activeElement.dispatchEvent(keydown);
     await nextTick();
     assert.verifySteps(["1"]);
 });
@@ -874,3 +883,215 @@ QUnit.test("within iframes", async (assert) => {
     await nextTick();
     assert.verifySteps(["called"]);
 });
+
+QUnit.test("callback: received context", async (assert) => {
+    class A extends Component {
+        setup() {
+            useHotkey("a", (context) => {
+                assert.deepEqual(context, {
+                    area: undefined,
+                    target: document.activeElement,
+                });
+            });
+        }
+    }
+    A.template = xml``;
+
+    class B extends Component {
+        setup() {
+            useHotkey(
+                "b",
+                (context) => {
+                    assert.deepEqual(context, {
+                        area: target,
+                        target: target,
+                    });
+                },
+                { area: () => target }
+            );
+        }
+    }
+    B.template = xml``;
+
+    await mount(A, target, { env });
+    await mount(B, target, { env });
+    triggerHotkey("A");
+    triggerHotkey("B");
+    await nextTick();
+});
+
+QUnit.test("operating area can be restricted", async (assert) => {
+    class A extends Component {
+        setup() {
+            const areaRef = useRef("area");
+            useHotkey(
+                "space",
+                ({ area }) => {
+                    assert.step("RGNTDJÛ!");
+                    assert.strictEqual(area, target.querySelector(".two"));
+                },
+                {
+                    area: () => areaRef.el,
+                }
+            );
+        }
+    }
+    A.template = xml`
+        <div class="one" tabindex="0"/>
+        <div class="two" tabindex="0" t-ref="area"/>
+    `;
+    await mount(A, target, { env });
+
+    target.querySelector(".one").focus();
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps([]);
+
+    target.querySelector(".two").focus();
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps(["RGNTDJÛ!"]);
+});
+
+QUnit.test("operating area and UI active element", async (assert) => {
+    class UIOwnershipTakerComponent extends Component {
+        setup() {
+            useActiveElement("bouh");
+        }
+    }
+    UIOwnershipTakerComponent.template = xml`<p class="owner" t-ref="bouh">bouh</p>`;
+    class C extends Component {
+        setup() {
+            this.state = useState({ foo: false });
+            const areaRef = useRef("area");
+            useHotkey(
+                "space",
+                ({ area }) => {
+                    assert.step("RGNTDJÛ!");
+                    assert.strictEqual(area, target.querySelector(".two"));
+                },
+                {
+                    area: () => areaRef.el,
+                }
+            );
+            useHotkey(
+                "backspace",
+                ({ area }) => {
+                    assert.step("RGNTDJÛ! (global)");
+                    assert.strictEqual(area, target.querySelector(".two"));
+                },
+                {
+                    area: () => areaRef.el,
+                    global: true,
+                }
+            );
+        }
+    }
+    C.components = { UIOwnershipTakerComponent };
+    C.template = xml`
+        <main>
+            <UIOwnershipTakerComponent t-if="state.foo" />
+            <div class="one" tabindex="0"/>
+            <div class="two" tabindex="0" t-ref="area"/>
+        </main>
+    `;
+    const comp = await mount(C, target, { env });
+    assert.strictEqual(env.services.ui.activeElement, document);
+
+    // Show the UIOwnershipTaker
+    comp.state.foo = true;
+    await nextTick();
+    assert.hasClass(env.services.ui.activeElement, "owner");
+
+    // Trigger hotkeys from the 'one'
+    target.querySelector(".one").focus();
+    triggerHotkey("Space");
+    triggerHotkey("BackSpace");
+    await nextTick();
+    assert.verifySteps([]);
+
+    // Trigger hotkeys from the 'two'
+    target.querySelector(".two").focus();
+    triggerHotkey("Space");
+    triggerHotkey("BackSpace");
+    await nextTick();
+    assert.verifySteps(["RGNTDJÛ! (global)"]);
+});
+
+QUnit.test("validating option", async (assert) => {
+    let isValid = false;
+    class A extends Component {
+        setup() {
+            useHotkey(
+                "space",
+                () => {
+                    assert.step("RGNTDJÛ!");
+                },
+                {
+                    validate: (eventTarget) => {
+                        assert.strictEqual(eventTarget, document.activeElement);
+                        return isValid;
+                    },
+                }
+            );
+        }
+    }
+    A.template = xml``;
+    await mount(A, target, { env });
+
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps([]);
+
+    isValid = true;
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps(["RGNTDJÛ!"]);
+});
+
+QUnit.test("operation area with validating option", async (assert) => {
+    let isValid;
+    class A extends Component {
+        setup() {
+            const areaRef = useRef("area");
+            useHotkey(
+                "space",
+                () => {
+                    assert.step("RGNTDJÛ!");
+                },
+                { area: () => areaRef.el, validate: () => isValid }
+            );
+        }
+    }
+    A.template = xml`
+        <div class="one" tabindex="0"/>
+        <div class="two" tabindex="0" t-ref="area"/>
+    `;
+    await mount(A, target, { env });
+
+    // Trigger hotkeys from the 'one'
+    target.querySelector(".one").focus();
+
+    isValid = false;
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps([]);
+
+    isValid = true;
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps([]);
+
+    // Trigger hotkeys from the 'two'
+    target.querySelector(".two").focus();
+
+    isValid = false;
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps([]);
+
+    isValid = true;
+    triggerHotkey("Space");
+    await nextTick();
+    assert.verifySteps(["RGNTDJÛ!"]);
+});

From 34c2610e9f870c4dd4ef53c9cf4066cf6c9d148e Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Thu, 23 Jun 2022 06:42:23 +0000
Subject: [PATCH 20/50] [IMP] web: CheckBox: can toggle on Enter

This commit allows to toggle the value of a CheckBox component
by pressing Enter.

Part-of: odoo/odoo#92475
---
 .../web/static/src/core/checkbox/checkbox.js  |  69 ++++++++++-
 .../web/static/src/core/checkbox/checkbox.xml |   7 +-
 .../web/static/tests/core/checkbox_tests.js   | 109 +++++++++++++++++-
 3 files changed, 177 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/core/checkbox/checkbox.js b/addons/web/static/src/core/checkbox/checkbox.js
index 58120cda060..9f394c0555e 100644
--- a/addons/web/static/src/core/checkbox/checkbox.js
+++ b/addons/web/static/src/core/checkbox/checkbox.js
@@ -1,6 +1,8 @@
 /** @odoo-module **/
 
-const { Component } = owl;
+import { useHotkey } from "../hotkeys/hotkey_hook";
+
+const { Component, useRef } = owl;
 
 /**
  * Custom checkbox
@@ -9,9 +11,9 @@ const { Component } = owl;
  *    value="boolean"
  *    disabled="boolean"
  *    onChange="_onValueChange"
- *    >
+ * >
  *    Change the label text
- *  </CheckBox>
+ * </CheckBox>
  *
  * @extends Component
  */
@@ -19,6 +21,37 @@ const { Component } = owl;
 export class CheckBox extends Component {
     setup() {
         this.id = `checkbox-comp-${CheckBox.nextId++}`;
+        this.rootRef = useRef("root");
+
+        // Make it toggleable through the Enter hotkey
+        // when the focus is inside the root element
+        useHotkey(
+            "Enter",
+            ({ area }) => {
+                const oldValue = area.querySelector("input").checked;
+                this.props.onChange(!oldValue);
+            },
+            { area: () => this.rootRef.el, bypassEditableProtection: true }
+        );
+    }
+
+    onClick(ev) {
+        if (ev.composedPath().find((el) => ["INPUT", "LABEL"].includes(el.tagName))) {
+            // The onChange will handle these cases.
+            return;
+        }
+
+        // Reproduce the click event behavior as if it comes from the input element.
+        const input = this.rootRef.el.querySelector("input");
+        input.focus();
+        if (!this.props.disabled) {
+            input.checked = !input.checked;
+        }
+        this.props.onChange(input.checked);
+    }
+
+    onChange(ev) {
+        this.props.onChange(ev.target.checked);
     }
 }
 
@@ -27,3 +60,33 @@ CheckBox.nextId = 1;
 CheckBox.defaultProps = {
     onChange: () => {},
 };
+CheckBox.props = {
+    id: {
+        type: true,
+        optional: true,
+    },
+    disabled: {
+        type: Boolean,
+        optional: true,
+    },
+    value: {
+        type: Boolean,
+        optional: true,
+    },
+    slots: {
+        type: Object,
+        optional: true,
+    },
+    onChange: {
+        type: Function,
+        optional: true,
+    },
+    className: {
+        type: String,
+        optional: true,
+    },
+    name: {
+        type: String,
+        optional: true,
+    },
+};
diff --git a/addons/web/static/src/core/checkbox/checkbox.xml b/addons/web/static/src/core/checkbox/checkbox.xml
index c5d4833f71a..0e8f51034e6 100644
--- a/addons/web/static/src/core/checkbox/checkbox.xml
+++ b/addons/web/static/src/core/checkbox/checkbox.xml
@@ -2,15 +2,16 @@
 <templates xml:space="preserve">
 
 <t t-name="web.CheckBox" owl="1">
-    <div class="custom-control custom-checkbox">
+    <div class="custom-control custom-checkbox" t-att-class="props.className" t-on-click.stop="onClick" t-ref="root">
         <input
             t-att-id="props.id or id"
             type="checkbox"
             class="custom-control-input"
             t-att-disabled="props.disabled"
             t-att-checked="props.value"
-            t-on-change="(ev) => props.onChange(ev.target.checked)"
-            />
+            t-att-name="props.name"
+            t-on-change="onChange"
+        />
         <label t-att-for="props.id or id" class="custom-control-label">
             <t t-slot="default"/>
         </label>
diff --git a/addons/web/static/tests/core/checkbox_tests.js b/addons/web/static/tests/core/checkbox_tests.js
index ac22d9a8ade..529c0e7c65a 100644
--- a/addons/web/static/tests/core/checkbox_tests.js
+++ b/addons/web/static/tests/core/checkbox_tests.js
@@ -1,13 +1,22 @@
 /** @odoo-module **/
 
 import { CheckBox } from "@web/core/checkbox/checkbox";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { translatedTerms } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
-import { click, getFixture, patchWithCleanup, mount } from "@web/../tests/helpers/utils";
+import {
+    click,
+    getFixture,
+    patchWithCleanup,
+    mount,
+    triggerEvent,
+    triggerHotkey,
+    nextTick,
+} from "@web/../tests/helpers/utils";
 
-const { Component, xml } = owl;
+const { Component, useState, xml } = owl;
 const serviceRegistry = registry.category("services");
 
 let target;
@@ -15,6 +24,7 @@ let target;
 QUnit.module("Components", (hooks) => {
     hooks.beforeEach(async () => {
         target = getFixture();
+        serviceRegistry.add("hotkey", hotkeyService);
     });
 
     QUnit.module("CheckBox");
@@ -61,4 +71,99 @@ QUnit.module("Components", (hooks) => {
         await click(target.querySelector("input"));
         assert.strictEqual(value, false);
     });
+
+    QUnit.test("can toggle value by pressing ENTER", async (assert) => {
+        const env = await makeTestEnv();
+        class Parent extends Component {
+            setup() {
+                this.state = useState({ value: false });
+            }
+            onChange(checked) {
+                this.state.value = checked;
+            }
+        }
+        Parent.template = xml`<CheckBox onChange.bind="onChange" value="state.value"/>`;
+        Parent.components = { CheckBox };
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.custom-checkbox");
+        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        await triggerEvent(target, "div.custom-checkbox input", "keydown", { key: "Enter" });
+        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        await triggerEvent(target, "div.custom-checkbox input", "keydown", { key: "Enter" });
+        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+    });
+
+    QUnit.test("toggling through multiple ways", async (assert) => {
+        const env = await makeTestEnv();
+        class Parent extends Component {
+            setup() {
+                this.state = useState({ value: false });
+            }
+            onChange(checked) {
+                this.state.value = checked;
+                assert.step(`${checked}`);
+            }
+        }
+        Parent.template = xml`<CheckBox onChange.bind="onChange" value="state.value"/>`;
+        Parent.components = { CheckBox };
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, "div.custom-checkbox");
+        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+
+        // Click on div
+        assert.verifySteps([]);
+        await click(target, "div.custom-checkbox");
+        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        assert.verifySteps(["true"]);
+
+        // Click on label
+        assert.verifySteps([]);
+        await click(target, "div.custom-checkbox label", true);
+        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        assert.verifySteps(["false"]);
+
+        // Click on input (only possible programmatically)
+        assert.verifySteps([]);
+        await click(target, "div.custom-checkbox input");
+        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        assert.verifySteps(["true"]);
+
+        // When somehow applying focus on label, the focus receives it
+        // (this is the default behavior from the label)
+        target.querySelector("div.custom-checkbox label").focus();
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("div.custom-checkbox input")
+        );
+
+        // Press Enter when focus is on input
+        assert.verifySteps([]);
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.notOk(target.querySelector("div.custom-checkbox input").checked);
+        assert.verifySteps(["false"]);
+
+        // Pressing Space when focus is on the input is a standard behavior
+        // So we simulate it and verify that it will have its standard behavior.
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("div.custom-checkbox input")
+        );
+        const event = triggerEvent(
+            document.activeElement,
+            null,
+            "keydown",
+            { key: "Space" },
+            { fast: true }
+        );
+        assert.ok(!event.defaultPrevented);
+        target.querySelector("div.custom-checkbox input").checked = true;
+        assert.verifySteps([]);
+        triggerEvent(target, "div.custom-checkbox input", "change", {}, { fast: true });
+        await nextTick();
+        assert.ok(target.querySelector("div.custom-checkbox input").checked);
+        assert.verifySteps(["true"]);
+    });
 });

From 8697a136c3f335005fa80d40afdd2ab8211fdf47 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:10:00 +0000
Subject: [PATCH 21/50] [IMP] web: tooltip: style, delay and empty tooltips

This commit is threefold:
 1) it improves the style of tooltips (mostly, a larger font size)
 2) it adds an option, `data-tooltip-delay` that allows to specify
    the delay before the tooltip opens
 3) it handles the case where the tooltip is empty (no tooltip
    displayed)

Part-of: odoo/odoo#92475
---
 .../web/static/src/core/tooltip/tooltip.scss  |  5 +-
 .../src/core/tooltip/tooltip_service.js       | 75 +++++++++++++------
 .../core/tooltip/tooltip_service_tests.js     | 36 ++++++++-
 3 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/addons/web/static/src/core/tooltip/tooltip.scss b/addons/web/static/src/core/tooltip/tooltip.scss
index 98933b8ad56..faacce47bf4 100644
--- a/addons/web/static/src/core/tooltip/tooltip.scss
+++ b/addons/web/static/src/core/tooltip/tooltip.scss
@@ -1,5 +1,5 @@
 .o-tooltip {
-    font-size: smaller;
+    font-size: small;
 
     .o-tooltip--string {
         background-color: $o-tooltip-title-background-color;
@@ -8,18 +8,21 @@
     }
 
     .o-tooltip--help {
+        font-size: smaller;
         white-space: pre-line;
         padding: 8px;
         margin-bottom: 0px;
     }
 
     .o-tooltip--technical {
+        font-size: smaller;
         padding: 8px;
         margin: 0 0 0 15px;
         list-style-type: circle;
 
         .o-tooltip--technical--title {
             font-weight: bold;
+            margin-right: 4px;
         }
     }
 }
diff --git a/addons/web/static/src/core/tooltip/tooltip_service.js b/addons/web/static/src/core/tooltip/tooltip_service.js
index bc591385fc8..1aa80452a63 100644
--- a/addons/web/static/src/core/tooltip/tooltip_service.js
+++ b/addons/web/static/src/core/tooltip/tooltip_service.js
@@ -19,6 +19,9 @@ const { whenReady } = owl;
  * "data-tooltip-position":
  *   <button data-tooltip="This is a tooltip" data-tooltip-position="left">Do something</button>
  *
+ * The opening delay can be modified with the "data-tooltip-delay" attribute (default: 400):
+ *   <button data-tooltip="This is a tooltip" data-tooltip-delay="0">Do something</button>
+ *
  * For advanced tooltips containing dynamic and/or html content, the
  * "data-tooltip-template" and "data-tooltip-info" attributes can be used.
  * For example, let's suppose the following qweb template:
@@ -42,7 +45,6 @@ export const tooltipService = {
         let openTooltipTimeout;
         let closeTooltip;
         let target = null;
-
         let positionX;
         let positionY;
 
@@ -56,6 +58,29 @@ export const tooltipService = {
             }
         }
 
+        /**
+         * Checks that the target is in the DOM and we're hovering the target.
+         * @returns {boolean}
+         */
+        function shouldCleanup() {
+            if (!target) {
+                return;
+            }
+            if (!document.body.contains(target)) {
+                return cleanup(); // target is no longer in the DOM
+            }
+            const targetRect = target.getBoundingClientRect();
+            if (
+                positionX < targetRect.left ||
+                positionX > targetRect.right ||
+                positionY < targetRect.top ||
+                positionY > targetRect.bottom
+            ) {
+                return true; // mouse is no longer hovering the target
+            }
+            return false;
+        }
+
         /**
          * Opens the tooltip after a delay, if the event's target has a data-tooltip
          * attribute.
@@ -76,35 +101,39 @@ export const tooltipService = {
                 info = dataset.tooltipInfo ? JSON.parse(dataset.tooltipInfo) : null;
             }
             cleanup();
+            if (tooltip === "" && !template) {
+                return;
+            }
+
+            // register mouse position first in case the target
+            // contains disabled elements which would prevent
+            // to track mousemove. The position is needed to check
+            // whether the element is hovered or not
+            positionX = ev.x;
+            positionY = ev.y;
+
+            const delay = dataset.tooltipDelay ? JSON.parse(dataset.tooltipDelay) : OPEN_DELAY;
             openTooltipTimeout = browser.setTimeout(() => {
-                const position = dataset.tooltipPosition;
-                closeTooltip = popover.add(
-                    target,
-                    Tooltip,
-                    { tooltip, template, info },
-                    { position }
-                );
-            }, OPEN_DELAY);
+                if (shouldCleanup()) {
+                    cleanup();
+                } else {
+                    const position = dataset.tooltipPosition;
+                    closeTooltip = popover.add(
+                        target,
+                        Tooltip,
+                        { tooltip, template, info },
+                        { position }
+                    );
+                }
+            }, delay);
         }
 
         whenReady(() => {
             // Regularly check that the target is still in the DOM and we're still
             // hovering it, because if not, we have to close the tooltipd
             browser.setInterval(() => {
-                if (!target) {
-                    return;
-                }
-                if (!document.body.contains(target)) {
-                    return cleanup(); // target is no longer in the DOM
-                }
-                const targetRect = target.getBoundingClientRect();
-                if (
-                    positionX < targetRect.left ||
-                    positionX > targetRect.right ||
-                    positionY < targetRect.top ||
-                    positionY > targetRect.bottom
-                ) {
-                    return cleanup(); // mouse is no longer hovering the target
+                if (shouldCleanup()) {
+                    cleanup();
                 }
             }, CLOSE_DELAY);
 
diff --git a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
index 463d20084bd..247ce04c321 100644
--- a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
+++ b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
@@ -8,6 +8,7 @@ import { registry } from "@web/core/registry";
 import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
 import { getFixture, nextTick, patchWithCleanup, triggerEvent } from "../../helpers/utils";
 import { registerCleanup } from "../../helpers/cleanup";
+import { makeFakeLocalizationService } from "../../helpers/mock_services";
 
 const { App, Component, useState, xml } = owl;
 
@@ -28,7 +29,7 @@ const mainComponents = registry.category("main_components");
  * @param {{[templateName:string]: string}} [options.templates] additional templates
  * @returns {Promise<Component>}
  */
-async function makeParent(Child, options = {}) {
+export async function makeParent(Child, options = {}) {
     const target = getFixture();
 
     // add the popover service to the registry -> will add the PopoverContainer
@@ -44,6 +45,7 @@ async function makeParent(Child, options = {}) {
 
     registry.category("services").add("popover", popoverService);
     registry.category("services").add("tooltip", tooltipService);
+    registry.category("services").add("localization", makeFakeLocalizationService());
     const env = await makeTestEnv();
 
     patchWithCleanup(env.services.popover, {
@@ -341,4 +343,36 @@ QUnit.module("Tooltip service", (hooks) => {
             "<ul><li>X: 3</li><li>Y: abc</li></ul>"
         );
     });
+
+    QUnit.test("empty tooltip, no template", async (assert) => {
+        class MyComponent extends Component {
+            get tooltip() {
+                return "";
+            }
+        }
+        MyComponent.template = xml`<button t-att-data-tooltip="tooltip">Action</button>`;
+        let simulateTimeout = () => {};
+        const mockSetTimeout = (fn) => {
+            simulateTimeout = fn;
+        };
+        await makeParent(MyComponent, { mockSetTimeout });
+
+        assert.containsNone(target, ".o_popover_container .o_popover");
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        simulateTimeout();
+        await nextTick();
+        assert.containsNone(target, ".o_popover_container .o_popover");
+    });
+
+    QUnit.test("tooltip with a delay", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`<button data-tooltip="'helpful tooltip'" data-tooltip-delay="2000">Action</button>`;
+        const mockSetTimeout = (fn, delay) => {
+            assert.strictEqual(delay, 2000);
+        };
+        await makeParent(MyComponent, { mockSetTimeout });
+        target.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+    });
 });

From 48ef812a635f70571b395f82ffdb2969ce99da9e Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 06:51:33 +0000
Subject: [PATCH 22/50] [REF] web: kanban, list and form views in owl
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit introduces the new kanban, list and form views written
in owl. Even though it contains the implementation of those 3 views,
only the kanban view is activated for now (the list and form views
aren't 100% ready yet, so they aren't added to the view registry).

Alongside the views, the fields (<field name="..."/> in archs) and
widgets (<widget name="..." in archs) of web/ have been implemented
in owl as well. Legacy ones remaining in other addons are supported
in our new views, thanks to a compatibility layer. The goal is to convert
them asap though.

Legacy views, fields and widgets are kept for now, which explains the
number of added lines in this PR (around half of them concern tests).
They are still extended by custom code in other addons, that still need
to be converted (a lot of them are already on the way). Moreover,
they are still used in Studio as well. The plan is to lazy load them in
the Studio bundle when all custom code extending them will be
converted. Studio will be converted for v17.

Part-of: odoo/odoo#92475
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Géry Debongnie <ged@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Simon Genin (ges) <ges@odoo.com>
Co-authored-by: Francois (fge) <fge@odoo.com>
Co-authored-by: Michael Mattiello (mcm) <mcm@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
Co-authored-by: luvi <luvi@odoo.com>
---
 .../form_renderer/wowl_form_renderer.js       |    34 +
 addons/web/__manifest__.py                    |    12 +-
 addons/web/static/src/core/dialog/dialog.js   |    27 +-
 addons/web/static/src/core/dialog/dialog.xml  |    16 +-
 .../static/src/core/dialog/dialog_service.js  |     6 +-
 .../static/src/core/dialog/simple_dialog.xml  |    29 +
 .../static/src/core/errors/error_dialogs.js   |     2 +-
 addons/web/static/src/core/utils/hooks.js     |    67 +-
 addons/web/static/src/core/utils/strings.js   |     2 +
 addons/web/static/src/core/utils/xml.js       |   118 +-
 addons/web/static/src/fields/fields.js        |   113 -
 .../web/static/src/legacy/action_adapters.js  |    37 +-
 addons/web/static/src/legacy/backend_utils.js |    10 +-
 addons/web/static/src/legacy/debug_manager.js |    33 +-
 .../src/legacy/js/components/action_menus.js  |     2 +-
 .../src/legacy/js/fields/basic_fields.js      |     4 +-
 .../src/legacy/js/fields/basic_fields_owl.js  |     2 +-
 .../src/legacy/js/fields/relational_fields.js |     6 +-
 .../js/views/kanban/kanban_controller.js      |     2 +-
 .../legacy/js/views/kanban/kanban_record.js   |     2 +-
 .../legacy/js/views/kanban/kanban_renderer.js |     4 +-
 .../src/legacy/js/views/view_dialogs.js       |     2 +-
 addons/web/static/src/legacy/legacy_fields.js |   314 +
 .../web/static/src/legacy/legacy_fields.scss  |     3 +
 .../static/src/legacy/legacy_view_widgets.js  |   101 +
 addons/web/static/src/legacy/legacy_views.js  |    56 +-
 addons/web/static/src/legacy/scss/fields.scss |    21 +-
 .../web/static/src/legacy/scss/form_view.scss |     4 +-
 .../scss/kanban_column_progressbar.scss       |    10 +-
 .../src/legacy/scss/kanban_dashboard.scss     |     4 +-
 .../legacy/scss/kanban_examples_dialog.scss   |     2 +-
 .../static/src/legacy/scss/kanban_view.scss   |     6 +-
 .../web/static/src/legacy/scss/list_view.scss |     2 +-
 addons/web/static/src/legacy/scss/utils.scss  |     6 -
 addons/web/static/src/legacy/scss/views.scss  |     4 +
 addons/web/static/src/legacy/xml/base.xml     |     6 +-
 addons/web/static/src/legacy/xml/fields.xml   |     2 +-
 addons/web/static/src/legacy/xml/kanban.xml   |     8 +-
 .../src/views/basic_relational_model.js       |  1399 ++
 .../static/src/views/fields/ace/ace_field.js  |   110 +
 .../src/views/fields/ace/ace_field.scss       |     3 +
 .../static/src/views/fields/ace/ace_field.xml |    11 +
 .../attachment_image_field.js                 |    15 +
 .../attachment_image_field.xml                |    10 +
 .../src/views/fields/badge/badge_field.js     |    36 +
 .../src/views/fields/badge/badge_field.scss   |    13 +
 .../src/views/fields/badge/badge_field.xml    |     8 +
 .../badge_selection/badge_selection_field.js  |    93 +
 .../badge_selection/badge_selection_field.xml |    20 +
 .../src/views/fields/binary/binary_field.js   |   107 +
 .../src/views/fields/binary/binary_field.xml  |    46 +
 .../src/views/fields/boolean/boolean_field.js |    39 +
 .../views/fields/boolean/boolean_field.xml    |     8 +
 .../boolean_favorite_field.js                 |    31 +
 .../boolean_favorite_field.xml                |    19 +
 .../boolean_toggle/boolean_toggle_field.js    |    28 +
 .../boolean_toggle/boolean_toggle_field.xml   |    17 +
 .../list_boolean_toggle_field.js              |    19 +
 .../list_boolean_toggle_field.xml             |    10 +
 .../src/views/fields/char/char_field.js       |    62 +
 .../src/views/fields/char/char_field.xml      |    30 +
 .../src/views/fields/color/color_field.js     |    27 +
 .../src/views/fields/color/color_field.xml    |    10 +
 .../fields/color_picker/color_picker_field.js |    25 +
 .../color_picker/color_picker_field.scss}     |    45 +-
 .../color_picker/color_picker_field.xml       |     8 +
 .../fields/copy_clipboard/copy_button.js      |    39 +
 .../fields/copy_clipboard/copy_button.xml     |    20 +
 .../copy_clipboard/copy_clipboard_field.js    |    47 +
 .../copy_clipboard/copy_clipboard_field.scss  |    19 +
 .../copy_clipboard/copy_clipboard_field.xml   |    11 +
 .../src/views/fields/date/date_field.js       |    54 +
 .../src/views/fields/date/date_field.xml      |    17 +
 .../views/fields/daterange/daterange_field.js |   155 +
 .../fields/daterange/daterange_field.xml      |    13 +
 .../views/fields/datetime/datetime_field.js   |    44 +
 .../views/fields/datetime/datetime_field.xml  |    17 +
 .../src/views/fields/domain/domain_field.js   |   129 +
 .../src/views/fields/domain/domain_field.xml  |    49 +
 .../src/views/fields/email/email_field.js     |    24 +
 .../src/views/fields/email/email_field.xml    |    20 +
 addons/web/static/src/views/fields/field.js   |   262 +
 .../static/src/views/fields/field_tooltip.js  |    37 +
 .../static/src/views/fields/field_tooltip.xml |    73 +
 .../web/static/src/views/fields/fields.scss   |     3 +
 .../static/src/views/fields/file_handler.js   |   103 +
 .../static/src/views/fields/file_handler.xml  |    28 +
 .../src/views/fields/float/float_field.js     |    79 +
 .../src/views/fields/float/float_field.xml    |     9 +
 .../fields/float_factor/float_factor_field.js |    47 +
 .../float_factor/float_factor_field.xml       |     8 +
 .../fields/float_time/float_time_field.js     |    47 +
 .../fields/float_time/float_time_field.xml    |     9 +
 .../fields/float_toggle/float_toggle_field.js |    56 +
 .../float_toggle/float_toggle_field.xml       |     9 +
 .../font_selection/font_selection_field.js    |    50 +
 .../font_selection/font_selection_field.xml   |    29 +
 .../src/{ => views}/fields/formatters.js      |   189 +-
 .../src/views/fields/handle/handle_field.js   |    19 +
 .../src/views/fields/handle/handle_field.xml  |     8 +
 .../src/views/fields/html/html_field.js       |    10 +
 .../src/views/fields/html/html_field.xml      |    11 +
 .../src/views/fields/image/image_field.js     |   121 +
 .../src/views/fields/image/image_field.scss   |    58 +
 .../src/views/fields/image/image_field.xml    |    53 +
 .../views/fields/image_url/image_url_field.js |    64 +
 .../fields/image_url/image_url_field.xml      |    18 +
 .../src/views/fields/input_field_hook.js      |    84 +
 .../src/views/fields/integer/integer_field.js |    57 +
 .../views/fields/integer/integer_field.xml    |     9 +
 .../journal_dashboard_graph_field.js          |   151 +
 .../journal_dashboard_graph_field.scss        |     3 +
 .../journal_dashboard_graph_field.xml         |    10 +
 .../label_selection/label_selection_field.js  |    39 +
 .../label_selection/label_selection_field.xml |     8 +
 .../many2many_binary_field.js                 |    69 +
 .../many2many_binary_field.xml                |    54 +
 .../many2many_checkboxes_field.js             |    58 +
 .../many2many_checkboxes_field.xml            |    20 +
 .../kanban_many2many_tags_field.js            |    20 +
 .../kanban_many2many_tags_field.xml           |     7 +
 .../many2many_tags/many2many_tags_field.js    |   311 +
 .../many2many_tags/many2many_tags_field.scss  |    15 +
 .../many2many_tags/many2many_tags_field.xml   |    31 +
 .../views/fields/many2many_tags/tags_list.js  |    33 +
 .../fields/many2many_tags/tags_list.scss      |    49 +
 .../views/fields/many2many_tags/tags_list.xml |    24 +
 .../many2many_tags_avatar_field.js            |    65 +
 .../many2many_tags_avatar_field.scss          |     9 +
 .../many2many_tags_avatar_field.xml           |    23 +
 .../views/fields/many2one/many2one_field.js   |   242 +
 .../views/fields/many2one/many2one_field.xml  |    80 +
 .../many2one_avatar/many2one_avatar_field.js  |    38 +
 .../many2one_avatar/many2one_avatar_field.xml |    14 +
 .../views/fields/monetary/monetary_field.js   |    93 +
 .../views/fields/monetary/monetary_field.xml  |    13 +
 .../src/views/fields/numpad_decimal_hook.js   |    44 +
 .../static/src/{ => views}/fields/parsers.js  |    74 +-
 .../fields/pdf_viewer/pdf_viewer_field.js     |    99 +
 .../fields/pdf_viewer/pdf_viewer_field.xml    |    51 +
 .../fields/percent_pie/percent_pie_field.js   |    35 +
 .../fields/percent_pie/percent_pie_field.xml  |    17 +
 .../fields/percentage/percentage_field.js     |    52 +
 .../fields/percentage/percentage_field.xml    |    21 +
 .../src/views/fields/phone/phone_field.js     |    31 +
 .../src/views/fields/phone/phone_field.xml    |    19 +
 .../views/fields/priority/priority_field.js   |    89 +
 .../views/fields/priority/priority_field.xml  |    39 +
 .../fields/progress_bar/progress_bar_field.js |   123 +
 .../progress_bar/progress_bar_field.xml       |    71 +
 .../src/views/fields/radio/radio_field.js     |    90 +
 .../src/views/fields/radio/radio_field.scss   |    29 +
 .../src/views/fields/radio/radio_field.xml    |    29 +
 .../views/fields/reference/reference_field.js |   135 +
 .../fields/reference/reference_field.xml      |    23 +
 .../src/views/fields/relational_utils.js      |   700 +
 .../src/views/fields/relational_utils.xml     |    59 +
 .../remaining_days/remaining_days_field.js    |    56 +
 .../remaining_days/remaining_days_field.xml   |    33 +
 .../views/fields/selection/selection_field.js |    93 +
 .../fields/selection/selection_field.xml      |    28 +
 .../src/views/fields/standard_field_props.js  |    13 +
 .../views/fields/stat_info/stat_info_field.js |    42 +
 .../fields/stat_info/stat_info_field.xml      |     9 +
 .../state_selection/state_selection_field.js  |    96 +
 .../state_selection/state_selection_field.xml |    31 +
 .../views/fields/statusbar/statusbar_field.js |   203 +
 .../fields/statusbar/statusbar_field.scss     |    71 +
 .../fields/statusbar/statusbar_field.xml      |    66 +
 .../src/views/fields/text/text_field.js       |   120 +
 .../src/views/fields/text/text_field.scss     |     7 +
 .../src/views/fields/text/text_field.xml      |    29 +
 .../src/views/fields/translation_button.js    |    43 +
 .../src/views/fields/translation_button.scss  |     9 +
 .../src/views/fields/translation_button.xml   |    12 +
 .../src/views/fields/translation_dialog.js    |   107 +
 .../src/views/fields/translation_dialog.xml   |    51 +
 .../static/src/views/fields/url/url_field.js  |    48 +
 .../static/src/views/fields/url/url_field.xml |    20 +
 .../views/fields/x2many/list_x2many_field.js  |    21 +
 .../views/fields/x2many/list_x2many_field.xml |     8 +
 .../src/views/fields/x2many/x2many_field.js   |   264 +
 .../src/views/fields/x2many/x2many_field.xml  |    24 +
 .../src/views/form/button_box/button_box.js   |    34 +
 .../src/views/form/button_box/button_box.scss |   165 +
 .../src/views/form/button_box/button_box.xml  |    22 +
 .../static/src/views/form/form_arch_parser.js |    71 +
 .../static/src/views/form/form_compiler.js    |   519 +
 .../static/src/views/form/form_controller.js  |   436 +
 .../src/views/form/form_controller.scss       |  1074 ++
 .../static/src/views/form/form_controller.xml |    67 +
 .../src/views/form/form_group/form_group.js   |    93 +
 .../src/views/form/form_group/form_group.xml  |    45 +
 .../web/static/src/views/form/form_label.js   |    53 +
 .../static/src/views/form/form_renderer.js    |    42 +
 addons/web/static/src/views/form/form_view.js |    39 +
 .../src/views/form/form_view_extra.scss       |   131 +
 .../src/views/graph/graph_arch_parser.js      |     4 +-
 .../src/views/graph/graph_controller.js       |     9 +-
 .../src/views/graph/graph_controller.xml      |     4 +-
 .../web/static/src/views/graph/graph_model.js |     4 +-
 .../static/src/views/graph/graph_renderer.js  |     2 +-
 .../src/views/helpers/standard_view_props.js  |    38 -
 addons/web/static/src/views/helpers/utils.js  |    98 -
 .../views/kanban/kanban_animated_number.js    |    49 +
 .../views/kanban/kanban_animated_number.xml   |    12 +
 .../src/views/kanban/kanban_arch_parser.js    |   155 +
 .../kanban/kanban_column_examples_dialog.js   |    60 +
 .../kanban/kanban_column_examples_dialog.xml  |    31 +
 .../kanban/kanban_column_progressbar.scss     |   147 +
 .../kanban/kanban_column_quick_create.js      |    73 +
 .../kanban/kanban_column_quick_create.xml     |    41 +
 .../src/views/kanban/kanban_compiler.js       |   289 +
 .../src/views/kanban/kanban_controller.js     |   124 +
 .../src/views/kanban/kanban_controller.scss   |   661 +
 .../src/views/kanban/kanban_controller.xml    |    32 +
 .../views/kanban/kanban_cover_image_dialog.js |    60 +
 .../kanban/kanban_cover_image_dialog.xml      |    39 +
 .../src/views/kanban/kanban_dashboard.scss    |   210 +
 .../views/kanban/kanban_examples_dialog.scss  |    99 +
 .../static/src/views/kanban/kanban_model.js   |   543 +
 .../static/src/views/kanban/kanban_record.js  |   399 +
 .../kanban/kanban_record_quick_create.js      |    62 +
 .../kanban/kanban_record_quick_create.xml     |    25 +
 .../src/views/kanban/kanban_renderer.js       |   567 +
 .../src/views/kanban/kanban_renderer.xml      |   196 +
 .../static/src/views/kanban/kanban_view.js    |    42 +
 .../static/src/views/list/list_arch_parser.js |   182 +
 .../views/list/list_confirmation_dialog.js    |    52 +
 .../views/list/list_confirmation_dialog.xml   |    45 +
 .../static/src/views/list/list_controller.js  |   428 +
 .../src/views/list/list_controller.scss       |   372 +
 .../static/src/views/list/list_controller.xml |    90 +
 .../static/src/views/list/list_renderer.js    |  1648 ++
 .../static/src/views/list/list_renderer.xml   |   226 +
 addons/web/static/src/views/list/list_view.js |    35 +
 .../src/views/list/list_view_extra.scss       |    42 +
 .../static/src/views/{helpers => }/model.js   |    39 +-
 .../{helpers => }/no_content_helpers.xml      |     0
 .../web/static/src/views/onboarding_banner.js |     2 +-
 .../src/views/pivot/pivot_arch_parser.js      |     2 +-
 .../src/views/pivot/pivot_controller.js       |     9 +-
 .../src/views/pivot/pivot_controller.xml      |     4 +-
 .../web/static/src/views/pivot/pivot_model.js |    12 +-
 .../static/src/views/pivot/pivot_renderer.js  |     6 +-
 addons/web/static/src/views/record.js         |    53 +
 .../web/static/src/views/relational_model.js  |  3287 ++++
 .../src/views/{helpers => }/sample_server.js  |    60 +-
 .../static/src/views/standard_view_props.js   |    42 +
 addons/web/static/src/views/utils.js          |   238 +
 addons/web/static/src/views/view.js           |   141 +-
 addons/web/static/src/views/view.xml          |    11 +-
 .../src/views/view_button/view_button.js      |   134 +
 .../src/views/view_button/view_button.xml     |    72 +
 .../src/views/view_button/view_button_hook.js |   106 +
 addons/web/static/src/views/view_compiler.js  |   461 +
 .../views/view_dialogs/export_data_dialog.js  |   352 +
 .../view_dialogs/export_data_dialog.scss      |    42 +
 .../views/view_dialogs/export_data_dialog.xml |   127 +
 .../views/view_dialogs/form_view_dialog.js    |    90 +
 .../views/view_dialogs/form_view_dialog.scss  |     5 +
 .../views/view_dialogs/form_view_dialog.xml   |    31 +
 .../view_dialogs/select_create_dialog.js      |    82 +
 .../view_dialogs/select_create_dialog.xml     |    25 +
 .../src/views/{helpers => }/view_hook.js      |    31 +-
 addons/web/static/src/views/view_service.js   |    13 +-
 .../src/views/widgets/week_days/week_days.js  |    40 +
 .../src/views/widgets/week_days/week_days.xml |    32 +
 addons/web/static/src/views/widgets/widget.js |    45 +
 .../src/webclient/actions/action_dialog.js    |    15 +-
 .../src/webclient/actions/action_dialog.xml   |     4 +-
 .../src/webclient/actions/action_service.js   |    87 +-
 .../static/tests/core/dialog_service_tests.js |     1 -
 addons/web/static/tests/helpers/mock_env.js   |     3 +
 .../web/static/tests/helpers/mock_server.js   |    90 +-
 .../web/static/tests/helpers/mock_services.js |     6 +-
 addons/web/static/tests/helpers/utils.js      |   352 +-
 .../tests/legacy/components/pager_tests.js    |     2 +-
 .../legacy/control_panel/search_bar_tests.js  |    11 +
 .../tests/legacy/core/owl_dialog_tests.js     |    12 +-
 .../tests/legacy/fields/basic_fields_tests.js |    12 +-
 .../field_many2many_tests.js                  |    12 +-
 .../relational_fields/field_many2one_tests.js |    11 +-
 .../relational_fields/field_one2many_tests.js |    62 +-
 .../legacy/fields/relational_fields_tests.js  |    10 +-
 .../web/static/tests/legacy/legacy_setup.js   |     9 +
 .../tests/legacy/owl_compatibility_tests.js   |     9 +-
 .../legacy/views/abstract_controller_tests.js |     2 +-
 .../legacy/views/abstract_model_tests.js      |     2 +-
 .../views/abstract_view_banner_tests.js       |     2 +-
 .../tests/legacy/views/abstract_view_tests.js |     8 +-
 .../tests/legacy/views/basic_model_tests.js   |     4 +-
 .../tests/legacy/views/basic_view_tests.js    |     2 +-
 .../tests/legacy/views/calendar_tests.js      |     8 +-
 .../static/tests/legacy/views/form_tests.js   |    28 +-
 .../static/tests/legacy/views/graph_tests.js  |     2 +-
 .../tests/legacy/views/kanban_model_tests.js  |     4 +-
 .../static/tests/legacy/views/kanban_tests.js |   132 +-
 .../static/tests/legacy/views/list_tests.js   |    31 +-
 .../static/tests/legacy/views/pivot_tests.js  |     6 +-
 .../tests/legacy/views/search_panel_tests.js  |    62 +-
 .../tests/legacy/views/state_mapping_tests.js |     2 +-
 .../tests/legacy/views/view_dialogs_tests.js  |     4 +-
 .../legacy/widgets/domain_selector_tests.js   |     6 +
 .../tests/mobile/mobile_list_view_tests.js    |   235 +
 .../web/static/tests/search/control_panel.js  |     2 +-
 addons/web/static/tests/search/helpers.js     |   240 +-
 .../static/tests/search/search_panel_tests.js |   136 +-
 addons/web/static/tests/setup.js              |    15 +-
 .../views/fields/ace_editor_field_tests.js    |    60 +
 .../tests/views/fields/badge_field_tests.js   |   130 +
 .../fields/badge_selection_field_tests.js     |   151 +
 .../tests/views/fields/binary_field_tests.js  |   327 +
 .../fields/boolean_favorite_field_tests.js    |   198 +
 .../tests/views/fields/boolean_field_tests.js |   306 +
 .../fields/boolean_toggle_field_tests.js      |   205 +
 .../tests/views/fields/char_field_tests.js    |  1016 ++
 .../tests/views/fields/color_field_tests.js   |    88 +
 .../views/fields/color_picker_field_tests.js  |   199 +
 .../fields/copy_clipboard_field_tests.js      |   124 +
 .../tests/views/fields/date_field_tests.js    |   716 +
 .../views/fields/daterange_field_tests.js     |   563 +
 .../views/fields/datetime_field_tests.js      |   610 +
 .../tests/views/fields/domain_field_tests.js  |   809 +
 .../tests/views/fields/email_field_tests.js   |   242 +
 .../views/fields/float_factor_field_tests.js  |    70 +
 .../tests/views/fields/float_field_tests.js   |   450 +
 .../views/fields/float_time_field_tests.js    |   167 +
 .../views/fields/float_toggle_field_tests.js  |   120 +
 .../fields/font_selection_field_tests.js      |    68 +
 .../{ => views}/fields/formatters_tests.js    |    94 +-
 .../tests/views/fields/handle_field_tests.js  |   168 +
 .../tests/views/fields/html_field_tests.js    |    71 +
 .../tests/views/fields/image_field_tests.js   |   370 +
 .../views/fields/image_url_field_tests.js     |   215 +
 .../tests/views/fields/integer_field_tests.js |   302 +
 .../journal_dashboard_graph_field_tests.js    |   182 +
 .../fields/label_selection_field_tests.js     |   267 +
 .../fields/many2many_binary_field_tests.js    |   178 +
 .../many2many_checkboxes_field_tests.js       |   447 +
 .../views/fields/many2many_field_tests.js     |  1824 ++
 .../many2many_tags_avatar_field_tests.js      |   361 +
 .../fields/many2many_tags_field_tests.js      |  1528 ++
 .../fields/many2one_avatar_field_tests.js     |   227 +
 .../views/fields/many2one_field_tests.js      |  4037 +++++
 .../views/fields/monetary_field_tests.js      |  1115 ++
 .../views/fields/numeric_fields_tests.js      |   185 +
 .../views/fields/one2many_field_tests.js      | 11915 +++++++++++++
 .../tests/{ => views}/fields/parsers_tests.js |    34 +-
 .../views/fields/pdf_viewer_field_tests.js    |   105 +
 .../views/fields/percent_pie_field_tests.js   |   281 +
 .../views/fields/percentage_field_tests.js    |    80 +
 .../tests/views/fields/phone_field_tests.js   |   165 +
 .../views/fields/priority_field_tests.js      |   582 +
 .../views/fields/progress_bar_field_tests.js  |   466 +
 .../tests/views/fields/radio_field_tests.js   |   350 +
 .../views/fields/reference_field_tests.js     |   878 +
 .../fields/remaining_days_field_tests.js      |   477 +
 .../views/fields/selection_field_tests.js     |   398 +
 .../views/fields/stat_info_field_tests.js     |   295 +
 .../fields/state_selection_field_tests.js     |   471 +
 .../views/fields/statusbar_field_tests.js     |   525 +
 .../tests/views/fields/text_field_tests.js    |   554 +
 .../tests/views/fields/url_field_tests.js     |   299 +
 .../tests/views/form/form_compiler_tests.js   |   235 +
 .../tests/views/form/form_view_tests.js       | 10805 ++++++++++++
 .../static/tests/views/graph_view_tests.js    |    13 +-
 addons/web/static/tests/views/helpers.js      |    42 +-
 .../static/tests/views/kanban_view_tests.js   |  9528 +++++++++++
 .../web/static/tests/views/list_view_tests.js | 13922 ++++++++++++++++
 .../static/tests/views/pivot_view_tests.js    |     6 +-
 addons/web/static/tests/views/record_tests.js |   186 +
 .../view_dialogs/export_data_dialog_tests.js  |   684 +
 .../view_dialogs/form_view_dialog_tests.js    |   286 +
 .../select_create_dialog_tests.js             |   477 +
 addons/web/static/tests/views/view_tests.js   |     9 +-
 .../tests/views/widgets/week_days_tests.js    |   178 +
 .../webclient/actions/close_action_tests.js   |    84 +-
 .../webclient/actions/concurrency_tests.js    |   309 +-
 .../tests/webclient/actions/legacy_tests.js   |   196 +
 .../webclient/actions/load_state_tests.js     |    29 +-
 .../tests/webclient/actions/misc_tests.js     |   133 +-
 .../webclient/actions/push_state_tests.js     |    19 +-
 .../webclient/actions/server_action_tests.js  |     4 +-
 .../tests/webclient/actions/target_tests.js   |   170 +-
 .../webclient/actions/window_action_tests.js  |   671 +-
 addons/web/static/tests/webclient/helpers.js  |     4 +-
 .../static/tests/webclient/navbar_tests.js    |    12 +-
 .../static/tests/webclient/webclient_tests.js |     6 +-
 389 files changed, 99597 insertions(+), 2046 deletions(-)
 create mode 100644 addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
 create mode 100644 addons/web/static/src/core/dialog/simple_dialog.xml
 delete mode 100644 addons/web/static/src/fields/fields.js
 create mode 100644 addons/web/static/src/legacy/legacy_fields.js
 create mode 100644 addons/web/static/src/legacy/legacy_fields.scss
 create mode 100644 addons/web/static/src/legacy/legacy_view_widgets.js
 create mode 100644 addons/web/static/src/views/basic_relational_model.js
 create mode 100644 addons/web/static/src/views/fields/ace/ace_field.js
 create mode 100644 addons/web/static/src/views/fields/ace/ace_field.scss
 create mode 100644 addons/web/static/src/views/fields/ace/ace_field.xml
 create mode 100644 addons/web/static/src/views/fields/attachment_image/attachment_image_field.js
 create mode 100644 addons/web/static/src/views/fields/attachment_image/attachment_image_field.xml
 create mode 100644 addons/web/static/src/views/fields/badge/badge_field.js
 create mode 100644 addons/web/static/src/views/fields/badge/badge_field.scss
 create mode 100644 addons/web/static/src/views/fields/badge/badge_field.xml
 create mode 100644 addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
 create mode 100644 addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
 create mode 100644 addons/web/static/src/views/fields/binary/binary_field.js
 create mode 100644 addons/web/static/src/views/fields/binary/binary_field.xml
 create mode 100644 addons/web/static/src/views/fields/boolean/boolean_field.js
 create mode 100644 addons/web/static/src/views/fields/boolean/boolean_field.xml
 create mode 100644 addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
 create mode 100644 addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
 create mode 100644 addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.js
 create mode 100644 addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.xml
 create mode 100644 addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.js
 create mode 100644 addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.xml
 create mode 100644 addons/web/static/src/views/fields/char/char_field.js
 create mode 100644 addons/web/static/src/views/fields/char/char_field.xml
 create mode 100644 addons/web/static/src/views/fields/color/color_field.js
 create mode 100644 addons/web/static/src/views/fields/color/color_field.xml
 create mode 100644 addons/web/static/src/views/fields/color_picker/color_picker_field.js
 rename addons/web/static/src/{legacy/scss/color_picker.scss => views/fields/color_picker/color_picker_field.scss} (60%)
 create mode 100644 addons/web/static/src/views/fields/color_picker/color_picker_field.xml
 create mode 100644 addons/web/static/src/views/fields/copy_clipboard/copy_button.js
 create mode 100644 addons/web/static/src/views/fields/copy_clipboard/copy_button.xml
 create mode 100644 addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
 create mode 100644 addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
 create mode 100644 addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml
 create mode 100644 addons/web/static/src/views/fields/date/date_field.js
 create mode 100644 addons/web/static/src/views/fields/date/date_field.xml
 create mode 100644 addons/web/static/src/views/fields/daterange/daterange_field.js
 create mode 100644 addons/web/static/src/views/fields/daterange/daterange_field.xml
 create mode 100644 addons/web/static/src/views/fields/datetime/datetime_field.js
 create mode 100644 addons/web/static/src/views/fields/datetime/datetime_field.xml
 create mode 100644 addons/web/static/src/views/fields/domain/domain_field.js
 create mode 100644 addons/web/static/src/views/fields/domain/domain_field.xml
 create mode 100644 addons/web/static/src/views/fields/email/email_field.js
 create mode 100644 addons/web/static/src/views/fields/email/email_field.xml
 create mode 100644 addons/web/static/src/views/fields/field.js
 create mode 100644 addons/web/static/src/views/fields/field_tooltip.js
 create mode 100644 addons/web/static/src/views/fields/field_tooltip.xml
 create mode 100644 addons/web/static/src/views/fields/fields.scss
 create mode 100644 addons/web/static/src/views/fields/file_handler.js
 create mode 100644 addons/web/static/src/views/fields/file_handler.xml
 create mode 100644 addons/web/static/src/views/fields/float/float_field.js
 create mode 100644 addons/web/static/src/views/fields/float/float_field.xml
 create mode 100644 addons/web/static/src/views/fields/float_factor/float_factor_field.js
 create mode 100644 addons/web/static/src/views/fields/float_factor/float_factor_field.xml
 create mode 100644 addons/web/static/src/views/fields/float_time/float_time_field.js
 create mode 100644 addons/web/static/src/views/fields/float_time/float_time_field.xml
 create mode 100644 addons/web/static/src/views/fields/float_toggle/float_toggle_field.js
 create mode 100644 addons/web/static/src/views/fields/float_toggle/float_toggle_field.xml
 create mode 100644 addons/web/static/src/views/fields/font_selection/font_selection_field.js
 create mode 100644 addons/web/static/src/views/fields/font_selection/font_selection_field.xml
 rename addons/web/static/src/{ => views}/fields/formatters.js (69%)
 create mode 100644 addons/web/static/src/views/fields/handle/handle_field.js
 create mode 100644 addons/web/static/src/views/fields/handle/handle_field.xml
 create mode 100644 addons/web/static/src/views/fields/html/html_field.js
 create mode 100644 addons/web/static/src/views/fields/html/html_field.xml
 create mode 100644 addons/web/static/src/views/fields/image/image_field.js
 create mode 100644 addons/web/static/src/views/fields/image/image_field.scss
 create mode 100644 addons/web/static/src/views/fields/image/image_field.xml
 create mode 100644 addons/web/static/src/views/fields/image_url/image_url_field.js
 create mode 100644 addons/web/static/src/views/fields/image_url/image_url_field.xml
 create mode 100644 addons/web/static/src/views/fields/input_field_hook.js
 create mode 100644 addons/web/static/src/views/fields/integer/integer_field.js
 create mode 100644 addons/web/static/src/views/fields/integer/integer_field.xml
 create mode 100644 addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
 create mode 100644 addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.scss
 create mode 100644 addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.xml
 create mode 100644 addons/web/static/src/views/fields/label_selection/label_selection_field.js
 create mode 100644 addons/web/static/src/views/fields/label_selection/label_selection_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.js
 create mode 100644 addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.js
 create mode 100644 addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.js
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/tags_list.js
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/tags_list.scss
 create mode 100644 addons/web/static/src/views/fields/many2many_tags/tags_list.xml
 create mode 100644 addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
 create mode 100644 addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
 create mode 100644 addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2one/many2one_field.js
 create mode 100644 addons/web/static/src/views/fields/many2one/many2one_field.xml
 create mode 100644 addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
 create mode 100644 addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
 create mode 100644 addons/web/static/src/views/fields/monetary/monetary_field.js
 create mode 100644 addons/web/static/src/views/fields/monetary/monetary_field.xml
 create mode 100644 addons/web/static/src/views/fields/numpad_decimal_hook.js
 rename addons/web/static/src/{ => views}/fields/parsers.js (66%)
 create mode 100644 addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.js
 create mode 100644 addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
 create mode 100644 addons/web/static/src/views/fields/percent_pie/percent_pie_field.js
 create mode 100644 addons/web/static/src/views/fields/percent_pie/percent_pie_field.xml
 create mode 100644 addons/web/static/src/views/fields/percentage/percentage_field.js
 create mode 100644 addons/web/static/src/views/fields/percentage/percentage_field.xml
 create mode 100644 addons/web/static/src/views/fields/phone/phone_field.js
 create mode 100644 addons/web/static/src/views/fields/phone/phone_field.xml
 create mode 100644 addons/web/static/src/views/fields/priority/priority_field.js
 create mode 100644 addons/web/static/src/views/fields/priority/priority_field.xml
 create mode 100644 addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
 create mode 100644 addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
 create mode 100644 addons/web/static/src/views/fields/radio/radio_field.js
 create mode 100644 addons/web/static/src/views/fields/radio/radio_field.scss
 create mode 100644 addons/web/static/src/views/fields/radio/radio_field.xml
 create mode 100644 addons/web/static/src/views/fields/reference/reference_field.js
 create mode 100644 addons/web/static/src/views/fields/reference/reference_field.xml
 create mode 100644 addons/web/static/src/views/fields/relational_utils.js
 create mode 100644 addons/web/static/src/views/fields/relational_utils.xml
 create mode 100644 addons/web/static/src/views/fields/remaining_days/remaining_days_field.js
 create mode 100644 addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
 create mode 100644 addons/web/static/src/views/fields/selection/selection_field.js
 create mode 100644 addons/web/static/src/views/fields/selection/selection_field.xml
 create mode 100644 addons/web/static/src/views/fields/standard_field_props.js
 create mode 100644 addons/web/static/src/views/fields/stat_info/stat_info_field.js
 create mode 100644 addons/web/static/src/views/fields/stat_info/stat_info_field.xml
 create mode 100644 addons/web/static/src/views/fields/state_selection/state_selection_field.js
 create mode 100644 addons/web/static/src/views/fields/state_selection/state_selection_field.xml
 create mode 100644 addons/web/static/src/views/fields/statusbar/statusbar_field.js
 create mode 100644 addons/web/static/src/views/fields/statusbar/statusbar_field.scss
 create mode 100644 addons/web/static/src/views/fields/statusbar/statusbar_field.xml
 create mode 100644 addons/web/static/src/views/fields/text/text_field.js
 create mode 100644 addons/web/static/src/views/fields/text/text_field.scss
 create mode 100644 addons/web/static/src/views/fields/text/text_field.xml
 create mode 100644 addons/web/static/src/views/fields/translation_button.js
 create mode 100644 addons/web/static/src/views/fields/translation_button.scss
 create mode 100644 addons/web/static/src/views/fields/translation_button.xml
 create mode 100644 addons/web/static/src/views/fields/translation_dialog.js
 create mode 100644 addons/web/static/src/views/fields/translation_dialog.xml
 create mode 100644 addons/web/static/src/views/fields/url/url_field.js
 create mode 100644 addons/web/static/src/views/fields/url/url_field.xml
 create mode 100644 addons/web/static/src/views/fields/x2many/list_x2many_field.js
 create mode 100644 addons/web/static/src/views/fields/x2many/list_x2many_field.xml
 create mode 100644 addons/web/static/src/views/fields/x2many/x2many_field.js
 create mode 100644 addons/web/static/src/views/fields/x2many/x2many_field.xml
 create mode 100644 addons/web/static/src/views/form/button_box/button_box.js
 create mode 100644 addons/web/static/src/views/form/button_box/button_box.scss
 create mode 100644 addons/web/static/src/views/form/button_box/button_box.xml
 create mode 100644 addons/web/static/src/views/form/form_arch_parser.js
 create mode 100644 addons/web/static/src/views/form/form_compiler.js
 create mode 100644 addons/web/static/src/views/form/form_controller.js
 create mode 100644 addons/web/static/src/views/form/form_controller.scss
 create mode 100644 addons/web/static/src/views/form/form_controller.xml
 create mode 100644 addons/web/static/src/views/form/form_group/form_group.js
 create mode 100644 addons/web/static/src/views/form/form_group/form_group.xml
 create mode 100644 addons/web/static/src/views/form/form_label.js
 create mode 100644 addons/web/static/src/views/form/form_renderer.js
 create mode 100644 addons/web/static/src/views/form/form_view.js
 create mode 100644 addons/web/static/src/views/form/form_view_extra.scss
 delete mode 100644 addons/web/static/src/views/helpers/standard_view_props.js
 delete mode 100644 addons/web/static/src/views/helpers/utils.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_animated_number.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_animated_number.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_arch_parser.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_column_examples_dialog.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_column_progressbar.scss
 create mode 100644 addons/web/static/src/views/kanban/kanban_column_quick_create.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_column_quick_create.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_compiler.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_controller.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_controller.scss
 create mode 100644 addons/web/static/src/views/kanban/kanban_controller.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_dashboard.scss
 create mode 100644 addons/web/static/src/views/kanban/kanban_examples_dialog.scss
 create mode 100644 addons/web/static/src/views/kanban/kanban_model.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_record.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_record_quick_create.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_record_quick_create.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_renderer.js
 create mode 100644 addons/web/static/src/views/kanban/kanban_renderer.xml
 create mode 100644 addons/web/static/src/views/kanban/kanban_view.js
 create mode 100644 addons/web/static/src/views/list/list_arch_parser.js
 create mode 100644 addons/web/static/src/views/list/list_confirmation_dialog.js
 create mode 100644 addons/web/static/src/views/list/list_confirmation_dialog.xml
 create mode 100644 addons/web/static/src/views/list/list_controller.js
 create mode 100644 addons/web/static/src/views/list/list_controller.scss
 create mode 100644 addons/web/static/src/views/list/list_controller.xml
 create mode 100644 addons/web/static/src/views/list/list_renderer.js
 create mode 100644 addons/web/static/src/views/list/list_renderer.xml
 create mode 100644 addons/web/static/src/views/list/list_view.js
 create mode 100644 addons/web/static/src/views/list/list_view_extra.scss
 rename addons/web/static/src/views/{helpers => }/model.js (74%)
 rename addons/web/static/src/views/{helpers => }/no_content_helpers.xml (100%)
 create mode 100644 addons/web/static/src/views/record.js
 create mode 100644 addons/web/static/src/views/relational_model.js
 rename addons/web/static/src/views/{helpers => }/sample_server.js (94%)
 create mode 100644 addons/web/static/src/views/standard_view_props.js
 create mode 100644 addons/web/static/src/views/utils.js
 create mode 100644 addons/web/static/src/views/view_button/view_button.js
 create mode 100644 addons/web/static/src/views/view_button/view_button.xml
 create mode 100644 addons/web/static/src/views/view_button/view_button_hook.js
 create mode 100644 addons/web/static/src/views/view_compiler.js
 create mode 100644 addons/web/static/src/views/view_dialogs/export_data_dialog.js
 create mode 100644 addons/web/static/src/views/view_dialogs/export_data_dialog.scss
 create mode 100644 addons/web/static/src/views/view_dialogs/export_data_dialog.xml
 create mode 100644 addons/web/static/src/views/view_dialogs/form_view_dialog.js
 create mode 100644 addons/web/static/src/views/view_dialogs/form_view_dialog.scss
 create mode 100644 addons/web/static/src/views/view_dialogs/form_view_dialog.xml
 create mode 100644 addons/web/static/src/views/view_dialogs/select_create_dialog.js
 create mode 100644 addons/web/static/src/views/view_dialogs/select_create_dialog.xml
 rename addons/web/static/src/views/{helpers => }/view_hook.js (81%)
 create mode 100644 addons/web/static/src/views/widgets/week_days/week_days.js
 create mode 100644 addons/web/static/src/views/widgets/week_days/week_days.xml
 create mode 100644 addons/web/static/src/views/widgets/widget.js
 create mode 100644 addons/web/static/tests/mobile/mobile_list_view_tests.js
 create mode 100644 addons/web/static/tests/views/fields/ace_editor_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/badge_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/badge_selection_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/binary_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/boolean_favorite_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/boolean_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/char_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/color_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/color_picker_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/copy_clipboard_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/date_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/daterange_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/datetime_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/domain_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/email_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/float_factor_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/float_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/float_time_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/float_toggle_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/font_selection_field_tests.js
 rename addons/web/static/tests/{ => views}/fields/formatters_tests.js (80%)
 create mode 100644 addons/web/static/tests/views/fields/handle_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/html_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/image_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/image_url_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/integer_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/label_selection_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2many_binary_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2many_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2many_tags_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/many2one_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/monetary_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/numeric_fields_tests.js
 create mode 100644 addons/web/static/tests/views/fields/one2many_field_tests.js
 rename addons/web/static/tests/{ => views}/fields/parsers_tests.js (82%)
 create mode 100644 addons/web/static/tests/views/fields/pdf_viewer_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/percent_pie_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/percentage_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/phone_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/priority_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/progress_bar_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/radio_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/reference_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/remaining_days_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/selection_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/stat_info_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/state_selection_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/statusbar_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/text_field_tests.js
 create mode 100644 addons/web/static/tests/views/fields/url_field_tests.js
 create mode 100644 addons/web/static/tests/views/form/form_compiler_tests.js
 create mode 100644 addons/web/static/tests/views/form/form_view_tests.js
 create mode 100644 addons/web/static/tests/views/kanban_view_tests.js
 create mode 100644 addons/web/static/tests/views/list_view_tests.js
 create mode 100644 addons/web/static/tests/views/record_tests.js
 create mode 100644 addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
 create mode 100644 addons/web/static/tests/views/view_dialogs/form_view_dialog_tests.js
 create mode 100644 addons/web/static/tests/views/view_dialogs/select_create_dialog_tests.js
 create mode 100644 addons/web/static/tests/views/widgets/week_days_tests.js

diff --git a/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js b/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
new file mode 100644
index 00000000000..76bc7d2b7fd
--- /dev/null
+++ b/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
@@ -0,0 +1,34 @@
+/** @odoo-module */
+
+import { registry } from "@web/core/registry";
+import { FormRenderer } from "@web/views/form/form_renderer";
+import { ChatterContainer } from "@mail/components/chatter_container/chatter_container";
+import {
+    createElement,
+} from "@web/core/utils/xml";
+import { append } from "@web/views/view_compiler";
+
+function compileChatter(node, params) {
+    node.classList.remove("oe_chatter");
+    const container = createElement("div");
+    container.classList.add("o_FormRenderer_chatterContainer");
+
+    const chatter = createElement("ChatterContainer");
+    chatter.setAttribute("threadModel", "props.record.resModel");
+    chatter.setAttribute("threadId", "props.record.resId");
+    // TODO: pass chatterFields equivalent in props
+
+    // chatter.setAttribute("record", "props.record"); // props.record.model.load() to reload the form
+    // in ChatterContainer setup:
+    //   this.messagingService = useService("messaging");
+
+    append(container, chatter);
+    return container;
+}
+
+registry.category("form_compilers").add("chatter_compiler", {
+    selector: "div.oe_chatter",
+    fn: compileChatter,
+});
+
+FormRenderer.components.ChatterContainer = ChatterContainer;
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index bd2bb28f119..96137e56561 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -96,9 +96,10 @@ This module provides the core of the Odoo Web Client.
 
             'web/static/src/core/utils/transitions.scss',
             'web/static/src/core/**/*',
-            'web/static/src/fields/**/*',
+            'web/static/src/legacy/legacy_fields.scss',
             'web/static/src/search/**/*',
             'web/static/src/views/**/*',
+            ('remove', 'web/static/src/views/form/button_box/*.scss'),
             'web/static/src/webclient/**/*',
             ('remove', 'web/static/src/webclient/navbar/navbar.scss'), # already in _assets_common_styles
             ('remove', 'web/static/src/webclient/clickbot/clickbot.js'), # lazy loaded
@@ -141,6 +142,9 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/profiling_qweb_view.scss',
             'base/static/src/scss/res_partner.scss',
 
+            # Form style should be computed before
+            'web/static/src/views/form/button_box/*.scss',
+
             'web/static/src/legacy/action_adapters.js',
             'web/static/src/legacy/debug_manager.js',
             'web/static/src/legacy/legacy_service_provider.js',
@@ -148,6 +152,8 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/legacy_dialog.js',
             'web/static/src/legacy/legacy_load_views.js',
             'web/static/src/legacy/legacy_views.js',
+            'web/static/src/legacy/legacy_fields.js',
+            'web/static/src/legacy/legacy_view_widgets.js',
             'web/static/src/legacy/legacy_promise_error_handler.js',
             'web/static/src/legacy/legacy_rpc_error_handler.js',
             'web/static/src/legacy/root_widget.js',
@@ -355,7 +361,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/keyboard.scss',
             'web/static/src/legacy/scss/name_and_signature.scss',
             'web/static/src/legacy/scss/web.zoomodoo.scss',
-            'web/static/src/legacy/scss/color_picker.scss',
             'web/static/src/legacy/scss/fontawesome_overridden.scss',
         ],
         'web._assets_common_scripts': [
@@ -490,6 +495,7 @@ This module provides the core of the Odoo Web Client.
 
             # 'web/static/tests/legacy/main_tests.js',
             'web/static/tests/helpers/**/*.js',
+            'web/static/tests/views/helpers.js',
             'web/static/tests/search/helpers.js',
             'web/static/tests/webclient/**/helpers.js',
             'web/static/tests/qunit.js',
@@ -511,10 +517,10 @@ This module provides the core of the Odoo Web Client.
             'base/static/tests/base_settings_tests.js',
             'web/static/tests/env_tests.js',
             'web/static/tests/core/**/*.js',
-            'web/static/tests/fields/**/*.js',
             'web/static/tests/search/**/*.js',
             ('remove', 'web/static/tests/search/helpers.js'),
             'web/static/tests/views/**/*.js',
+            ('remove', 'web/static/tests/views/helpers.js'),
             'web/static/tests/webclient/**/*.js',
             ('remove', 'web/static/tests/webclient/**/helpers.js'),
             'web/static/tests/legacy/**/*.js',
diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index 2e4a5a3d34c..0f2d75a0a44 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -2,17 +2,19 @@
 
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { useActiveElement } from "../ui/ui_service";
+import { useForwardRefToParent } from "@web/core/utils/hooks";
 
-const { Component, useRef, useChildSubEnv, useState } = owl;
+const { Component, useChildSubEnv, useState } = owl;
 export class Dialog extends Component {
     setup() {
-        this.modalRef = useRef("modal");
-        useActiveElement("modal");
+        this.modalRef = useForwardRefToParent("modalRef");
+        useActiveElement("modalRef");
         this.data = useState(this.env.dialogData);
         useHotkey("escape", () => {
             this.data.close();
         });
-        useChildSubEnv({ inDialog: true });
+        this.id = `dialog_${this.data.id}`;
+        useChildSubEnv({ inDialog: true, dialogId: this.id });
     }
 }
 Dialog.template = "web.Dialog";
@@ -24,6 +26,7 @@ Dialog.props = {
     size: { type: String, optional: true, validate: (s) => ["sm", "md", "lg", "xl"].includes(s) },
     technical: { type: Boolean, optional: true },
     title: { type: String, optional: true },
+    modalRef: { type: Function, optional: true },
     slots: {
         type: Object,
         shape: {
@@ -41,3 +44,19 @@ Dialog.defaultProps = {
     technical: true,
     title: "Odoo",
 };
+
+export class SimpleDialog extends Component {
+    setup() {
+        useActiveElement("modal");
+        useHotkey("escape", () => {
+            this.props.close();
+        });
+        useChildSubEnv({ inDialog: true });
+    }
+}
+SimpleDialog.template = "web.SimpleDialog";
+SimpleDialog.props = {
+    close: Function,
+    isActive: { optional: true },
+    "*": true,
+};
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 5cacc2f9d94..048a104399f 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -2,11 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Dialog" owl="1">
-        <div class="o_dialog" t-att-class="{ o_inactive_modal: !data.isActive }">
+        <div class="o_dialog" t-att-id="id" t-att-class="{ o_inactive_modal: !data.isActive }">
             <div role="dialog" class="modal d-block"
                 tabindex="-1"
                 t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
-                t-ref="modal"
+                t-ref="modalRef"
                 >
                 <div class="modal-dialog" t-attf-class="modal-{{props.size}}">
                     <div class="modal-content" t-att-class="props.contentClass">
@@ -16,16 +16,18 @@
                             </h4>
                             <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="data.close">×</button>
                         </header>
-                        <main class="modal-body">
-                            <t t-slot="default"/>
-                        </main>
-                        <footer t-if="props.footer" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1">
+                        <!-- FIXME: WOWL there is a bug on t-portal on owl, in which t-portal don't work on multinode.
+                        To avoid this we place the footer before the body -->
+                        <footer t-if="props.footer" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1" style="order:2">
                             <t t-slot="footer">
-                                <button class="btn btn-primary" t-on-click="data.close">
+                                <button class="btn btn-primary o-default-button" t-on-click="data.close">
                                     <t>Ok</t>
                                 </button>
                             </t>
                         </footer>
+                        <main class="modal-body">
+                            <t t-slot="default"/>
+                        </main>
                     </div>
                 </div>
             </div>
diff --git a/addons/web/static/src/core/dialog/dialog_service.js b/addons/web/static/src/core/dialog/dialog_service.js
index 18be68c8aba..0d6cbc23e71 100644
--- a/addons/web/static/src/core/dialog/dialog_service.js
+++ b/addons/web/static/src/core/dialog/dialog_service.js
@@ -3,7 +3,7 @@
 import { registry } from "../registry";
 import { DialogContainer } from "./dialog_container";
 
-const { reactive } = owl;
+const { markRaw, reactive } = owl;
 
 /**
  *  @typedef {{
@@ -51,8 +51,8 @@ export const dialogService = {
             const dialog = {
                 id,
                 class: dialogClass,
-                props: { ...props, close },
-                dialogData: { isActive: true, close },
+                props: markRaw({ ...props, close }),
+                dialogData: { isActive: true, close, id },
             };
             dialogs[id] = dialog;
 
diff --git a/addons/web/static/src/core/dialog/simple_dialog.xml b/addons/web/static/src/core/dialog/simple_dialog.xml
new file mode 100644
index 00000000000..127b7d2da39
--- /dev/null
+++ b/addons/web/static/src/core/dialog/simple_dialog.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+    <t t-name="web.SimpleDialog" owl="1">
+        <div class="o_dialog" t-att-class="{ o_inactive_modal: !props.isActive }" t-on-dialog-closed="props.close">
+            <div role="dialog" class="modal d-block"
+                tabindex="-1"
+                t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
+                t-ref="modal"
+                >
+                <div class="modal-dialog" t-att-class="props.size">
+                    <div class="modal-content" t-att-class="props.contentClass">
+                        <header t-if="!props.hideHeader" class="modal-header">
+                            <h4 class="modal-title text-break">
+                                <t t-esc="props.title"/>
+                            </h4>
+                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="props.close">×</button>
+                        </header>
+                        <main class="modal-body">
+                            <t t-slot="default"/>
+                        </main>
+                        <footer t-if="props.slots.footer" class="modal-footer justify-content-start">
+                            <t t-slot="footer" close="props.close"/>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </t>
+</templates>
diff --git a/addons/web/static/src/core/errors/error_dialogs.js b/addons/web/static/src/core/errors/error_dialogs.js
index c8a3f1d569f..c5dcffd6fef 100644
--- a/addons/web/static/src/core/errors/error_dialogs.js
+++ b/addons/web/static/src/core/errors/error_dialogs.js
@@ -111,7 +111,7 @@ export class WarningDialog extends Component {
         if (this.props.exceptionName && odooExceptionTitleMap.has(this.props.exceptionName)) {
             return odooExceptionTitleMap.get(this.props.exceptionName).toString();
         }
-        return this.env._t("Odoo Warning");
+        return this.props.title || this.env._t("Odoo Warning");
     }
 }
 WarningDialog.template = "web.WarningDialog";
diff --git a/addons/web/static/src/core/utils/hooks.js b/addons/web/static/src/core/utils/hooks.js
index 48825e95ec8..381b80061cb 100644
--- a/addons/web/static/src/core/utils/hooks.js
+++ b/addons/web/static/src/core/utils/hooks.js
@@ -2,7 +2,7 @@
 
 import { SERVICES_METADATA } from "@web/env";
 
-const { status, useComponent, useEffect, useRef } = owl;
+const { status, useComponent, useEffect, useRef, onWillUnmount } = owl;
 
 /**
  * This file contains various custom hooks.
@@ -31,7 +31,7 @@ const { status, useComponent, useEffect, useRef } = owl;
  */
 export function useAutofocus() {
     const comp = useComponent();
-    let ref = useRef("autofocus");
+    const ref = useRef("autofocus");
     // Prevent autofocus in mobile
     if (comp.env.isSmall) {
         return ref;
@@ -110,7 +110,7 @@ export function useBus(bus, eventName, callback) {
  *
  * @param {string} eventName the name of the event
  * @param {string} [querySelector] a JS native selector for event delegation
- * @param {function} handler the event handler (will be bound to the component)
+ * @param {function} [handler] the event handler (will be bound to the component)
  * @param {Object} [options] to be passed to addEventListener as options.
  *   Useful for listening in the capture phase
  */
@@ -190,7 +190,7 @@ export function useService(serviceName) {
         } else {
             const methods = SERVICES_METADATA[serviceName];
             const result = Object.create(service);
-            for (let method of methods) {
+            for (const method of methods) {
                 result[method] = _protectMethod(component, service, service[method]);
             }
             return result;
@@ -198,3 +198,62 @@ export function useService(serviceName) {
     }
     return service;
 }
+
+/**
+ * @typedef {Function} ForwardRef
+ * @property {HTMLElement | undefined} el
+ */
+
+/**
+ * Use a ref that was forwarded by a child @see useForwardRefToParent
+ *
+ * @returns {ForwardRef} a ref that can be called to set its value to that of a
+ *  child ref, but can otherwise be used as a normal ref object
+ */
+export function useChildRef() {
+    let defined = false;
+    return function ref(value) {
+        if (defined) {
+            return;
+        }
+        Object.defineProperty(ref, "el", {
+            get() {
+                return value.el;
+            },
+        });
+        defined = true;
+    };
+}
+/**
+ * Forwards the given refName to the parent by calling the corresponding
+ * ForwardRef received as prop. @see useChildRef
+ *
+ * @param {string} refName name of the ref to forward
+ * @returns {{el: HTMLelement | null}} the same ref that is forwarded to the
+ *  parent
+ */
+export function useForwardRefToParent(refName) {
+    const component = useComponent();
+    const ref = useRef(refName);
+    if (component.props[refName]) {
+        component.props[refName](ref);
+    }
+    return ref;
+}
+/**
+ * Use the dialog service while also automatically closing the dialogs opened
+ * by the current component when it is unmounted.
+ */
+export function useOwnedDialogs() {
+    const dialogService = useService("dialog");
+    const cbs = [];
+    onWillUnmount(() => {
+        cbs.forEach((cb) => cb());
+    });
+    const addDialog = (...args) => {
+        const close = dialogService.add(...args);
+        cbs.push(close);
+        return close;
+    };
+    return addDialog;
+}
diff --git a/addons/web/static/src/core/utils/strings.js b/addons/web/static/src/core/utils/strings.js
index 88b5185e3f9..a53307c68a9 100644
--- a/addons/web/static/src/core/utils/strings.js
+++ b/addons/web/static/src/core/utils/strings.js
@@ -1,5 +1,7 @@
 /** @odoo-module **/
 
+export const nbsp = "\u00a0";
+
 /**
  * Escapes a string for HTML.
  * Note that it doesn't work for escaping node attributes.
diff --git a/addons/web/static/src/core/utils/xml.js b/addons/web/static/src/core/utils/xml.js
index 91bcccf8b62..01cd2a3b26b 100644
--- a/addons/web/static/src/core/utils/xml.js
+++ b/addons/web/static/src/core/utils/xml.js
@@ -1,5 +1,12 @@
 /** @odoo-module **/
 
+/**
+ * XML document to create new elements from. The fact that this is a "text/xml"
+ * document ensures that tagNames and attribute names are case sensitive.
+ */
+const parser = new DOMParser();
+const xmlDocument = parser.parseFromString("<templates/>", "text/xml");
+
 function hasParsingError(parsedDocument) {
     return parsedDocument.getElementsByTagName("parsererror").length > 0;
 }
@@ -11,29 +18,37 @@ export class XMLParser {
      */
     parse() {}
 
+    /**
+     * @param {Element | string} xml
+     * @param {(el: Element, visitChildren: () => any) => any} callback
+     */
     visitXML(xml, callback) {
-        function visit(xml) {
-            if (xml) {
+        const visit = (el) => {
+            if (el) {
                 let didVisitChildren = false;
                 const visitChildren = () => {
-                    for (let child of xml.children) {
+                    for (const child of el.children) {
                         visit(child);
                     }
                     didVisitChildren = true;
                 };
-                const shouldVisitChildren = callback(xml, visitChildren);
+                const shouldVisitChildren = callback(el, visitChildren);
                 if (shouldVisitChildren !== false && !didVisitChildren) {
                     visitChildren();
                 }
             }
-        }
+        };
         const xmlDoc = typeof xml === "string" ? this.parseXML(xml) : xml;
         visit(xmlDoc);
     }
 
+    /**
+     * @param {string} arch
+     * @returns {Element}
+     */
     parseXML(arch) {
-        const parser = new DOMParser();
-        const xml = parser.parseFromString(arch, "text/xml");
+        const cleanedArch = arch.replace(/&amp;nbsp;/g, "");
+        const xml = parser.parseFromString(cleanedArch, "text/xml");
         if (hasParsingError(xml)) {
             throw new Error(
                 `An error occured while parsing ${arch}: ${xml.getElementsByTagName("parsererror")}`
@@ -42,3 +57,92 @@ export class XMLParser {
         return xml.documentElement;
     }
 }
+
+/**
+ * @param {Element} parent
+ * @param {Node | Node[] | void} node
+ */
+export function append(parent, node) {
+    const nodes = Array.isArray(node) ? node : [node];
+    parent.append(...nodes.filter(Boolean));
+    return parent;
+}
+
+/**
+ * Combines the existing value of a node attribute with new given parts. The glue
+ * is the string used to join the parts.
+ *
+ * @param {Element} el
+ * @param {string} attr
+ * @param {string | string[]} parts
+ * @param {string} [glue=" "]
+ */
+export function combineAttributes(el, attr, parts, glue = " ") {
+    const allValues = [];
+    if (el.hasAttribute(attr)) {
+        allValues.push(el.getAttribute(attr));
+    }
+    allValues.push(...(Array.isArray(parts) ? parts : [parts]));
+    el.setAttribute(attr, allValues.join(glue));
+}
+
+/**
+ * XML equivalent of `document.createElement`.
+ *
+ * @param {string} tagName
+ * @param {...(Iterable<Element> | Record<string, string>)} args
+ * @returns {Element}
+ */
+export function createElement(tagName, ...args) {
+    const el = xmlDocument.createElement(tagName);
+    for (const arg of args) {
+        if (!arg) {
+            continue;
+        }
+        if (Symbol.iterator in arg) {
+            // Children list
+            el.append(...arg);
+        } else if (typeof arg === "object") {
+            // Attributes
+            for (const name in arg) {
+                el.setAttribute(name, arg[name]);
+            }
+        }
+    }
+    return el;
+}
+
+/**
+ * XML equivalent of `document.createTextNode`.
+ *
+ * @param {string} data
+ * @returns {Text}
+ */
+export function createTextNode(data) {
+    return xmlDocument.createTextNode(data);
+}
+
+/**
+ * Removes the given attributes on the given element and returns them as a dictionnary.
+ * @param {Element} el
+ * @param {string[]} attributes
+ * @returns {Record<string, string>}
+ */
+export function extractAttributes(el, attributes) {
+    const attrs = Object.create(null);
+    for (const attr of attributes) {
+        attrs[attr] = el.getAttribute(attr) || "";
+        el.removeAttribute(attr);
+    }
+    return attrs;
+}
+
+/**
+ * @param {Node} [node]
+ * @param {boolean} [lower=false]
+ * @returns {string}
+ */
+export function getTag(node, lower = false) {
+    const tag = (node && node.nodeName) || "";
+    return lower ? tag.toLowerCase() : tag;
+}
diff --git a/addons/web/static/src/fields/fields.js b/addons/web/static/src/fields/fields.js
deleted file mode 100644
index c046f062537..00000000000
--- a/addons/web/static/src/fields/fields.js
+++ /dev/null
@@ -1,113 +0,0 @@
-/** @odoo-module **/
-import { registry } from "@web/core/registry";
-import legacyFieldRegistry from "web.field_registry";
-import owlFieldRegistry from "web.field_registry_owl";
-import { ComponentAdapter } from "web.OwlCompatibility";
-
-const { Component, useEffect, xml } = owl;
-
-const fieldRegistry = registry.category("fields");
-
-function getFieldFromRegistry(registry, { fieldType, viewType, fieldName, fieldsDescription }) {
-    if (viewType && fieldType) {
-        const specificType = `${viewType}.${fieldType}`;
-        if (registry.contains(specificType)) {
-            return registry.get(specificType);
-        }
-    }
-    if (!registry.contains(fieldType)) {
-        const field = fieldsDescription[fieldName];
-        fieldType = field && field.type;
-    }
-    return registry.get(fieldType, null);
-}
-
-class Field extends Component {
-    static getTangibleField({ record, type, name }) {
-        const FieldClass = getFieldFromRegistry(fieldRegistry, {
-            fieldName: name,
-            fieldType: type,
-            viewType: record.viewtype,
-            fieldsDescription: record.fields,
-        });
-        return { FieldClass };
-    }
-
-    setup() {
-        const { record, type, name } = this.props;
-        this.FieldComponent = Field.getTangibleField({ record, type, name }).FieldClass;
-    }
-}
-
-Field.template = xml/* xml */ `
-    <t t-component="FieldComponent" t-props="props" class="o-field" t-key="props.record.id"/>
-`;
-
-class FieldSupportsLegacy extends Field {
-    static getTangibleField({ record, type, fieldName }) {
-        let { FieldClass } = super.getTangibleField(...arguments);
-        if (!FieldClass) {
-            FieldClass = getFieldFromRegistry(owlFieldRegistry, {
-                fieldName,
-                fieldType: type,
-                viewType: record.viewType,
-                fieldsDescription: record.fields,
-            });
-            if (FieldClass) {
-                return { FieldClass, isOwlLegacy: true };
-            } else {
-                FieldClass = getFieldFromRegistry(legacyFieldRegistry, {
-                    fieldName,
-                    fieldType: type,
-                    viewType: record.viewType,
-                    fieldsDescription: record.fields,
-                });
-                return { FieldClass, isLegacy: true };
-            }
-        }
-        return {};
-    }
-
-    setup() {
-        super.setup();
-        this.renderId = 0;
-        useEffect(() => {
-            this.renderId++;
-        });
-        if (!this.FieldComponent) {
-            this.env = Component.env;
-            const { record, type, name } = this.props;
-            const { FieldClass, isOwlLegacy, isLegacy } = FieldSupportsLegacy.getTangibleField({
-                record,
-                type,
-                name,
-            });
-            this.FieldComponent = FieldClass;
-            this.isOwlLegacy = isOwlLegacy;
-            this.isLegacy = isLegacy;
-        }
-    }
-
-    get legacyProps() {
-        const legacyRecord = Object.assign({}, this.props.model._legacyRecord_);
-        legacyRecord.data = Object.assign({}, legacyRecord.data, this.props.record.data);
-        return {
-            fieldName: this.props.name,
-            record: legacyRecord,
-        };
-    }
-
-    get widgetArgs() {
-        const { fieldName, record } = this.legacyProps;
-        return [fieldName, record];
-    }
-}
-FieldSupportsLegacy.template = xml/* xml */ `<t>
-    <t t-if="!isOwlLegacy and !isLegacy" t-call="${Field.template}" />
-    <t t-elif="isOwlLegacy" t-component="FieldComponent" t-props="legacyProps" />
-    <ComponentAdapter t-elif="isLegacy" widgetArgs="widgetArgs" Component="FieldComponent" t-key="renderId" />
-</t>
-`;
-FieldSupportsLegacy.components = { ComponentAdapter };
-
-export { FieldSupportsLegacy as Field };
diff --git a/addons/web/static/src/legacy/action_adapters.js b/addons/web/static/src/legacy/action_adapters.js
index 9765d443cf2..1fdd239e091 100644
--- a/addons/web/static/src/legacy/action_adapters.js
+++ b/addons/web/static/src/legacy/action_adapters.js
@@ -7,10 +7,9 @@ import { objectToQuery } from "../core/browser/router_service";
 import { useDebugCategory } from "../core/debug/debug_context";
 import { Dialog } from "../core/dialog/dialog";
 import { useService } from "@web/core/utils/hooks";
-import { ViewNotFoundError } from "../webclient/actions/action_service";
+import { ViewNotFoundError } from "@web/views/view";
 import { cleanDomFromBootstrap, wrapSuccessOrFail, useLegacyRefs } from "./utils";
 import { mapDoActionOptionAPI } from "./backend_utils";
-import { setScrollPosition } from "@web/webclient/actions/scrolling";
 
 const {
     Component,
@@ -94,7 +93,11 @@ class ActionAdapter extends ComponentAdapter {
         });
 
         this.onScrollTo = (payload) => {
-            setScrollPosition(this.wowlEnv, { left: payload.left, top: payload.top });
+            const contentEl = this.el.querySelector(".o_content");
+            if (contentEl) {
+                contentEl.scrollLeft = payload.left || 0;
+                contentEl.scrollTop = payload.top || 0;
+            }
         };
     }
 
@@ -301,7 +304,7 @@ export class ViewAdapter extends ActionAdapter {
         useDebugCategory("action", debugContext);
         useDebugCategory("view", debugContext);
         if (this.props.viewInfo.type === "form") {
-            useDebugCategory("form", debugContext);
+            useDebugCategory("form_legacy", debugContext);
         }
         this.env = Component.env;
     }
@@ -376,21 +379,21 @@ export class ViewAdapter extends ActionAdapter {
     async _trigger_up(ev) {
         const payload = ev.data;
         if (ev.name === "switch_view") {
-            try {
-                const props = {};
-                if (payload.mode) {
-                    props.mode = payload.mode;
+            if (payload.view_type === "form") {
+                if (payload.res_id) {
+                    return this.props.selectRecord(payload.res_id, { mode: payload.mode });
+                } else {
+                    return this.props.createRecord();
                 }
-                // if (payload.res_id) {
-                // if make 'open a record, come back, and create a new record' crash
-                props.resId = payload.res_id;
-                // }
-                await this.actionService.switchView(payload.view_type, props);
-            } catch (e) {
-                if (e instanceof ViewNotFoundError) {
-                    return;
+            } else {
+                try {
+                    await this.actionService.switchView(payload.view_type);
+                } catch (e) {
+                    if (typeof e === "object" && e instanceof ViewNotFoundError) {
+                        return;
+                    }
+                    throw e;
                 }
-                throw e;
             }
         } else if (ev.name === "execute_action") {
             const buttonContext = new Context(payload.action_data.context).eval();
diff --git a/addons/web/static/src/legacy/backend_utils.js b/addons/web/static/src/legacy/backend_utils.js
index 6fcaad96ba1..1382cbfe9b9 100644
--- a/addons/web/static/src/legacy/backend_utils.js
+++ b/addons/web/static/src/legacy/backend_utils.js
@@ -91,6 +91,9 @@ function searchModelStateFromLegacy(state) {
         newState.sections = sections;
         //! Can be undefined. See search_model.__legacyParseSearchPanelArchAnyway
         newState.searchPanelInfo = searchPanelInfo;
+        if (newState.searchPanelInfo) {
+            newState.searchPanelInfo.loaded = true;
+        }
     }
 
     for (const [key, extension] of Object.entries(ActionModel.registry.entries())) {
@@ -166,12 +169,15 @@ export function searchModelStateToLegacy(state) {
                 filter.orderedBy = item.orderBy;
                 delete filter.orderBy;
                 break;
-            case "filter":
+            case "filter": {
                 let context = item.context;
                 try {
                     context = makeContext([context]);
-                } catch (_e) {}
+                } catch (_e) {
+                    // pass
+                }
                 filter.context = context;
+            }
         }
         filters[item.id] = filter;
     }
diff --git a/addons/web/static/src/legacy/debug_manager.js b/addons/web/static/src/legacy/debug_manager.js
index ec823a43bc6..7492e3caaab 100644
--- a/addons/web/static/src/legacy/debug_manager.js
+++ b/addons/web/static/src/legacy/debug_manager.js
@@ -1,12 +1,11 @@
 /** @odoo-module **/
 
-import { _lt } from "@web/core/l10n/translation";
 import { Dialog } from "@web/core/dialog/dialog";
-import { FormViewDialog } from 'web.view_dialogs';
+import { FormViewDialog } from "web.view_dialogs";
 import { formatDateTime, parseDateTime } from "@web/core/l10n/dates";
-import { formatMany2one } from "@web/fields/formatters";
+import { formatMany2one } from "@web/views/fields/formatters";
 import { registry } from "@web/core/registry";
-import { standaloneAdapter } from 'web.OwlCompatibility';
+import { standaloneAdapter } from "web.OwlCompatibility";
 
 const { Component, onWillStart, useState } = owl;
 
@@ -14,7 +13,7 @@ const debugRegistry = registry.category("debug");
 
 class GetMetadataDialog extends Component {
     setup() {
-        super.setup();
+        this.title = this.env._t("View Metadata");
         this.state = useState({});
         onWillStart(this.onWillStart);
     }
@@ -25,7 +24,7 @@ class GetMetadataDialog extends Component {
 
     async onClickCreateXmlid() {
         const context = Object.assign({}, this.context, {
-            default_module: '__custom__',
+            default_module: "__custom__",
             default_res_id: this.state.id,
             default_model: this.props.res_model,
         });
@@ -34,9 +33,9 @@ class GetMetadataDialog extends Component {
             context: context,
             on_saved: () => this.getMetadata(),
             disable_multiple_selection: true,
-            res_model: 'ir.model.data',
+            res_model: "ir.model.data",
         });
-        dialog.on('dialog_form_loaded', this, () => {
+        dialog.on("dialog_form_loaded", this, () => {
             dialog.$el.find('[name="name"]').focus();
         });
         await dialog.open();
@@ -61,16 +60,20 @@ class GetMetadataDialog extends Component {
         this.state.creator = formatMany2one(metadata.create_uid);
         this.state.lastModifiedBy = formatMany2one(metadata.write_uid);
         this.state.noupdate = metadata.noupdate;
-        this.state.create_date = formatDateTime(parseDateTime(metadata.create_date), { timezone: true });
-        this.state.write_date = formatDateTime(parseDateTime(metadata.write_date), { timezone: true });
+        this.state.createDate = formatDateTime(parseDateTime(metadata.create_date), {
+            timezone: true,
+        });
+        this.state.writeDate = formatDateTime(parseDateTime(metadata.write_date), {
+            timezone: true,
+        });
     }
 }
 GetMetadataDialog.template = "web.DebugMenu.GetMetadataDialog";
 GetMetadataDialog.components = { Dialog };
-GetMetadataDialog.title = _lt("View Metadata");
+
 class SetDefaultDialog extends Component {
     setup() {
-        super.setup();
+        this.title = this.env._t("Set Defaults");
         this.state = {
             fieldToSet: "",
             condition: "",
@@ -212,11 +215,9 @@ class SetDefaultDialog extends Component {
 }
 SetDefaultDialog.template = "web.DebugMenu.SetDefaultDialog";
 SetDefaultDialog.components = { Dialog };
-SetDefaultDialog.title = _lt("Set Default");
 
 // Form view items
-
-export function setDefaults({ action, component, env }) {
+function setDefaults({ action, component, env }) {
     return {
         type: "item",
         description: env._t("Set Defaults"),
@@ -282,7 +283,7 @@ function manageAttachments({ action, component, env }) {
 }
 
 debugRegistry
-    .category("form")
+    .category("form_legacy")
     .add("setDefaults", setDefaults)
     .add("viewMetadata", viewMetadata)
     .add("manageAttachments", manageAttachments);
diff --git a/addons/web/static/src/legacy/js/components/action_menus.js b/addons/web/static/src/legacy/js/components/action_menus.js
index 221540d4ce8..0a07ab92a99 100644
--- a/addons/web/static/src/legacy/js/components/action_menus.js
+++ b/addons/web/static/src/legacy/js/components/action_menus.js
@@ -202,7 +202,7 @@ odoo.define('web.ActionMenus', function (require) {
             },
         },
     };
-    ActionMenus.template = 'web.ActionMenus';
+    ActionMenus.template = 'web.Legacy.ActionMenus';
 
     return ActionMenus;
 });
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields.js b/addons/web/static/src/legacy/js/fields/basic_fields.js
index 44dea68bd42..bfafef604a9 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields.js
@@ -1631,7 +1631,7 @@ var FieldText = InputField.extend(TranslatableFieldMixin, {
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
-    
+
     /**
      * @private
      * @override
@@ -4155,7 +4155,7 @@ var FieldColorPicker = FieldInteger.extend({
         if (!$colorpicker.length) {
             return;
         }
-        $colorpicker.html(qweb.render('KanbanColorPicker', { colors: this.RECORD_COLORS }));
+        $colorpicker.html(qweb.render('web.Legacy.KanbanColorPicker', { colors: this.RECORD_COLORS }));
         $colorpicker.on('click', 'a', this._onColorChanged.bind(this));
     },
     /**
diff --git a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
index c57b68d3a18..9f2fb02af85 100644
--- a/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
+++ b/addons/web/static/src/legacy/js/fields/basic_fields_owl.js
@@ -152,7 +152,7 @@ odoo.define('web.basic_fields_owl', function (require) {
     FieldBoolean.components = { CustomCheckbox };
     FieldBoolean.description = _lt("Checkbox");
     FieldBoolean.supportedFieldTypes = ['boolean'];
-    FieldBoolean.template = 'web.FieldBoolean';
+    FieldBoolean.template = 'web.LegacyFieldBoolean';
     FieldBoolean.isQuickEditable = true;
 
 
diff --git a/addons/web/static/src/legacy/js/fields/relational_fields.js b/addons/web/static/src/legacy/js/fields/relational_fields.js
index 1fd63768b23..de9d2aee02b 100644
--- a/addons/web/static/src/legacy/js/fields/relational_fields.js
+++ b/addons/web/static/src/legacy/js/fields/relational_fields.js
@@ -1363,7 +1363,7 @@ var FieldX2Many = AbstractField.extend(WidgetAdapterMixin, {
             if (extraInfo.subFieldName) {
                 parts.push(`[name="${extraInfo.subFieldName}"]`);
             }
-    
+
             if (parts.length) {
                 const el = this.el.querySelector(parts.join(' '));
                 if (el) {
@@ -2041,7 +2041,7 @@ var FieldOne2Many = FieldX2Many.extend({
 
     /**
      * @private
-     * @param {*} data 
+     * @param {*} data
      */
     _addCreateRecordRow(data) {
         const self = this;
@@ -3308,7 +3308,7 @@ var FieldStatus = AbstractField.extend({
  */
 var FieldSelection = AbstractField.extend({
     description: _lt("Selection"),
-    template: 'FieldSelection',
+    template: 'web.Legacy.FieldSelection',
     specialData: "_fetchSpecialRelation",
     supportedFieldTypes: ['selection'],
     events: _.extend({}, AbstractField.prototype.events, {
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_controller.js b/addons/web/static/src/legacy/js/views/kanban/kanban_controller.js
index 223705f4b38..84aad47500d 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_controller.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_controller.js
@@ -238,7 +238,7 @@ var KanbanController = BasicController.extend({
         const state = this.model.get(this.handle, {raw: true});
         if (!state.count || state.isSample) {
             const classesList = [
-                'o_kanban_view',
+                'o_legacy_kanban_view',
                 'o_kanban_group',
                 'o_kanban_header',
                 'o_column_quick_create',
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_record.js b/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
index a797371373c..a507ab98a8d 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_record.js
@@ -614,7 +614,7 @@ var KanbanRecord = Widget.extend(WidgetAdapterMixin, {
         if (!$colorpicker.length) {
             return;
         }
-        $colorpicker.html(QWeb.render('KanbanColorPicker', { colors: KANBAN_RECORD_COLORS}));
+        $colorpicker.html(QWeb.render('web.Legacy.KanbanColorPicker', { colors: KANBAN_RECORD_COLORS}));
         $colorpicker.on('click', 'a', this._onColorChanged.bind(this));
     },
     /**
diff --git a/addons/web/static/src/legacy/js/views/kanban/kanban_renderer.js b/addons/web/static/src/legacy/js/views/kanban/kanban_renderer.js
index 5703e804ada..80f2a2a5128 100644
--- a/addons/web/static/src/legacy/js/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/legacy/js/views/kanban/kanban_renderer.js
@@ -83,7 +83,7 @@ function transformQwebTemplate(node, fields) {
 }
 
 var KanbanRenderer = BasicRenderer.extend({
-    className: 'o_kanban_view',
+    className: 'o_legacy_kanban_view',
     config: { // the KanbanRecord and KanbanColumn classes to use (may be overridden)
         KanbanColumn: KanbanColumn,
         KanbanRecord: KanbanRecord,
@@ -99,7 +99,7 @@ var KanbanRenderer = BasicRenderer.extend({
         'keydown .o_kanban_record' : '_onRecordKeyDown'
     }),
     sampleDataTargets: [
-        '.o_kanban_counter',
+        '.o_legacy_kanban_counter',
         '.o_kanban_record',
         '.o_kanban_toggle_fold',
         '.o_column_folded',
diff --git a/addons/web/static/src/legacy/js/views/view_dialogs.js b/addons/web/static/src/legacy/js/views/view_dialogs.js
index 669b09d8185..23b7b5fa502 100644
--- a/addons/web/static/src/legacy/js/views/view_dialogs.js
+++ b/addons/web/static/src/legacy/js/views/view_dialogs.js
@@ -400,7 +400,7 @@ var SelectCreateDialog = ViewDialog.extend({
         var view = new ViewClass(fieldsViews[this.viewType], _.extend(viewOptions, {
             action: {
                 controlPanelFieldsView: fieldsViews.search,
-                help: markup(_.str.sprintf("<p>%s</p>", _t("No records found!"))),
+                help: markup(_.str.sprintf("<p>%s</p>", _.escape(_t("No records found!")))),
             },
             action_buttons: false,
             dynamicFilters: this.options.dynamicFilters,
diff --git a/addons/web/static/src/legacy/legacy_fields.js b/addons/web/static/src/legacy/legacy_fields.js
new file mode 100644
index 00000000000..8f086f22cb4
--- /dev/null
+++ b/addons/web/static/src/legacy/legacy_fields.js
@@ -0,0 +1,314 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { sprintf } from "@web/core/utils/strings";
+import { Domain } from "web.Domain";
+import legacyFieldRegistry from "web.field_registry";
+import { ComponentAdapter } from "web.OwlCompatibility";
+import viewUtils from "web.viewUtils";
+
+const { Component, useEffect, xml } = owl;
+const fieldRegistry = registry.category("fields");
+
+const legacyFieldTemplate = xml`
+    <FieldAdapter Component="FieldWidget" fieldParams="fieldParams" update.bind="update" record="props.record"/>`;
+
+// -----------------------------------------------------------------------------
+// FieldAdapter
+// -----------------------------------------------------------------------------
+
+class FieldAdapter extends ComponentAdapter {
+    setup() {
+        super.setup();
+        this.wowlEnv = this.env;
+        this.env = Component.env;
+        useEffect(() => {
+            // if classNames are given to the field, we only want
+            // to add those classes to the legacy field without
+            // the parent element affecting the style of the field
+            const fieldClassnames =
+                this.props.fieldParams.options &&
+                this.props.fieldParams.options.attrs &&
+                this.props.fieldParams.options.attrs.class;
+            if (fieldClassnames) {
+                for (const className of fieldClassnames.split(" ")) {
+                    this.widgetEl.parentElement.classList.remove(className);
+                }
+                this.widgetEl.parentElement.style.display = "contents";
+            }
+            this.widgetEl.parentElement.classList.remove("o_text_overflow");
+            this.widgetEl.classList.add("o_legacy_field_widget");
+        });
+        this.lastFieldChangedEvent = null;
+    }
+
+    /**
+     * @override
+     */
+    get widgetArgs() {
+        const { name, record, options } = this.props.fieldParams;
+        return [name, record, options];
+    }
+
+    updateWidget(nextProps) {
+        const { name, record, options } = nextProps.fieldParams;
+        if (this.widget.mode !== options.mode) {
+            // the mode changed, we need to instantiate a new FieldWidget
+            if (this.oldWidget) {
+                this.widget.destroy(); // we were already updating -> abort, and start over
+            } else {
+                this.oldWidget = this.widget;
+            }
+            this.widget = new this.props.Component(this, name, record, options);
+            return this.widget._widgetRenderAndInsert(() => {});
+        } else {
+            // the mode is the same, simply reset the FieldWidget with the new record
+            return this.widget.reset(record, this.lastFieldChangedEvent);
+        }
+    }
+
+    renderWidget() {
+        if (this.oldWidget) {
+            const parentEl = this.oldWidget.el.parentElement;
+            parentEl.replaceChild(this.widget.el, this.oldWidget.el);
+            this.widgetEl = this.widget.el;
+            if (this.widget.on_attach_callback) {
+                this.widget.on_attach_callback();
+            }
+            this.oldWidget.destroy();
+            this.oldWidget = null;
+        }
+    }
+
+    async _trigger_up(ev) {
+        const evType = ev.name;
+        const payload = ev.data;
+        if (evType === "set_dirty") {
+            // TODO (not yet handled in the Record datapoint)
+        } else if (evType === "field_changed") {
+            const { name, record } = this.props.fieldParams;
+            const proms = [];
+            for (const fieldName in payload.changes) {
+                let value = payload.changes[fieldName];
+                const fieldType = record.fields[name].type;
+                if (fieldType === "many2one" && value) {
+                    value = [value.id, value.display_name];
+                } else if (fieldType === "one2many" || fieldType === "many2many") {
+                    // TODO map all operations
+                    if (value.operation === "ADD_M2M") {
+                        const valueIds = value.ids; // can be a lot of stuff
+                        let newIds = [];
+                        if (Array.isArray(valueIds)) {
+                            if (typeof valueIds[0] === "number") {
+                                newIds = valueIds; // not sure if it is a real case: a list of ids
+                            } else if (valueIds.length && "id" in valueIds[0]) {
+                                newIds = valueIds.map((r) => r.id);
+                            }
+                        } else if ("id" in valueIds) {
+                            newIds = [valueIds.id];
+                        }
+                        value = {
+                            resIds: [...record.data[name].res_ids, ...newIds],
+                            operation: "REPLACE_WITH",
+                        };
+                    }
+                } else if (fieldType === "date" || fieldType === "datetime") {
+                    // from moment to luxon
+                    value = value ? luxon.DateTime.fromISO(value.toISOString()) : false;
+                }
+                proms.push(this.props.update(fieldName, value));
+            }
+            this.lastFieldChangedEvent = ev;
+            await Promise.all(proms);
+            if (payload.onSuccess) {
+                payload.onSuccess();
+            }
+            // TODO: handle onFailure?
+        } else if (evType === "reload") {
+            const record = this.props.record;
+            if (payload.db_id === record.id) {
+                await record.load();
+            } else {
+                await record.model.root.load();
+            }
+            record.model.notify();
+            if (payload.onSuccess) {
+                payload.onSuccess();
+            }
+        } else if (evType === "history_back") {
+            return this.wowlEnv.config.historyBack();
+        }
+        super._trigger_up(...arguments);
+    }
+}
+
+// -----------------------------------------------------------------------------
+// Helpers to map wowl datapoints to basic model datapoints
+// -----------------------------------------------------------------------------
+
+let nextId = 1;
+function createMany2OneDatapoint([resId, displayName]) {
+    return {
+        id: `m2o_${nextId++}`,
+        data: { id: resId, display_name: displayName },
+        fields: {
+            display_name: { type: "char" },
+            id: { type: "integer" },
+        },
+        res_id: resId,
+        ref: resId,
+    };
+}
+
+function mapDatapoint(datapoint) {
+    return {
+        id: datapoint.id,
+        model: datapoint.resModel,
+        fields: datapoint.fields,
+        fieldsInfo: {
+            default: datapoint.activeFields, // TODO: how to handle viewTypes?
+        },
+        getContext: () => [], // TODO: not yet handled in wowl
+        getDomain: () => [], // TODO: not yet handled in wowl
+        getFieldNames: () => datapoint.fieldNames,
+    };
+}
+
+function mapStaticListDatapoint(staticList) {
+    return {
+        ...mapDatapoint(staticList),
+        res_ids: staticList.currentIds,
+        data: staticList.records.map(mapRecordDatapoint),
+        groupedBy: [],
+        orderedBy: staticList.orderBy,
+    };
+}
+
+export function mapRecordDatapoint(record) {
+    const data = Object.assign({}, record.data);
+    for (const fieldName of record.fieldNames) {
+        const fieldType = record.fields[fieldName].type;
+        switch (fieldType) {
+            case "one2many":
+            case "many2many":
+                data[fieldName] = mapStaticListDatapoint(data[fieldName]);
+                break;
+            case "many2one":
+                data[fieldName] = data[fieldName] && createMany2OneDatapoint(data[fieldName]);
+                break;
+            case "date":
+            case "datetime":
+                // from luxon to moment
+                data[fieldName] = data[fieldName] ? moment(data[fieldName].toISO()) : false;
+        }
+    }
+    data.id = record.resId;
+    const basicModelRecord = {
+        ...mapDatapoint(record),
+        res_id: record.resId,
+        data,
+    };
+    Object.defineProperty(basicModelRecord, "evalContext", {
+        get: () => record.evalContext,
+    });
+    Object.defineProperty(basicModelRecord, "isDirty", {
+        get: () => record.isDirty,
+    });
+    Object.defineProperty(basicModelRecord, "isNew", {
+        get: () => record.isDirty,
+    });
+    basicModelRecord.evalModifiers = (modifiers) => {
+        let evalContext = null;
+        const evaluated = {};
+        for (const k of ["invisible", "column_invisible", "readonly", "required"]) {
+            const mod = modifiers[k];
+            if (mod === undefined || mod === false || mod === true) {
+                if (k in modifiers) {
+                    evaluated[k] = !!mod;
+                }
+                continue;
+            }
+            try {
+                evalContext = evalContext || basicModelRecord.evalContext;
+                evaluated[k] = new Domain(mod, evalContext).compute(evalContext);
+            } catch (e) {
+                throw new Error(sprintf('for modifier "%s": %s', k, e.message));
+            }
+        }
+        return evaluated;
+    };
+    return basicModelRecord;
+}
+
+// -----------------------------------------------------------------------------
+// Register legacy field widgets to the wowl field registry (wrapped in a Component)
+// -----------------------------------------------------------------------------
+
+function registerField(name, LegacyFieldWidget) {
+    class LegacyField extends Component {
+        setup() {
+            this.FieldWidget = LegacyFieldWidget;
+        }
+
+        get fieldParams() {
+            const { name, record } = this.props;
+            if (record.model.__bm__) {
+                const legacyRecord = record.model.__bm__.get(record.__bm_handle__);
+                const options = {
+                    viewType: legacyRecord.viewType,
+                    hasReadonlyModifier: record.isReadonly(name),
+                    mode: record.mode,
+                };
+                return { name, record: legacyRecord, options };
+            } else {
+                const legacyRecord = mapRecordDatapoint(record);
+                const fieldInfo = record.activeFields[name];
+                const views = {};
+                for (const viewType in fieldInfo.views || {}) {
+                    let arch = fieldInfo.views[viewType].arch;
+                    if (viewType === "list") {
+                        const editable = fieldInfo.views.list.editable;
+                        arch = `<tree editable='${editable}'></tree>`;
+                    }
+                    // FIXME: need the legacy fieldInfo here
+                    views[viewType] = {
+                        ...fieldInfo.views[viewType],
+                        arch: viewUtils.parseArch(arch),
+                    };
+                }
+                const options = {
+                    attrs: {
+                        ...fieldInfo.rawAttrs,
+                        modifiers: JSON.parse(fieldInfo.rawAttrs.modifiers || "{}"),
+                        options: fieldInfo.options,
+                        widget: fieldInfo.widget,
+                        views,
+                        mode: fieldInfo.viewMode,
+                    },
+                    mode: record.mode,
+                };
+                return { name, record: legacyRecord, options };
+            }
+        }
+
+        update(fieldName, value) {
+            if (fieldName === this.props.name) {
+                return this.props.update(value);
+            } else {
+                return this.props.record.update({ [fieldName]: value });
+            }
+        }
+    }
+    LegacyField.template = legacyFieldTemplate;
+    LegacyField.components = { FieldAdapter };
+    LegacyField.fieldsToFetch = LegacyFieldWidget.prototype.fieldsToFetch || {};
+    if (!fieldRegistry.contains(name)) {
+        fieldRegistry.add(name, LegacyField);
+    }
+}
+
+// register fields already in the legacy registry, and listens to future registrations
+for (const [name, FieldWidget] of Object.entries(legacyFieldRegistry.entries())) {
+    registerField(name, FieldWidget);
+}
+legacyFieldRegistry.onAdd(registerField);
diff --git a/addons/web/static/src/legacy/legacy_fields.scss b/addons/web/static/src/legacy/legacy_fields.scss
new file mode 100644
index 00000000000..33d9188634f
--- /dev/null
+++ b/addons/web/static/src/legacy/legacy_fields.scss
@@ -0,0 +1,3 @@
+.o_legacy_field_widget > * {
+    background-color: rgba(255, 0, 0, 0.1);
+}
diff --git a/addons/web/static/src/legacy/legacy_view_widgets.js b/addons/web/static/src/legacy/legacy_view_widgets.js
new file mode 100644
index 00000000000..89b6970c050
--- /dev/null
+++ b/addons/web/static/src/legacy/legacy_view_widgets.js
@@ -0,0 +1,101 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { ComponentAdapter } from "web.OwlCompatibility";
+import legacyWidgetRegistry from "web.widget_registry";
+import { mapRecordDatapoint } from "./legacy_fields";
+
+const { Component, useEffect, xml } = owl;
+const viewWidgetRegistry = registry.category("view_widgets");
+
+const legacyWidgetTemplate = xml`
+    <ViewWidgetAdapter Component="ViewWidget" viewWidgetParams="viewWidgetParams" />`;
+
+// ----------------------------------------------------------------------------
+// ViewWidgetAdapter
+// ----------------------------------------------------------------------------
+
+class ViewWidgetAdapter extends ComponentAdapter {
+    setup() {
+        super.setup();
+        this.wowlEnv = this.env;
+        this.env = Component.env;
+        useEffect(() => {
+            this.widgetEl.parentElement.classList.remove("o_text_overflow");
+            this.widgetEl.classList.add("o_legacy_widget");
+        });
+    }
+
+    /**
+     * @override
+     */
+    get widgetArgs() {
+        return this.getParams(this.props);
+    }
+
+    getParams(props) {
+        const { record, node, options, readonly } = props.viewWidgetParams;
+        return [record, node, { mode: readonly ? "readonly" : "edit", ...options }];
+    }
+
+    updateWidget(nextProps) {
+        if (this.oldWidget) {
+            this.widget.destroy(); // we were already updating -> abort, and start over
+        } else {
+            this.oldWidget = this.widget;
+        }
+        this.widget = new this.props.Component(this, ...this.getParams(nextProps));
+        return this.widget._widgetRenderAndInsert(() => {});
+    }
+
+    renderWidget() {
+        if (this.oldWidget) {
+            const parentEl = this.oldWidget.el.parentElement;
+            parentEl.replaceChild(this.widget.el, this.oldWidget.el);
+            this.widgetEl = this.widget.el;
+            if (this.widget.on_attach_callback) {
+                this.widget.on_attach_callback();
+            }
+            this.oldWidget.destroy();
+            this.oldWidget = null;
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+// Register legacy widgets to the wowl widget registry (wrapped in a Component)
+// ----------------------------------------------------------------------------
+
+function registerWidget(name, LegacyWidgetWidget) {
+    class LegacyViewWidget extends Component {
+        setup() {
+            this.ViewWidget = LegacyWidgetWidget;
+        }
+        get viewWidgetParams() {
+            const { record } = this.props;
+            let legacyRecord;
+            if (record.model.__bm__) {
+                legacyRecord = record.model.__bm__.get(record.__bm_handle__);
+            } else {
+                legacyRecord = mapRecordDatapoint(record);
+            }
+            const options = {
+                viewType: legacyRecord.viewType,
+                mode: record.mode,
+            };
+            return { ...this.props, record: legacyRecord, options };
+        }
+    }
+    LegacyViewWidget.template = legacyWidgetTemplate;
+    LegacyViewWidget.components = { ViewWidgetAdapter };
+    if (!viewWidgetRegistry.contains(name)) {
+        console.log(`View widgets: using legacy ${name} Widget`);
+        viewWidgetRegistry.add(name, LegacyViewWidget);
+    }
+}
+
+// register widgets already in the legacy registry, and listens to future registrations
+for (const [name, Widget] of Object.entries(legacyWidgetRegistry.entries())) {
+    registerWidget(name, Widget);
+}
+legacyWidgetRegistry.onAdd(registerWidget);
diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index b8c167c87e6..f326d98ebf2 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -27,11 +27,14 @@ function getJsClassWidget(fieldsInfo) {
 
 const legacyViewTemplate = xml`
     <ViewAdapter Component="Widget" View="View" viewInfo="viewInfo" viewParams="viewParams"
-                 widget="widget" onReverseBreadcrumb="onReverseBreadcrumb" />`;
+                 widget="widget" onReverseBreadcrumb="onReverseBreadcrumb" selectRecord="props.selectRecord" createRecord="props.createRecord"/>`;
 
 // registers a view from the legacy view registry to the wowl one, but wrapped
 // into an Owl Component
 function registerView(name, LegacyView) {
+    if (viewRegistry.contains(name)) {
+        return;
+    }
     class Controller extends LegacyComponent {
         setup() {
             this.vm = useService("view");
@@ -51,11 +54,13 @@ function registerView(name, LegacyView) {
 
             // always add user context to the action context
             this.user = useService("user");
-            const action = Object.assign({}, this.props.action, {
-                context: Object.assign({}, this.user.context, this.props.action.context),
-            });
+            const action = Object.assign({}, this.props.action);
+            action.context = Object.assign({}, this.user.context, action.context);
 
-            const { actionFlags, breadcrumbs } = this.env.config;
+            const { actionFlags, breadcrumbs, noBreadcrumbs } = this.env.config;
+            if (noBreadcrumbs) {
+                action.context.no_breadcrumbs = true;
+            }
             this.viewParams = Object.assign({}, actionFlags, {
                 action,
                 // legacy views automatically add the last part of the breadcrumbs
@@ -90,6 +95,11 @@ function registerView(name, LegacyView) {
             this.onReverseBreadcrumb =
                 this.props.state && this.props.state.__on_reverse_breadcrumb__;
             useSetupAction({
+                rootRef: {
+                    get el() {
+                        return legacyRefs.widget && legacyRefs.widget.el;
+                    },
+                },
                 beforeLeave: () => legacyRefs.widget.canBeRemoved(),
                 getGlobalState: () => getGlobalState(legacyRefs.component.exportState()),
                 getLocalState: () => getLocalState(legacyRefs.component.exportState()),
@@ -100,7 +110,7 @@ function registerView(name, LegacyView) {
         async onWillStart() {
             const params = {
                 resModel: this.props.resModel,
-                views: this.props.views,
+                views: this.props.views || this.env.config.views,
                 context: this.props.context,
             };
             const options = {
@@ -110,13 +120,13 @@ function registerView(name, LegacyView) {
             };
             const viewDescriptions = await this.vm.loadViews(params, options);
             const result = viewDescriptions.__legacy__;
-            const fieldsInfo = result.fields_views[this.props.type];
+            const fieldsInfo = result.fields_views[this.props.type || this.env.config.viewType];
             const jsClass = getJsClassWidget(fieldsInfo);
             this.View = jsClass || this.View;
             this.viewInfo = Object.assign({}, fieldsInfo, {
                 fields: result.fields,
                 viewFields: fieldsInfo.fields,
-                type: this.props.type,
+                type: this.props.type || this.env.config.viewType,
             });
             let controlPanelFieldsView;
             if (result.fields_views.search) {
@@ -127,7 +137,8 @@ function registerView(name, LegacyView) {
                 });
             }
             const { viewSwitcherEntries = [] } = this.env.config;
-            const views = this.viewParams.action.views
+            const _views = this.viewParams.action.views || this.env.config.views;
+            const views = _views
                 .filter(([, vtype]) => vtype !== "search")
                 .map(([vid, vtype]) => {
                     const view = viewSwitcherEntries.find((v) => v.type === vtype);
@@ -137,29 +148,32 @@ function registerView(name, LegacyView) {
                         return {
                             viewID: vid,
                             type: vtype,
-                            multiRecord: !this.constructor.multiRecord,
+                            multiRecord: !legacyView.multiRecord,
                         };
                     }
                 });
             this.viewParams.action = Object.assign({}, this.viewParams.action, {
                 controlPanelFieldsView,
-                _views: this.viewParams.action.views,
+                _views,
                 views,
             });
         }
     }
-    Controller.template = legacyViewTemplate;
 
+    Controller.template = legacyViewTemplate;
     Controller.components = { ViewAdapter };
-    Controller.display_name = LegacyView.prototype.display_name;
-    Controller.icon = LegacyView.prototype.icon;
-    Controller.isMobileFriendly = LegacyView.prototype.mobile_friendly;
-    Controller.multiRecord = LegacyView.prototype.multi_record;
-    Controller.type = LegacyView.prototype.viewType;
-    Controller.isLegacy = true;
-    if (!viewRegistry.contains(name)) {
-        viewRegistry.add(name, Controller);
-    }
+    Controller.isLegacy = true; // for action dialog
+
+    const legacyView = {
+        type: LegacyView.prototype.viewType,
+        display_name: LegacyView.prototype.display_name,
+        icon: LegacyView.prototype.icon,
+        isMobileFriendly: LegacyView.prototype.mobile_friendly,
+        multiRecord: LegacyView.prototype.multi_record,
+        isLegacy: true,
+        Controller,
+    };
+    viewRegistry.add(name, legacyView);
 }
 
 // register views already in the legacy registry, and listens to future registrations
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 91d9c21a069..68a3f368efa 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -322,7 +322,7 @@
     }
 
     // Stars
-    &.o_priority {
+    &.o_priority, & .o_priority {
         display: inline-block;
         padding: 0;
         margin: 0;
@@ -349,7 +349,7 @@
     }
 
     // Favorite
-    &.o_favorite {
+    &.o_favorite, & .o_favorite {
         i.fa {
             font-size: 16px;
         }
@@ -367,7 +367,7 @@
     }
 
     // Handle widget
-    &.o_row_handle {
+    .o_row_handle {
         @include o-grab-cursor;
         color: #adb5bd;
         text-align: center;
@@ -477,7 +477,7 @@
     }
 
     // Image
-    &.o_field_image {
+    &.o_field_image, &.o_field_image_url {
         position: relative;
 
         .o_form_image_controls {
@@ -577,7 +577,6 @@
                 right: 0;
             }
             &.o_btn_char_copy {
-                padding-top: 2px;
                 height: 100%;
             }
         }
@@ -596,18 +595,6 @@
         display: inline-block;
     }
 
-    &.o_field_badge {
-        border: 0;
-        font-size: 12px;
-        user-select: none;
-        background-color: rgba(lightgray, 0.5);
-        font-weight: 500;
-        @include o-text-overflow;
-        transition: none; // remove transition to prevent badges from flickering at reload
-        &.o_field_empty {
-            display: none !important;
-        }
-    }
 }
 
 span.o_field_copy:empty {
diff --git a/addons/web/static/src/legacy/scss/form_view.scss b/addons/web/static/src/legacy/scss/form_view.scss
index 24f0d23349f..162a0d1086a 100644
--- a/addons/web/static/src/legacy/scss/form_view.scss
+++ b/addons/web/static/src/legacy/scss/form_view.scss
@@ -886,7 +886,7 @@ $o-form-label-margin-right: 0px;
     }
 
     // One2Many Kanban views
-    .o_field_widget .o_kanban_view.o_kanban_ungrouped {
+    .o_field_widget .o_legacy_kanban_view.o_kanban_ungrouped {
         padding: 0;
         .o_kanban_record {
             box-shadow: none;
@@ -1061,7 +1061,7 @@ $o-form-label-margin-right: 0px;
 }
 
 // Settings form views
-.o_settings_container {
+.o_legacy_settings_container {
     display: flex;
     flex: 0 1 auto;
     flex-flow: row wrap;
diff --git a/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss b/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
index 36f3b508fe8..22ac8e1f4a8 100644
--- a/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
+++ b/addons/web/static/src/legacy/scss/kanban_column_progressbar.scss
@@ -41,20 +41,20 @@
 }
 
 // If columns has the progressbar, adapt the layout
-.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
+.o_legacy_kanban_view .o_kanban_group.o_kanban_has_progressbar {
     > .o_kanban_header .o_kanban_header_title {
         height: $o-kanban-header-title-height*0.6;
         margin-top: 5px;
     }
 
     &.o_kanban_no_records {
-        .o_kanban_counter {
+        .o_legacy_kanban_counter {
             opacity: 0.3;
         }
     }
 }
 
-.o_kanban_counter {
+.o_legacy_kanban_counter {
     position: relative;
     display: flex;
     align-items: center;
@@ -102,11 +102,11 @@
         }
     }
 }
-.o_column_folded .o_kanban_counter {
+.o_column_folded .o_legacy_kanban_counter {
     display: none;
 }
 
-.o_kanban_view .o_kanban_group {
+.o_legacy_kanban_view .o_kanban_group {
     @include o-kanban-css-filter(success, theme-color('success'));
     @include o-kanban-css-filter(warning, theme-color('warning'));
     @include o-kanban-css-filter(danger, theme-color('danger'));
diff --git a/addons/web/static/src/legacy/scss/kanban_dashboard.scss b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
index 40c2508f27c..587df3fa402 100644
--- a/addons/web/static/src/legacy/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/legacy/scss/kanban_dashboard.scss
@@ -1,5 +1,5 @@
 
-.o_kanban_view.o_kanban_dashboard {
+.o_legacy_kanban_view.o_kanban_dashboard {
     &:not(.o_kanban_grouped) {
         // correctly display the no_content_helper in dashboards
         flex-flow: row wrap;
@@ -31,8 +31,6 @@
         }
 
         .o_kanban_card_manage_pane {
-            @include o-kanban-dropdown-menu;
-
             // Arbitrary value to place the dropdown-menu exactly below the
             // dropdown-toggle (height is forced so that it works on Firefox)
             top: $o-kanban-manage-toggle-height;
diff --git a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
index 503cf4f0acb..5c17f6c7a5d 100644
--- a/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
+++ b/addons/web/static/src/legacy/scss/kanban_examples_dialog.scss
@@ -1,5 +1,5 @@
 // container ghost card in modal
-.o_kanban_examples_dialog {
+.o_legacy_kanban_examples_dialog{
     display: flex;
     padding: 0px;
     background: theme-color('light');
diff --git a/addons/web/static/src/legacy/scss/kanban_view.scss b/addons/web/static/src/legacy/scss/kanban_view.scss
index 399bcde90fe..e8097edcdf2 100644
--- a/addons/web/static/src/legacy/scss/kanban_view.scss
+++ b/addons/web/static/src/legacy/scss/kanban_view.scss
@@ -1,5 +1,5 @@
 // ------- Kanban View Layout -------
-.o_kanban_view {
+.o_legacy_kanban_view {
     display: flex;
     align-content: stretch;
 
@@ -249,7 +249,6 @@
                 @include o-kanban-dropdown-open;
             }
             .dropdown-menu {
-                @include o-kanban-dropdown-menu;
                 min-width: 11rem;
             }
         }
@@ -619,6 +618,7 @@
 
             &.o_kanban_ghost {
                 height: 0;
+                border: none;
                 min-height: 0!important; // to prevent view writers to override this height
                 visibility: hidden;
                 margin-top: 0;
@@ -645,7 +645,7 @@
 }
 
 // ----------------- Set Cover Dialog -----------------
-.modal .o_kanban_cover_container .o_kanban_cover_image {
+.modal .o_legacy_kanban_cover_container .o_kanban_cover_image {
     border: 1px solid $border-color;
     height: 120px;
     width: 120px;
diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss
index 0a6a4888232..ebebeb8e1f6 100644
--- a/addons/web/static/src/legacy/scss/list_view.scss
+++ b/addons/web/static/src/legacy/scss/list_view.scss
@@ -372,7 +372,7 @@
 }
 
 // Buttons in ControlPanel
-.o_list_buttons {
+.o_legacy_list_buttons {
     .o_list_button_save, .o_list_button_discard {
         display: none;
     }
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index 3fc0e09322b..ba314b269ef 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -348,12 +348,6 @@
     border-color: $border-color;
     z-index: $zindex-dropdown + 1;
 }
-@mixin o-kanban-dropdown-menu {
-    @include o-position-absolute($right: -1px);
-    margin-top: -2px;
-    border-color: $border-color;
-    border-top-right-radius: 0;
-}
 @mixin o-kanban-colorpicker {
     max-width: 150px;
     padding: 3px ($o-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $o-dropdown-hpadding;
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index f5af47f0f1c..5cc5407cc75 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -3,6 +3,10 @@
  * all renderers. For field default rules, see the fields.scss file.
  */
 
+.o_legacy_kanban_view {
+    border-top: 2px solid red;
+}
+
 // Invisible modifier (can be inside the view, the button area, ...)
 .o_invisible_modifier {
     display: none!important;
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index 40570509185..7417c09d2ef 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -396,7 +396,7 @@
     </div>
 </t>
 
-<t t-name="web.ActionMenus" owl="1">
+<t t-name="web.Legacy.ActionMenus" owl="1">
     <div class="o_cp_action_menus" t-on-item-selected.stop="_onItemSelected">
         <DropdownMenu t-if="printItems.length"
             title="printButtonStrings.title"
@@ -574,7 +574,7 @@
 </div>
 
 <t t-name="ListView.buttons">
-    <div class="o_list_buttons d-flex" role="toolbar" aria-label="Main actions">
+    <div class="o_legacy_list_buttons d-flex" role="toolbar" aria-label="Main actions">
         <button type="button" class="btn btn-primary o_list_button_save" title="Save record" accesskey="s">
             Save
         </button>
@@ -996,7 +996,7 @@
         <span class="o_datepicker_button"/>
     </div>
 </t>
-<t t-name="FieldSelection">
+<t t-name="web.Legacy.FieldSelection">
     <span t-if="widget.mode === 'readonly'"/>
 
     <select t-if="widget.mode !== 'readonly'"
diff --git a/addons/web/static/src/legacy/xml/fields.xml b/addons/web/static/src/legacy/xml/fields.xml
index 01a6c54927e..f3cd6d232ae 100644
--- a/addons/web/static/src/legacy/xml/fields.xml
+++ b/addons/web/static/src/legacy/xml/fields.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-    <t t-name="web.FieldBoolean" owl="1">
+    <t t-name="web.LegacyFieldBoolean" owl="1">
         <CustomCheckbox disabled="hasReadonlyModifier"
             value="value" class="'o_field_boolean'" onChange.bind="_onChange"/>
     </t>
diff --git a/addons/web/static/src/legacy/xml/kanban.xml b/addons/web/static/src/legacy/xml/kanban.xml
index b7577961844..f59a6a8386d 100644
--- a/addons/web/static/src/legacy/xml/kanban.xml
+++ b/addons/web/static/src/legacy/xml/kanban.xml
@@ -80,7 +80,7 @@
     </div>
 </t>
 
-<t t-name="KanbanColorPicker">
+<t t-name="web.Legacy.KanbanColorPicker">
     <t t-foreach="colors" t-as="color">
         <li>
             <a role="menuitem"
@@ -108,7 +108,7 @@
 </t>
 
 <t t-name="KanbanView.ColumnProgressBar">
-    <div class="o_kanban_counter">
+    <div class="o_legacy_kanban_counter">
         <div class="o_kanban_counter_progress progress">
             <t t-foreach="widget.colors" t-as="color">
                 <t t-set="count" t-value="widget.subgroupCounts and widget.subgroupCounts[color] or 0"/>
@@ -124,7 +124,7 @@
 </t>
 
 <t t-name="KanbanView.SetCoverModal">
-    <div t-if="attachmentIds.length" class="o_kanban_cover_container bg-100">
+    <div t-if="attachmentIds.length" class="o_legacy_kanban_cover_container bg-100">
         <t t-foreach="attachmentIds" t-as="attachment">
             <div t-attf-class="o_kanban_cover_image position-relative d-inline-block m-2 bg-white #{coverId === attachment.id ? ' o_selected' : ''}">
                 <img t-attf-src="/web/image/#{attachment.id}?unique=1" t-att-data-id="attachment.id" t-att-data-name="attachment.name" class="m-auto mw-100" alt="Attachment"/>
@@ -143,7 +143,7 @@
 </t>
 
 <!-- Note: this dialog isn't responsive, but it is not accessible on mobile -->
-<div t-name="KanbanView.ExamplesDialog" class="o_kanban_examples_dialog">
+<div t-name="KanbanView.ExamplesDialog" class="o_legacy_kanban_examples_dialog">
     <div class="o_kanban_examples_dialog_nav">
         <ul class="nav nav-pills flex-column">
             <t t-foreach="examples" t-as="example">
diff --git a/addons/web/static/src/views/basic_relational_model.js b/addons/web/static/src/views/basic_relational_model.js
new file mode 100644
index 00000000000..ef55c07b1eb
--- /dev/null
+++ b/addons/web/static/src/views/basic_relational_model.js
@@ -0,0 +1,1399 @@
+/* @odoo-module */
+
+import { makeContext } from "@web/core/context";
+import { Domain } from "@web/core/domain";
+import { WarningDialog } from "@web/core/errors/error_dialogs";
+import {
+    deserializeDate,
+    deserializeDateTime,
+    serializeDate,
+    serializeDateTime,
+} from "@web/core/l10n/dates";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { escape } from "@web/core/utils/strings";
+import { mapDoActionOptionAPI } from "@web/legacy/backend_utils";
+import { Model } from "@web/views/model";
+import { evalDomain } from "@web/views/utils";
+import BasicModel from "web.BasicModel";
+import Context from "web.Context";
+import fieldRegistry from "web.field_registry";
+import { parse } from "web.field_utils";
+import { traverse } from "web.utils";
+import { parseArch } from "web.viewUtils";
+
+const { date: parseDate, datetime: parseDateTime } = parse;
+const { markup, toRaw } = owl;
+
+const DEFAULT_HANDLE_FIELD = "sequence";
+
+function mapWowlValueToLegacy(value, type) {
+    switch (type) {
+        case "date":
+            // from luxon to moment
+            return value ? parseDate(serializeDate(value), null, { isUTC: true }) : false;
+        case "datetime":
+            // from luxon to moment
+            return value ? parseDateTime(serializeDateTime(value), null, { isUTC: true }) : false;
+        case "many2one":
+            return value ? { id: value[0], display_name: value[1] } : false;
+        case "reference":
+            return value
+                ? { id: value.resId, display_name: value.displayName, model: value.resModel }
+                : false;
+        case "one2many":
+        case "many2many":
+            if (value.operation === "REPLACE_WITH") {
+                return { operation: "REPLACE_WITH", ids: value.resIds };
+            }
+            return value;
+        default:
+            return value;
+    }
+}
+
+function mapViews(views) {
+    const res = {};
+    for (const [viewType, viewDescr] of Object.entries(views || {})) {
+        const arch = parseArch(viewDescr.__rawArch);
+        traverse(arch, function (node) {
+            if (typeof node === "string") {
+                return false;
+            }
+            node.attrs.modifiers = node.attrs.modifiers ? JSON.parse(node.attrs.modifiers) : {};
+            return true;
+        });
+        // the basic model expects the former shape of load_views result, where we don't know
+        // all co-model fields, only those in the subview, so we filter the fields here
+        const fields = {};
+        for (const f in viewDescr.activeFields) {
+            fields[f] = viewDescr.fields[f];
+        }
+        res[viewType] = {
+            arch,
+            fields,
+            type: viewType,
+            fieldsInfo: mapActiveFieldsToFieldsInfo(viewDescr.activeFields, fields, viewType),
+        };
+        for (const fieldName in res[viewType].fieldsInfo[viewType]) {
+            if (!res[viewType].fields[fieldName]) {
+                res[viewType].fields[fieldName] = {
+                    name: fieldName,
+                    type: res[viewType].fieldsInfo[viewType][fieldName].type,
+                };
+            }
+        }
+    }
+    return res;
+}
+
+function mapActiveFieldsToFieldsInfo(activeFields, fields, viewType) {
+    const fieldsInfo = {};
+    fieldsInfo[viewType] = {};
+    for (const [fieldName, fieldDescr] of Object.entries(activeFields)) {
+        const views = mapViews(fieldDescr.views);
+        const field = fields[fieldName];
+        let Widget;
+        if (fieldDescr.widget) {
+            Widget = fieldRegistry.getAny([`${viewType}.${fieldDescr.widget}`, fieldDescr.widget]);
+        } else {
+            Widget = fieldRegistry.getAny([`${viewType}.${field.type}`, field.type]);
+        }
+        Widget = Widget || fieldRegistry.get("abstract");
+        let domain;
+        if (fieldDescr.domain && fieldDescr.domain.toString() !== "[]") {
+            domain = fieldDescr.domain.toString();
+        }
+        const fieldInfo = {
+            Widget,
+            domain,
+            context: fieldDescr.context,
+            fieldDependencies: {}, // ??
+            mode: fieldDescr.viewMode,
+            modifiers: fieldDescr.modifiers,
+            name: fieldName,
+            options: fieldDescr.options,
+            views,
+            widget: fieldDescr.widget,
+            __WOWL_FIELD_DESCR__: fieldDescr,
+        };
+
+        if (fieldDescr.FieldComponent && fieldDescr.FieldComponent.limit) {
+            fieldInfo.limit = fieldDescr.FieldComponent.limit;
+        }
+
+        if (fieldDescr.modifiers && fieldDescr.modifiers.invisible === true) {
+            fieldInfo.__no_fetch = true;
+        }
+
+        if (!fieldInfo.__no_fetch && Widget.prototype.fieldsToFetch) {
+            fieldDescr.fieldsToFetch = fieldDescr.fieldsToFetch || {};
+            fieldInfo.relatedFields = { ...Widget.prototype.fieldsToFetch };
+            fieldInfo.viewType = "default";
+            const defaultView = {};
+            for (const fieldName of Object.keys(Widget.prototype.fieldsToFetch)) {
+                defaultView[fieldName] = {};
+                if (fieldDescr.fieldsToFetch[fieldName]) {
+                    defaultView[fieldName].__WOWL_FIELD_DESCR__ =
+                        fieldDescr.fieldsToFetch[fieldName];
+                }
+            }
+            fieldInfo.fieldsInfo = { default: defaultView };
+            const colorField = fieldInfo.options && fieldInfo.options.color_field;
+            if (colorField) {
+                fieldInfo.relatedFields[colorField] = { type: "integer" };
+                fieldInfo.fieldsInfo.default[colorField] = {};
+                if (fieldDescr.fieldsToFetch[colorField]) {
+                    fieldInfo.fieldsInfo.default[colorField].__WOWL_FIELD_DESCR__ =
+                        fieldDescr.fieldsToFetch[colorField];
+                }
+            }
+        }
+        if (fieldDescr.views && fieldDescr.views[fieldDescr.viewMode]) {
+            fieldInfo.limit = fieldDescr.views[fieldDescr.viewMode].limit || 40;
+            fieldInfo.orderedBy = fieldDescr.views[fieldDescr.viewMode].defaultOrder;
+        }
+        if (fieldDescr.onChange && !fields[fieldName].onChange) {
+            fields[fieldName].onChange = "1";
+        }
+        // FIXME? FieldWidget in kanban undefined
+        fieldsInfo[viewType][fieldName] = fieldInfo;
+    }
+    return fieldsInfo;
+}
+
+let nextId = 0;
+class DataPoint {
+    /**
+     * @param {RelationalModel} model
+     * @param {Object} [params={}]
+     * @param {Object} [state={}]
+     */
+    constructor(model, params, state = {}) {
+        this.id = `datapoint_${nextId++}`;
+        this.model = model;
+
+        let info;
+        if (params.__bm_load_params__) {
+            this.__bm_load_params__ = params.__bm_load_params__;
+            info = this.__bm_load_params__;
+        } else if (params.handle) {
+            this.__bm_handle__ = params.handle;
+            info = this.model.__bm__.get(this.__bm_handle__);
+        } else {
+            throw new Error("Datapoint needs load params or handle");
+        }
+        this.context = info.context;
+        this.resModel = info.model || info.modelName;
+        this.fields = info.fields;
+        this.activeFields = {};
+
+        this.__syncParent = params.__syncParent || (() => {});
+        this.__viewType = params.viewType || info.viewType;
+        const fieldsInfo = (info.fieldsInfo && info.fieldsInfo[this.__viewType]) || {};
+        for (const [name, descr] of Object.entries(fieldsInfo)) {
+            this.activeFields[name] = descr.__WOWL_FIELD_DESCR__ || {};
+        }
+
+        this.setup(params, state);
+    }
+
+    /**
+     * @abstract
+     * @param {Object} params
+     * @param {Object} state
+     */
+    setup() {}
+
+    get evalContext() {
+        const datapoint = this.model.__bm__.localData[this.__bm_handle__];
+        const evalContext = this.model.__bm__._getEvalContext(datapoint);
+        // FIXME: in the basic model, we set the toJSON function on x2many values
+        // s.t. we send commands to the server. In wowl Domain, we JSON.stringify
+        // values to compare them, so it doesn't work as expected.
+        for (const key in evalContext) {
+            if (evalContext[key]) {
+                delete evalContext[key].toJSON;
+            }
+        }
+        return evalContext;
+    }
+
+    get fieldNames() {
+        return Object.keys(this.activeFields);
+    }
+
+    exportState() {
+        return {};
+    }
+
+    async load() {
+        throw new Error("load must be implemented");
+    }
+}
+
+export class Record extends DataPoint {
+    setup(params, state) {
+        this.data = {};
+        this._invalidFields = new Set();
+        this.preloadedData = {};
+        this.selected = false;
+        this.isInQuickCreation = params.isInQuickCreation || false;
+        this._onChangePromise = Promise.resolve({});
+        this._savePromise = Promise.resolve();
+        this._domains = {};
+        this._closeInvalidFieldsNotification = () => {};
+
+        this._requiredFields = {};
+        for (const [fieldName, activeField] of Object.entries(this.activeFields)) {
+            const { modifiers } = activeField;
+            if (modifiers && modifiers.required) {
+                this._requiredFields[fieldName] = modifiers.required;
+            }
+        }
+
+        this.mode = params.mode || (this.resId ? state.mode || "readonly" : "edit");
+        this._onWillSwitchMode = params.onRecordWillSwitchMode || (() => {});
+
+        if (this.__bm_handle__) {
+            this.__syncData();
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get canBeAbandoned() {
+        return this.model.__bm__.canBeAbandoned(this.__bm_handle__);
+    }
+
+    /**
+     * Since the ORM can support both `active` and `x_active` fields for
+     * the archiving mechanism, check if any such field exists and prioritize
+     * them. The `active` field should always take priority over its custom
+     * version.
+     *
+     * @returns {boolean} true iff the field is active or there is no `active`
+     *   or `x_active` field on the model
+     */
+    get isActive() {
+        if ("active" in this.activeFields) {
+            return this.data.active;
+        } else if ("x_active" in this.activeFields) {
+            return this.data.x_active;
+        }
+        return true;
+    }
+
+    get isDirty() {
+        return this.model.__bm__.isDirty(this.__bm_handle__);
+    }
+
+    get dirtyFields() {
+        return Object.keys(this.model.__bm__.localData[this.__bm_handle__]._changes).map(
+            (change) => this.activeFields[change]
+        );
+    }
+
+    get translatableFields() {
+        return Object.values(this.fields)
+            .filter((f) => f.translate)
+            .map((f) => this.activeFields[f.name]);
+    }
+
+    get dirtyTranslatableFields() {
+        return this.translatableFields.filter((f) => this.dirtyFields.includes(f));
+    }
+
+    get isInEdition() {
+        return this.mode === "edit";
+    }
+
+    get isNew() {
+        return this.model.__bm__.isNew(this.__bm_handle__);
+    }
+
+    get isVirtual() {
+        // FIXME: not sure about this virtual thing
+        return !this.resId;
+    }
+
+    get resId() {
+        if (this.__bm_handle__) {
+            const resId = this.model.__bm__.localData[this.__bm_handle__].res_id;
+            if (typeof resId === "string") {
+                return false;
+            }
+            return resId;
+        } else {
+            // record not loaded yet
+            return this.__bm_load_params__.res_id;
+        }
+    }
+
+    get resIds() {
+        return this.model.__bm__.localData[this.__bm_handle__].res_ids;
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    checkValidity() {
+        for (const fieldName in this.activeFields) {
+            const fieldType = this.fields[fieldName].type;
+            if (fieldName in this._requiredFields) {
+                if (!evalDomain(this._requiredFields[fieldName], this.evalContext)) {
+                    this._removeInvalidFields([fieldName]);
+                    continue;
+                }
+            }
+            switch (fieldType) {
+                case "boolean":
+                case "float":
+                case "integer":
+                    continue;
+                case "one2many":
+                case "many2many":
+                    if (!this.checkX2ManyValidity(fieldName)) {
+                        this.setInvalidField(fieldName);
+                    }
+                    break;
+                default:
+                    if (this.isRequired(fieldName) && !this.data[fieldName]) {
+                        this.setInvalidField(fieldName);
+                    }
+            }
+        }
+        return !this._invalidFields.size;
+    }
+
+    async switchMode(mode) {
+        if (this.mode === mode) {
+            return;
+        }
+        const preventSwitch = await this._onWillSwitchMode(this, mode);
+        if (preventSwitch === false) {
+            return;
+        }
+
+        if (mode === "edit") {
+            // wait for potential pending changes to be saved (done with widgets
+            // allowing to edit in readonly)
+            await this.model.__bm__.mutex.getUnlockedDef();
+        }
+
+        if (mode === "readonly") {
+            for (const fieldName in this.activeFields) {
+                if (["one2many", "many2many"].includes(this.fields[fieldName].type)) {
+                    const editedRecord = this.data[fieldName] && this.data[fieldName].editedRecord;
+                    if (editedRecord) {
+                        editedRecord.switchMode("readonly");
+                    }
+                }
+            }
+        }
+        this.mode = mode;
+        this.model.notify();
+    }
+
+    /**
+     * FIXME: memoize this at some point?
+     * @param {string} fieldName
+     * @returns {boolean}
+     */
+    isReadonly(fieldName) {
+        const { readonly } = this.activeFields[fieldName].modifiers || {};
+        return evalDomain(readonly, this.evalContext);
+    }
+
+    /**
+     * FIXME: memoize this at some point?
+     * @param {string} fieldName
+     * @returns {boolean}
+     */
+    isRequired(fieldName) {
+        const { required } = this.activeFields[fieldName].modifiers || {};
+        return evalDomain(required, this.evalContext);
+    }
+
+    checkX2ManyValidity(fieldName) {
+        const list = this.data[fieldName];
+        const record = list.editedRecord;
+        if (record && record.isNew && !record.checkValidity()) {
+            if (record.canBeAbandoned) {
+                list.abandonRecord(record.id);
+            } else {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    setInvalidField(fieldName) {
+        this._invalidFields.add(fieldName);
+        const bm = this.model.__bm__;
+        bm.setDirty(this.__bm_handle__);
+        this.model.notify();
+    }
+
+    isInvalid(fieldName) {
+        return this._invalidFields.has(fieldName);
+    }
+
+    async load(params = {}) {
+        if (!this.__bm_handle__) {
+            this.__bm_handle__ = await this.model.__bm__.load({
+                ...this.__bm_load_params__,
+                viewType: this.__viewType,
+            });
+        } else {
+            await this.model.__bm__.reload(this.__bm_handle__, {
+                viewType: this.__viewType,
+            });
+        }
+        this.__syncData();
+        this._invalidFields = new Set();
+    }
+
+    exportState() {
+        return {
+            mode: this.mode,
+            resId: this.resId,
+            resIds: this.resIds,
+        };
+    }
+
+    __syncData(force) {
+        const bm = this.model.__bm__;
+        const legDP = bm.get(this.__bm_handle__);
+        const data = Object.assign({}, legDP.data);
+        for (const fieldName of this.fieldNames) {
+            const fieldType = legDP.fields[fieldName].type;
+            switch (fieldType) {
+                case "date":
+                case "datetime": {
+                    // from moment to luxon
+                    if (data[fieldName]) {
+                        const deserialize =
+                            fieldType === "date" ? deserializeDate : deserializeDateTime;
+                        data[fieldName] = deserialize(JSON.stringify(data[fieldName]));
+                    }
+                    break;
+                }
+                case "one2many":
+                case "many2many": {
+                    const currentVal = this.data[fieldName];
+                    if (
+                        !data[fieldName] ||
+                        (currentVal && currentVal.__bm_handle__ === data[fieldName].id && !force)
+                    ) {
+                        data[fieldName] = this.data[fieldName];
+                        data[fieldName].__syncData();
+                    } else {
+                        const { viewMode, views } = this.activeFields[fieldName];
+                        const handleField =
+                            (views && views[viewMode] && views[viewMode].handleField) || null;
+                        data[fieldName] = new StaticList(this.model, {
+                            handle: data[fieldName].id,
+                            handleField,
+                            viewType: viewMode,
+                            __syncParent: async (value) => {
+                                await this.model.__bm__.save(this.__bm_handle__, {
+                                    savePoint: true,
+                                });
+                                await this.update({ [fieldName]: value });
+                            },
+                        });
+                        data[fieldName].__fieldName__ = fieldName;
+                    }
+                    break;
+                }
+                case "many2one": {
+                    if (data[fieldName]) {
+                        data[fieldName] = [
+                            data[fieldName].data.id,
+                            data[fieldName].data.display_name || "",
+                        ];
+                    } else {
+                        data[fieldName] = false;
+                    }
+                    break;
+                }
+                case "reference": {
+                    data[fieldName] = data[fieldName]
+                        ? {
+                              resModel: data[fieldName].model,
+                              resId: data[fieldName].data.id,
+                              displayName: data[fieldName].data.display_name,
+                          }
+                        : false;
+                    break;
+                }
+                case "char": {
+                    data[fieldName] = data[fieldName] || "";
+                    break;
+                }
+                case "html": {
+                    data[fieldName] = markup(data[fieldName] || "");
+                    break;
+                }
+            }
+            if (legDP.specialData[fieldName]) {
+                this.preloadedData[fieldName] = legDP.specialData[fieldName];
+            }
+        }
+        this.data = data;
+    }
+
+    getFieldContext(fieldName) {
+        return this.model.__bm__.localData[this.__bm_handle__].getContext({
+            fieldName,
+            viewType: this.__viewType,
+        });
+    }
+
+    getFieldDomain(fieldName) {
+        const domain = this.model.__bm__.localData[this.__bm_handle__].getDomain({
+            fieldName,
+            viewType: this.__viewType,
+        });
+        return new Domain(JSON.parse(JSON.stringify(domain))); // legacy pyjs inserts weird structures
+    }
+
+    async update(changes) {
+        if (this.batchingUpdateProm) {
+            // Assign changes in the current batch
+            Object.assign(this.batchChanges, changes);
+            return this._updatePromise;
+        }
+
+        this.batchingUpdateProm = Promise.resolve();
+        this.batchChanges = Object.assign({}, changes);
+
+        let resolveUpdatePromise;
+        this._updatePromise = new Promise((r) => {
+            resolveUpdatePromise = r;
+        });
+
+        await this.batchingUpdateProm;
+        changes = this.batchChanges;
+        this.batchingUpdateProm = null;
+        this.batchChanges = null;
+
+        const data = {};
+        for (const [fieldName, value] of Object.entries(changes)) {
+            const fieldType = this.fields[fieldName].type;
+            data[fieldName] = mapWowlValueToLegacy(value, fieldType);
+        }
+        if (this._urgentSave) {
+            return this.model.__bm__.notifyChanges(this.__bm_handle__, data, {
+                viewType: this.__viewType,
+                notifyChange: false,
+            });
+        }
+
+        const parentID = this.model.__bm__.localData[this.__bm_handle__].parentID;
+        if (parentID && this.__viewType === "list") {
+            // inside an x2many (parentID is the id of the static list datapoint)
+            const mainRecordId = this.model.__bm__.localData[parentID].parentID;
+            const mainRecordDP = this.model.__bm__.localData[mainRecordId];
+            const mainRecordValues = { ...mainRecordDP.data, ...mainRecordDP._changes };
+            const x2manyFieldName = Object.keys(mainRecordValues).find(
+                (name) => mainRecordValues[name] === parentID
+            );
+            if (!x2manyFieldName) {
+                throw new Error("couldn't find x2many field name");
+            }
+            const operation = { operation: "UPDATE", id: this.__bm_handle__, data };
+            await this.__syncParent(operation);
+        } else {
+            const prom = this.model.__bm__.notifyChanges(this.__bm_handle__, data, {
+                viewType: this.__viewType,
+            });
+            prom.catch(resolveUpdatePromise); // onchange rpc may return an error
+            await prom;
+            this.__syncData();
+        }
+        this._removeInvalidFields(Object.keys(changes));
+        this.model.notify();
+        resolveUpdatePromise();
+    }
+
+    /**
+     *
+     * @param {Object} options
+     * @param {boolean} [options.stayInEdition=false]
+     * @param {boolean} [options.noReload=false] prevents the record from
+     *  reloading after changes are applied, typically used to defer the load.
+     * @returns {Promise<boolean>}
+     */
+    async save(options = { stayInEdition: false, noReload: false, savePoint: false }) {
+        const shouldSwitchToReadonly = !options.stayInEdition && this.isInEdition;
+        let resolveSavePromise;
+        this._savePromise = new Promise((r) => {
+            resolveSavePromise = r;
+        });
+        const proms = [];
+        this.model.env.bus.trigger("RELATIONAL_MODEL:NEED_LOCAL_CHANGES", { proms });
+        await Promise.all([...proms, this._updatePromise]);
+        this._closeInvalidFieldsNotification();
+        if (!this.checkValidity()) {
+            const invalidFields = [...this._invalidFields].map((fieldName) => {
+                return `<li>${escape(this.fields[fieldName].string || fieldName)}</li>`;
+            }, this);
+            this._closeInvalidFieldsNotification = this.model.notificationService.add(
+                markup(`<ul>${invalidFields.join("")}</ul>`),
+                {
+                    title: this.model.env._t("Invalid fields: "),
+                    type: "danger",
+                }
+            );
+            resolveSavePromise();
+            return false;
+        }
+        const saveOptions = {
+            reload: !options.noReload,
+            savePoint: options.savePoint,
+        };
+        try {
+            await this.model.__bm__.save(this.__bm_handle__, saveOptions);
+        } catch (_e) {
+            resolveSavePromise();
+            if (!this.isInEdition) {
+                await this.load();
+                this.model.notify();
+            }
+            return false;
+        }
+        this.__syncData(true);
+        if (shouldSwitchToReadonly) {
+            this.switchMode("readonly");
+        }
+        this.model.notify();
+        resolveSavePromise();
+        return true;
+    }
+
+    /**
+     * To be called **only** when Odoo is about to be closed, and we want to
+     * save potential changes on a given record.
+     *
+     * We can't follow the normal flow (onchange(s) + save, mutexified),
+     * because the 'beforeunload' handler must be *almost* sync (< 10 ms
+     * setTimeout seems fine, but an rpc roundtrip is definitely too long),
+     * so here we bypass the standard mechanism of notifying changes and
+     * saving them:
+     *  - we ask the model to bypass its mutex for upcoming 'notifyChanges' and
+     *   'save' requests
+     *  - we ask all fields to commit their changes (in case there would
+     *    be a focused field with a fresh value)
+     *  - we take all changes that have been reported to the
+     *    controller, but not yet sent to the model because of the mutex,
+     *    and directly notify the model about them, see update.
+     *  - we reset the widgets with all those changes, s.t. a further call
+     *    to 'canBeRemoved' uses the correct data (it asks the widgets if
+     *    they are set/valid, based on their internal state)
+     *  - if the record is dirty, we save directly
+     *
+     * @param {string} recordID
+     * @private
+     */
+    async urgentSave() {
+        this.model.__bm__.bypassMutex = true;
+        this._urgentSave = true;
+        this.model.env.bus.trigger("RELATIONAL_MODEL:WILL_SAVE_URGENTLY");
+        await Promise.resolve();
+        this.__syncData();
+        if (this.isDirty && this.checkValidity()) {
+            this.model.__bm__.save(this.__bm_handle__, { reload: false });
+        }
+        this.model.__bm__.bypassMutex = false;
+    }
+
+    async archive() {
+        await this.model.__bm__.actionArchive([this.resId], this.__bm_handle__);
+        this.__syncData();
+        this.model.notify();
+    }
+
+    async unarchive() {
+        await this.model.__bm__.actionUnarchive([this.resId], this.__bm_handle__);
+        this.__syncData();
+        this.model.notify();
+    }
+
+    // FIXME AAB: to discuss: not sure we want to keep resIds in the model (this concerns
+    // "duplicate" and "delete"). Alternative: handle this in form_view (but then what's the
+    // point of calling a Record method to do the operation?)
+    async duplicate() {
+        this.__bm_handle__ = await this.model.__bm__.duplicateRecord(this.__bm_handle__);
+        this.__syncData();
+        this.switchMode("edit");
+        this.model.notify();
+    }
+
+    async delete() {
+        await this.model.__bm__.deleteRecords([this.__bm_handle__], this.resModel);
+        if (this.resIds.length) {
+            await this.load();
+        }
+        this.model.notify();
+    }
+
+    toggleSelection(selected) {
+        if (typeof selected === "boolean") {
+            this.selected = selected;
+        } else {
+            this.selected = !this.selected;
+        }
+        this.model.notify();
+    }
+
+    async discard() {
+        await this._savePromise;
+        this._closeInvalidFieldsNotification();
+        this.model.__bm__.discardChanges(this.__bm_handle__);
+        this._invalidFields = new Set();
+        this.__syncData();
+        if (this.resId) {
+            this.switchMode("readonly");
+        }
+        this.model.notify();
+    }
+
+    _removeInvalidFields(fieldNames) {
+        for (const fieldName of fieldNames) {
+            this._invalidFields.delete(fieldName);
+        }
+    }
+}
+
+export class StaticList extends DataPoint {
+    setup(params, state) {
+        /** @type {Record[]} */
+        this.records = [];
+
+        this.handleField = params.handleField;
+
+        this.editedRecord = null;
+        this.onRecordWillSwitchMode = async (record, mode) => {
+            if (mode === "edit") {
+                await this.model.__bm__.save(this.__bm_handle__, { savePoint: true });
+                this.model.__bm__.freezeOrder(this.__bm_handle__);
+            }
+
+            const editedRecord = this.editedRecord;
+            if (editedRecord && editedRecord.id === record.id && mode === "readonly") {
+                const valid = record.checkValidity();
+                if (valid) {
+                    this.editedRecord = null;
+                }
+                return valid;
+            }
+            if (editedRecord) {
+                const isValid = editedRecord.checkValidity();
+                if (!isValid && editedRecord.canBeAbandoned) {
+                    this.abandonRecord(editedRecord.id);
+                } else {
+                    await editedRecord.switchMode("readonly");
+                }
+            }
+            if (mode === "edit") {
+                this.editedRecord = record;
+            }
+        };
+
+        this.__syncData();
+    }
+
+    __syncData() {
+        const legacyListDP = this.model.__bm__.get(this.__bm_handle__);
+        this.records = legacyListDP.data.map((dp) => {
+            let record = this.records.find((r) => r.__bm_handle__ === dp.id);
+            if (record) {
+                record.__syncData();
+            } else {
+                record = new Record(this.model, {
+                    handle: dp.id,
+                    onRecordWillSwitchMode: this.onRecordWillSwitchMode,
+                    mode: "readonly",
+                    viewType: this.__viewType,
+                    __syncParent: async (value) => {
+                        await this.__syncParent(value);
+                    },
+                });
+                if (record.mode === "edit" && this.editedRecord) {
+                    this.editedRecord.mode = "readonly";
+                }
+            }
+            return record;
+        });
+        this.editedRecord = this.records.find((r) => r.mode === "edit") || null;
+    }
+
+    // FIXME: remove?
+    get resIds() {
+        return this.model.__bm__.get(this.__bm_handle__).res_ids;
+    }
+    get currentIds() {
+        return this.model.__bm__.get(this.__bm_handle__).res_ids;
+    }
+
+    get orderBy() {
+        return this.model.__bm__.localData[this.__bm_handle__].orderedBy;
+    }
+    get limit() {
+        return this.model.__bm__.localData[this.__bm_handle__].limit;
+    }
+    get offset() {
+        return this.model.__bm__.localData[this.__bm_handle__].offset;
+    }
+    get count() {
+        return this.currentIds.length;
+    }
+
+    abandonRecord(recordId) {
+        const record = this.records.find((r) => r.id === recordId);
+        this.model.__bm__.removeLine(record.__bm_handle__);
+        this.__syncData();
+        this.model.notify();
+    }
+
+    canResequence() {
+        return this.handleField || DEFAULT_HANDLE_FIELD in this.fields;
+    }
+
+    removeRecord(record) {
+        // if (true) { see _onRemoveRecord in rel fields
+        this.delete(record.id);
+        // }
+    }
+
+    async delete(recordId, operation = "DELETE") {
+        const record = this.records.find((r) => r.id === recordId);
+        await this.__syncParent({ operation, ids: [record.__bm_handle__] });
+    }
+
+    async add(object, params = { isM2M: false }) {
+        let operation;
+        const bm = this.model.__bm__;
+        if (object instanceof Record) {
+            const recHandle = object.__bm_handle__;
+            await bm.save(recHandle, { savePoint: !params.isM2M, viewType: object.__viewType });
+            if (params.isM2M) {
+                const id = bm.localData[recHandle].res_id;
+                operation = { operation: "ADD_M2M", ids: [{ id }] };
+            } else {
+                operation = { operation: "ADD", id: recHandle };
+            }
+        } else if (Array.isArray(object) && params.isM2M) {
+            const oldIds = this.resIds;
+            const newIds = object.filter((id) => !oldIds.includes(id)).map((id) => ({ id }));
+            operation = { operation: "ADD_M2M", ids: newIds };
+        }
+        await this.__syncParent(operation);
+    }
+
+    /** Creates a Draft record from nothing and edits it. Relevant in editable x2m's */
+    async addNew(params) {
+        const position = params.position;
+        const operation = { context: [params.context], operation: "CREATE", position };
+        await this.model.__bm__.save(this.__bm_handle__, { savePoint: true });
+        this.model.__bm__.freezeOrder(this.__bm_handle__);
+        await this.__syncParent(operation);
+        if (params.mode === "edit") {
+            const newRecord = this.records[position === "bottom" ? this.records.length - 1 : 0];
+            await newRecord.switchMode("edit");
+        }
+    }
+
+    // x2many dialog edition
+    // addRecord(record) {
+    //     this.onChanges();
+    //     this._cache[record.virtualId] = record;
+    //     this._cache[record.virtualId] = record;
+    //     this.records.push(record);
+    //     this.resIds.push(record.virtualId);
+    //     this.limit = this.limit + 1; // might be not good
+    //     this.validated[record.virtualId] = false;
+    //     this.model.notify();
+    // }
+
+    exportState() {
+        return {
+            limit: this.limit,
+        };
+    }
+
+    async load(params) {
+        await this.model.__bm__._reload(this.__bm_handle__, params);
+        this.__syncData();
+    }
+
+    async sortBy(fieldName) {
+        await this.model.__bm__.setSort(this.__bm_handle__, fieldName);
+        this.__syncData();
+        this.model.notify();
+    }
+
+    async replaceWith(resIds) {
+        const addedIds = resIds.filter((id) => !this.currentIds.includes(id));
+        const deletedIds = this.currentIds.filter((id) => !resIds.includes(id));
+        let operation;
+        if (addedIds.length && deletedIds.length) {
+            operation = {
+                ids: resIds,
+                operation: "REPLACE_WITH",
+            };
+        } else if (addedIds.length) {
+            operation = {
+                ids: addedIds.map((id) => ({ id })),
+                operation: "ADD_M2M",
+            };
+        } else if (deletedIds.length) {
+            operation = {
+                ids: deletedIds,
+                operation: "FORGET",
+            };
+        } else {
+            // no change?
+            return;
+        }
+        await this.__syncParent(operation);
+    }
+
+    /**
+     * @param {string} dataRecordId
+     * @param {string} dataGroupId
+     * @param {string} refId
+     * @param {string} targetGroupId
+     * @returns {Promise<Record>}
+     */
+    async moveRecord(dataRecordId, dataGroupId, refId, targetGroupId) {
+        await this.resequence(dataRecordId, refId);
+    }
+
+    /**
+     * @param {RecordId} movedId  // id of the moved record
+     * @param {RecordId | null} targetId // id of the record (if any) that must be before moved record after operation is done
+     */
+    async resequence(movedId, targetId) {
+        if (!this.canResequence()) {
+            // There is no handle field on the current model
+            return;
+        }
+
+        if (this.__viewType === "list") {
+            await this.model.__bm__.save(this.__bm_handle__, { savePoint: true });
+            this.model.__bm__.freezeOrder(this.__bm_handle__);
+        }
+
+        const handleField = this.handleField || DEFAULT_HANDLE_FIELD;
+        const records = [...this.records];
+        const order = this.orderBy.find((o) => o.name === handleField);
+        const asc = !order || order.asc;
+
+        // Find indices
+        const fromIndex = records.findIndex((r) => r.id === movedId);
+        let toIndex = 0;
+        if (targetId !== null) {
+            const targetIndex = records.findIndex((r) => r.id === targetId);
+            toIndex = fromIndex > targetIndex ? targetIndex + 1 : targetIndex;
+        }
+
+        const getSequence = (rec) => rec && rec.data[handleField];
+
+        // Determine what records need to be modified
+        const firstIndex = Math.min(fromIndex, toIndex);
+        const lastIndex = Math.max(fromIndex, toIndex) + 1;
+        let reorderAll = false;
+        let lastSequence = (asc ? -1 : 1) * Infinity;
+        for (let index = 0; index < records.length; index++) {
+            const sequence = getSequence(records[index]);
+            if (
+                ((index < firstIndex || index >= lastIndex) &&
+                    ((asc && lastSequence >= sequence) || (!asc && lastSequence <= sequence))) ||
+                (index >= firstIndex && index < lastIndex && lastSequence === sequence)
+            ) {
+                reorderAll = true;
+            }
+            lastSequence = sequence;
+        }
+
+        // Perform the resequence in the list of records
+        const [record] = records.splice(fromIndex, 1);
+        records.splice(toIndex, 0, record);
+
+        // Creates the list of to modify
+        let toReorder = records;
+        if (!reorderAll) {
+            toReorder = toReorder.slice(firstIndex, lastIndex).filter((r) => r.id !== movedId);
+            if (fromIndex < toIndex) {
+                toReorder.push(record);
+            } else {
+                toReorder.unshift(record);
+            }
+        }
+        if (!asc) {
+            toReorder.reverse();
+        }
+
+        const sequences = toReorder.map(getSequence);
+        const offset = sequences.length && Math.min(...sequences);
+
+        const operations = toReorder.map((record, i) => ({
+            operation: "UPDATE",
+            id: record.__bm_handle__,
+            data: { [handleField]: offset + i },
+        }));
+        const lastOperation = operations.pop();
+
+        const parentID = this.model.__bm__.localData[this.__bm_handle__].parentID;
+
+        await Promise.all(
+            operations.map((op) => {
+                this.model.__bm__.notifyChanges(
+                    parentID,
+                    { [this.__fieldName__]: op },
+                    { notifyChange: false }
+                );
+            })
+        );
+
+        try {
+            await this.model.__bm__.notifyChanges(parentID, {
+                [this.__fieldName__]: lastOperation,
+            });
+        } finally {
+            if (this.__viewType === "list") {
+                await this.model.__bm__.setSort(this.__bm_handle__, handleField);
+            }
+        }
+
+        this.records = records;
+
+        this.__syncData();
+        this.model.notify();
+    }
+
+    async unselectRecord(canDiscard = false) {
+        // something seems wrong with switchMode --> review system?
+        const editedRecord = this.editedRecord;
+        if (editedRecord) {
+            const handle = editedRecord.__bm_handle__;
+            if (canDiscard && editedRecord.isNew && !editedRecord.isDirty) {
+                this.model.__bm__.discardChanges(handle);
+                if (editedRecord.canBeAbandoned) {
+                    this.model.__bm__.removeLine(handle);
+                }
+                this.__syncData();
+                this.editedRecord = null;
+                await editedRecord.switchMode("readonly");
+            } else if (editedRecord.checkValidity()) {
+                await editedRecord.switchMode("readonly");
+            } else {
+                if (!editedRecord.isDirty) {
+                    this.model.__bm__.discardChanges(handle);
+                    if (editedRecord.canBeAbandoned) {
+                        this.model.__bm__.removeLine(handle);
+                    }
+                    this.editedRecord = null;
+                    await editedRecord.switchMode("readonly");
+                }
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
+export class RelationalModel extends Model {
+    setup(params, { action, dialog, notification }) {
+        this.actionService = action;
+        this.dialogService = dialog;
+        this.notificationService = notification;
+        this.keepLast = new KeepLast();
+
+        if (params.rootType !== "record") {
+            throw "only record root type is supported";
+        }
+
+        this.root = null;
+
+        this.__bm__ = new BasicModel(this, {
+            fields: params.fields || {},
+            modelName: params.resModel,
+            useSampleModel: false, // FIXME AAB
+        });
+        this.__activeFields = params.activeFields;
+        this.__fields = params.fields;
+
+        const res_id = params.resId || undefined;
+        const res_ids = (params.resIds ? toRaw(params.resIds) : null) || (res_id ? [res_id] : []);
+
+        this.__bm_load_params__ = {
+            type: "record",
+            modelName: params.resModel,
+            res_id,
+            res_ids,
+            fields: params.fields || {},
+            viewType: "form",
+        };
+
+        this.initialMode = params.mode;
+    }
+
+    async duplicateDatapoint(record, params) {
+        const bm = this.__bm__;
+        const fieldsInfo = mapViews(params.views);
+        const handle = record.__bm_handle__;
+
+        // Sync with the mutex to wait for potential onchanges
+        await bm.mutex.getUnlockedDef();
+
+        await bm.addFieldsInfo(handle, {
+            fields: params.fields,
+            viewType: params.viewMode,
+            fieldInfo: fieldsInfo[params.viewMode].fieldsInfo[params.viewMode],
+        });
+
+        // determine fieldNames to load (comes from basic_view.js)
+        const legRec = this.__bm__.get(record.__bm_handle__);
+        const viewType = params.viewMode;
+        const viewFields = Object.keys(legRec.fieldsInfo[viewType]);
+        const fieldNames = _.difference(viewFields, Object.keys(legRec.data));
+        const legFieldsInfo = legRec.fieldsInfo[viewType];
+
+        // Suppose that in a form view, there is an x2many list view with
+        // a field F, and that F is also displayed in the x2many form view.
+        // In this case, F is represented in legRec.data (as it is known by
+        // the x2many list view), but the loaded information may not suffice
+        // in the form view (e.g. if field is a many2many list in the form
+        // view, or if it is displayed by a widget requiring specialData).
+        // So when this happens, F is added to the list of fieldNames to fetch.
+        for (const name of viewFields) {
+            if (!fieldNames.includes(name)) {
+                const fieldType = legRec.fields[name].type;
+                const fieldInfo = legFieldsInfo[name];
+
+                // SpecialData case: field requires specialData that haven't
+                // been fetched yet.
+                if (fieldInfo.Widget) {
+                    const requiresSpecialData = fieldInfo.Widget.prototype.specialData;
+                    if (requiresSpecialData && !(name in legRec.specialData)) {
+                        fieldNames.push(name);
+                        continue;
+                    }
+                }
+
+                // X2Many case: field is an x2many displayed as a list or
+                // kanban view, but the related fields haven't been loaded yet.
+                if (fieldType === "one2many" || fieldType === "many2many") {
+                    if (!("fieldsInfo" in legRec.data[name])) {
+                        fieldNames.push(name);
+                    } else {
+                        const x2mFieldInfo = legRec.fieldsInfo[params.viewMode][name];
+                        const viewType = x2mFieldInfo.viewType || x2mFieldInfo.mode;
+                        const knownFields = Object.keys(
+                            legRec.data[name].fieldsInfo[legRec.data[name].viewType] || {}
+                        );
+                        const newFields = Object.keys(legRec.data[name].fieldsInfo[viewType] || {});
+                        if (newFields.filter((f) => !knownFields.includes(f)).length) {
+                            fieldNames.push(name);
+                        }
+
+                        if (legRec.data[name].viewType === "default") {
+                            // Use case: x2many (tags) in x2many list views
+                            // When opening the x2many legRec form view, the
+                            // x2many will be reloaded but it may not have
+                            // the same fields (ex: tags in list and list in
+                            // form) so we need to merge the fieldsInfo to
+                            // avoid losing the initial fields (display_name)
+                            const fieldViews = fieldInfo.views || fieldInfo.fieldsInfo || {};
+                            const defaultFieldInfo = legRec.data[name].fieldsInfo.default;
+                            _.each(fieldViews, function (fieldView) {
+                                _.each(fieldView.fieldsInfo, function (x2mFieldInfo) {
+                                    _.defaults(x2mFieldInfo, defaultFieldInfo);
+                                });
+                            });
+                        }
+                    }
+                }
+                // Many2one: context is not the same between the different views
+                // this means the result of a name_get could differ
+                if (fieldType === "many2one") {
+                    if (
+                        JSON.stringify(legRec.data[name].context) !==
+                        JSON.stringify(fieldInfo.context)
+                    ) {
+                        fieldNames.push(name);
+                    }
+                }
+            }
+        }
+
+        if (fieldNames.length) {
+            if (this.__bm__.isNew(record.__bm_handle__)) {
+                await this.__bm__.generateDefaultValues(record.__bm_handle__, {
+                    fieldNames: fieldNames,
+                    viewType: viewType,
+                });
+            } else {
+                await this.__bm__.reload(record.__bm_handle__, {
+                    fieldNames: fieldNames,
+                    keepChanges: true,
+                    viewType: viewType,
+                });
+            }
+        }
+
+        const newRecord = new Record(this, {
+            handle,
+            viewType: params.viewMode,
+            mode: params.mode,
+        });
+
+        const recordSave = Record.prototype.save;
+        record.save = recordSave;
+        record.save = async (...args) => {
+            record.__syncData();
+            const res = await recordSave.call(record, ...args);
+            record.save = recordSave;
+            return res;
+        };
+
+        return newRecord;
+    }
+    async addNewRecord(list, params) {
+        const parentId = this.__bm__.localData[list.__bm_handle__].parentID;
+        const fieldName = list.__fieldName__;
+        const context = this.__bm__._getContext(this.__bm__.localData[parentId], { fieldName });
+        params.context = makeContext([context, params.context]);
+        params.__syncParent = () => list.__syncData();
+        const newRecord = this.createDataPoint("record", params);
+        newRecord.__bm_load_params__.parentID = list.__bm_handle__;
+        await newRecord.load();
+        return newRecord;
+    }
+    async updateRecord(list, record, params = { isM2M: false }) {
+        let operation;
+        const isM2M = params.isM2M;
+        if (!isM2M) {
+            operation = { operation: "UPDATE", id: record.__bm_handle__ };
+        } else {
+            await record.save({ noReload: true });
+            operation = { operation: "TRIGGER_ONCHANGE" };
+        }
+        await list.__syncParent(operation);
+        if (isM2M) {
+            await record.load();
+        }
+    }
+
+    /**
+     * @param {Object} [params={}]
+     * @param {Comparison | null} [params.comparison]
+     * @param {Context} [params.context]
+     * @param {DomainListRepr} [params.domain]
+     * @param {string[]} [params.groupBy]
+     * @param {Object[]} [params.orderBy]
+     * @param {number} [params.resId] should not be there
+     * @returns {Promise<void>}
+     */
+    async load(params = {}) {
+        if (!this.__bm_load_params__.fieldsInfo) {
+            // only the first time (must wait for the subviews to be loaded)
+            this.__bm_load_params__.fieldsInfo = mapActiveFieldsToFieldsInfo(
+                this.__activeFields || {},
+                this.__fields || {},
+                "form"
+            );
+        }
+        const loadParams = { ...this.__bm_load_params__ };
+        if ("resId" in params) {
+            loadParams.res_id = params.resId || undefined;
+        }
+        if ("context" in params) {
+            loadParams.context = params.context;
+        }
+        const state = this.root ? this.root.exportState() : {};
+        const nextRoot = new Record(
+            this,
+            {
+                __bm_load_params__: loadParams,
+                mode: this.initialMode,
+            },
+            state
+        );
+        await this.keepLast.add(nextRoot.load());
+        this.root = nextRoot;
+        this.__bm_load_params__ = loadParams;
+        this.notify();
+    }
+    _trigger_up(ev) {
+        const evType = ev.name;
+        const payload = ev.data;
+        if (evType === "call_service") {
+            let args = payload.args || [];
+            if (payload.service === "ajax" && payload.method === "rpc") {
+                // ajax service uses an extra 'target' argument for rpc
+                args = args.concat(ev.target);
+                return payload.callback(owl.Component.env.session.rpc(...args));
+            } else if (payload.service === "notification") {
+                return this.notificationService.add(payload.message, {
+                    className: payload.className,
+                    sticky: payload.sticky,
+                    title: payload.title,
+                    type: payload.type,
+                });
+            }
+            throw new Error(`call service ${payload.service} not handled in relational model`);
+        } else if (evType === "warning") {
+            if (payload.type === "dialog") {
+                return this.dialogService.add(WarningDialog, {
+                    title: payload.title,
+                    message: payload.message,
+                });
+            } else {
+                return this.notificationService.add(payload.message, {
+                    className: payload.className,
+                    sticky: payload.sticky,
+                    title: payload.title,
+                    type: "warning",
+                });
+            }
+        } else if (evType === "do_action") {
+            // SAME CODE AS legacy_service_provider
+            if (payload.action.context) {
+                payload.action.context = new Context(payload.action.context).eval();
+            }
+            const legacyOptions = mapDoActionOptionAPI(payload.options);
+            return this.actionService.doAction(payload.action, legacyOptions);
+        }
+        throw new Error(`trigger_up(${evType}) not handled in relational model`);
+    }
+    createDataPoint(type, params, state = {}) {
+        if (type !== "record") {
+            throw new Error("LPE CRASH");
+        }
+        const fieldsInfo = mapActiveFieldsToFieldsInfo(
+            params.activeFields,
+            params.fields,
+            params.viewType
+        );
+        params = Object.assign({}, params, {
+            __bm_load_params__: {
+                type: "record",
+                modelName: params.resModel,
+                fields: params.fields || {},
+                viewType: "form",
+                fieldsInfo,
+                parentID: params.parentID,
+                context: params.context,
+            },
+        });
+        return new Record(this, params, state);
+    }
+}
+RelationalModel.services = ["action", "dialog", "notification"];
diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js
new file mode 100644
index 00000000000..f35597a171b
--- /dev/null
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -0,0 +1,110 @@
+/** @odoo-module **/
+/* global ace */
+
+import { loadJS } from "@web/core/assets";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { formatText } from "../formatters";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillStart, useEffect, useRef } = owl;
+
+export class AceField extends Component {
+    setup() {
+        this.aceEditor = null;
+        this.editorRef = useRef("editor");
+
+        onWillStart(async () => {
+            await loadJS("/web/static/lib/ace/ace.js");
+            const jsLibs = [
+                "/web/static/lib/ace/mode-python.js",
+                "/web/static/lib/ace/mode-xml.js",
+                "/web/static/lib/ace/mode-qweb.js",
+            ];
+            const proms = jsLibs.map((url) => loadJS(url));
+            return Promise.all(proms);
+        });
+
+        useEffect(() => {
+            this.setupAce();
+            return () => this.destroyAce();
+        });
+    }
+
+    get aceSession() {
+        return this.aceEditor.getSession();
+    }
+
+    setupAce() {
+        this.aceEditor = ace.edit(this.editorRef.el);
+        this.aceEditor.setOptions({
+            maxLines: Infinity,
+            showPrintMargin: false,
+        });
+        this.aceEditor.$blockScrolling = true;
+
+        this.aceSession.setOptions({
+            useWorker: false,
+            tabSize: 2,
+            useSoftTabs: true,
+        });
+
+        this.aceSession.setOptions({
+            mode: `ace/mode/${this.props.mode === "xml" ? "qweb" : this.props.mode}`,
+        });
+
+        this.aceEditor.setOptions({
+            readOnly: this.props.readonly,
+            highlightActiveLine: !this.props.readonly,
+            highlightGutterLine: !this.props.readonly,
+        });
+
+        this.aceEditor.renderer.setOptions({
+            displayIndentGuides: !this.props.readonly,
+            showGutter: !this.props.readonly,
+        });
+
+        this.aceEditor.renderer.$cursorLayer.element.style.display = this.props.readonly
+            ? "none"
+            : "block";
+
+        const formattedValue = formatText(this.props.value);
+        if (this.aceSession.getValue() !== formattedValue) {
+            this.aceSession.setValue(formattedValue);
+        }
+
+        this.aceEditor.on("blur", this.onBlur.bind(this));
+    }
+
+    destroyAce() {
+        if (this.aceEditor) {
+            this.aceEditor.destroy();
+        }
+    }
+
+    onBlur() {
+        if (!this.props.readonly) {
+            this.props.update(this.aceSession.getValue());
+        }
+    }
+}
+
+AceField.template = "web.AceField";
+AceField.props = {
+    ...standardFieldProps,
+    mode: { type: String, optional: true },
+};
+AceField.defaultProps = {
+    mode: "qweb",
+};
+
+AceField.displayName = _lt("Ace Editor");
+AceField.supportedTypes = ["text"];
+
+AceField.extractProps = (fieldName, record, attrs) => {
+    return {
+        mode: attrs.options.mode,
+    };
+};
+
+registry.category("fields").add("ace", AceField);
diff --git a/addons/web/static/src/views/fields/ace/ace_field.scss b/addons/web/static/src/views/fields/ace/ace_field.scss
new file mode 100644
index 00000000000..ac0de4b681d
--- /dev/null
+++ b/addons/web/static/src/views/fields/ace/ace_field.scss
@@ -0,0 +1,3 @@
+.o_field_ace {
+    display: block !important;
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/fields/ace/ace_field.xml b/addons/web/static/src/views/fields/ace/ace_field.xml
new file mode 100644
index 00000000000..1930ce2cf9a
--- /dev/null
+++ b/addons/web/static/src/views/fields/ace/ace_field.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.AceField" owl="1">
+        <!-- TODO check if some classes are useless -->
+        <div class="o_field_widget oe_form_field o_ace_view_editor oe_ace_open">
+            <div class="ace-view-editor" t-ref="editor" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/attachment_image/attachment_image_field.js b/addons/web/static/src/views/fields/attachment_image/attachment_image_field.js
new file mode 100644
index 00000000000..20313b10b48
--- /dev/null
+++ b/addons/web/static/src/views/fields/attachment_image/attachment_image_field.js
@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+const { Component } = owl;
+
+export class AttachmentImageField extends Component {}
+
+AttachmentImageField.template = "web.AttachmentImageField";
+
+AttachmentImageField.displayName = _lt("Attachment Image");
+AttachmentImageField.supportedTypes = ["many2one"];
+
+registry.category("fields").add("attachment_image", AttachmentImageField);
diff --git a/addons/web/static/src/views/fields/attachment_image/attachment_image_field.xml b/addons/web/static/src/views/fields/attachment_image/attachment_image_field.xml
new file mode 100644
index 00000000000..7a008ce893c
--- /dev/null
+++ b/addons/web/static/src/views/fields/attachment_image/attachment_image_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.AttachmentImageField" owl="1">
+        <div class="o_attachment_image">
+            <img t-if="props.value" t-attf-src="/web/image/{{ props.value[0] }}?unique=1" t-att-title="props.value[1]" alt="Image" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/badge/badge_field.js b/addons/web/static/src/views/fields/badge/badge_field.js
new file mode 100644
index 00000000000..08c5077bdb4
--- /dev/null
+++ b/addons/web/static/src/views/fields/badge/badge_field.js
@@ -0,0 +1,36 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+const formatters = registry.category("formatters");
+
+export class BadgeField extends Component {
+    get formattedValue() {
+        const formatter = formatters.get(this.props.type);
+        return formatter(this.props.value, {
+            selection: this.props.record.fields[this.props.name].selection,
+        });
+    }
+
+    get classFromDecoration() {
+        for (const decorationName in this.props.decorations) {
+            if (this.props.decorations[decorationName]) {
+                return `bg-${decorationName}-light`;
+            }
+        }
+        return "";
+    }
+}
+
+BadgeField.template = "web.BadgeField";
+BadgeField.props = {
+    ...standardFieldProps,
+};
+
+BadgeField.displayName = _lt("Badge");
+BadgeField.supportedTypes = ["selection", "many2one", "char"];
+
+registry.category("fields").add("badge", BadgeField);
diff --git a/addons/web/static/src/views/fields/badge/badge_field.scss b/addons/web/static/src/views/fields/badge/badge_field.scss
new file mode 100644
index 00000000000..3189698c895
--- /dev/null
+++ b/addons/web/static/src/views/fields/badge/badge_field.scss
@@ -0,0 +1,13 @@
+.o_field_badge span {
+    border: 0;
+    font-size: 12px;
+    user-select: none;
+    background-color: rgba(lightgray, 0.5);
+    font-weight: 500;
+    @include o-text-overflow;
+    transition: none; // remove transition to prevent badges from flickering at reload
+    color: #444B5A;
+    &.o_field_empty {
+        display: none !important;
+    }
+}
diff --git a/addons/web/static/src/views/fields/badge/badge_field.xml b/addons/web/static/src/views/fields/badge/badge_field.xml
new file mode 100644
index 00000000000..85e3ce33246
--- /dev/null
+++ b/addons/web/static/src/views/fields/badge/badge_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.BadgeField" owl="1">
+        <span t-if="props.value" class="badge badge-pill" t-att-class="classFromDecoration" t-esc="formattedValue" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
new file mode 100644
index 00000000000..fa8a4ca560b
--- /dev/null
+++ b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.js
@@ -0,0 +1,93 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class BadgeSelectionField extends Component {
+    get string() {
+        switch (this.props.type) {
+            case "many2one":
+                return this.props.value ? this.props.value[1] : "";
+            case "selection":
+                return this.props.value !== false
+                    ? this.props.options.find((o) => o[0] === this.props.value)[1]
+                    : "";
+            default:
+                return "";
+        }
+    }
+    get value() {
+        const rawValue = this.props.value;
+        return this.props.type === "many2one" && rawValue ? rawValue[0] : rawValue;
+    }
+
+    stringify(value) {
+        return JSON.stringify(value);
+    }
+
+    /**
+     * @param {string | number | false} value
+     */
+    onChange(value) {
+        switch (this.props.type) {
+            case "many2one":
+                if (value === false) {
+                    this.props.update(false);
+                } else {
+                    this.props.update(this.props.options.find((option) => option[0] === value));
+                }
+                break;
+            case "selection":
+                this.props.update(value);
+                break;
+        }
+    }
+}
+
+BadgeSelectionField.template = "web.BadgeSelectionField";
+BadgeSelectionField.props = {
+    ...standardFieldProps,
+    horizontal: { type: Boolean, optional: true },
+    options: Object,
+    placeholder: { type: String, optional: true },
+};
+
+BadgeSelectionField.displayName = _lt("Badges");
+BadgeSelectionField.supportedTypes = ["many2one", "selection"];
+
+BadgeSelectionField.isEmpty = (record, fieldName) => record.data[fieldName] === false;
+BadgeSelectionField.extractProps = (fieldName, record, attrs) => {
+    const getOptions = () => {
+        switch (record.fields[fieldName].type) {
+            case "many2one":
+                // WOWL: conversion needed while we keep using the legacy model
+                return Object.values(record.preloadedData[fieldName]).map((v) => {
+                    return [v.id, v.display_name];
+                });
+            case "selection":
+                return record.fields[fieldName].selection;
+            default:
+                return [];
+        }
+    };
+    return {
+        options: getOptions(),
+    };
+};
+
+registry.category("fields").add("selection_badge", BadgeSelectionField);
+
+export function preloadSelection(orm, record, fieldName) {
+    const field = record.fields[fieldName];
+    const context = record.evalContext;
+    const domain = record.getFieldDomain(fieldName).toList(context);
+    return orm.call(field.relation, "name_search", ["", domain]);
+}
+
+registry.category("preloadedData").add("selection_badge", {
+    loadOnTypes: ["many2one"],
+    preload: preloadSelection,
+});
diff --git a/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
new file mode 100644
index 00000000000..43d80328198
--- /dev/null
+++ b/addons/web/static/src/views/fields/badge_selection/badge_selection_field.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.BadgeSelectionField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="string" t-att-raw-value="value" />
+        </t>
+        <t t-else="">
+            <t t-foreach="props.options" t-as="option" t-key="option[0]">
+                <span
+                    t-attf-class="o_selection_badge {{value === option[0] ? 'active' : ''}}"
+                    t-att-value="stringify(option[0])"
+                    t-esc="option[1]"
+                    t-on-click="() => this.onChange(option[0])"
+                />
+            </t>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/binary/binary_field.js b/addons/web/static/src/views/fields/binary/binary_field.js
new file mode 100644
index 00000000000..af50bd4ccf1
--- /dev/null
+++ b/addons/web/static/src/views/fields/binary/binary_field.js
@@ -0,0 +1,107 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { download } from "@web/core/network/download";
+import { standardFieldProps } from "../standard_field_props";
+import { FileDownloader, FileUploader } from "../file_handler";
+import { _lt } from "@web/core/l10n/translation";
+
+const { Component, onWillUpdateProps, useState } = owl;
+
+function isBinarySize(value) {
+    return /^\d+(\.\d*)? [^0-9]+$/.test(value);
+}
+
+export class BinaryField extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.state = useState({
+            fileName: this.props.fileName || "",
+            isValid: true,
+        });
+        onWillUpdateProps((nextProps) => {
+            if (nextProps.readonly) {
+                this.state.fileName = "";
+            }
+        });
+    }
+    get file() {
+        return {
+            data: this.props.fileData,
+            name: this.state.fileName || this.props.fileData || null,
+        };
+    }
+    async onFileDownload() {
+        await download({
+            data: {
+                model: this.props.resModel,
+                id: this.props.resId,
+                field: this.props.name,
+                filename_field: this.file.name,
+                filename: this.file.name || "",
+                download: true,
+                data: isBinarySize(this.props.fileData) ? null : this.props.fileData,
+            },
+            url: "/web/content",
+        });
+    }
+    onFileRemove() {
+        this.state.isValid = true;
+        this.props.update(false);
+    }
+    onFileUploaded(file) {
+        this.state.fileName = file.name;
+        this.state.isValid = true;
+        this.props.update(file);
+    }
+    onLoadFailed() {
+        this.state.isValid = false;
+        this.notification.add(this.env._t("Could not display the selected binary"), {
+            type: "danger",
+        });
+    }
+}
+
+BinaryField.template = "web.BinaryField";
+BinaryField.components = {
+    FileDownloader,
+    FileUploader,
+};
+BinaryField.props = {
+    ...standardFieldProps,
+    acceptedFileExtensions: { type: String, optional: true },
+    fileData: { type: String, optional: true },
+    fileName: { type: String, optional: true },
+    isDownloadable: { type: Boolean, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+BinaryField.defaultProps = {
+    acceptedFileExtensions: "*",
+    fileData: "",
+    isDownloadable: true,
+};
+
+BinaryField.displayName = _lt("File");
+BinaryField.supportedTypes = ["binary"];
+
+BinaryField.extractProps = (fieldName, record, attrs) => {
+    return {
+        acceptedFileExtensions: attrs.options.accepted_file_extensions,
+        fileData: record.data[fieldName] || "",
+        fileName: record.data[attrs.filename] || "",
+        isDownloadable: !(record.isReadonly(fieldName) && record.mode === "edit"),
+        resId: record.resId,
+        resModel: record.resModel,
+        update: (file) => {
+            const changes = { [fieldName]: file.data || false };
+            if (attrs.filename && attrs.filename !== fieldName) {
+                changes[attrs.filename] = file.name || false;
+            }
+            return record.update(changes);
+        },
+    };
+};
+
+registry.category("fields").add("binary", BinaryField);
diff --git a/addons/web/static/src/views/fields/binary/binary_field.xml b/addons/web/static/src/views/fields/binary/binary_field.xml
new file mode 100644
index 00000000000..c96700d0ec6
--- /dev/null
+++ b/addons/web/static/src/views/fields/binary/binary_field.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.BinaryField" owl="1">
+        <t t-if="!props.readonly">
+            <t t-if="file.data">
+                <FileUploader
+                    acceptedFileExtensions="props.acceptedFileExtensions"
+                    file="file"
+                    onUploaded.bind="onFileUploaded"
+                >
+                    <t t-set-slot="toggler">
+                        <span class="mx-2" t-esc="file.name"/>
+                        <button
+                            class="btn btn-secondary fa fa-pencil o_select_file_button"
+                            data-tooltip="Edit"
+                            aria-label="Edit"
+                        />
+                    </t>
+                    <button
+                        class="btn btn-secondary fa fa-trash o_clear_file_button"
+                        data-tooltip="Clear"
+                        aria-label="Clear"
+                        t-on-click="onFileRemove"
+                    />
+                </FileUploader>
+            </t>
+            <t t-else="">
+                <label class="o_select_file_button btn btn-primary">
+                    <FileUploader
+                        acceptedFileExtensions="props.acceptedFileExtensions"
+                        onUploaded.bind="onFileUploaded"
+                    >
+                        <t t-set-slot="toggler">
+                            <span t-esc="'Upload your file'"/>
+                        </t>
+                    </FileUploader>
+                </label>
+            </t>
+        </t>
+        <t t-elif="file.data and props.isDownloadable">
+            <FileDownloader file="file" onDownload.bind="onFileDownload"/>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/boolean/boolean_field.js b/addons/web/static/src/views/fields/boolean/boolean_field.js
new file mode 100644
index 00000000000..29cf4b62dea
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean/boolean_field.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+
+const { Component } = owl;
+
+export class BooleanField extends Component {
+    /**
+     * @param {boolean} newValue
+     */
+    onChange(newValue) {
+        this.props.update(newValue);
+    }
+}
+
+BooleanField.template = "web.BooleanField";
+BooleanField.components = { CheckBox };
+BooleanField.props = {
+    ...standardFieldProps,
+    isReadonlyEnabled: { type: Boolean, optional: true },
+};
+
+BooleanField.displayName = _lt("Checkbox");
+BooleanField.supportedTypes = ["boolean"];
+
+BooleanField.isEmpty = () => false;
+BooleanField.extractProps = (fieldName, record) => {
+    return {
+        // should we make a list specialization?
+        readonly: !(record.isInEdition && !record.isReadonly(fieldName)),
+        isReadonlyEnabled:
+            record.activeFields[fieldName].viewType === "list" && !record.isReadonly(fieldName),
+    };
+};
+
+registry.category("fields").add("boolean", BooleanField);
diff --git a/addons/web/static/src/views/fields/boolean/boolean_field.xml b/addons/web/static/src/views/fields/boolean/boolean_field.xml
new file mode 100644
index 00000000000..81fa67fe142
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean/boolean_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.BooleanField" owl="1">
+        <CheckBox id="props.id" value="props.value or false" disabled="props.readonly" onChange.bind="onChange" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
new file mode 100644
index 00000000000..b314ade9c80
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.js
@@ -0,0 +1,31 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { archParseBoolean } from "@web/views/utils";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class BooleanFavoriteField extends Component {}
+
+BooleanFavoriteField.template = "web.BooleanFavoriteField";
+BooleanFavoriteField.props = {
+    ...standardFieldProps,
+    noLabel: { type: Boolean, optional: true },
+};
+BooleanFavoriteField.defaultProps = {
+    noLabel: false,
+};
+
+BooleanFavoriteField.displayName = _lt("Favorite");
+BooleanFavoriteField.supportedTypes = ["boolean"];
+
+BooleanFavoriteField.isEmpty = () => false;
+BooleanFavoriteField.extractProps = (fieldName, record, attrs) => {
+    return {
+        noLabel: archParseBoolean(attrs.nolabel),
+    };
+};
+
+registry.category("fields").add("boolean_favorite", BooleanFavoriteField);
diff --git a/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
new file mode 100644
index 00000000000..a491fe70ebc
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_favorite/boolean_favorite_field.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.BooleanFavoriteField" owl="1">
+        <div class="o_favorite" t-on-click.prevent.stop="() => props.update(!props.value)">
+            <a href="#">
+                <i
+                    class="fa"
+                    role="img"
+                    t-att-class="props.value ? 'fa-star' : 'fa-star-o'"
+                    t-att-title="props.value ? 'Remove from Favorites' : 'Add to Favorites'"
+                    t-att-aria-label="props.value ? 'Remove from Favorites' : 'Add to Favorites'"
+                />
+                <t t-if="!props.noLabel"> <t t-esc="props.value ? 'Remove from Favorites' : 'Add to Favorites'" /></t>
+            </a>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.js b/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.js
new file mode 100644
index 00000000000..462ee427f37
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.js
@@ -0,0 +1,28 @@
+/** @odoo-module **/
+
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class BooleanToggleField extends Component {}
+
+BooleanToggleField.template = "web.BooleanToggleField";
+BooleanToggleField.components = { CheckBox };
+BooleanToggleField.props = {
+    ...standardFieldProps,
+};
+
+BooleanToggleField.displayName = _lt("Toggle");
+BooleanToggleField.supportedTypes = ["boolean"];
+
+BooleanToggleField.isEmpty = () => false;
+BooleanToggleField.extractProps = (fieldName, record) => {
+    return {
+        readonly: record.isReadonly(fieldName),
+    };
+};
+
+registry.category("fields").add("boolean_toggle", BooleanToggleField);
diff --git a/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.xml b/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.xml
new file mode 100644
index 00000000000..7b7a7662656
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_toggle/boolean_toggle_field.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.BooleanToggleField" owl="1">
+        <CheckBox
+            className="'o_field_boolean o_boolean_toggle'"
+            id="props.id"
+            value="props.value or false"
+            disabled="props.readonly"
+            onChange="props.update"
+        >
+            &#8203; <!-- Zero width space needed to set height -->
+            <i class="fa" t-att-class="props.value ? 'fa-check-circle' : 'fa-times-circle'" />
+        </CheckBox>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.js b/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.js
new file mode 100644
index 00000000000..1038867ccfd
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { BooleanToggleField } from "./boolean_toggle_field";
+
+const { Component } = owl;
+
+export class ListBooleanToggleField extends Component {
+    onClick() {
+        if (!this.props.readonly) {
+            this.props.update(!this.props.value);
+        }
+    }
+}
+
+ListBooleanToggleField.template = "web.ListBooleanToggleField";
+ListBooleanToggleField.components = { BooleanToggleField };
+
+registry.category("fields").add("list.boolean_toggle", ListBooleanToggleField);
diff --git a/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.xml b/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.xml
new file mode 100644
index 00000000000..288bb316a3c
--- /dev/null
+++ b/addons/web/static/src/views/fields/boolean_toggle/list_boolean_toggle_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ListBooleanToggleField" owl="1">
+        <div t-on-click="onClick">
+            <BooleanToggleField t-props="props" readonly="false" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/char/char_field.js b/addons/web/static/src/views/fields/char/char_field.js
new file mode 100644
index 00000000000..b206c1270b0
--- /dev/null
+++ b/addons/web/static/src/views/fields/char/char_field.js
@@ -0,0 +1,62 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { archParseBoolean } from "@web/views/utils";
+import { formatChar } from "../formatters";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+import { TranslationButton } from "../translation_button";
+
+const { Component } = owl;
+
+export class CharField extends Component {
+    setup() {
+        useInputField({ getValue: () => this.props.value || "", parse: (v) => this.parse(v) });
+    }
+
+    get formattedValue() {
+        return formatChar(this.props.value, { isPassword: this.props.isPassword });
+    }
+
+    parse(value) {
+        if (this.props.shouldTrim) {
+            return value.trim();
+        }
+        return value;
+    }
+}
+
+CharField.template = "web.CharField";
+CharField.components = {
+    TranslationButton,
+};
+CharField.props = {
+    ...standardFieldProps,
+    autocomplete: { type: String, optional: true },
+    isPassword: { type: Boolean, optional: true },
+    placeholder: { type: String, optional: true },
+    shouldTrim: { type: Boolean, optional: true },
+    maxLength: { type: Number, optional: true },
+    isTranslatable: { type: Boolean, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+
+CharField.displayName = _lt("Text");
+CharField.supportedTypes = ["char"];
+
+CharField.extractProps = (fieldName, record, attrs) => {
+    return {
+        shouldTrim: record.fields[fieldName].trim,
+        maxLength: record.fields[fieldName].size,
+        isTranslatable: record.fields[fieldName].translate,
+        resId: record.resId,
+        resModel: record.resModel,
+        autocomplete: attrs.autocomplete,
+        isPassword: archParseBoolean(attrs.password),
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("char", CharField);
diff --git a/addons/web/static/src/views/fields/char/char_field.xml b/addons/web/static/src/views/fields/char/char_field.xml
new file mode 100644
index 00000000000..ca328ce60a7
--- /dev/null
+++ b/addons/web/static/src/views/fields/char/char_field.xml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CharField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="formattedValue" />
+        </t>
+        <t t-else="">
+            <input
+                class="o_input"
+                t-att-id="props.id"
+                t-att-type="props.isPassword ? 'password' : 'text'"
+                t-att-autocomplete="props.autocomplete or (props.isPassword ? 'new-password' : 'off')"
+                t-att-maxlength="props.maxLength > 0 and props.maxLength"
+                t-att-placeholder="props.placeholder"
+                t-ref="input"
+            />
+            <t t-if="props.isTranslatable">
+                <TranslationButton
+                    fieldName="props.name"
+                    resId="props.resId"
+                    resModel="props.resModel"
+                    value="props.value"
+                    updateField="props.update"
+                />
+            </t>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/color/color_field.js b/addons/web/static/src/views/fields/color/color_field.js
new file mode 100644
index 00000000000..653ffbe8387
--- /dev/null
+++ b/addons/web/static/src/views/fields/color/color_field.js
@@ -0,0 +1,27 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, useState } = owl;
+
+export class ColorField extends Component {
+    setup() {
+        this.state = useState({
+            color: this.props.value || "#000000",
+        });
+    }
+}
+
+ColorField.template = "web.ColorField";
+ColorField.props = {
+    ...standardFieldProps,
+};
+ColorField.extractProps = (fieldName, record) => {
+    return {
+        readonly: record.isReadonly(fieldName),
+    };
+};
+ColorField.supportedTypes = ["char"];
+
+registry.category("fields").add("color", ColorField);
diff --git a/addons/web/static/src/views/fields/color/color_field.xml b/addons/web/static/src/views/fields/color/color_field.xml
new file mode 100644
index 00000000000..7442de8d740
--- /dev/null
+++ b/addons/web/static/src/views/fields/color/color_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ColorField" owl="1">
+        <div class="o_field_color d-flex" t-att-class="{ 'o_field_cursor_disabled': props.readonly }" t-attf-style="background-color: {{state.color}}">
+            <input t-on-click.stop="" class="w-100 h-100 opacity-0" type="color" t-att-value="props.value" t-att-disabled="props.readonly" t-on-input="(ev) => this.state.color = ev.target.value" t-on-change="(ev) => this.props.update(ev.target.value)" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/color_picker/color_picker_field.js b/addons/web/static/src/views/fields/color_picker/color_picker_field.js
new file mode 100644
index 00000000000..b71f763358b
--- /dev/null
+++ b/addons/web/static/src/views/fields/color_picker/color_picker_field.js
@@ -0,0 +1,25 @@
+/** @odoo-module **/
+
+import { ColorList } from "@web/core/colorlist/colorlist";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class ColorPickerField extends Component {
+    switchColor(colorIndex) {
+        this.props.update(colorIndex);
+    }
+}
+
+ColorPickerField.template = "web.ColorPickerField";
+ColorPickerField.components = {
+    ColorList,
+};
+ColorPickerField.props = {
+    ...standardFieldProps,
+};
+ColorPickerField.supportedTypes = ["integer"];
+ColorPickerField.RECORD_COLORS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+registry.category("fields").add("color_picker", ColorPickerField);
diff --git a/addons/web/static/src/legacy/scss/color_picker.scss b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
similarity index 60%
rename from addons/web/static/src/legacy/scss/color_picker.scss
rename to addons/web/static/src/views/fields/color_picker/color_picker_field.scss
index 2ff27c59c7e..2384eaa80e1 100644
--- a/addons/web/static/src/legacy/scss/color_picker.scss
+++ b/addons/web/static/src/views/fields/color_picker/color_picker_field.scss
@@ -1,24 +1,29 @@
-.o_field_color_picker {
+.o_field_widget.o_field_color_picker > div {
+
     display: flex;
-    float: right;
-    margin-right: 7px;
-    width: 100%;
-    ul {
-        display: flex;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        @include o-kanban-colorpicker;
-        @include o-kanban-record-color;
-        width: 100%;
-        max-width: unset;
-        margin: 0;
-        padding: 0;
-        > li {
-            border: 2px solid white;
-            box-shadow: 0 0 0 1px gray('300');
-            margin: $o-kanban-inner-hmargin 4px 0 0;
-            > a:focus {
-                outline: none;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    // to compensate on the 2px margin used to space the elements relative to each other
+    // we keep the top one cause the widget is a bit to high anyway
+    margin-left: -2px;
+    margin-right: -2px;
+    margin-bottom: -2px;
+
+    > div {
+        display: inline-block;
+        border: 1px solid white;
+        box-shadow: 0 0 0 1px gray('300');
+        margin: 2px;
+
+        > a {
+            display: block;
+
+            &::after {
+                content: "";
+                display: block;
+                width: 20px;
+                height: 15px;
             }
         }
     }
diff --git a/addons/web/static/src/views/fields/color_picker/color_picker_field.xml b/addons/web/static/src/views/fields/color_picker/color_picker_field.xml
new file mode 100644
index 00000000000..b5e156faafa
--- /dev/null
+++ b/addons/web/static/src/views/fields/color_picker/color_picker_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ColorPickerField" owl="1">
+        <ColorList colors="constructor.RECORD_COLORS" onColorSelected.bind="switchColor" togglerColor="props.value || 0"/>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_button.js b/addons/web/static/src/views/fields/copy_clipboard/copy_button.js
new file mode 100644
index 00000000000..9513cc99041
--- /dev/null
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_button.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+const { Component, useEffect, useState } = owl;
+
+export class CopyButton extends Component {
+    setup() {
+        this.state = useState({
+            isCopied: false,
+        });
+        useEffect(
+            () => {
+                return () => clearTimeout(this.timeoutId);
+            },
+            () => [this.state.isCopied]
+        );
+    }
+
+    async onClick() {
+        // any kind of content can be copied into the clipboard using
+        // the appropriate native methods
+        if (typeof this.props.content === "string") {
+            navigator.clipboard.writeText(this.props.content).then(() => {
+                this.state.isCopied = true;
+            });
+        } else {
+            navigator.clipboard.write(this.props.content).then(() => {
+                this.state.isCopied = true;
+            });
+        }
+        this.timeoutId = setTimeout(() => (this.state.isCopied = false), 800);
+    }
+}
+CopyButton.template = "web.CopyButton";
+CopyButton.props = {
+    className: { type: String, optional: true },
+    copyText: { type: String, optional: true },
+    successText: { type: String, optional: true },
+    content: { type: [String, Object], optional: true },
+};
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_button.xml b/addons/web/static/src/views/fields/copy_clipboard/copy_button.xml
new file mode 100644
index 00000000000..d97e61dba3e
--- /dev/null
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_button.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CopyButton" owl="1">
+        <button
+            t-attf-class="btn btn-sm btn-primary o_clipboard_button {{ props.className || '' }} {{state.isCopied ? 'bg-success' : ''}}"
+            t-on-click.stop="onClick"
+        >
+            <t t-if="!state.isCopied">
+                <span class="fa fa-clipboard mx-1"/>
+                <span t-esc="props.copyText"/>
+            </t>
+            <t t-else="">
+                <span class="fa fa-check mx-1"/>
+                <span t-esc="props.successText"/>
+            </t>
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
new file mode 100644
index 00000000000..c6d519076ee
--- /dev/null
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+import { CopyButton } from "./copy_button";
+import { UrlField } from "../url/url_field";
+import { CharField } from "../char/char_field";
+import { TextField } from "../text/text_field";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+class CopyClipboardField extends Component {
+    setup() {
+        this.copyText = this.env._t("Copy");
+        this.successText = this.env._t("Copied");
+    }
+}
+CopyClipboardField.template = "web.CopyClipboardField";
+CopyClipboardField.props = {
+    ...standardFieldProps,
+};
+
+export class CopyClipboardCharField extends CopyClipboardField {}
+
+CopyClipboardCharField.components = { Field: CharField, CopyButton };
+CopyClipboardCharField.displayName = _lt("Copy Text to Clipboard");
+CopyClipboardCharField.supportedTypes = ["char"];
+
+registry.category("fields").add("CopyClipboardChar", CopyClipboardCharField);
+
+export class CopyClipboardTextField extends CopyClipboardField {}
+
+CopyClipboardTextField.components = { Field: TextField, CopyButton };
+CopyClipboardTextField.displayName = _lt("Copy Multiline Text to Clipboard");
+CopyClipboardTextField.supportedTypes = ["text"];
+
+registry.category("fields").add("CopyClipboardText", CopyClipboardTextField);
+
+export class CopyClipboardURLField extends CopyClipboardField {}
+
+CopyClipboardURLField.components = { Field: UrlField, CopyButton };
+CopyClipboardURLField.displayName = _lt("Copy URL to Clipboard");
+CopyClipboardURLField.supportedTypes = ["char"];
+
+registry.category("fields").add("CopyClipboardURL", CopyClipboardURLField);
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
new file mode 100644
index 00000000000..f7f985cfb93
--- /dev/null
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.scss
@@ -0,0 +1,19 @@
+.o_field_CopyClipboardText, .o_field_CopyClipboardURL, .o_field_CopyClipboardChar {
+    display: flex !important;
+    flex-wrap: nowrap;
+    width: fit-content !important;
+    border-radius: 5px;
+    border: 1px solid $primary;
+    font-size: $font-size-sm;
+    color: $o-brand-primary;
+    font-weight: $badge-font-weight;
+
+    &.o_field_empty {
+        display: none !important;
+    }
+    
+    > span {
+        padding: 0 5px;
+        text-align: center;
+    }
+}
diff --git a/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml
new file mode 100644
index 00000000000..b0b1c097c21
--- /dev/null
+++ b/addons/web/static/src/views/fields/copy_clipboard/copy_clipboard_field.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CopyClipboardField" owl="1">
+        <t t-if="props.value">
+            <Field t-props="props"/>
+            <CopyButton className="`o_btn_${props.type}_copy`" content="props.value" copyText="copyText" successText="successText"/>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/date/date_field.js b/addons/web/static/src/views/fields/date/date_field.js
new file mode 100644
index 00000000000..e68eb60ddc8
--- /dev/null
+++ b/addons/web/static/src/views/fields/date/date_field.js
@@ -0,0 +1,54 @@
+/** @odoo-module **/
+
+import { DatePicker } from "@web/core/datepicker/datepicker";
+import { areDateEquals, formatDate } from "@web/core/l10n/dates";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class DateField extends Component {
+    get date() {
+        return this.props.value && this.props.value.startOf("day");
+    }
+
+    get formattedValue() {
+        return formatDate(this.props.value, {
+            // get local date if field type is datetime
+            timezone: this.props.isDateTime,
+        });
+    }
+
+    onDateTimeChanged(date) {
+        if (!areDateEquals(this.date || "", date)) {
+            this.props.update(date);
+        }
+    }
+}
+
+DateField.template = "web.DateField";
+DateField.components = {
+    DatePicker,
+};
+DateField.props = {
+    ...standardFieldProps,
+    isDateTime: { type: Boolean, optional: true },
+    pickerOptions: { type: Object, optional: true },
+};
+DateField.defaultProps = {
+    isDateTime: false,
+    pickerOptions: {},
+};
+
+DateField.displayName = _lt("Date");
+DateField.supportedTypes = ["date", "datetime"];
+
+DateField.extractProps = (fieldName, record, attrs) => {
+    return {
+        isDateTime: record.fields[fieldName].type === "datetime",
+        pickerOptions: attrs.options.datepicker,
+    };
+};
+
+registry.category("fields").add("date", DateField);
diff --git a/addons/web/static/src/views/fields/date/date_field.xml b/addons/web/static/src/views/fields/date/date_field.xml
new file mode 100644
index 00000000000..196c44146fb
--- /dev/null
+++ b/addons/web/static/src/views/fields/date/date_field.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DateField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="formattedValue" />
+        </t>
+        <t t-else="">
+            <DatePicker
+                t-props="props.pickerOptions"
+                date="date"
+                onDateTimeChanged="(date) => this.onDateTimeChanged(date)"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/daterange/daterange_field.js b/addons/web/static/src/views/fields/daterange/daterange_field.js
new file mode 100644
index 00000000000..5117e551637
--- /dev/null
+++ b/addons/web/static/src/views/fields/daterange/daterange_field.js
@@ -0,0 +1,155 @@
+/** @odoo-module **/
+
+import { localization } from "@web/core/l10n/localization";
+import { registry } from "@web/core/registry";
+import { loadJS } from "@web/core/assets";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component, onWillStart, useExternalListener, useRef, useEffect } = owl;
+const formatters = registry.category("formatters");
+const parsers = registry.category("parsers");
+
+export class DateRangeField extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.root = useRef("root");
+        this.isPickerShown = false;
+        this.pickerContainer;
+
+        useExternalListener(window, "scroll", this.onWindowScroll, { capture: true });
+        onWillStart(() => loadJS("/web/static/lib/daterangepicker/daterangepicker.js"));
+        useEffect(
+            (el) => {
+                if (el) {
+                    window.$(el).daterangepicker({
+                        timePicker: this.isDateTime,
+                        timePicker24Hour: true,
+                        timePickerIncrement: 5,
+                        autoUpdateInput: false,
+                        locale: {
+                            applyLabel: this.env._t("Apply"),
+                            cancelLabel: this.env._t("Cancel"),
+                            format: this.isDateTime
+                                ? localization.dateTimeFormat
+                                : localization.dateFormat,
+                        },
+                        startDate: window.moment(this.formattedStartDate),
+                        endDate: window.moment(this.formattedEndDate),
+                    });
+                    this.pickerContainer = window.$(el).data("daterangepicker").container[0];
+
+                    window.$(el).on("apply.daterangepicker", this.onPickerApply.bind(this));
+                    window.$(el).on("show.daterangepicker", this.onPickerShow.bind(this));
+                    window.$(el).on("hide.daterangepicker", this.onPickerHide.bind(this));
+
+                    this.pickerContainer.dataset.name = this.props.name;
+                }
+
+                return () => {
+                    if (el) {
+                        this.pickerContainer.remove();
+                    }
+                };
+            },
+            () => [this.root.el]
+        );
+    }
+
+    get isDateTime() {
+        return this.props.formatType === "datetime";
+    }
+    get formattedValue() {
+        return this.formatValue(this.props.formatType, this.props.value);
+    }
+
+    get formattedEndDate() {
+        return this.formatValue(this.props.formatType, this.props.endDate);
+    }
+
+    get formattedStartDate() {
+        return this.formatValue(this.props.formatType, this.props.startDate);
+    }
+
+    formatValue(format, value) {
+        const formatter = formatters.get(format);
+        let formattedValue;
+        try {
+            formattedValue = formatter(value, { timezone: this.isDateTime });
+        } catch {
+            this.props.invalidate();
+        }
+        return formattedValue;
+    }
+
+    onChangeInput(ev) {
+        const parse = parsers.get(this.props.formatType);
+        let value;
+        try {
+            value = parse(ev.target.value, { timezone: this.isDateTime });
+        } catch {
+            this.props.invalidate();
+            return;
+        }
+        this.props.update(value);
+    }
+
+    onWindowScroll(ev) {
+        const target = ev.target;
+        if (
+            this.isPickerShown &&
+            !this.env.isSmall &&
+            (target === window || !this.pickerContainer.contains(target))
+        ) {
+            window.$(this.root.el).data("daterangepicker").hide();
+        }
+    }
+
+    async onPickerApply(ev, picker) {
+        let start = this.isDateTime ? picker.startDate : picker.startDate.startOf("day");
+        let end = this.isDateTime ? picker.endDate : picker.endDate.startOf("day");
+        const format = this.isDateTime ? localization.dateTimeFormat : localization.dateFormat;
+        const parser = parsers.get(this.props.formatType);
+        const dates = [start, end].map((date) => {
+            return parser(date.format(format.toUpperCase()), {
+                timezone: this.isDateTime,
+            });
+        });
+        await this.props.updateRange(dates[0], dates[1]);
+        const input = document.querySelector(
+            `.o_field_daterange[name='${this.props.relatedDateRange}'] input`
+        );
+        const target = window.$(input).data("daterangepicker");
+        target.setStartDate(picker.startDate);
+        target.setEndDate(picker.endDate);
+    }
+    onPickerShow() {
+        this.isPickerShown = true;
+    }
+    onPickerHide() {
+        this.isPickerShown = false;
+    }
+}
+DateRangeField.template = "web.DateRangeField";
+
+DateRangeField.supportedTypes = ["date", "datetime"];
+
+DateRangeField.extractProps = (fieldName, record, attrs) => {
+    const relatedEndDate = attrs.options.related_end_date;
+    const relatedStartDate = attrs.options.related_start_date;
+
+    return {
+        relatedDateRange: relatedEndDate ? relatedEndDate : relatedStartDate,
+        endDate: record.data[relatedEndDate || fieldName],
+        formatType: attrs.options.format_type || record.fields[fieldName].type,
+        invalidate: () => record.setInvalidField(fieldName),
+        startDate: record.data[relatedStartDate || fieldName],
+        async updateRange(start, end) {
+            await record.update({
+                [relatedStartDate || fieldName]: start,
+                [relatedEndDate || fieldName]: end,
+            });
+        },
+    };
+};
+
+registry.category("fields").add("daterange", DateRangeField);
diff --git a/addons/web/static/src/views/fields/daterange/daterange_field.xml b/addons/web/static/src/views/fields/daterange/daterange_field.xml
new file mode 100644
index 00000000000..b0beea56949
--- /dev/null
+++ b/addons/web/static/src/views/fields/daterange/daterange_field.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DateRangeField" owl="1">
+        <t t-if="props.readonly">
+            <t t-esc="formattedValue" />
+        </t>
+        <t t-else="">
+            <input t-ref="root" type="text" t-att-value="formattedValue" t-on-change="onChangeInput" />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/datetime/datetime_field.js b/addons/web/static/src/views/fields/datetime/datetime_field.js
new file mode 100644
index 00000000000..156516623d7
--- /dev/null
+++ b/addons/web/static/src/views/fields/datetime/datetime_field.js
@@ -0,0 +1,44 @@
+/** @odoo-module **/
+
+import { DateTimePicker } from "@web/core/datepicker/datepicker";
+import { areDateEquals, formatDateTime } from "@web/core/l10n/dates";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class DateTimeField extends Component {
+    get formattedValue() {
+        return formatDateTime(this.props.value, { timezone: true });
+    }
+
+    onDateTimeChanged(date) {
+        if (!areDateEquals(this.props.value || "", date)) {
+            this.props.update(date);
+        }
+    }
+}
+
+DateTimeField.template = "web.DateTimeField";
+DateTimeField.components = {
+    DateTimePicker,
+};
+DateTimeField.props = {
+    ...standardFieldProps,
+    pickerOptions: { type: Object, optional: true },
+};
+DateTimeField.defaultProps = {
+    pickerOptions: {},
+};
+
+DateTimeField.displayName = _lt("Date & Time");
+DateTimeField.supportedTypes = ["datetime"];
+
+DateTimeField.extractProps = (fieldName, record, attrs) => {
+    return {
+        pickerOptions: attrs.options.datepicker,
+    };
+};
+
+registry.category("fields").add("datetime", DateTimeField);
diff --git a/addons/web/static/src/views/fields/datetime/datetime_field.xml b/addons/web/static/src/views/fields/datetime/datetime_field.xml
new file mode 100644
index 00000000000..de7e2212277
--- /dev/null
+++ b/addons/web/static/src/views/fields/datetime/datetime_field.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DateTimeField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="formattedValue" />
+        </t>
+        <t t-else="">
+            <DateTimePicker
+                t-props="props.pickerOptions"
+                date="props.value"
+                onDateTimeChanged="(datetime) => this.onDateTimeChanged(datetime)"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/domain/domain_field.js b/addons/web/static/src/views/fields/domain/domain_field.js
new file mode 100644
index 00000000000..a0576231ca0
--- /dev/null
+++ b/addons/web/static/src/views/fields/domain/domain_field.js
@@ -0,0 +1,129 @@
+/** @odoo-module **/
+
+import { DomainSelector } from "@web/core/domain_selector/domain_selector";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { Domain } from "@web/core/domain";
+import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillStart, onWillUpdateProps, useState } = owl;
+
+export class DomainField extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.state = useState({
+            recordCount: null,
+            isValid: true,
+        });
+        this.dialog = useService("dialog");
+
+        this.displayedDomain = null;
+        this.isDebugEdited = false;
+
+        onWillStart(() => {
+            this.displayedDomain = this.props.value;
+            this.loadCount(this.props);
+        });
+        onWillUpdateProps((nextProps) => {
+            this.isDebugEdited = this.isDebugEdited && this.props.readonly === nextProps.readonly;
+            if (!this.isDebugEdited) {
+                this.displayedDomain = nextProps.value;
+                this.loadCount(nextProps);
+            }
+        });
+
+        useBus(this.env.bus, "RELATIONAL_MODEL:NEED_LOCAL_CHANGES", async (ev) => {
+            if (this.isDebugEdited) {
+                const prom = this.loadCount(this.props);
+                ev.detail.proms.push(prom);
+                await prom;
+                if (!this.state.isValid) {
+                    this.props.invalidate();
+                }
+            }
+        });
+    }
+
+    onButtonClick() {
+        this.dialog.add(SelectCreateDialog, {
+            title: this.env._t("Selected records"),
+            noCreate: true,
+            multiSelect: false,
+            resModel: this.props.resModel,
+            domain: this.getDomain(this.props.value).toList(this.props.context) || [],
+            context: this.props.context || {},
+        });
+    }
+    get isValidDomain() {
+        try {
+            this.getDomain(this.props.value).toList();
+            return true;
+        } catch (_e) {
+            // WOWL TODO: rethrow error when not the expected type
+            return false;
+        }
+    }
+
+    getDomain(value) {
+        return new Domain(value || "[]");
+    }
+    async loadCount(props) {
+        if (!props.resModel) {
+            Object.assign(this.state, { recordCount: 0, isValid: true });
+        }
+
+        let recordCount;
+        try {
+            const domain = this.getDomain(props.value).toList(props.context);
+            recordCount = await this.orm.silent.call(props.resModel, "search_count", [domain], {
+                context: props.context,
+            });
+        } catch (_e) {
+            // WOWL TODO: rethrow error when not the expected type
+            Object.assign(this.state, { recordCount: 0, isValid: false });
+            return;
+        }
+        Object.assign(this.state, { recordCount, isValid: true });
+    }
+
+    update(domain, isDebugEdited) {
+        this.isDebugEdited = isDebugEdited;
+        return this.props.update(domain);
+    }
+}
+
+DomainField.template = "web.DomainField";
+DomainField.components = {
+    DomainSelector,
+};
+DomainField.props = {
+    ...standardFieldProps,
+    context: { type: Object, optional: true },
+    invalidate: { type: Function, optional: true },
+    resModel: { type: String, optional: true },
+};
+DomainField.defaultProps = {
+    context: {},
+    invalidate: () => {},
+};
+
+DomainField.displayName = _lt("Domain");
+DomainField.supportedTypes = ["char"];
+
+DomainField.isEmpty = () => false;
+DomainField.extractProps = (fieldName, record, attrs) => {
+    let resModel = attrs.options.model;
+    if (record.fieldNames.includes(resModel)) {
+        resModel = record.data[resModel];
+    }
+
+    return {
+        context: record.getFieldContext(fieldName),
+        invalidate: () => record.setInvalidField(fieldName),
+        resModel,
+    };
+};
+
+registry.category("fields").add("domain", DomainField);
diff --git a/addons/web/static/src/views/fields/domain/domain_field.xml b/addons/web/static/src/views/fields/domain/domain_field.xml
new file mode 100644
index 00000000000..9f38f0aaf79
--- /dev/null
+++ b/addons/web/static/src/views/fields/domain/domain_field.xml
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DomainField" owl="1">
+        <div t-att-class="{ o_inline_mode: !env.inDialog }">
+            <t t-if="props.resModel">
+                <DomainSelector
+                    resModel="props.resModel"
+                    value="displayedDomain || '[]'"
+                    readonly="props.readonly"
+                    update.bind="update"
+                    isDebugMode="!!env.debug"
+                    className="props.readonly ? 'o_read_mode' : 'o_edit_mode'"
+                />
+                <div class="o_field_domain_panel">
+                    <t t-if="state.recordCount !== null">
+                        <i class="fa fa-arrow-right" role="img" aria-label="Domain" title="Domain" />
+                        <t t-if="state.isValid and isValidDomain">
+                            <button class="btn btn-sm btn-secondary o_domain_show_selection_button" type="button" t-on-click.stop="onButtonClick">
+                                <t t-esc="state.recordCount" /> record(s)
+                            </button>
+                        </t>
+                        <t t-else="">
+                            <span class="text-warning" role="alert">
+                                <i class="fa fa-exclamation-triangle" role="img" aria-label="Warning" title="Warning" /> Invalid domain
+                            </span>
+                        </t>
+                        <t t-if="!!env.debug and !props.readonly">
+                            <button
+                                class="btn btn-sm btn-icon fa fa-refresh o_refresh_count"
+                                role="img"
+                                aria-label="Refresh"
+                                title="Refresh"
+                                t-on-click="() => this.loadCount(props)"
+                            />
+                        </t>
+                    </t>
+                    <t t-else="">
+                        <i class="fa fa-circle-o-notch fa-spin" role="img" aria-label="Loading" title="Loading" />
+                    </t>
+                </div>
+            </t>
+            <t t-else="">
+                <div>Select a model to add a filter.</div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/email/email_field.js b/addons/web/static/src/views/fields/email/email_field.js
new file mode 100644
index 00000000000..d97742001b1
--- /dev/null
+++ b/addons/web/static/src/views/fields/email/email_field.js
@@ -0,0 +1,24 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class EmailField extends Component {
+    setup() {
+        useInputField({ getValue: () => this.props.value || "" });
+    }
+}
+
+EmailField.template = "web.EmailField";
+EmailField.props = {
+    ...standardFieldProps,
+};
+
+EmailField.displayName = _lt("Email");
+EmailField.supportedTypes = ["char"];
+
+registry.category("fields").add("email", EmailField);
diff --git a/addons/web/static/src/views/fields/email/email_field.xml b/addons/web/static/src/views/fields/email/email_field.xml
new file mode 100644
index 00000000000..c3af6c6eb39
--- /dev/null
+++ b/addons/web/static/src/views/fields/email/email_field.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.EmailField" owl="1">
+        <t t-if="props.readonly">
+            <a class="o_form_uri o_text_overflow" t-on-click.stop="" t-att-href="props.value ? 'mailto:'+props.value : undefined" t-esc="props.value || ''"/>
+        </t>
+        <t t-else="">
+            <input
+                class="o_input"
+                t-att-id="props.id"
+                type="email"
+                t-att-placeholder="props.placeholder"
+                t-att-required="props.required"
+                t-ref="input"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/field.js b/addons/web/static/src/views/fields/field.js
new file mode 100644
index 00000000000..c3d177aac3b
--- /dev/null
+++ b/addons/web/static/src/views/fields/field.js
@@ -0,0 +1,262 @@
+/** @odoo-module **/
+
+import { evaluateExpr } from "@web/core/py_js/py";
+import { registry } from "@web/core/registry";
+import { archParseBoolean, evalDomain, X2M_TYPES } from "@web/views/utils";
+import { getTooltipInfo } from "./field_tooltip";
+
+const { Component, xml } = owl;
+
+const viewRegistry = registry.category("views");
+const fieldRegistry = registry.category("fields");
+
+class DefaultField extends Component {}
+DefaultField.template = xml``;
+
+function getFieldClassFromRegistry(fieldType, widget, viewType, jsClass) {
+    if (jsClass && widget) {
+        const name = `${jsClass}.${widget}`;
+        if (fieldRegistry.contains(name)) {
+            return fieldRegistry.get(name);
+        }
+    }
+    if (viewType && widget) {
+        const name = `${viewType}.${widget}`;
+        if (fieldRegistry.contains(name)) {
+            return fieldRegistry.get(name);
+        }
+    }
+
+    if (widget) {
+        if (fieldRegistry.contains(widget)) {
+            return fieldRegistry.get(widget);
+        }
+        console.warn(`Missing widget: ${widget} for field of type ${fieldType}`);
+    }
+
+    if (viewType && fieldType) {
+        const name = `${viewType}.${fieldType}`;
+        if (fieldRegistry.contains(name)) {
+            return fieldRegistry.get(name);
+        }
+    }
+
+    if (fieldRegistry.contains(fieldType)) {
+        return fieldRegistry.get(fieldType);
+    }
+
+    return DefaultField;
+}
+
+export function fieldVisualFeedback(FieldComponent, record, fieldName, fieldInfo) {
+    const modifiers = fieldInfo.modifiers || {};
+    const readonly = evalDomain(modifiers.readonly, record.evalContext);
+    const inEdit = record.mode !== "readonly";
+
+    let empty = !record.isVirtual;
+    if ("isEmpty" in FieldComponent) {
+        empty = empty && FieldComponent.isEmpty(record, fieldName);
+    } else {
+        empty = empty && !record.data[fieldName];
+    }
+    empty = inEdit ? empty && readonly : empty;
+    return {
+        readonly,
+        required: evalDomain(modifiers.required, record.evalContext),
+        invalid: record.isInvalid(fieldName),
+        empty,
+    };
+}
+
+export class Field extends Component {
+    setup() {
+        this.FieldComponent = this.props.fieldInfo.FieldComponent;
+        if (!this.FieldComponent) {
+            const fieldType = this.props.record.fields[this.props.name].type;
+            this.FieldComponent = getFieldClassFromRegistry(fieldType, this.props.type);
+        }
+    }
+
+    get classNames() {
+        const { class: _class, fieldInfo, name, record } = this.props;
+        const { readonly, required, invalid, empty } = fieldVisualFeedback(
+            this.FieldComponent,
+            record,
+            name,
+            fieldInfo
+        );
+        const classNames = {
+            o_field_widget: true,
+            o_readonly_modifier: readonly,
+            o_required_modifier: required,
+            o_field_invalid: invalid,
+            o_field_empty: empty,
+            [`o_field_${this.type}`]: true,
+            [_class]: Boolean(_class),
+        };
+
+        // generate field decorations classNames (only if field-specific decorations
+        // have been defined in an attribute, e.g. decoration-danger="other_field = 5")
+        // only handle the text-decoration.
+        const { decorations } = fieldInfo;
+        const evalContext = record.evalContext;
+        for (const decoName in decorations) {
+            const value = evaluateExpr(decorations[decoName], evalContext);
+            classNames[`text-${decoName}`] = value;
+        }
+
+        return classNames;
+    }
+
+    get type() {
+        return this.props.type || this.props.record.fields[this.props.name].type;
+    }
+
+    get fieldComponentProps() {
+        const record = this.props.record;
+        const evalContext = record.evalContext;
+        const field = record.fields[this.props.name];
+        const fieldInfo = this.props.fieldInfo;
+
+        const modifiers = fieldInfo.modifiers || {};
+        const required = evalDomain(modifiers.required, evalContext);
+        const readonlyFromModifiers = evalDomain(modifiers.readonly, evalContext);
+        const readonlyFromViewMode = !this.props.record.isInEdition;
+        const emptyRequiredValue = required && !this.props.value;
+
+        // Decoration props
+        const decorationMap = {};
+        const { decorations } = fieldInfo;
+        for (const decoName in decorations) {
+            const value = evaluateExpr(decorations[decoName], evalContext);
+            decorationMap[decoName] = value;
+        }
+
+        let propsFromAttrs = {};
+        if (this.FieldComponent.extractProps) {
+            const attrs = Object.assign({}, this.props.attrs || fieldInfo.rawAttrs, {
+                options: fieldInfo.options || {},
+            });
+            propsFromAttrs = this.FieldComponent.extractProps(this.props.name, record, attrs);
+        }
+
+        const props = { ...this.props };
+        delete props.style;
+        delete props.class;
+        delete props.showTooltip;
+        delete props.fieldInfo;
+        delete props.attrs;
+
+        return {
+            ...fieldInfo.props,
+            update: async (value) => {
+                await record.update({ [this.props.name]: value });
+                if (record.selected && record.model.multiEdit) {
+                    return;
+                }
+                // We save only if we're on view mode readonly and no readonly field modifier
+                if (readonlyFromViewMode && !readonlyFromModifiers && !emptyRequiredValue) {
+                    // TODO: maybe move this in the model
+                    return record.save();
+                }
+            },
+            value: this.props.record.data[this.props.name],
+            decorations: decorationMap,
+            readonly: readonlyFromViewMode || readonlyFromModifiers || false,
+            ...propsFromAttrs,
+            ...props,
+            type: field.type,
+        };
+    }
+
+    get tooltip() {
+        if (this.props.showTooltip) {
+            const tooltip = getTooltipInfo({
+                field: this.props.record.fields[this.props.name],
+                fieldInfo: this.props.fieldInfo,
+            });
+            if (Boolean(odoo.debug) || (tooltip && JSON.parse(tooltip).field.help)) {
+                return tooltip;
+            }
+        }
+        return false;
+    }
+}
+Field.template = xml/* xml */ `
+    <div t-att-name="props.name" t-att-class="classNames" t-att-style="props.style" t-att-data-tooltip-template="tooltip and 'web.FieldTooltip'" t-att-data-tooltip-info="tooltip">
+        <t t-component="FieldComponent" t-props="fieldComponentProps"/>
+    </div>`;
+
+Field.parseFieldNode = function (node, models, modelName, viewType, jsClass) {
+    const name = node.getAttribute("name");
+    const widget = node.getAttribute("widget");
+    const fields = models[modelName];
+    const field = fields[name];
+    const fieldInfo = {
+        name,
+        viewType,
+        context: node.getAttribute("context") || "{}",
+        domain: node.getAttribute("domain") || "[]",
+        string: node.getAttribute("string") || field.string,
+        widget,
+        modifiers: JSON.parse(node.getAttribute("modifiers") || "{}"),
+        onChange: archParseBoolean(node.getAttribute("on_change")),
+        FieldComponent: getFieldClassFromRegistry(fields[name].type, widget, viewType, jsClass),
+        decorations: {}, // populated below
+        noLabel: archParseBoolean(node.getAttribute("nolabel")),
+        props: {},
+        rawAttrs: {},
+        options: evaluateExpr(node.getAttribute("options") || "{}"),
+    };
+    for (const attribute of node.attributes) {
+        if (attribute.name in Field.forbiddenAttributeNames) {
+            throw new Error(Field.forbiddenAttributeNames[attribute.name]);
+        }
+
+        // prepare field decorations
+        if (attribute.name.startsWith("decoration-")) {
+            const decorationName = attribute.name.replace("decoration-", "");
+            fieldInfo.decorations[decorationName] = attribute.value;
+            continue;
+        }
+
+        fieldInfo.rawAttrs[attribute.name] = attribute.value;
+    }
+
+    if (fieldInfo.modifiers.invisible !== true && X2M_TYPES.includes(field.type)) {
+        const views = {};
+        for (const child of node.children) {
+            const viewType = child.tagName === "tree" ? "list" : child.tagName;
+            const { ArchParser } = viewRegistry.get(viewType);
+            const xmlSerializer = new XMLSerializer();
+            const subArch = xmlSerializer.serializeToString(child);
+            const archInfo = new ArchParser().parse(subArch, models, field.relation);
+            views[viewType] = {
+                ...archInfo,
+                fields: models[field.relation],
+            };
+            fieldInfo.relatedFields = models[field.relation];
+        }
+        fieldInfo.viewMode =
+            (node.getAttribute("mode") === "tree" ? "list" : node.getAttribute("mode")) ||
+            Object.keys(views).find((v) => ["list", "kanban"].includes(v));
+
+        const fieldsToFetch = { ...fieldInfo.FieldComponent.fieldsToFetch }; // should become an array?
+        // special case for color field
+        // GES: this is not nice, we will look for something better.
+        const colorField = fieldInfo.options.color_field;
+        if (colorField) {
+            fieldsToFetch[colorField] = { name: colorField, type: "integer", active: true };
+        }
+        fieldInfo.fieldsToFetch = fieldsToFetch;
+        fieldInfo.relation = field.relation; // not really necessary
+        fieldInfo.views = views;
+    }
+
+    return fieldInfo;
+};
+
+Field.forbiddenAttributeNames = {
+    decorations: `You cannot use the "decorations" attribute name as it is used as generated prop name for the composite decoration-<something> attributes.`,
+};
+Field.defaultProps = { fieldInfo: {} };
diff --git a/addons/web/static/src/views/fields/field_tooltip.js b/addons/web/static/src/views/fields/field_tooltip.js
new file mode 100644
index 00000000000..a7cf328bc79
--- /dev/null
+++ b/addons/web/static/src/views/fields/field_tooltip.js
@@ -0,0 +1,37 @@
+/** @odoo-module **/
+
+import fieldRegistry from "web.field_registry";
+
+export function getTooltipInfo(params) {
+    let widgetDescription = undefined;
+    if (params.fieldInfo.widget) {
+        if (params.fieldInfo.FieldComponent.name === "LegacyField") {
+            const widget = fieldRegistry.get(params.fieldInfo.widget);
+            widgetDescription = widget.prototype.description;
+        } else {
+            widgetDescription = params.fieldInfo.FieldComponent.description;
+        }
+    }
+
+    const info = {
+        viewMode: params.viewMode,
+        resModel: params.resModel,
+        debug: Boolean(odoo.debug),
+        field: {
+            label: params.field.string,
+            name: params.field.name,
+            help: params.help || params.field.help,
+            type: params.field.type,
+            widget: params.fieldInfo.widget,
+            widgetDescription,
+            context: params.fieldInfo.context,
+            domain: params.fieldInfo.domain,
+            modifiers: JSON.stringify(params.fieldInfo.modifiers),
+            changeDefault: params.field.change_default,
+            relation: params.field.relation,
+            selection: params.field.selection,
+            default: params.field.default,
+        },
+    };
+    return JSON.stringify(info);
+}
diff --git a/addons/web/static/src/views/fields/field_tooltip.xml b/addons/web/static/src/views/fields/field_tooltip.xml
new file mode 100644
index 00000000000..b6241b848da
--- /dev/null
+++ b/addons/web/static/src/views/fields/field_tooltip.xml
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FieldTooltip" owl="1">
+
+        <div t-if="info.field.label" class="o-tooltip--string" role="tooltip">
+            <t t-esc="info.field.label"/> <t t-if="info.field.noLabel and info.viewMode === 'form'">(nolabel)</t>
+        </div>
+
+        <p t-if="info.field.help" class="o-tooltip--help" role="tooltip">
+            <t t-esc="info.field.help"/>
+        </p>
+
+        <ul class="o-tooltip--technical" t-if="info.debug" role="tooltip">
+            <li data-item="field" t-if="info.field and info.field.name">
+                <span class="o-tooltip--technical--title">Field:</span>
+                <t t-esc="info.field.name"/>
+            </li>
+            <li data-item="object" t-if="info.resModel">
+                <span class="o-tooltip--technical--title">Model:</span>
+                <t t-esc="info.resModel"/>
+            </li>
+            <t t-if="info.field">
+                <li t-if="info.field.type" data-item="type" >
+                    <span class="o-tooltip--technical--title">Type:</span>
+                    <t t-esc="info.field.type"/>
+                </li>
+                <li t-if="info.field.widget" data-item="widget">
+                    <span class="o-tooltip--technical--title">Widget:</span>
+                    <t t-if="info.field.widgetDescription" t-esc="info.field.widgetDescription"/>
+                    <t t-if="info.field.widgetDescription"> (</t>
+                    <t t-esc="info.field.widget"/>
+                    <t t-if="info.field.widgetDescription">)</t>
+                </li>
+                <li t-if="info.field.context" data-item="context">
+                    <span class="o-tooltip--technical--title">Context:</span>
+                    <t t-esc="info.field.context"/>
+                </li>
+                <li t-if="info.field.domain" data-item="domain">
+                    <span class="o-tooltip--technical--title">Domain:</span>
+                    <t t-esc="info.field.domain"/>
+                </li>
+                <li t-if="info.field.modifiers" data-item="modifiers">
+                    <span class="o-tooltip--technical--title">Modifiers:</span>
+                    <t t-esc="info.field.modifiers"/>
+                </li>
+                <li t-if="info.field.default" data-item="default">
+                    <span class="o-tooltip--technical--title">Default:</span>
+                    <t t-esc="info.field.default"/>
+                </li>
+                <li t-if="info.field.changeDefault" data-item="changeDefault">
+                    <span class="o-tooltip--technical--title">Change default:</span>
+                    Yes
+                </li>
+                <li t-if="info.field.relation" data-item="relation">
+                    <span class="o-tooltip--technical--title">Relation:</span>
+                    <t t-esc="info.field.relation"/>
+                </li>
+                <li t-if="info.field.selection" data-item="selection">
+                    <span class="o-tooltip--technical--title">Selection:</span>
+                    <ul class="o-tooltip--technical">
+                        <li t-foreach="info.field.selection" t-as="option" t-key="option_index">
+                            [<t t-esc="option[0]"/>]
+                            <t t-if="option[1]"> - </t>
+                            <t t-esc="option[1]"/>
+                        </li>
+                    </ul>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss
new file mode 100644
index 00000000000..2e8e0065dcd
--- /dev/null
+++ b/addons/web/static/src/views/fields/fields.scss
@@ -0,0 +1,3 @@
+.o_field_cursor_disabled {
+    cursor: not-allowed;
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/fields/file_handler.js b/addons/web/static/src/views/fields/file_handler.js
new file mode 100644
index 00000000000..6b9964a921a
--- /dev/null
+++ b/addons/web/static/src/views/fields/file_handler.js
@@ -0,0 +1,103 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { session } from "@web/session";
+import { sprintf } from "@web/core/utils/strings";
+import { formatFloat } from "./formatters";
+
+const { Component, useRef, useState } = owl;
+
+const DEFAULT_MAX_FILE_SIZE = 128 * 1024 * 1024;
+
+/**
+ * Gets dataURL (base64 data) from the given file or blob.
+ * Technically wraps FileReader.readAsDataURL in Promise.
+ *
+ * @param {Blob | File} file
+ * @returns {Promise} resolved with the dataURL, or rejected if the file is
+ *  empty or if an error occurs.
+ */
+function getDataURLFromFile(file) {
+    if (!file) {
+        return Promise.reject();
+    }
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener("load", () => resolve(reader.result));
+        reader.addEventListener("abort", reject);
+        reader.addEventListener("error", reject);
+        reader.readAsDataURL(file);
+    });
+}
+
+export class FileUploader extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.id = `o_fileupload_${++FileUploader.nextId}`;
+        this.fileInputRef = useRef("fileInput");
+        this.state = useState({
+            isUploading: false,
+        });
+    }
+
+    get maxUploadSize() {
+        return session.max_file_upload_size || DEFAULT_MAX_FILE_SIZE;
+    }
+    /**
+     * @param {Event} ev
+     */
+    async onFileChange(ev) {
+        if (!ev.target.files.length) return;
+        for (const file of ev.target.files) {
+            if (file.size > this.maxUploadSize) {
+                this.notification.add(
+                    sprintf(
+                        this.env._t("The selected file exceed the maximum file size of %s."),
+                        formatFloat(this.maxUploadSize, { humanReadable: true })
+                    ),
+                    {
+                        title: this.env._t("File upload"),
+                        type: "danger",
+                    }
+                );
+            }
+            this.state.isUploading = true;
+            const data = await getDataURLFromFile(file);
+            if (!file.size) {
+                console.warn(`Error while uploading file : ${file.name}`);
+                this.notification.add(
+                    this.env._t("There was a problem while uploading your file."),
+                    {
+                        type: "danger",
+                    }
+                );
+            }
+            this.props.onUploaded({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                data: data.split(",")[1],
+                objectUrl: file.type === "application/pdf" ? URL.createObjectURL(file) : null,
+            });
+            this.state.isUploading = false;
+        }
+    }
+
+    onSelectFileButtonClick() {
+        this.fileInputRef.el.click();
+    }
+}
+FileUploader.template = "web.FileUploader";
+FileUploader.nextId = 0;
+
+export class FileDownloader extends Component {
+    onDownloadButtonClick() {
+        this.props.onDownload();
+    }
+}
+FileDownloader.props = {
+    file: { type: Object, optional: true },
+    fileDownloadAction: { type: String, optional: true },
+    onDownload: Function,
+};
+FileDownloader.template = "web.FileDownloader";
diff --git a/addons/web/static/src/views/fields/file_handler.xml b/addons/web/static/src/views/fields/file_handler.xml
new file mode 100644
index 00000000000..c368ed47f4a
--- /dev/null
+++ b/addons/web/static/src/views/fields/file_handler.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FileUploader" owl="1">
+        <span>
+            <span t-if="state.isUploading" class="btn btn-primary" t-esc="'Uploading...'"/>
+            <span t-else="" t-on-click.prevent="onSelectFileButtonClick">
+                <t t-slot="toggler"/>
+            </span>
+            <t t-slot="default"/>
+            <input
+                type="file"
+                t-ref="fileInput"
+                t-attf-class="o_input_file o_hidden {{ props.fileUploadClass or '' }}"
+                t-att-multiple="props.multiUpload ? 'multiple' : false" t-att-accept="props.acceptedFileExtensions or '*'"
+                t-on-change="onFileChange"
+            />
+        </span>
+    </t>
+
+    <t t-name="web.FileDownloader" owl="1">
+        <span t-esc="props.file.name"/>
+        <a class="o_form_uri mx-2" href="javascript:void(0)" t-on-click.prevent="onDownloadButtonClick">
+            <span class="fa fa-download"/>
+        </a>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/float/float_field.js b/addons/web/static/src/views/fields/float/float_field.js
new file mode 100644
index 00000000000..81b73a7b767
--- /dev/null
+++ b/addons/web/static/src/views/fields/float/float_field.js
@@ -0,0 +1,79 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { useInputField } from "../input_field_hook";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+import { formatFloat } from "../formatters";
+import { parseFloat } from "../parsers";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillUpdateProps } = owl;
+
+export class FloatField extends Component {
+    setup() {
+        this.defaultInputValue = this.getFormattedValue();
+        useInputField({
+            getValue: () => this.defaultInputValue,
+            refName: "numpadDecimal",
+            parse: (v) => this.parse(v),
+        });
+        useNumpadDecimal();
+        onWillUpdateProps((nextProps) => {
+            if (
+                nextProps.readonly !== this.props.readonly &&
+                !nextProps.readonly &&
+                nextProps.inputType !== "number"
+            ) {
+                this.defaultInputValue = this.getFormattedValue(nextProps);
+            }
+        });
+    }
+
+    parse(value) {
+        return this.props.inputType === "number" ? Number(value) : parseFloat(value);
+    }
+
+    onChange(ev) {
+        this.defaultInputValue = ev.target.value;
+    }
+
+    getFormattedValue(props = this.props) {
+        if (props.inputType === "number" && !props.readonly && props.value) {
+            return props.value;
+        }
+        return formatFloat(props.value, { digits: props.digits });
+    }
+}
+
+FloatField.template = "web.FloatField";
+FloatField.props = {
+    ...standardFieldProps,
+    inputType: { type: String, optional: true },
+    step: { type: Number, optional: true },
+    digits: { type: Array, optional: true },
+    invalidate: { type: Function, optional: true },
+};
+FloatField.defaultProps = {
+    inputType: "text",
+    invalidate: () => {},
+};
+
+FloatField.displayName = _lt("Float");
+FloatField.supportedTypes = ["float"];
+
+FloatField.isEmpty = () => false;
+FloatField.extractProps = (fieldName, record, attrs) => {
+    return {
+        invalidate: () => record.setInvalidField(fieldName),
+        inputType: attrs.options.type,
+        step: attrs.options.step,
+        // Sadly, digits param was available as an option and an attr.
+        // The option version could be removed with some xml refactoring.
+        digits:
+            (attrs.digits ? JSON.parse(attrs.digits) : attrs.options.digits) ||
+            record.fields[fieldName].digits,
+    };
+};
+
+registry.category("fields").add("float", FloatField);
diff --git a/addons/web/static/src/views/fields/float/float_field.xml b/addons/web/static/src/views/fields/float/float_field.xml
new file mode 100644
index 00000000000..4b5739405eb
--- /dev/null
+++ b/addons/web/static/src/views/fields/float/float_field.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.FloatField" owl="1">
+        <span t-if="props.readonly" t-esc="getFormattedValue()" />
+        <input t-else="" t-att-id="props.id" t-ref="numpadDecimal" t-att-type="props.inputType" inputmode="numeric" class="o_input" t-on-change="onChange" t-att-step="props.step" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/float_factor/float_factor_field.js b/addons/web/static/src/views/fields/float_factor/float_factor_field.js
new file mode 100644
index 00000000000..054b9582363
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_factor/float_factor_field.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { FloatField } from "../float/float_field";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+export class FloatFactorField extends Component {
+    get floatFieldProps() {
+        const result = {
+            ...this.props,
+            value: this.props.value * this.props.factor,
+            update: (value) => this.props.update(value / this.props.factor),
+        };
+        delete result.factor;
+        return result;
+    }
+}
+
+FloatFactorField.template = "web.FloatFactorField";
+FloatFactorField.components = { FloatField };
+FloatFactorField.props = {
+    ...standardFieldProps,
+    inputType: { type: String, optional: true },
+    digits: { type: Array, optional: true },
+    invalidate: { type: Function, optional: true },
+    factor: { type: Number, optional: true },
+};
+FloatFactorField.defaultProps = {
+    inputType: "text",
+    invalidate: () => {},
+    factor: 1,
+};
+
+FloatFactorField.supportedTypes = ["float"];
+
+FloatFactorField.isEmpty = () => false;
+FloatFactorField.extractProps = (fieldName, record, attrs) => {
+    return {
+        invalidate: record.setInvalidField.bind(record),
+        inputType: attrs.options.type,
+        digits: attrs.digits ? JSON.parse(attrs.digits) : attrs.options.digits,
+        factor: attrs.options.factor,
+    };
+};
+
+registry.category("fields").add("float_factor", FloatFactorField);
diff --git a/addons/web/static/src/views/fields/float_factor/float_factor_field.xml b/addons/web/static/src/views/fields/float_factor/float_factor_field.xml
new file mode 100644
index 00000000000..57b4c9d97af
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_factor/float_factor_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.FloatFactorField" owl="1">
+        <FloatField t-props="floatFieldProps" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/float_time/float_time_field.js b/addons/web/static/src/views/fields/float_time/float_time_field.js
new file mode 100644
index 00000000000..5f7377de69a
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_time/float_time_field.js
@@ -0,0 +1,47 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { formatFloatTime } from "../formatters";
+import { parseFloatTime } from "../parsers";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+
+const { Component } = owl;
+
+export class FloatTimeField extends Component {
+    setup() {
+        useInputField({
+            getValue: () => this.formattedValue,
+            refName: "numpadDecimal",
+            parse: (v) => parseFloatTime(v),
+        });
+        useNumpadDecimal();
+    }
+
+    get formattedValue() {
+        return formatFloatTime(this.props.value);
+    }
+}
+
+FloatTimeField.template = "web.FloatTimeField";
+FloatTimeField.props = {
+    ...standardFieldProps,
+    invalidate: { type: Function, optional: true },
+};
+FloatTimeField.defaultProps = {
+    invalidate: () => {},
+};
+
+FloatTimeField.displayName = _lt("Time");
+FloatTimeField.supportedTypes = ["float"];
+
+FloatTimeField.isEmpty = () => false;
+FloatTimeField.extractProps = (fieldName, record) => {
+    return {
+        invalidate: () => record.setInvalidField(fieldName),
+    };
+};
+
+registry.category("fields").add("float_time", FloatTimeField);
diff --git a/addons/web/static/src/views/fields/float_time/float_time_field.xml b/addons/web/static/src/views/fields/float_time/float_time_field.xml
new file mode 100644
index 00000000000..ee0425821b2
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_time/float_time_field.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.FloatTimeField" owl="1">
+        <span t-if="props.readonly" t-esc="formattedValue" />
+        <input t-else="" t-att-id="props.id" t-ref="numpadDecimal" inputmode="numeric" class="o_input" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/float_toggle/float_toggle_field.js b/addons/web/static/src/views/fields/float_toggle/float_toggle_field.js
new file mode 100644
index 00000000000..b08a7628e95
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_toggle/float_toggle_field.js
@@ -0,0 +1,56 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { formatFloat } from "../formatters";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class FloatToggleField extends Component {
+    // TODO perf issue (because of update round trip)
+    // we probably want to have a state and a useEffect or onWillUpateProps
+    onChange() {
+        let currentIndex = this.props.range.indexOf(this.props.value * this.props.factor);
+        currentIndex++;
+        if (currentIndex > this.props.range.length - 1) {
+            currentIndex = 0;
+        }
+        this.props.update(this.props.range[currentIndex] / this.props.factor);
+    }
+
+    get formattedValue() {
+        return formatFloat(this.props.value * this.props.factor, {
+            digits: this.props.digits,
+        });
+    }
+}
+
+FloatToggleField.template = "web.FloatToggleField";
+FloatToggleField.props = {
+    ...standardFieldProps,
+    digits: { type: Array, optional: true },
+    range: { type: Array, optional: true },
+    factor: { type: Number, optional: true },
+    disableReadOnly: { type: Boolean, optional: true },
+};
+FloatToggleField.defaultProps = {
+    range: [0.0, 0.5, 1.0],
+    factor: 1,
+    disableReadOnly: false,
+};
+
+FloatToggleField.supportedTypes = ["float"];
+
+FloatToggleField.isEmpty = () => false;
+FloatToggleField.extractProps = (fieldName, record, attrs) => {
+    return {
+        digits:
+            (attrs.digits ? JSON.parse(attrs.digits) : attrs.options.digits) ||
+            record.fields[fieldName].digits,
+        range: attrs.options.range,
+        factor: attrs.options.factor,
+        disableReadOnly: attrs.options.force_button || false,
+    };
+};
+
+registry.category("fields").add("float_toggle", FloatToggleField);
diff --git a/addons/web/static/src/views/fields/float_toggle/float_toggle_field.xml b/addons/web/static/src/views/fields/float_toggle/float_toggle_field.xml
new file mode 100644
index 00000000000..90452a6c013
--- /dev/null
+++ b/addons/web/static/src/views/fields/float_toggle/float_toggle_field.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.FloatToggleField" owl="1">
+        <span t-if="props.readonly and !props.disableReadOnly" t-esc="formattedValue" />
+        <button t-else="" class="o_field_float_toggle" t-on-click="onChange"><t t-esc="formattedValue" /></button>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/font_selection/font_selection_field.js b/addons/web/static/src/views/fields/font_selection/font_selection_field.js
new file mode 100644
index 00000000000..bf19642f06b
--- /dev/null
+++ b/addons/web/static/src/views/fields/font_selection/font_selection_field.js
@@ -0,0 +1,50 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+import { formatSelection } from "../formatters";
+
+const { Component } = owl;
+
+export class FontSelectionField extends Component {
+    get string() {
+        return formatSelection(this.props.value, { selection: this.props.options });
+    }
+
+    stringify(value) {
+        return JSON.stringify(value);
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    onChange(ev) {
+        const value = JSON.parse(ev.target.value);
+        this.props.update(value);
+    }
+}
+
+FontSelectionField.template = "web.FontSelectionField";
+FontSelectionField.props = {
+    ...standardFieldProps,
+    options: Object,
+    placeholder: { type: String, optional: true },
+    required: { type: Boolean, optional: true },
+};
+FontSelectionField.defaultProps = {
+    required: false,
+};
+
+FontSelectionField.displayName = _lt("Font Selection");
+FontSelectionField.supportedTypes = ["selection"];
+
+FontSelectionField.extractProps = (fieldName, record, attrs) => {
+    return {
+        options: Array.from(record.fields[fieldName].selection),
+        required: record.isRequired(fieldName),
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("font", FontSelectionField);
diff --git a/addons/web/static/src/views/fields/font_selection/font_selection_field.xml b/addons/web/static/src/views/fields/font_selection/font_selection_field.xml
new file mode 100644
index 00000000000..73afb687392
--- /dev/null
+++ b/addons/web/static/src/views/fields/font_selection/font_selection_field.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FontSelectionField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="string" t-att-raw-value="props.value" t-attf-style="font-family:{{ props.value }}"/>
+        </t>
+        <t t-else="">
+            <select class="o_input" t-on-change="onChange" t-attf-style="font-family:{{ props.value }}">
+                <t t-if="!props.required">
+                    <option
+                        value="false"
+                        t-att-selected="!props.value"
+                        t-esc="props.placeholder"
+                    />
+                </t>
+                <t t-foreach="props.options" t-as="option" t-key="option[0]">
+                    <option
+                        t-att-selected="option[0] === value"
+                        t-att-value="stringify(option[0])"
+                        t-esc="option[1]"
+                        t-attf-style="font-family:{{ option[1] }}"
+                    />
+                </t>
+            </select>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/fields/formatters.js b/addons/web/static/src/views/fields/formatters.js
similarity index 69%
rename from addons/web/static/src/fields/formatters.js
rename to addons/web/static/src/views/fields/formatters.js
index 3f3ac96aed4..8e6ef42e827 100644
--- a/addons/web/static/src/fields/formatters.js
+++ b/addons/web/static/src/views/fields/formatters.js
@@ -2,9 +2,9 @@
 
 import { formatDate, formatDateTime } from "@web/core/l10n/dates";
 import { localization as l10n } from "@web/core/l10n/localization";
-import { _lt } from "@web/core/l10n/translation";
+import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
-import { intersperse } from "@web/core/utils/strings";
+import { escape, intersperse, nbsp, sprintf } from "@web/core/utils/strings";
 import { session } from "@web/session";
 
 // -----------------------------------------------------------------------------
@@ -17,12 +17,12 @@ import { session } from "@web/session";
  * @private
  * @param {string} string representing integer number
  * @param {string} [thousandsSep=","] the separator to insert
- * @param {number[]} [grouping=[3,0]]
+ * @param {number[]} [grouping=[]]
  *   array of relative offsets at which to insert `thousandsSep`.
  *   See `strings.intersperse` method.
  * @returns {string}
  */
-function insertThousandsSep(number, thousandsSep = ",", grouping = [3, 0]) {
+function insertThousandsSep(number, thousandsSep = ",", grouping = []) {
     const negative = number[0] === "-";
     number = negative ? number.slice(1) : number;
     return (negative ? "-" : "") + intersperse(number, grouping, thousandsSep);
@@ -60,7 +60,7 @@ function humanNumber(number, options = { decimals: 0, minDigits: 1 }) {
     }
     // note: we need to call toString here to make sure we manipulate the resulting
     // string, not an object with a toString method.
-    const unitSymbols = _lt("kMGTPE").toString();
+    const unitSymbols = _t("kMGTPE").toString();
     const sign = Math.sign(number);
     number = Math.abs(number);
     let symbol = "";
@@ -89,16 +89,43 @@ function humanNumber(number, options = { decimals: 0, minDigits: 1 }) {
 // Exports
 // -----------------------------------------------------------------------------
 
+/**
+ * @param {boolean} value
+ * @returns {string}
+ */
+export function formatBoolean(value) {
+    return value ? _t("True") : _t("False");
+}
+
+/**
+ * Returns a string representing a char.  If the value is false, then we return
+ * an empty string.
+ *
+ * @param {string|false} value
+ * @param {Object} [options] additional options
+ * @param {boolean} [options.escape=false] if true, escapes the formatted value
+ * @param {boolean} [options.isPassword=false] if true, returns '********'
+ *   instead of the formatted value
+ * @returns {string}
+ */
+export function formatChar(value, options) {
+    value = typeof value === "string" ? value : "";
+    if (options && options.isPassword) {
+        return "*".repeat(value ? value.length : 0);
+    }
+    if (options && options.escape) {
+        value = escape(value);
+    }
+    return value;
+}
+
 /**
  * Returns a string representing a float.  The result takes into account the
  * user settings (to display the correct decimal separator).
  *
- * @param {float|false} value the value that should be formatted
+ * @param {number | false} value the value that should be formatted
  * @param {Object} [options]
- * @param {Object} [options.field] a description of the field (returned by
- *   fields_get for example).  It may contain a description of the number of
- *   digits that should be used.
- * @param {integer[]} [options.digits] the number of digits that should be used,
+ * @param {number[]} [options.digits] the number of digits that should be used,
  *   instead of the default digits precision in the field.
  * @param {boolean} [options.humanReadable] if true, large numbers are formatted
  *   to a human readable format.
@@ -121,28 +148,25 @@ export function formatFloat(value, options = {}) {
     const thousandsSep = "thousandsSep" in options ? options.thousandsSep : l10n.thousandsSep;
     const decimalPoint = "decimalPoint" in options ? options.decimalPoint : l10n.decimalPoint;
     let precision;
-    if (options.digits) {
+    if (options.digits && options.digits[1] !== undefined) {
         precision = options.digits[1];
-    } else if (options.field && options.field.digits) {
-        precision = options.field.digits[1];
     } else {
         precision = 2;
     }
-    const formatted = (value || 0).toFixed(precision || 2).split(".");
+    const formatted = (value || 0).toFixed(precision).split(".");
     formatted[0] = insertThousandsSep(formatted[0], thousandsSep, grouping);
     if (options.noTrailingZeros) {
         formatted[1] = formatted[1].replace(/0+$/, "");
     }
-    return formatted[1].length ? formatted.join(decimalPoint) : formatted[0];
+    return formatted[1] ? formatted.join(decimalPoint) : formatted[0];
 }
 
 /**
  * Returns a string representing a float value, from a float converted with a
  * factor.
  *
- * @param {number|false} value
+ * @param {number | false} value
  * @param {Object} [options]
- * @param {Object} [options.field] a description of the field
  * @param {number} [options.factor=1.0] conversion factor
  * @returns {string}
  */
@@ -159,9 +183,8 @@ export function formatFloatFactor(value, options = {}) {
  * we sometimes want to display something like 1:45 instead of 1.75, or 0:15
  * instead of 0.25.
  *
- * @param {number|false} value
+ * @param {number | false} value
  * @param {Object} [options]
- * @param {Object} [options.field] a description of the field
  * @param {boolean} [options.noLeadingZeroHour] if true, format like 1:30
  *   otherwise, format like 01:30
  * @returns {string}
@@ -191,9 +214,8 @@ export function formatFloatTime(value, options = {}) {
  * Returns a string representing an integer.  If the value is false, then we
  * return an empty string.
  *
- * @param {integer|false} value
+ * @param {number | false | null} value
  * @param {Object} [options]
- * @param {Object} [options.field] a description of the field
  * @param {boolean} [options.humanReadable] if true, large numbers are formatted
  *   to a human readable format.
  * @param {boolean} [options.isPassword=false] if returns true, acts like
@@ -203,11 +225,11 @@ export function formatFloatTime(value, options = {}) {
  * @returns {string}
  */
 export function formatInteger(value, options = {}) {
-    if (value === false) {
+    if (value === false || value === null) {
         return "";
     }
     if (options.isPassword) {
-        return new Array(value.length + 1).join("*");
+        return "*".repeat(value.length);
     }
     if (options.humanReadable) {
         return humanNumber(value, options);
@@ -218,30 +240,21 @@ export function formatInteger(value, options = {}) {
 }
 
 /**
- * Returns a string representing an many2one.  If the value is false, then we
- * return an empty string. Note that it accepts two types of input parameters:
- * an array, in that case we assume that the many2one value is of the form
- * [id, nameget], and we return the nameget, or it can be an object, and in that
- * case, we assume that it is a record datapoint from a BasicModel.
+ * Returns a string representing a many2one value. The value is expected to be
+ * either `false` or an array in the form [id, display_name]. The returned
+ * value will then be the display name of the given value, or an empty string
+ * if the value is false.
  *
- * @param {Array|Object|false} value
+ * @param {[number, string] | false} value
  * @param {Object} [options] additional options
- * @param {Object} [options.field] a description of the field
  * @param {boolean} [options.escape=false] if true, escapes the formatted value
  * @returns {string}
  */
 export function formatMany2one(value, options) {
     if (!value) {
         value = "";
-    } else if (Array.isArray(value)) {
-        // value is a pair [id, nameget]
-        value = value[1];
     } else {
-        // value is a datapoint, so we read its display_name field, which
-        // may in turn be a datapoint (if the name field is a many2one)
-        while (value.data) {
-            value = value.data.display_name || "";
-        }
+        value = value[1];
     }
     if (options && options.escape) {
         value = encodeURIComponent(value);
@@ -249,18 +262,34 @@ export function formatMany2one(value, options) {
     return value;
 }
 
+/**
+ * Returns a string representing a one2many or many2many value. The value is
+ * expected to be either `false` or an array of ids. The returned value will
+ * then be the count of ids in the given value in the form "x record(s)".
+ *
+ * @param {number[] | false} value
+ * @returns {string}
+ */
+export function formatX2many(value) {
+    const count = value.currentIds.length;
+    if (count === 0) {
+        return _t("No records");
+    } else if (count === 1) {
+        return _t("1 record");
+    } else {
+        return sprintf(_t("%s records"), count);
+    }
+}
+
 /**
  * Returns a string representing a monetary value. The result takes into account
  * the user settings (to display the correct decimal separator, currency, ...).
  *
- * @param {float|false} value the value that should be formatted
- * @param {Object} [field]
- *   a description of the field (returned by fields_get for example). It may
- *   contain a description of the number of digits that should be used.
+ * @param {number | false} value the value that should be formatted
  * @param {Object} [options]
  *   additional options to override the values in the python description of the
  *   field.
- * @param {integer} [options.currencyId] the id of the 'res.currency' to use
+ * @param {number} [options.currencyId] the id of the 'res.currency' to use
  * @param {string} [options.currencyField] the name of the field whose value is
  *   the currency id (ignored if options.currency_id).
  *   Note: if not given it will default to the field "currency_field" value or
@@ -276,32 +305,36 @@ export function formatMany2one(value, options) {
  * @returns {string}
  */
 export function formatMonetary(value, options = {}) {
+    // Monetary fields want to display nothing when the value is unset.
+    // You wouldn't want a value of 0 euro if nothing has been provided.
+    if (value === false) {
+        return "";
+    }
+
     let currencyId = options.currencyId;
     if (!currencyId && options.data) {
-        const currencyField =
-            options.currencyField ||
-            (options.field && options.field.currency_field) ||
-            "currency_id";
-        currencyId = options.data[currencyField] && options.data[currencyField].res_id;
+        const currencyField = options.currencyField || "currency_id";
+        const dataValue = options.data[currencyField];
+        currencyId = Array.isArray(dataValue) ? dataValue[0] : dataValue;
     }
     const currency = session.currencies[currencyId];
     const digits = (currency && currency.digits) || options.digits;
 
-    let formatted;
+    let formattedValue;
     if (options.humanReadable) {
-        formatted = humanNumber(value, { decimals: digits ? digits[1] : 2 });
+        formattedValue = humanNumber(value, { decimals: digits ? digits[1] : 2 });
     } else {
-        formatted = formatFloat(value, { digits });
+        formattedValue = formatFloat(value, { digits });
     }
 
     if (!currency || options.noSymbol) {
-        return formatted;
+        return formattedValue;
     }
+    const formatted = [currency.symbol, formattedValue];
     if (currency.position === "after") {
-        return `${formatted} ${currency.symbol}`;
-    } else {
-        return `${currency.symbol} ${formatted}`;
+        formatted.reverse();
     }
+    return formatted.join(nbsp);
 }
 
 /**
@@ -310,7 +343,6 @@ export function formatMonetary(value, options = {}) {
  *
  * @param {number | false} value
  * @param {Object} [options]
- * @param {Object} [options.field] a description of the field
  * @param {boolean} [options.noSymbol] if true, doesn't concatenate with "%"
  * @returns {string}
  */
@@ -321,14 +353,57 @@ export function formatPercentage(value, options = {}) {
     return `${formatted}${options.noSymbol ? "" : "%"}`;
 }
 
+/**
+ * Returns a string representing the value of the reference field.
+ *
+ * @param {Object|false} value Object with keys "resId" and "displayName"
+ * @param {Object} [options={}]
+ * @returns {string}
+ */
+export function formatReference(value, options) {
+    return formatMany2one(value ? [value.resId, value.displayName] : false, options);
+}
+
+/**
+ * Returns a string of the value of the selection.
+ *
+ * @param {Object} [options={}]
+ * @param {[string, string][]} [options.selection]
+ * @param {Object} [options.field]
+ * @returns {string}
+ */
+export function formatSelection(value, options = {}) {
+    const selection = options.selection || (options.field && options.field.selection) || [];
+    const option = selection.find((option) => option[0] === value);
+    return option ? option[1] : "";
+}
+
+/**
+ * Returns the value or an empty string if it's falsy.
+ *
+ * @param {string | false} value
+ * @returns {string}
+ */
+export function formatText(value) {
+    return value || "";
+}
+
 registry
     .category("formatters")
+    .add("boolean", formatBoolean)
+    .add("char", formatChar)
     .add("date", formatDate)
     .add("datetime", formatDateTime)
     .add("float", formatFloat)
     .add("float_factor", formatFloatFactor)
     .add("float_time", formatFloatTime)
+    .add("html", (value) => value)
     .add("integer", formatInteger)
     .add("many2one", formatMany2one)
+    .add("one2many", formatX2many)
+    .add("many2many", formatX2many)
     .add("monetary", formatMonetary)
-    .add("percentage", formatPercentage);
+    .add("percentage", formatPercentage)
+    .add("reference", formatReference)
+    .add("selection", formatSelection)
+    .add("text", formatText);
diff --git a/addons/web/static/src/views/fields/handle/handle_field.js b/addons/web/static/src/views/fields/handle/handle_field.js
new file mode 100644
index 00000000000..51404194dd9
--- /dev/null
+++ b/addons/web/static/src/views/fields/handle/handle_field.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class HandleField extends Component {}
+
+HandleField.template = "web.HandleField";
+HandleField.props = {
+    ...standardFieldProps,
+};
+HandleField.displayName = _lt("Handle");
+HandleField.supportedTypes = ["integer"];
+HandleField.isEmpty = () => false;
+
+registry.category("fields").add("handle", HandleField);
diff --git a/addons/web/static/src/views/fields/handle/handle_field.xml b/addons/web/static/src/views/fields/handle/handle_field.xml
new file mode 100644
index 00000000000..7091e381da3
--- /dev/null
+++ b/addons/web/static/src/views/fields/handle/handle_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.HandleField" owl="1">
+        <span class="o_row_handle fa fa-sort ui-sortable-handle" t-on-click.stop="" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/html/html_field.js b/addons/web/static/src/views/fields/html/html_field.js
new file mode 100644
index 00000000000..e4baee895b8
--- /dev/null
+++ b/addons/web/static/src/views/fields/html/html_field.js
@@ -0,0 +1,10 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { TextField } from "../text/text_field";
+
+export class HtmlField extends TextField {}
+
+HtmlField.template = "web.HtmlField";
+
+registry.category("fields").add("html", HtmlField);
diff --git a/addons/web/static/src/views/fields/html/html_field.xml b/addons/web/static/src/views/fields/html/html_field.xml
new file mode 100644
index 00000000000..68442b1b309
--- /dev/null
+++ b/addons/web/static/src/views/fields/html/html_field.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.HtmlField" owl="1">
+        <t t-if="props.readonly">
+            <span t-out="props.value or ''" />
+        </t>
+        <t t-else="" t-call="web.TextField" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/image/image_field.js b/addons/web/static/src/views/fields/image/image_field.js
new file mode 100644
index 00000000000..04b8926b15b
--- /dev/null
+++ b/addons/web/static/src/views/fields/image/image_field.js
@@ -0,0 +1,121 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { url } from "@web/core/utils/urls";
+import { _lt } from "@web/core/l10n/translation";
+import { FileUploader } from "../file_handler";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, useState } = owl;
+
+export const fileTypeMagicWordMap = {
+    "/": "jpg",
+    R: "gif",
+    i: "png",
+    P: "svg+xml",
+};
+const placeholder = "/web/static/img/placeholder.png";
+
+function isBinarySize(value) {
+    return /^\d+(\.\d*)? [^0-9]+$/.test(value);
+}
+
+export class ImageField extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.state = useState({
+            isValid: true,
+        });
+    }
+
+    get url() {
+        if (this.state.isValid && this.props.value) {
+            if (isBinarySize(this.props.value)) {
+                const previewFieldName = this.props.previewImage || this.props.name;
+                return url("/web/image", {
+                    model: this.props.resModel,
+                    id: this.props.resId,
+                    field: previewFieldName,
+                });
+            } else {
+                // Use magic-word technique for detecting image type
+                const magic = fileTypeMagicWordMap[this.props.value[0]] || "png";
+                return `data:image/${magic};base64,${this.props.value}`;
+            }
+        }
+        return placeholder;
+    }
+    get sizeStyle() {
+        let style = "";
+        if (this.props.width) {
+            style += `max-width: ${this.props.width}px;`;
+        }
+        if (this.props.height) {
+            style += `max-height: ${this.props.height}px;`;
+        }
+        return style;
+    }
+    get hasTooltip() {
+        return this.props.enableZoom && this.props.readonly && this.props.value;
+    }
+    get tooltipAttributes() {
+        return {
+            template: "web.ImageZoomTooltip",
+            info: JSON.stringify({ url: this.url }),
+        };
+    }
+
+    onFileRemove() {
+        this.state.isValid = true;
+        this.props.update(false);
+    }
+    onFileUploaded(info) {
+        this.state.isValid = true;
+        this.props.update(info.data);
+    }
+    onLoadFailed() {
+        this.state.isValid = false;
+        this.notification.add(this.env._t("Could not display the selected image"), {
+            type: "danger",
+        });
+    }
+}
+
+ImageField.template = "web.ImageField";
+ImageField.components = {
+    FileUploader,
+};
+ImageField.props = {
+    ...standardFieldProps,
+    enableZoom: { type: Boolean, optional: true },
+    zoomDelay: { type: Number, optional: true },
+    previewImage: { type: String, optional: true },
+    acceptedFileExtensions: { type: String, optional: true },
+    width: { type: Number, optional: true },
+    height: { type: Number, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+ImageField.defaultProps = {
+    acceptedFileExtensions: "image/*",
+};
+
+ImageField.displayName = _lt("Image");
+ImageField.supportedTypes = ["binary"];
+
+ImageField.extractProps = (fieldName, record, attrs) => {
+    return {
+        enableZoom: attrs.options.zoom,
+        zoomDelay: attrs.options.zoom_delay,
+        previewImage: attrs.preview_image,
+        acceptedFileExtensions: attrs.options.accepted_file_extensions,
+        width: attrs.options.size ? attrs.options.size[0] : attrs.width,
+        height: attrs.options.size ? attrs.options.size[1] : attrs.height,
+        resId: record.resId,
+        resModel: record.resModel,
+    };
+};
+
+registry.category("fields").add("image", ImageField);
+registry.category("fields").add("kanban.image", ImageField); // FIXME WOWL: s.t. we don't use the legacy one
diff --git a/addons/web/static/src/views/fields/image/image_field.scss b/addons/web/static/src/views/fields/image/image_field.scss
new file mode 100644
index 00000000000..e5ed1020427
--- /dev/null
+++ b/addons/web/static/src/views/fields/image/image_field.scss
@@ -0,0 +1,58 @@
+.o_field_image {
+    position: relative;
+
+    .o_form_image_controls {
+        @include o-position-absolute(0, 0);
+        width: 100%;
+        color: white;
+        background-color: $o-brand-primary;
+        opacity: 0;
+        transition: opacity ease 400ms;
+        min-width: 35px;
+
+        button.fa {
+            border: none;
+            background-color: transparent;
+            outline: 0 !important;
+        }
+        .fa {
+            padding: 4px;
+            margin: 5px;
+            cursor: pointer;
+        }
+    }
+
+    @include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
+        .o_form_image_controls {
+            position: initial;
+            opacity: 1;
+            .fa {
+                width: 50%;
+                padding: 6px;
+                margin: 0px;
+                text-align: center;
+                &.o_select_file_button{
+                    background: $o-brand-primary;
+                }
+                &.o_clear_file_button{
+                    background: theme-color('danger');
+                }
+            }
+        }
+    }
+
+    &:hover .o_form_image_controls {
+        opacity: 0.8;
+    }
+
+    &.o_field_invalid img {
+        border: 1px solid theme-color('danger');
+    }
+}
+
+.o_image_zoom {
+    img {
+        max-width: 50vw;
+        max-height: 50vh;
+    }
+}
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
new file mode 100644
index 00000000000..8f6d149e115
--- /dev/null
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ImageField" owl="1">
+        <t t-if="!props.readonly">
+            <div class="position-relative" aria-atomic="true" t-att-style="sizeStyle">
+                <div class="o_form_image_controls">
+                    <FileUploader
+                        acceptedFileExtensions="props.acceptedFileExtensions"
+                        onUploaded.bind="onFileUploaded"
+                        type="'image'"
+                    >
+                        <t t-set-slot="toggler">
+                            <button
+                                class="fa fa-pencil fa-lg float-left o_select_file_button"
+                                data-tooltip="Edit"
+                                aria-label="Edit"
+                            />
+                        </t>
+                        <button
+                            t-if="props.value and state.isValid"
+                            class="fa fa-trash-o fa-lg float-right o_clear_file_button"
+                            data-tooltip="Clear"
+                            aria-label="Clear"
+                            t-on-click="onFileRemove"
+                        />
+                    </FileUploader>
+                </div>
+            </div>
+        </t>
+        <img
+            class="img img-fluid"
+            alt="Binary file"
+            t-att-src="url"
+            t-att-border="props.readonly ? 0 : 1"
+            t-att-name="props.name"
+            t-att-height="props.height"
+            t-att-width="props.width"
+            t-att-style="sizeStyle"
+            t-on-error.stop="onLoadFailed"
+            t-att-data-tooltip-template="hasTooltip and tooltipAttributes.template"
+            t-att-data-tooltip-info="hasTooltip and tooltipAttributes.info"
+            t-att-data-tooltip-delay="hasTooltip and props.zoomDelay"
+        />
+    </t>
+
+    <t t-name="web.ImageZoomTooltip" owl="1">
+        <div class="o_image_zoom">
+            <img t-att-src="info.url" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/image_url/image_url_field.js b/addons/web/static/src/views/fields/image_url/image_url_field.js
new file mode 100644
index 00000000000..a14e49bf731
--- /dev/null
+++ b/addons/web/static/src/views/fields/image_url/image_url_field.js
@@ -0,0 +1,64 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillUpdateProps, useState } = owl;
+
+export class ImageUrlField extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.state = useState({
+            src: this.props.value,
+        });
+
+        onWillUpdateProps((nextProps) => {
+            if (this.props.value !== nextProps.value) {
+                this.state.value = nextProps.value;
+            }
+        });
+    }
+
+    get sizeStyle() {
+        let style = "";
+        if (this.props.width) {
+            style += `max-width: ${this.props.width}px;`;
+        }
+        if (this.props.height) {
+            style += `max-height: ${this.props.height}px;`;
+        }
+        return style;
+    }
+
+    onLoadFailed() {
+        this.state.src = this.constructor.fallbackSrc;
+        this.notification.add(this.env._t("Could not display the specified image url."), {
+            type: "info",
+        });
+    }
+}
+
+ImageUrlField.fallbackSrc = "/web/static/img/placeholder.png";
+
+ImageUrlField.template = "web.ImageUrlField";
+ImageUrlField.props = {
+    ...standardFieldProps,
+    width: { type: Number, optional: true },
+    height: { type: Number, optional: true },
+};
+
+ImageUrlField.displayName = _lt("Image");
+ImageUrlField.supportedTypes = ["char"];
+
+ImageUrlField.extractProps = (fieldName, record, attrs) => {
+    return {
+        width: attrs.options.size ? attrs.options.size[0] : attrs.width,
+        height: attrs.options.size ? attrs.options.size[1] : attrs.height,
+    };
+};
+
+registry.category("fields").add("image_url", ImageUrlField);
+// TODO WOWL: remove below when old registry is removed.
+registry.category("fields").add("kanban.image_url", ImageUrlField);
diff --git a/addons/web/static/src/views/fields/image_url/image_url_field.xml b/addons/web/static/src/views/fields/image_url/image_url_field.xml
new file mode 100644
index 00000000000..b10139fc3c3
--- /dev/null
+++ b/addons/web/static/src/views/fields/image_url/image_url_field.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ImageUrlField" owl="1">
+        <img
+            class="img img-fluid"
+            alt="Image"
+            t-att-src="state.src"
+            t-att-border="props.readonly ? 0 : 1"
+            t-att-name="props.name"
+            t-att-height="props.height"
+            t-att-width="props.width"
+            t-att-style="sizeStyle"
+            t-on-error="onLoadFailed"
+        />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/input_field_hook.js b/addons/web/static/src/views/fields/input_field_hook.js
new file mode 100644
index 00000000000..94c9601369e
--- /dev/null
+++ b/addons/web/static/src/views/fields/input_field_hook.js
@@ -0,0 +1,84 @@
+/** @odoo-module **/
+
+import { useBus } from "@web/core/utils/hooks";
+
+const { useComponent, useEffect, useRef, useEnv } = owl;
+
+/**
+ * This hook is meant to be used by field components that use an input or
+ * textarea to edit their value. Its purpose is to prevent that value from being
+ * erased by an update of the model (typically coming from an onchange) when the
+ * user is currently editing it.
+ *
+ * @param {() => string} getValue a function that returns the value to write in
+ *   the input, if the user isn't currently editing it
+ * @param {string} [refName="input"] the ref of the input/textarea
+ */
+export function useInputField(params) {
+    const env = useEnv();
+    const inputRef = useRef(params.refName || "input");
+    const component = useComponent();
+    let isDirty = false;
+    let lastSetValue = null;
+    function onInput(ev) {
+        isDirty = ev.target.value !== lastSetValue;
+        if (component.props.setDirty) {
+            component.props.setDirty(isDirty);
+        }
+    }
+    function onChange(ev) {
+        lastSetValue = ev.target.value;
+        isDirty = false;
+        try {
+            const val = params.parse ? params.parse(ev.target.value) : ev.target.value;
+            component.props.update(val);
+        } catch (_e) {
+            component.props.invalidate();
+        }
+        if (component.props.setDirty) {
+            component.props.setDirty(isDirty);
+        }
+    }
+    useBus(env.bus, "RELATIONAL_MODEL:WILL_SAVE_URGENTLY", () => commitChanges(true));
+    useBus(env.bus, "RELATIONAL_MODEL:NEED_LOCAL_CHANGES", () => commitChanges(false));
+    useEffect(
+        (inputEl) => {
+            if (inputEl) {
+                inputEl.addEventListener("input", onInput);
+                inputEl.addEventListener("change", onChange);
+                return () => {
+                    inputEl.removeEventListener("input", onInput);
+                    inputEl.removeEventListener("change", onChange);
+                };
+            }
+        },
+        () => [inputRef.el]
+    );
+    useEffect(() => {
+        if (inputRef.el && !isDirty) {
+            inputRef.el.value = params.getValue();
+            lastSetValue = inputRef.el.value;
+        }
+    });
+
+    async function commitChanges(urgent) {
+        if (isDirty || urgent) {
+            isDirty = false;
+            try {
+                const val = params.parse ? params.parse(inputRef.el.value) : inputRef.el.value;
+                if (val !== component.props.value) {
+                    await component.props.update(val);
+                }
+            } catch (_e) {
+                if (urgent) {
+                    return;
+                } else {
+                    component.props.invalidate();
+                }
+            }
+            if (component.props.setDirty) {
+                component.props.setDirty(false);
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/fields/integer/integer_field.js b/addons/web/static/src/views/fields/integer/integer_field.js
new file mode 100644
index 00000000000..9811209319d
--- /dev/null
+++ b/addons/web/static/src/views/fields/integer/integer_field.js
@@ -0,0 +1,57 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { formatInteger } from "../formatters";
+import { parseInteger } from "../parsers";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+
+const { Component } = owl;
+
+export class IntegerField extends Component {
+    setup() {
+        useInputField({
+            getValue: () => this.formattedValue,
+            refName: "numpadDecimal",
+            parse: (v) => parseInteger(v),
+        });
+        useNumpadDecimal();
+    }
+
+    get formattedValue() {
+        if (!this.props.readonly && this.props.inputType === "number") {
+            return this.props.value;
+        }
+        return formatInteger(this.props.value);
+    }
+}
+
+IntegerField.template = "web.IntegerField";
+IntegerField.props = {
+    ...standardFieldProps,
+    inputType: { type: String, optional: true },
+    step: { type: Number, optional: true },
+    invalidate: { type: Function, optional: true },
+    placeholder: { type: String, optional: true },
+};
+IntegerField.defaultProps = {
+    inputType: "text",
+    invalidate: () => {},
+};
+
+IntegerField.displayName = _lt("Integer");
+IntegerField.supportedTypes = ["integer"];
+
+IntegerField.isEmpty = (record, fieldName) => (record.data[fieldName] === false ? true : false);
+IntegerField.extractProps = (fieldName, record, attrs) => {
+    return {
+        inputType: attrs.options.type,
+        step: attrs.options.step,
+        invalidate: () => record.setInvalidField(fieldName),
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("integer", IntegerField);
diff --git a/addons/web/static/src/views/fields/integer/integer_field.xml b/addons/web/static/src/views/fields/integer/integer_field.xml
new file mode 100644
index 00000000000..7cb843d0631
--- /dev/null
+++ b/addons/web/static/src/views/fields/integer/integer_field.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.IntegerField" owl="1">
+        <span t-if="props.readonly" t-esc="formattedValue" />
+        <input t-ref="numpadDecimal" t-att-id="props.id" t-att-type="props.inputType" t-att-placeholder="props.placeholder" inputmode="numeric" t-else="" class="o_input" t-att-step="props.step" />
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
new file mode 100644
index 00000000000..10a6402841c
--- /dev/null
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.js
@@ -0,0 +1,151 @@
+/** @odoo-module **/
+
+import { loadJS } from "@web/core/assets";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillStart, useEffect, useRef } = owl;
+
+export class JournalDashboardGraphField extends Component {
+    setup() {
+        this.chart = null;
+        this.canvasRef = useRef("canvas");
+        this.data = JSON.parse(this.props.value);
+
+        onWillStart(() => loadJS(["/web/static/lib/Chart/Chart.js"]));
+
+        useEffect(() => {
+            this.renderChart();
+            return () => {
+                if (this.chart) {
+                    this.chart.destroy();
+                }
+            };
+        });
+    }
+
+    /**
+     * Instantiates a Chart (Chart.js lib) to render the graph according to
+     * the current config.
+     */
+    renderChart() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        let config;
+        if (this.props.graphType === "line") {
+            config = this.getLineChartConfig();
+        } else if (this.props.graphType === "bar") {
+            config = this.getBarChartConfig();
+        }
+        this.chart = new Chart(this.canvasRef.el, config);
+        // To perform its animations, ChartJS will perform each animation
+        // step in the next animation frame. The initial rendering itself
+        // is delayed for consistency. We can avoid this by manually
+        // advancing the animation service.
+        Chart.animationService.advance();
+    }
+    getLineChartConfig() {
+        const labels = this.data[0].values.map(function (pt) {
+            return pt.x;
+        });
+        const borderColor = this.data[0].is_sample_data ? "#dddddd" : "#875a7b";
+        const backgroundColor = this.data[0].is_sample_data ? "#ebebeb" : "#dcd0d9";
+        return {
+            type: "line",
+            data: {
+                labels,
+                datasets: [
+                    {
+                        backgroundColor,
+                        borderColor,
+                        data: this.data[0].values,
+                        fill: "start",
+                        label: this.data[0].key,
+                        borderWidth: 2,
+                    },
+                ],
+            },
+            options: {
+                legend: { display: false },
+                scales: {
+                    yAxes: [{ display: false }],
+                    xAxes: [{ display: false }],
+                },
+                maintainAspectRatio: false,
+                elements: {
+                    line: {
+                        tension: 0.000001,
+                    },
+                },
+                tooltips: {
+                    intersect: false,
+                    position: "nearest",
+                    caretSize: 0,
+                },
+            },
+        };
+    }
+
+    getBarChartConfig() {
+        const data = [];
+        const labels = [];
+        const backgroundColor = [];
+
+        this.data[0].values.forEach(function (pt) {
+            data.push(pt.value);
+            labels.push(pt.label);
+            let color =
+                pt.type === "past" ? "#ccbdc8" : pt.type === "future" ? "#a5d8d7" : "#ebebeb";
+            backgroundColor.push(color);
+        });
+        return {
+            type: "bar",
+            data: {
+                labels,
+                datasets: [
+                    {
+                        backgroundColor,
+                        data,
+                        fill: "start",
+                        label: this.data[0].key,
+                    },
+                ],
+            },
+            options: {
+                legend: { display: false },
+                scales: {
+                    yAxes: [{ display: false }],
+                },
+                maintainAspectRatio: false,
+                tooltips: {
+                    intersect: false,
+                    position: "nearest",
+                    caretSize: 0,
+                },
+                elements: {
+                    line: {
+                        tension: 0.000001,
+                    },
+                },
+            },
+        };
+    }
+}
+
+JournalDashboardGraphField.template = "web.JournalDashboardGraphField";
+JournalDashboardGraphField.props = {
+    ...standardFieldProps,
+    className: { type: String, optional: true },
+    graphType: String,
+};
+
+JournalDashboardGraphField.supportedTypes = ["text"];
+
+JournalDashboardGraphField.extractProps = (fieldName, record, attrs) => {
+    return {
+        graphType: attrs.graph_type,
+    };
+};
+
+registry.category("fields").add("dashboard_graph", JournalDashboardGraphField);
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.scss b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.scss
new file mode 100644
index 00000000000..5a6d26d5d87
--- /dev/null
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.scss
@@ -0,0 +1,3 @@
+.o_field_dashboard_graph {
+    width: 100%;
+}
diff --git a/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.xml b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.xml
new file mode 100644
index 00000000000..83ac076ac2e
--- /dev/null
+++ b/addons/web/static/src/views/fields/journal_dashboard_graph/journal_dashboard_graph_field.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.JournalDashboardGraphField" owl="1">
+        <div class="o_dashboard_graph" t-att-class="props.className" t-attf-class="o_graph_{{ props.graphType }}chart">
+            <canvas t-ref="canvas"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/label_selection/label_selection_field.js b/addons/web/static/src/views/fields/label_selection/label_selection_field.js
new file mode 100644
index 00000000000..1339e466aad
--- /dev/null
+++ b/addons/web/static/src/views/fields/label_selection/label_selection_field.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+import { formatSelection } from "../formatters";
+
+const { Component } = owl;
+
+export class LabelSelectionField extends Component {
+    get className() {
+        return this.props.classesObj[this.props.value] || "primary";
+    }
+    get string() {
+        return formatSelection(this.props.value, { selection: this.props.options });
+    }
+}
+
+LabelSelectionField.template = "web.LabelSelectionField";
+LabelSelectionField.props = {
+    ...standardFieldProps,
+    classesObj: { type: Object, optional: true },
+    options: Object,
+};
+LabelSelectionField.defaultProps = {
+    classesObj: {},
+};
+
+LabelSelectionField.displayName = _lt("Label Selection");
+LabelSelectionField.supportedTypes = ["selection"];
+
+LabelSelectionField.extractProps = (fieldName, record, attrs) => {
+    return {
+        classesObj: attrs.options.classes,
+        options: Array.from(record.fields[fieldName].selection),
+    };
+};
+
+registry.category("fields").add("label_selection", LabelSelectionField);
diff --git a/addons/web/static/src/views/fields/label_selection/label_selection_field.xml b/addons/web/static/src/views/fields/label_selection/label_selection_field.xml
new file mode 100644
index 00000000000..ef15996bb13
--- /dev/null
+++ b/addons/web/static/src/views/fields/label_selection/label_selection_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.LabelSelectionField" owl="1">
+        <span t-attf-class="{{ 'badge badge-' + className}} " t-esc="string" t-att-raw-value="props.value"/>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.js b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.js
new file mode 100644
index 00000000000..7b5a737bf41
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.js
@@ -0,0 +1,69 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { standardFieldProps } from "../standard_field_props";
+import { FileUploader } from "../file_handler";
+
+const { Component, useState } = owl;
+
+export class Many2ManyBinaryField extends Component {
+    setup() {
+        this.state = useState({
+            files: this.props.value.records.map((record) => record.data),
+        });
+        this.orm = useService("orm");
+    }
+
+    getUrl(id) {
+        return "/web/content/" + id + "?download=true";
+    }
+
+    getExtension(file) {
+        return file.name.replace(/^.*\./, "");
+    }
+
+    async onFileUploaded(file) {
+        const data = await this.orm.call("ir.attachment", "name_create", [file], {
+            context: this.props.context,
+        });
+        const ids = [...this.props.value.currentIds, data[0]];
+        this.props.value.replaceWith(ids);
+
+        const res = {
+            ...data[1],
+            id: data[0],
+        };
+        this.state.files.push(res);
+    }
+
+    async onFileRemove(ev) {
+        const ids = this.props.value.currentIds.filter((id) => id !== Number(ev.target.dataset.id));
+        this.props.value.replaceWith(ids);
+    }
+}
+
+Many2ManyBinaryField.template = "web.Many2ManyBinaryField";
+Many2ManyBinaryField.components = {
+    FileUploader,
+};
+Many2ManyBinaryField.props = {
+    ...standardFieldProps,
+    acceptedFileExtensions: { type: String, optional: true },
+    className: { type: String, optional: true },
+    uploadText: { type: String, optional: true },
+    items: { type: Object, optional: true },
+};
+
+Many2ManyBinaryField.supportedTypes = ["many2many"];
+
+Many2ManyBinaryField.isEmpty = () => false;
+Many2ManyBinaryField.extractProps = (fieldName, record, attrs) => {
+    return {
+        acceptedFileExtensions: attrs.options.accepted_file_extensions,
+        className: attrs.class,
+        uploadText: record.fields[fieldName].string,
+    };
+};
+
+registry.category("fields").add("many2many_binary", Many2ManyBinaryField);
diff --git a/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
new file mode 100644
index 00000000000..e1226b139b6
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_binary/many2many_binary_field.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2ManyBinaryField" owl="1">
+        <div t-attf-class="oe_fileupload {{props.className ? props.className : ''}}" aria-atomic="true">
+            <div class="o_attachments">
+                <t t-foreach="state.files" t-as="file" t-key="file_index">
+                   <t t-if="true" t-call="Many2ManyBinaryField.attachment_preview"/>
+                </t>
+            </div>
+            <div t-if="!props.readonly" class="oe_add">
+                <FileUploader
+                    acceptedFileExtensions="props.acceptedFileExtensions"
+                    multiUpload="true"
+                    onUploaded.bind="onFileUploaded"
+                >
+                    <t t-set-slot="toggler">
+                        <button class="btn btn-secondary o_attach" title="Attach">
+                            <span class="fa fa-paperclip" aria-label="Attach"/> <t t-esc="props.uploadText"/>
+                        </button>
+                    </t>
+                </FileUploader>
+            </div>
+        </div>
+    </t>
+
+<t t-name="Many2ManyBinaryField.attachment_preview" owl="1">
+    <t t-set="editable" t-value="!props.readonly"/>
+    <div t-attf-class="o_attachment o_attachment_many2many #{ editable ? 'o_attachment_editable' : '' } #{upload ? 'o_attachment_uploading' : ''}" t-att-title="file.name">
+        <div class="o_attachment_wrap">
+            <t t-set="ext" t-value="getExtension(file)"/>
+            <div class="o_image_box float-left" t-att-data-id="file.id">
+                <a t-att-href="getUrl(file.id)" t-att-title="'Download ' + file.name" aria-label="Download">
+                    <span class="o_image o_hover" t-att-data-mimetype="file.type" t-att-data-ext="ext" role="img"/>
+                </a>
+            </div>
+
+            <div class="caption">
+                <a class="ml4" t-att-href="getUrl(file.id)" t-att-title="'Download ' + file.name"><t t-esc='file.name'/></a>
+            </div>
+            <div class="caption small">
+                <a class="ml4 small text-uppercase" t-att-href="getUrl(file.id)" t-att-title="'Download ' + file.name"><b><t t-esc='ext'/></b></a>
+                <div t-if="editable" class="progress o_attachment_progress_bar">
+                    <div class="progress-bar progress-bar-striped active" style="width: 100%">Uploading</div>
+                </div>
+            </div>
+
+            <div class="o_attachment_uploaded"><i class="text-success fa fa-check" role="img" aria-label="Uploaded" title="Uploaded"/></div>
+            <div t-if="!props.readonly" class="o_attachment_delete" t-att-data-id="file.id" t-on-click.stop="onFileRemove"><span class="text-white" role="img" aria-label="Delete" title="Delete">×</span></div>
+        </div>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.js b/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.js
new file mode 100644
index 00000000000..c047e276e91
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.js
@@ -0,0 +1,58 @@
+/** @odoo-module **/
+
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class Many2ManyCheckboxesField extends Component {
+    isSelected(item) {
+        return this.props.value.currentIds.includes(item[0]);
+    }
+
+    onChange(resId, checked) {
+        if (checked) {
+            this.props.value.replaceWith([...this.props.value.currentIds, resId]);
+        } else {
+            const currentIds = [...this.props.value.currentIds];
+            const index = currentIds.indexOf(resId);
+            if (index > -1) {
+                currentIds.splice(index, 1);
+            }
+            this.props.value.replaceWith(currentIds);
+        }
+    }
+}
+
+Many2ManyCheckboxesField.template = "web.Many2ManyCheckboxesField";
+Many2ManyCheckboxesField.components = { CheckBox };
+Many2ManyCheckboxesField.props = {
+    ...standardFieldProps,
+    items: Object,
+};
+
+Many2ManyCheckboxesField.displayName = _lt("Checkboxes");
+Many2ManyCheckboxesField.supportedTypes = ["many2many"];
+
+Many2ManyCheckboxesField.isEmpty = () => false;
+Many2ManyCheckboxesField.extractProps = (fieldName, record) => {
+    return {
+        items: record.preloadedData[fieldName],
+    };
+};
+
+registry.category("fields").add("many2many_checkboxes", Many2ManyCheckboxesField);
+
+export function preloadMany2ManyCheckboxes(orm, record, fieldName) {
+    const field = record.fields[fieldName];
+    const context = record.evalContext;
+    const domain = record.getFieldDomain(fieldName).toList(context);
+    return orm.call(field.relation, "name_search", ["", domain]);
+}
+
+registry.category("preloadedData").add("many2many_checkboxes", {
+    loadOnTypes: ["many2many"],
+    preload: preloadMany2ManyCheckboxes,
+});
diff --git a/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.xml b/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.xml
new file mode 100644
index 00000000000..45b30814bbd
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_checkboxes/many2many_checkboxes_field.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2ManyCheckboxesField" owl="1">
+        <div aria-atomic="true">
+            <t t-foreach="props.items" t-as="item" t-key="item[0]">
+                <div>
+                    <CheckBox
+                        value="isSelected(item)"
+                        disabled="props.readonly"
+                        onChange="(ev) => this.onChange(item[0], ev)"
+                    >
+                        <t t-esc="item[1]" />
+                    </CheckBox>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.js b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.js
new file mode 100644
index 00000000000..0ce81139da2
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.js
@@ -0,0 +1,20 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { Many2ManyTagsField } from "./many2many_tags_field";
+
+export class KanbanMany2ManyTagsField extends Many2ManyTagsField {
+    get tags() {
+        return super.tags.reduce((kanbanTags, tag) => {
+            if (tag.colorIndex !== 0) {
+                delete tag.onClick;
+                kanbanTags.push(tag);
+            }
+            return kanbanTags;
+        }, []);
+    }
+}
+
+KanbanMany2ManyTagsField.template = "web.KanbanMany2ManyTagsField";
+
+registry.category("fields").add("kanban.many2many_tags", KanbanMany2ManyTagsField);
diff --git a/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml
new file mode 100644
index 00000000000..2fae728ff61
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/kanban_many2many_tags_field.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanMany2ManyTagsField" owl="1">
+        <TagsList className="'o_kanban_tags'" tags="tags" displayBadge="false" />
+    </t>
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
new file mode 100644
index 00000000000..3b5d75931ae
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js
@@ -0,0 +1,311 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { ColorList } from "@web/core/colorlist/colorlist";
+import { Domain } from "@web/core/domain";
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
+import {
+    Many2XAutocomplete,
+    useActiveActions,
+    useX2ManyCrud,
+} from "@web/views/fields/relational_utils";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "../standard_field_props";
+import { TagsList } from "./tags_list";
+import { usePopover } from "@web/core/popover/popover_hook";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component, useRef } = owl;
+
+class Many2ManyTagsFieldColorListPopover extends Component {}
+Many2ManyTagsFieldColorListPopover.template = "web.Many2ManyTagsFieldColorListPopover";
+Many2ManyTagsFieldColorListPopover.components = {
+    CheckBox,
+    ColorList,
+};
+
+export class Many2ManyTagsField extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.previousColorsMap = {};
+        this.popover = usePopover();
+        this.dialog = useService("dialog");
+        this.dialogClose = [];
+
+        this.autoCompleteRef = useRef("autoComplete");
+
+        const { saveRecord, removeRecord } = useX2ManyCrud(() => this.props.value, true);
+
+        this.activeActions = useActiveActions({
+            fieldType: "many2many",
+            crudOptions: {
+                create: this.props.canQuickCreate && this.props.createDomain,
+                onDelete: removeRecord,
+            },
+            getEvalParams: (props) => {
+                return {
+                    evalContext: props.evalContext,
+                    readonly: props.readonly,
+                };
+            },
+        });
+
+        this.update = (recordlist) => {
+            if (Array.isArray(recordlist)) {
+                const resIds = recordlist.map((rec) => rec.id);
+                return saveRecord(resIds);
+            }
+            return saveRecord(recordlist);
+        };
+
+        if (this.props.canQuickCreate) {
+            this.quickCreate = async (name) => {
+                const created = await this.orm.call(this.props.relation, "name_create", [name], {
+                    context: this.props.context,
+                });
+                return saveRecord([created[0]]);
+            };
+        }
+    }
+
+    get tags() {
+        return this.props.value.records.map((record) => ({
+            id: record.id, // datapoint_X
+            text: record.data.display_name,
+            colorIndex: record.data[this.props.colorField],
+            onClick: (ev) => this.onBadgeClick(ev, record),
+            onDelete: !this.props.readonly ? () => this.deleteTag(record.id) : undefined,
+        }));
+    }
+
+    get canOpenColorDropdown() {
+        return this.handlesColor() && this.props.canEditColor;
+    }
+
+    get showM2OSelectionField() {
+        return !this.props.readonly;
+    }
+
+    deleteTag(id) {
+        const tagRecord = this.props.value.records.find((record) => record.id === id);
+        const ids = this.props.value.currentIds.filter((id) => id !== tagRecord.resId);
+        this.props.value.replaceWith(ids);
+    }
+
+    handlesColor() {
+        return this.props.colorField !== undefined && this.props.colorField !== null;
+    }
+
+    switchTagColor(colorIndex, tag) {
+        const tagRecord = this.props.value.records.find((record) => record.id === tag.id);
+        tagRecord.update({ [this.props.colorField]: colorIndex });
+        tagRecord.save();
+        this.closePopover();
+    }
+
+    onTagVisibilityChange(isHidden, tag) {
+        const tagRecord = this.props.value.records.find((record) => record.id === tag.id);
+        if (tagRecord.data[this.props.colorField] != 0) {
+            this.previousColorsMap[tagRecord.resId] = tagRecord.data[this.props.colorField];
+        }
+        tagRecord.update({
+            [this.props.colorField]: isHidden ? 0 : this.previousColorsMap[tagRecord.resId] || 1,
+        });
+        tagRecord.save();
+        this.closePopover();
+    }
+
+    closePopover() {
+        this.popoverCloseFn();
+        this.popoverCloseFn = null;
+    }
+
+    getDomain() {
+        return Domain.and([
+            this.props.domain,
+            Domain.not([["id", "in", this.props.value.currentIds]]),
+        ]).toList(this.props.context);
+    }
+
+    onBadgeClick(ev, record) {
+        if (!this.canOpenColorDropdown) return;
+        const isClosed = !document.querySelector(".o_tag_popover");
+        if (isClosed) {
+            this.currentPopoverEl = null;
+        }
+        if (this.popoverCloseFn) {
+            this.closePopover();
+        }
+        if (isClosed || this.currentPopoverEl !== ev.currentTarget) {
+            this.currentPopoverEl = ev.currentTarget;
+            this.popoverCloseFn = this.popover.add(
+                ev.currentTarget,
+                this.constructor.components.Popover,
+                {
+                    colors: this.constructor.RECORD_COLORS,
+                    tag: {
+                        id: record.id,
+                        colorIndex: record.data[this.props.colorField],
+                    },
+                    switchTagColor: this.switchTagColor.bind(this),
+                    onTagVisibilityChange: this.onTagVisibilityChange.bind(this),
+                }
+            );
+        }
+    }
+
+    focusTag(index) {
+        const tagListEl = this.autoCompleteRef.el.previousElementSibling;
+        const tags = tagListEl.getElementsByClassName("badge");
+        if (tags.length) {
+            if (index === undefined) {
+                tags[tags.length - 1].focus();
+            } else {
+                tags[index].focus();
+            }
+        }
+    }
+
+    onAutoCompleteKeydown(ev) {
+        if (ev.isComposing) {
+            // This case happens with an IME for example: we let it handle all key events.
+            return;
+        }
+        const hotkey = getActiveHotkey(ev);
+        const input = ev.target.closest(".o-autocomplete--input");
+        const autoCompleteMenuOpened = !!this.autoCompleteRef.el.querySelector(
+            ".o-autocomplete--dropdown-menu"
+        );
+        switch (hotkey) {
+            case "arrowleft": {
+                if (input.selectionStart || autoCompleteMenuOpened) {
+                    return;
+                }
+                // focus rightmost tag if any.
+                this.focusTag();
+                break;
+            }
+            case "arrowright": {
+                if (input.selectionStart !== input.value.length || autoCompleteMenuOpened) {
+                    return;
+                }
+                // focus leftmost tag if any.
+                this.focusTag(0);
+                break;
+            }
+            case "backspace": {
+                if (input.value) {
+                    return;
+                }
+                const tags = this.tags;
+                if (tags.length) {
+                    const { id } = tags[tags.length - 1];
+                    this.deleteTag(id);
+                }
+                break;
+            }
+            default:
+                return;
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+
+    onTagsKeydown(ev) {
+        if (this.props.readonly) {
+            return;
+        }
+        const hotkey = getActiveHotkey(ev);
+        const tagListEl = this.autoCompleteRef.el.previousElementSibling;
+        const tags = [...tagListEl.getElementsByClassName("badge")];
+        const closestTag = ev.target.closest(".badge");
+        const tagIndex = tags.indexOf(closestTag);
+        const input = this.autoCompleteRef.el.querySelector(".o-autocomplete--input");
+        switch (hotkey) {
+            case "arrowleft": {
+                if (tagIndex === 0) {
+                    input.focus();
+                } else {
+                    this.focusTag(tagIndex - 1);
+                }
+                break;
+            }
+            case "arrowright": {
+                if (tagIndex === tags.length - 1) {
+                    input.focus();
+                } else {
+                    this.focusTag(tagIndex + 1);
+                }
+                break;
+            }
+            case "backspace": {
+                input.focus();
+                const { id } = this.tags[tagIndex] || {};
+                this.deleteTag(id);
+                break;
+            }
+            default:
+                return;
+        }
+        ev.preventDefault();
+        ev.stopPropagation();
+    }
+}
+
+Many2ManyTagsField.RECORD_COLORS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+Many2ManyTagsField.SEARCH_MORE_LIMIT = 320;
+
+Many2ManyTagsField.template = "web.Many2ManyTagsField";
+Many2ManyTagsField.components = {
+    Popover: Many2ManyTagsFieldColorListPopover,
+    TagsList,
+    Many2XAutocomplete,
+};
+
+Many2ManyTagsField.props = {
+    ...standardFieldProps,
+    canEditColor: { type: Boolean, optional: true },
+    canQuickCreate: { type: Boolean, optional: true },
+    colorField: { type: String, optional: true },
+    createDomain: { type: Array, optional: true },
+    placeholder: { type: String, optional: true },
+    relation: { type: String },
+    domain: { type: Domain },
+    context: { type: Object },
+    evalContext: { type: Object },
+    nameCreateField: { type: String, optional: true },
+    itemsVisible: { type: Number, optional: true },
+    string: { type: String },
+};
+Many2ManyTagsField.defaultProps = {
+    canEditColor: true,
+    canQuickCreate: true,
+    nameCreateField: "name",
+};
+
+Many2ManyTagsField.displayName = _lt("Tags");
+Many2ManyTagsField.supportedTypes = ["many2many"];
+Many2ManyTagsField.fieldsToFetch = {
+    display_name: { name: "display_name", type: "char" },
+};
+
+Many2ManyTagsField.extractProps = (fieldName, record, attrs) => {
+    const activeField = record.activeFields[fieldName];
+    return {
+        colorField: attrs.options.color_field,
+        nameCreateField: attrs.options.create_name_field,
+        canEditColor: !attrs.options.no_edit_color && activeField.viewType !== "list",
+        relation: activeField.relation,
+        domain: record.getFieldDomain(fieldName),
+        context: record.getFieldContext(fieldName),
+        canQuickCreate: !attrs.options.no_quick_create,
+        createDomain: attrs.options.create,
+        evalContext: record.evalContext,
+        string: activeField.string,
+    };
+};
+
+registry.category("fields").add("many2many_tags", Many2ManyTagsField);
+registry.category("fields").add("form.many2many_tags", Many2ManyTagsField);
+registry.category("fields").add("list.many2many_tags", Many2ManyTagsField);
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
new file mode 100644
index 00000000000..6eb7eb4a5f5
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.scss
@@ -0,0 +1,15 @@
+.o_tag_popover {
+    max-width: 150px;
+}
+
+.o_tag_popover label {
+    line-height: $o-line-height-base;
+}
+
+.o_field_widget.o_field_many2many_tags .o_input {
+    height: 100%;
+}
+
+.o_list_view .o_field_widget.o_field_many2many_tags .o_field_many2many_selection {
+    flex-basis: 40px;
+}
diff --git a/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml
new file mode 100644
index 00000000000..afe25ddfcfb
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2ManyTagsField" owl="1">
+        <TagsList tags="tags" t-on-keydown="onTagsKeydown"/>
+        <div t-if="showM2OSelectionField" class="o_field_many2many_selection d-inline-block mw-100" t-on-keydown="onAutoCompleteKeydown" t-ref="autoComplete">
+            <Many2XAutocomplete
+                id="props.id"
+                placeholder="props.placeholder"
+                resModel="props.relation"
+                autoSelect="true"
+                fieldString="props.string"
+                activeActions="activeActions"
+                update="update"
+                quickCreate="activeActions.canCreate ? quickCreate : null"
+                context="props.context"
+                getDomain.bind="getDomain"
+                isToMany="true"
+                nameCreateField="props.nameCreateField"
+            />
+        </div>
+    </t>
+
+    <t t-name="web.Many2ManyTagsFieldColorListPopover" owl="1">
+        <div class="o_tag_popover m-2">
+            <ColorList colors="props.colors" onColorSelected="(id) => props.switchTagColor(id, props.tag)"/>
+            <CheckBox className="'pt-2'" value="props.tag.colorIndex === 0" onChange.bind="(isChecked) => props.onTagVisibilityChange(isChecked, props.tag)">Hide in kanban</CheckBox>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_tags/tags_list.js b/addons/web/static/src/views/fields/many2many_tags/tags_list.js
new file mode 100644
index 00000000000..a0cb92f69ef
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/tags_list.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+const { Component } = owl;
+
+export class TagsList extends Component {
+    get visibleTags() {
+        if (this.props.itemsVisible && this.props.tags.length > this.props.itemsVisible) {
+            return this.props.tags.slice(0, this.props.itemsVisible - 1);
+        }
+        return this.props.tags;
+    }
+    get otherTags() {
+        if (!this.props.itemsVisible || this.props.tags.length <= this.props.itemsVisible) {
+            return [];
+        }
+        return this.props.tags.slice(this.props.itemsVisible - 1);
+    }
+    get tooltip() {
+        return this.otherTags.map((i) => i.text).join("<br/>");
+    }
+}
+TagsList.template = "web.TagsList";
+TagsList.defaultProps = {
+    className: "",
+    displayBadge: true,
+};
+TagsList.props = {
+    className: { type: String, optional: true },
+    displayBadge: { type: Boolean, optional: true },
+    name: { type: String, optional: true },
+    itemsVisible: { type: Number, optional: true },
+    tags: { type: Object, optional: true },
+};
diff --git a/addons/web/static/src/views/fields/many2many_tags/tags_list.scss b/addons/web/static/src/views/fields/many2many_tags/tags_list.scss
new file mode 100644
index 00000000000..157f819279d
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/tags_list.scss
@@ -0,0 +1,49 @@
+.o_tags_list {
+    gap: 2px;
+
+    .o_tag {
+        user-select: none;
+    
+        .o_badge_text, a {
+            color: inherit;
+        }
+    
+        .o_tag_badge_text {
+            font-size: 12px;
+        }
+    
+        img {
+            height: 1.6em;
+            aspect-ratio: 1/1;
+    
+            + .o_tag_badge_text {
+                padding: 0.25em 0;
+            }
+        }
+    
+        @for $size from 1 through length($o-colors) {
+            &.o_tag_color_#{$size - 1} {
+                @if $size == 1 {
+                    & {
+                        background-color: $o-view-background-color;
+                        color: nth($o-colors, $size);
+                    }
+                    &:focus-within {
+                        color: darken(nth($o-colors, $size), 40%) ;
+                    }
+                    &::after {
+                        background-color: nth($o-colors, $size);
+                    }
+                } @else {
+                    &, &::after {
+                        background-color: nth($o-colors, $size);
+                        color: color-yiq(nth($o-colors, $size));
+                    }
+                    &:focus-within {
+                        background-color: darken(nth($o-colors, $size), 20%);
+                    }
+                }
+            }
+        }
+    }   
+}
diff --git a/addons/web/static/src/views/fields/many2many_tags/tags_list.xml b/addons/web/static/src/views/fields/many2many_tags/tags_list.xml
new file mode 100644
index 00000000000..3a55fe148c2
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags/tags_list.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.TagsList" owl="1">
+        <span t-if="visibleTags.length" t-attf-class="o_tags_list {{props.className}} d-inline-flex flex-wrap" t-att-name="props.name">
+            <t t-if="props.tags" t-foreach="visibleTags" t-as="tag" t-key="tag.id or tag_index">
+                <span t-attf-class="{{`o_tag_color_${ tag.colorIndex or 0 } ${props.displayBadge ? 'badge badge-pill' : ''}`}} o_tag d-inline-flex align-items-center h-100" tabindex="-1" t-att-data-color="tag.colorIndex" t-att-title="tag.text" t-on-click="(ev) => tag.onClick and tag.onClick(ev)">
+                    <img t-if="tag.img" t-att-src="tag.img" class="o_m2m_avatar rounded-circle"/>
+                    <div t-if="props.displayBadge" class="o_tag_badge_text" t-esc="tag.text" />
+                    <t t-else="">
+                        <span />
+                        <div t-esc="tag.text" />
+                    </t>
+                    <a tabIndex="-1" t-if="tag.onDelete" t-on-click.stop.prevent="(ev) => tag.onDelete and tag.onDelete(ev)" href="#" class="fa fa-times o_delete ml-2" title="Delete" aria-label="Delete"></a>
+                </span>
+            </t>
+            <span t-if="props.tags and otherTags.length" class="o_m2m_avatar_empty rounded-circle text-center font-weight-bold" t-att-data-tooltip="tooltip">
+                <span t-if="otherTags.length > 9" t-esc="'9+'" />
+                <span t-else="" t-esc="'+' + otherTags.length" />
+            </span>
+        </span>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
new file mode 100644
index 00000000000..4a99d59fb00
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.js
@@ -0,0 +1,65 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { Many2XAutocomplete } from "@web/views/fields/relational_utils";
+import { Many2ManyTagsField } from "@web/views/fields/many2many_tags/many2many_tags_field";
+import { TagsList } from "../many2many_tags/tags_list";
+
+export class Many2ManyTagsAvatarField extends Many2ManyTagsField {
+    get tags() {
+        return this.props.value.records.map((record) => ({
+            id: record.id, // datapoint_X
+            text: record.data.display_name,
+            img: `/web/image/${this.props.relation}/${record.resId}/avatar_128`,
+            onDelete: !this.props.readonly ? () => this.onDelete(record.resId) : undefined,
+        }));
+    }
+}
+
+Many2ManyTagsAvatarField.template = "web.Many2ManyTagsAvatarField";
+Many2ManyTagsAvatarField.components = {
+    Many2XAutocomplete,
+    TagsList,
+};
+
+Many2ManyTagsAvatarField.supportedTypes = ["many2many"];
+
+Many2ManyTagsAvatarField.extractProps = (fieldName, record, attrs) => {
+    return {
+        relation: record.activeFields[fieldName].relation,
+        domain: record.getFieldDomain(fieldName),
+        context: record.getFieldContext(fieldName),
+        evalContext: record.evalContext,
+        canQuickCreate: !attrs.options.no_quick_create,
+        createDomain: attrs.options.create,
+        string: record.activeFields[fieldName].string,
+    };
+};
+
+registry.category("fields").add("many2many_tags_avatar", Many2ManyTagsAvatarField);
+
+class ListKanbanMany2ManyTagsAvatarField extends Many2ManyTagsAvatarField {
+    get tags() {
+        return this.props.value.records.map((record) => ({
+            id: record.id, // datapoint_X
+            text: record.data.display_name,
+            img: `/web/image/${this.props.relation}/${record.resId}/avatar_128`,
+        }));
+    }
+}
+
+ListKanbanMany2ManyTagsAvatarField.extractProps = (fieldName, record, attrs) => {
+    return {
+        itemsVisible: record.activeFields[fieldName].viewType === "list" ? 5 : 3,
+        relation: record.activeFields[fieldName].relation,
+        domain: record.getFieldDomain(fieldName),
+        context: record.getFieldContext(fieldName),
+        evalContext: record.evalContext,
+        canQuickCreate: !attrs.options.no_quick_create,
+        createDomain: attrs.options.create,
+        string: record.activeFields[fieldName].string,
+    };
+};
+
+registry.category("fields").add("list.many2many_tags_avatar", ListKanbanMany2ManyTagsAvatarField);
+registry.category("fields").add("kanban.many2many_tags_avatar", ListKanbanMany2ManyTagsAvatarField);
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
new file mode 100644
index 00000000000..a1b1feffb8a
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.scss
@@ -0,0 +1,9 @@
+.o_field_many2many_tags_avatar {    
+    .o_tag {
+        padding: 0;
+    }
+
+    .badge {
+        border: 0;
+    }
+}
diff --git a/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
new file mode 100644
index 00000000000..7cbf4c419b2
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2many_tags_avatar/many2many_tags_avatar_field.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2ManyTagsAvatarField" owl="1">
+        <TagsList tags="tags" itemsVisible="props.itemsVisible"  t-on-keydown="onTagsKeydown"/>
+        <div t-if="showM2OSelectionField" class="o_field_many2many_selection d-inline-block mw-100" t-on-keydown="onAutoCompleteKeydown" t-ref="autoComplete">
+            <Many2XAutocomplete
+                id="props.id"
+                placeholder="props.placeholder"
+                resModel="props.relation"
+                autoSelect="true"
+                fieldString="props.string"
+                activeActions="activeActions"
+                update="update"
+                quickCreate="activeActions.canCreate ? quickCreate : null"
+                context="props.context"
+                getDomain.bind="getDomain"
+                isToMany="true"
+            />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2one/many2one_field.js b/addons/web/static/src/views/fields/many2one/many2one_field.js
new file mode 100644
index 00000000000..50285dbcc94
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2one/many2one_field.js
@@ -0,0 +1,242 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { useChildRef, useOwnedDialogs, useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+import { standardFieldProps } from "../standard_field_props";
+import { Domain } from "@web/core/domain";
+import { Many2XAutocomplete, useOpenMany2XRecord } from "@web/views/fields/relational_utils";
+
+const { Component, onWillUpdateProps, useState } = owl;
+
+class CreateConfirmationDialog extends Component {
+    get title() {
+        return sprintf(this.env._t("New: %s"), this.props.name);
+    }
+
+    async onCreate() {
+        await this.props.create();
+        this.props.close();
+    }
+}
+CreateConfirmationDialog.components = { Dialog };
+CreateConfirmationDialog.template = "web.Many2OneField.CreateConfirmationDialog";
+
+function m2oTupleFromData(data) {
+    const id = data.id;
+    let name;
+    if ("display_name" in data) {
+        name = data.display_name;
+    } else {
+        let _name = data.name;
+        name = Array.isArray(_name) ? _name[1] : _name;
+    }
+    return [id, name];
+}
+
+export class Many2OneField extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.action = useService("action");
+        this.dialog = useService("dialog");
+        this.autocompleteContainerRef = useChildRef();
+        this.addDialog = useOwnedDialogs();
+
+        this.focusInput = () => {
+            this.autocompleteContainerRef.el.querySelector("input").focus();
+        };
+
+        const computeActiveActions = (props) => {
+            this.state.activeActions = {
+                canCreate: props.canCreate,
+                canCreateEdit: props.canCreateEdit,
+                canWrite: props.canWrite,
+            };
+        };
+
+        this.state = useState({
+            isFloating: !this.props.value,
+        });
+        computeActiveActions(this.props);
+
+        this.openMany2X = useOpenMany2XRecord({
+            resModel: this.props.relation,
+            activeActions: this.state.activeActions,
+            isToMany: false,
+            onRecordSaved: async (record) => {
+                await this.props.record.load();
+                await this.props.update(m2oTupleFromData(record.data));
+                if (this.props.record.model.root.id !== this.props.record.id) {
+                    this.props.record.switchMode("readonly");
+                }
+            },
+            onClose: () => this.focusInput(),
+            fieldString: this.props.string,
+        });
+
+        this.update = (value, params = {}) => {
+            if (value) {
+                value = m2oTupleFromData(value[0]);
+            }
+            if (!value && !this.updateOnEmpty) {
+                return;
+            }
+            this.state.isFloating = false;
+            return this.props.update(value);
+        };
+
+        if (this.props.canQuickCreate) {
+            this.quickCreate = (name, params = {}) => {
+                if (params.triggeredOnBlur) {
+                    return this.openConfirmationDialog(name);
+                }
+                return this.props.update([false, name]);
+            };
+        }
+
+        this.setFloating = (bool) => {
+            this.state.isFloating = bool;
+        };
+
+        onWillUpdateProps(async (nextProps) => {
+            this.state.isFloating = !nextProps.value;
+            computeActiveActions(nextProps);
+        });
+    }
+
+    get hasExternalButton() {
+        return this.props.canOpen && !!this.props.value && !this.state.isFloating;
+    }
+    get displayName() {
+        return this.props.value ? this.props.value[1].split("\n")[0] : "";
+    }
+    get extraLines() {
+        return this.props.value
+            ? this.props.value[1]
+                  .split("\n")
+                  .map((line) => line.trim())
+                  .slice(1)
+            : [];
+    }
+    get resId() {
+        return this.props.value && this.props.value[0];
+    }
+    get updateOnEmpty() {
+        return true;
+    }
+
+    getDomain() {
+        return this.props.getDomain().toList(this.props.getContext());
+    }
+    async openAction() {
+        const action = await this.orm.call(
+            this.props.relation,
+            "get_formview_action",
+            [[this.resId]],
+            { context: this.props.getContext() }
+        );
+        await this.action.doAction(action);
+    }
+    async openDialog(resId) {
+        return this.openMany2X({ resId, context: this.props.getContext() });
+    }
+
+    async openConfirmationDialog(request) {
+        return new Promise((resolve, reject) => {
+            this.addDialog(CreateConfirmationDialog, {
+                value: request,
+                name: this.props.string,
+                create: async () => {
+                    try {
+                        await this.quickCreate(request);
+                        resolve();
+                    } catch (e) {
+                        reject(e);
+                    }
+                },
+            });
+        });
+    }
+
+    onClick(ev) {
+        if (this.props.canOpen && this.props.readonly) {
+            ev.stopPropagation();
+            this.openAction();
+        }
+    }
+    onExternalBtnClick() {
+        this.openDialog(this.resId);
+    }
+}
+
+Many2OneField.SEARCH_MORE_LIMIT = 320;
+
+Many2OneField.template = "web.Many2OneField";
+Many2OneField.components = {
+    Many2XAutocomplete,
+};
+Many2OneField.props = {
+    ...standardFieldProps,
+    placeholder: { type: String, optional: true },
+    canOpen: { type: Boolean, optional: true },
+    canCreate: { type: Boolean, optional: true },
+    canWrite: { type: Boolean, optional: true },
+    canQuickCreate: { type: Boolean, optional: true },
+    canCreateEdit: { type: Boolean, optional: true },
+    createNameField: { type: String, optional: true },
+    searchLimit: { type: Number, optional: true },
+    relation: String,
+    string: { type: String, optional: true },
+    getContext: { type: Function, optional: true },
+    getDomain: { type: Function, optional: true },
+};
+Many2OneField.defaultProps = {
+    canOpen: true,
+    canCreate: true,
+    canWrite: true,
+    canQuickCreate: true,
+    canCreateEdit: true,
+    createNameField: "name",
+    searchLimit: 7,
+    string: "",
+    getContext: () => ({}),
+    getDomain: () => new Domain(),
+};
+
+Many2OneField.displayName = _lt("Many2one");
+Many2OneField.supportedTypes = ["many2one"];
+
+Many2OneField.extractProps = (fieldName, record, attrs) => {
+    const noOpen = Boolean(attrs.options.no_open);
+    const noCreate = Boolean(attrs.options.no_create);
+    const canCreate = attrs.can_create && Boolean(JSON.parse(attrs.can_create)) && !noCreate;
+    const canWrite = attrs.can_write && Boolean(JSON.parse(attrs.can_write));
+    const noQuickCreate = Boolean(attrs.options.no_quick_create);
+    const noCreateEdit = Boolean(attrs.options.no_create_edit);
+
+    return {
+        placeholder: attrs.placeholder,
+        canOpen: !noOpen,
+        canCreate,
+        canWrite,
+        canQuickCreate: canCreate && !noQuickCreate,
+        canCreateEdit: canCreate && !noCreateEdit,
+        relation: record.fields[fieldName].relation,
+        string: attrs.string || record.fields[fieldName].string,
+        getContext: () => record.getFieldContext(fieldName),
+        getDomain: () => record.getFieldDomain(fieldName),
+        createNameField: attrs.options.create_name_field,
+    };
+};
+
+registry.category("fields").add("many2one", Many2OneField);
+
+export class ListMany2OneField extends Many2OneField {
+    get updateOnEmpty() {
+        return false;
+    }
+}
+
+registry.category("fields").add("list.many2one", ListMany2OneField); // TODO WOWL: link isn't clickable in lists
diff --git a/addons/web/static/src/views/fields/many2one/many2one_field.xml b/addons/web/static/src/views/fields/many2one/many2one_field.xml
new file mode 100644
index 00000000000..dc63a816ad2
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2one/many2one_field.xml
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2OneField.CreateConfirmationDialog" owl="1">
+        <Dialog title="title" size="'md'">
+            <div>
+                Create <strong t-esc="props.value"/> as a new <t t-esc="props.name"/>?
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onCreate">Create</button>
+                <button class="btn" t-on-click="() => props.close()">Discard</button>
+            </t>
+        </Dialog>
+    </t>
+
+    <t t-name="web.Many2OneField" owl="1">
+        <t t-if="props.readonly">
+            <t t-if="!props.canOpen">
+                <span>
+                    <span t-esc="displayName" />
+                    <t t-foreach="extraLines" t-as="extraLine" t-key="extraLine_index">
+                        <br />
+                        <span t-esc="extraLine" />
+                    </t>
+                </span>
+            </t>
+            <t t-else="">
+                <a
+                    class="o_form_uri"
+                    t-att-href="props.value ? `#id=${props.value[0]}&amp;model=${props.relation}` : '#'"
+                    t-on-click.prevent="onClick"
+                >
+                    <span t-esc="displayName" />
+                    <t t-foreach="extraLines" t-as="extraLine" t-key="extraLine_index">
+                        <br />
+                        <span t-esc="extraLine" />
+                    </t>
+                </a>
+            </t>
+        </t>
+        <t t-else="">
+            <div class="o_field_many2one_selection">
+                <Many2XAutocomplete
+                    value="displayName"
+                    id="props.id"
+                    placeholder="props.placeholder"
+                    resModel="props.relation"
+                    autoSelect="true"
+                    fieldString="props.string"
+                    activeActions="state.activeActions"
+                    update="update"
+                    quickCreate="quickCreate"
+                    context="props.getContext()"
+                    getDomain.bind="getDomain"
+                    nameCreateField="props.nameCreateField"
+                    setInputFloats="setFloating"
+                    autocomplete_container="autocompleteContainerRef"
+                />
+                <t t-if="hasExternalButton">
+                    <button
+                        type="button"
+                        class="btn btn-secondary fa fa-external-link o_external_button"
+                        tabindex="-1"
+                        draggable="false"
+                        aria-label="External link"
+                        data-tooltip="External link"
+                        t-on-click="onExternalBtnClick"
+                    />
+                </t>
+            </div>
+            <div class="o_field_many2one_extra">
+                <t t-foreach="extraLines" t-as="extraLine" t-key="extraLine_index">
+                    <br t-if="!extraLine_first" />
+                    <span t-esc="extraLine" />
+                </t>
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
new file mode 100644
index 00000000000..e565d57dcb6
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.js
@@ -0,0 +1,38 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { Domain } from "@web/core/domain";
+import { Many2OneField } from "../many2one/many2one_field";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class Many2OneAvatarField extends Component {}
+
+Many2OneAvatarField.template = "web.Many2OneAvatarField";
+Many2OneAvatarField.components = {
+    Many2OneField,
+};
+Many2OneAvatarField.props = {
+    ...standardFieldProps,
+    placeholder: { type: String, optional: true },
+    relation: String,
+    getContext: { type: Function, optional: true },
+    getDomain: { type: Function, optional: true },
+};
+Many2OneAvatarField.defaultProps = {
+    getContext: () => ({}),
+    getDomain: () => new Domain(),
+};
+
+Many2OneAvatarField.supportedTypes = ["many2one"];
+
+Many2OneAvatarField.extractProps = (fieldName, record) => {
+    return {
+        relation: record.fields[fieldName].relation,
+        getContext: () => record.getFieldContext(fieldName),
+        getDomain: () => record.getFieldDomain(fieldName),
+    };
+};
+
+registry.category("fields").add("many2one_avatar", Many2OneAvatarField);
diff --git a/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
new file mode 100644
index 00000000000..b9c6f03f8f6
--- /dev/null
+++ b/addons/web/static/src/views/fields/many2one_avatar/many2one_avatar_field.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Many2OneAvatarField" owl="1">
+        <div>
+            <span class="o_m2o_avatar">
+                <span t-if="props.value === false and !props.readonly" class="o_m2o_avatar_empty"></span>
+                <img t-if="props.value !== false" t-attf-src="/web/image/{{props.relation}}/{{props.value[0]}}/avatar_128" />
+            </span>
+            <Many2OneField t-props="props" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/monetary/monetary_field.js b/addons/web/static/src/views/fields/monetary/monetary_field.js
new file mode 100644
index 00000000000..ec374ef19f5
--- /dev/null
+++ b/addons/web/static/src/views/fields/monetary/monetary_field.js
@@ -0,0 +1,93 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { formatMonetary } from "../formatters";
+import { parseMonetary } from "../parsers";
+import { useInputField } from "../input_field_hook";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+import { standardFieldProps } from "../standard_field_props";
+import { session } from "@web/session";
+
+const { Component } = owl;
+
+export class MonetaryField extends Component {
+    setup() {
+        useInputField({
+            getValue: () => this.formattedValue,
+            refName: "numpadDecimal",
+            parse: (v) => parseMonetary(v, { currencyId: this.props.currencyId }),
+        });
+        useNumpadDecimal();
+    }
+
+    get currency() {
+        if (!isNaN(this.props.currencyId) && this.props.currencyId in session.currencies) {
+            return session.currencies[this.props.currencyId];
+        }
+        return null;
+    }
+
+    get currencySymbol() {
+        return this.currency ? this.currency.symbol : "";
+    }
+
+    get currencyPosition() {
+        return this.currency && this.currency.position;
+    }
+
+    get currencyDigits() {
+        if (this.props.digits) {
+            return this.props.digits;
+        }
+        if (!this.currency) {
+            return null;
+        }
+        return session.currencies[this.props.currencyId].digits;
+    }
+
+    get formattedValue() {
+        if (this.props.inputType === "number" && !this.props.readonly && this.props.value) {
+            return this.props.value;
+        }
+        return formatMonetary(this.props.value, {
+            digits: this.currencyDigits,
+            currencyId: this.props.currencyId,
+            noSymbol: !this.props.readonly || this.props.hideSymbol,
+        });
+    }
+}
+
+MonetaryField.template = "web.MonetaryField";
+MonetaryField.props = {
+    ...standardFieldProps,
+    currencyId: { type: Number, optional: true },
+    inputType: { type: String, optional: true },
+    digits: { type: Array, optional: true },
+    hideSymbol: { type: Boolean, optional: true },
+    invalidate: { type: Function, optional: true },
+    placeholder: { type: String, optional: true },
+};
+MonetaryField.defaultProps = {
+    hideSymbol: false,
+    inputType: "text",
+    invalidate: () => {},
+};
+
+MonetaryField.supportedTypes = ["monetary", "float"];
+MonetaryField.displayName = _lt("Monetary");
+
+MonetaryField.extractProps = function (fieldName, record, attrs) {
+    return {
+        currencyId: attrs.options.currency_field
+            ? record.data[attrs.options.currency_field][0]
+            : (record.data.currency_id && record.data.currency_id[0]) || undefined,
+        inputType: attrs.type,
+        digits: [16, 2],
+        hideSymbol: attrs.options.no_symbol,
+        invalidate: () => record.setInvalidField(fieldName),
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("monetary", MonetaryField);
diff --git a/addons/web/static/src/views/fields/monetary/monetary_field.xml b/addons/web/static/src/views/fields/monetary/monetary_field.xml
new file mode 100644
index 00000000000..90838b9c515
--- /dev/null
+++ b/addons/web/static/src/views/fields/monetary/monetary_field.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="web.MonetaryField" owl="1">
+        <span t-if="props.readonly" t-esc="formattedValue" />
+        <div t-else="">
+            <span t-if="!props.hideSymbol and currencyPosition === 'before'" t-out="currencySymbol" />
+            <input t-ref="numpadDecimal" t-att-id="props.id" t-att-type="props.inputType" t-att-placeholder="props.placeholder" class="o_input"/>
+            <span t-if="!props.hideSymbol and currencyPosition === 'after'" t-out="currencySymbol" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/numpad_decimal_hook.js b/addons/web/static/src/views/fields/numpad_decimal_hook.js
new file mode 100644
index 00000000000..c14502aec7f
--- /dev/null
+++ b/addons/web/static/src/views/fields/numpad_decimal_hook.js
@@ -0,0 +1,44 @@
+/** @odoo-module **/
+
+import { localization } from "@web/core/l10n/localization";
+
+const { useRef, useEffect } = owl;
+
+/**
+ * This hook replaces the decimal separator of the numpad decimal key
+ * by the decimal separator from the user's language setting when user
+ * edits an input. The input is found using a t-ref="numpadDecimal"
+ * reference in the current component. It can be placed directly on an
+ * input or an element containing multiple inputs that require the
+ * behavior
+ */
+export function useNumpadDecimal() {
+    const decimalPoint = localization.decimalPoint;
+    const listeners = [];
+    let ref = useRef("numpadDecimal");
+    const handler = (ev) => {
+        if (
+            !([".", ","].includes(ev.key) && ev.code === "NumpadDecimal") ||
+            ev.key === decimalPoint
+        ) {
+            return;
+        }
+        ev.preventDefault();
+        ev.target.value += decimalPoint;
+    };
+    useEffect(
+        (el) => {
+            if (el) {
+                const inputs = el.nodeName === "INPUT" ? [el] : el.querySelectorAll("input");
+                inputs.forEach((input) => {
+                    listeners.push(input);
+                    input.addEventListener("keydown", handler);
+                });
+            }
+            return () => {
+                listeners.forEach((input) => input.removeEventListener("keydown", handler));
+            };
+        },
+        () => [ref.el]
+    );
+}
diff --git a/addons/web/static/src/fields/parsers.js b/addons/web/static/src/views/fields/parsers.js
similarity index 66%
rename from addons/web/static/src/fields/parsers.js
rename to addons/web/static/src/views/fields/parsers.js
index 68d61aa716c..32238b9e4cf 100644
--- a/addons/web/static/src/fields/parsers.js
+++ b/addons/web/static/src/views/fields/parsers.js
@@ -2,14 +2,32 @@
 
 import { parseDate, parseDateTime } from "@web/core/l10n/dates";
 import { localization } from "@web/core/l10n/localization";
+import { evaluateExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
-import { escapeRegExp } from "@web/core/utils/strings";
+import { escapeRegExp, nbsp } from "@web/core/utils/strings";
 import { session } from "@web/session";
 
 // -----------------------------------------------------------------------------
 // Helpers
 // -----------------------------------------------------------------------------
 
+function evaluateMathematicalExpression(expr, context = {}) {
+    // remove extra space
+    var val = expr.replace(new RegExp(/( )/g), "");
+    var safeEvalString = "";
+    for (let v of val.split(new RegExp(/([-+*/()^])/g))) {
+        if (!["+", "-", "*", "/", "(", ")", "^"].includes(v) && v.length) {
+            // check if this is a float and take into account user delimiter preference
+            v = parseFloat(v);
+        }
+        if (v === "^") {
+            v = "**";
+        }
+        safeEvalString += v;
+    }
+    return evaluateExpr(safeEvalString, context);
+}
+
 /**
  * Parses a string into a number.
  *
@@ -21,9 +39,17 @@ import { session } from "@web/session";
  */
 function parseNumber(value, options = {}) {
     // a number can have the thousand separator multiple times. ex: 1,000,000.00
-    value = value.replaceAll(options.thousandsSep || ",", "");
+    value = value.replaceAll(new RegExp(escapeRegExp(options.thousandsSep), "g") || ",", "");
     // a number only have one decimal separator
-    value = value.replace(options.decimalPoint || ".", ".");
+    value = value.replace(new RegExp(escapeRegExp(options.decimalPoint), "g") || ".", ".");
+
+    if (value.startsWith("=")) {
+        value = evaluateMathematicalExpression(value.substring(1));
+        if (options.truncate) {
+            value = Math.trunc(value);
+        }
+    }
+
     return Number(value);
 }
 
@@ -40,15 +66,12 @@ export class InvalidNumberError extends Error {}
  * @returns {number} a float
  */
 export function parseFloat(value) {
-    const thousandsSepRegex = new RegExp(escapeRegExp(localization.thousandsSep), "g");
-    const decimalPointRegex = new RegExp(escapeRegExp(localization.decimalPoint), "g");
-    const parsed = parseNumber(value, {
+    const thousandsSepRegex = localization.thousandsSep;
+    const decimalPointRegex = localization.decimalPoint;
+    let parsed = parseNumber(value, {
         thousandsSep: thousandsSepRegex,
         decimalPoint: decimalPointRegex,
     });
-    if (isNaN(parsed)) {
-        throw new InvalidNumberError(`"${value}" is not a correct number`);
-    }
     return parsed;
 }
 
@@ -84,15 +107,13 @@ export function parseFloatTime(value) {
  * @returns {number} an integer
  */
 export function parseInteger(value) {
-    const thousandsSepRegex = new RegExp(escapeRegExp(localization.thousandsSep), "g");
-    const decimalPointRegex = new RegExp(escapeRegExp(localization.decimalPoint), "g");
-    const parsed = parseNumber(value, {
+    const thousandsSepRegex = localization.thousandsSep;
+    const decimalPointRegex = localization.decimalPoint;
+    let parsed = parseNumber(value, {
         thousandsSep: thousandsSepRegex,
         decimalPoint: decimalPointRegex,
+        truncate: true,
     });
-    if (!Number.isInteger(parsed)) {
-        throw new InvalidNumberError(`"${value}" is not a correct number`);
-    }
     return parsed;
 }
 
@@ -124,23 +145,30 @@ export function parsePercentage(value) {
  * @returns {number} float
  */
 export function parseMonetary(value, options = {}) {
-    const values = value.split("&nbsp;");
+    // TODO GES help ?
+    // const values = value.split("&nbsp;");
+    const values = value.split(nbsp);
     if (values.length === 1) {
         return parseFloat(value);
     }
-    let currency;
-    if (options.currencyId) {
-        currency = session.currencies[options.currencyId];
-    } else {
-        currency = Object.values(session.currencies)[0];
+    let currency = session.currencies[options.currencyId];
+    if (!currency) {
+        if (Object.keys(session.currencies).length !== 0) {
+            // BS
+            currency = session.currencies[Object.keys(session.currencies)[0]];
+        } else {
+            throw new InvalidNumberError(
+                `"${value}" is either an invalid number or is using an unconfigured currency symbol`
+            );
+        }
     }
     const symbolIndex = values.findIndex((v) => v === currency.symbol);
     if (symbolIndex === -1) {
-        throw new InvalidNumberError(`"${value}" is not a correct number`);
+        throw new InvalidNumberError(`"${value}" doesn't have the expected currency symbol`);
     }
     values.splice(symbolIndex, 1);
     if (values.length !== 1) {
-        throw new InvalidNumberError(`"${value}" is not a correct number`);
+        throw new InvalidNumberError(`"${value}" is not a valid number`);
     }
     return parseFloat(values[0]);
 }
diff --git a/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.js b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.js
new file mode 100644
index 00000000000..bfb354c8c96
--- /dev/null
+++ b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.js
@@ -0,0 +1,99 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { url } from "@web/core/utils/urls";
+import { standardFieldProps } from "../standard_field_props";
+import { FileUploader } from "../file_handler";
+
+const { Component, onWillUpdateProps, useState } = owl;
+
+export class PdfViewerField extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.state = useState({
+            fileName: this.props.fileName || "",
+            isValid: true,
+            objectUrl: "",
+        });
+        onWillUpdateProps((nextProps) => {
+            if (nextProps.readonly) {
+                this.state.fileName = "";
+                this.state.objectUrl = "";
+            }
+        });
+    }
+    get file() {
+        return {
+            data: this.props.fileData,
+            name: this.state.fileName || this.props.fileData || null,
+        };
+    }
+    get url() {
+        if (this.state.isValid && this.props.value) {
+            return (
+                "/web/static/lib/pdfjs/web/viewer.html?file=" +
+                encodeURIComponent(
+                    this.state.objectUrl ||
+                        url("/web/content", {
+                            model: this.props.resModel,
+                            id: this.props.resId,
+                            field: this.props.previewImage || this.props.name,
+                        })
+                ) +
+                `#page=${this.props.defaultPage || 1}`
+            );
+        }
+        return null;
+    }
+    onFileRemove() {
+        this.state.isValid = true;
+        this.props.update(false);
+    }
+    onFileUploaded(file) {
+        this.state.fileName = file.name;
+        this.state.isValid = true;
+        this.props.update(file.data);
+        this.state.objectUrl = file.objectUrl;
+    }
+    onLoadFailed() {
+        this.state.isValid = false;
+        this.notification.add(this.env._t("Could not display the selected pdf"), {
+            type: "danger",
+        });
+    }
+}
+
+PdfViewerField.template = "web.PdfViewerField";
+PdfViewerField.components = {
+    FileUploader,
+};
+PdfViewerField.props = {
+    ...standardFieldProps,
+    defaultPage: { type: Number, optional: true },
+    fileData: { type: String, optional: true },
+    fileName: { type: String, optional: true },
+    previewImage: { type: String, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+PdfViewerField.defaultProps = {
+    fileData: "",
+};
+
+PdfViewerField.displayName = _lt("PDF Viewer");
+PdfViewerField.supportedTypes = ["binary"];
+
+PdfViewerField.extractProps = (fieldName, record, attrs) => {
+    return {
+        defaultPage: record.data[fieldName + "_page"],
+        fileData: record.data[fieldName] || "",
+        fileName: record.data[attrs.filename] || "",
+        previewImage: attrs.options.preview_image,
+        resId: record.resId,
+        resModel: record.resModel,
+    };
+};
+
+registry.category("fields").add("pdf_viewer", PdfViewerField);
diff --git a/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
new file mode 100644
index 00000000000..db85ef2aef9
--- /dev/null
+++ b/addons/web/static/src/views/fields/pdf_viewer/pdf_viewer_field.xml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PdfViewerField" owl="1">
+        <t t-if="!props.readonly">
+            <t t-if="file.data">
+                <FileUploader
+                    acceptedFileExtensions="'.pdf'"
+                    file="file"
+                    onUploaded.bind="onFileUploaded"
+                >
+                    <t t-set-slot="toggler">
+                        <span class="mx-2" t-esc="file.name"/>
+                        <button
+                            class="btn btn-secondary fa fa-pencil o_select_file_button"
+                            data-tooltip="Edit"
+                            aria-label="Edit"
+                        />
+                    </t>
+                    <button
+                        class="btn btn-secondary fa fa-trash o_clear_file_button"
+                        data-tooltip="Clear"
+                        aria-label="Clear"
+                        t-on-click="onFileRemove"
+                    />
+                </FileUploader>
+            </t>
+            <t t-else="">
+                <label class="o_select_file_button btn btn-primary">
+                    <FileUploader
+                        acceptedFileExtensions="'.pdf'"
+                        onUploaded.bind="onFileUploaded"
+                    >
+                        <t t-set-slot="toggler">
+                            <span t-esc="'Upload your file'"/>
+                        </t>
+                    </FileUploader>
+                </label>
+            </t>
+        </t>
+        <t t-if="file.data">
+            <iframe class="o_pdfview_iframe"
+                alt="PDF file"
+                t-att-src="url"
+                t-att-name="props.name"
+                t-on-error="onLoadFailed"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/percent_pie/percent_pie_field.js b/addons/web/static/src/views/fields/percent_pie/percent_pie_field.js
new file mode 100644
index 00000000000..31a5e74b11e
--- /dev/null
+++ b/addons/web/static/src/views/fields/percent_pie/percent_pie_field.js
@@ -0,0 +1,35 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class PercentPieField extends Component {
+    get transform() {
+        const rotateDeg = (360 * this.props.value) / 100;
+        return {
+            left: rotateDeg < 180 ? 180 : rotateDeg,
+            right: rotateDeg < 180 ? rotateDeg : 0,
+            value: rotateDeg,
+        };
+    }
+}
+
+PercentPieField.template = "web.PercentPieField";
+PercentPieField.props = {
+    ...standardFieldProps,
+    string: { type: String, optional: true },
+};
+
+PercentPieField.displayName = _lt("PercentPie");
+PercentPieField.supportedTypes = ["float", "integer"];
+
+PercentPieField.extractProps = (fieldName, record, attrs) => {
+    return {
+        string: attrs.string,
+    };
+};
+
+registry.category("fields").add("percentpie", PercentPieField);
diff --git a/addons/web/static/src/views/fields/percent_pie/percent_pie_field.xml b/addons/web/static/src/views/fields/percent_pie/percent_pie_field.xml
new file mode 100644
index 00000000000..a01e4021965
--- /dev/null
+++ b/addons/web/static/src/views/fields/percent_pie/percent_pie_field.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PercentPieField" owl="1">
+        <div class="o_field_widget o_field_percent_pie">
+            <div class="o_pie">
+                <div class="o_mask" t-attf-class="{{transform.value >= 360 ? 'o_full' : ''}}" t-attf-style="transform: rotate({{transform.left}}deg)"/>
+                <div class="o_mask" t-attf-class="{{transform.value >= 180 ? 'o_full' : ''}}" t-attf-style="transform: rotate({{transform.right}}deg)"/>
+                <div class="o_pie_value">
+                    <span t-esc="props.value + '%'"/>
+                </div>
+            </div>
+            <span t-esc="props.string"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/percentage/percentage_field.js b/addons/web/static/src/views/fields/percentage/percentage_field.js
new file mode 100644
index 00000000000..01998ad62f9
--- /dev/null
+++ b/addons/web/static/src/views/fields/percentage/percentage_field.js
@@ -0,0 +1,52 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { formatPercentage } from "../formatters";
+import { parsePercentage } from "../parsers";
+import { useInputField } from "../input_field_hook";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class PercentageField extends Component {
+    setup() {
+        useInputField({
+            getValue: () => this.props.value * 100,
+            refName: "numpadDecimal",
+            parse: (v) => parsePercentage(v),
+        });
+        useNumpadDecimal();
+    }
+
+    get formattedValue() {
+        return formatPercentage(this.props.value, {
+            digits: this.props.digits,
+        });
+    }
+}
+
+PercentageField.template = "web.PercentageField";
+PercentageField.props = {
+    ...standardFieldProps,
+    invalidate: { type: Function, optional: true },
+    digits: { type: Array, optional: true },
+};
+PercentageField.defaultProps = {
+    invalidate: () => {},
+};
+
+PercentageField.displayName = _lt("Percentage");
+PercentageField.supportedTypes = ["integer", "float"];
+
+PercentageField.extractProps = (fieldName, record, attrs) => {
+    return {
+        invalidate: () => record.setInvalidField(fieldName),
+        digits:
+            (attrs.digits ? JSON.parse(attrs.digits) : attrs.options.digits) ||
+            record.fields[fieldName].digits,
+    };
+};
+
+registry.category("fields").add("percentage", PercentageField);
diff --git a/addons/web/static/src/views/fields/percentage/percentage_field.xml b/addons/web/static/src/views/fields/percentage/percentage_field.xml
new file mode 100644
index 00000000000..412075a8b30
--- /dev/null
+++ b/addons/web/static/src/views/fields/percentage/percentage_field.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PercentageField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="formattedValue"/>
+        </t>
+        <t t-else="">
+            <div class="d-flex">
+                <input
+                    t-ref="numpadDecimal"
+                    t-attf-class="o_input"
+                    type="text"
+                    inputmode="numeric"
+                />
+                <span>%</span>
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/phone/phone_field.js b/addons/web/static/src/views/fields/phone/phone_field.js
new file mode 100644
index 00000000000..b32de9805a1
--- /dev/null
+++ b/addons/web/static/src/views/fields/phone/phone_field.js
@@ -0,0 +1,31 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class PhoneField extends Component {
+    setup() {
+        useInputField({ getValue: () => this.props.value || "" });
+    }
+}
+
+PhoneField.template = "web.PhoneField";
+PhoneField.props = {
+    ...standardFieldProps,
+    placeholder: { type: String, optional: true },
+};
+
+PhoneField.displayName = _lt("Phone");
+PhoneField.supportedTypes = ["char"];
+
+PhoneField.extractProps = (fieldName, record, attrs) => {
+    return {
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("phone", PhoneField);
diff --git a/addons/web/static/src/views/fields/phone/phone_field.xml b/addons/web/static/src/views/fields/phone/phone_field.xml
new file mode 100644
index 00000000000..f4f77c0b015
--- /dev/null
+++ b/addons/web/static/src/views/fields/phone/phone_field.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PhoneField" owl="1">
+        <t t-if="props.readonly">
+            <a class="o_form_uri o_phone_link" t-att-href="'tel:'+props.value" t-esc="props.value"/>
+        </t>
+        <t t-else="">
+            <input
+                class="o_input"
+                t-att-id="props.id"
+                type="phone"
+                t-att-placeholder="props.placeholder"
+                t-ref="input"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/priority/priority_field.js b/addons/web/static/src/views/fields/priority/priority_field.js
new file mode 100644
index 00000000000..67e71ca121f
--- /dev/null
+++ b/addons/web/static/src/views/fields/priority/priority_field.js
@@ -0,0 +1,89 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, useState } = owl;
+
+export class PriorityField extends Component {
+    setup() {
+        this.state = useState({
+            index: -1,
+        });
+        if (this.props.addCommand) {
+            this.initiateCommand();
+        }
+    }
+
+    get index() {
+        return this.state.index > -1
+            ? this.state.index
+            : this.props.options.findIndex((o) => o[0] === this.props.value);
+    }
+
+    getTooltip(value) {
+        return this.props.tooltipLabel ? `${this.props.tooltipLabel}: ${value}` : value;
+    }
+    /**
+     * @param {string} value
+     */
+    onStarClicked(value) {
+        if (this.props.value === value) {
+            this.state.index = -1;
+            this.props.update(this.props.options[0][0]);
+        } else {
+            this.props.update(value);
+        }
+    }
+    initiateCommand() {
+        try {
+            const commandService = useService("command");
+            const provide = () => {
+                return this.props.options.map((value) => ({
+                    name: value[1],
+                    action: () => {
+                        this.props.update(value[0]);
+                    },
+                }));
+            };
+            const name = this.env._t("Set priority...");
+            const action = () => {
+                return commandService.openPalette({
+                    placeholder: this.env._t("Set a priority..."),
+                    providers: [{ provide }],
+                });
+            };
+            const options = {
+                category: "smart_action",
+                hotkey: "alt+r",
+            };
+            commandService.add(name, action, options);
+        } catch {
+            console.log("Could not add command to service");
+        }
+    }
+}
+
+PriorityField.template = "web.PriorityField";
+PriorityField.props = {
+    options: Object,
+    ...standardFieldProps,
+    addCommand: { type: Boolean, optional: true },
+    tooltipLabel: { type: String, optional: true },
+};
+
+PriorityField.displayName = _lt("Priority");
+PriorityField.supportedTypes = ["selection"];
+
+PriorityField.extractProps = (fieldName, record) => {
+    return {
+        addCommand: record.activeFields[fieldName].viewType === "form",
+        options: Array.from(record.fields[fieldName].selection),
+        tooltipLabel: record.fields[fieldName].string,
+        readonly: record.isReadonly(fieldName),
+    };
+};
+
+registry.category("fields").add("priority", PriorityField);
diff --git a/addons/web/static/src/views/fields/priority/priority_field.xml b/addons/web/static/src/views/fields/priority/priority_field.xml
new file mode 100644
index 00000000000..add46f1bee8
--- /dev/null
+++ b/addons/web/static/src/views/fields/priority/priority_field.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PriorityField" owl="1">
+        <div class="o_priority" role="radiogroup" name="priority" aria-label="Priority">
+            <t t-foreach="props.options" t-as="value" t-key="value">
+                <t t-if="!value_first">
+                    <t t-if="props.readonly">
+                        <span
+                            class="o_priority_star fa"
+                            role="radio"
+                            t-att-class="value_index lte index ? 'fa-star' : 'fa-star-o'"
+                            t-att-tabindex="value_index === state.index ? 0 : -1"
+                            t-att-data-tooltip="getTooltip(value[1])"
+                            t-att-aria-checked="value_index lte index"
+                            t-att-aria-label="value[1]"
+                        />
+                    </t>
+                    <t t-else="">
+                        <a
+                            href="#"
+                            class="o_priority_star fa"
+                            role="radio"
+                            t-att-class="value_index lte index ? 'fa-star' : 'fa-star-o'"
+                            t-att-tabindex="value_index === state.index ? 0 : -1"
+                            t-att-data-tooltip="getTooltip(value[1])"
+                            t-att-aria-checked="value_index lte index"
+                            t-att-aria-label="value[1]"
+                            t-on-click.prevent.stop="() => this.onStarClicked(value[0])"
+                            t-on-mouseenter="() => state.index = value_index"
+                            t-on-mouseleave="() => state.index = -1"
+                        />
+                    </t>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
new file mode 100644
index 00000000000..8c7783114df
--- /dev/null
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.js
@@ -0,0 +1,123 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { parseFloat } from "../parsers";
+import { standardFieldProps } from "../standard_field_props";
+import { useNumpadDecimal } from "../numpad_decimal_hook";
+
+const { Component, onWillUpdateProps, useState } = owl;
+const formatters = registry.category("formatters");
+const parsers = registry.category("parsers");
+
+export class ProgressBarField extends Component {
+    setup() {
+        useNumpadDecimal();
+        this.state = useState({
+            currentValue: this.props.currentValue.value,
+            maxValue: this.props.maxValue.value,
+        });
+        onWillUpdateProps((nextProps) => {
+            if (nextProps.readonly) {
+                Object.assign(this.state, {
+                    currentValue: nextProps.currentValue.value,
+                    maxValue: nextProps.maxValue.value,
+                });
+            }
+        });
+    }
+
+    getFormattedValue(part, humanReadable = false) {
+        const formatter = formatters.get(this.props[part].type);
+        return formatter(this.state[part], { humanReadable });
+    }
+
+    /**
+     * @param {String} value
+     * @param {String} part
+     */
+    onChangeValue(value, part) {
+        try {
+            let parsedValue = parseFloat(value);
+            if (this.props[part].type === "integer") {
+                parsedValue = Math.floor(parsedValue);
+            }
+            this.state[part] = parsedValue;
+            this.props.updatePart(part, parsedValue);
+        } catch {
+            this.props.invalidate();
+            return;
+        }
+    }
+
+    onInput(ev, part) {
+        const parser = parsers.get(this.props[part].type);
+        try {
+            this.state[part] = parser(ev.target.value);
+        } catch {
+            // pass
+        }
+    }
+}
+
+ProgressBarField.template = "web.ProgressBarField";
+ProgressBarField.props = {
+    ...standardFieldProps,
+    currentValue: { type: Object, optional: true },
+    isPercentage: { type: Boolean, optional: true },
+    maxValue: { type: Object, optional: true },
+    isCurrentValueEditable: { type: Boolean, optional: true },
+    isMaxValueEditable: { type: Boolean, optional: true },
+    invalidate: { type: Function, optional: true },
+    updatePart: { type: Function, optional: true },
+};
+ProgressBarField.defaultProps = {
+    invalidate: () => {},
+    updatePart: () => {},
+};
+
+ProgressBarField.displayName = _lt("Progress Bar");
+ProgressBarField.supportedTypes = ["integer", "float"];
+
+ProgressBarField.extractProps = (fieldName, record, attrs) => {
+    const getPart = (part) => {
+        if (attrs.options[part]) {
+            let value = attrs.options[part];
+            let name;
+            if (isNaN(value)) {
+                value =
+                    (record.data[attrs.options[part]] !== undefined &&
+                        record.data[attrs.options[part]]) ||
+                    0;
+                name = attrs.options[part];
+            }
+            return {
+                fieldName: name,
+                value,
+                type: value % 1 === 0 ? "integer" : "float",
+            };
+        }
+        const value = part === "max_value" ? 100 : record.data[fieldName] || 0;
+        return {
+            fieldName: fieldName,
+            value,
+            type: value % 1 === 0 ? "integer" : "float",
+        };
+    };
+    const parts = {
+        currentValue: getPart("current_value"),
+        maxValue: getPart("max_value"),
+    };
+    return {
+        ...parts,
+        isPercentage: !attrs.options.max_value,
+        isCurrentValueEditable:
+            (attrs.options.editable && !attrs.options.edit_max_value) ||
+            attrs.options.edit_current_value,
+        isMaxValueEditable: attrs.options.edit_max_value,
+        invalidate: () => record.setInvalidField(fieldName),
+        updatePart: (part, value) => record.update({ [parts[part].fieldName]: value }),
+    };
+};
+
+registry.category("fields").add("progressbar", ProgressBarField);
diff --git a/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
new file mode 100644
index 00000000000..d3b0199f72e
--- /dev/null
+++ b/addons/web/static/src/views/fields/progress_bar/progress_bar_field.xml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ProgressBarField" owl="1">
+        <t t-if="props.readonly">
+            <div class="o_progressbar">
+                <div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
+                    <div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
+                </div>
+                <t t-if="props.isPercentage">
+                    <span class="o_progressbar_value" t-esc="getFormattedValue('currentValue', true) + '%'"/>
+                </t>
+                <t t-else="">
+                    <div class="o_progressbar_value" t-esc="getFormattedValue('currentValue', true) + ' / ' + getFormattedValue('maxValue', true)"/>
+                </t>
+            </div>
+        </t>
+        <t t-else="">
+            <div class="o_progressbar d-flex" t-ref="numpadDecimal">
+                <div class="o_progress" aria-valuemin="0" t-att-aria-valuemax="state.maxValue" t-att-aria-valuenow="state.currentValue">
+                    <div class="o_progressbar_complete" t-att-style="'width: min(' + 100 * state.currentValue / state.maxValue + '%, 100%)'"></div>
+                </div>
+                <t t-if="props.isPercentage">
+                    <div class="d-flex">
+                        <input
+                            class="o_input o_progressbar_value"
+                            type="text"
+                            inputmode="numeric"
+                            t-att-value="getFormattedValue('currentValue') or ''"
+                            t-att-required="props.required"
+                            t-on-change="(ev) => this.onChangeValue(ev.target.value, 'currentValue')"
+                            t-on-input="(ev) => this.onInput(ev, 'currentValue')"
+                        />
+                        <span>%</span>
+                    </div>
+                </t>
+                <t t-else="">
+                <t t-if="props.isCurrentValueEditable">
+                        <input
+                            class="o_progressbar_value o_input"
+                            type="text"
+                            inputmode="numeric"
+                            t-att-value="getFormattedValue('currentValue')"
+                            t-on-change="(ev) => this.onChangeValue(ev.target.value, 'currentValue')"
+                            t-on-input="(ev) => this.onInput(ev, 'currentValue')"
+                        />
+                    </t>
+                    <t t-else="">
+                        <span class="o_progressbar_value" t-esc="state.currentValue"/>
+                    </t>
+                    <span>/</span>
+                    <t t-if="props.isMaxValueEditable">
+                        <input
+                            class="o_progressbar_value o_input"
+                            type="text"
+                            inputmode="numeric"
+                            t-att-value="getFormattedValue('maxValue')"
+                            t-on-change="(ev) => this.onChangeValue(ev.target.value, 'maxValue')"
+                            t-on-input="(ev) => this.onInput(ev, 'maxValue')"
+                        />
+                    </t>
+                    <t t-else="">
+                        <span class="o_progressbar_value" t-esc="state.maxValue"/>
+                    </t>
+                </t>
+            </div>
+        </t>
+    </t>
+
+</templates>
+
diff --git a/addons/web/static/src/views/fields/radio/radio_field.js b/addons/web/static/src/views/fields/radio/radio_field.js
new file mode 100644
index 00000000000..49765fa4721
--- /dev/null
+++ b/addons/web/static/src/views/fields/radio/radio_field.js
@@ -0,0 +1,90 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class RadioField extends Component {
+    setup() {
+        this.id = `radio_field_${++RadioField.nextId}`;
+    }
+
+    get value() {
+        switch (this.props.type) {
+            case "selection":
+                return this.props.value;
+            case "many2one":
+                return Array.isArray(this.props.value) ? this.props.value[0] : this.props.value;
+            default:
+                return null;
+        }
+    }
+
+    /**
+     * @param {any} value
+     */
+    onChange(value) {
+        switch (this.props.type) {
+            case "selection":
+                this.props.update(value[0]);
+                break;
+            case "many2one":
+                this.props.update(value);
+                break;
+        }
+    }
+}
+
+RadioField.nextId = 0;
+
+RadioField.template = "web.RadioField";
+RadioField.props = {
+    ...standardFieldProps,
+    orientation: { type: String, optional: true },
+    radioItems: Array,
+    string: { type: String, optional: true },
+};
+RadioField.defaultProps = {
+    orientation: "vertical",
+};
+
+RadioField.displayName = _lt("Radio");
+RadioField.supportedTypes = ["many2one", "selection"];
+
+RadioField.isEmpty = () => false;
+RadioField.extractProps = (fieldName, record, attrs) => {
+    const getRadioItems = () => {
+        switch (record.fields[fieldName].type) {
+            case "selection":
+                return record.fields[fieldName].selection;
+            case "many2one": {
+                const value = record.preloadedData[fieldName] || [];
+                return value.map((item) => [item.id, item.display_name]);
+            }
+            default:
+                return [];
+        }
+    };
+    return {
+        orientation: attrs.options.horizontal ? "horizontal" : "vertical",
+        radioItems: getRadioItems(),
+        string: record.activeFields[fieldName].string,
+    };
+};
+
+registry.category("fields").add("radio", RadioField);
+
+export async function preloadRadio(orm, record, fieldName) {
+    const field = record.fields[fieldName];
+    const context = record.evalContext;
+    const domain = record.getFieldDomain(fieldName).toList(context);
+    const records = await orm.searchRead(field.relation, domain, ["id"]);
+    return await orm.call(field.relation, "name_get", [records.map((record) => record.id)]);
+}
+
+registry.category("preloadedData").add("radio", {
+    loadOnTypes: ["many2one"],
+    preload: preloadRadio,
+});
diff --git a/addons/web/static/src/views/fields/radio/radio_field.scss b/addons/web/static/src/views/fields/radio/radio_field.scss
new file mode 100644
index 00000000000..8b38f65fd1a
--- /dev/null
+++ b/addons/web/static/src/views/fields/radio/radio_field.scss
@@ -0,0 +1,29 @@
+.o_field_radio > div {
+    display: inline-flex;
+    > span, > button {
+        flex: 0 0 auto;
+    }
+    @include media-breakpoint-down(sm) {
+        display: inline-block;
+    }
+    .o_radio_input {
+        outline: none;
+    }
+
+    .o_radio_item {
+        flex: 0 0 auto;
+    }
+
+    .o_horizontal {
+        .o_radio_item {
+            margin-right: $o-form-spacing-unit * 2;
+        }
+    }
+
+    .o_vertical {
+        flex-flow: column nowrap;
+        .o_radio_item {
+            margin-bottom: $o-form-spacing-unit;
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/fields/radio/radio_field.xml b/addons/web/static/src/views/fields/radio/radio_field.xml
new file mode 100644
index 00000000000..d016301ce5d
--- /dev/null
+++ b/addons/web/static/src/views/fields/radio/radio_field.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.RadioField" owl="1">
+        <div
+            role="radiogroup"
+            t-attf-class="o_{{ props.orientation }}"
+            t-att-aria-label="props.string"
+        >
+            <t t-foreach="props.radioItems" t-as="item" t-key="item[0]">
+                <div class="custom-control custom-radio o_radio_item" aria-atomic="true">
+                    <input
+                        type="radio"
+                        class="custom-control-input o_radio_input"
+                        t-att-checked="item[0] === value"
+                        t-att-disabled="props.readonly"
+                        t-att-name="id"
+                        t-att-data-value="item[0]"
+                        t-att-data-index="item_index"
+                        t-att-id="`${id}_${item[0]}`"
+                        t-on-change="() => this.onChange(item)"
+                    />
+                    <label class="custom-control-label o_form_label" t-att-for="`${id}_${item[0]}`" t-esc="item[1]" />
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/reference/reference_field.js b/addons/web/static/src/views/fields/reference/reference_field.js
new file mode 100644
index 00000000000..8dfe288829d
--- /dev/null
+++ b/addons/web/static/src/views/fields/reference/reference_field.js
@@ -0,0 +1,135 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { Domain } from "@web/core/domain";
+import { Many2OneField } from "../many2one/many2one_field";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component, onWillUpdateProps, useState } = owl;
+
+function valuesEqual(a, b) {
+    return a.resId === b.resId && a.resModel === b.resModel;
+}
+
+export class ReferenceField extends Component {
+    setup() {
+        this.state = useState({
+            resModel: this.relation,
+        });
+
+        onWillUpdateProps((nextProps) => {
+            if (
+                valuesEqual(this.props.value || {}, nextProps.value || {}) &&
+                nextProps.modelFieldValue !== this.props.modelFieldValue
+            ) {
+                nextProps.update(false);
+            }
+        });
+    }
+
+    get m2oProps() {
+        const p = {
+            ...this.props,
+            relation: this.relation,
+            value: this.props.value && [this.props.value.resId, this.props.value.displayName],
+            update: this.updateM2O.bind(this),
+        };
+        delete p.hideModelSelector;
+        delete p.modelSelection;
+        delete p.modelFieldValue;
+        return p;
+    }
+
+    get relation() {
+        if (this.props.modelFieldValue) {
+            return this.props.modelFieldValue;
+        } else if (this.props.value && this.props.value.resModel) {
+            return this.props.value.resModel;
+        } else {
+            return this.state && this.state.resModel;
+        }
+    }
+
+    updateModel(value) {
+        this.state.resModel = value;
+        this.props.update(false);
+    }
+
+    updateM2O(value) {
+        if (!this.state.resModel) {
+            this.state.resModel = this.relation;
+        }
+        this.props.update(
+            value && {
+                resModel: this.state.resModel,
+                resId: value[0],
+                displayName: value[1],
+            }
+        );
+    }
+}
+
+ReferenceField.template = "web.ReferenceField";
+ReferenceField.components = {
+    Many2OneField,
+};
+ReferenceField.props = {
+    ...standardFieldProps,
+    hideModelSelector: { type: Boolean, optional: true },
+    modelFieldValue: { type: String, optional: true },
+    value: [
+        Boolean,
+        {
+            type: Object,
+            shape: {
+                resModel: String,
+                resId: Number,
+                displayName: String,
+            },
+        },
+    ],
+    getContext: { type: Function, optional: true },
+    getDomain: { type: Function, optional: true },
+    modelSelection: { type: Array, optional: true },
+    string: { type: String, optional: true },
+};
+ReferenceField.defaultProps = {
+    getContext: () => ({}),
+    getDomain: () => new Domain(),
+};
+
+ReferenceField.displayName = _lt("Reference");
+ReferenceField.supportedTypes = ["reference", "char"];
+
+ReferenceField.extractProps = (fieldName, record, attrs) => {
+    let props = {};
+    const preloadedData = record.preloadedData[fieldName];
+    if (record.fields[fieldName].type === "char") {
+        props = {
+            value: {
+                resModel: preloadedData.model,
+                resId: preloadedData.data.id,
+                displayName: preloadedData.data.display_name,
+            },
+        };
+    } else if (attrs.options["model_field"]) {
+        props = {
+            hideModelSelector: true,
+            modelFieldValue: preloadedData && preloadedData.modelName,
+        };
+    } else {
+        props = {
+            modelSelection: record.fields[fieldName].selection,
+        };
+    }
+
+    return {
+        ...props,
+        getContext: () => record.getFieldContext(fieldName),
+        getDomain: () => record.getFieldDomain(fieldName),
+        string: attrs.string || record.fields[fieldName].string,
+    };
+};
+
+registry.category("fields").add("reference", ReferenceField);
diff --git a/addons/web/static/src/views/fields/reference/reference_field.xml b/addons/web/static/src/views/fields/reference/reference_field.xml
new file mode 100644
index 00000000000..1fa6962665c
--- /dev/null
+++ b/addons/web/static/src/views/fields/reference/reference_field.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ReferenceField" owl="1">
+        <div class="o_row">
+            <t t-if="!props.readonly and !props.hideModelSelector">
+                <select class="o_input"
+                    t-att-tabindex="relation ? '-1': 0"
+                    t-on-change="(ev) => this.updateModel(ev.target.value || false)"
+                >
+                    <option />
+                    <t t-foreach="props.modelSelection" t-as="option" t-key="option[0]">
+                        <option t-att-value="option[0]" t-att-selected="option[0] === relation" t-esc="option[1]" />
+                    </t>
+                </select>
+            </t>
+            <t t-if="relation">
+                <Many2OneField t-props="m2oProps" />
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/relational_utils.js b/addons/web/static/src/views/fields/relational_utils.js
new file mode 100644
index 00000000000..0ef40218dca
--- /dev/null
+++ b/addons/web/static/src/views/fields/relational_utils.js
@@ -0,0 +1,700 @@
+/** @odoo-module */
+
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { makeContext } from "@web/core/context";
+import { Dialog } from "@web/core/dialog/dialog";
+import {
+    useBus,
+    useChildRef,
+    useForwardRefToParent,
+    useOwnedDialogs,
+    useService,
+} from "@web/core/utils/hooks";
+import { createElement } from "@web/core/utils/xml";
+import { sprintf } from "@web/core/utils/strings";
+import { FormArchParser } from "@web/views/form/form_arch_parser";
+import { loadSubViews } from "@web/views/form/form_controller";
+import { FormRenderer } from "@web/views/form/form_renderer";
+import { evalDomain } from "@web/views/utils";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { useViewButtons } from "@web/views/view_button/view_button_hook";
+import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
+import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
+
+const { useEffect } = owl;
+
+//
+// Commons
+//
+export function useSelectCreate({ resModel, activeActions, onSelected, onCreateEdit }) {
+    const env = owl.useEnv();
+    const addDialog = useOwnedDialogs();
+
+    function selectCreate({ domain, context, filters, title }) {
+        addDialog(SelectCreateDialog, {
+            title: title || env._t("Select records"),
+            noCreate: !activeActions.canCreate,
+            multiSelect: "canLink" in activeActions ? activeActions.canLink : false, // LPE Fixme
+            resModel,
+            context,
+            domain,
+            onSelected,
+            onCreateEdit: () => onCreateEdit({ context }),
+            dynamicFilters: filters,
+        });
+    }
+    return selectCreate;
+}
+
+const STANDARD_ACTIVE_ACTIONS = ["create", "delete", "link", "unlink", "write"];
+export function useActiveActions({
+    subViewActiveActions = {},
+    crudOptions = {},
+    fieldType,
+    getEvalParams = (props) => ({}),
+}) {
+    const props = owl.useComponent().props;
+
+    const evals = {};
+    const makeEvalAction = (actionName, defaultBool = true) => {
+        let evalFn;
+        if (crudOptions[actionName] !== undefined) {
+            const action = crudOptions[actionName];
+            evalFn = (evalContext) => evalDomain(action, evalContext);
+        } else {
+            evalFn = () => defaultBool;
+        }
+
+        if (actionName in subViewActiveActions) {
+            const viewActiveAction = subViewActiveActions[actionName];
+            evals[actionName] = (evalContext) => viewActiveAction && evalFn(evalContext);
+            return;
+        }
+        evals[actionName] = evalFn;
+    };
+
+    function evalAction(actionName, evalContext) {
+        return evals[actionName](evalContext);
+    }
+
+    for (const actionName of STANDARD_ACTIVE_ACTIONS) {
+        makeEvalAction(actionName, actionName !== "write");
+    }
+
+    const isMany2Many = fieldType === "many2many";
+    const isMany2One = fieldType === "many2one";
+
+    function compute({ evalContext = {}, readonly = true }) {
+        // activeActions computed by getActiveActions is of the form
+        // interface ActiveActions {
+        //     edit: Boolean;
+        //     create: Boolean;
+        //     delete: Boolean;
+        //     duplicate: Boolean;
+        // }
+
+        // options set on field is of the form
+        // interface Options {
+        //     create: Boolean;
+        //     delete: Boolean;
+        //     link: Boolean;
+        //     unlink: Boolean;
+        // }
+
+        // We need to take care of tags "control" and "create" to set create stuff
+        const canCreate = !readonly && evalAction("create", evalContext);
+        const canDelete = !readonly && evalAction("delete", evalContext);
+
+        const canLink = !readonly && evalAction("link", evalContext);
+        const canUnlink = !readonly && evalAction("unlink", evalContext);
+
+        const result = { canCreate, canDelete };
+
+        if (isMany2Many) {
+            const canWrite = evalAction("write", evalContext);
+            Object.assign(result, { canLink, canUnlink, canWrite });
+        }
+
+        if (isMany2One) {
+            Object.assign(result, {
+                canWrite: evalAction("write", evalContext),
+                canCreateEdit: evalAction("createEdit", evalContext),
+            });
+        }
+
+        if ((isMany2Many && canUnlink) || (!isMany2Many && canDelete)) {
+            result.onDelete = crudOptions.onDelete;
+        }
+        return result;
+    }
+
+    let activeActions = compute(getEvalParams(props));
+
+    owl.onWillUpdateProps((nextProps) => {
+        activeActions = compute(getEvalParams(nextProps));
+    });
+
+    return new Proxy(
+        {},
+        {
+            get(target, k) {
+                return activeActions[k];
+            },
+            has(target, k) {
+                return k in activeActions;
+            },
+        }
+    );
+}
+
+//
+// Many2X
+//
+
+export class Many2XAutocomplete extends owl.Component {
+    setup() {
+        this.orm = useService("orm");
+
+        const autoCompleteContainer = useForwardRefToParent("autocomplete_container");
+
+        this.state = owl.useState({
+            autocompleteValue: this.props.value,
+        });
+
+        const { activeActions, resModel, update, isToMany, fieldString } = this.props;
+
+        this.openMany2X = useOpenMany2XRecord({
+            resModel,
+            activeActions,
+            isToMany,
+            onRecordSaved: (record) => {
+                return update([record.data]);
+            },
+            fieldString,
+            onClose: () => {
+                autoCompleteContainer.el.querySelector("input").focus();
+            },
+        });
+
+        this.selectCreate = useSelectCreate({
+            resModel,
+            activeActions,
+            onSelected: (resId) => {
+                const resIds = Array.isArray(resId) ? resId : [resId];
+                const values = resIds.map((id) => ({ id }));
+                return update(values);
+            },
+            onCreateEdit: ({ context }) => this.openMany2X({ context }),
+        });
+
+        this.forceClose = false;
+        owl.onWillUpdateProps((nextProps) => {
+            this.state.autocompleteValue = nextProps.value;
+            if (this.preventClose) {
+                return;
+            }
+            this.forceClose = true;
+        });
+        owl.useEffect(() => {
+            this.forceClose = false;
+            this.preventClose = false;
+        });
+    }
+
+    get sources() {
+        return [this.optionsSource];
+    }
+    get optionsSource() {
+        return {
+            placeholder: this.env._t("Loading..."),
+            options: this.loadOptionsSource.bind(this),
+        };
+    }
+
+    get activeActions() {
+        return this.props.activeActions;
+    }
+
+    getCreationContext(value) {
+        return makeContext([
+            this.props.context,
+            { [`default_${this.props.nameCreateField}`]: value },
+        ]);
+    }
+    onInput({ inputValue }) {
+        if (!this.props.value || this.props.value !== inputValue) {
+            this.preventClose = true;
+            this.props.setInputFloats(true);
+        }
+    }
+
+    onSelect(option, params = {}) {
+        if (option.action) {
+            return option.action(params);
+        }
+        this.state.autocompleteValue = "";
+        const record = {
+            id: option.value,
+            name: option.label,
+        };
+        this.props.update([record], params);
+    }
+
+    async loadOptionsSource(request) {
+        const records = await this.orm.call(this.props.resModel, "name_search", [], {
+            name: request,
+            operator: "ilike",
+            args: this.props.getDomain(),
+            limit: this.props.searchLimit + 1,
+            context: this.props.context,
+        });
+
+        const options = records.map((result) => ({
+            value: result[0],
+            label: result[1],
+        }));
+
+        if (this.props.quickCreate && request.length) {
+            options.push({
+                label: sprintf(this.env._t(`Create "%s"`), request),
+                classList: "o_m2o_dropdown_option o_m2o_dropdown_option_create",
+                action: async (params) => {
+                    try {
+                        await this.props.quickCreate(request, params);
+                    } catch {
+                        const context = this.getCreationContext(request);
+                        return this.openMany2X({ context });
+                    }
+                },
+            });
+        }
+
+        if (this.props.searchLimit < records.length) {
+            options.push({
+                label: this.env._t("Search More..."),
+                action: this.onSearchMore.bind(this, request),
+                classList: "o_m2o_dropdown_option o_m2o_dropdown_option_search_more",
+            });
+        }
+
+        const activeActions = this.activeActions;
+        const canCreateEdit =
+            "canCreateEdit" in activeActions
+                ? activeActions.canCreateEdit
+                : activeActions.canCreate;
+        if (!request.length && !this.props.value && (this.props.quickCreate || canCreateEdit)) {
+            options.push({
+                label: this.env._t("Start typing..."),
+                classList: "o_m2o_start_typing",
+                unselectable: true,
+            });
+        }
+
+        if (request.length && canCreateEdit) {
+            const context = this.getCreationContext(request);
+            options.push({
+                label: this.env._t("Create and edit..."),
+                classList: "o_m2o_dropdown_option o_m2o_dropdown_option_create_edit",
+                action: () => this.openMany2X({ context }),
+            });
+        }
+
+        if (!records.length && !activeActions.canCreate) {
+            options.push({
+                label: this.env._t("No records"),
+                classList: "o_m2o_no_result",
+                unselectable: true,
+            });
+        }
+
+        return options;
+    }
+
+    async onSearchMore(request) {
+        const { resModel, getDomain, context, fieldString } = this.props;
+
+        const domain = getDomain();
+        let dynamicFilters = [];
+        if (request.length) {
+            const nameGets = await this.orm.call(resModel, "name_search", [], {
+                name: request,
+                args: domain,
+                operator: "ilike",
+                limit: this.props.searchMoreLimit,
+                context,
+            });
+
+            dynamicFilters = [
+                {
+                    description: sprintf(this.env._t("Quick search: %s"), request),
+                    domain: [["id", "in", nameGets.map((nameGet) => nameGet[0])]],
+                },
+            ];
+        }
+
+        const title = sprintf(this.env._t("Search: %s"), fieldString);
+        this.selectCreate({
+            domain,
+            context,
+            filters: dynamicFilters,
+            title,
+        });
+    }
+
+    onChange({ inputValue }) {
+        if (!inputValue.length) {
+            this.props.update(false);
+        }
+    }
+}
+Many2XAutocomplete.template = "web.Many2XAutocomplete";
+Many2XAutocomplete.components = { AutoComplete };
+Many2XAutocomplete.defaultProps = {
+    searchLimit: 7,
+    searchMoreLimit: 320,
+    nameCreateField: "name",
+    value: "",
+    setInputFloats: () => {},
+    quickCreate: null,
+};
+
+export function useOpenMany2XRecord({
+    resModel,
+    onRecordSaved,
+    fieldString,
+    activeActions,
+    isToMany,
+    onClose = (isNew) => {},
+}) {
+    const env = owl.useEnv();
+    const addDialog = useOwnedDialogs();
+    const orm = useService("orm");
+
+    return async function openDialog({ resId = false, title, context }, immediate = false) {
+        let viewId;
+        if (resId !== false) {
+            viewId = await orm.call(resModel, "get_formview_id", [[resId]], {
+                context,
+            });
+        }
+
+        let resolve = () => {};
+        if (!title) {
+            title = resId ? env._t("Open: %s") : env._t("Create %s");
+            title = sprintf(title, fieldString);
+        }
+
+        const { canCreate, canWrite } = activeActions;
+
+        const mode = (resId ? canWrite : canCreate) ? "edit" : "readonly";
+
+        addDialog(
+            FormViewDialog,
+            {
+                preventCreate: !activeActions.canCreate,
+                preventEdit: !activeActions.canWrite,
+                title,
+                context,
+                mode,
+                resId,
+                resModel,
+                viewId,
+                onRecordSaved,
+                isToMany,
+            },
+            {
+                onClose: () => {
+                    resolve();
+                    const isNew = !resId;
+                    onClose(isNew);
+                },
+            }
+        );
+
+        if (!immediate) {
+            return new Promise((_resolve) => {
+                resolve = _resolve;
+            });
+        }
+    };
+}
+
+//
+// X2Many
+//
+
+class X2ManyFieldDialog extends owl.Component {
+    setup() {
+        this.archInfo = this.props.archInfo;
+        this.record = this.props.record;
+        this.title = this.props.title;
+
+        useBus(this.record.model, "update", () => this.render(true));
+
+        this.modalRef = useChildRef();
+
+        const reload = () => this.record.load();
+        useViewButtons(this.props.record.model, this.modalRef, { reload }); // maybe pass the model directly in props
+
+        if (this.archInfo.xmlDoc.querySelector("footer")) {
+            this.footerArchInfo = Object.assign({}, this.archInfo);
+            this.footerArchInfo.xmlDoc = createElement("t");
+            this.footerArchInfo.xmlDoc.append(
+                ...[...this.archInfo.xmlDoc.querySelectorAll("footer")]
+            );
+            this.footerArchInfo.arch = this.footerArchInfo.xmlDoc.outerHTML;
+            [...this.archInfo.xmlDoc.querySelectorAll("footer")].forEach((x) => x.remove());
+            this.archInfo.arch = this.archInfo.xmlDoc.outerHTML;
+        }
+
+        const { autofocusFieldId, disableAutofocus } = this.archInfo;
+        if (!disableAutofocus) {
+            // to simplify
+            useEffect(
+                (isInEdition) => {
+                    let elementToFocus;
+                    if (isInEdition) {
+                        elementToFocus =
+                            (autofocusFieldId &&
+                                this.modalRef.el.querySelector(`#${autofocusFieldId}`)) ||
+                            this.modalRef.el.querySelector(".o_field_widget input");
+                    } else {
+                        elementToFocus =
+                            this.modalRef.el.querySelector("button.btn-primary") ||
+                            this.modalRef.el.querySelector(".o_control_panel .o_form_button_edit");
+                    }
+                    if (elementToFocus) {
+                        elementToFocus.focus();
+                    } else {
+                        this.modalRef.el.focus();
+                    }
+                },
+                () => [this.record.isInEdition]
+            );
+        }
+    }
+
+    disableButtons() {
+        const btns = this.modalRef.el.querySelectorAll(".modal-footer button");
+        for (const btn of btns) {
+            btn.setAttribute("disabled", "1");
+        }
+        return btns;
+    }
+
+    discard() {
+        if (this.record.isInEdition) {
+            this.record.discard();
+        }
+        this.props.close();
+    }
+
+    enableButtons(btns) {
+        for (const btn of btns) {
+            btn.removeAttribute("disabled");
+        }
+    }
+
+    async save({ saveAndNew }) {
+        if (this.record.checkValidity()) {
+            this.record = (await this.props.save(this.record, { saveAndNew })) || this.record;
+        } else {
+            return false;
+        }
+        if (!saveAndNew) {
+            this.props.close();
+        }
+        return true;
+    }
+
+    async remove() {
+        await this.props.delete();
+        this.props.close();
+    }
+
+    async saveAndNew() {
+        const disabledButtons = this.disableButtons();
+        const saved = await this.save({ saveAndNew: true });
+        if (saved) {
+            this.enableButtons(disabledButtons);
+            if (this.title) {
+                this.title = this.title.replace(this.env._t("Open:"), this.env._t("New:"));
+            }
+            this.render(true);
+        }
+    }
+}
+X2ManyFieldDialog.components = { Dialog, FormRenderer, ViewButton };
+X2ManyFieldDialog.props = {
+    archInfo: Object,
+    close: Function,
+    record: Object,
+    save: Function,
+    title: String,
+    delete: { optional: true },
+};
+X2ManyFieldDialog.template = "web.X2ManyFieldDialog";
+
+async function getFormViewInfo({ list, activeField, viewService, userService, env }) {
+    let formViewInfo = activeField.views.form;
+    const comodel = list.resModel;
+    if (!formViewInfo) {
+        const { fields, relatedModels, views } = await viewService.loadViews({
+            context: {},
+            resModel: comodel,
+            views: [[false, "form"]],
+        });
+        const archInfo = new FormArchParser().parse(views.form.arch, relatedModels, comodel);
+        formViewInfo = { ...archInfo, fields }; // should be good to memorize this on activeField
+    }
+
+    await loadSubViews(
+        formViewInfo.activeFields,
+        formViewInfo.fields,
+        {}, // context
+        comodel,
+        viewService,
+        userService,
+        env.isSmall
+    );
+
+    return formViewInfo;
+}
+
+export function useAddInlineRecord({ position, addNew }) {
+    let creatingRecord = false;
+
+    async function addInlineRecord({ context }) {
+        if (!creatingRecord) {
+            creatingRecord = true;
+            try {
+                await addNew({ context, mode: "edit", position });
+            } finally {
+                creatingRecord = false;
+            }
+        }
+    }
+    return addInlineRecord;
+}
+
+export function useOpenX2ManyRecord({
+    resModel,
+    activeField,
+    activeActions,
+    getList,
+    updateRecord,
+    saveRecord,
+}) {
+    const viewService = useService("view");
+    const userService = useService("user");
+    const env = owl.useEnv();
+
+    const addDialog = useOwnedDialogs();
+    const viewMode = activeField.viewMode;
+
+    async function openRecord({ record, mode, context, title, onClose }) {
+        if (!title) {
+            title = record ? env._t("Open: %s") : env._t("Create %s");
+            title = sprintf(title, activeField.string);
+        }
+        const list = getList();
+        const model = list.model;
+        const form = await getFormViewInfo({ list, activeField, viewService, userService, env });
+
+        let deleteRecord;
+        const isDuplicate = !!record;
+
+        if (record) {
+            const _record = record;
+            record = await model.duplicateDatapoint(record, {
+                mode,
+                viewMode: "form",
+                fields: { ...form.fields },
+                views: { form },
+            });
+            const { canDelete, onDelete } = activeActions;
+            deleteRecord = viewMode === "kanban" && canDelete ? () => onDelete(_record) : null;
+        } else {
+            const recordParams = {
+                context: makeContext([list.context, context]),
+                resModel: resModel,
+                activeFields: form.activeFields,
+                fields: { ...form.fields },
+                views: { form },
+                mode: "edit",
+                viewType: "form",
+            };
+            record = await model.addNewRecord(list, recordParams);
+        }
+
+        addDialog(
+            X2ManyFieldDialog,
+            {
+                archInfo: form,
+                record,
+                save: async (rec, { saveAndNew }) => {
+                    if (isDuplicate && rec.id === record.id) {
+                        await updateRecord(rec);
+                    } else {
+                        await saveRecord(rec);
+                    }
+                    if (saveAndNew) {
+                        return model.addNewRecord(list, {
+                            context: list.context,
+                            resModel: resModel,
+                            activeFields: form.activeFields,
+                            fields: { ...form.fields },
+                            views: { form },
+                            mode: "edit",
+                            viewType: "form",
+                        });
+                    }
+                },
+                title,
+                delete: deleteRecord,
+            },
+            { onClose }
+        );
+    }
+    return openRecord;
+}
+
+export function useX2ManyCrud(getList, isMany2Many) {
+    let saveRecord;
+    if (isMany2Many) {
+        saveRecord = (object) => {
+            const list = getList();
+            const currentIds = list.currentIds;
+            let resIds;
+            if (Array.isArray(object)) {
+                resIds = [...currentIds, ...object];
+            } else if (object.resId) {
+                resIds = [...currentIds, object.resId];
+            } else {
+                return list.add(object, { isM2M: isMany2Many });
+            }
+            return list.replaceWith(resIds);
+        };
+    } else {
+        saveRecord = (record) => {
+            return getList().add(record);
+        };
+    }
+
+    const updateRecord = (record) => {
+        const list = getList();
+        return list.model.updateRecord(list, record, { isM2M: isMany2Many });
+    };
+
+    const operation = isMany2Many ? "FORGET" : "DELETE";
+    const removeRecord = (record) => {
+        const list = getList();
+        return list.delete(record.id, operation);
+    };
+
+    return {
+        saveRecord,
+        updateRecord,
+        removeRecord,
+    };
+}
diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
new file mode 100644
index 00000000000..febb3696219
--- /dev/null
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="web.X2ManyFieldDialog" owl="1">
+    <Dialog title="title" contentClass="'o_form_view_dialog'" modalRef="modalRef">
+        <FormRenderer class="'o_form_view'" record="record" fields="archInfo.fields" archInfo="archInfo"/>
+        <t t-set-slot="footer">
+            <t t-if="footerArchInfo">
+                <FormRenderer record="record" archInfo="footerArchInfo"/>
+            </t>
+            <t t-else="">
+                <t t-if="record.isInEdition and !record.resId">
+                    <button class="btn btn-primary o_form_button_save" t-on-click="save" data-hotkey="c">Save &amp; Close</button>
+                    <button class="btn btn-primary o_form_button_save_new" t-on-click="saveAndNew" data-hotkey="n">Save &amp; New</button>
+                    <button class="btn btn-secondary o_form_button_cancel" t-on-click="discard" data-hotkey="j">Discard</button>
+                </t>
+                <t t-elif="record.isInEdition">
+                    <button class="btn btn-primary o_form_button_save" t-on-click="save" data-hotkey="c">Save</button>
+                    <button class="btn btn-secondary o_form_button_cancel" t-on-click="discard" data-hotkey="j">Discard</button>
+
+                    <t t-if="props.delete">
+                        <button class="btn btn-secondary o_btn_remove" t-on-click="remove" data-hotkey="k">Remove</button>
+                    </t>
+
+                </t>
+                <t t-else="">
+                    <button class="btn btn-primary o_form_button_cancel" t-on-click="() => this.props.close()" data-hotkey="j">Close</button>
+                </t>
+            </t>
+        </t>
+    </Dialog>
+</t>
+
+<t t-name="web.Many2XAutocomplete" owl="1" >
+    <div class="o_input_dropdown" t-ref="autocomplete_container">
+        <input t-if="env.isSmall"
+            type="text"
+            t-att-id="props.id"
+            class="o_input"
+            readonly=""
+            t-att-value="state.autocompleteValue"
+            t-on-click="onSearchMore"
+        />
+        <AutoComplete t-else=""
+            value="state.autocompleteValue"
+            id="props.id"
+            placeholder="props.placeholder"
+            sources="sources"
+            autoSelect="props.autoSelect"
+            onSelect.bind="onSelect"
+            onInput.bind="onInput"
+            onChange.bind="onChange"
+            forceClose="forceClose"
+        />
+        <a role="button" class="o_dropdown_button" draggable="false" />
+    </div>
+</t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/remaining_days/remaining_days_field.js b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.js
new file mode 100644
index 00000000000..9a3ea2607f1
--- /dev/null
+++ b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.js
@@ -0,0 +1,56 @@
+/** @odoo-module **/
+
+import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
+import { formatDate } from "@web/core/l10n/dates";
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class RemainingDaysField extends Component {
+    get hasTime() {
+        return this.props.type === "datetime";
+    }
+
+    get pickerComponent() {
+        return this.hasTime ? DateTimePicker : DatePicker;
+    }
+
+    get diffDays() {
+        if (!this.props.value) {
+            return null;
+        }
+        const today = this.correctDate(luxon.DateTime.utc()).startOf("day");
+        return Math.floor(
+            this.correctDate(this.props.value).startOf("day").diff(today, "days").days
+        );
+    }
+
+    get formattedValue() {
+        return this.props.value ? formatDate(this.props.value, { timezone: this.hasTime }) : "";
+    }
+
+    correctDate(date) {
+        return this.hasTime ? date.toLocal() : date.toUTC();
+    }
+
+    onDateTimeChanged(datetime) {
+        if (datetime) {
+            this.props.update(datetime);
+        } else if (typeof datetime === "string") {
+            // when the date is cleared
+            this.props.update(false);
+        }
+    }
+}
+
+RemainingDaysField.template = "web.RemainingDaysField";
+RemainingDaysField.props = {
+    ...standardFieldProps,
+};
+
+RemainingDaysField.displayName = _lt("Remaining Days");
+RemainingDaysField.supportedTypes = ["date", "datetime"];
+
+registry.category("fields").add("remaining_days", RemainingDaysField);
diff --git a/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
new file mode 100644
index 00000000000..337771bd860
--- /dev/null
+++ b/addons/web/static/src/views/fields/remaining_days/remaining_days_field.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.RemainingDaysField" owl="1">
+        <t t-if="props.readonly">
+            <t t-set="days" t-value="diffDays" />
+            <t t-set="formatted" t-value="formattedValue" />
+            <div
+                t-att-class="{
+                    'font-weight-bold': days !== null and days lte 0,
+                    'text-danger': days !== null and days lt 0,
+                    'text-warning': days !== null and days === 0,
+                }"
+                t-att-title="formatted"
+            >
+                <t t-if="days !== null">
+                    <t t-if="Math.abs(days) gt 99"><t t-esc="formatted" /></t>
+                    <t t-elif="days lt -1"><t t-esc="-days" /> days ago</t>
+                    <t t-elif="days === -1">Yesterday</t>
+                    <t t-elif="days === 0">Today</t>
+                    <t t-elif="days === 1">Tomorrow</t>
+                    <t t-elif="days gt 1">In <t t-esc="days" /> days</t>
+                </t>
+            </div>
+        </t>
+        <t t-else="">
+            <div>
+                <t t-component="pickerComponent" date="props.value or null" onDateTimeChanged.bind="onDateTimeChanged" />
+            </div>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/selection/selection_field.js b/addons/web/static/src/views/fields/selection/selection_field.js
new file mode 100644
index 00000000000..33f627e921b
--- /dev/null
+++ b/addons/web/static/src/views/fields/selection/selection_field.js
@@ -0,0 +1,93 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class SelectionField extends Component {
+    get string() {
+        switch (this.props.type) {
+            case "many2one":
+                return this.props.value ? this.props.value[1] : "";
+            case "selection":
+                return this.props.value !== false
+                    ? this.props.options.find((o) => o[0] === this.props.value)[1]
+                    : "";
+            default:
+                return "";
+        }
+    }
+    get value() {
+        const rawValue = this.props.value;
+        return this.props.type === "many2one" && rawValue ? rawValue[0] : rawValue;
+    }
+
+    stringify(value) {
+        return JSON.stringify(value);
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    onChange(ev) {
+        const value = JSON.parse(ev.target.value);
+        switch (this.props.type) {
+            case "many2one":
+                if (value === false) {
+                    this.props.update(false);
+                } else {
+                    this.props.update(this.props.options.find((option) => option[0] === value));
+                }
+                break;
+            case "selection":
+                this.props.update(value);
+                break;
+        }
+    }
+}
+
+SelectionField.template = "web.SelectionField";
+SelectionField.props = {
+    ...standardFieldProps,
+    options: Object,
+    placeholder: { type: String, optional: true },
+    required: { type: Boolean, optional: true },
+};
+
+SelectionField.displayName = _lt("Selection");
+SelectionField.supportedTypes = ["many2one", "selection"];
+
+SelectionField.isEmpty = (record, fieldName) => record.data[fieldName] === false;
+SelectionField.extractProps = (fieldName, record, attrs) => {
+    const getOptions = () => {
+        switch (record.fields[fieldName].type) {
+            case "many2one":
+                return record.preloadedData[fieldName];
+            case "selection":
+                return record.fields[fieldName].selection;
+            default:
+                return [];
+        }
+    };
+    return {
+        options: getOptions(),
+        placeholder: attrs.placeholder,
+        required: record.isRequired(fieldName),
+    };
+};
+
+registry.category("fields").add("selection", SelectionField);
+
+export function preloadSelection(orm, record, fieldName) {
+    const field = record.fields[fieldName];
+    const context = record.evalContext;
+    const domain = record.getFieldDomain(fieldName).toList(context);
+    return orm.call(field.relation, "name_search", ["", domain]);
+}
+
+registry.category("preloadedData").add("selection", {
+    loadOnTypes: ["many2one"],
+    preload: preloadSelection,
+});
diff --git a/addons/web/static/src/views/fields/selection/selection_field.xml b/addons/web/static/src/views/fields/selection/selection_field.xml
new file mode 100644
index 00000000000..28429d1c39a
--- /dev/null
+++ b/addons/web/static/src/views/fields/selection/selection_field.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.SelectionField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="string" t-att-raw-value="value" />
+        </t>
+        <t t-else="">
+            <select class="o_input" t-on-change="onChange">
+                <t t-if="!props.required">
+                    <option
+                        value="false"
+                        t-att-selected="!props.value"
+                        t-esc="props.placeholder"
+                    />
+                </t>
+                <t t-foreach="props.options" t-as="option" t-key="option[0]">
+                    <option
+                        t-att-selected="option[0] === value"
+                        t-att-value="stringify(option[0])"
+                        t-esc="option[1]"
+                    />
+                </t>
+            </select>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/standard_field_props.js b/addons/web/static/src/views/fields/standard_field_props.js
new file mode 100644
index 00000000000..26bec6d06ba
--- /dev/null
+++ b/addons/web/static/src/views/fields/standard_field_props.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+export const standardFieldProps = {
+    id: { type: String, optional: true },
+    name: { type: String, optional: true },
+    readonly: { type: Boolean, optional: true },
+    record: { type: Object, optional: true },
+    type: { type: String, optional: true },
+    update: { type: Function, optional: true },
+    value: true,
+    decorations: { type: Object, optional: true },
+    setDirty: { type: Function, optional: true },
+};
diff --git a/addons/web/static/src/views/fields/stat_info/stat_info_field.js b/addons/web/static/src/views/fields/stat_info/stat_info_field.js
new file mode 100644
index 00000000000..68b76cdd6b6
--- /dev/null
+++ b/addons/web/static/src/views/fields/stat_info/stat_info_field.js
@@ -0,0 +1,42 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { archParseBoolean } from "@web/views/utils";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+const formatters = registry.category("formatters");
+
+export class StatInfoField extends Component {
+    get formattedValue() {
+        const formatter = formatters.get(this.props.type);
+        return formatter(this.props.value || 0, { digits: this.props.digits });
+    }
+}
+
+StatInfoField.template = "web.StatInfoField";
+StatInfoField.props = {
+    ...standardFieldProps,
+    label: { type: String, optional: true },
+    noLabel: { type: Boolean, optional: true },
+    digits: { type: Array, optional: true },
+};
+
+StatInfoField.label = _lt("Stat Info");
+StatInfoField.supportedTypes = ["float", "integer", "monetary"];
+
+StatInfoField.isEmpty = () => false;
+StatInfoField.extractProps = (fieldName, record, attrs) => {
+    return {
+        label: attrs.options.label_field
+            ? record.data[attrs.options.label_field]
+            : record.activeFields[fieldName].string,
+        noLabel: archParseBoolean(attrs.nolabel),
+        digits:
+            (attrs.digits ? JSON.parse(attrs.digits) : attrs.options.digits) ||
+            record.fields[fieldName].digits,
+    };
+};
+
+registry.category("fields").add("statinfo", StatInfoField);
diff --git a/addons/web/static/src/views/fields/stat_info/stat_info_field.xml b/addons/web/static/src/views/fields/stat_info/stat_info_field.xml
new file mode 100644
index 00000000000..c3d5c75d24b
--- /dev/null
+++ b/addons/web/static/src/views/fields/stat_info/stat_info_field.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.StatInfoField" owl="1">
+        <span class="o_stat_info o_stat_value" t-esc="formattedValue"/>
+        <span t-if="!props.noLabel" class="o_stat_text" t-esc="props.label"/>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.js b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
new file mode 100644
index 00000000000..910676ca699
--- /dev/null
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.js
@@ -0,0 +1,96 @@
+/** @odoo-module **/
+
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { useService } from "@web/core/utils/hooks";
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+import { formatSelection } from "../formatters";
+
+const { Component } = owl;
+
+export class StateSelectionField extends Component {
+    setup() {
+        if (this.props.addCommand) {
+            this.initiateCommand();
+        }
+        this.excludedValues = [];
+        this.colorPrefix = "o_status_";
+        this.colors = {
+            blocked: "red",
+            done: "green",
+        };
+    }
+    get availableOptions() {
+        return this.props.options.filter((o) => !this.excludedValues.includes(o[0]));
+    }
+    get currentValue() {
+        return this.props.value || this.props.options[0][0];
+    }
+    get label() {
+        return formatSelection(this.currentValue, { selection: this.props.options });
+    }
+
+    initiateCommand() {
+        try {
+            const commandService = useService("command");
+            const provide = () => {
+                return this.props.options.map((value) => ({
+                    name: value[1],
+                    action: () => {
+                        this.props.update(value[0]);
+                    },
+                }));
+            };
+            const name = this.env._t("Set kanban state...");
+            const action = () => {
+                return commandService.openPalette({
+                    placeholder: this.env._t("Set a kanban state..."),
+                    providers: [{ provide }],
+                });
+            };
+            const options = {
+                category: "smart_action",
+                hotkey: "alt+shift+r",
+            };
+            commandService.add(name, action, options);
+        } catch {
+            console.log("Could not add command to service");
+        }
+    }
+    statusColor(value) {
+        return this.colors[value] ? this.colorPrefix + this.colors[value] : "";
+    }
+}
+
+StateSelectionField.template = "web.StateSelectionField";
+StateSelectionField.components = {
+    Dropdown,
+    DropdownItem,
+};
+StateSelectionField.props = {
+    ...standardFieldProps,
+    addCommand: { type: Boolean, optional: true },
+    showLabel: { type: Boolean, optional: true },
+    options: Object,
+};
+StateSelectionField.defaultProps = {
+    addCommand: false,
+    showLabel: false,
+};
+
+StateSelectionField.displayName = _lt("Label Selection");
+StateSelectionField.supportedTypes = ["selection"];
+
+StateSelectionField.extractProps = (fieldName, record, attrs) => {
+    return {
+        addCommand: record.activeFields[fieldName].viewType === "form",
+        showLabel: record.activeFields[fieldName].viewType === "list" && !attrs.options.hide_label,
+        options: Array.from(record.fields[fieldName].selection),
+        readonly: record.isReadonly(fieldName),
+    };
+};
+
+registry.category("fields").add("state_selection", StateSelectionField);
+registry.category("fields").add("list.state_selection", StateSelectionField);
diff --git a/addons/web/static/src/views/fields/state_selection/state_selection_field.xml b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
new file mode 100644
index 00000000000..dd29f773fdd
--- /dev/null
+++ b/addons/web/static/src/views/fields/state_selection/state_selection_field.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.StateSelectionField" owl="1">
+        <t t-if="props.readonly">
+            <button class="d-flex align-items-center btn btn-link disabled">
+                <span t-attf-class="{{ 'mx-2 o_status ' + statusColor(currentValue) }} "/>
+                <span t-if="props.showLabel" class="o_status_label" t-esc="label"/>
+            </button>
+        </t>
+        <t t-else="">
+            <Dropdown title="currentValue" togglerClass="'btn btn-link d-flex'">
+                <t t-set-slot="toggler">
+                    <div class="d-flex align-items-center">
+                        <span t-attf-class="{{ 'mx-2 o_status ' + statusColor(currentValue) }} "/>
+                        <span t-if="props.showLabel" class="o_status_label" t-esc="label"/>
+                    </div>
+                </t>
+                <t t-foreach="availableOptions" t-as="option" t-key="option[0]">
+                    <DropdownItem t-if="option[0] != currentValue" onSelected="() => props.update(option[0])">
+                        <div class="d-flex align-items-center">
+                            <span t-attf-class="{{ 'mx-2 o_status ' + statusColor(option[0]) }} "/>
+                            <span t-esc="option[1]"/>
+                        </div>
+                    </DropdownItem>
+                </t>
+            </Dropdown>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.js b/addons/web/static/src/views/fields/statusbar/statusbar_field.js
new file mode 100644
index 00000000000..0a4bac3adb2
--- /dev/null
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.js
@@ -0,0 +1,203 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { useService } from "@web/core/utils/hooks";
+import { groupBy } from "@web/core/utils/arrays";
+import { escape, sprintf } from "@web/core/utils/strings";
+import { Domain } from "@web/core/domain";
+import { _lt } from "@web/core/l10n/translation";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class StatusBarField extends Component {
+    setup() {
+        if (this.props.addCommand) {
+            this.initiateCommand();
+        }
+    }
+
+    get dropdownClassNames() {
+        const classNames = ["btn", "btn-secondary", "o_arrow_button"];
+        if (this.props.isDisabled) {
+            classNames.push("disabled");
+        }
+        return classNames.join(" ");
+    }
+
+    getVisibleMany2Ones() {
+        let items = this.props.options;
+        // FIXME: do this somewhere else
+        items = items.map((i) => {
+            return {
+                id: i.id,
+                name: i.display_name,
+                isFolded: i.fold,
+            };
+        });
+        return items.map((item) => ({
+            ...item,
+            isSelected: this.props.value && item.id === this.props.value[0],
+        }));
+    }
+
+    getVisibleSelection() {
+        let selection = this.props.options;
+        if (this.props.visibleSelection.length) {
+            selection = selection.filter(
+                (item) =>
+                    this.props.visibleSelection.includes(item[0]) || item[0] === this.props.value
+            );
+        }
+        return selection.map((item) => ({
+            id: item[0],
+            name: item[1],
+            isSelected: item[0] === this.props.value,
+            isFolded: false,
+        }));
+    }
+
+    computeItems() {
+        let items = null;
+        if (this.props.type === "many2one") {
+            items = this.getVisibleMany2Ones();
+        } else {
+            items = this.getVisibleSelection();
+        }
+
+        const groups = groupBy(items, (item) => item.isSelected || !item.isFolded);
+        return {
+            folded: groups.false || [],
+            unfolded: groups.true || [],
+        };
+    }
+
+    selectItem(item) {
+        switch (this.props.type) {
+            case "many2one":
+                this.props.update([item.id, item.name]);
+                break;
+            case "selection":
+                this.props.update(item.id);
+                break;
+        }
+    }
+
+    onDropdownItemSelected(ev) {
+        this.selectItem(ev.detail.payload);
+    }
+
+    initiateCommand() {
+        try {
+            const commandService = useService("command");
+            const provide = () => {
+                return this.computeItems().unfolded.map((value) => ({
+                    name: value.name,
+                    action: () => {
+                        this.selectItem(value);
+                    },
+                }));
+            };
+            const name = sprintf(this.env._t(`Move to %s...`), escape(this.props.displayName));
+            const action = () => {
+                return commandService.openPalette({
+                    placeholder: name,
+                    providers: [{ provide }],
+                });
+            };
+            const options = {
+                category: "smart_action",
+                hotkey: "alt+shift+x",
+            };
+            commandService.add(name, action, options);
+        } catch {
+            console.log("Could not add command to service");
+        }
+    }
+}
+
+StatusBarField.template = "web.StatusBarField";
+StatusBarField.defaultProps = {
+    visibleSelection: [],
+};
+StatusBarField.props = {
+    ...standardFieldProps,
+    addCommand: { type: Boolean, optional: true },
+    canCreate: { type: Boolean, optional: true },
+    canWrite: { type: Boolean, optional: true },
+    displayName: { type: String, optional: true },
+    isDisabled: { type: Boolean, optional: true },
+    visibleSelection: { type: Array, optional: true },
+    options: Array,
+};
+StatusBarField.components = {
+    Dropdown,
+    DropdownItem,
+};
+
+StatusBarField.displayName = _lt("Status");
+StatusBarField.supportedTypes = ["many2one", "selection"];
+
+StatusBarField.isEmpty = () => false;
+StatusBarField.extractProps = (fieldName, record, attrs) => {
+    const getOptions = () => {
+        switch (record.fields[fieldName].type) {
+            case "many2one":
+                return record.preloadedData[fieldName];
+            case "selection":
+                return record.fields[fieldName].selection;
+            default:
+                return [];
+        }
+    };
+    return {
+        options: getOptions(),
+        addCommand: record.activeFields[fieldName].viewType === "form",
+        canCreate: Boolean(attrs.can_create),
+        canWrite: Boolean(attrs.can_write),
+        displayName: record.fields[fieldName].string,
+        isDisabled: !attrs.options.clickable,
+        visibleSelection:
+            attrs.statusbar_visible && attrs.statusbar_visible.trim().split(/\s*,\s*/g),
+    };
+};
+
+registry.category("fields").add("statusbar", StatusBarField);
+
+export async function preloadStatusBar(orm, record, fieldName) {
+    const fieldNames = ["id"];
+    const foldField = record.activeFields[fieldName].options.fold_field;
+    if (foldField) {
+        fieldNames.push(foldField);
+    }
+
+    const context = record.evalContext;
+    let domain = record.getFieldDomain(fieldName).toList(context);
+    if (domain.length && record.data[fieldName]) {
+        domain = Domain.or([[["id", "=", record.data[fieldName][0]]], domain]).toList(context);
+    }
+
+    const relation = record.fields[fieldName].relation;
+    const records = await orm.searchRead(relation, domain, fieldNames);
+    const foldMap = {};
+    for (const rec of records) {
+        foldMap[rec.id] = rec[foldField];
+    }
+
+    const nameGets = await orm.call(relation, "name_get", [records.map((rec) => rec.id)]);
+    return nameGets.map((nameGet) => ({
+        id: nameGet[0],
+        name: nameGet[1],
+        isFolded: foldField ? foldMap[nameGet[0]] : false,
+    }));
+}
+
+registry.category("preloadedData").add("statusbar", {
+    loadOnTypes: ["many2one"],
+    extraMemoizationKey: (record, fieldName) => {
+        return record.data[fieldName];
+    },
+    preload: preloadStatusBar,
+});
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.scss b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
new file mode 100644
index 00000000000..82271aa88a2
--- /dev/null
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.scss
@@ -0,0 +1,71 @@
+.o_field_statusbar {
+    > .o_statusbar_status {
+        display: flex;
+        align-content: space-around;
+        margin-left: auto;
+        flex-flow: row-reverse wrap-reverse;
+        align-self: stretch;
+        align-items: stretch;
+
+        > .o_arrow_button {
+            min-height: $o-statusbar-height;
+            position: relative;
+            padding-left: $o-statusbar-arrow-width*2;
+            border-width: 0;
+            font-size: $font-size-sm;
+
+            &:first-child {
+                padding-right: $o-horizontal-padding; // Compensate container padding
+                overflow-x: hidden; // to prevent horizontal scroll due to last arrow
+            }
+            &:last-child {
+                padding-left: $o-horizontal-padding - 1;
+
+                &:not(.disabled) {
+                    border-left: 1px solid $border-color;
+                }
+            }
+
+            &:not(:first-child):before, &:not(:first-child):after {
+                content: " ";
+                display: block;
+                @include o-position-absolute(0, -$o-statusbar-arrow-width + 1);
+
+                border-top: floor($o-statusbar-height/2) solid transparent;
+                border-bottom: ceil($o-statusbar-height/2) solid transparent;
+                border-right: none;
+                border-left: $o-statusbar-arrow-width solid $o-view-background-color;
+                -moz-transform: scale(0.9999); // Smooth the triangle on firefox
+            }
+
+            &:not(:first-child):before {
+                right: -$o-statusbar-arrow-width;
+                border-left-color: gray('300');
+            }
+
+            &.disabled {
+                opacity: 1;
+                pointer-events: none;
+
+                &:not(.btn-primary) {
+                    @include plain-hover-focus() {
+                        color: $text-muted;
+                    }
+                }
+            }
+
+            &.btn-primary.disabled {
+                background-color: $o-brand-odoo;
+                color: color-yiq($o-brand-odoo);
+
+                &:after, &:before {
+                    border-left-color: $o-brand-odoo;
+                }
+
+                + .o_arrow_button:before {
+                    display: none;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.xml b/addons/web/static/src/views/fields/statusbar/statusbar_field.xml
new file mode 100644
index 00000000000..4511d32b4c0
--- /dev/null
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.xml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.StatusBarField" owl="1">
+        <div class="o_statusbar_status">
+            <t t-set="items" t-value="computeItems()" />
+
+            <t t-if="items.folded.length">
+                <button type="button" class="btn o_arrow_button btn-secondary dropdown-toggle">
+                    <Dropdown toggler="'parent'">
+                        <t t-foreach="items.folded" t-as="item" t-key="item.id">
+                            <DropdownItem class="dropdownClassNames" onSelected="() => this.selectItem(item)">
+                                <t t-esc="item.name" />
+                            </DropdownItem>
+                        </t>
+                    </Dropdown>
+                    More
+                </button>
+                
+            </t>
+
+            <t t-foreach="items.unfolded.reverse()" t-as="item" t-key="item.id">
+                <t t-if="item.isSelected">
+                    <button
+                        type="button"
+                        class="btn btn-primary o_arrow_button disabled"
+                        disabled="disabled"
+                        role="radio"
+                        aria-label="Current state"
+                        aria-checked="true"
+                        aria-current="step"
+                        t-att-disabled="props.isDisabled"
+                        t-att-data-value="item.id"
+                        t-esc="item.name"
+                    />
+                </t>
+                <t t-elif="props.isDisabled">
+                    <button
+                        type="button"
+                        class="btn btn-secondary o_arrow_button disabled"
+                        disabled="disabled"
+                        role="radio"
+                        aria-label="Not active state"
+                        aria-checked="false"
+                        t-att-disabled="props.isDisabled"
+                        t-att-data-value="item.id"
+                        t-esc="item.name"
+                    />
+                </t>
+                <t t-else="">
+                    <button
+                        type="button"
+                        class="btn btn-secondary o_arrow_button"
+                        role="radio"
+                        aria-label="Not active state, click to change it"
+                        aria-checked="false"
+                        t-att-data-value="item.id"
+                        t-esc="item.name"
+                        t-on-click="() => this.selectItem(item)"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/text/text_field.js b/addons/web/static/src/views/fields/text/text_field.js
new file mode 100644
index 00000000000..be2f6449521
--- /dev/null
+++ b/addons/web/static/src/views/fields/text/text_field.js
@@ -0,0 +1,120 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+import { TranslationButton } from "../translation_button";
+
+const { Component, useEffect, useRef } = owl;
+
+export class TextField extends Component {
+    setup() {
+        this.textareaRef = useRef("textarea");
+        useInputField({ getValue: () => this.props.value || "", refName: "textarea" });
+
+        useEffect(() => {
+            if (!this.props.readonly) {
+                this.resize();
+            }
+        });
+    }
+
+    get minimumHeight() {
+        return 50;
+    }
+    get rowCount() {
+        return 2;
+    }
+
+    resize() {
+        const textarea = this.textareaRef.el;
+        let heightOffset = 0;
+        const style = window.getComputedStyle(textarea);
+        if (style.boxSizing === "border-box") {
+            const paddingHeight = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+            const borderHeight =
+                parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+            heightOffset = borderHeight + paddingHeight;
+        }
+        Object.assign(textarea.style, {
+            height: "auto",
+            borderTopWidth: 0,
+            borderBottomWidth: 0,
+            padding: 0,
+        });
+        textarea.style.height = "auto";
+        const height = Math.max(this.minimumHeight, textarea.scrollHeight + heightOffset);
+        Object.assign(textarea.style, {
+            height: `${height}px`,
+            borderTopWidth: style.borderTopWidth,
+            borderBottomWidth: style.borderBottomWidth,
+            padding: style.padding,
+        });
+    }
+
+    onInput() {
+        this.resize();
+    }
+}
+
+TextField.template = "web.TextField";
+TextField.components = {
+    TranslationButton,
+};
+TextField.props = {
+    ...standardFieldProps,
+    isTranslatable: { type: Boolean, optional: true },
+    placeholder: { type: String, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+
+TextField.displayName = _lt("Multiline Text");
+TextField.supportedTypes = ["html", "text"];
+
+TextField.extractProps = (fieldName, record, attrs) => {
+    return {
+        isTranslatable: record.fields[fieldName].translate,
+        placeholder: attrs.placeholder,
+        resId: record.resId,
+        resModel: record.resModel,
+    };
+};
+
+registry.category("fields").add("text", TextField);
+
+class ListTextField extends TextField {
+    get minimumHeight() {
+        return 0;
+    }
+    get rowCount() {
+        return 1;
+    }
+}
+
+ListTextField.template = "web.TextField";
+ListTextField.components = {
+    TranslationButton,
+};
+ListTextField.props = {
+    ...standardFieldProps,
+    isTranslatable: { type: Boolean, optional: true },
+    placeholder: { type: String, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resModel: { type: String, optional: true },
+};
+
+ListTextField.displayName = _lt("Multiline Text");
+ListTextField.supportedTypes = ["html", "text"];
+
+ListTextField.extractProps = (fieldName, record, attrs) => {
+    return {
+        isTranslatable: record.fields[fieldName].translate,
+        placeholder: attrs.placeholder,
+        resId: record.resId,
+        resModel: record.resModel,
+    };
+};
+
+registry.category("fields").add("list.text", ListTextField);
diff --git a/addons/web/static/src/views/fields/text/text_field.scss b/addons/web/static/src/views/fields/text/text_field.scss
new file mode 100644
index 00000000000..ce580ce7cb5
--- /dev/null
+++ b/addons/web/static/src/views/fields/text/text_field.scss
@@ -0,0 +1,7 @@
+.o_field_text {
+    > textarea {
+        height: auto;
+        resize: none;
+        overflow-y: hidden;
+    }
+}
diff --git a/addons/web/static/src/views/fields/text/text_field.xml b/addons/web/static/src/views/fields/text/text_field.xml
new file mode 100644
index 00000000000..1108c7e5b62
--- /dev/null
+++ b/addons/web/static/src/views/fields/text/text_field.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.TextField" owl="1">
+        <t t-if="props.readonly">
+            <span t-esc="props.value or ''" />
+        </t>
+        <t t-else="">
+            <textarea
+                class="o_input"
+                t-att-id="props.id"
+                t-att-placeholder="props.placeholder"
+                t-att-rows="rowCount"
+                t-on-input="onInput"
+                t-ref="textarea"
+            />
+            <t t-if="props.isTranslatable">
+                <TranslationButton
+                    fieldName="props.name"
+                    resId="props.resId"
+                    resModel="props.resModel"
+                    value="props.value"
+                    updateField="props.update"
+                />
+            </t>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/translation_button.js b/addons/web/static/src/views/fields/translation_button.js
new file mode 100644
index 00000000000..35da94f8ad9
--- /dev/null
+++ b/addons/web/static/src/views/fields/translation_button.js
@@ -0,0 +1,43 @@
+/** @odoo-module **/
+
+import { localization } from "@web/core/l10n/localization";
+import { useService } from "@web/core/utils/hooks";
+import { TranslationDialog } from "./translation_dialog";
+
+const { Component } = owl;
+
+export class TranslationButton extends Component {
+    setup() {
+        this.user = useService("user");
+        this.rpc = useService("rpc");
+        this.dialog = useService("dialog");
+    }
+
+    get isMultiLang() {
+        return localization.multiLang;
+    }
+    get lang() {
+        return this.user.lang.split("_")[0].toUpperCase();
+    }
+
+    async onClick() {
+        const result = await this.rpc("/web/dataset/call_button", {
+            model: "ir.translation",
+            method: "translate_fields",
+            args: [this.props.resModel, this.props.resId, this.props.fieldName],
+            kwargs: {},
+        });
+
+        this.dialog.add(TranslationDialog, {
+            domain: result.domain,
+            searchName: result.context.search_default_name,
+            fieldName: this.props.fieldName,
+            userLanguageValue: this.props.value || "",
+            isComingFromTranslationAlert: false,
+            isText: result.context.translation_type === "text",
+            showSource: result.context.translation_show_src,
+            updateField: this.props.updateField,
+        });
+    }
+}
+TranslationButton.template = "web.TranslationButton";
diff --git a/addons/web/static/src/views/fields/translation_button.scss b/addons/web/static/src/views/fields/translation_button.scss
new file mode 100644
index 00000000000..00b7288ac11
--- /dev/null
+++ b/addons/web/static/src/views/fields/translation_button.scss
@@ -0,0 +1,9 @@
+
+.o_list_view .o_field_translate {
+    margin-left: -35px;
+    padding: 0px 1px;
+    text-align: right;
+    width: 35px;
+    vertical-align: top;
+    font-size: 12px;
+}
diff --git a/addons/web/static/src/views/fields/translation_button.xml b/addons/web/static/src/views/fields/translation_button.xml
new file mode 100644
index 00000000000..98b5f060c41
--- /dev/null
+++ b/addons/web/static/src/views/fields/translation_button.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.TranslationButton" owl="1">
+        <t t-if="isMultiLang">
+            <span class="o_field_translate btn btn-link" t-on-click.prevent="onClick">
+                <t t-esc="lang" />
+            </span>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/translation_dialog.js b/addons/web/static/src/views/fields/translation_dialog.js
new file mode 100644
index 00000000000..c15f46a83ad
--- /dev/null
+++ b/addons/web/static/src/views/fields/translation_dialog.js
@@ -0,0 +1,107 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+
+const { Component, onWillStart } = owl;
+
+let installedLanguages = null;
+
+export class TranslationDialog extends Component {
+    setup() {
+        super.setup();
+        this.title = sprintf(this.env._t("Translate: %s"), this.props.fieldName);
+
+        this.orm = useService("orm");
+        this.user = useService("user");
+
+        this.terms = [];
+        this.updatedTerms = {};
+
+        onWillStart(async () => {
+            const languages = await this.loadLanguages();
+            const translations = await this.loadTranslations(languages);
+
+            this.terms = translations.map((term) => {
+                const relatedLanguage = languages.find((l) => l[0] === term.lang);
+                if (!term.value && !this.props.showSource) {
+                    term.value = term.src;
+                }
+                return {
+                    id: term.id,
+                    lang: term.lang,
+                    langName: relatedLanguage[1],
+                    source: term.src,
+                    // we set the translation value coming from the database, except for the language
+                    // the user is currently utilizing. Then we set the translation value coming
+                    // from the value of the field in the form
+                    value:
+                        term.lang === this.user.lang &&
+                        !this.props.showSource &&
+                        !this.props.isComingFromTranslationAlert
+                            ? this.props.userLanguageValue
+                            : term.value || "",
+                };
+            });
+            this.terms.sort((a, b) =>
+                a.langName < b.langName || (a.langName === b.langName && a.source < b.source)
+                    ? -1
+                    : 1
+            );
+        });
+    }
+
+    /**
+     * Load the installed languages long names and code
+     *
+     * The result of the call is put in cache.
+     * If any new language is installed, a full page refresh will happen,
+     * so there is no need invalidate it.
+     */
+    async loadLanguages() {
+        if (!installedLanguages) {
+            installedLanguages = await this.orm.call("res.lang", "get_installed");
+        }
+        return installedLanguages;
+    }
+    /**
+     * Load the translation terms for the installed language, for the current model and res_id
+     */
+    async loadTranslations(languages) {
+        const domain = [...this.props.domain, ["lang", "in", languages.map((l) => l[0])]];
+        return this.orm.searchRead("ir.translation", domain, ["lang", "src", "value"]);
+    }
+
+    /**
+     * Save all the terms that have been updated
+     */
+    async onSave() {
+        await Promise.all(
+            this.terms.map(async (term) => {
+                if (term.id in this.updatedTerms && term.value !== this.updatedTerms[term.id]) {
+                    await this.orm.write("ir.translation", [term.id], {
+                        value: this.updatedTerms[term.id],
+                    });
+                }
+            })
+        );
+
+        // we might have to update the value of the field on the form
+        // view that opened the translation dialog
+        const currentTerm = this.terms.find(
+            (term) => term.lang === this.user.lang && !this.props.showSource
+        );
+        if (
+            currentTerm &&
+            currentTerm.id in this.updatedTerms &&
+            currentTerm.value !== this.updatedTerms[currentTerm.id]
+        ) {
+            this.props.updateField(this.updatedTerms[currentTerm.id]);
+        }
+
+        this.props.close();
+    }
+}
+TranslationDialog.template = "web.TranslationDialog";
+TranslationDialog.components = { Dialog };
diff --git a/addons/web/static/src/views/fields/translation_dialog.xml b/addons/web/static/src/views/fields/translation_dialog.xml
new file mode 100644
index 00000000000..4ab0da62002
--- /dev/null
+++ b/addons/web/static/src/views/fields/translation_dialog.xml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.TranslationDialog" owl="1">
+        <Dialog title="title">
+            <div class="o_translation_dialog">
+                <t t-foreach="terms" t-as="term" t-key="term.id">
+                    <div class="row">
+                        <div
+                            class="col-12"
+                            t-att-class="{ o_language_current: term.lang === user.lang }"
+                            t-attf-class="col-lg-{{ props.showSource ? 2 : 3 }}"
+                        >
+                            <t t-esc="term.langName" />
+                        </div>
+                        <t t-if="props.showSource">
+                            <div class="col-12 col-lg-3 source" t-attf-class="col-lg-{{ props.showSource ? 7 : 9 }}">
+                                <t t-esc="term.source" />
+                            </div>
+                        </t>
+                        <div class="col-12 translation">
+                            <t t-if="props.isText">
+                                <textarea
+                                    class="o_field_text o_field_translate o_field_widget o_input"
+                                    t-att-value="term.value"
+                                    t-att-data-id="term.id"
+                                    t-att-rows="props.showSource ? 2 : 5"
+                                    t-on-change="(ev) => this.updatedTerms[term.id] = ev.target.value"
+                                />
+                            </t>
+                            <t t-else="">
+                                <input
+                                    type="text"
+                                    class="o_field_char o_input"
+                                    t-att-value="term.value"
+                                    t-att-data-id="term.id"
+                                    t-on-change="(ev) => this.updatedTerms[term.id] = ev.target.value"
+                                />
+                            </t>
+                        </div>
+                    </div>
+                </t>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onSave">Save</button>
+                <button class="btn" t-on-click="props.close">Discard</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/url/url_field.js b/addons/web/static/src/views/fields/url/url_field.js
new file mode 100644
index 00000000000..5daaf8e8541
--- /dev/null
+++ b/addons/web/static/src/views/fields/url/url_field.js
@@ -0,0 +1,48 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { useInputField } from "../input_field_hook";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class UrlField extends Component {
+    setup() {
+        useInputField({ getValue: () => this.props.value || "" });
+    }
+
+    get formattedHref() {
+        let value = "";
+        if (typeof this.props.value === "string") {
+            const shouldaddPrefix = !(
+                this.props.websitePath ||
+                this.props.value.includes("://") ||
+                /^\//.test(this.props.value)
+            );
+            value = shouldaddPrefix ? `http://${this.props.value}` : this.props.value;
+        }
+        return value;
+    }
+}
+
+UrlField.template = "web.UrlField";
+UrlField.props = {
+    ...standardFieldProps,
+    placeholder: { type: String, optional: true },
+    text: { type: String, optional: true },
+    websitePath: { type: Boolean, optional: true },
+};
+
+UrlField.displayName = _lt("URL");
+UrlField.supportedTypes = ["char"];
+
+UrlField.extractProps = (fieldName, record, attrs) => {
+    return {
+        text: attrs.text,
+        websitePath: attrs.options.website_path,
+        placeholder: attrs.placeholder,
+    };
+};
+
+registry.category("fields").add("url", UrlField);
diff --git a/addons/web/static/src/views/fields/url/url_field.xml b/addons/web/static/src/views/fields/url/url_field.xml
new file mode 100644
index 00000000000..7244d7f0618
--- /dev/null
+++ b/addons/web/static/src/views/fields/url/url_field.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.UrlField" owl="1">
+        <t t-if="props.readonly">
+            <a class="o_field_widget o_form_uri" t-on-click.stop="" t-att-href="formattedHref" t-esc="props.text || props.value || ''" target="_blank"/>
+        </t>
+        <t t-else="">
+            <input
+                class="o_input"
+                t-att-id="props.id"
+                type="text"
+                t-att-placeholder="props.placeholder"
+                t-att-required="props.required"
+                t-ref="input"
+            />
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/x2many/list_x2many_field.js b/addons/web/static/src/views/fields/x2many/list_x2many_field.js
new file mode 100644
index 00000000000..6a3116c83e9
--- /dev/null
+++ b/addons/web/static/src/views/fields/x2many/list_x2many_field.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { formatX2many } from "../formatters";
+import { standardFieldProps } from "../standard_field_props";
+
+const { Component } = owl;
+
+export class ListX2ManyField extends Component {
+    get formattedValue() {
+        return formatX2many(this.props.value);
+    }
+}
+
+ListX2ManyField.template = "web.ListX2ManyField";
+ListX2ManyField.props = { ...standardFieldProps };
+
+ListX2ManyField.useSubView = false;
+
+registry.category("fields").add("list.one2many", ListX2ManyField);
+registry.category("fields").add("list.many2many", ListX2ManyField);
diff --git a/addons/web/static/src/views/fields/x2many/list_x2many_field.xml b/addons/web/static/src/views/fields/x2many/list_x2many_field.xml
new file mode 100644
index 00000000000..846d81942f9
--- /dev/null
+++ b/addons/web/static/src/views/fields/x2many/list_x2many_field.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ListX2ManyField" owl="1">
+       <t t-esc="formattedValue"/>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.js b/addons/web/static/src/views/fields/x2many/x2many_field.js
new file mode 100644
index 00000000000..c9d87d05207
--- /dev/null
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.js
@@ -0,0 +1,264 @@
+/** @odoo-module **/
+
+import { makeContext } from "@web/core/context";
+import { registry } from "@web/core/registry";
+import { Pager } from "@web/core/pager/pager";
+import {
+    useActiveActions,
+    useAddInlineRecord,
+    useOpenX2ManyRecord,
+    useSelectCreate,
+    useX2ManyCrud,
+} from "@web/views/fields/relational_utils";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
+import { ListRenderer } from "@web/views/list/list_renderer";
+import { evalDomain } from "@web/views/utils";
+
+const { Component } = owl;
+
+const X2M_RENDERERS = {
+    kanban: KanbanRenderer,
+    list: ListRenderer,
+};
+
+export class X2ManyField extends Component {
+    setup() {
+        this.activeField = this.props.record.activeFields[this.props.name];
+        this.field = this.props.record.fields[this.props.name];
+
+        this.isMany2Many =
+            this.field.type === "many2many" || this.activeField.widget === "many2many";
+
+        this.addButtonText = this.props.addLabel || this.env._t("Add");
+
+        this.viewMode = this.activeField.viewMode;
+        this.Renderer = X2M_RENDERERS[this.viewMode];
+
+        const { saveRecord, updateRecord, removeRecord } = useX2ManyCrud(
+            () => this.list,
+            this.isMany2Many
+        );
+
+        const subView = this.activeField.views[this.viewMode];
+        const subViewActiveActions = subView.activeActions;
+        this.activeActions = useActiveActions({
+            crudOptions: Object.assign({}, this.activeField.options, {
+                onDelete: removeRecord,
+            }),
+            fieldType: this.isMany2Many ? "many2many" : "one2many",
+            subViewActiveActions,
+            getEvalParams: (props) => {
+                return {
+                    evalContext: props.record.evalContext,
+                    readonly: props.readonly,
+                };
+            },
+        });
+
+        if (subView.editable) {
+            this.addInLine = useAddInlineRecord({
+                position: subView.editable,
+                addNew: (...args) => this.list.addNew(...args),
+            });
+        }
+
+        const openRecord = useOpenX2ManyRecord({
+            resModel: this.list.resModel,
+            activeField: this.activeField,
+            activeActions: this.activeActions,
+            getList: () => this.list,
+            saveRecord,
+            updateRecord,
+        });
+        this._openRecord = (params) => {
+            const activeElement = document.activeElement;
+            openRecord({
+                ...params,
+                onClose: () => {
+                    if (activeElement) {
+                        activeElement.focus();
+                    }
+                },
+            });
+        };
+        const selectCreate = useSelectCreate({
+            resModel: this.props.value.resModel,
+            activeActions: this.activeActions,
+            onSelected: (resIds) => saveRecord(resIds),
+            onCreateEdit: ({ context }) => this._openRecord({ context }),
+        });
+
+        this.selectCreate = (params) => {
+            const p = Object.assign({}, params);
+            p.domain = [...(p.domain || []), "!", ["id", "in", this.props.value.currentIds]];
+            return selectCreate(p);
+        };
+    }
+
+    get displayAddButton() {
+        const { canCreate, canLink } = this.activeActions;
+        return (
+            this.viewMode === "kanban" &&
+            (canLink !== undefined ? canLink : canCreate) &&
+            !this.props.readonly
+        );
+    }
+
+    get list() {
+        return this.props.value;
+    }
+
+    get nestedKeyOptionalFieldsData() {
+        return {
+            field: this.props.name,
+            model: this.props.record.resModel,
+            viewMode: this.props.record.viewMode || this.props.record.__viewType,
+        };
+    }
+
+    get pagerProps() {
+        const list = this.list;
+        return {
+            offset: list.offset,
+            limit: list.limit,
+            total: list.count,
+            onUpdate: async ({ offset, limit }) => {
+                const initialLimit = this.list.limit;
+                const unselected = await list.unselectRecord(true);
+                if (unselected) {
+                    if (initialLimit === limit && initialLimit === this.list.limit + 1) {
+                        // Unselecting the edited record might have abandonned it. If the page
+                        // size was reached before that record was created, the limit was temporarily
+                        // increased to keep that new record in the current page, and abandonning it
+                        // decreased this limit back to it's initial value, so we keep this into
+                        // account in the offset/limit update we're about to do.
+                        offset -= 1;
+                        limit -= 1;
+                    }
+                    await list.load({ limit, offset });
+                    this.render();
+                }
+            },
+            withAccessKey: false,
+        };
+    }
+
+    get rendererProps() {
+        const archInfo = this.activeField.views[this.viewMode];
+        const props = {
+            archInfo,
+            list: this.list,
+            openRecord: this.openRecord.bind(this),
+        };
+
+        if (this.viewMode === "kanban") {
+            const recordsDraggable = !this.props.readonly && archInfo.recordsDraggable;
+            props.archInfo = { ...archInfo, recordsDraggable };
+            props.readonly = this.props.readonly;
+            return props;
+        }
+
+        const mode = this.props.record.mode;
+        // handle column_invisible modifiers
+        const columns = archInfo.columns
+            .map((col) => {
+                // first remove (column_)invisible buttons in button_groups
+                if (col.type === "button_group") {
+                    const buttons = col.buttons.filter((button) => {
+                        return !this.evalColumnInvisibleModifier(button.modifiers);
+                    });
+                    return { ...col, buttons };
+                }
+                return col;
+            })
+            .filter((col) => {
+                // filter out (column_)invisible fields and empty button_groups
+                if (col.type === "field") {
+                    return !this.evalColumnInvisibleModifier(col.modifiers);
+                } else if (col.type === "button_group") {
+                    return col.buttons.length > 0;
+                }
+                return true;
+            })
+            .filter((col) => {
+                // filter out oe_read_only/oe_edit_only columns
+                // note: remove this oe_read/edit_only logic when form view
+                // will always be in edit mode
+                if (col.type === "field") {
+                    if (mode === "readonly") {
+                        return !/\boe_edit_only\b/.test(col.className);
+                    } else {
+                        return !/\boe_read_only\b/.test(col.className);
+                    }
+                } else if (col.type === "button_group") {
+                    if (mode === "readonly") {
+                        return col.buttons.some((btn) => !/\boe_edit_only\b/.test(btn.className));
+                    } else {
+                        return col.buttons.some((btn) => !/\boe_read_only\b/.test(btn.className));
+                    }
+                }
+            });
+
+        props.activeActions = this.activeActions;
+        props.archInfo = { ...archInfo, columns };
+        props.cycleOnTab = false;
+        props.editable = !this.props.readonly && archInfo.editable;
+        props.nestedKeyOptionalFieldsData = this.nestedKeyOptionalFieldsData;
+        props.onAdd = this.onAdd.bind(this);
+
+        return props;
+    }
+
+    evalColumnInvisibleModifier(modifiers) {
+        if ("column_invisible" in modifiers) {
+            return evalDomain(modifiers.column_invisible, this.list.evalContext);
+        }
+        return false;
+    }
+
+    async onAdd({ context } = {}) {
+        const record = this.props.record;
+        const domain = record.getFieldDomain(this.props.name).toList();
+        if (context) {
+            context = makeContext([record.getFieldContext(this.props.name), context]);
+        }
+        if (this.isMany2Many) {
+            return this.selectCreate({ domain, context });
+        }
+        if (this.addInLine) {
+            if (this.list.editedRecord) {
+                const proms = [];
+                this.list.model.env.bus.trigger("RELATIONAL_MODEL:NEED_LOCAL_CHANGES", { proms });
+                await Promise.all([...proms, this.list.editedRecord._updatePromise]);
+                await this.list.editedRecord.switchMode("readonly");
+            }
+            if (!this.list.editedRecord) {
+                return this.addInLine({ context });
+            }
+            return;
+        }
+        return this._openRecord({ context });
+    }
+
+    async openRecord(record) {
+        return this._openRecord({ record, mode: this.props.readonly ? "readonly" : "edit" });
+    }
+}
+
+X2ManyField.components = { Pager };
+X2ManyField.props = {
+    ...standardFieldProps,
+    addLabel: { type: "string", optional: true },
+};
+X2ManyField.supportedTypes = ["one2many"];
+X2ManyField.template = "web.X2ManyField";
+X2ManyField.useSubView = true;
+X2ManyField.extractProps = (fieldName, record, attrs) => {
+    return {
+        addLabel: attrs["add-label"],
+    };
+};
+
+registry.category("fields").add("one2many", X2ManyField);
+registry.category("fields").add("many2many", X2ManyField);
diff --git a/addons/web/static/src/views/fields/x2many/x2many_field.xml b/addons/web/static/src/views/fields/x2many/x2many_field.xml
new file mode 100644
index 00000000000..6c1fc5e62c7
--- /dev/null
+++ b/addons/web/static/src/views/fields/x2many/x2many_field.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.X2ManyField" owl="1">
+        <div t-attf-class="o_field_x2many o_field_x2many_{{viewMode}}">
+            <div class="o_x2m_control_panel">
+                <t t-if="displayAddButton">
+                    <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
+                        <div>
+                            <button type="button" class="btn btn-secondary o-kanban-button-new" title="Create record" accesskey="c" t-on-click="() => this.onAdd()">
+                                <t t-esc="addButtonText"/>
+                            </button>
+                        </div>
+                    </div>
+                </t>
+                <div class="o_cp_pager" role="search">
+                    <Pager t-if="props.value.count > props.value.limit" t-props="pagerProps"/>
+                </div>
+            </div>
+            <t t-if="Renderer" t-component="Renderer" t-props="rendererProps"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/form/button_box/button_box.js b/addons/web/static/src/views/form/button_box/button_box.js
new file mode 100644
index 00000000000..6916261556a
--- /dev/null
+++ b/addons/web/static/src/views/form/button_box/button_box.js
@@ -0,0 +1,34 @@
+/** @odoo-module  */
+
+import { useService } from "@web/core/utils/hooks";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+const { Component } = owl;
+export class ButtonBox extends Component {
+    setup() {
+        const ui = useService("ui");
+        this.getMaxButtons = () => [2, 2, 2, 4, 7][ui.size] || 8;
+    }
+
+    getButtons() {
+        const maxVisibleButtons = this.getMaxButtons();
+        const visible = [];
+        const additional = [];
+        for (const [slotName, slot] of Object.entries(this.props.slots)) {
+            if (!("isVisible" in slot) || slot.isVisible) {
+                if (visible.length >= maxVisibleButtons) {
+                    additional.push(slotName);
+                } else {
+                    visible.push(slotName);
+                }
+            }
+        }
+        return { visible, additional };
+    }
+}
+ButtonBox.template = "web.Form.ButtonBox";
+ButtonBox.components = { Dropdown, DropdownItem };
+ButtonBox.props = {
+    slots: Object,
+};
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
new file mode 100644
index 00000000000..ef65911de07
--- /dev/null
+++ b/addons/web/static/src/views/form/button_box/button_box.scss
@@ -0,0 +1,165 @@
+.o-form-buttonbox {
+    position: relative;
+    display: block;
+    margin-bottom: $o-sheet-vpadding;
+    margin-top: -$o-sheet-vpadding;
+    @include o-form-sheet-negative-margin;
+    text-align: right;
+    // Use box-shadow instead of border-bottom because some button boxes are
+    // empty in some cases and we do not want to see a floating border in
+    // that cases.
+    box-shadow: inset 0 -1px 0 $border-color;
+
+    > .btn.oe_stat_button, > .o_dropdown_more {
+        flex: 0 0 auto;
+        width: percentage(1/3); // Adapt the number of visible buttons for each screen width
+        @include media-breakpoint-up(md) {
+            width: percentage(1/5);
+        }
+        @include media-breakpoint-up(lg) {
+            width: percentage(1/7);
+        }
+        @include media-breakpoint-up(xl) {
+            width: percentage(1/8);
+        }
+    }
+
+    .btn.oe_stat_button {
+        color: $o-main-text-color;
+        height: $o-statbutton-height;
+        // Use !important to avoid touch_device style
+        padding: 0 $o-statbutton-spacing 0 0 !important; // padding-left will be achieved through margin-left of content
+        text-align: left;
+        white-space: nowrap;
+        background-color: transparent;
+        opacity: 0.8;
+        border-radius: 0px;
+        margin-bottom: 0; // If the button comes from a field
+        border: 0 solid gray('300');
+        text-transform: capitalize !important;
+
+        &:hover, &:focus {
+            background-color: rgba(black, 0.03);
+            color: inherit;
+            opacity: 1;
+        }
+
+        > .o_button_icon {
+            margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+            display: inline-block;
+            vertical-align: middle;
+            line-height: $o-statbutton-height;
+            width: 30%;
+
+            &:before {
+                font-size: 22px;
+                vertical-align: middle;
+            }
+        }
+
+        > .o_field_percent_pie {
+            margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+        }
+
+        // Some buttons only display text without using StatInfo template
+        > span {
+            @include o-text-overflow(block);
+            white-space: normal; // text on several lines if needed
+        }
+
+        > .o_stat_info, > span, > .o_field_statinfo { // contains the value and text
+            display: inline-block;
+            vertical-align: middle;
+            font-weight: $font-weight-normal;
+
+            max-width: 70%;
+            padding-right: $o-statbutton-spacing;
+            line-height: 1.3;
+
+            > .o_stat_value, > .o_stat_text {
+                @include o-text-overflow(block);
+                line-height: 1.2;
+            }
+
+            .o_stat_value {
+                font-weight: $font-weight-bold;
+                color: $o-brand-odoo;
+            }
+
+            .o_stat_text .o_field_empty {
+                display: none;
+            }
+        }
+
+        &:not(:disabled) {
+            > .o_stat_info .o_field_widget, > span .o_field_widget {
+                cursor: pointer;
+            }
+        }
+
+        &:not(:hover) .o_stat_info > .o_hover {
+            display: none !important;
+        }
+        &:hover .o_stat_info > .o_not_hover {
+            display: none !important
+        }
+
+        &.o_button_more {
+            padding: 0 !important;
+            > .o_dropdown_toggler {
+                text-align: center;
+                width: 100%;
+                height: 100%;
+                border: none;
+                border-bottom: 1px solid gray('300');
+                margin: 0;
+                padding: 0;
+                background-color: transparent;
+
+                &:after {
+                    margin-left: 5px;
+                    @include o-caret-down;
+                }
+                &[aria-expanded="true"]:after {
+                    margin-left: 5px;
+                    @include o-caret-up;
+                }
+            }
+        }
+    }
+
+    &.o-full .oe_stat_button:not(.o_invisible_modifier) ~ .oe_stat_button {
+        border-left: 1px solid $border-color;
+    }
+    &.o-not-full .oe_stat_button {
+        border-left: 1px solid $border-color;
+    }
+
+    // > .o_dropdown_more {
+    //     @include o-position-absolute(100%, 0);
+    //     min-width: 0;
+    //     border: none;
+    //     border: 1px solid gray('300');
+    //     margin: 0;
+    //     padding: 0;
+    //     @include media-breakpoint-down(sm) {
+    //         // avoid b4 drowdown inline style
+    //         position: relative !important;
+    //         transform: none !important;
+    //         will-change: inherit!important;
+    //         margin-bottom: 20px;
+    //         width: 100%;
+    //         border-width: 0px;
+    //     }
+    //     > .btn.oe_stat_button {
+    //         width: 100%;
+    //         border: none;
+    //         border-bottom: 1px solid gray('300');
+
+    //         @include media-breakpoint-down(sm) {
+    //             display: inline-block;
+    //             width: percentage(1/3);
+    //         }
+    //     }
+    // }
+}
\ No newline at end of file
diff --git a/addons/web/static/src/views/form/button_box/button_box.xml b/addons/web/static/src/views/form/button_box/button_box.xml
new file mode 100644
index 00000000000..5750bf2c9cf
--- /dev/null
+++ b/addons/web/static/src/views/form/button_box/button_box.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="web.Form.ButtonBox" owl="1" >
+    <t t-set="allButtons" t-value="getButtons()" />
+    <t t-set="visibleButtons" t-value="allButtons['visible']" />
+    <t t-set="additionalButtons" t-value="allButtons['additional']" />
+    <div class="o-form-buttonbox oe_button_box" t-attf-class="{{ visibleButtons.length >= getMaxButtons() ? 'o_full' : 'o_not_full' }}">
+        <t t-slot="{{ button_value }}" t-foreach="visibleButtons" t-as="button" t-key="button_value" />
+
+        <t t-if="additionalButtons.length" >
+            <Dropdown togglerClass="'btn o_button_more'" class="'btn oe_stat_button o_dropdown_more'">
+                <t t-set-slot="toggler">More</t>
+                <DropdownItem t-foreach="additionalButtons" t-as="button" t-key="button_value">
+                    <t t-slot="{{ button_value }}" />
+                </DropdownItem>
+            </Dropdown>
+        </t>
+    </div>
+</t>
+
+</templates>
diff --git a/addons/web/static/src/views/form/form_arch_parser.js b/addons/web/static/src/views/form/form_arch_parser.js
new file mode 100644
index 00000000000..790995ef9e1
--- /dev/null
+++ b/addons/web/static/src/views/form/form_arch_parser.js
@@ -0,0 +1,71 @@
+/** @odoo-module **/
+
+import { XMLParser } from "@web/core/utils/xml";
+import { Field } from "@web/views/fields/field";
+import { archParseBoolean, getActiveActions } from "@web/views/utils";
+import { Widget } from "@web/views/widgets/widget";
+
+export class FormArchParser extends XMLParser {
+    parse(arch, models, modelName) {
+        const xmlDoc = this.parseXML(arch);
+        const jsClass = xmlDoc.getAttribute("js_class");
+        const disableAutofocus = archParseBoolean(xmlDoc.getAttribute("disable_autofocus") || "");
+        const activeActions = getActiveActions(xmlDoc);
+        const fieldNodes = {};
+        const fieldNextIds = {};
+        let autofocusFieldId = null;
+        const activeFields = {};
+        this.visitXML(xmlDoc, (node) => {
+            if (node.tagName === "field") {
+                const fieldInfo = Field.parseFieldNode(node, models, modelName, "form", jsClass);
+                let fieldId = fieldInfo.name;
+                if (fieldInfo.name in fieldNextIds) {
+                    fieldId = `${fieldInfo.name}_${fieldNextIds[fieldInfo.name]++}`;
+                } else {
+                    fieldNextIds[fieldInfo.name] = 1;
+                }
+                fieldNodes[fieldId] = fieldInfo;
+                node.setAttribute("field_id", fieldId);
+                if (archParseBoolean(node.getAttribute("default_focus") || "")) {
+                    autofocusFieldId = fieldId;
+                }
+                return false;
+            } else if (node.tagName === "div" && node.classList.contains("oe_chatter")) {
+                // remove this when chatter fields are declared as attributes on the root node
+                return false;
+            } else if (node.tagName === "widget") {
+                const widgetInfo = Widget.parseWidgetNode(node);
+                for (const [name, field] of Object.entries(widgetInfo.fieldDependencies)) {
+                    activeFields[name] = {
+                        name,
+                        type: field.type,
+                    };
+                }
+            }
+        });
+        // TODO: generate activeFields for the model based on fieldNodes (merge duplicated fields)
+        for (const fieldNode of Object.values(fieldNodes)) {
+            activeFields[fieldNode.name] = fieldNode;
+            // const { onChange, modifiers } = fieldNode;
+            // let readonly = modifiers.readonly || [];
+            // let required = modifiers.required || [];
+            // if (activeFields[fieldNode.name]) {
+            //     activeFields[fieldNode.name].readonly = Domain.combine([activeFields[fieldNode.name].readonly, readonly], "|");
+            //     activeFields[fieldNode.name].required = Domain.combine([activeFields[fieldNode.name].required, required], "|");
+            //     activeFields[fieldNode.name].onChange = activeFields[fieldNode.name].onChange || onChange;
+            // } else {
+            //     activeFields[fieldNode.name] = { readonly, required, onChange };
+            // }
+        }
+        return {
+            arch,
+            activeActions,
+            activeFields,
+            autofocusFieldId,
+            disableAutofocus,
+            fieldNodes,
+            xmlDoc,
+            __rawArch: arch,
+        };
+    }
+}
diff --git a/addons/web/static/src/views/form/form_compiler.js b/addons/web/static/src/views/form/form_compiler.js
new file mode 100644
index 00000000000..214233d58b0
--- /dev/null
+++ b/addons/web/static/src/views/form/form_compiler.js
@@ -0,0 +1,519 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import {
+    append,
+    combineAttributes,
+    createElement,
+    createTextNode,
+    getTag,
+} from "@web/core/utils/xml";
+import { toStringExpression } from "@web/views/utils";
+import {
+    copyAttributes,
+    getModifier,
+    isAlwaysInvisible,
+    isComponentNode,
+    isTextNode,
+    makeSeparator,
+} from "@web/views/view_compiler";
+import { ViewCompiler } from "../view_compiler";
+
+const compilersRegistry = registry.category("form_compilers");
+
+function appendAttf(el, attr, string) {
+    const attrKey = `t-attf-${attr}`;
+    const attrVal = el.getAttribute(attrKey);
+    el.setAttribute(attrKey, appendToExpr(attrVal, string));
+}
+
+function appendToExpr(expr, string) {
+    const re = /{{.*}}/;
+    const oldString = re.exec(expr);
+    if (oldString) {
+        string = `${oldString} ${string}`;
+    }
+    return `{{${string} }}`;
+}
+
+/**
+ * @param {Record<string, any>} obj
+ * @returns {string}
+ */
+function objectToString(obj) {
+    return `{${Object.entries(obj)
+        .map((t) => t.join(":"))
+        .join(",")}}`;
+}
+
+export class FormCompiler extends ViewCompiler {
+    setup() {
+        this.encounteredFields = {};
+        /** @type {Record<string, Element[]>} */
+        this.labels = {};
+        this.compilers.push(
+            ...compilersRegistry.getAll(),
+            { selector: "div[name='button_box']", fn: this.compileButtonBox },
+            { selector: "form", fn: this.compileForm },
+            { selector: "group", fn: this.compileGroup },
+            { selector: "header", fn: this.compileHeader },
+            { selector: "label", fn: this.compileLabel },
+            { selector: "notebook", fn: this.compileNotebook },
+            { selector: "separator", fn: this.compileSeparator },
+            { selector: "sheet", fn: this.compileSheet }
+        );
+    }
+
+    compile() {
+        const compiled = super.compile(...arguments);
+        compiled.children[0].setAttribute("t-ref", "compiled_view_root");
+        return compiled;
+    }
+
+    createLabelFromField(fieldId, fieldName, fieldString, label, params) {
+        const props = {
+            id: `'${fieldId}'`,
+            fieldName: `'${fieldName}'`,
+            record: `props.record`,
+            fieldInfo: `props.archInfo.fieldNodes['${fieldId}']`,
+        };
+        let labelText = label.textContent || fieldString;
+        labelText = labelText
+            ? toStringExpression(labelText)
+            : `props.record.fields['${fieldName}'].string`;
+        return createElement("FormLabel", {
+            "t-props": objectToString(props),
+            string: labelText,
+        });
+    }
+
+    /**
+     * @param {string} fieldName
+     * @returns {Element[]}
+     */
+    getLabels(fieldName) {
+        const labels = this.labels[fieldName] || [];
+        this.labels[fieldName] = null;
+        return labels;
+    }
+
+    /**
+     * @param {string} fieldName
+     * @param {Element} label
+     */
+    pushLabel(fieldName, label) {
+        this.labels[fieldName] = this.labels[fieldName] || [];
+        this.labels[fieldName].push(label);
+    }
+
+    //-----------------------------------------------------------------------------
+    // Compilers
+    //-----------------------------------------------------------------------------
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileButtonBox(el, params) {
+        if (!el.childNodes.length) {
+            return this.compileGenericNode(el, params);
+        }
+
+        el.classList.remove("oe_button_box");
+        const buttonBox = createElement("ButtonBox");
+        let slotId = 0;
+
+        for (const child of el.children) {
+            const invisible = getModifier(child, "invisible");
+            if (isAlwaysInvisible(invisible, params)) {
+                continue;
+            }
+            const mainSlot = createElement("t", {
+                "t-set-slot": `slot_${slotId++}`,
+                isVisible:
+                    invisible !== false
+                        ? `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`
+                        : true,
+            });
+            append(mainSlot, this.compileNode(child, params, false));
+            append(buttonBox, mainSlot);
+        }
+
+        return buttonBox;
+    }
+
+    /**
+     * @override
+     */
+    compileField(el, params) {
+        const field = super.compileField(el, params);
+
+        const fieldName = el.getAttribute("name");
+        const fieldString = el.getAttribute("string");
+        const fieldId = el.getAttribute("field_id") || fieldName;
+        const labelsForAttr = el.getAttribute("id") || fieldId;
+        const labels = this.getLabels(labelsForAttr);
+        const dynamicLabel = (label) => {
+            const formLabel = this.createLabelFromField(
+                fieldId,
+                fieldName,
+                fieldString,
+                label,
+                params
+            );
+            label.replaceWith(formLabel);
+            return formLabel;
+        };
+        for (const label of labels) {
+            dynamicLabel(label);
+        }
+        this.encounteredFields[fieldName] = dynamicLabel;
+        return field;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileForm(el, params) {
+        const form = createElement("div", {
+            "t-att-class": "props.class",
+            "t-attf-class": `{{props.record.isInEdition ? 'o_form_editable' : 'o_form_readonly'}}`,
+        });
+        let hasSheet = false;
+        for (const child of el.childNodes) {
+            hasSheet = hasSheet || getTag(child, true) === "sheet";
+            append(form, this.compileNode(child, params));
+        }
+        if (!hasSheet) {
+            form.className = "o_form_nosheet";
+        }
+        return form;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileGroup(el, params) {
+        const isOuterGroup = [...el.children].some((c) => getTag(c, true) === "group");
+        const formGroup = createElement(isOuterGroup ? "OuterGroup" : "InnerGroup");
+
+        let slotId = 0;
+        let sequence = 0;
+
+        if (el.hasAttribute("col")) {
+            formGroup.setAttribute("maxCols", el.getAttribute("col"));
+        }
+
+        if (el.hasAttribute("string")) {
+            const titleSlot = createElement("t", { "t-set-slot": "title" }, [
+                makeSeparator(el.getAttribute("string")),
+            ]);
+            append(formGroup, titleSlot);
+        }
+
+        let forceNewline = false;
+        for (const child of el.children) {
+            if (getTag(child, true) === "newline") {
+                forceNewline = true;
+                continue;
+            }
+
+            const invisible = getModifier(child, "invisible");
+            if (isAlwaysInvisible(invisible, params)) {
+                continue;
+            }
+
+            const mainSlot = createElement("t", {
+                "t-set-slot": `item_${slotId++}`,
+                type: "'item'",
+                sequence: sequence++,
+                "t-slot-scope": "scope",
+            });
+            let itemSpan = parseInt(child.getAttribute("colspan") || "1", 10);
+
+            if (forceNewline) {
+                mainSlot.setAttribute("newline", true);
+                forceNewline = false;
+            }
+
+            let slotContent;
+            if (getTag(child, true) === "field") {
+                const addLabel = child.hasAttribute("nolabel")
+                    ? child.getAttribute("nolabel") !== "1"
+                    : true;
+                slotContent = this.compileNode(child, params, false);
+                if (addLabel && !isOuterGroup && !isTextNode(slotContent)) {
+                    itemSpan = itemSpan === 1 ? itemSpan + 1 : itemSpan;
+                    const fieldName = child.getAttribute("name");
+                    const fieldId = slotContent.getAttribute("id") || fieldName;
+                    const props = {
+                        id: `${fieldId}`,
+                        fieldName: `'${fieldName}'`,
+                        record: `props.record`,
+                        string: child.hasAttribute("string")
+                            ? toStringExpression(child.getAttribute("string"))
+                            : `props.record.fields.${fieldName}.string`,
+                        fieldInfo: `props.archInfo.fieldNodes[${fieldId}]`,
+                    };
+                    // note: remove this oe_read/edit_only logic when form view
+                    // will always be in edit mode
+                    if (child.classList.contains("oe_read_only")) {
+                        props.className = `'oe_read_only'`;
+                    } else if (child.classList.contains("oe_edit_only")) {
+                        props.className = `'oe_edit_only'`;
+                    }
+                    mainSlot.setAttribute("props", objectToString(props));
+                    mainSlot.setAttribute("Component", "constructor.components.FormLabel");
+                    mainSlot.setAttribute("subType", "'item_component'");
+                }
+            } else {
+                if (child.classList.contains("o_td_label") || getTag(child, true) === "label") {
+                    mainSlot.setAttribute("subType", "'label'");
+                    child.classList.remove("o_td_label");
+                }
+                slotContent = this.compileNode(child, params, false);
+            }
+
+            if (slotContent && !isTextNode(slotContent)) {
+                if (invisible !== false) {
+                    mainSlot.setAttribute(
+                        "isVisible",
+                        `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`
+                    );
+                }
+                if (itemSpan > 0) {
+                    mainSlot.setAttribute("itemSpan", `${itemSpan}`);
+                }
+
+                const groupClassExpr = `scope && scope.className`;
+                if (isComponentNode(slotContent)) {
+                    if (getTag(child, true) !== "button") {
+                        if (slotContent.hasAttribute("class")) {
+                            mainSlot.prepend(
+                                createElement("t", {
+                                    "t-set": "addClass",
+                                    "t-value": groupClassExpr,
+                                })
+                            );
+                            combineAttributes(
+                                slotContent,
+                                "class",
+                                `(addClass ? " " + addClass : "")`,
+                                `+`
+                            );
+                        } else {
+                            slotContent.setAttribute("class", groupClassExpr);
+                        }
+                    }
+                } else {
+                    appendAttf(slotContent, "class", `${groupClassExpr} || ""`);
+                }
+                append(mainSlot, slotContent);
+                append(formGroup, mainSlot);
+            }
+        }
+        return formGroup;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileHeader(el, params) {
+        const statusBar = createElement("div");
+        statusBar.className = "o_form_statusbar";
+        const buttons = [];
+        const others = [];
+        for (const child of el.childNodes) {
+            const compiled = this.compileNode(child, params);
+            if (!compiled || isTextNode(compiled)) {
+                continue;
+            }
+            if (getTag(child, true) === "button") {
+                buttons.push(compiled);
+            } else {
+                if (getTag(child, true) === "field") {
+                    compiled.setAttribute("showTooltip", true);
+                }
+                others.push(compiled);
+            }
+        }
+        if (buttons.length) {
+            const divButtons = createElement("div");
+            divButtons.className = "o_statusbar_buttons";
+            append(divButtons, buttons);
+            append(statusBar, divButtons);
+        }
+        append(statusBar, others);
+        return statusBar;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileLabel(el, params) {
+        const forAttr = el.getAttribute("for");
+        // A label can contain or not the labelable Element it is referring to.
+        // If it doesn't, there is no `for=`
+        // Otherwise, the targetted element is somewhere else among its nextChildren
+        if (forAttr) {
+            let label = createElement("label");
+            const string = el.getAttribute("string");
+            if (string) {
+                append(label, createTextNode(string));
+            }
+            if (this.encounteredFields[forAttr]) {
+                label = this.encounteredFields[forAttr](label);
+            } else {
+                this.pushLabel(forAttr, label);
+            }
+            return label;
+        }
+        return this.compileGenericNode(el, params);
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileNotebook(el, params) {
+        const noteBook = createElement("Notebook");
+        const pageAnchors = [...document.querySelectorAll("[href^=\\#]")]
+            .map((a) => CSS.escape(a.getAttribute("href").substring(1)))
+            .filter((a) => a.length);
+        const noteBookAnchors = {};
+
+        if (el.hasAttribute("class")) {
+            noteBook.setAttribute("className", `"${el.getAttribute("class")}"`);
+            el.removeAttribute("class");
+        }
+
+        for (const child of el.children) {
+            if (getTag(child, true) !== "page") {
+                continue;
+            }
+            const invisible = getModifier(child, "invisible");
+            if (isAlwaysInvisible(invisible, params)) {
+                continue;
+            }
+
+            const pageSlot = createElement("t");
+            append(noteBook, pageSlot);
+
+            if (el.hasAttribute("name")) {
+                noteBook.setAttribute("name", `"${el.getAttribute("name")}"`);
+                el.removeAttribute("name");
+            }
+
+            const pageId = `page_${this.id++}`;
+            const pageTitle = toStringExpression(
+                child.getAttribute("string") || child.getAttribute("name") || ""
+            );
+            const pageNodeName = toStringExpression(child.getAttribute("name") || "");
+
+            pageSlot.setAttribute("t-set-slot", pageId);
+            pageSlot.setAttribute("title", pageTitle);
+            pageSlot.setAttribute("name", pageNodeName);
+
+            if (child.getAttribute("autofocus") === "autofocus") {
+                noteBook.setAttribute("defaultPage", `"${pageId}"`);
+            }
+
+            for (const anchor of child.querySelectorAll("[href^=\\#]")) {
+                const anchorValue = CSS.escape(anchor.getAttribute("href").substring(1));
+                if (!anchorValue.length) continue;
+                pageAnchors.push(anchorValue);
+                noteBookAnchors[anchorValue] = {
+                    origin: `'${pageId}'`,
+                };
+            }
+
+            let isVisible;
+            if (invisible === false) {
+                isVisible = "true";
+            } else {
+                isVisible = `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`;
+            }
+            pageSlot.setAttribute("isVisible", isVisible);
+
+            for (const contents of child.children) {
+                append(pageSlot, this.compileNode(contents, params));
+            }
+        }
+
+        if (pageAnchors.length) {
+            // If anchors from the page are targetting an element
+            // present in the notebook, it must be aware of the
+            // page that contains the corresponding element
+            for (const anchor of pageAnchors) {
+                let pageId = 1;
+                for (const child of el.children) {
+                    if (child.querySelector(`#${anchor}`)) {
+                        noteBookAnchors[anchor].target = `'page_${pageId}'`;
+                        noteBookAnchors[anchor] = objectToString(noteBookAnchors[anchor]);
+                        break;
+                    }
+                    pageId++;
+                }
+            }
+            noteBook.setAttribute("anchors", objectToString(noteBookAnchors));
+        }
+
+        return noteBook;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileSeparator(el, params = {}) {
+        const separator = makeSeparator(el.getAttribute("string"));
+        copyAttributes(el, separator);
+        return this.applyInvisible(getModifier(el, "invisible"), separator, params);
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileSheet(el, params) {
+        const sheetBG = createElement("div");
+        sheetBG.className = "o_form_sheet_bg";
+
+        const sheetFG = createElement("div");
+        sheetFG.className = "o_form_sheet";
+
+        append(sheetBG, sheetFG);
+        for (const child of el.childNodes) {
+            const compiled = this.compileNode(child, params);
+            if (!compiled) {
+                continue;
+            }
+            if (getTag(child, true) === "field") {
+                compiled.setAttribute("showTooltip", true);
+            }
+            append(sheetFG, compiled);
+        }
+        return sheetBG;
+    }
+
+    /**
+     * @override
+     */
+    compileWidget(el) {
+        const widget = super.compileWidget(el);
+        widget.setAttribute("readonly", `!props.record.isInEdition`);
+        return widget;
+    }
+}
diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js
new file mode 100644
index 00000000000..b0bd6dfd696
--- /dev/null
+++ b/addons/web/static/src/views/form/form_controller.js
@@ -0,0 +1,436 @@
+/** @odoo-module **/
+
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { makeContext } from "@web/core/context";
+import { useDebugCategory } from "@web/core/debug/debug_context";
+import { localization } from "@web/core/l10n/localization";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { createElement } from "@web/core/utils/xml";
+import { ActionMenus } from "@web/search/action_menus/action_menus";
+import { Layout } from "@web/search/layout";
+import { usePager } from "@web/search/pager_hook";
+import { useModel } from "@web/views/model";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useSetupView } from "@web/views/view_hook";
+import { isX2Many } from "@web/views/utils";
+import { useViewButtons } from "@web/views/view_button/view_button_hook";
+
+const { Component, onWillStart, useEffect, useRef, onRendered, useState, toRaw } = owl;
+
+const viewRegistry = registry.category("views");
+
+export async function loadSubViews(
+    activeFields,
+    fields,
+    context,
+    resModel,
+    viewService,
+    userService,
+    isSmall
+) {
+    for (const fieldName in activeFields) {
+        const field = fields[fieldName];
+        if (!isX2Many(field)) {
+            continue; // what follows only concerns x2many fields
+        }
+        const fieldInfo = activeFields[fieldName];
+        if (fieldInfo.modifiers.invisible === true) {
+            continue; // no need to fetch the sub view if the field is always invisible
+        }
+
+        if (!fieldInfo.FieldComponent.useSubView) {
+            continue; // the FieldComponent used to render the field doesn't need a sub view
+        }
+
+        let viewType = fieldInfo.viewMode || "list,kanban";
+        viewType = viewType.replace("tree", "list");
+        if (viewType.includes(",")) {
+            viewType = isSmall ? "kanban" : "list";
+        }
+        fieldInfo.viewMode = viewType;
+        if (fieldInfo.views[viewType]) {
+            continue; // the sub view is inline in the main form view
+        }
+
+        // extract *_view_ref keys from field context, to fetch the adequate view
+        const fieldContext = {};
+        const regex = /'([a-z]*_view_ref)' *: *'(.*?)'/g;
+        let matches;
+        while ((matches = regex.exec(fieldInfo.context)) !== null) {
+            fieldContext[matches[1]] = matches[2];
+        }
+        // filter out *_view_ref keys from general context
+        const refinedContext = {};
+        for (const key in context) {
+            if (key.indexOf("_view_ref") === -1) {
+                refinedContext[key] = context[key];
+            }
+        }
+        // specify the main model to prevent access rights defined in the context
+        // (e.g. create: 0) to apply to sub views (same logic as the one applied by
+        // the server for inline views)
+        refinedContext.base_model_name = resModel;
+
+        const comodel = field.relation;
+        const { fields: comodelFields, relatedModels, views } = await viewService.loadViews({
+            resModel: comodel,
+            views: [[false, viewType]],
+            context: makeContext([fieldContext, userService.context, refinedContext]),
+        });
+        const { ArchParser } = viewRegistry.get(viewType);
+        const archInfo = new ArchParser().parse(views[viewType].arch, relatedModels, comodel);
+        fieldInfo.views[viewType] = { ...archInfo, fields: comodelFields };
+        fieldInfo.relatedFields = comodelFields;
+    }
+}
+
+// -----------------------------------------------------------------------------
+
+export class FormController extends Component {
+    setup() {
+        this.dialogService = useService("dialog");
+        this.router = useService("router");
+        this.user = useService("user");
+        this.viewService = useService("view");
+
+        this.archInfo = this.props.archInfo;
+        const activeFields = this.archInfo.activeFields;
+        let resId;
+        if ("resId" in this.props) {
+            resId = this.props.resId; // could be false, for "create" mode
+        } else {
+            resId = this.props.state ? this.props.state.resId : false;
+        }
+        this.beforeLoadResolver = null;
+        const beforeLoadProm = new Promise((r) => {
+            this.beforeLoadResolver = r;
+        });
+        this.model = useModel(this.props.Model, {
+            resModel: this.props.resModel,
+            resId,
+            resIds: this.props.resIds,
+            fields: this.props.fields,
+            activeFields,
+            viewMode: "form",
+            rootType: "record",
+            mode: this.props.mode,
+            beforeLoadProm,
+        });
+        const { create, edit } = this.archInfo.activeActions;
+
+        this.canCreate = create && !this.props.preventCreate;
+        this.canEdit = edit && !this.props.preventEdit;
+
+        this.cpButtonsRef = useRef("cpButtons");
+
+        useEffect(() => {
+            if (!this.env.inDialog) {
+                this.updateURL();
+            }
+        });
+
+        // enable the archive feature in Actions menu only if the active field is in the view
+        this.archiveEnabled =
+            "active" in activeFields
+                ? !activeFields.active.readonly
+                : "x_active" in activeFields
+                ? !activeFields.x_active.readonly
+                : false;
+
+        // select footers that are not in subviews and move them to another arch
+        // that will be moved to the dialog's footer (if we are in a dialog)
+        const footers = [...this.archInfo.xmlDoc.querySelectorAll("footer:not(field footer")];
+        if (footers.length) {
+            this.footerArchInfo = Object.assign({}, this.archInfo);
+            this.footerArchInfo.xmlDoc = createElement("t");
+            this.footerArchInfo.xmlDoc.append(...footers);
+            this.footerArchInfo.arch = this.footerArchInfo.xmlDoc.outerHTML;
+            this.archInfo.arch = this.archInfo.xmlDoc.outerHTML;
+        }
+
+        const beforeExecuteAction = (clickParams) => {
+            if (clickParams.special !== "cancel") {
+                return this.model.root.save({ stayInEdition: true });
+            }
+        };
+        const rootRef = useRef("root");
+        useViewButtons(this.model, rootRef, { beforeExecuteAction });
+        useSetupView({
+            rootRef,
+            beforeLeave: () => {
+                if (this.model.root.isDirty) {
+                    return this.model.root.save({ noReload: true, stayInEdition: true });
+                }
+            },
+            beforeUnload: () => this.beforeUnload(),
+            getLocalState: () => {
+                // TODO: export the whole model?
+                return {
+                    resId: this.model.root.resId,
+                    ...this.exportTranslateAlertState(),
+                };
+            },
+        });
+        useDebugCategory("form", { component: this });
+
+        usePager(() => {
+            if (!this.model.root.isVirtual) {
+                const resIds = this.model.root.resIds;
+                return {
+                    offset: resIds.indexOf(this.model.root.resId),
+                    limit: 1,
+                    total: resIds.length,
+                    onUpdate: async ({ offset }) => {
+                        if (this.model.root.isDirty) {
+                            await this.model.root.save({ stayInEdition: true });
+                        }
+                        this.model.load({ resId: resIds[offset] });
+                    },
+                };
+            }
+        });
+
+        onWillStart(async () => {
+            await loadSubViews(
+                this.archInfo.activeFields,
+                this.props.fields,
+                this.props.context,
+                this.props.resModel,
+                this.viewService,
+                this.user,
+                this.env.isSmall
+            );
+            this.beforeLoadResolver();
+        });
+
+        onRendered(() => {
+            this.env.config.setDisplayName(this.model.root.data.display_name || this.env._t("New"));
+        });
+
+        const { autofocusFieldId, disableAutofocus } = this.archInfo;
+        if (!disableAutofocus) {
+            useEffect(
+                (isInEdition) => {
+                    let elementToFocus;
+                    if (isInEdition) {
+                        elementToFocus =
+                            (autofocusFieldId &&
+                                rootRef.el.querySelector(`#${autofocusFieldId}`)) ||
+                            rootRef.el.querySelector(".o_content .o_field_widget input");
+                    } else {
+                        elementToFocus =
+                            rootRef.el.querySelector(".o_content button.btn-primary") ||
+                            rootRef.el.querySelector(".o_control_panel .o_form_button_edit");
+                    }
+                    if (elementToFocus) {
+                        elementToFocus.focus();
+                    }
+                },
+                () => [this.model.root.isInEdition]
+            );
+        }
+
+        this.setupTranslateAlert();
+    }
+
+    beforeUnload() {
+        return this.model.root.urgentSave();
+    }
+
+    updateURL() {
+        this.router.pushState({ id: this.model.root.resId || undefined });
+    }
+
+    getActionMenuItems() {
+        const otherActionItems = [];
+        if (this.archiveEnabled) {
+            if (this.model.root.isActive) {
+                otherActionItems.push({
+                    description: this.env._t("Archive"),
+                    callback: () => {
+                        const dialogProps = {
+                            body: this.env._t(
+                                "Are you sure that you want to archive all this record?"
+                            ),
+                            confirm: () => this.model.root.archive(),
+                            cancel: () => {},
+                        };
+                        this.dialogService.add(ConfirmationDialog, dialogProps);
+                    },
+                });
+            } else {
+                otherActionItems.push({
+                    description: this.env._t("Unarchive"),
+                    callback: () => this.model.root.unarchive(),
+                });
+            }
+        }
+        if (this.archInfo.activeActions.create && this.archInfo.activeActions.duplicate) {
+            otherActionItems.push({
+                description: this.env._t("Duplicate"),
+                callback: () => this.duplicateRecord(),
+            });
+        }
+        if (this.archInfo.activeActions.delete) {
+            otherActionItems.push({
+                description: this.env._t("Delete"),
+                callback: () => this.deleteRecord(),
+            });
+        }
+        return Object.assign({}, this.props.info.actionMenus, { other: otherActionItems });
+    }
+
+    async duplicateRecord() {
+        await this.model.root.duplicate();
+    }
+
+    async deleteRecord() {
+        const dialogProps = {
+            body: this.env._t("Are you sure you want to delete this record?"),
+            confirm: async () => {
+                await this.model.root.delete();
+                if (!this.model.root.resId) {
+                    this.env.config.historyBack();
+                }
+            },
+            cancel: () => {},
+        };
+        this.dialogService.add(ConfirmationDialog, dialogProps);
+    }
+
+    disableButtons() {
+        const btns = this.cpButtonsRef.el.querySelectorAll(".o_cp_buttons button");
+        for (const btn of btns) {
+            btn.setAttribute("disabled", "1");
+        }
+        return btns;
+    }
+    enableButtons(btns) {
+        for (const btn of btns) {
+            btn.removeAttribute("disabled");
+        }
+    }
+
+    async edit() {
+        await this.model.root.switchMode("edit");
+    }
+
+    async create() {
+        this.disableButtons();
+        await this.model.load({ resId: null });
+    }
+
+    async save(params = {}) {
+        const disabledButtons = this.disableButtons();
+
+        this.computeTranslateAlert();
+
+        if (this.props.saveRecord) {
+            await this.props.saveRecord(this.model.root, params);
+        } else {
+            await this.model.root.save();
+        }
+        this.enableButtons(disabledButtons);
+
+        this.showTranslateAlert();
+    }
+
+    async discard() {
+        if (this.props.discardRecord) {
+            this.props.discardRecord(this.model.root);
+            return;
+        }
+        await this.model.root.discard();
+        if (this.model.root.isVirtual) {
+            this.env.config.historyBack();
+        }
+    }
+
+    get shouldShowTranslateAlert() {
+        return localization.multiLang && this.model.root.dirtyTranslatableFields.length;
+    }
+
+    /**
+     * Before we save, we gather dirty translate fields data.
+     * It needs to be done before the save as nothing will be dirty after.
+     * It is why there is a compute part and a show part.
+     */
+    computeTranslateAlert() {
+        if (this.shouldShowTranslateAlert) {
+            this.translateAlertData[this.model.root.resId] = new Set([
+                ...(this.translateAlertData[this.model.root.resId] || []),
+                ...this.model.root.dirtyTranslatableFields,
+            ]);
+        }
+    }
+
+    /**
+     * After we saved, we show the previously computed data in the alert (if there is any).
+     * It needs to be done after the save because if we were in record creation, the resId
+     * changed from false to a number. So it first needs to update the computed data to the new id.
+     */
+    showTranslateAlert() {
+        if (this.translateAlertData[false]) {
+            this.translateAlertData[this.model.root.resId] = this.translateAlertData[false];
+            delete this.translateAlertData[false];
+        }
+        if (this.translateAlertData[this.model.root.resId]) {
+            this.showingTranslateAlert[this.model.root.resId] = true;
+        }
+    }
+
+    closeTranslateAlert() {
+        this.showingTranslateAlert[this.model.root.resId] = false;
+        this.translateAlertData[this.model.root.resId] = [];
+    }
+
+    /**
+     * The translation alert needs to live in the scope of the action.
+     * So some state may have been exported.
+     * Either get the state exported data, or define new empty values.
+     */
+    setupTranslateAlert() {
+        if (this.props.state) {
+            this.showingTranslateAlert = useState(this.props.state.showingTranslateAlert || {});
+            this.translateAlertData = useState(this.props.state.translateAlertData || {});
+        } else {
+            this.showingTranslateAlert = useState({});
+            this.translateAlertData = useState({});
+        }
+    }
+
+    /**
+     * The translation alert needs to live in the scope of the action.
+     * So some state has to be exported.
+     */
+    exportTranslateAlertState() {
+        return {
+            showingTranslateAlert: toRaw(this.showingTranslateAlert),
+            translateAlertData: toRaw(this.translateAlertData),
+        };
+    }
+}
+
+FormController.template = `web.FormView`;
+FormController.components = { ActionMenus, Layout };
+FormController.props = {
+    ...standardViewProps,
+    discardRecord: { type: Function, optional: true },
+    mode: {
+        optional: true,
+        validate: (m) => ["edit", "readonly"].includes(m),
+    },
+    saveRecord: { type: Function, optional: true },
+    Model: Function,
+    Renderer: Function,
+    Compiler: Function,
+    archInfo: Object,
+    buttonTemplate: String,
+    preventCreate: { type: Boolean, optional: true },
+    preventEdit: { type: Boolean, optional: true },
+};
+FormController.defaultProps = {
+    preventCreate: false,
+    preventEdit: false,
+};
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
new file mode 100644
index 00000000000..23ff110a490
--- /dev/null
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -0,0 +1,1074 @@
+// Define left and right padding according to screen resolution
+@mixin o-form-sheet-inner-left-padding {
+    padding-left: $o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        padding-left: $o-horizontal-padding*2;
+    }
+}
+@mixin o-form-nosheet-inner-left-padding {
+    padding-left: $o-horizontal-padding;
+}
+@mixin o-form-sheet-inner-right-padding {
+    padding-right: $o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        padding-right: $o-horizontal-padding*2;
+    }
+}
+// Compensate margins
+@mixin o-form-sheet-negative-margin {
+    margin-left: -$o-horizontal-padding;
+    margin-right: -$o-horizontal-padding;
+    @include media-breakpoint-between(lg, xl, $o-extra-grid-breakpoints) {
+        margin-left: -$o-horizontal-padding*2;
+        margin-right: -$o-horizontal-padding*2;
+    }
+}
+@mixin o-form-nosheet-negative-margin {
+    margin-left: -$o-horizontal-padding;
+    margin-right: -$o-horizontal-padding;
+}
+
+@mixin o-td-label-style {
+    width: 0%;
+    padding: 0 15px 0 0;
+    min-width: 150px;
+    color: $headings-color;
+}
+$o-form-label-margin-right: 0px;
+
+.o_wowl_form_view {
+    background-color: $o-view-background-color;
+
+    // Utility classes
+    .oe_form_box_info {
+        @include o-webclient-padding($top: 5px, $bottom: 5px);
+        > p {
+            margin: auto;
+        }
+    }
+    .oe_text_center {
+        text-align: center;
+    }
+    .oe_grey {
+        opacity: 0.5;
+    }
+    .oe_inline {
+        width: auto!important;
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
+            &.o_inner_group {
+                width: 1px!important;
+            }
+        }
+    }
+    .oe_left {
+        @extend .oe_inline;
+        float: left!important;
+    }
+    .oe_right {
+        @extend .oe_inline;
+        float: right!important;
+    }
+
+    .o_field_empty:empty {
+        min-height: $font-size-base * $line-height-base;
+    }
+
+    .o_row {
+        &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
+            display: flex;
+            width: auto!important;
+        }
+
+        align-items: baseline;
+        min-width: 50px;
+        margin: 0 (-$o-form-spacing-unit/2);
+
+        > div, > span, > button, > label, > a, > input, > select { // > * did not add a level of priority to the rule
+            flex: 0 0 auto;
+            width: auto!important;
+            margin-right: $o-form-spacing-unit/2;
+            margin-left: $o-form-spacing-unit/2;
+        }
+
+        > .o_row {
+            margin: 0;
+        }
+        > .btn {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+        > .o_field_boolean {
+            align-self: center;
+        }
+    }
+
+    .o_row > div > .o_field_widget {
+        width: 100%;
+    }
+
+    // Readonly specific rules
+    .o_form_readonly {
+        .oe_edit_only {
+            display: none!important;
+        }
+
+        .o_row:not(.o_row_readonly) {
+            &, & > div {
+                display: inline-block;
+            }
+        }
+
+        .o_quick_editable:not(.o_form_uri), .o_field_color_picker_preview > li > a {
+            cursor: default;
+        }
+    }
+
+    .o_form_uri {
+        display: inline-block;
+        color: $link-color;
+        &:hover {
+            color: darken($link-color, 15%);
+        }
+        > span {
+            color: $o-main-text-color;
+            &:hover {
+                color: $o-main-text-color;
+            }
+        }
+        > span:first-child {
+            color: $link-color;
+            &:hover {
+                color: darken($link-color, 15%);
+            }
+        }
+    }
+
+    // Editable specific rules
+    .o_form_editable {
+        .oe_read_only {
+            display: none!important;
+        }
+
+        .oe_title {
+            max-width: map-get($container-max-widths, md) - (2 * $o-horizontal-padding);
+        }
+
+        .o_field_x2many .o_list_table .o_handle_cell .o_row_handle {
+            padding: 0.3rem;
+        }
+
+        .o_row {
+            > .o_field_widget, > div {
+                flex: 1 1 auto;
+                width: 0!important; // 3rd flex argument does not work with input (must be auto and real width 0)
+
+                &.o_field_boolean, &.o_priority {
+                    flex: 0 0 auto;
+                    width: auto!important;
+                }
+            }
+            &.o_field_many2one_selection {
+                width: 100% !important;
+            }
+        }
+    }
+
+    // No sheet
+    .o_form_nosheet {
+        display: block;
+        @include o-webclient-padding($top: $o-sheet-vpadding, $bottom: $o-sheet-vpadding);
+
+        .o_form_statusbar {
+            margin: (-$o-sheet-vpadding) (-$o-horizontal-padding) $o-sheet-vpadding (-$o-horizontal-padding);
+        }
+        .oe_button_box {
+            @include o-form-nosheet-negative-margin;
+        }
+    }
+
+    // Non-chatter rules
+    .o_form_sheet_bg {
+        position: relative;
+    }
+
+    // Statusbar
+    .o_form_statusbar {
+        position: relative; // Needed for the "More" dropdown
+        display: flex;
+        justify-content: space-between;
+        padding-left: $o-horizontal-padding;
+        border-bottom: 1px solid $border-color;
+        background-color: $o-view-background-color;
+
+        > .o_statusbar_buttons, > .o_statusbar_status {
+            display: flex;
+            align-items: center;
+            align-content: space-around;
+        }
+
+        > .o_field_widget {
+            align-self: center;
+            margin-bottom: 0px;
+        }
+
+        > .o_statusbar_buttons {
+            flex-flow: row wrap;
+
+            > .btn {
+                $o-statusbar-buttons-vmargin: 4px;
+                min-height: $o-statusbar-height - 2 * $o-statusbar-buttons-vmargin;
+                margin: $o-statusbar-buttons-vmargin 3px $o-statusbar-buttons-vmargin 0;
+                padding-top: 2px;
+                padding-bottom: 2px;
+
+                > .o_button_icon {
+                    margin-right: $o-statbutton-spacing;
+                }
+            }
+        }
+
+        > .o_statusbar_status {
+            margin-left: auto;
+            flex-flow: row-reverse wrap-reverse;
+            align-self: stretch;
+            align-items: stretch;
+
+            > .o_arrow_button {
+                min-height: $o-statusbar-height;
+                position: relative;
+                padding-left: $o-statusbar-arrow-width*2;
+                border-width: 0;
+                font-size: $font-size-sm;
+
+                &:first-child {
+                    padding-right: $o-horizontal-padding; // Compensate container padding
+                    overflow-x: hidden; // to prevent horizontal scroll due to last arrow
+                }
+                &:last-child {
+                    padding-left: $o-horizontal-padding - 1;
+
+                    &:not(.disabled) {
+                        border-left: 1px solid $border-color;
+                    }
+                }
+
+                &:not(:first-child):before, &:not(:first-child):after {
+                    content: " ";
+                    display: block;
+                    @include o-position-absolute(0, -$o-statusbar-arrow-width + 1);
+
+                    border-top: floor($o-statusbar-height/2) solid transparent;
+                    border-bottom: ceil($o-statusbar-height/2) solid transparent;
+                    border-right: none;
+                    border-left: $o-statusbar-arrow-width solid $o-view-background-color;
+                    -moz-transform: scale(0.9999); // Smooth the triangle on firefox
+                }
+
+                &:not(:first-child):before {
+                    right: -$o-statusbar-arrow-width;
+                    border-left-color: gray('300');
+                }
+
+                &.disabled {
+                    opacity: 1;
+                    pointer-events: none;
+                    cursor: default;
+
+                    &:not(.btn-primary) {
+                        @include plain-hover-focus() {
+                            color: $text-muted;
+                        }
+                    }
+                }
+
+                &.btn-primary.disabled {
+                    background-color: $o-brand-odoo;
+                    color: color-yiq($o-brand-odoo);
+
+                    &:after, &:before {
+                        border-left-color: $o-brand-odoo;
+                    }
+
+                    + .o_arrow_button:before {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        // Touch device mode
+        > .o_statusbar_buttons > .btn-group, > .o_statusbar_status {
+            > .dropdown-toggle {
+                &:after {
+                    @include o-caret-down;
+                    margin-left: $o-form-spacing-unit;
+                }
+            }
+
+            > .dropdown-menu {
+                min-width: 0;
+
+                .dropdown-item.btn {
+                    min-width: 100%;
+                    margin-bottom: 3px;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    // Button box
+    .oe_button_box {
+        position: relative;
+        display: block;
+        margin-bottom: $o-sheet-vpadding;
+        margin-top: -$o-sheet-vpadding;
+        @include o-form-sheet-negative-margin;
+        text-align: right;
+        // Use box-shadow instead of border-bottom because some button boxes are
+        // empty in some cases and we do not want to see a floating border in
+        // that cases.
+        box-shadow: inset 0 -1px 0 $border-color;
+
+        .oe_stat_button, .o_dropdown_more {
+            border: 0 solid $border-color;
+        }
+
+        &.o_full .oe_stat_button:not(.o_invisible_modifier) ~ .oe_stat_button,
+        &.o_not_full .oe_stat_button {
+            border-left-width: $border-width;
+        }
+
+        > .btn.oe_stat_button, > .o_dropdown_more {
+            flex: 0 0 auto;
+            width: percentage(1/3); // Adapt the number of visible buttons for each screen width
+            @include media-breakpoint-up(md) {
+                width: percentage(1/5);
+            }
+            @include media-breakpoint-up(lg) {
+                width: percentage(1/7);
+            }
+            @include media-breakpoint-up(xl) {
+                width: percentage(1/8);
+            }
+        }
+
+        .btn.oe_stat_button {
+            color: $o-main-text-color;
+            height: $o-statbutton-height;
+            // Use !important to avoid touch_device style
+            padding: 0 $o-statbutton-spacing 0 0 !important; // padding-left will be achieved through margin-left of content
+            text-align: left;
+            white-space: nowrap;
+            background-color: transparent;
+            opacity: 0.8;
+            border-radius: 0px;
+            margin-bottom: 0; // If the button comes from a field
+
+            &:hover, &:focus {
+                background-color: rgba(black, 0.03);
+                color: inherit;
+                opacity: 1;
+            }
+
+            > .o_button_icon {
+                margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+                display: inline-block;
+                vertical-align: middle;
+                line-height: $o-statbutton-height;
+                width: 30%;
+
+                &:before {
+                    font-size: 22px;
+                    vertical-align: middle;
+                }
+            }
+
+            > .o_field_percent_pie {
+                margin-left: $o-statbutton-spacing; // To create the button padding left (firefox bug)
+            }
+
+            // Some buttons only display text without using StatInfo template
+            > span {
+                @include o-text-overflow(block);
+                white-space: normal; // text on several lines if needed
+            }
+
+            > .o_stat_info, > span { // contains the value and text
+                display: inline-block;
+                vertical-align: middle;
+                font-weight: $font-weight-normal;
+
+                max-width: 70%;
+                padding-right: $o-statbutton-spacing;
+                line-height: 1.3;
+
+                > .o_stat_value, > .o_stat_text {
+                    @include o-text-overflow(block);
+                    line-height: 1.2;
+                }
+
+                .o_stat_value {
+                    font-weight: $font-weight-bold;
+                    color: $o-brand-odoo;
+                }
+
+                .o_stat_text .o_field_empty {
+                    display: none;
+                }
+            }
+
+            &:not(:disabled) {
+                > .o_stat_info .o_field_widget, > span .o_field_widget {
+                    cursor: pointer;
+                }
+            }
+
+            &:not(:hover) .o_stat_info > .o_hover {
+                display: none !important;
+            }
+            &:hover .o_stat_info > .o_not_hover {
+                display: none !important
+            }
+
+            &.o_button_more {
+                text-align: center;
+                &:after {
+                    margin-left: 5px;
+                    @include o-caret-down;
+                }
+                &[aria-expanded="true"]:after {
+                    margin-left: 5px;
+                    @include o-caret-up;
+                }
+            }
+        }
+
+        > .o_dropdown_more {
+            @include o-position-absolute(100%, 0);
+            min-width: 0;
+            border-width: 0 $border-width;
+            box-sizing: content-box;
+            margin: 0;
+            padding: 0;
+            @include media-breakpoint-down(sm) {
+                // avoid b4 drowdown inline style
+                position: relative !important;
+                transform: none !important;
+                will-change: inherit!important;
+                margin-bottom: 20px;
+                width: 100%;
+                border-width: 0px;
+            }
+            > .btn.oe_stat_button {
+                width: 100%;
+                // Override stronger ':not(.o_invisible_modifier) ~' rule
+                border-width: 0 0 $border-width!important;
+
+                @include media-breakpoint-down(sm) {
+                    display: inline-block;
+                    width: percentage(1/3);
+                }
+            }
+        }
+    }
+
+    // Title
+    .oe_title {
+        > h1, > h2, > h3 {
+            width: 100%; // Needed because inline-block when is a hx.o_row
+            margin-top: 0;
+            margin-bottom: 0;
+            line-height: $headings-line-height;
+
+            &.d-flex > .o_input {
+                height: max-content;
+            }
+        }
+        .o_priority > .o_priority_star {
+            font-size: inherit;
+        }
+        > h1 {
+            min-height: 55px;
+        }
+        > h2 {
+            min-height: 43px;
+        }
+    }
+
+    // Avatar
+    .oe_avatar {
+        float: right;
+        margin-bottom: 10px;
+
+        > img {
+            max-width: $o-avatar-size;
+            max-height: $o-avatar-size;
+            vertical-align: top;
+            border: 1px solid $o-gray-300;
+        }
+    }
+
+    // Status dropdown
+    a[data-toggle="dropdown"] > .o_status {
+        height: $h3-font-size;
+        width: $h3-font-size;
+    }
+
+    // Groups
+    .o_group {
+        display: inline-block;
+        width: 100%;
+        margin: 10px 0;
+
+        .o_group {
+            margin: 0;
+        }
+
+        // o_group contains nested groups
+        @for $i from 1 through $o-form-group-cols {
+            .o_group_col_#{$i} {
+                display: inline-block;
+                width: floor(100% / 12 * $i);
+                vertical-align: top;
+            }
+        }
+
+        &.o_inner_group {
+            display: inline-table;
+
+            > tbody > tr > td {
+                &.o_td_label {
+                    @include o-td-label-style;
+                }
+                vertical-align: top;
+
+                span, .o_field_boolean, .oe_avatar, .o_form_uri {
+                    &.o_field_widget {
+                        width: auto;
+                    }
+                }
+            }
+
+            .o_field_widget {
+                &.o_field_many2one_avatar {
+                    .o_field_many2one_selection {
+                        width: calc(100% - 24px);
+                    }
+                }
+            }
+        }
+
+        .o_form_label {
+            font-weight: $font-weight-normal;
+        }
+
+        .o_field_widget {
+            width: 100%;
+
+            > .btn {
+                flex: 0 0 auto;
+                padding: 0 10px;
+            }
+        }
+
+        @include media-breakpoint-up(sm) {
+            :not(.o_row):not(.o_data_cell) > .o_field_widget,
+            .o_row > .o_field_widget:last-child { // Note: this does not take care
+                                                // of an invisible last-child but
+                                                // it does not really matter
+                // Makes extra buttons (e.g. m2o external button) overflow on the
+                // right padding of the parent element
+                .o_input_dropdown {
+                    flex: 1 0 auto;
+                }
+            }
+        }
+
+        &.o_label_nowrap .o_form_label {
+            white-space: nowrap;
+        }
+
+        .o_td_label .o_form_label {
+            font-weight: $font-weight-bold;
+            margin-right: $o-form-label-margin-right;
+        }
+    }
+
+    .o_checkbox_optional_field {
+        display: flex;
+
+        @include media-breakpoint-down(sm) {
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+
+        > .o_form_label {
+            @include o-td-label-style;
+            margin-right: $o-form-label-margin-right;
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    // Separators
+    .o_horizontal_separator {
+        font-size: $font-size-sm;
+        font-weight: $font-weight-bold;
+        margin: 1.2em ($grid-gutter-width * .5) .8em 0;
+
+        &:not(:empty) {
+            box-shadow: 0 1px 0 rgba($body-color, .05);
+        }
+
+        &:empty {
+            height: $o-form-spacing-unit * 2;
+        }
+    }
+
+    // Notebooks
+    .o_notebook {
+        clear: both; // For the notebook not to have alongside floating elements
+        margin-top: $o-form-spacing-unit * 2;
+
+        .tab-content > .tab-pane {
+            padding: $o-horizontal-padding 0;
+        }
+    }
+
+    // Labels
+    .o_form_label {
+        margin: 0 $o-form-spacing-unit 0 0;
+        color: $headings-color;
+        font-size: $font-size-base; // The label muse have the same size whatever their position
+        line-height: $line-height-base;
+        font-weight: $font-weight-bold;
+    }
+
+    // Form fields
+    .o_field_widget {
+        margin-bottom: $o-form-spacing-unit;
+    }
+    .o_field_widget, .btn {
+        .o_field_widget {
+            margin-bottom: 0px;
+        }
+    }
+    .o_td_label .o_form_label:not(.o_status), .o_checkbox_optional_field > .o_form_label {
+        min-height: 33px;
+    }
+    td:not(.o_field_cell) .o_form_uri > span:first-child {
+        display: inline-block;
+        padding: 1px 0;
+        margin-bottom: 1px;
+    }
+
+    // Translate icon
+    span.o_field_translate {
+            padding: 0 $o-form-spacing-unit 0 0 !important;
+            vertical-align: top;
+            position: relative;
+            margin-left: -35px;
+            width: 35px !important; // important is usefull for textarea
+            display: inline-block;
+            text-align: right;
+            border: none;  // usefull for textarea
+    }
+    input, textarea {
+        &.o_field_translate {
+            padding-right: 25px;
+        }
+    }
+    iframe.wysiwyg_iframe + .o_field_translate {
+        right: 30px !important;
+        top: 7px !important;
+    }
+
+    // Text field with oe_inline class
+    .o_field_text.oe_inline {
+        width: 100%!important;
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
+            width: 45%!important;
+        }
+    }
+
+    // One2Many, Many2Many outside of group
+    .o_field_widget {
+        &.o_field_one2many, &.o_field_many2many {
+            width: 100%;
+            > div {
+                width: 100%;
+            }
+        }
+    }
+
+    // Specific style classes
+    .o_group.o_inner_group.oe_subtotal_footer {
+        @extend .oe_right;
+
+        > tbody > tr > td {
+            padding: 0;
+
+            &.o_td_label {
+                text-align: right;
+            }
+
+            .o_form_label {
+                padding-right: 20px;
+
+                min-width: 0;
+                white-space: nowrap;
+                &:after {
+                    content: ":";
+                }
+            }
+
+            .o_field_widget {
+                text-align: right;
+                justify-content: flex-end;
+                width: 100%;
+            }
+        }
+
+        > tbody > tr:first-child > td {
+            padding-top: 4px;
+        }
+
+        .oe_subtotal_footer_separator {
+            width: 100%;
+            text-align: right;
+            border-top: 1px solid gray('300');
+            font-weight: $font-weight-bold;
+            font-size: 1.3em;
+        }
+    }
+
+    .o_address_format {
+        width: 100%;
+        .o_address_street, .o_address_country {
+            display: flex;
+        }
+
+        .o_address_city {
+            margin-right: 2%;
+        }
+        .o_address_state {
+            margin-right: 2%;
+        }
+        &.o_zip_city {
+            .o_address_zip {
+                margin-right: 2%;
+            }
+            .o_address_city {
+                margin-right: 0;
+            }
+            .o_address_state {
+                display: block;
+                margin-right: 0;
+            }
+        }
+        &.o_city_state {
+            .o_address_state {
+                margin-right: 0;
+            }
+            .o_address_zip {
+                display: block;
+                margin-right: 0;
+            }
+        }
+        > span.o_field_widget {
+            width: auto;
+        }
+    }
+    &.o_form_editable .o_address_format {
+        .o_address_city {
+            width: 38%;
+        }
+        div.o_address_state {
+            width: 33%;
+        }
+        input.o_address_zip {
+            width: 25%;
+        }
+        &.o_zip_city {
+            .o_address_zip {
+                width: 38%;
+            }
+            .o_address_city {
+                width: 60%;
+            }
+            .o_address_state {
+                width: 100%;
+            }
+        }
+        &.o_city_state {
+            .o_address_city {
+                width: 50%;
+            }
+            .o_address_state {
+                width: 48%;
+            }
+            .o_address_zip {
+                width: 100%;
+            }
+        }
+    }
+
+    // Boolean
+    .o_field_boolean {
+        margin-right: $o-form-spacing-unit;
+    }
+
+    // Timezone widget warning
+    .o_tz_warning {
+        cursor: help;
+        position: absolute;
+        margin-left: 10px;
+        margin-top: 5px;
+    }
+
+    // for weekly recurrent
+    .o_recurrent_weekdays {
+        > table {
+            width: 100%;
+            table-layout: fixed;
+            display: table;
+            td {
+                border: 1px solid #dee2e6;
+            }
+            th, td {
+                padding: 0.75rem 0 0.75rem 0;
+            }
+            .o_recurrent_weekday_label {
+                @include o-text-overflow;
+            }
+            .custom-control-label {
+                left: 25%;
+            }
+        }
+    }
+
+    // One2Many Kanban views
+    .o_field_widget .o_kanban_view.o_kanban_ungrouped {
+        padding: 0;
+        .o_kanban_record {
+            box-shadow: none;
+        }
+    }
+
+    // One2Many List views
+    .o_field_widget .o_list_renderer {
+        margin-bottom: 10px;
+
+        > tfoot > tr > td {
+            padding: 3px;
+            color: $o-main-text-color;
+        }
+    }
+    .o_form_readonly .o_field_widget .o_list_renderer .o_row_handle {
+        display: none;  // Hide the handler in non-edit mode
+    }
+    .o_field_widget.o_readonly_modifier .o_list_renderer .o_row_handle {
+        display: none;  // Hide the handler on readonly fields
+    }
+
+    &.oe_form_configuration {
+        .o_group .o_form_label {
+            white-space: nowrap;
+        }
+        h2 {
+            margin-top: 32px !important;
+        }
+    }
+    &.o_company_document_layout {
+        .report_layout_container {
+            display: inline-block;
+            div {
+                display: inline-block;
+                img {
+                    margin-left: 0 !important;
+                }
+            }
+        }
+        img[name="logo"] {
+            max-height: 100px;
+            max-width: 300px;
+        }
+    }
+}
+
+// Overridden style when form view in modal
+.modal .modal-dialog {
+    .o_wowl_form_view {
+        .o_statusbar_buttons > .btn {
+            /**
+             * Override to prevent the status bar from increasing height when
+             * inside dialog due to the original margin on those buttons. This
+             * prevents the other status buttons, those on the far right of the
+             * bar, from having a gap between their bottom and the bottom border
+             * of the status bar itself.
+             */
+            margin-top: 2px;
+            margin-bottom: 2px;
+        }
+
+        .o_form_sheet_bg {
+            padding: 0;
+
+            > .o_form_statusbar, > .alert {
+                /**
+                 * Override to prevent the status bar from overflowing on its
+                 * far right. The original value is a negative margin that
+                 * is supposed to compensate unwanted padding of the original
+                 * view but the view inside dialog already has this padding
+                 * removed.
+                 */
+                margin-left: 0;
+                margin-right: 0;
+            }
+
+            > .o_form_sheet {
+                box-shadow: none;
+                width: 100%;
+                margin: 0 auto;
+                max-width: none;
+                /**
+                 * Override to prevent double border, because the borders of the
+                 * dialog itself or the borders of other surrounding elements
+                 * (status bar, dialog footer) already act as a border for the
+                 * sheet when inside dialog.
+                 */
+                border: none;
+            }
+        }
+    }
+    &:not(.modal-lg) .o_wowl_form_view {
+        .o_group {
+            width: 100%;
+        }
+    }
+    .o_onboarding_payment_acquirer_wizard {
+        a[type="action"] {
+            color: $link-color;
+            cursor: pointer;
+        }
+    }
+}
+
+@media print {
+    .oe_button_box, .o_form_statusbar {
+        display: none !important;
+    }
+}
+
+// Buttons in ControlPanel
+.o_control_panel .o_form_buttons_view > button:first-child {
+    float: left; // Unfortunately needed for the bounce effect
+    margin-right: 4px;
+}
+
+
+// XXS form view specific rules
+@mixin form-break-table {
+    display: block;
+    margin-bottom: $o-form-spacing-unit * 4;
+
+    > tbody {
+        display: block;
+
+        > tr {
+            display: flex;
+            flex-flow: row wrap;
+
+            > td {
+                flex: 1 0 auto;
+                display: block;
+                max-width: 100%;
+                padding: 0;
+
+                width: auto!important;  // !important is required to override the width computed in JS
+                &.o_td_label {
+                    width: 94%!important; // The label must be on its own line except if the form field is small enough (checkbox)
+                    line-height: $o-label-font-size-factor;
+                }
+
+                .o_field_widget {
+                    margin-bottom: $o-form-spacing-unit * 2;
+
+                    > .o_field_widget {
+                        margin-bottom: 0;
+                    }
+
+                    &.o_field_boolean {
+                        margin-right: 0;
+                    }
+                }
+
+                .o_input_dropdown {
+                    width: auto;
+                    max-width: 100%;
+                }
+            }
+        }
+    }
+}
+.o_wowl_form_view.o_xxs_form_view {
+    .oe_title {
+        word-break: break-all;
+    }
+    .o_group {
+        &.o_inner_group {
+            @include form-break-table;
+        }
+    }
+}
+
+// Settings form views
+.o_settings_container {
+    display: flex;
+    flex: 0 1 auto;
+    flex-flow: row wrap;
+    padding: 0;
+    margin: auto 0 auto 0;
+
+    .o_form_label.o_light_label, .o_light_label .o_form_label {
+        font-weight: $font-weight-normal;
+    }
+    .o_setting_box:visible:nth-child(odd) {
+        clear: left;
+    }
+    .o_setting_box {
+        margin-bottom: 8px;
+        margin-top: 8px;
+        .o_setting_left_pane {
+            width: 24px;
+            float: left;
+            .o_enterprise_label {
+                position: absolute;
+                top: 0px;
+                right: 40px;
+            }
+        }
+        .o_setting_right_pane {
+            margin-left: 24px;
+            border-left: 1px solid $border-color;
+            padding-left: 12px;
+            .o_input_dropdown > .o_input {
+                width: 100%;
+            }
+            .o_field_widget {
+                width: 50%;
+                flex: 0 0 auto;
+
+                &.o_field_many2manytags > .o_field_widget {
+                    flex: 1 0 50px;
+                }
+            }
+            button.btn-link:first-child {
+                padding: 0;
+            }
+            a.oe-link {
+                font-size: 12px;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/form/form_controller.xml b/addons/web/static/src/views/form/form_controller.xml
new file mode 100644
index 00000000000..755d8ab81b1
--- /dev/null
+++ b/addons/web/static/src/views/form/form_controller.xml
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FormView" owl="1">
+        <div t-att-class="props.className" t-ref="root">
+            <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
+                <t t-if="showingTranslateAlert[model.root.resId]" t-call="web.TranslateAlert" />
+                <t t-set-slot="layout-buttons">
+                    <t t-if="footerArchInfo and env.inDialog">
+                        <t t-component="props.Renderer" record="model.root" Compiler="props.Compiler" archInfo="footerArchInfo"/>
+                    </t>
+                    <t t-else="">
+                        <t t-call="{{ props.buttonTemplate }}"/>
+                    </t>
+                </t>
+                <t t-set-slot="control-panel-bottom-left">
+                    <t t-if="props.info.actionMenus and !model.root.isVirtual">
+                        <ActionMenus
+                            activeIds="[model.root.resId]"
+                            context="props.context"
+                            items="getActionMenuItems()"
+                            isDomainSelected="model.root.isDomainSelected"
+                            resModel="model.root.resModel"
+                            domain="props.domain"
+                        />
+                    </t>
+                </t>
+                <t t-set-slot="control-panel-bottom-right"> </t>
+                <t t-component="props.Renderer" record="model.root" Compiler="props.Compiler" archInfo="archInfo"/>
+            </Layout>
+        </div>
+    </t>
+
+    <t t-name="web.FormView.Buttons" owl="1">
+        <div class="o_cp_buttons" role="toolbar" aria-label="Main actions" t-ref="cpButtons">
+            <div t-if="model.root.isInEdition" class="o_form_buttons_edit">
+                <button type="button" class="btn btn-primary o_form_button_save" data-tooltip="Save record" data-hotkey="s" t-on-click.stop="() => this.save()">
+                    Save
+                </button>
+                <button type="button" class="btn btn-secondary o_form_button_cancel" data-tooltip="Discard changes" data-hotkey="j" t-on-click.stop="discard">
+                    Discard
+                </button>
+            </div>
+            <div t-else="canEdit or canCreate" class="o_form_buttons_view">
+                <button t-if="canEdit" type="button" class="btn btn-primary o_form_button_edit" data-tooltip="Edit record" data-hotkey="a" data-bounce-button="" t-on-click.stop="edit">
+                    Edit
+                </button>
+                <button t-if="canCreate" type="button" class="btn btn-secondary o_form_button_create" data-tooltip="Create record" data-hotkey="c" t-on-click.stop="create">
+                    Create
+                </button>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="web.TranslateAlert" owl="1">
+        <div class="alert alert-info alert-dismissible" role="alertdialog">
+            Please update translations of :
+            <t t-foreach="Array.from(this.translateAlertData[this.model.root.resId])" t-as="field" t-key="field.name">
+                <strong><a class="o_field_translate" t-att-name="field.name" href="#"><t t-esc="field.string"/><t t-if="!field_last">, </t></a></strong>
+            </t>
+            <button t-on-click="() => this.closeTranslateAlert()" type="button" class="close" aria-label="Close">
+                <span class="fa fa-times"></span>
+            </button>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/form/form_group/form_group.js b/addons/web/static/src/views/form/form_group/form_group.js
new file mode 100644
index 00000000000..b7c783dceb2
--- /dev/null
+++ b/addons/web/static/src/views/form/form_group/form_group.js
@@ -0,0 +1,93 @@
+/** @odoo-module */
+import { sortBy } from "@web/core/utils/arrays";
+
+class Group extends owl.Component {
+    getItems() {
+        const items = Object.entries(this.props.slots).filter(([k, v]) => v.type === "item");
+        return sortBy(items, (i) => i[1].sequence);
+    }
+
+    get allClasses() {
+        return this.props.class;
+    }
+}
+Group.props = ["class?", "slots?", "maxCols?", "style?"];
+Group.defaultProps = {
+    maxCols: 2,
+};
+
+export class OuterGroup extends Group {
+    getItems() {
+        const nbCols = this.props.maxCols;
+        const colSize = Math.max(1, Math.round(12 / nbCols));
+
+        // Dispatch items across table rows
+        const items = super.getItems().filter(([k, v]) => !("isVisible" in v) || v.isVisible);
+        return items.map((item) => {
+            const [slotName, slot] = item;
+            const itemSpan = slot.itemSpan || 1;
+            return { name: slotName, size: itemSpan * colSize, newline: slot.newline };
+        });
+    }
+}
+OuterGroup.template = "web.Form.OuterGroup";
+
+export class InnerGroup extends Group {
+    getRows() {
+        const maxCols = this.props.maxCols;
+
+        const rows = [];
+        let currentRow = [];
+        let reservedSpace = 0;
+
+        // Dispatch items across table rows
+        const items = this.getItems();
+        while (items.length) {
+            const [slotName, slot] = items.shift();
+            const { newline, itemSpan, subType, Component, props } = slot;
+            if (newline) {
+                rows.push(currentRow);
+                currentRow = [];
+                reservedSpace = 0;
+            }
+
+            const fullItemSpan = itemSpan || 1;
+
+            if (fullItemSpan + reservedSpace > maxCols) {
+                rows.push(currentRow);
+                currentRow = [];
+                reservedSpace = 0;
+            }
+
+            const isVisible = !("isVisible" in slot) || slot.isVisible;
+            currentRow.push({ name: slotName, subType, itemSpan, props, isVisible, Component });
+            reservedSpace += itemSpan || 1;
+        }
+        rows.push(currentRow);
+
+        // Compute the relative size of non-label cells
+        // The aim is for cells containing business data to occupy as much space as possible
+        rows.forEach((row) => {
+            let labelCount = 0;
+            const dataCells = [];
+            for (const c of row) {
+                if (c.subType === "label") {
+                    labelCount++;
+                } else if (c.subType === "item_component") {
+                    labelCount++;
+                    dataCells.push(c);
+                } else {
+                    dataCells.push(c);
+                }
+            }
+
+            const sizeOfDataCell = 100 / (maxCols - labelCount);
+            dataCells.forEach((c) => {
+                const itemSpan = c.subType === "item_component" ? c.itemSpan - 1 : c.itemSpan;
+                c.width = (itemSpan || 1) * sizeOfDataCell;
+            });
+        });
+        return rows;
+    }
+}
+InnerGroup.template = "web.Form.InnerGroup";
diff --git a/addons/web/static/src/views/form/form_group/form_group.xml b/addons/web/static/src/views/form/form_group/form_group.xml
new file mode 100644
index 00000000000..df9883c4dd0
--- /dev/null
+++ b/addons/web/static/src/views/form/form_group/form_group.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="web.Form.OuterGroup" owl="1">
+  <div class="o_group" t-attf-class="{{ allClasses }}" t-att-style="props.style">
+    <t t-slot="title" t-if="props.slots.title" />
+    <t t-foreach="getItems()" t-as="item" t-key="item_index" >
+      <br t-if="item.newline" />
+      <t t-slot="{{ item.name }}" className="'o_group_col_' + item.size"/>
+    </t>
+  </div>
+</t>
+
+<t t-name="web.Form.InnerGroup" owl="1">
+  <table t-attf-class="{{ allClasses }}" class="o_inner_group o_group" t-if="props.slots" t-att-style="props.style">
+      <tbody>
+          <td t-if="props.slots.title" t-attf-colspan="{{ props.maxCols }}" style="width: 100%">
+              <t t-slot="title" />
+          </td>
+          <tr t-foreach="getRows()" t-as="row" t-key="row_index">
+            <t t-foreach="row" t-as="cell" t-key="cell_index" >
+
+              <t t-if="cell.subType === 'item_component'" >
+                <td class="o_td_label">
+                  <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props" />
+                </td>
+                <td t-att-colspan="cell.itemSpan -1 > 1 ? cell.itemSpan - 1 : undefined" t-attf-style="{{ cell.width ? 'width: ' + cell.width + '%' : undefined }}">
+                  <t t-if="cell.isVisible" t-slot="{{ cell.name }}" />
+                </td>
+              </t>
+
+              <t t-else="">
+                  <td t-attf-class="{{ cell.subType === 'label' ? 'o_td_label' : null }}" t-attf-colspan="{{ cell.itemSpan > 1 ? cell.itemSpan : undefined }}"
+                  t-attf-style="{{ cell.width ? 'width: ' + cell.width + '%' : undefined }}">
+                    <t t-if="cell.isVisible" t-slot="{{ cell.name }}" />
+                  </td>
+              </t>
+
+            </t>
+          </tr>
+      </tbody>
+  </table>
+</t>
+
+</templates>
diff --git a/addons/web/static/src/views/form/form_label.js b/addons/web/static/src/views/form/form_label.js
new file mode 100644
index 00000000000..4cd7b6b605e
--- /dev/null
+++ b/addons/web/static/src/views/form/form_label.js
@@ -0,0 +1,53 @@
+/**@odoo-module */
+
+import { fieldVisualFeedback } from "@web/views/fields/field";
+import { session } from "@web/session";
+import { getTooltipInfo } from "@web/views/fields/field_tooltip";
+
+const { Component, xml } = owl;
+
+export class FormLabel extends Component {
+    get className() {
+        const { invalid, empty } = fieldVisualFeedback(
+            this.props.fieldInfo.FieldComponent,
+            this.props.record,
+            this.props.fieldName,
+            this.props.fieldInfo
+        );
+        const classes = this.props.className ? [this.props.className] : [];
+        if (invalid) {
+            classes.push("o_field_invalid");
+        }
+        if (empty) {
+            classes.push("o_form_label_empty");
+        }
+        return classes.join(" ");
+    }
+
+    get hasBigTooltip() {
+        return Boolean(odoo.debug) || this.tooltipHelp;
+    }
+
+    get tooltipHelp() {
+        const field = this.props.record.fields[this.props.fieldName];
+        let help = field.help || "";
+        if (field.company_dependent && session.display_switch_company_menu) {
+            help += (help ? "\n\n" : "") + this.env._t("Values set here are company-specific.");
+        }
+        return help;
+    }
+    get tooltipInfo() {
+        return getTooltipInfo({
+            viewMode: "form",
+            resModel: this.props.record.resModel,
+            field: this.props.record.fields[this.props.fieldName],
+            fieldInfo: this.props.fieldInfo,
+            help: this.tooltipHelp,
+        });
+    }
+}
+FormLabel.template = xml`
+  <label class="o_form_label" t-att-for="props.id" t-att-class="className" t-att="{'data-tooltip-template': hasBigTooltip ? 'web.FieldTooltip' : false, 'data-tooltip-info': hasBigTooltip ? tooltipInfo : false}">
+    <t t-esc="props.string" />
+  </label>
+`;
diff --git a/addons/web/static/src/views/form/form_renderer.js b/addons/web/static/src/views/form/form_renderer.js
new file mode 100644
index 00000000000..f59d30a3f72
--- /dev/null
+++ b/addons/web/static/src/views/form/form_renderer.js
@@ -0,0 +1,42 @@
+/** @odoo-module **/
+
+import { Notebook } from "@web/core/notebook/notebook";
+import { Field } from "@web/views/fields/field";
+import { ButtonBox } from "@web/views/form/button_box/button_box";
+import { InnerGroup, OuterGroup } from "@web/views/form/form_group/form_group";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { evalDomainFromRecord, useViewCompiler } from "@web/views/view_compiler";
+import { useBounceButton } from "@web/views/view_hook";
+import { Widget } from "@web/views/widgets/widget";
+import { FormCompiler } from "./form_compiler";
+import { FormLabel } from "./form_label";
+
+const { Component, useSubEnv, useRef, useState, xml } = owl;
+
+export class FormRenderer extends Component {
+    setup() {
+        const { arch, xmlDoc } = this.props.archInfo;
+        this.state = useState({}); // Used by Form Compiler
+        this.templateId = useViewCompiler(this.props.Compiler || FormCompiler, arch, xmlDoc);
+        useSubEnv({ model: this.props.record.model });
+        useBounceButton(useRef("compiled_view_root"), () => {
+            return !this.props.record.isInEdition;
+        });
+    }
+
+    evalDomainFromRecord() {
+        return evalDomainFromRecord(...arguments);
+    }
+}
+
+FormRenderer.template = xml`<t t-call="{{ templateId }}" />`;
+FormRenderer.components = {
+    Field,
+    FormLabel,
+    ButtonBox,
+    ViewButton,
+    Widget,
+    Notebook,
+    OuterGroup,
+    InnerGroup,
+};
diff --git a/addons/web/static/src/views/form/form_view.js b/addons/web/static/src/views/form/form_view.js
new file mode 100644
index 00000000000..25239345a58
--- /dev/null
+++ b/addons/web/static/src/views/form/form_view.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+// import { registry } from "@web/core/registry";
+import { FormRenderer } from "./form_renderer";
+import { RelationalModel } from "../basic_relational_model";
+import { FormArchParser } from "./form_arch_parser";
+import { FormController } from "./form_controller";
+import { FormCompiler } from "./form_compiler";
+
+export const formView = {
+    type: "form",
+    display_name: "Form",
+    multiRecord: false,
+    display: { controlPanel: { ["top-right"]: false } },
+    searchMenuTypes: [],
+    Controller: FormController,
+    Renderer: FormRenderer,
+    ArchParser: FormArchParser,
+    Model: RelationalModel,
+    Compiler: FormCompiler,
+    buttonTemplate: "web.FormView.Buttons",
+
+    props: (genericProps, view) => {
+        const { ArchParser } = view;
+        const { arch, relatedModels, resModel } = genericProps;
+        const archInfo = new ArchParser().parse(arch, relatedModels, resModel);
+
+        return {
+            ...genericProps,
+            Model: view.Model,
+            Renderer: view.Renderer,
+            buttonTemplate: genericProps.buttonTemplate || view.buttonTemplate,
+            Compiler: view.Compiler,
+            archInfo,
+        };
+    },
+};
+
+// registry.category("views").add("form", formView);
diff --git a/addons/web/static/src/views/form/form_view_extra.scss b/addons/web/static/src/views/form/form_view_extra.scss
new file mode 100644
index 00000000000..11d18c7e1d9
--- /dev/null
+++ b/addons/web/static/src/views/form/form_view_extra.scss
@@ -0,0 +1,131 @@
+$o-td-label-padding-right: 8px;
+
+.o_wowl_form_view {
+    $sheet-min-width: 650px;
+    $sheet-padding: 16px;
+
+    .o_statusbar_status > .o_arrow_button {
+        transition: none;
+        border-radius: 0;
+
+        &:active {
+            box-shadow: none;
+        }
+
+        &:not(.disabled):hover:after {
+            border-left-color: darken($secondary, 7.5%);
+        }
+        &:not(.disabled):active:after {
+            border-left-color: darken($secondary, 10%);
+        }
+    }
+
+    &.o_form_nosheet.oe_form_nomargin {
+        margin: 0;
+    }
+    .o_form_sheet_bg {
+        border-bottom: 1px solid #ddd;
+        background: url(/web/static/img/form_sheetbg.png);
+
+        > .o_form_sheet {
+            min-width: $sheet-min-width;
+            max-width: $o-form-view-sheet-max-width;
+            min-height: 330px;
+            border: 1px solid #c8c8d3;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+            background: white;
+
+            margin: $o-sheet-vpadding*0.2 auto;
+            @include media-breakpoint-up(md) {
+                margin: $o-sheet-vpadding*0.5 auto;
+            }
+            padding: $o-sheet-vpadding;
+            @include o-form-sheet-inner-right-padding;
+            @include o-form-sheet-inner-left-padding;
+
+            .ui-tabs {
+                margin: 0 -16px;
+            }
+            .oe_notebook_page {
+                padding: 0 16px;
+            }
+        }
+    }
+
+    // Button box
+    .oe_button_box {
+        &, & + .oe_avatar {
+            + .oe_title {
+                width: 400px;
+            }
+        }
+
+        // TODO remove me in master (this rule is a copy of the one in the
+        // bootstrap_review.scss file)
+        + .alert {
+            clear: both;
+        }
+
+        .oe_stat_button {
+            &:hover {
+                background-color: #e6e6e6;
+            }
+            .o_button_icon {
+                color: #7C7BAD;
+            }
+        }
+    }
+
+    // Groups
+    .o_group {
+        .o_td_label, .o_checkbox_optional_field > .o_form_label {
+            border-right: 1px solid #ddd;
+        }
+        .o_td_label + td {
+            padding: 0px 36px 0px $o-td-label-padding-right;
+        }
+        .o_checkbox_optional_field > .o_form_label {
+            margin-right: $o-td-label-padding-right;
+        }
+
+        .o_field_widget.o_text_overflow {
+            width: 1px!important; // hack to make the table layout believe it is a small element (so that the table does not grow too much) ...
+            min-width: 100%;      // ... but in fact it takes the whole table space
+        }
+    }
+
+    // Separators
+    .o_horizontal_separator {
+        color: $o-brand-primary;
+        font-weight: bold;
+    }
+
+    // Specific style classes
+    .o_group.o_inner_group.oe_subtotal_footer {
+        .oe_subtotal_footer_separator {
+            border-top: 1px solid #cacaca;
+        }
+        .o_td_label {
+            border-right: none;
+        }
+    }
+}
+
+// Overridden style when form view in modal
+.modal .modal-dialog {
+    .o_wowl_form_view {
+        .o_form_sheet_bg, .o_form_sheet {
+            border: none;
+        }
+        .o_form_sheet_bg > .o_form_sheet {
+            min-height: 0;
+        }
+    }
+}
+
+// XXS form view specific rules
+.o_wowl_form_view.o_xxs_form_view {
+    .o_group .o_td_label {
+        border: none;
+    }
+}
diff --git a/addons/web/static/src/views/graph/graph_arch_parser.js b/addons/web/static/src/views/graph/graph_arch_parser.js
index fa128d5b658..d951bcea0b7 100644
--- a/addons/web/static/src/views/graph/graph_arch_parser.js
+++ b/addons/web/static/src/views/graph/graph_arch_parser.js
@@ -1,9 +1,9 @@
 /** @odoo-module **/
 
 import { evaluateExpr } from "@web/core/py_js/py";
-import { GROUPABLE_TYPES } from "@web/search/utils/misc";
 import { XMLParser } from "@web/core/utils/xml";
-import { archParseBoolean } from "../helpers/utils";
+import { GROUPABLE_TYPES } from "@web/search/utils/misc";
+import { archParseBoolean } from "@web/views/utils";
 
 const MODES = ["bar", "line", "pie"];
 const ORDERS = ["ASC", "DESC", null];
diff --git a/addons/web/static/src/views/graph/graph_controller.js b/addons/web/static/src/views/graph/graph_controller.js
index b99260c23d2..0e1ddd3dd4c 100644
--- a/addons/web/static/src/views/graph/graph_controller.js
+++ b/addons/web/static/src/views/graph/graph_controller.js
@@ -5,11 +5,11 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
 import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
-import { standardViewProps } from "@web/views/helpers/standard_view_props";
-import { useSetupView } from "@web/views/helpers/view_hook";
-import { useModel } from "../helpers/model";
+import { useModel } from "@web/views/model";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useSetupView } from "@web/views/view_hook";
 
-const { Component } = owl;
+const { Component, useRef } = owl;
 
 export class GraphController extends Component {
     setup() {
@@ -17,6 +17,7 @@ export class GraphController extends Component {
         this.model = useModel(this.props.Model, this.props.modelParams);
 
         useSetupView({
+            rootRef: useRef("root"),
             getLocalState: () => {
                 return { metaData: this.model.metaData };
             },
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index 0f5432bd93d..0c6b203ba32 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -46,9 +46,9 @@
     </t>
 
     <t t-name="web.GraphView" owl="1">
-        <div t-att-class="props.className">
+        <div t-att-class="props.className" t-ref="root">
             <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
-                <t t-set-slot="control-panel-bottom-left">
+                <t t-set-slot="layout-buttons">
                     <t t-call="{{ props.buttonTemplate }}"/>
                 </t>
                 <t t-if="model.data">
diff --git a/addons/web/static/src/views/graph/graph_model.js b/addons/web/static/src/views/graph/graph_model.js
index 23322b57f7c..04acdc7ce88 100644
--- a/addons/web/static/src/views/graph/graph_model.js
+++ b/addons/web/static/src/views/graph/graph_model.js
@@ -5,8 +5,8 @@ import { KeepLast, Race } from "@web/core/utils/concurrency";
 import { rankInterval } from "@web/search/utils/dates";
 import { getGroupBy } from "@web/search/utils/group_by";
 import { GROUPABLE_TYPES } from "@web/search/utils/misc";
-import { Model } from "@web/views/helpers/model";
-import { computeReportMeasures, processMeasure } from "@web/views/helpers/utils";
+import { Model } from "@web/views/model";
+import { computeReportMeasures, processMeasure } from "@web/views/utils";
 
 export const SEP = " / ";
 
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
index 1e998c8f350..6bc7cdfff11 100644
--- a/addons/web/static/src/views/graph/graph_renderer.js
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -2,7 +2,7 @@
 
 import { _lt } from "@web/core/l10n/translation";
 import { BORDER_WHITE, DEFAULT_BG, getColor, hexToRGBA } from "./colors";
-import { formatFloat } from "@web/fields/formatters";
+import { formatFloat } from "@web/views/fields/formatters";
 import { SEP } from "./graph_model";
 import { sortBy } from "@web/core/utils/arrays";
 import { loadJS } from "@web/core/assets";
diff --git a/addons/web/static/src/views/helpers/standard_view_props.js b/addons/web/static/src/views/helpers/standard_view_props.js
deleted file mode 100644
index 56a1b9abe32..00000000000
--- a/addons/web/static/src/views/helpers/standard_view_props.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/** @odoo-module **/
-
-// TODO: add this in info props description
-
-// breadcrumbs: { type: Array, optional: 1 },
-// __getLocalState__: { type: CallbackRecorder, optional: 1 },
-// __getContext__: { type: CallbackRecorder, optional: 1 },
-// display: { type: Object, optional: 1 },
-// displayName: { type: String, optional: 1 },
-// noContentHelp: { type: String, optional: 1 },
-// searchViewId: { type: [Number, false], optional: 1 },
-// viewId: { type: [Number, false], optional: 1 },
-// views: { type: Array, element: Array, optional: 1 },
-// viewSwitcherEntries: { type: Array, optional: 1 },
-
-export const standardViewProps = {
-    info: {
-        type: Object,
-    },
-    resModel: String,
-    arch: { type: String },
-    comparison: { validate: () => true }, // fix problem with validation with type: [Object, null]
-    // Issue OWL: https://github.com/odoo/owl/issues/910
-    context: { type: Object },
-    domain: { type: Array },
-    fields: { type: Object, elements: Object },
-    relatedModels: { type: Object, elements: Object, optional: 1 },
-    groupBy: { type: Array, elements: String },
-    limit: { type: Number, optional: 1 },
-    orderBy: { type: Array, elements: String },
-    useSampleModel: { type: Boolean },
-    state: { type: Object, optional: 1 },
-    globalState: { type: Object, optional: 1 },
-    resId: { type: Number, optional: 1 },
-    resIds: { type: Array, optional: 1 },
-    bannerRoute: { type: String, optional: 1 },
-    className: { type: String, optional: 1 },
-};
diff --git a/addons/web/static/src/views/helpers/utils.js b/addons/web/static/src/views/helpers/utils.js
deleted file mode 100644
index 32f537b3fc5..00000000000
--- a/addons/web/static/src/views/helpers/utils.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/** @odoo-module **/
-import { _t } from "@web/core/l10n/translation";
-/**
- * Parse the arch to check if is true or false
- * If the string is empyt, 0, False or false it's considered as false
- * The rest is considered as true
- *
- * @param {string} str
- * @returns {boolean}
- */
-export const archParseBoolean = (str) => {
-    return str !== "False" && str !== "false" && str !== "0" && str !== "";
-};
-
-/**
- * TODO: doc
- *
- * @param {Object} fields
- * @param {Object} fieldAttrs
- * @param {string[]} activeMeasures
- * @param {string[]} [additionalMeasures=[]]
- * @returns {Object}
- */
-export const computeReportMeasures = (
-    fields,
-    fieldAttrs,
-    activeMeasures,
-    additionalMeasures = []
-) => {
-    const measures = {
-        __count: { name: "__count", string: _t("Count"), type: "integer" },
-    };
-    for (const [fieldName, field] of Object.entries(fields)) {
-        if (fieldName === "id" || !field.store) {
-            continue;
-        }
-        const { isInvisible } = fieldAttrs[fieldName] || {};
-        if (isInvisible && !additionalMeasures.includes(fieldName)) {
-            continue;
-        }
-        if (
-            ["integer", "float", "monetary"].includes(field.type) ||
-            additionalMeasures.includes(fieldName)
-        ) {
-            measures[fieldName] = field;
-        }
-    }
-
-    // add active measures to the measure list.  This is very rarely
-    // necessary, but it can be useful if one is working with a
-    // functional field non stored, but in a model with an overridden
-    // read_group method.  In this case, the pivot view could work, and
-    // the measure should be allowed.  However, be careful if you define
-    // a measure in your pivot view: non stored functional fields will
-    // probably not work (their aggregate will always be 0).
-    for (const measure of activeMeasures) {
-        if (!measures[measure]) {
-            measures[measure] = fields[measure];
-        }
-    }
-
-    for (const fieldName in fieldAttrs) {
-        if (fieldAttrs[fieldName].string && fieldName in measures) {
-            measures[fieldName].string = fieldAttrs[fieldName].string;
-        }
-    }
-
-    const sortedMeasures = Object.entries(measures).sort(([m1, f1], [m2, f2]) => {
-        if (m1 === "__count" || m2 === "__count") {
-            return m1 === "__count" ? 1 : -1; // Count is always last
-        }
-        return f1.string.toLowerCase().localeCompare(f2.string.toLowerCase());
-    });
-
-    return Object.fromEntries(sortedMeasures);
-};
-
-/**
- * In the preview implementation of reporting views, the virtual field used to
- * display the number of records was named __count__, whereas __count is
- * actually the one used in xml. So basically, activating a filter specifying
- * __count as measures crashed. Unfortunately, as __count__ was used in the JS,
- * all filters saved as favorite at that time were saved with __count__, and
- * not __count. So in order the make them still work with the new
- * implementation, we handle both __count__ and __count.
- *
- * This function replaces occurences of '__count__' by '__count' in the given
- * element(s).
- *
- * @param {any | any[]} [measures]
- * @returns {any}
- */
-export const processMeasure = (measure) => {
-    if (Array.isArray(measure)) {
-        return measure.map(processMeasure);
-    }
-    return measure === "__count__" ? "__count" : measure;
-};
diff --git a/addons/web/static/src/views/kanban/kanban_animated_number.js b/addons/web/static/src/views/kanban/kanban_animated_number.js
new file mode 100644
index 00000000000..2b2133e4681
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_animated_number.js
@@ -0,0 +1,49 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { formatInteger } from "@web/views/fields/formatters";
+
+const { Component, onWillUpdateProps, onWillUnmount, useState } = owl;
+
+export class KanbanAnimatedNumber extends Component {
+    setup() {
+        this.formatInteger = formatInteger;
+        this.state = useState({ value: this.props.value });
+        this.handle = null;
+        onWillUpdateProps((nextProps) => {
+            const { value: from } = this.props;
+            const { value: to, duration } = nextProps;
+            if (!this.constructor.enableAnimations || !duration || to <= from) {
+                this.state.value = to;
+                return;
+            }
+            const startTime = Date.now();
+            const animate = () => {
+                const progress = (Date.now() - startTime) / duration;
+                if (progress >= 1) {
+                    this.state.value = to;
+                } else {
+                    this.state.value = from + (to - from) * progress;
+                    this.handle = browser.requestAnimationFrame(animate);
+                }
+            };
+            browser.cancelAnimationFrame(this.handle);
+            animate();
+        });
+        onWillUnmount(() => browser.cancelAnimationFrame(this.handle));
+    }
+
+    format(value) {
+        return this.formatInteger(value, { humanReadable: true, decimals: 0, minDigits: 3 });
+    }
+}
+
+KanbanAnimatedNumber.template = "web.KanbanAnimatedNumber";
+KanbanAnimatedNumber.props = {
+    value: Number,
+    duration: Number,
+    animationClass: { type: String, optional: true },
+    currency: { type: [Object, Boolean], optional: true },
+    title: { type: String, optional: true },
+};
+KanbanAnimatedNumber.enableAnimations = true;
diff --git a/addons/web/static/src/views/kanban/kanban_animated_number.xml b/addons/web/static/src/views/kanban/kanban_animated_number.xml
new file mode 100644
index 00000000000..bb975d0074c
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_animated_number.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanAnimatedNumber" owl="1">
+        <div class="o_kanban_counter_side" t-att-class="state.value !== props.value and props.animationClass" t-att-title="props.title">
+            <span t-if="props.currency and props.currency.position === 'before'" t-esc="props.currency.symbol" />
+            <b t-esc="format(state.value)" />
+            <span t-if="props.currency and props.currency.position === 'after'" t-esc="props.currency.symbol" />
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_arch_parser.js b/addons/web/static/src/views/kanban/kanban_arch_parser.js
new file mode 100644
index 00000000000..b92ddb15eff
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_arch_parser.js
@@ -0,0 +1,155 @@
+/** @odoo-module **/
+
+import { extractAttributes, XMLParser } from "@web/core/utils/xml";
+import { Field } from "@web/views/fields/field";
+import { archParseBoolean, getActiveActions, stringToOrderBy } from "@web/views/utils";
+import { Widget } from "@web/views/widgets/widget";
+
+/**
+ * NOTE ON 't-name="kanban-box"':
+ *
+ * Multiple roots are supported in kanban box template definitions, however there
+ * are a few things to keep in mind when doing so:
+ *
+ * - each root will generate its own card, so it would be preferable to make the
+ * roots mutually exclusive to avoid rendering multiple cards for the same record;
+ *
+ * - certain fields such as the kanban 'color' or the 'handle' field are based on
+ * the last encountered node, so it is advised to keep the same values for those
+ * fields within all roots to avoid inconsistencies.
+ */
+
+export const KANBAN_BOX_ATTRIBUTE = "kanban-box";
+
+export class KanbanArchParser extends XMLParser {
+    parse(arch, models, modelName) {
+        const fields = models[modelName];
+        const xmlDoc = this.parseXML(arch);
+        const className = xmlDoc.getAttribute("class") || null;
+        let defaultOrder = stringToOrderBy(xmlDoc.getAttribute("default_order") || null);
+        const defaultGroupBy = xmlDoc.getAttribute("default_group_by");
+        const limit = xmlDoc.getAttribute("limit");
+        const recordsDraggable = archParseBoolean(xmlDoc.getAttribute("records_draggable"), true);
+        const activeActions = {
+            ...getActiveActions(xmlDoc),
+            groupArchive: archParseBoolean(xmlDoc.getAttribute("archivable"), true),
+            groupCreate: archParseBoolean(xmlDoc.getAttribute("group_create"), true),
+            groupDelete: archParseBoolean(xmlDoc.getAttribute("group_delete"), true),
+            groupEdit: archParseBoolean(xmlDoc.getAttribute("group_edit"), true),
+        };
+        const onCreate =
+            activeActions.create &&
+            archParseBoolean(xmlDoc.getAttribute("quick_create"), true) &&
+            xmlDoc.getAttribute("on_create");
+        const quickCreateView = xmlDoc.getAttribute("quick_create_view");
+        const tooltipInfo = {};
+        let handleField = null;
+        const fieldNodes = {};
+        const jsClass = xmlDoc.getAttribute("js_class");
+        const action = xmlDoc.getAttribute("action");
+        const type = xmlDoc.getAttribute("type");
+        const openAction = action && type ? { action, type } : null;
+        const templateDocs = {};
+        const activeFields = {};
+
+        // Root level of the template
+        this.visitXML(xmlDoc, (node) => {
+            if (node.hasAttribute("t-name")) {
+                templateDocs[node.getAttribute("t-name")] = node;
+                return;
+            }
+            // Case: field node
+            if (node.tagName === "field") {
+                // In kanban, we display many2many fields as tags by default
+                const widget = node.getAttribute("widget");
+                if (!widget && models[modelName][node.getAttribute("name")].type === "many2many") {
+                    node.setAttribute("widget", "many2many_tags");
+                }
+                const fieldInfo = Field.parseFieldNode(node, models, modelName, "kanban", jsClass);
+                const name = fieldInfo.name;
+                fieldNodes[name] = fieldInfo;
+                node.setAttribute("field_id", name);
+                if (fieldInfo.options.group_by_tooltip) {
+                    tooltipInfo[name] = fieldInfo.options.group_by_tooltip;
+                }
+                if (fieldInfo.widget === "handle") {
+                    handleField = name;
+                }
+            }
+            if (node.tagName === "widget") {
+                const widgetInfo = Widget.parseWidgetNode(node);
+                for (const [name, field] of Object.entries(widgetInfo.fieldDependencies)) {
+                    activeFields[name] = {
+                        name,
+                        type: field.type,
+                    };
+                }
+            }
+
+            // Keep track of last update so images can be reloaded when they may have changed.
+            if (node.tagName === "img") {
+                const attSrc = node.getAttribute("t-att-src");
+                if (attSrc && /\bkanban_image\b/.test(attSrc) && !fieldNodes.__last_update) {
+                    fieldNodes.__last_update = { type: "datetime" };
+                }
+            }
+        });
+
+        // Progressbar
+        let progressAttributes = false;
+        const progressBar = xmlDoc.querySelector("progressbar");
+        if (progressBar) {
+            const attrs = extractAttributes(progressBar, ["field", "colors", "sum_field", "help"]);
+            progressAttributes = {
+                fieldName: attrs.field,
+                colors: JSON.parse(attrs.colors),
+                sumField: fields[attrs.sum_field] || false,
+                help: attrs.help,
+            };
+        }
+
+        // Concrete kanban box elements in the template
+        const cardDoc = templateDocs[KANBAN_BOX_ATTRIBUTE];
+        if (!cardDoc) {
+            throw new Error(`Missing '${KANBAN_BOX_ATTRIBUTE}' template.`);
+        }
+
+        // Color and color picker (first node found is taken for each)
+        const cardColorEl = cardDoc.querySelector("[color]");
+        const cardColorField = cardColorEl && cardColorEl.getAttribute("color");
+
+        const colorEl = cardDoc.querySelector(".oe_kanban_colorpicker[data-field]");
+        const colorField = (colorEl && colorEl.getAttribute("data-field")) || "color";
+
+        if (!defaultOrder.length && handleField) {
+            defaultOrder = stringToOrderBy(handleField);
+        }
+
+        for (const [key, field] of Object.entries(fieldNodes)) {
+            activeFields[key] = field; // TODO process
+        }
+
+        return {
+            arch,
+            activeActions,
+            activeFields,
+            className,
+            defaultGroupBy,
+            fieldNodes,
+            handleField,
+            colorField,
+            defaultOrder,
+            onCreate,
+            openAction,
+            quickCreateView,
+            recordsDraggable,
+            limit: limit && parseInt(limit, 10),
+            progressAttributes,
+            cardColorField,
+            templateDocs,
+            tooltipInfo,
+            examples: xmlDoc.getAttribute("examples"),
+            __rawArch: arch,
+        };
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.js b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.js
new file mode 100644
index 00000000000..9c0f8b53484
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.js
@@ -0,0 +1,60 @@
+/** @odoo-module */
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { Notebook } from "@web/core/notebook/notebook";
+import { _lt } from "@web/core/l10n/translation";
+
+const { Component, useRef } = owl;
+
+const random = (min, max) => Math.floor(Math.random() * (max - min) + min);
+
+class KanbanExamplesNotebookTemplate extends Component {
+    setup() {
+        this.columns = [];
+        const hasBullet = this.props.bullets && this.props.bullets.length;
+        for (let title of this.props.columns) {
+            const col = { title, records: [] };
+            this.columns.push(col);
+            for (let i = 0; i < random(1, 5); i++) {
+                const rec = { id: i };
+                if (hasBullet && Math.random() > 0.3) {
+                    rec.bullet = _.sample(this.props.bullets);
+                }
+                col.records.push(rec);
+            }
+        }
+    }
+}
+KanbanExamplesNotebookTemplate.template = "web.KanbanExamplesNotebookTemplate";
+
+export class KanbanColumnExamplesDialog extends Component {
+    setup() {
+        this.navList = useRef("navList");
+        this.pages = [];
+        this.activePage = null;
+        this.props.examples.forEach((eg) => {
+            this.pages.push({
+                Component: KanbanExamplesNotebookTemplate,
+                props: {
+                    ...eg,
+                    isVisible: true,
+                    title: eg.name,
+                },
+                id: eg.name,
+            });
+        });
+    }
+
+    onPageUpdate(page) {
+        this.activePage = page;
+    }
+
+    applyExamples() {
+        const index = this.props.examples.findIndex((e) => e.name === this.activePage);
+        this.props.applyExamples(index);
+        this.props.close();
+    }
+}
+KanbanColumnExamplesDialog.template = "web.KanbanColumnExamplesDialog";
+KanbanColumnExamplesDialog.components = { Dialog, Notebook };
+KanbanColumnExamplesDialog.title = _lt("Kanban Examples");
diff --git a/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
new file mode 100644
index 00000000000..ddfde0349a4
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_column_examples_dialog.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanExamplesNotebookTemplate" owl="1">
+        <div t-if="props.description" class="o_kanban_examples_description" t-out="props.description"/>
+        <div class="o_kanban_examples">
+            <t t-foreach="columns" t-as="column" t-key="column.title">
+                <div class="o_kanban_examples_group">
+                    <h6><b t-esc="column.title"/></h6>
+                    <div t-foreach="column.records" t-as="record" t-key="record.id" class="o_kanban_examples_ghost">
+                        <div class="o_ghost_content"/>
+                        <div class="o_ghost_content o_ghost_tag"/>
+                        <span class="ml-2" t-if="record.bullet" t-out="record.bullet"/>
+                    </div>
+                </div>
+            </t>
+        </div>
+    </t>
+
+    <!-- Note: this dialog isn't responsive, but it is not accessible on mobile -->
+    <t t-name="web.KanbanColumnExamplesDialog" owl="1">
+        <Dialog contentClass="'o_kanban_examples_dialog'" title="this.constructor.title">
+            <Notebook orientation="'vertical'" pages="pages" onPageUpdate.bind="onPageUpdate" />
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="applyExamples" t-esc="props.applyExamplesText"/>
+                <button class="btn btn-secondary" t-on-click="props.close">Close</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_column_progressbar.scss b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
new file mode 100644
index 00000000000..f4f90bb1cf7
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_column_progressbar.scss
@@ -0,0 +1,147 @@
+
+@mixin o-kanban-css-filter($class, $accent-color) {
+    // Provide CSS reordering and highlight
+    &.o_kanban_group_show_#{$class} {
+        $mix-soft: mix($accent-color, $o-webclient-background-color, 5%);
+        $mix-full: mix($accent-color, $o-webclient-background-color);
+
+        &, .o_kanban_header {
+            background-color: $mix-soft;
+            border-color: $mix-full;
+        }
+
+        .progress-bar.bg-#{$class} {
+            border: 1px solid white;
+        }
+
+        .oe_kanban_card_#{$class} {
+            order: 1;
+            margin-bottom: $o-kanban-inside-vgutter*0.5;
+
+            ~ .oe_kanban_card_#{$class} {
+                margin-top: -$o-kanban-inside-vgutter*0.5 - 1px;
+            }
+
+            ~ .o_kanban_load_more {
+                margin-top: -$o-kanban-inside-vgutter*0.5;
+            }
+        }
+
+        .o_kanban_load_more {
+            order: 2;
+            padding: $o-kanban-inside-vgutter*0.5 0 $o-kanban-inside-vgutter;
+        }
+
+        .o_kanban_record:not(.oe_kanban_card_#{$class}) {
+            order: 3;
+            @include o-hover-opacity(0.5);
+            box-shadow: none;
+        }
+    }
+}
+
+// If columns has the progressbar, adapt the layout
+.o_kanban_view .o_kanban_group.o_kanban_has_progressbar {
+    > .o_kanban_header .o_kanban_header_title {
+        height: $o-kanban-header-title-height*0.6;
+        margin-top: 5px;
+    }
+
+    &.o_kanban_no_records {
+        .o_kanban_counter {
+            opacity: 0.3;
+        }
+    }
+}
+
+.o_kanban_counter {
+    position: relative;
+    display: flex;
+    align-items: center;
+    transition: opacity 0.3s ease 0s;
+    margin-bottom: $o-kanban-record-margin*2;
+
+    > .o_kanban_counter_progress {
+        width: 76%;
+        height: $font-size-sm;
+        margin-bottom: 0;
+        background-color: gray('300');
+        box-shadow: none;
+
+        .progress-bar {
+            margin-bottom: 0;
+            box-shadow: none;
+            cursor: pointer;
+        }
+
+        .o_kanban_counter_label {
+            font-size: 10px;
+            user-select: none;
+        }
+    }
+
+    > .o_kanban_counter_side {
+        width: 21%;
+        margin-left: 3%;
+        color: $headings-color;
+        text-align: right;
+        white-space: nowrap;
+        transform-origin: right center;
+
+        &.o_kanban_grow {
+            animation: grow 1s ease 0s 1 normal none running;
+        }
+
+        &.o_kanban_grow_huge {
+            animation: grow_huge 1s ease 0s 1 normal none running;
+        }
+
+        // Target currency icon
+        > span {
+            margin-left: 2px;
+        }
+    }
+}
+.o_column_folded .o_kanban_counter {
+    display: none;
+}
+
+.o_kanban_view .o_kanban_group {
+    @include o-kanban-css-filter(success, theme-color('success'));
+    @include o-kanban-css-filter(warning, theme-color('warning'));
+    @include o-kanban-css-filter(danger, theme-color('danger'));
+    @include o-kanban-css-filter(muted, theme-color('dark'));
+
+    &.o_kanban_group_show {
+        display: flex;
+        flex-flow: column nowrap;
+
+        > * {
+            flex: 0 0 auto;
+        }
+    }
+}
+
+@keyframes grow {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+@keyframes grow_huge {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+    30% {
+        transform: scale3d(1.3, 1.3, 1.3);
+    }
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
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
new file mode 100644
index 00000000000..00b2eb7f3fe
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.js
@@ -0,0 +1,73 @@
+/** @odoo-module */
+
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { useAutofocus, useService } from "@web/core/utils/hooks";
+import { KanbanColumnExamplesDialog } from "./kanban_column_examples_dialog";
+
+const { Component, useExternalListener, useState, useRef } = owl;
+
+export class KanbanColumnQuickCreate extends Component {
+    setup() {
+        this.dialog = useService("dialog");
+        this.root = useRef("root");
+        this.state = useState({
+            columnTitle: "",
+        });
+
+        useAutofocus();
+
+        // Close on outside click
+        useExternalListener(window, "mousedown", (/** @type {MouseEvent} */ ev) => {
+            // This target is kept in order to impeach close on outside click behavior if the click
+            // has been initiated from the quickcreate root element (mouse selection in an input...)
+            this.mousedownTarget = ev.target;
+        });
+        useExternalListener(
+            window,
+            "click",
+            (/** @type {MouseEvent} */ ev) => {
+                const target = this.mousedownTarget || ev.target;
+                const gotClickedInside = this.root.el.contains(target);
+                if (!gotClickedInside) {
+                    this.fold();
+                }
+                this.mousedownTarget = null;
+            },
+            { capture: true }
+        );
+
+        // Key Navigation
+        // FIXME ? Maybe it will also validate even if enter is pressed outside of the quick create machin
+        useHotkey("enter", () => this.validate());
+        useHotkey("escape", () => this.fold());
+    }
+
+    fold() {
+        this.props.onFoldChange(true);
+    }
+
+    unfold() {
+        this.props.onFoldChange(false);
+    }
+
+    validate() {
+        if (this.state.columnTitle.length) {
+            this.props.onValidate(this.state.columnTitle);
+            this.state.columnTitle = "";
+        }
+    }
+
+    showExamples() {
+        this.dialog.add(KanbanColumnExamplesDialog, {
+            examples: this.props.exampleData.examples,
+            applyExamplesText:
+                this.props.exampleData.applyExamplesText || this.env._t("Use This For My Kanban"),
+            applyExamples: (index) => {
+                for (const groupName of this.props.exampleData.examples[index].columns) {
+                    this.props.onValidate(groupName);
+                }
+            },
+        });
+    }
+}
+KanbanColumnQuickCreate.template = "web.KanbanColumnQuickCreate";
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
new file mode 100644
index 00000000000..b297b12da1b
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanColumnQuickCreate" owl="1">
+        <div class="o_column_quick_create" t-ref="root">
+            <div t-if="props.folded" class="o_quick_create_folded" t-on-click="unfold">
+                <button class="o_kanban_add_column btn btn-outline-secondary w-100">
+                    <i class="fa fa-plus" role="img" aria-label="Add column" title="Add column"/>
+                    Add a Column
+                </button>
+            </div>
+            <div t-else="" class="o_quick_create_unfolded">
+                <div class="o_kanban_header">
+                    <div class="input-group">
+                        <input type="text"
+                            class="form-control o_input"
+                            placeholder="Column title"
+                            t-ref="autofocus"
+                            t-model.trim="state.columnTitle"
+                            t-on-focus="() => state.hasInputFocused = true"
+                            t-on-blur="() => state.hasInputFocused = false"
+                        />
+                        <span class="input-group-append">
+                            <button class="btn btn-primary o_kanban_add" type="button" t-on-click="validate">
+                                Add
+                            </button>
+                        </span>
+                    </div>
+                    <span t-if="!env.isSmall and state.hasInputFocused" class="o_discard_msg text-muted float-right">
+                        Esc to discard
+                    </span>
+                    <t t-if="props.exampleData and !env.isSmall">
+                        <button type="button" class="btn btn-link o_kanban_examples" t-on-click="showExamples">See examples</button>
+                    </t>
+                </div>
+                <div t-foreach="[,,,]" t-as="i" t-key="i_index" class="o_kanban_muted_record" />
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
new file mode 100644
index 00000000000..b405cf83a44
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -0,0 +1,289 @@
+/** @odoo-module **/
+
+import {
+    append,
+    combineAttributes,
+    createElement,
+    extractAttributes,
+    getTag,
+} from "@web/core/utils/xml";
+import { toStringExpression } from "@web/views/utils";
+import { isTextNode, ViewCompiler } from "@web/views/view_compiler";
+import { KANBAN_BOX_ATTRIBUTE } from "./kanban_arch_parser";
+
+const INTERP_REGEXP = /\{\{.*?\}\}|#\{.*?\}/g;
+
+const ACTION_TYPES = ["action", "object"];
+const SPECIAL_TYPES = [...ACTION_TYPES, "edit", "open", "delete", "url", "set_cover"];
+
+function getValidCards(...cardEls) {
+    return cardEls.map((c) => (isValidCard(c) ? [c] : getValidCards(...c.childNodes)));
+}
+
+function isValidCard(el) {
+    return getTag(el, true) !== "t" || el.hasAttribute("t-component");
+}
+
+export class KanbanCompiler extends ViewCompiler {
+    setup() {
+        this.ctx.readonly = "read_only_mode";
+        this.compilers.push(
+            { selector: `[t-name='${KANBAN_BOX_ATTRIBUTE}']`, fn: this.compileCard },
+            { selector: ".oe_kanban_colorpicker", fn: this.compileColorPicker },
+            { selector: ".dropdown,.o_kanban_manage_button_section", fn: this.compileDropdown },
+            {
+                selector: ".dropdown-toggle,.o_kanban_manage_toggle_button",
+                fn: this.compileDropdownButton,
+            },
+            { selector: ".dropdown-menu", fn: this.compileDropdownMenu },
+            { selector: "t[t-call]", fn: this.compileTCall }
+        );
+        this.dropdown = null;
+    }
+
+    /**
+     * Renders a Dropdown component node, or nothing if one has already been rendered.
+     * This means that the first method to define a dropdown, dropdown toggler or
+     * dropdown menu will be the place the dropdown component will be inserted.
+     *
+     * @returns {Element | null}
+     */
+    renderDropdown() {
+        if (this.dropdown) {
+            return null;
+        }
+        this.dropdown = createElement("Dropdown", {
+            position: toStringExpression("bottom-end"),
+        });
+        return this.dropdown;
+    }
+
+    //-----------------------------------------------------------------------------
+    // Compilers
+    //-----------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    compileButton(el, params) {
+        /**
+         * WOWL FIXME
+         * For some reason, buttons in some arch have a data-something instead of just a normal attribute.
+         * The new system only uses normal attributes.
+         * This is an ugly small compatibility trick to fix this.
+         */
+        if (el.hasAttribute("data-type")) {
+            for (const { name, value } of el.attributes) {
+                el.setAttribute(name.replace(/^data-/, ""), value);
+            }
+        }
+
+        const type = el.getAttribute("type");
+        if (!SPECIAL_TYPES.includes(type)) {
+            // Not a supported action type.
+            return super.compileButton(el, params);
+        }
+
+        combineAttributes(el, "class", [
+            "oe_kanban_action",
+            `oe_kanban_action_${getTag(el, true)}`,
+        ]);
+
+        if (ACTION_TYPES.includes(type)) {
+            if (!el.hasAttribute("debounce")) {
+                // action buttons are debounced in kanban records
+                el.setAttribute("debounce", 300);
+            }
+            return super.compileButton(el, params);
+        }
+
+        const nodeParams = extractAttributes(el, ["type"]);
+        if (type === "set_cover") {
+            const { "data-field": fieldName, "auto-open": autoOpen } = extractAttributes(el, [
+                "data-field",
+                "auto-open",
+            ]);
+            Object.assign(nodeParams, { fieldName, autoOpen });
+        }
+        const strParams = Object.entries(nodeParams)
+            .map(([k, v]) => [k, toStringExpression(v)].join(":"))
+            .join(",");
+        el.setAttribute("t-on-click", `()=>this.triggerAction({${strParams}})`);
+
+        const compiled = createElement(el.nodeName);
+        for (const { name, value } of el.attributes) {
+            compiled.setAttribute(name, value);
+        }
+        if (getTag(el, true) === "a" && !compiled.hasAttribute("href")) {
+            compiled.setAttribute("href", "#");
+        }
+        for (const child of el.childNodes) {
+            append(compiled, this.compileNode(child, params));
+        }
+
+        return compiled;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element}
+     */
+    compileCard(el, params) {
+        const compiledCard = this.compileGenericNode(el, params);
+        const cards = getValidCards(compiledCard)
+            .flat(Infinity)
+            .filter((card) => card && !isTextNode(card));
+
+        for (const card of cards) {
+            card.setAttribute("t-att-tabindex", `props.record.model.useSampleModel?-1:0`);
+            card.setAttribute("role", `article`);
+            card.setAttribute("t-att-data-id", `props.canResequence and props.record.id`);
+            card.setAttribute("t-on-click", `onGlobalClick`);
+
+            combineAttributes(card, "t-att-class", "getRecordClasses()", "+' '+");
+        }
+
+        return createElement("t", cards);
+    }
+
+    /**
+     * @returns {Element}
+     */
+    compileColorPicker() {
+        return createElement("t", { "t-call": "web.KanbanColorPicker" });
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element | null}
+     */
+    compileDropdown(el, params) {
+        const dropdownEl = this.renderDropdown();
+        const classes = [...el.classList].filter((cls) => cls && cls !== "dropdown").join(" ");
+
+        combineAttributes(this.dropdown, "class", toStringExpression(classes), "+' '+");
+
+        for (const child of el.childNodes) {
+            append(this.dropdown, this.compileNode(child, params));
+        }
+
+        return dropdownEl;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element | null}
+     */
+    compileDropdownButton(el, params) {
+        const dropdownEl = this.renderDropdown();
+        const classes = ["btn", ...el.classList].filter(Boolean).join(" ");
+        const togglerSlot = createElement("t", { "t-set-slot": "toggler" });
+
+        combineAttributes(this.dropdown, "togglerClass", toStringExpression(classes), "+' '+");
+
+        for (const child of el.childNodes) {
+            append(togglerSlot, this.compileNode(child, params));
+        }
+        append(this.dropdown, togglerSlot);
+
+        return dropdownEl;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element | null}
+     */
+    compileDropdownMenu(el, params) {
+        const dropdownEl = this.renderDropdown();
+        const cls = el.getAttribute("class") || "";
+
+        combineAttributes(this.dropdown, "menuClass", toStringExpression(cls), "+' '+");
+
+        for (const child of el.childNodes) {
+            append(this.dropdown, this.compileNode(child, params));
+        }
+
+        return dropdownEl;
+    }
+
+    /**
+     * @override
+     */
+    compileField(el, params) {
+        let compiled;
+        if (!el.hasAttribute("widget")) {
+            // fields without a specified widget are rendered as simple spans in kanban records
+            const fieldName = el.getAttribute("name");
+            compiled = createElement("span", { "t-esc": `record["${fieldName}"].value` });
+        } else {
+            compiled = super.compileField(el, params);
+        }
+
+        const { bold, display } = extractAttributes(el, ["bold", "display"]);
+        const classNames = [];
+        if (display === "right") {
+            classNames.push("float-right");
+        } else if (display === "full") {
+            classNames.push("o_text_block");
+        }
+        if (bold) {
+            classNames.push("o_text_bold");
+        }
+        if (classNames.length > 0) {
+            compiled.setAttribute("class", toStringExpression(classNames.join(" ")));
+        }
+        const attrs = {};
+        for (const attr of el.attributes) {
+            attrs[attr.name] = attr.value;
+        }
+
+        if (el.hasAttribute("widget")) {
+            const attrsParts = Object.entries(attrs).map(([key, value]) => {
+                if (key.startsWith("t-attf-")) {
+                    key = key.slice(7);
+                    value = value.replace(
+                        INTERP_REGEXP,
+                        (s) => "${" + s.slice(2, s[0] === "{" ? -2 : -1) + "}"
+                    );
+                    value = toStringExpression(value);
+                } else if (key.startsWith("t-att-")) {
+                    key = key.slice(6);
+                    value = `"" + (${value})`;
+                } else if (key.startsWith("t-att")) {
+                    throw new Error("t-att on <field> nodes is not supported");
+                } else if (!key.startsWith("t-")) {
+                    value = toStringExpression(value);
+                }
+                return `'${key}':${value}`;
+            });
+            compiled.setAttribute("attrs", `{${attrsParts.join(",")}}`);
+        }
+
+        for (const attr in attrs) {
+            if (attr.startsWith("t") && !attr.startsWith("t-att")) {
+                compiled.setAttribute(attr, attrs[attr]);
+            }
+        }
+
+        return compiled;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element}
+     */
+    compileTCall(el, params) {
+        const compiled = this.compileGenericNode(el, params);
+        const tname = el.getAttribute("t-call");
+        const templateKey = params.subTemplateKeys[tname];
+        if (templateKey) {
+            compiled.setAttribute("t-call", templateKey);
+        }
+        return compiled;
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_controller.js b/addons/web/static/src/views/kanban/kanban_controller.js
new file mode 100644
index 00000000000..b411933fab4
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_controller.js
@@ -0,0 +1,124 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { Layout } from "@web/search/layout";
+import { usePager } from "@web/search/pager_hook";
+import { useModel } from "@web/views/model";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useSetupView } from "@web/views/view_hook";
+import { useViewButtons } from "@web/views/view_button/view_button_hook";
+import { KanbanRenderer } from "./kanban_renderer";
+
+const { Component, useRef } = owl;
+
+// -----------------------------------------------------------------------------
+
+export class KanbanController extends Component {
+    setup() {
+        this.actionService = useService("action");
+        const { Model, resModel, fields, archInfo, limit, defaultGroupBy, state } = this.props;
+        const { rootState } = state || {};
+        this.model = useModel(Model, {
+            activeFields: archInfo.activeFields,
+            progressAttributes: archInfo.progressAttributes,
+            fields,
+            resModel,
+            handleField: archInfo.handleField,
+            limit: archInfo.limit || limit,
+            onCreate: archInfo.onCreate,
+            quickCreateView: archInfo.quickCreateView,
+            defaultGroupBy,
+            viewMode: "kanban",
+            openGroupsByDefault: true,
+            tooltipInfo: archInfo.tooltipInfo,
+            rootState,
+        });
+
+        const rootRef = useRef("root");
+        useViewButtons(this.model, rootRef);
+        useSetupView({
+            rootRef,
+            getGlobalState: () => {
+                return {
+                    resIds: this.model.root.records.map((rec) => rec.resId), // WOWL: ask LPE why?
+                };
+            },
+            getLocalState: () => {
+                return {
+                    rootState: this.model.root.exportState(),
+                };
+            },
+        });
+        usePager(() => {
+            if (!this.model.root.isGrouped) {
+                return {
+                    offset: this.model.root.offset,
+                    limit: this.model.root.limit,
+                    total: this.model.root.count,
+                    onUpdate: async ({ offset, limit }) => {
+                        this.model.root.offset = offset;
+                        this.model.root.limit = limit;
+                        await this.model.root.load();
+                        this.render(true); // FIXME WOWL reactivity
+                    },
+                };
+            }
+        });
+    }
+
+    get className() {
+        if (this.env.isSmall && this.model.root.isGrouped) {
+            const classList = (this.props.className || "").split(" ");
+            classList.push("o_action_delegate_scroll");
+            return classList.join(" ");
+        }
+        return this.props.className;
+    }
+
+    async openRecord(record, mode) {
+        const activeIds = this.model.root.records.map((datapoint) => datapoint.resId);
+        this.props.selectRecord(record.resId, { activeIds, mode });
+    }
+
+    async createRecord(group) {
+        const { onCreate } = this.props.archInfo;
+        const { root } = this.model;
+        if (onCreate === "quick_create" && root.canQuickCreate()) {
+            await root.quickCreate(group);
+        } else if (onCreate && onCreate !== "quick_create") {
+            await this.actionService.doAction(onCreate, { additionalContext: root.context });
+        } else {
+            await this.props.createRecord();
+        }
+    }
+
+    get canCreate() {
+        if (!this.model.root.isGrouped) {
+            return this.props.archInfo.activeActions.create;
+        }
+        return !this.props.archInfo.activeActions.groupCreate || this.model.root.groups.length > 0;
+    }
+}
+
+KanbanController.template = `web.KanbanView`;
+KanbanController.components = { Layout, KanbanRenderer };
+KanbanController.props = {
+    ...standardViewProps,
+    defaultGroupBy: { validate: (dgb) => !dgb || typeof dgb === "string", optional: true },
+    editable: { type: Boolean, optional: true },
+    forceGlobalClick: { type: Boolean, optional: true },
+    hasSelectors: { type: Boolean, optional: true },
+    onSelectionChanged: { type: Function, optional: true },
+    showButtons: { type: Boolean, optional: true },
+    Model: Function,
+    Renderer: Function,
+    buttonTemplate: String,
+    archInfo: Object,
+};
+
+KanbanController.defaultProps = {
+    createRecord: () => {},
+    forceGlobalClick: false,
+    selectRecord: () => {},
+    showButtons: true,
+};
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
new file mode 100644
index 00000000000..7b64fb4adba
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -0,0 +1,661 @@
+// ------- Kanban View Layout -------
+.o_kanban_renderer {
+    display: flex;
+    align-content: stretch;
+
+    .dropdown, .o_kanban_manage_button_section {
+        position: inherit;
+    }
+
+    @include media-breakpoint-down(sm) {
+        padding: 0px!important;
+    }
+
+    .o_kanban_record, .o_kanban_quick_create {
+        padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+        border: 1px solid $border-color;
+        background-color: $o-view-background-color;
+
+        @include media-breakpoint-down(sm) {
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
+        }
+        &:focus, &:focus-within {
+            z-index: 1; // show the shadow on top of the previous & next cards in grouped mode
+            outline: none;
+        }
+    }
+
+    .o_kanban_quick_create {
+        box-shadow: $box-shadow;
+        margin: 0 $o-kanban-record-margin ($o-kanban-record-margin * 2);
+
+        .o_form_view {
+            padding: 0;
+            .o_group.o_inner_group {
+                margin: 0;
+            }
+        }
+
+        .o_kanban_cancel {
+            color: gray('600'); // to make color uniform in community and enterprise
+        }
+
+        &.o_disabled {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+    }
+
+    .o_kanban_record {
+        position: relative;
+        display: inline-block; // Force the creation of a block formatting context to clear float items
+        min-width: 150px;
+        margin: 0 0 -1px;
+
+        // ------- Kanban Record, v11 Layout -------
+        // Records colours
+        &::after {
+            content: "";
+            @include o-position-absolute(0, auto, 0, 0);
+            width: $o-kanban-color-border-width;
+        }
+
+        .o_kanban_record_details {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 100%,
+        }
+
+        // Inner Sections
+        .o_kanban_record_top, .o_kanban_record_body  {
+            margin-bottom: $o-kanban-inner-hmargin;
+        }
+
+        .o_kanban_record_top, .o_kanban_record_bottom  {
+            display: flex;
+        }
+
+        .o_kanban_record_top {
+            align-items: flex-start;
+
+            .o_dropdown_kanban {
+                // For v11 layout, reset positioning to default to properly use
+                // flex-box
+                position: relative;
+                top: auto;
+                right: auto;
+            }
+
+            .o_kanban_record_headings {
+                line-height: 1.2;
+                flex: 1 1 auto;
+                // Ensure long word doesn't break out of container
+                word-wrap: break-word;
+                overflow: hidden;
+            }
+        }
+
+        .o_kanban_record_title {
+            @include o-kanban-record-title($font-size: 13px);
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+        }
+
+        .o_kanban_record_subtitle {
+            display: block;
+            margin-top: $o-kanban-inner-hmargin*0.5;
+
+            i.fa[role="img"] {
+                margin-right: 2px;
+            }
+        }
+
+        .o_kanban_record_bottom {
+            .oe_kanban_bottom_left, .oe_kanban_bottom_right {
+                display: flex;
+                align-items: center;
+                min-height: 20px;
+            }
+            .oe_kanban_bottom_left {
+                flex: 1 1 auto;
+
+                > * {
+                    margin-right: 6px;
+                    line-height: 1;
+                }
+
+                .o_priority_star {
+                    margin-top: 1px;
+                    font-size: 18px;
+                }
+            }
+            .oe_kanban_bottom_right{
+                flex: 0 1 auto;
+
+                .oe_kanban_avatar {
+                    border-radius: 50%;
+                    object-fit: cover;
+                }
+                .oe_kanban_avatar, .o_field_many2one_avatar > .o_m2o_avatar {
+                    width: 20px;
+                    height: 20px;
+                    margin-left: 6px;
+                }
+            }
+            .o_link_muted {
+                color: $body-color;
+                &:hover {
+                    color: theme-color('primary');
+                    text-decoration: underline;
+                }
+            }
+        }
+
+        // ---------- Kanban Record, fill image design ----------
+        // Records with images that compensate record's padding
+        // filling all the available space (eg. hr, partners.. )
+        &.o_kanban_record_has_image_fill {
+            display: flex;
+
+            .o_kanban_image_fill_left {
+                position: relative;
+                margin-right: $o-kanban-inside-hgutter*2;
+                @include media-breakpoint-up(sm) {
+                    margin: {
+                        top: $o-kanban-inside-vgutter*-1;
+                        bottom: $o-kanban-inside-vgutter*-1;
+                        left: $o-kanban-inside-hgutter*-1;
+                    }
+                }
+                flex: 1 0 $o-kanban-image-fill-width;
+                min-height: 95px;
+                background: {
+                    size: cover;
+                    position: center;
+                    repeat: no-repeat;
+                };
+
+                &.o_kanban_image_full {
+                    background-size: contain;
+                }
+            }
+
+            // Adapt default 'o_kanban_image' element if present.
+            // This adaptation allow to use both images type.
+            // Eg. In partners list we use to fill user picture only, keeping the
+            // default design for company logos.
+            .o_kanban_image {
+                margin-right: $o-kanban-inside-hgutter*2;
+                flex: 0 0 $o-kanban-image-width;
+                min-height: $o-kanban-image-width;
+                align-self: center;
+                background: {
+                    size: cover;
+                    repeat: no-repeat;
+                    position: center;
+                }
+
+                // On medium screen size, align 'o_kanban_image' to 'o_kanban_image_fill_left' elements.
+                @include media-breakpoint-up(md) {
+                    $fill-notfill-gap: ($o-kanban-image-fill-width - $o-kanban-inside-hgutter*2) - $o-kanban-image-width;
+                    margin: { left: $fill-notfill-gap*0.5; right: $fill-notfill-gap*2;}
+                }
+
+                @include media-breakpoint-down(sm) {
+                    flex-basis: $o-kanban-image-fill-width;
+                    min-height: $o-kanban-image-fill-width;
+                }
+
+                // Reset immedialy after div padding
+                + div {
+                    padding-left: 0
+                }
+            }
+
+            // Images (backgrounds) could accomodate another image inside.
+            // (eg. Company logo badge inside a contact picture)
+            .o_kanban_image_fill_left, .o_kanban_image {
+                .o_kanban_image_inner_pic {
+                    @include o-position-absolute($right: 0, $bottom:0);
+                    max: { height: 25px; width: 80%;}
+                    background: white;
+                    box-shadow: -1px -1px 0 1px white;
+                }
+            }
+        }
+    }
+
+    .o_dragged {
+        @extend .shadow;
+    }
+
+    // -------  Compatibility of old (<= v10) Generic layouts -------
+
+    // Kanban Records - Uniform Design
+    // Provide a basic style for different kanban record layouts
+    // ---------------------------------------------------------
+    .oe_kanban_card, .o_kanban_record {
+        // -------  v11 Layout + generic layouts (~v10) -------
+        // Kanban Record - Dropdown
+        .o_dropdown_kanban {
+            @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
+            visibility: hidden;
+            margin: (-$o-kanban-inside-vgutter) (-$o-kanban-inside-hgutter) 0 0;
+            @include media-breakpoint-down(sm) {
+                visibility: visible;
+            }
+
+            .dropdown-toggle {
+                @include o-kanban-dropdown;
+            }
+            &.show .dropdown-toggle {
+                @include o-kanban-dropdown-open;
+            }
+            .dropdown-menu {
+                margin-top: -2px;
+                min-width: 11rem;
+            }
+        }
+
+        &:hover .o_dropdown_kanban, .o_dropdown_kanban.show {
+            visibility: visible;
+        }
+
+        // Kanban Record - Dropdown colorpicker
+        .oe_kanban_colorpicker {
+            @include o-kanban-colorpicker;
+        }
+
+        // Kanban Record - Inner elements
+        .o_field_many2many_tags, .o_kanban_tags {
+            display: block;
+            margin-bottom: $o-kanban-inner-hmargin;
+            line-height: 1.2;
+            word-break: break-all;
+
+            &.avatar {
+                margin: 0 0 0 6px;
+                .o_m2m_avatar_empty > span {
+                    display: block;
+                    margin-top: 3px;
+                }
+            }
+
+            .o_tag {
+                display: inline-block;
+                margin-right: 4px;
+                font-size: 11px;
+                font-weight: 500;
+                background-color: transparent;
+                color: inherit;
+                box-shadow: none;
+                @include o-kanban-tag-color;
+
+                span {
+                    display: inline-block;
+                    width: 6px;
+                    height: 6px;
+                    margin-right: 4px;
+                    border-radius: 100%;
+                }
+            }
+        }
+
+        .o_field_many2one_avatar {
+            img.o_m2o_avatar {
+                margin-right: 0;
+            }
+        }
+
+        // Commonly used to place an image beside the text
+        // (e.g. Fleet, Employees, ...)
+        .o_kanban_image {
+            position: relative;
+            text-align: center;
+
+            img {
+                max-width: 100%;
+            }
+        }
+
+        .o_kanban_button {
+            margin-top: 15px;
+
+            > button, > a {
+                @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
+                @include media-breakpoint-down(sm) {
+                    right: $o-kanban-inside-hgutter-mobile;
+                }
+            }
+        }
+
+        // Kanban Record - Utility classes
+        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
+            cursor: pointer;
+            &:focus, &:focus-within {
+                outline: thin solid mix(theme-color('primary'), gray('400'));
+                outline-offset: -1px;
+            }
+        }
+
+        &.o_dragged {
+            transform: rotate(-3deg);
+            transition: transform 0.6s, box-shadow 0.3s;
+        }
+
+        .o_attachment_image > img {
+            width: 100%;
+            height: auto;
+        }
+
+        .o_progressbar {
+            display: flex;
+            height: $o-kanban-progressbar-height;
+
+            .o_progressbar_title {
+                flex: 0 0 auto;
+            }
+            .o_progress {
+                flex: 1 1 auto;
+                margin-top: 3px;
+            }
+            .o_progressbar_value {
+                flex: 0 0 auto;
+                width: auto;
+                height: 100%;
+                text-align: right;
+            }
+            input.o_progressbar_value {
+                width: 15%;
+                margin-left: 8px;
+            }
+        }
+
+        .o_kanban_image {
+            float: left;
+            width: $o-kanban-image-width;
+
+            + div {
+                padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
+                @include media-breakpoint-down(sm) {
+                    padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
+                }
+            }
+        }
+
+        .oe_kanban_details {
+            width: 100%;
+            overflow-wrap: break-word;
+            word-wrap: break-word;
+            // Useful for the class 'o_text_overflow'
+            min-width: 0;
+
+            ul {
+                margin-bottom: $o-kanban-inner-hmargin*0.5;;
+                padding-left: 0;
+                list-style: none;
+                font-size: $font-size-sm;
+
+                li {
+                    margin-bottom: 2px;
+                }
+            }
+        }
+
+        .o_kanban_footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            > * {
+                flex: 0 0 auto;
+            }
+        }
+
+        .oe_kanban_text_red {
+            color: #A61300;
+            font-weight: $font-weight-bold;
+        }
+
+        .o_text_bold {
+            font-weight: $font-weight-bold;
+        }
+
+        .o_text_block {
+            display: block;
+        }
+    }
+
+    // Kanban Grouped Layout
+    &.o_kanban_grouped {
+        min-height: 100%;
+        padding: 0;
+        background-color: $gray-100;
+
+        @include media-breakpoint-down(sm) {
+            min-height: initial;
+            height: 100%;
+            overflow: scroll hidden !important;
+            scroll-snap-type: x mandatory;
+        }
+
+        .o_kanban_record, .o_kanban_quick_create {
+            width: 100%;
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        &.o_kanban_small_column .o_kanban_group:not(.o_column_folded) {
+            width: $o-kanban-small-record-width + 2*$o-kanban-group-padding;
+        }
+    }
+
+    // Kanban Grouped Layout - Column default
+    .o_kanban_group {
+        flex: 0 0 $o-kanban-default-record-width + 2*$o-kanban-group-padding;
+        padding: 0 $o-kanban-group-padding $o-kanban-group-padding $o-kanban-group-padding;
+        background-color: inherit;
+
+        .o_kanban_header > .o_kanban_header_title {
+            @include o-kanban-header-title;
+
+            .o_column_title {
+                flex: 1 1 auto;
+                @include o-text-overflow;
+                font-size: 16px;
+                font-weight: 500;
+            }
+
+            .o_column_unfold {
+                display: none;
+            }
+
+            .o_kanban_quick_add i {
+                @include o-kanban-icon;
+                margin-left: $o-kanban-inside-hgutter*2;
+            }
+
+            &:hover .o_kanban_config, .o_kanban_config.show {
+                visibility: visible;
+            }
+
+            .o_kanban_config {
+                visibility: hidden;
+                @include media-breakpoint-down(sm) {
+                    visibility: visible;
+                }
+
+                > .dropdown-menu {
+                    cursor: default;
+                }
+                i {
+                    @include o-kanban-icon;
+                }
+            }
+        }
+    }
+
+    .o_group_draggable .o_column_title {
+        cursor: move;
+    }
+
+    // Kanban Grouped Layout - Column Folded
+    .o_kanban_group.o_column_folded {
+        // don't visually fold on smaller screens (aka. mobile)
+        @include media-breakpoint-up(md) {
+            @include o-kanban-slim-col;
+            background-color: $gray-200;
+
+            & + .o_kanban_group.o_column_folded {
+                margin-left: 1px;
+            }
+
+            .o_kanban_header_title {
+                position: relative;
+                opacity: 0.5;
+
+                .o_column_title {
+                    @include o-kanban-v-title;
+                }
+                .o_column_unfold {
+                    @include o-kanban-icon(1);
+                }
+            }
+
+            > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
+                display: none!important;
+            }
+
+            &:hover, &.o_kanban_hover {
+                .o_kanban_header_title {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    // Kanban Grouped Layout - "Create new column" column
+    .o_column_quick_create {
+        flex-basis: $o-kanban-small-record-width + 2*$o-kanban-group-padding;
+
+        .o_quick_create_folded {
+            cursor: pointer;
+            padding: 12px 16px;
+            white-space: nowrap;
+            font-weight: $font-weight-bold;
+            @include o-hover-opacity(.7);
+            @include o-hover-text-color($text-muted, $body-color);
+        }
+
+        .o_quick_create_unfolded {
+            margin: $border-width ($o-kanban-inside-hgutter * .5) 0;
+            padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+
+            @include media-breakpoint-down(sm) {
+                margin: 0;
+            }
+
+            .o_kanban_header {
+                height: 50px;
+
+                .o_kanban_examples {
+                    cursor: pointer;
+                }
+
+                input, input:focus, input:hover {
+                    font-size: 16px;
+                    background: transparent;
+                }
+            }
+
+            .o_kanban_muted_record {
+                background: gray('300');
+                height: 70px;
+                margin: 10px 0px;
+            }
+
+        }
+    }
+
+    @include media-breakpoint-down(sm) {
+        .o_kanban_group, .o_column_quick_create {
+            flex: 1 0 90%; // don't take full width to give a hint of next/previous column
+            scroll-snap-align: center;
+            overflow-y: scroll;
+
+            .o_kanban_header {
+                position: sticky; // keep it visible
+                top: 0;
+                z-index: 10; // same as the sticky ControlPanel
+                background-color: inherit;
+            }
+
+            .o_kanban_header_title {
+                margin-top: 0 !important; // avoid sticky glitch when scrolling
+            }
+        }
+    }
+
+    // Kanban UN-grouped Layout
+    &.o_kanban_ungrouped {
+        min-height: 100%;
+        align-content: flex-start;
+        flex-flow: row wrap;
+        justify-content: flex-start;
+
+        padding: $o-kanban-record-margin ($o-horizontal-padding - $o-kanban-record-margin);
+
+        .o_kanban_record {
+            flex: 1 1 auto;
+            width: $o-kanban-default-record-width;
+            margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
+
+            @include media-breakpoint-down(sm) {
+                margin: 0 0 -1px 0;
+                flex: 1 0 100%;
+            }
+
+            &.o_kanban_ghost {
+                height: 0;
+                border: none;
+                min-height: 0!important; // to prevent view writers to override this height
+                visibility: hidden;
+                margin-top: 0;
+                margin-bottom: 0;
+                padding: 0;
+            }
+        }
+    }
+
+    &.o_kanban_mobile .o_kanban_record {
+        div.label {
+            @include o-text-overflow;
+        }
+    }
+
+    // Records colours
+    @include o-kanban-record-color;
+
+    .oe_kanban_color_help {
+        @include o-position-absolute(0, auto, 0, -1px);
+        width: $o-kanban-color-border-width;
+        z-index: 1; // show the title over kanban color
+    }
+}
+
+// ----------------- Set Cover Dialog -----------------
+.modal .o_kanban_cover_container .o_kanban_cover_image {
+    border: 1px solid $border-color;
+    height: 120px;
+    width: 120px;
+    cursor: pointer;
+
+    &.o_selected {
+        border-color: $o-brand-primary;
+    }
+
+    > img {
+        @include o-position-absolute(0, 0, 0, 0);
+        max-height: 100%;
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_controller.xml b/addons/web/static/src/views/kanban/kanban_controller.xml
new file mode 100644
index 00000000000..3892cb2c0b6
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_controller.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanView" owl="1">
+        <div t-att-class="className" t-ref="root">
+            <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
+                <t t-set-slot="layout-buttons">
+                    <t t-call="{{ props.buttonTemplate }}"/>
+                </t>
+                <t t-component="props.Renderer"
+                    list="model.root"
+                    archInfo="props.archInfo"
+                    readonly="true"
+                    forceGlobalClick="props.forceGlobalClick"
+                    openRecord.bind="openRecord"
+                    noContentHelp="props.info.noContentHelp"
+                />
+            </Layout>
+        </div>
+    </t>
+
+    <t t-name="web.KanbanView.Buttons" owl="1">
+        <div t-if="props.showButtons" class="o_cp_buttons d-flex align-items-baseline" role="toolbar" aria-label="Main actions">
+            <t t-if="canCreate">
+                <button type="button" class="btn btn-primary o-kanban-button-new" data-tooltip="Create record" aria-label="Create record" accesskey="c" t-on-click="() => this.createRecord(null)" data-bounce-button="">
+                    Create
+                </button>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
new file mode 100644
index 00000000000..a138518122d
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
@@ -0,0 +1,60 @@
+/** @odoo-module **/
+
+import { SimpleDialog } from "@web/core/dialog/dialog";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component, useState, useRef, onWillStart, onMounted } = owl;
+
+let nextDialogId = 1;
+
+export class KanbanCoverImageDialog extends Component {
+    setup() {
+        this.id = `o_cover_image_upload_${nextDialogId++}`;
+        this.orm = useService("orm");
+        const { record, fieldName } = this.props;
+        this.coverId = record && record.data[fieldName];
+        this.state = useState({
+            selectedAttachmentId: this.coverId,
+        });
+        this.fileInput = useRef("fileInput");
+        onWillStart(async () => {
+            this.attachments = await this.orm.searchRead(
+                "ir.attachment",
+                [
+                    ["res_model", "=", record.resModel],
+                    ["res_id", "=", record.resId],
+                    ["mimetype", "ilike", "image"],
+                ],
+                ["id", "name"]
+            );
+        });
+        onMounted(() => {
+            if (!this.props.autoOpen && this.attachments.length === 0) {
+                this.fileInput.el.click();
+            }
+        });
+    }
+
+    selectAttachment(attachment) {
+        if (this.state.selectedAttachmentId !== attachment.id) {
+            this.state.selectedAttachmentId = attachment.id;
+        } else {
+            this.state.selectedAttachmentId = null;
+        }
+    }
+
+    removeCover() {
+        this.state.selectedAttachmentId = null;
+        this.setCover();
+    }
+
+    async setCover() {
+        const id = this.state.selectedAttachmentId ? [this.state.selectedAttachmentId] : false;
+        await this.props.record.update({ [this.props.fieldName]: id });
+        await this.props.record.save();
+        this.props.close();
+    }
+}
+
+KanbanCoverImageDialog.template = "web.KanbanCoverImageDialog";
+KanbanCoverImageDialog.components = { SimpleDialog };
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
new file mode 100644
index 00000000000..8f49e283be1
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanCoverImageDialog" owl="1">
+        <SimpleDialog t-props="props" title="'Set a Cover Image'" size="'modal-lg'">
+            <div t-if="attachments.length" class="o_kanban_cover_container bg-100">
+                <t t-foreach="attachments" t-as="attachment" t-key="attachment.id">
+                    <div class="o_kanban_cover_image position-relative d-inline-block m-2 bg-white" t-att-class="{
+                        o_selected: state.selectedAttachmentId === attachment.id,
+                    }">
+                        <img t-attf-src="/web/image/{{attachment.id}}?unique=1" t-att-data-id="attachment.id" t-att-data-name="attachment.name" class="m-auto mw-100" alt="Attachment" t-on-click="() => this.selectAttachment(attachment)" t-on-dblclick="() => {this.selectAttachment(attachment); this.setCover();}"/>
+                    </div>
+                </t>
+            </div>
+            <t t-else="">There is no available image to be set as cover.</t>
+            <div t-attf-class="d-none o_hidden_input_file {{fileupload_class}}" t-att-style="fileupload_style" aria-atomic="true">
+                <form class="o_form_binary_form" t-att-target="id"
+                    method="post" enctype="multipart/form-data" t-att-action="'/web/binary/upload_attachment'">
+                    <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
+                    <input type="hidden" name="callback" t-att-value="id"/>
+                    <input type="file" class="o_input_file" name="ufile "
+                        t-att-multiple="multi_upload ? 'multiple' : null" accept="image/*" t-ref="fileInput" t-on-change="upload"/>
+                    <input type="hidden" name="model" t-att-value="props.record.resModel" />
+                    <input type="hidden" name="id" t-att-value="props.record.resId" />
+                </form>
+                <iframe t-att-id="id" t-att-name="id" style="display: none"/>
+            </div>
+            <t t-set-slot="footer" t-slot-scope="dialog">
+                <t t-if="attachments.length">
+                    <button class="btn btn-primary" t-on-click="setCover" t-att-disabled="!state.selectedAttachmentId">Select</button>
+                    <button class="btn btn-primary" t-on-click="uploadImage">Upload and Set</button>
+                </t>
+                <button t-if="coverId" class="btn btn-secondary" t-on-click="removeCover">Remove Cover Image</button>
+                <button class="btn btn-secondary" t-on-click="dialog.close">Discard</button>
+            </t>
+        </SimpleDialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
new file mode 100644
index 00000000000..e4a87367142
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -0,0 +1,210 @@
+
+.o_kanban_view .o_kanban_dashboard {
+    &:not(.o_kanban_grouped) {
+        // correctly display the no_content_helper in dashboards
+        flex-flow: row wrap;
+    }
+
+    .o_kanban_record {
+        position: relative;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
+        padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
+
+        @include media-breakpoint-down(sm) {
+            margin-bottom: 10px;
+        }
+
+        // ------- Generic layout adaptations -------
+        .container {
+            width: 100%;
+        }
+
+        // ------- Dropdown toggle & menu -------
+        $o-kanban-manage-toggle-height: 35px;
+
+        .o_kanban_manage_toggle_button {
+            @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
+            @include o-position-absolute(0, 0);
+            height: $o-kanban-manage-toggle-height;
+        }
+
+        .o_kanban_card_manage_pane {
+            // Arbitrary value to place the dropdown-menu exactly below the
+            // dropdown-toggle (height is forced so that it works on Firefox)
+            top: $o-kanban-manage-toggle-height;
+
+            > div:not(.o_no_padding_kanban_colorpicker) {
+                padding: 3px 0 3px 20px;
+                visibility: visible;
+                margin-bottom: 5px;
+            }
+
+            > .o_kanban_card_manage_section {
+                margin-bottom: 10px;
+
+                + .o_kanban_card_manage_section {
+                    border-top: 1px solid gray('200');
+                }
+
+                > div {
+                    @include o-kanban-dashboard-dropdown-link;
+                }
+            }
+
+            // Dropdown menu with complex layout
+            &.container {
+                width: 95%;
+                max-width: 400px;
+
+                .row {
+                    display: flex;
+                    flex-flow: row nowrap;
+                    justify-content: space-between;
+                    margin-left: 0;
+                    margin-right: 0;
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap*2;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap*2;
+                }
+
+                div[class*="col-"] {
+                    flex: 1 1 percentage(1/3);
+                    padding-left: $o-kanban-dashboard-dropdown-complex-gap;
+                    padding-right: $o-kanban-dashboard-dropdown-complex-gap;
+                    max-width: none;
+
+                    > .o_kanban_card_manage_title {
+                        @extend .h5;
+                        margin: (($font-size-base * $line-height-base) / 2) 0;
+                    }
+                    > div:not(.o_kanban_card_manage_title) {
+                        @include o-kanban-dashboard-dropdown-link($link-padding-gap: $o-kanban-dashboard-dropdown-complex-gap);
+                    }
+                }
+
+                .row.o_kanban_card_manage_settings {
+                    padding-top: $o-kanban-dashboard-dropdown-complex-gap*3;
+
+                    &:not(:first-child) {
+                        border-top: 1px solid gray('300');
+                    }
+
+                    .oe_kanban_colorpicker {
+                        max-width: none;
+                        padding: 0;
+                    }
+
+                    div[class*="col-"] + div[class*="col-"] {
+                        border-left: 1px solid gray('300');
+                    }
+
+                    // Default options box
+                    div.text-right {
+                        text-align: left; // :/
+                        @include o-kanban-dashboard-dropdown-link(0);
+                    }
+                }
+            }
+
+        }
+
+        &.o_dropdown_open,
+        .o-dropdown.show {
+            .o_kanban_card_manage_pane {
+                display: block;
+            }
+            .o_kanban_manage_toggle_button {
+                @include o-kanban-dropdown-open;
+                position: absolute;
+            }
+        }
+
+        // -------  Kanban Record Titles -------
+        // Uniform design across different HTML layouts
+
+        // Provide enough room for the dropdown-toggle
+        .o_primary {
+            padding-right: $o-kanban-dashboard-hpadding*2;
+        }
+
+        // Uniform titles
+        .o_kanban_card_header_title .o_primary,
+        .o_kanban_primary_left .o_primary > span:first-child,
+        .oe_kanban_content > .o_title > h3 {
+            @include o-kanban-record-title($font-size: 16px);
+            display: block;
+        }
+
+        // Identify subtitles without classes
+        .o_kanban_primary_left .o_primary > span:nth-child(2) > strong {
+            font-weight: 500;
+            font-size: $font-size-sm;
+            color: $text-muted;
+        }
+
+        // Provide enough room to add an icon before the title
+        &.o_has_icon .o_primary {
+            padding-left: $o-kanban-record-margin*1.5;
+        }
+
+        // -------  Kanban Content -------
+        .o_kanban_card_content {
+            display: inline-block;
+            vertical-align: top;
+            min-height: 80px;
+        }
+
+        .o_kanban_card_header + .container.o_kanban_card_content {
+            flex: 1 0 auto;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: space-between;
+            margin-top: $o-kanban-dashboard-vpadding * 2;
+            padding-right: 0;
+            padding-left: 0;
+
+            &::before, &::after {
+                content: normal; // so that space-between works
+            }
+
+            a {
+                position: relative;
+                @include o-text-overflow(inline-block);
+            }
+
+            @include media-breakpoint-down(md) {
+                button + a {
+                    display: block;
+                    margin-top: map-get($spacers, 3);
+                }
+            }
+
+            .o_kanban_primary_bottom {
+                margin-top: $o-kanban-dashboard-vpadding;
+                margin-bottom: -$o-kanban-dashboard-vpadding;
+
+                &.bottom_block {
+                    border-top: 1px solid gray('300');
+                    background-color: gray('200');
+                    padding-top: $o-kanban-dashboard-vpadding;
+                    padding-bottom: $o-kanban-dashboard-vpadding;
+                }
+            }
+        }
+
+        .o_dashboard_graph {
+            overflow: hidden;
+        }
+    }
+
+    .o_favorite {
+        @include o-position-absolute(3px, $left: 0);
+        padding: $o-kanban-record-margin;
+    }
+
+    // Emphasize records' colors when necessary
+    &.o_emphasize_colors .o_kanban_record::after {
+        width: $o-kanban-color-border-width * 2;
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
new file mode 100644
index 00000000000..c2956e29adc
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
@@ -0,0 +1,99 @@
+// container ghost card in modal
+.o_kanban_examples_dialog .modal-body {
+    display: flex;
+    padding: 0px;
+    background: theme-color('light');
+
+    // sidebar
+    .o_notebook_headers {
+        flex: 0 0 auto;
+        border-right: 1px solid gray('300');
+        background: white;
+
+        > ul > li {
+            margin: 0;
+            border-bottom: 1px solid gray('300');
+
+            > a {
+                padding: 12px 15px;
+                border-left: 3px solid transparent;
+                &:not(.active) {
+                    color: $o-main-text-color;
+                }
+                &:focus {
+                    outline: none;
+                }
+            }
+            &.active > a {
+                color: $headings-color;
+                border-left-color: $o-brand-primary;
+                font-weight: bold;
+            }
+        }
+    }
+
+    // content
+    .o_notebook_content {
+        flex: 1 1 100%;
+        min-height: 300px;
+
+        .o_kanban_examples_description {
+            padding: 16px 16px 0;
+            text-align: justify;
+        }
+    }
+}
+
+// container ghost card in background
+.o_kanban_example_background_container {
+    display: flex;
+    padding: 0px;
+    opacity: 0.4;
+
+    // content
+    .o_kanban_example_background {
+        flex: 1 1 100%;
+
+        .o_kanban_examples {
+            .o_kanban_examples_group {
+                .o_kanban_examples_ghost {
+                    width: 224px;
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+}
+
+
+// kanban ghost card
+.o_kanban_examples {
+    display: flex;
+    padding: 0 6px;
+
+    .o_kanban_examples_group {
+        flex: 1 1 100%;
+        margin: 10px;
+
+        .o_kanban_examples_ghost {
+            padding: 5px;
+            margin-top: -1px;
+            border: thin solid gray('300');
+            background-color: white;
+            .o_ghost_content {
+                height: 12px;
+                background: gray('300');
+                &.o_ghost_tag {
+                    display: inline-block;
+                    width: 40%;
+                    margin-top: 10px;
+                }
+            }
+            .o_ghost_avatar {
+                height: 20px;
+                width: 20px;
+                margin-top: 6px;
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_model.js b/addons/web/static/src/views/kanban/kanban_model.js
new file mode 100644
index 00000000000..8b2036b39a4
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_model.js
@@ -0,0 +1,543 @@
+/** @odoo-module **/
+
+import { Domain } from "@web/core/domain";
+import { isRelational } from "@web/views/utils";
+import {
+    DynamicGroupList,
+    DynamicRecordList,
+    Group,
+    RelationalModel,
+} from "@web/views/relational_model";
+
+/**
+ * @typedef ProgressBar
+ * @property {number} count
+ * @property {any} value
+ * @property {string} color
+ * @property {string} string
+ */
+
+const { EventBus, markRaw } = owl;
+
+const FALSE = Symbol("false");
+
+function makeTransactionManager() {
+    const bus = new EventBus();
+    const transactions = {};
+    return {
+        start: (id) => {
+            if (transactions[id]) {
+                throw new Error(`Transaction in progress: commit or abort to start a new one.`);
+            }
+            transactions[id] = true;
+            bus.trigger("START");
+        },
+        commit: (id) => {
+            if (!transactions[id]) {
+                throw new Error(`No transaction in progress.`);
+            }
+            delete transactions[id];
+            bus.trigger("COMMIT");
+        },
+        abort: (id) => {
+            if (!transactions[id]) {
+                throw new Error(`No transaction in progress.`);
+            }
+            delete transactions[id];
+            bus.trigger("ABORT");
+        },
+        register: ({ onStart, onCommit, onAbort }) => {
+            let currentData = null;
+            bus.addEventListener("START", () => onStart && (currentData = onStart()));
+            bus.addEventListener("COMMIT", () => onCommit && onCommit(currentData));
+            bus.addEventListener("ABORT", () => onAbort && onAbort(currentData));
+        },
+    };
+}
+
+class KanbanGroup extends Group {
+    setup(_params, state = {}) {
+        super.setup(...arguments);
+
+        /** @type {ProgressBar[]} */
+        this.progressBars = this._generateProgressBars();
+        this.progressValue = markRaw(state.progressValue || { active: null });
+
+        this.model.transaction.register({
+            onStart: () => ({
+                count: this.count,
+                progressBars: [...this.progressBars],
+                records: [...this.list.records],
+            }),
+            onAbort: ({ count, progressBars, records }) => {
+                this.count = count;
+                this.progressBars = progressBars;
+                this.list.records = records;
+            },
+        });
+
+        this.model.addEventListener("record-updated", ({ detail }) => {
+            if (this.list.records.some((r) => r.id === detail.record.id)) {
+                this.model.trigger("group-updated", {
+                    group: this,
+                    withProgressBars: true,
+                });
+            }
+        });
+    }
+
+    get activeProgressBar() {
+        return (
+            this.hasActiveProgressValue &&
+            this.progressBars.find((pv) => pv.value === this.progressValue.active)
+        );
+    }
+
+    get hasActiveProgressValue() {
+        return this.model.hasProgressBars && this.progressValue.active !== null;
+    }
+
+    /**
+     * @override
+     */
+    async deleteRecords() {
+        const records = await super.deleteRecords(...arguments);
+        this.model.trigger("group-updated", {
+            group: this,
+            withProgressBars: true,
+        });
+        return records;
+    }
+
+    /**
+     * @override
+     */
+    empty() {
+        super.empty();
+
+        this.progressValue.active = null;
+        for (const progressBar of this.progressBars) {
+            progressBar.count = 0;
+        }
+    }
+
+    /**
+     * @override
+     */
+    exportState() {
+        return {
+            ...super.exportState(),
+            progressValue: this.progressValue,
+        };
+    }
+
+    /**
+     * @override
+     */
+    getAggregableRecords() {
+        const records = super.getAggregableRecords();
+        if (!this.hasActiveProgressValue) {
+            return records;
+        }
+        const { fieldName } = this.model.progressAttributes;
+        let recordsFilter;
+        if (this.progressValue.active === FALSE) {
+            const values = this.progressBars
+                .map((pv) => pv.value)
+                .filter((val) => val !== this.progressValue.active);
+            recordsFilter = (r) => !values.includes(r.data[fieldName]);
+        } else {
+            recordsFilter = (r) => r.data[fieldName] === this.progressValue.active;
+        }
+        return records.filter(recordsFilter);
+    }
+
+    /**
+     * @override
+     */
+    quickCreate(activeFields, context) {
+        const ctx = { ...context };
+        if (this.hasActiveProgressValue && this.progressValue.active !== FALSE) {
+            const { fieldName } = this.model.progressAttributes;
+            ctx[`default_${fieldName}`] = this.progressValue.active;
+        }
+        return super.quickCreate(activeFields, ctx);
+    }
+
+    async load() {
+        const proms = [];
+        proms.push(super.load());
+        const groupName = this.groupByField.name;
+        if (
+            this.groupByField.type === "many2one" &&
+            this.value &&
+            groupName in this.model.tooltipInfo
+        ) {
+            const resModel = this.groupByField.relation;
+            const tooltipInfo = this.model.tooltipInfo[groupName];
+            const fieldNames = Object.keys(tooltipInfo);
+            // This read will be batched for all groups
+            const readProm = this.model.orm.read(
+                resModel,
+                [this.value],
+                ["display_name", ...fieldNames]
+            );
+            proms.push(readProm);
+            const [values] = await readProm;
+            this.tooltip = null;
+            for (const fieldName of fieldNames) {
+                if (values[fieldName]) {
+                    this.tooltip = this.tooltip || [];
+                    this.tooltip.push({
+                        title: tooltipInfo[fieldName],
+                        value: values[fieldName],
+                    });
+                }
+            }
+        }
+        await Promise.all(proms);
+    }
+
+    /**
+     * Checks if the current active progress bar value contains records, and
+     * deactivates it if not.
+     * @returns {Promise<void>}
+     */
+    async checkActiveValue() {
+        if (!this.hasActiveProgressValue) {
+            return;
+        }
+        if (this.activeProgressBar.count === 0) {
+            await this.filterProgressValue(null);
+        }
+    }
+
+    async filterProgressValue(value) {
+        this.progressValue.active = this.progressValue.active === value ? null : value;
+        this.list.domain = this.getProgressBarDomain();
+
+        // Do not update progress bars data when filtering on them.
+        this.model.trigger("group-updated", { group: this, withProgressBars: false });
+        await Promise.all([this.list.load()]);
+        this.list.model.notify();
+    }
+
+    /**
+     * @param {Object} record
+     * @returns {ProgressBar}
+     */
+    findProgressValueFromRecord(record) {
+        const { fieldName } = this.model.progressAttributes;
+        const value = record.data[fieldName];
+        return (
+            this.progressBars.find((pv) => pv.value === value) ||
+            this.progressBars.find((pv) => pv.value === FALSE)
+        );
+    }
+
+    /**
+     * @override
+     */
+    getAggregates(fieldName) {
+        if (!this.hasActiveProgressValue) {
+            return super.getAggregates(...arguments);
+        }
+        return fieldName ? this.aggregates[fieldName] : this.activeProgressBar.count;
+    }
+
+    getProgressBarDomain() {
+        const { fieldName } = this.model.progressAttributes;
+        const domains = [this.groupDomain];
+        if (this.hasActiveProgressValue) {
+            if (this.progressValue.active === FALSE) {
+                const values = this.progressBars
+                    .map((pv) => pv.value)
+                    .filter((val) => val !== this.progressValue.active);
+                domains.push(["!", [fieldName, "in", values]]);
+            } else {
+                domains.push([[fieldName, "=", this.progressValue.active]]);
+            }
+        }
+        return Domain.and(domains).toList();
+    }
+
+    updateAggregates(groupData) {
+        const fname = this.groupByField.name;
+        const { sumField } = this.model.progressAttributes;
+        const group = groupData.find((g) => this.valueEquals(g[fname]));
+        if (sumField) {
+            this.aggregates[sumField.name] = group ? group[sumField.name] : 0;
+        }
+    }
+
+    /**
+     * @param {Object} [progressData]
+     * @returns {Promise<void>}
+     */
+    async updateProgressData(progressData) {
+        /** @type {Record<string, number>} */
+        const groupProgressData = progressData[this.displayName || this.value] || {};
+        /** @type {Map<string | symbol, number>} */
+        const counts = new Map(
+            groupProgressData ? Object.entries(groupProgressData) : [[FALSE, this.count]]
+        );
+        const total = [...counts.values()].reduce((acc, c) => acc + c, 0);
+        counts.set(FALSE, this.count - total);
+        for (const pv of this.progressBars) {
+            pv.count = counts.get(pv.value) || 0;
+        }
+        await this.checkActiveValue();
+    }
+
+    // ------------------------------------------------------------------------
+    // Protected
+    // ------------------------------------------------------------------------
+
+    /**
+     * @returns {ProgressBar[]}
+     */
+    _generateProgressBars() {
+        if (!this.model.hasProgressBars) {
+            return [];
+        }
+        const { colors, fieldName } = this.model.progressAttributes;
+        const { selection: fieldSelection } = this.fields[fieldName];
+        /** @type {[string | typeof FALSE, string][]} */
+        const colorEntries = Object.entries(colors);
+        const selection = fieldSelection && Object.fromEntries(fieldSelection);
+
+        if (!colorEntries.some((v) => v[1] === "muted")) {
+            colorEntries.push([FALSE, "muted"]);
+        }
+
+        return colorEntries.map(([value, color]) => {
+            let string;
+            if (value === FALSE) {
+                string = this.model.env._t("Other");
+            } else if (selection) {
+                string = selection[value];
+            } else {
+                string = String(value);
+            }
+            return { count: 0, value, string, color };
+        });
+    }
+}
+
+export class KanbanDynamicGroupList extends DynamicGroupList {
+    setup() {
+        super.setup(...arguments);
+
+        this.model.addEventListener("group-updated", ({ detail }) => {
+            if (this.groups.some((g) => g.id === detail.group.id)) {
+                this.updateGroupProgressData([detail.group], detail.withProgressBars);
+            }
+        });
+    }
+
+    /**
+     * After a reload, empty groups are expcted to disappear from the web_read_group.
+     * However, if the parameters are the same (domain + groupBy), we want to
+     * temporarily keep these empty groups in the interface until the next reload
+     * with different parameters.
+     * @override
+     */
+    async load() {
+        await this._loadWithProgressData(super.load());
+    }
+
+    /**
+     * @param {KanbanGroup[]} groups
+     * @param {boolean} withProgressBars
+     * @returns {Promise<void>}
+     */
+    async updateGroupProgressData(groups, withProgressBars) {
+        if (!this.model.hasProgressBars) {
+            return;
+        }
+
+        const { fieldName, sumField } = this.model.progressAttributes;
+        const fieldNames = [];
+        const gbFieldName = this.groupByField.name;
+        const promises = {};
+
+        if (withProgressBars) {
+            const domain = Domain.or(groups.map((g) => g.groupDomain)).toList();
+            fieldNames.push(fieldName);
+            promises.readProgressBar = this._fetchProgressData(domain);
+        }
+        // If we have a sumField, the aggregates must be re-fetched
+        if (sumField) {
+            const domain = Domain.or(groups.map((g) => g.getProgressBarDomain())).toList();
+            fieldNames.push(sumField.name);
+            promises.webReadGroup = this.model.orm.webReadGroup(
+                this.resModel,
+                domain,
+                fieldNames,
+                this.groupBy,
+                { lazy: true }
+            );
+        }
+
+        await Promise.all(Object.values(promises));
+
+        // Update the aggregates for each group
+        if (promises.webReadGroup) {
+            const result = await promises.webReadGroup;
+            const groupData = result.groups.map((group) => ({
+                ...group,
+                [gbFieldName]: Array.isArray(group[gbFieldName])
+                    ? group[gbFieldName][0]
+                    : group[gbFieldName],
+            }));
+            for (const group of groups) {
+                group.updateAggregates(groupData);
+            }
+        }
+        // Update the progress bar data for each group
+        if (promises.readProgressBar) {
+            const result = await promises.readProgressBar;
+            await Promise.all(groups.map((group) => group.updateProgressData(result)));
+        }
+
+        this.model.notify();
+    }
+
+    /**
+     * @param {string} dataRecordId
+     * @param {string} dataGroupId
+     * @param {string} refId
+     * @param {string} targetGroupId
+     * @returns {Promise<Record>}
+     */
+    async moveRecord(dataRecordId, dataGroupId, refId, targetGroupId) {
+        const sourceGroup = this.groups.find((g) => g.id === dataGroupId);
+        const targetGroup = this.groups.find((g) => g.id === targetGroupId);
+
+        if (!sourceGroup || !targetGroup) {
+            return; // Groups have been re-rendered, old ids are ignored
+        }
+
+        const record = sourceGroup.list.records.find((r) => r.id === dataRecordId);
+
+        this.model.transaction.start(dataRecordId);
+
+        // Move from one group to another
+        try {
+            if (dataGroupId !== targetGroupId) {
+                // Quick update: moves the record at the right position and notifies components
+                const refIndex = targetGroup.list.records.findIndex((r) => r.id === refId);
+                targetGroup.addRecord(sourceGroup.removeRecord(record), refIndex + 1);
+
+                const value = isRelational(this.groupByField)
+                    ? [targetGroup.value]
+                    : targetGroup.value;
+                await record.update({ [this.groupByField.name]: value });
+                await record.save({ noReload: true });
+                // Record can be loaded along with the group metadata
+                await Promise.all([
+                    this.updateGroupProgressData([sourceGroup, targetGroup], true),
+                    record.load(),
+                ]);
+            }
+            await targetGroup.list.resequence(dataRecordId, refId);
+            this.model.transaction.commit(dataRecordId);
+        } catch (err) {
+            this.model.transaction.abort(dataRecordId);
+            this.model.notify();
+            throw err;
+        }
+
+        return record;
+    }
+
+    // ------------------------------------------------------------------------
+    // Protected
+    // ------------------------------------------------------------------------
+
+    /**
+     * @param {any[]} [domain]
+     * @returns {Promise<Object>}
+     */
+    async _fetchProgressData(domain) {
+        const { colors, fieldName, help, sumField } = this.model.progressAttributes;
+        return this.model.orm.call(this.resModel, "read_progress_bar", [], {
+            domain,
+            group_by: this.firstGroupBy,
+            progress_bar: {
+                colors,
+                field: fieldName,
+                help,
+                sum_field: sumField && sumField.name,
+            },
+            context: this.context,
+        });
+    }
+
+    /**
+     * @param {Promise<any>} loadPromise
+     * @returns {Promise<void>}
+     */
+    async _loadWithProgressData(loadPromise) {
+        if (!this.model.hasProgressBars) {
+            // No progress attributes : normal load
+            return loadPromise;
+        }
+        const [progressData] = await Promise.all([
+            this._fetchProgressData(this.domain),
+            loadPromise,
+        ]);
+        await Promise.all(this.groups.map((group) => group.updateProgressData(progressData)));
+    }
+}
+
+export class KanbanDynamicRecordList extends DynamicRecordList {
+    async moveRecord(dataRecordId, _dataGroupId, refId) {
+        this.model.transaction.start(dataRecordId);
+
+        try {
+            await this.resequence(dataRecordId, refId);
+        } catch (err) {
+            this.model.transaction.abort(dataRecordId);
+            this.model.notify();
+            throw err;
+        }
+
+        this.model.transaction.commit(dataRecordId);
+    }
+}
+
+KanbanDynamicRecordList.DEFAULT_LIMIT = 40;
+
+export class KanbanModel extends RelationalModel {
+    setup(params) {
+        super.setup(...arguments);
+
+        this.progressAttributes = params.progressAttributes;
+        this.tooltipInfo = params.tooltipInfo;
+        this.transaction = makeTransactionManager();
+    }
+
+    get hasProgressBars() {
+        return Boolean(this.progressAttributes);
+    }
+
+    /**
+     * @override
+     */
+    hasData() {
+        if (this.root.groups) {
+            if (!this.root.groups.length) {
+                // While we don't have any data, we want to display the column quick create and
+                // example background. Return true so that we don't get sample data instead
+                return true;
+            }
+            return this.root.groups.some((group) => group.list.records.length > 0);
+        }
+        return this.root.records.length > 0;
+    }
+}
+
+KanbanModel.DynamicGroupList = KanbanDynamicGroupList;
+KanbanModel.DynamicRecordList = KanbanDynamicRecordList;
+KanbanModel.Group = KanbanGroup;
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
new file mode 100644
index 00000000000..02c6363a147
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -0,0 +1,399 @@
+/** @odoo-module **/
+
+import { ColorList } from "@web/core/colorlist/colorlist";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+import { url } from "@web/core/utils/urls";
+import { Field } from "@web/views/fields/field";
+import { fileTypeMagicWordMap } from "@web/views/fields/image/image_field";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { evalDomainFromRecord, useViewCompiler } from "@web/views/view_compiler";
+import { Widget } from "@web/views/widgets/widget";
+import { KANBAN_BOX_ATTRIBUTE } from "./kanban_arch_parser";
+import { KanbanCompiler } from "./kanban_compiler";
+import { KanbanCoverImageDialog } from "./kanban_cover_image_dialog";
+
+const { Component, onWillUpdateProps, xml } = owl;
+const { COLORS } = ColorList;
+
+const formatters = registry.category("formatters");
+
+// These classes determine whether a click on a record should open it.
+const CANCEL_GLOBAL_CLICK = ["a", ".dropdown", ".oe_kanban_action"].join(",");
+const ALLOW_GLOBAL_CLICK = [".oe_kanban_global_click", ".oe_kanban_global_click_edit"].join(",");
+
+/**
+ * Returns the class name of a record according to its color.
+ */
+function getColorClass(value) {
+    return `oe_kanban_color_${getColorIndex(value)}`;
+}
+
+/**
+ * Returns the index of a color determined by a given record.
+ */
+function getColorIndex(value) {
+    if (typeof value === "number") {
+        return Math.round(value) % COLORS.length;
+    } else if (typeof value === "string") {
+        const charCodeSum = [...value].reduce((acc, _, i) => acc + value.charCodeAt(i), 0);
+        return charCodeSum % COLORS.length;
+    } else {
+        return 0;
+    }
+}
+
+/**
+ * Returns the proper translated name of a record color.
+ */
+function getColorName(value) {
+    return COLORS[getColorIndex(value)];
+}
+
+/**
+ * Returns the image URL of a given field on the record.
+ *
+ * @param {Record} record
+ * @param {string} [model] model name
+ * @param {string} [field] field name
+ * @param {number | [number, ...any[]]} [idOrIds] id or array
+ *      starting with the id of the desired record.
+ * @param {string} [placeholder] fallback when the image does not
+ *  exist
+ * @returns {string}
+ */
+function getImageSrcFromRecordInfo(record, model, field, idOrIds, placeholder) {
+    const id = (Array.isArray(idOrIds) ? idOrIds[0] : idOrIds) || null;
+    const isCurrentRecord =
+        record.resModel === model && (record.resId === id || (!record.resId && !id));
+    const fieldVal = record.data[field];
+    if (isCurrentRecord && fieldVal && !isBinSize(fieldVal)) {
+        // Use magic-word technique for detecting image type
+        const type = fileTypeMagicWordMap[fieldVal[0]];
+        return `data:image/${type};base64,${fieldVal}`;
+    } else if (placeholder && (!model || !field || !id || !fieldVal)) {
+        // Placeholder if either the model, field, id or value is missing or null.
+        return placeholder;
+    } else {
+        // Else: fetches the image related to the given id.
+        return url("/web/image", { model, field, id });
+    }
+}
+
+/**
+ * Returns a "raw" version of the field value on a given record.
+ *
+ * @param {Record} record
+ * @param {string} fieldName
+ * @returns {any}
+ */
+function getRawValue(record, fieldName) {
+    const field = record.fields[fieldName];
+    const value = record.data[fieldName];
+    switch (field.type) {
+        case "one2many":
+        case "many2many": {
+            return value.count ? value.currentIds : [];
+        }
+        case "many2one": {
+            return (value && value[0]) || false;
+        }
+        case "date":
+        case "datetime": {
+            return value && value.toJSDate();
+        }
+        default: {
+            return value;
+        }
+    }
+}
+
+/**
+ * Returns a formatted version of the field value on a given record.
+ *
+ * @param {Record} record
+ * @param {string} fieldName
+ * @returns {string}
+ */
+function getValue(record, fieldName) {
+    const field = record.fields[fieldName];
+    const value = record.data[fieldName];
+    const formatter = formatters.get(field.type, String);
+    return formatter(value, { field, data: record.data });
+}
+
+function isBinSize(value) {
+    return /^\d+(\.\d*)? [^0-9]+$/.test(value);
+}
+
+/**
+ * Checks if a html content is empty. If there are only formatting tags
+ * with style attributes or a void content. Famous use case is
+ * '<p style="..." class=".."><br></p>' added by some web editor(s).
+ * Note that because the use of this method is limited, we ignore the cases
+ * like there's one <img> tag in the content. In such case, even if it's the
+ * actual content, we consider it empty.
+ *
+ * @param {string} innerHTML
+ * @returns {boolean} true if no content found or if containing only formatting tags
+ */
+function isHtmlEmpty(innerHTML = "") {
+    const div = Object.assign(document.createElement("div"), { innerHTML });
+    return div.innerText.trim() === "";
+}
+
+export class KanbanRecord extends Component {
+    setup() {
+        this.action = useService("action");
+        this.dialog = useService("dialog");
+        this.notification = useService("notification");
+        this.user = useService("user");
+
+        const { archInfo, Compiler, templates } = this.props;
+        const { arch } = archInfo;
+        const ViewCompiler = Compiler || KanbanCompiler;
+
+        const subTemplateKeys = {};
+        let cardTemplate;
+        for (const tname in templates) {
+            if (tname === KANBAN_BOX_ATTRIBUTE) {
+                cardTemplate = templates[tname];
+            } else {
+                subTemplateKeys[tname] = useViewCompiler(
+                    ViewCompiler,
+                    `${tname}_${arch}`,
+                    templates[tname],
+                    { subTemplateKeys }
+                );
+            }
+        }
+        this.templateId = useViewCompiler(ViewCompiler, arch, cardTemplate, {
+            subTemplateKeys,
+        });
+
+        this.createRecordAndWidget(this.props);
+        onWillUpdateProps(this.createRecordAndWidget);
+    }
+
+    /**
+     * Assigns both "record" and "widget" properties on the kanban record.
+     *
+     * @param {Object} props
+     */
+    createRecordAndWidget(props) {
+        const { archInfo, list, record } = props;
+        const { activeActions } = archInfo;
+
+        // Record
+        this.record = Object.create(null);
+        for (const fieldName in record.data) {
+            this.record[fieldName] = {
+                get value() {
+                    return getValue(record, fieldName);
+                },
+                get raw_value() {
+                    return getRawValue(record, fieldName);
+                },
+            };
+        }
+
+        // Widget
+        const deletable = activeActions.delete && (!list.groupedBy || !list.groupedBy("m2m"));
+        const editable = archInfo.activeActions.edit;
+        this.widget = {
+            deletable,
+            editable,
+            isHtmlEmpty,
+        };
+    }
+
+    evalDomainFromRecord() {
+        return evalDomainFromRecord(...arguments);
+    }
+
+    getRecordClasses() {
+        const { archInfo, canResequence, forceGlobalClick, group, record } = this.props;
+        const classes = ["o_kanban_record"];
+        if (canResequence) {
+            classes.push("o_record_draggable");
+        }
+        if (forceGlobalClick || archInfo.openAction) {
+            classes.push("oe_kanban_global_click");
+        }
+        if (group && record.model.hasProgressBars) {
+            const progressBar = group.findProgressValueFromRecord(record);
+            classes.push(`oe_kanban_card_${progressBar.color}`);
+        }
+        if (archInfo.cardColorField) {
+            const value = record.data[archInfo.cardColorField];
+            classes.push(getColorClass(value));
+        }
+        if (record.model.useSampleModel) {
+            classes.push("o_sample_data_disabled");
+        }
+        return classes.join(" ");
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    onGlobalClick(ev) {
+        if (ev.target.closest(CANCEL_GLOBAL_CLICK)) {
+            return;
+        }
+        const { archInfo, forceGlobalClick, openRecord, record } = this.props;
+        if (!forceGlobalClick && archInfo.openAction) {
+            this.action.doActionButton({
+                name: archInfo.openAction.action,
+                type: archInfo.openAction.type,
+                resModel: record.resModel,
+                resId: record.resId,
+                resIds: record.resIds,
+                context: record.context,
+                onClose: async () => {
+                    await record.model.root.load();
+                    record.model.notify();
+                },
+            });
+        } else if (forceGlobalClick || ev.target.closest(ALLOW_GLOBAL_CLICK)) {
+            openRecord(record);
+        }
+    }
+
+    async selectColor(colorIndex) {
+        const { archInfo, record } = this.props;
+        await record.update({ [archInfo.colorField]: colorIndex });
+        await record.save();
+    }
+
+    /**
+     * @param {Object} params
+     */
+    triggerAction(params) {
+        const env = this.env;
+        const { archInfo, group, list, openRecord, record } = this.props;
+        const { type } = params;
+        switch (type) {
+            case "edit": {
+                return openRecord(record, "edit");
+            }
+            case "open": {
+                return openRecord(record);
+            }
+            case "delete": {
+                const listOrGroup = group || list;
+                if (listOrGroup.deleteRecords) {
+                    this.dialog.add(ConfirmationDialog, {
+                        body: env._t("Are you sure you want to delete this record?"),
+                        confirm: () => listOrGroup.deleteRecords([record]),
+                        cancel: () => {},
+                    });
+                } else {
+                    // static list case
+                    listOrGroup.removeRecord(record);
+                }
+                return;
+            }
+            case "set_cover": {
+                const { fieldName, autoOpen } = params;
+                const { widget } = archInfo.fieldNodes[fieldName];
+                const field = record.fields[fieldName];
+                if (
+                    field.type === "many2one" &&
+                    field.relation === "ir.attachment" &&
+                    widget === "attachment_image"
+                ) {
+                    this.dialog.add(KanbanCoverImageDialog, { record, fieldName, autoOpen });
+                } else {
+                    const warning = sprintf(
+                        env._t(
+                            `Could not set the cover image: incorrect field ("%s") is provided in the view.`
+                        ),
+                        fieldName
+                    );
+                    this.notification.add({ title: warning, type: "danger" });
+                }
+                break;
+            }
+            default: {
+                return this.notification.add(env._t("Kanban: no action for type: ") + type, {
+                    type: "danger",
+                });
+            }
+        }
+    }
+
+    //-------------------------------------------------------------------------
+    // KANBAN SPECIAL GETTERS AND FUNCTIONS
+    //
+    // Note: the names of these getters and functions answer to outdated standards
+    // but should not be altered for the sake of compatibility.
+    //-------------------------------------------------------------------------
+
+    get context() {
+        return this.props.record.context;
+    }
+
+    get luxon() {
+        return luxon;
+    }
+
+    get read_only_mode() {
+        return this.props.readonly;
+    }
+
+    get selection_mode() {
+        return this.props.forceGlobalClick;
+    }
+
+    get user_context() {
+        return this.user.context;
+    }
+
+    kanban_color() {
+        return getColorClass(...arguments);
+    }
+
+    kanban_getcolor() {
+        return getColorIndex(...arguments);
+    }
+
+    kanban_getcolorname() {
+        return getColorName(...arguments);
+    }
+
+    kanban_image() {
+        return getImageSrcFromRecordInfo(this.props.record, ...arguments);
+    }
+}
+
+KanbanRecord.components = {
+    Dropdown,
+    DropdownItem,
+    Field,
+    KanbanCoverImageDialog,
+    ViewButton,
+    Widget,
+};
+KanbanRecord.defaultProps = {
+    colors: COLORS,
+    openRecord: () => {},
+};
+KanbanRecord.props = [
+    "archInfo",
+    "canResequence?",
+    "colors?",
+    "Compiler?",
+    "forceGlobalClick?",
+    "group?",
+    "list",
+    "openRecord?",
+    "readonly?",
+    "record",
+    "templates",
+];
+KanbanRecord.template = xml`<t t-call="{{ templateId }}" />`;
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.js b/addons/web/static/src/views/kanban/kanban_record_quick_create.js
new file mode 100644
index 00000000000..fcb85a69d0d
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.js
@@ -0,0 +1,62 @@
+/** @odoo-module */
+import { useService } from "@web/core/utils/hooks";
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { FormRenderer } from "@web/views/form/form_renderer";
+
+const { Component, onMounted, useExternalListener, useState, useRef } = owl;
+
+export class KanbanRecordQuickCreate extends Component {
+    setup() {
+        this.uiService = useService("ui");
+        this.rootRef = useRef("root");
+        this.state = useState({ disabled: false });
+        onMounted(() => {
+            this.uiActiveElement = this.uiService.activeElement;
+        });
+        // Close on outside click
+        useExternalListener(window, "mousedown", (/** @type {MouseEvent} */ ev) => {
+            // This target is kept in order to impeach close on outside click behavior if the click
+            // has been initiated from the quickcreate root element (mouse selection in an input...)
+            this.mousedownTarget = ev.target;
+        });
+        useExternalListener(
+            window,
+            "click",
+            (/** @type {MouseEvent} */ ev) => {
+                if (this.uiActiveElement !== this.uiService.activeElement) {
+                    // this component isn't in the current active element -> do nothing
+                    return;
+                }
+                const target = this.mousedownTarget || ev.target;
+                const gotClickedInside = this.rootRef.el.contains(target);
+                if (!gotClickedInside) {
+                    this.cancel(false);
+                }
+                this.mousedownTarget = null;
+            },
+            { capture: true }
+        );
+
+        // Key Navigation
+        // FIXME ? Maybe it will also validate even if enter is pressed outside of the quick create machin
+        useHotkey("enter", () => this.validate("add"), { bypassEditableProtection: true });
+        useHotkey("escape", () => this.cancel(true));
+    }
+
+    /** @param {boolean} force */
+    cancel(force) {
+        this.props.onCancel(force);
+    }
+
+    /** @param {"add" | "edit"} mode */
+    async validate(mode) {
+        if (this.state.disabled) {
+            return;
+        }
+        this.state.disabled = true;
+        await this.props.onValidate(mode);
+        this.state.disabled = false;
+    }
+}
+KanbanRecordQuickCreate.template = "web.KanbanRecordQuickCreate";
+KanbanRecordQuickCreate.components = { FormRenderer };
diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.xml b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
new file mode 100644
index 00000000000..db3c883b847
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanRecordQuickCreate" owl="1">
+        <div
+            class="o_kanban_quick_create"
+            t-att-class="{ o_disabled: state.disabled }"
+            t-ref="root"
+        >
+            <FormRenderer class="'o_form_view o_xxs_form_view'" record="props.record" archInfo="props.archInfo" />
+            <div class="d-flex">
+                <button class="btn btn-primary o_kanban_add mr-1 text_truncate" t-on-click="() => this.validate('add')">
+                    Add
+                </button>
+                <button class="btn btn-primary o_kanban_edit mr-1 text_truncate" t-on-click="() => this.validate('edit')">
+                    Edit
+                </button>
+                <button class="btn btn-secondary o_kanban_cancel ml-auto" t-on-click="() => this.cancel(true)">
+                    <i class="fa fa-trash" />
+                </button>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
new file mode 100644
index 00000000000..ee8b58c2b49
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -0,0 +1,567 @@
+/** @odoo-module **/
+
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { RPCError } from "@web/core/network/rpc_service";
+import { registry } from "@web/core/registry";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { useSortable } from "@web/core/utils/sortable";
+import { sprintf } from "@web/core/utils/strings";
+import { session } from "@web/session";
+import { isAllowedDateField } from "@web/views/relational_model";
+import { isRelational } from "@web/views/utils";
+import { FormViewDialog } from "web.view_dialogs";
+import { standaloneAdapter } from "web.OwlCompatibility";
+import { useBounceButton } from "@web/views/view_hook";
+import { KanbanAnimatedNumber } from "./kanban_animated_number";
+import { KanbanColumnQuickCreate } from "./kanban_column_quick_create";
+import { KanbanRecord } from "./kanban_record";
+import { KanbanRecordQuickCreate } from "./kanban_record_quick_create";
+
+const { Component, useState, useRef, onWillDestroy } = owl;
+
+function isNull(value) {
+    return [null, undefined].includes(value);
+}
+
+const DRAGGABLE_GROUP_TYPES = ["many2one"];
+const MOVABLE_RECORD_TYPES = ["char", "boolean", "integer", "selection", "many2one"];
+
+export class KanbanRenderer extends Component {
+    setup() {
+        this.dialogClose = [];
+        this.state = useState({
+            columnQuickCreateIsFolded:
+                !this.props.list.isGrouped || this.props.list.groups.length > 0,
+        });
+        this.dialog = useService("dialog");
+        this.exampleData = registry
+            .category("kanban_examples")
+            .get(this.props.archInfo.examples, null);
+        this.ghostColumns = this.generateGhostColumns();
+
+        // Sortable
+        let dataRecordId;
+        let dataGroupId;
+        const rootRef = useRef("root");
+        if (!this.env.isSmall) {
+            useSortable({
+                enable: () => this.canResequenceRecords,
+                // Params
+                ref: rootRef,
+                elements: ".o_record_draggable",
+                groups: () => this.props.list.isGrouped && ".o_kanban_group",
+                connectGroups: () => this.canMoveRecords,
+                cursor: "move",
+                // Hooks
+                onStart: (group, element) => {
+                    dataRecordId = element.dataset.id;
+                    if (group) {
+                        dataGroupId = group.dataset.id;
+                    }
+                    element.classList.add("o_dragged");
+                },
+                onGroupEnter: (group) => group.classList.add("o_kanban_hover"),
+                onGroupLeave: (group) => group.classList.remove("o_kanban_hover"),
+                onStop: (_group, element) => element.classList.remove("o_dragged"),
+                onDrop: async ({ element, previous, parent }) => {
+                    element.classList.remove("o_record_draggable");
+                    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");
+                },
+            });
+            useSortable({
+                enable: () => this.canResequenceGroups,
+                // Params
+                ref: rootRef,
+                elements: ".o_group_draggable",
+                handle: ".o_column_title",
+                cursor: "move",
+                // Hooks
+                onStart: (_group, element) => {
+                    dataGroupId = element.dataset.id;
+                    element.classList.add("o_dragged");
+                },
+                onStop: (_group, element) => element.classList.remove("o_dragged"),
+                onDrop: async ({ element, previous }) => {
+                    element.classList.remove("o_group_draggable");
+                    const refId = previous ? previous.dataset.id : null;
+                    await this.props.list.resequence(dataGroupId, refId);
+                    element.classList.add("o_group_draggable");
+                },
+            });
+        }
+
+        useBounceButton(rootRef, (clickedEl) => {
+            if (!this.props.list.count || this.props.list.model.useSampleModel) {
+                return clickedEl.matches(
+                    [
+                        ".o_kanban_renderer",
+                        ".o_kanban_group",
+                        ".o_kanban_header",
+                        ".o_column_quick_create",
+                        ".o_view_nocontent_smiling_face",
+                    ].join(", ")
+                );
+            }
+            return false;
+        });
+        onWillDestroy(() => {
+            this.dialogClose.forEach((close) => close());
+        });
+
+        useBus(this.env.searchModel, "focus-view", () => {
+            const { model } = this.props.list;
+            if (model.useSampleModel || !model.hasData()) {
+                return;
+            }
+            // Focus first kanban card
+            rootRef.el.querySelector(".o_kanban_record").focus();
+        });
+
+        useHotkey(
+            "Enter",
+            ({ target }) => {
+                if (!target.classList.contains("o_kanban_record")) {
+                    return;
+                }
+
+                // Open first link
+                const firstLink = target.querySelector("a, button");
+                if (firstLink && firstLink instanceof HTMLElement) {
+                    firstLink.click();
+                }
+                return;
+            },
+            { area: () => rootRef.el }
+        );
+
+        const arrowsOptions = { area: () => rootRef.el, allowRepeat: true };
+        useHotkey(
+            "ArrowUp",
+            ({ area }) => {
+                if (!this.focusNextCard(area, "up")) {
+                    this.env.searchModel.trigger("focus-search");
+                }
+            },
+            arrowsOptions
+        );
+        useHotkey("ArrowDown", ({ area }) => this.focusNextCard(area, "down"), arrowsOptions);
+        useHotkey("ArrowLeft", ({ area }) => this.focusNextCard(area, "left"), arrowsOptions);
+        useHotkey("ArrowRight", ({ area }) => this.focusNextCard(area, "right"), arrowsOptions);
+    }
+
+    // ------------------------------------------------------------------------
+    // Getters
+    // ------------------------------------------------------------------------
+
+    get canMoveRecords() {
+        if (!this.canResequenceRecords) {
+            return false;
+        }
+        if (!this.props.list.groupByField) {
+            return true;
+        }
+        const { groupByField } = this.props.list;
+        const { modifiers, type } = groupByField;
+        return Boolean(
+            !(modifiers && modifiers.readonly) &&
+                (isAllowedDateField(groupByField) || MOVABLE_RECORD_TYPES.includes(type))
+        );
+    }
+
+    get canResequenceGroups() {
+        if (!this.props.list.isGrouped) {
+            return false;
+        }
+        const { modifiers, type } = this.props.list.groupByField;
+        return !(modifiers && modifiers.readonly) && DRAGGABLE_GROUP_TYPES.includes(type);
+    }
+
+    get canResequenceRecords() {
+        const { isGrouped, orderBy } = this.props.list;
+        const { handleField, recordsDraggable } = this.props.archInfo;
+        return Boolean(
+            recordsDraggable &&
+                (isGrouped || (handleField && (!orderBy[0] || orderBy[0].name === handleField)))
+        );
+    }
+
+    get showNoContentHelper() {
+        const { model, isGrouped, groups } = this.props.list;
+        if (model.useSampleModel) {
+            return true;
+        }
+        if (isGrouped) {
+            if (!this.state.columnQuickCreateIsFolded) {
+                return false;
+            }
+            if (groups.length === 0) {
+                return true;
+            }
+        }
+        return !model.hasData();
+    }
+
+    /**
+     * When the kanban records are grouped, the 'false' or 'undefined' group
+     * must appear first.
+     * @returns {any[]}
+     */
+    getGroupsOrRecords() {
+        const { list } = this.props;
+        if (list.isGrouped) {
+            return list.groups
+                .sort((a, b) => (a.value && !b.value ? 1 : !a.value && b.value ? -1 : 0))
+                .map((group, i) => ({
+                    group,
+                    key: `group_key_${isNull(group.value) ? i : String(group.value)}`,
+                }));
+        } else {
+            return list.records.map((record) => ({ record, key: record.id }));
+        }
+    }
+
+    getGroupName({ groupByField, count, displayName, isFolded }) {
+        let name = displayName;
+        if (isNull(name)) {
+            name = this.env._t("None");
+        } else if (isRelational(groupByField)) {
+            name = name || this.env._t("None");
+        } else if (groupByField.type === "boolean") {
+            name = name ? this.env._t("Yes") : this.env._t("No");
+        }
+        return !this.env.isSmall && isFolded ? `${name} (${count})` : name;
+    }
+
+    getGroupClasses(group) {
+        const classes = [];
+        if (this.canResequenceGroups && group.value) {
+            classes.push("o_group_draggable");
+        }
+        if (!group.count) {
+            classes.push("o_kanban_no_records");
+        }
+        if (!this.env.isSmall && group.isFolded) {
+            classes.push("o_column_folded");
+        }
+        if (group.progressBars.length) {
+            classes.push("o_kanban_has_progressbar");
+            if (!group.isFolded && group.hasActiveProgressValue) {
+                const progressBar = group.activeProgressBar;
+                classes.push("o_kanban_group_show", `o_kanban_group_show_${progressBar.color}`);
+            }
+        }
+        return classes.join(" ");
+    }
+
+    getGroupUnloadedCount(group) {
+        const progressBar = group.activeProgressBar;
+        const records = group.getAggregableRecords();
+        return (progressBar ? progressBar.count : group.count) - records.length;
+    }
+
+    getGroupAggregate(group) {
+        const { sumField } = this.props.list.model.progressAttributes;
+        const value = group.getAggregates(sumField && sumField.name);
+        const title = sumField ? sumField.string : this.env._t("Count");
+        let currency = false;
+        if (sumField && value && sumField.currency_field) {
+            currency = session.currencies[session.company_currency_id];
+        }
+        return { value, currency, title };
+    }
+
+    generateGhostColumns() {
+        let colNames;
+        if (this.exampleData && this.exampleData.ghostColumns) {
+            colNames = this.exampleData.ghostColumns;
+        } else {
+            colNames = [1, 2, 3, 4].map((num) => sprintf(this.env._t("Column %s"), num));
+        }
+        return colNames.map((colName) => ({
+            name: colName,
+            cards: new Array(Math.floor(Math.random() * 4) + 2),
+        }));
+    }
+
+    // ------------------------------------------------------------------------
+    // Permissions
+    // ------------------------------------------------------------------------
+
+    canArchiveGroup(group) {
+        const { activeActions } = this.props.archInfo;
+        const hasActiveField = "active" in group.fields;
+        return activeActions.groupArchive && hasActiveField && !this.props.list.groupedBy("m2m");
+    }
+
+    canCreateGroup() {
+        const { activeActions } = this.props.archInfo;
+        return activeActions.groupCreate && this.props.list.groupedBy("m2o");
+    }
+
+    canDeleteGroup(group) {
+        const { activeActions } = this.props.archInfo;
+        const { groupByField } = this.props.list;
+        return activeActions.groupDelete && isRelational(groupByField) && group.value;
+    }
+
+    canDeleteRecord() {
+        const { activeActions } = this.props.archInfo;
+        return (
+            activeActions.delete &&
+            (!this.props.list.groupedBy || !this.props.list.groupedBy("m2m"))
+        );
+    }
+
+    canEditGroup(group) {
+        const { activeActions } = this.props.archInfo;
+        const { groupByField } = this.props.list;
+        return activeActions.groupEdit && isRelational(groupByField) && group.value;
+    }
+
+    canEditRecord() {
+        return this.props.archInfo.activeActions.edit;
+    }
+
+    // ------------------------------------------------------------------------
+    // Edition methods
+    // ------------------------------------------------------------------------
+
+    quickCreate(group) {
+        return this.props.list.quickCreate(group);
+    }
+
+    async validateQuickCreate(mode, group) {
+        const values = group.list.quickCreateRecord.data;
+        let record;
+        try {
+            record = await group.validateQuickCreate();
+        } catch (e) {
+            // TODO: filter RPC errors more specifically (eg, for access denied, there is no point in opening a dialog)
+            if (!(e instanceof RPCError)) {
+                throw e;
+            }
+            const context = { ...group.context };
+            context[`default_${group.groupByField.name}`] = group.value;
+            context.default_name = values.name || values.display_name;
+            // FIXME: since the new form view is not added to the registry yet, we
+            // can't use the new FormViewDialog, as it would instantiate the legacy
+            // form view. As a consequence, the control panel buttons would not be
+            // moved to the footer.
+            const adapterParent = standaloneAdapter({ Component });
+            const dialog = new FormViewDialog(adapterParent, {
+                res_model: this.props.list.resModel,
+                context,
+                title: this.env._t("Create"),
+                disable_multiple_selection: true,
+                on_saved: async (record) => {
+                    await group.load();
+                    this.props.list.quickCreate(group);
+                    this.props.list.model.notify();
+                },
+                // on_closed: () => {
+                //     this.props.list.quickCreate(group);
+                // },
+            });
+            dialog.open();
+            this.dialogClose.push(() => dialog.close());
+            // this.dialogClose.push(
+            //     this.dialog.add(
+            //         FormViewDialog,
+            //         {
+            //             resModel: this.props.list.resModel,
+            //             context,
+            //             title: this.env._t("Create"),
+            //             onRecordSaved: (record) => {
+            //                 group.addRecord(record, 0);
+            //             },
+            //         },
+            //         {
+            //             onClose: () => {
+            //                 this.props.list.quickCreate(group);
+            //             },
+            //         }
+            //     )
+            // );
+        }
+
+        if (record) {
+            if (mode === "edit") {
+                await this.props.openRecord(record, "edit");
+            } else {
+                await this.quickCreate(group);
+            }
+        }
+    }
+
+    toggleGroup(group) {
+        return group.toggle();
+    }
+
+    loadMore(group) {
+        return group.list.loadMore();
+    }
+
+    editGroup(group) {
+        // FIXME: since the new form view is not added to the registry yet, we
+        // can't use the new FormViewDialog, as it would instantiate the legacy
+        // form view. As a consequence, the control panel buttons would not be
+        // moved to the footer.
+        const adapterParent = standaloneAdapter({ Component });
+        const dialog = new FormViewDialog(adapterParent, {
+            res_model: group.resModel,
+            res_id: group.value,
+            context: group.context,
+            title: sprintf(this.env._t("Edit: %s"), group.displayName),
+            on_saved: async () => {
+                await this.props.list.load();
+                this.props.list.model.notify();
+            },
+        });
+        dialog.open();
+        this.dialogClose.push(() => dialog.close());
+        // this.dialogClose.push(
+        //     this.dialog.add(FormViewDialog, {
+        //         context: group.context,
+        //         resId: group.value,
+        //         resModel: group.resModel,
+        //         title: sprintf(this.env._t("Edit: %s"), group.displayName),
+
+        //         onRecordSaved: async () => {
+        //             await this.props.list.load();
+        //             this.props.list.model.notify();
+        //         },
+        //     })
+        // );
+    }
+
+    archiveGroup(group) {
+        this.dialog.add(ConfirmationDialog, {
+            body: this.env._t(
+                "Are you sure that you want to archive all the records from this column?"
+            ),
+            confirm: () => group.list.archive(),
+            cancel: () => {},
+        });
+    }
+
+    unarchiveGroup(group) {
+        group.list.unarchive();
+    }
+
+    deleteGroup(group) {
+        this.dialog.add(ConfirmationDialog, {
+            body: this.env._t("Are you sure you want to delete this column?"),
+            confirm: async () => {
+                await this.props.list.deleteGroups([group]);
+                if (this.props.list.groups.length === 0) {
+                    this.state.columnQuickCreateIsFolded = false;
+                }
+            },
+            cancel: () => {},
+        });
+    }
+
+    // ------------------------------------------------------------------------
+    // Handlers
+    // ------------------------------------------------------------------------
+
+    onGroupClick(group) {
+        if (!this.env.isSmall && group.isFolded) {
+            group.toggle();
+        }
+    }
+
+    /**
+     * Focus next card in the area within the chosen direction.
+     *
+     * @param {HTMLElement} area
+     * @param {"down"|"up"|"right"|"left"} direction
+     * @returns {true?} true if the next card has been focused
+     */
+    focusNextCard(area, direction) {
+        const { isGrouped } = this.props.list;
+        const groups = isGrouped ? [...area.querySelectorAll(".o_kanban_group")] : [area];
+        const cards = [...groups]
+            .map((group) => [...group.querySelectorAll(".o_kanban_record")])
+            .filter((group) => group.length);
+
+        // Search current card position
+        let iGroup;
+        let iCard;
+        for (iGroup = 0; iGroup < cards.length; iGroup++) {
+            const i = cards[iGroup].indexOf(document.activeElement);
+            if (i !== -1) {
+                iCard = i;
+                break;
+            }
+        }
+        // Find next card to focus
+        let nextCard;
+        switch (direction) {
+            case "down":
+                nextCard = iCard < cards[iGroup].length - 1 && cards[iGroup][iCard + 1];
+                break;
+            case "up":
+                nextCard = iCard > 0 && cards[iGroup][iCard - 1];
+                break;
+            case "right":
+                if (isGrouped) {
+                    nextCard = iGroup < cards.length - 1 && cards[iGroup + 1][0];
+                } else {
+                    nextCard = iCard < cards[0].length - 1 && cards[0][iCard + 1];
+                }
+                break;
+            case "left":
+                if (isGrouped) {
+                    nextCard = iGroup > 0 && cards[iGroup - 1][0];
+                } else {
+                    nextCard = iCard > 0 && cards[0][iCard - 1];
+                }
+                break;
+        }
+
+        if (nextCard && nextCard instanceof HTMLElement) {
+            nextCard.focus();
+            return true;
+        }
+    }
+
+    tooltipAttributes(group) {
+        if (!group.tooltip) {
+            return {};
+        }
+        return {
+            "data-tooltip-template": "web.KanbanGroupTooltip",
+            "data-tooltip-info": JSON.stringify(group.tooltip),
+        };
+    }
+}
+
+KanbanRenderer.props = [
+    "archInfo",
+    "list",
+    "openRecord",
+    "readonly",
+    "forceGlobalClick?",
+    "noContentHelp?",
+];
+KanbanRenderer.components = {
+    Dropdown,
+    DropdownItem,
+    KanbanAnimatedNumber,
+    KanbanColumnQuickCreate,
+    KanbanRecord,
+    KanbanRecordQuickCreate,
+};
+KanbanRenderer.template = "web.KanbanRenderer";
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
new file mode 100644
index 00000000000..29d146f867a
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -0,0 +1,196 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.KanbanRenderer" owl="1">
+        <div class="o_kanban_renderer o_renderer"
+            t-attf-class="o_kanban_{{ props.list.isGrouped ? '' : 'un' }}grouped {{ props.archInfo.className or '' }}"
+            t-ref="root"
+        >
+            <t t-foreach="getGroupsOrRecords()" t-as="groupOrRecord" t-key="groupOrRecord.key">
+                <t t-if="groupOrRecord.group">
+                    <t t-set="group" t-value="groupOrRecord.group" />
+                    <div class="o_kanban_group"
+                        t-att-class="getGroupClasses(group)"
+                        t-att-data-id="(canResequenceRecords or canResequenceGroups) and group.id"
+                        t-on-click="(ev) => this.onGroupClick(group, ev)"
+                    >
+                        <div class="o_kanban_header">
+                            <div class="o_kanban_header_title" t-att="tooltipAttributes(group)">
+                                <span class="o_column_title" t-esc="getGroupName(group)"/>
+                                <t t-if="env.isSmall or !group.isFolded">
+                                    <Dropdown class="'o_kanban_config'" togglerClass="'btn p-0'">
+                                        <t t-set-slot="toggler">
+                                            <i class="fa fa-gear" role="img" aria-label="Settings" title="Settings" />
+                                        </t>
+                                        <DropdownItem t-if="!env.isSmall" class="{
+                                                'o_kanban_toggle_fold': true,
+                                                'o_sample_data_disabled disabled': props.list.model.useSampleModel,
+                                            }" onSelected="() => this.toggleGroup(group)">
+                                            Fold
+                                        </DropdownItem>
+                                        <t t-if="canEditGroup(group)">
+                                            <DropdownItem class="'o_column_edit'" onSelected="() => this.editGroup(group)">
+                                                Edit Stage
+                                            </DropdownItem>
+                                        </t>
+                                        <t t-if="canDeleteGroup(group)">
+                                            <DropdownItem class="'o_column_delete'" onSelected="() => this.deleteGroup(group)">
+                                                Delete
+                                            </DropdownItem>
+                                        </t>
+                                        <t t-if="canArchiveGroup(group)">
+                                            <DropdownItem class="'o_column_archive_records'" onSelected="() => this.archiveGroup(group)">
+                                                Archive All
+                                            </DropdownItem>
+                                            <DropdownItem class="'o_column_unarchive_records'" onSelected="() => this.unarchiveGroup(group)">
+                                                Unarchive All
+                                            </DropdownItem>
+                                        </t>
+                                    </Dropdown>
+                                    <span t-if="props.list.canQuickCreate()" class="o_kanban_quick_add" t-on-click="() => this.quickCreate(group)">
+                                        <i class="fa fa-plus" role="img" aria-label="Quick add" title="Quick add" />
+                                    </span>
+                                </t>
+                                <span t-else="" class="o_column_unfold">
+                                    <i class="fa fa-arrows-h" role="img" aria-label="Unfold" title="Unfold" />
+                                </span>
+                            </div>
+                            <div t-if="(env.isSmall or !group.isFolded) and group.progressBars.length" class="o_kanban_counter">
+                                <div class="o_kanban_counter_progress progress">
+                                    <t t-foreach="group.progressBars" t-as="progressBar" t-key="progressBar.color">
+                                        <div t-if="progressBar.count"
+                                            role="progressbar"
+                                            class="progress-bar o_bar_has_records"
+                                            t-att-class="{ 'progress-bar-animated progress-bar-striped': group.progressValue.active === progressBar.value }"
+                                            t-attf-class="bg-{{ progressBar.color }}"
+                                            t-attf-style="width: {{ progressBar.count / (group.count or 1) * 100 }}%;"
+                                            aria-valuemin="0"
+                                            t-att-aria-valuemax="group.count"
+                                            t-att-aria-valuenow="progressBar.count"
+                                            t-attf-data-tooltip="{{ progressBar.count }} {{ progressBar.string }}"
+                                            data-tooltip-delay="0"
+                                            t-on-click="() => group.filterProgressValue(progressBar.value)"
+                                        />
+                                    </t>
+                                </div>
+                                <t t-set="aggregate" t-value="getGroupAggregate(group)" />
+                                <KanbanAnimatedNumber
+                                    value="aggregate.value"
+                                    title="aggregate.title"
+                                    duration="1000"
+                                    currency="aggregate.currency"
+                                    animationClass="aggregate.value > 999 ? 'o_kanban_grow' : 'o_kanban_grow_huge'"
+                                />
+                            </div>
+                        </div>
+                        <t t-if="!group.isFolded">
+                            <t t-foreach="group.list.records" t-as="record" t-key="record.id">
+                                <t t-if="record.isInQuickCreation and props.list.quickCreateInfo">
+                                    <KanbanRecordQuickCreate
+                                        record="record"
+                                        archInfo="props.list.quickCreateInfo"
+                                        onCancel="force => group.list.cancelQuickCreate(force)"
+                                        onValidate="mode => this.validateQuickCreate(mode, group)"
+                                    />
+                                </t>
+                                <t t-else="">
+                                    <KanbanRecord
+                                        archInfo="props.archInfo"
+                                        canResequence="canResequenceRecords"
+                                        forceGlobalClick="props.forceGlobalClick"
+                                        group="group"
+                                        list="props.list"
+                                        openRecord="props.openRecord"
+                                        readonly="props.readonly"
+                                        record="record"
+                                        templates="props.archInfo.templateDocs"
+                                    />
+                                </t>
+                            </t>
+                            <t t-set="unloadedCount" t-value="getGroupUnloadedCount(group)" />
+                            <div t-if="unloadedCount > 0" class="o_kanban_load_more">
+                                <button class="btn btn-outline-primary w-100 mt-4" t-on-click="() => this.loadMore(group)">Load more... (<t t-out="unloadedCount"/> remaining)</button>
+                            </div>
+                        </t>
+                        <t t-elif="env.isSmall">
+                            <t t-set="unloadedCount" t-value="getGroupUnloadedCount(group)" />
+                            <div t-if="unloadedCount > 0" class="o_kanban_load_more">
+                                <button class="btn btn-outline-primary w-100 mt-4" t-on-click="() => this.toggleGroup(group)">Load more... (<t t-out="unloadedCount"/> remaining)</button>
+                            </div>
+                        </t>
+                    </div>
+                </t>
+                <t t-else="">
+                    <KanbanRecord
+                        archInfo="props.archInfo"
+                        canResequence="canResequenceRecords"
+                        forceGlobalClick="props.forceGlobalClick"
+                        list="props.list"
+                        openRecord="props.openRecord"
+                        readonly="props.readonly"
+                        record="groupOrRecord.record"
+                        templates="props.archInfo.templateDocs"
+                    />
+                </t>
+            </t>
+            <t t-if="props.list.isGrouped">
+                <t t-if="canCreateGroup()">
+                    <KanbanColumnQuickCreate
+                        folded="state.columnQuickCreateIsFolded"
+                        onFoldChange="folded => state.columnQuickCreateIsFolded = props.list.groups.length > 0 and folded"
+                        onValidate="name => props.list.createGroup(name)"
+                        exampleData="exampleData"
+                    />
+                </t>
+                <!-- Kanban Example Background -->
+                <div t-if="props.list.groups.length === 0" class="o_kanban_example_background_container">
+                    <div class="o_kanban_example_background">
+                        <div class="o_kanban_examples">
+                            <div t-foreach="ghostColumns" t-as="column" t-key="column" class="o_kanban_examples_group">
+                                <h6><b t-esc="column.name"/></h6>
+                                <div t-foreach="column.cards" t-as="card" t-key="card_index" class="o_kanban_examples_ghost">
+                                    <div class="o_ghost_content"/>
+                                    <div class="o_ghost_content o_ghost_tag"/>
+                                    <!-- FIXME WOWL example avatar is white on white (also in legacy) -->
+                                    <img class="float-right o_ghost_avatar" src="/base/static/img/avatar.png" alt="Avatar"/>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </t>
+            <t t-else="">
+                <!-- kanban ghost cards are used to properly space last elements. -->
+                <div t-foreach="[,,,,,,]" t-as="i" t-key="i_index" class="o_kanban_record o_kanban_ghost" />
+            </t>
+            <t t-if="showNoContentHelper">
+                <t t-if="props.noContentHelp" t-call="web.ActionHelper">
+                    <t t-set="noContentHelp" t-value="props.noContentHelp"/>
+                </t>
+                <t t-else="" t-call="web.NoContentHelper"/>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.KanbanColorPicker" owl="1">
+        <ul class="oe_kanban_colorpicker">
+            <t t-foreach="props.colors" t-as="color" t-key="color">
+                <li role="menuitem" t-on-click="() => this.selectColor(color_index)" t-att-title="color" t-att-aria-label="color">
+                    <a href="#" t-attf-class="oe_kanban_color_{{ color_index }}" />
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <t t-name="web.KanbanGroupTooltip" owl="1">
+        <div>
+            <t t-foreach="info" t-as="entry" t-key="entry_index">
+                <t t-esc="entry.title"/>
+                <br/>
+                <t t-esc="entry.value"/>
+                <br t-if="!field_last"/>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_view.js b/addons/web/static/src/views/kanban/kanban_view.js
new file mode 100644
index 00000000000..a3586b47ea4
--- /dev/null
+++ b/addons/web/static/src/views/kanban/kanban_view.js
@@ -0,0 +1,42 @@
+/** @odoo-module **/
+
+import { KanbanArchParser } from "./kanban_arch_parser";
+import { KanbanController } from "./kanban_controller";
+import { KanbanModel } from "./kanban_model";
+import { KanbanRenderer } from "./kanban_renderer";
+import { registry } from "@web/core/registry";
+
+export const kanbanView = {
+    type: "kanban",
+
+    display_name: "Kanban",
+    icon: "oi oi-view-kanban",
+    isMobileFriendly: true,
+    multiRecord: true,
+
+    ArchParser: KanbanArchParser,
+    Controller: KanbanController,
+    Model: KanbanModel,
+    Renderer: KanbanRenderer,
+
+    buttonTemplate: "web.KanbanView.Buttons",
+
+    props: (genericProps, view) => {
+        const { arch, relatedModels, resModel } = genericProps;
+        const { ArchParser } = view;
+        const archInfo = new ArchParser().parse(arch, relatedModels, resModel);
+        const defaultGroupBy =
+            genericProps.searchMenuTypes.includes("groupBy") && archInfo.defaultGroupBy;
+
+        return {
+            ...genericProps,
+            Model: view.Model,
+            Renderer: view.Renderer,
+            buttonTemplate: view.buttonTemplate,
+            archInfo,
+            defaultGroupBy,
+        };
+    },
+};
+
+registry.category("views").add("kanban", kanbanView);
diff --git a/addons/web/static/src/views/list/list_arch_parser.js b/addons/web/static/src/views/list/list_arch_parser.js
new file mode 100644
index 00000000000..8c74e9a20a2
--- /dev/null
+++ b/addons/web/static/src/views/list/list_arch_parser.js
@@ -0,0 +1,182 @@
+/** @odoo-module */
+
+import { XMLParser } from "@web/core/utils/xml";
+import { Field } from "@web/views/fields/field";
+import {
+    archParseBoolean,
+    getActiveActions,
+    getDecoration,
+    processButton,
+    stringToOrderBy,
+} from "@web/views/utils";
+import { Widget } from "@web/views/widgets/widget";
+
+export class GroupListArchParser extends XMLParser {
+    parse(arch, models, modelName, jsClass) {
+        const fieldNodes = {};
+        const buttons = [];
+        let buttonId = 0;
+        this.visitXML(arch, (node) => {
+            if (node.tagName === "button") {
+                buttons.push({
+                    ...processButton(node),
+                    id: buttonId++,
+                });
+            } else if (node.tagName === "field") {
+                const fieldInfo = Field.parseFieldNode(node, models, modelName, "list", jsClass);
+                fieldNodes[fieldInfo.name] = fieldInfo;
+                node.setAttribute("field_id", fieldInfo.name);
+            }
+        });
+        return { fieldNodes, buttons };
+    }
+}
+
+export class ListArchParser extends XMLParser {
+    parse(arch, models, modelName) {
+        const xmlDoc = this.parseXML(arch);
+        const fieldNodes = {};
+        const columns = [];
+        const fields = models[modelName];
+        let buttonId = 0;
+        const groupBy = {
+            buttons: {},
+            fields: {},
+        };
+        let headerButtons = [];
+        const creates = [];
+        const groupListArchParser = new GroupListArchParser();
+        let buttonGroup;
+        let handleField = null;
+        let defaultOrder = stringToOrderBy(xmlDoc.getAttribute("default_order") || null);
+        const treeAttr = {};
+        let nextId = 0;
+        const activeFields = {};
+        this.visitXML(arch, (node) => {
+            if (node.tagName !== "button") {
+                buttonGroup = undefined;
+            }
+            if (node.tagName === "button") {
+                const button = {
+                    ...processButton(node),
+                    defaultRank: "btn-link",
+                    type: "button",
+                    id: buttonId++,
+                };
+                if (buttonGroup) {
+                    buttonGroup.buttons.push(button);
+                } else {
+                    buttonGroup = {
+                        id: `column_${nextId++}`,
+                        type: "button_group",
+                        buttons: [button],
+                        hasLabel: false,
+                    };
+                    columns.push(buttonGroup);
+                }
+            } else if (node.tagName === "field") {
+                const fieldInfo = Field.parseFieldNode(node, models, modelName, "list");
+                const invisible = node.getAttribute("invisible");
+                fieldNodes[fieldInfo.name] = fieldInfo;
+                node.setAttribute("field_id", fieldInfo.name);
+                if (fieldInfo.widget === "handle") {
+                    handleField = fieldInfo.name;
+                }
+                if (!invisible || !archParseBoolean(invisible)) {
+                    const displayName = fieldInfo.FieldComponent.displayName;
+                    columns.push({
+                        ...fieldInfo,
+                        id: `column_${nextId++}`,
+                        className: node.getAttribute("class"), // for oe_edit_only and oe_read_only
+                        optional: node.getAttribute("optional") || false,
+                        type: "field",
+                        hasLabel: !(fieldInfo.noLabel || fieldInfo.FieldComponent.noLabel),
+                        label:
+                            (fieldInfo.widget && displayName && displayName.toString()) ||
+                            fieldInfo.string,
+                    });
+                }
+            } else if (node.tagName === "widget") {
+                const widgetInfo = Widget.parseWidgetNode(node);
+                for (const [name, field] of Object.entries(widgetInfo.fieldDependencies)) {
+                    activeFields[name] = {
+                        name,
+                        type: field.type,
+                    };
+                }
+            } else if (node.tagName === "groupby" && node.getAttribute("name")) {
+                const fieldName = node.getAttribute("name");
+                const xmlSerializer = new XMLSerializer();
+                const groupByArch = xmlSerializer.serializeToString(node);
+                const coModelName = fields[fieldName].relation;
+                const groupByArchInfo = groupListArchParser.parse(groupByArch, models, coModelName);
+                groupBy.buttons[fieldName] = groupByArchInfo.buttons;
+                groupBy.fields[fieldName] = {
+                    activeFields: groupByArchInfo.fieldNodes,
+                    fieldNodes: groupByArchInfo.fieldNodes,
+                    fields: models[coModelName],
+                };
+                return false;
+            } else if (node.tagName === "header") {
+                // AAB: not sure we need to handle invisible="1" button as the usecase seems way
+                // less relevant than for fields (so for buttons, relying on the modifiers logic
+                // that applies later on could be enough, even if the value is always true)
+                headerButtons = [...node.children]
+                    .map((node) => ({
+                        ...processButton(node),
+                        type: "button",
+                        id: buttonId++,
+                    }))
+                    .filter((button) => button.modifiers.invisible !== true);
+                return false;
+            } else if (node.tagName === "create") {
+                creates.push({
+                    context: node.getAttribute("context"),
+                    description: node.getAttribute("string"),
+                });
+            } else if (["tree", "list"].includes(node.tagName)) {
+                const activeActions = {
+                    ...getActiveActions(xmlDoc),
+                    exportXlsx: archParseBoolean(xmlDoc.getAttribute("export_xlsx"), true),
+                };
+                treeAttr.activeActions = activeActions;
+
+                treeAttr.editable = activeActions.edit ? xmlDoc.getAttribute("editable") : false;
+                treeAttr.multiEdit = activeActions.edit
+                    ? archParseBoolean(node.getAttribute("multi_edit") || "")
+                    : false;
+
+                const limitAttr = node.getAttribute("limit");
+                treeAttr.limit = limitAttr && parseInt(limitAttr, 10);
+
+                const groupsLimitAttr = node.getAttribute("groups_limit");
+                treeAttr.groupsLimit = groupsLimitAttr && parseInt(groupsLimitAttr, 10);
+
+                treeAttr.noOpen = archParseBoolean(node.getAttribute("no_open") || "");
+                treeAttr.expand = archParseBoolean(xmlDoc.getAttribute("expand") || "");
+                treeAttr.decorations = getDecoration(xmlDoc);
+            }
+        });
+
+        if (!defaultOrder.length && handleField) {
+            defaultOrder = stringToOrderBy(handleField);
+        }
+
+        for (const [key, field] of Object.entries(fieldNodes)) {
+            activeFields[key] = field; // TODO process
+        }
+
+        return {
+            creates,
+            handleField,
+            headerButtons,
+            fieldNodes,
+            activeFields,
+            columns,
+            groupBy,
+            defaultOrder,
+            __rawArch: arch,
+            ...treeAttr,
+        };
+    }
+}
diff --git a/addons/web/static/src/views/list/list_confirmation_dialog.js b/addons/web/static/src/views/list/list_confirmation_dialog.js
new file mode 100644
index 00000000000..bdc71ad1464
--- /dev/null
+++ b/addons/web/static/src/views/list/list_confirmation_dialog.js
@@ -0,0 +1,52 @@
+/** @odoo-module */
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { _lt } from "@web/core/l10n/translation";
+import { Field } from "@web/views/fields/field";
+import { useAutofocus } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+
+export class ListConfirmationDialog extends Component {
+    setup() {
+        useAutofocus();
+    }
+
+    _cancel() {
+        if (this.props.cancel) {
+            this.props.cancel();
+        }
+        this.props.close();
+    }
+
+    async _confirm() {
+        if (this.props.confirm) {
+            await this.props.confirm();
+        }
+        this.props.close();
+    }
+}
+ListConfirmationDialog.template = "web.ListView.ConfirmationModal";
+ListConfirmationDialog.components = { Dialog, Field };
+ListConfirmationDialog.props = {
+    close: Function,
+    title: {
+        validate: (m) => {
+            return (
+                typeof m === "string" || (typeof m === "object" && typeof m.toString === "function")
+            );
+        },
+        optional: true,
+    },
+    confirm: { type: Function, optional: true },
+    cancel: { type: Function, optional: true },
+    isDomainSelected: Boolean,
+    fields: Object,
+    nbRecords: Number,
+    nbValidRecords: Number,
+    record: Object,
+    fieldNodes: Object,
+};
+ListConfirmationDialog.defaultProps = {
+    title: _lt("Confirmation"),
+};
diff --git a/addons/web/static/src/views/list/list_confirmation_dialog.xml b/addons/web/static/src/views/list/list_confirmation_dialog.xml
new file mode 100644
index 00000000000..1b99d856416
--- /dev/null
+++ b/addons/web/static/src/views/list/list_confirmation_dialog.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ListView.ConfirmationModal" owl="1">
+        <Dialog size="'md'" title="props.title">
+            <main role="alert">
+                <p>
+                    <t t-if="props.isDomainSelected">This update will only consider the records of the current page.<br/><br/></t>
+                    <t t-if="props.nbRecords != props.nbValidRecords">
+                        Among the <t t-esc="props.nbRecords"/> selected records,
+                        <t t-esc="props.nbValidRecords"/> are valid for this update.<br/>
+                    </t>
+                    Are you sure you want to perform the following update on those <t t-esc="props.nbValidRecords"/> records ?
+                </p>
+                <div class="table-responsive">
+                    <table class="o_modal_changes">
+                        <tbody>
+                            <t t-foreach="props.fields" t-as="field" t-key="field_index">
+                                <tr>
+                                    <td>Field:</td>
+                                    <td><t t-esc="field.label"/></td>
+                                </tr>
+                                <tr>
+                                    <td>Update to:</td>
+                                    <td style="pointer-events: none;">
+                                        <Field name="field.name" record="props.record" type="field.widget" readonly="true" fieldInfo="props.fieldNodes[field.name]"/>
+                                    </td>
+                                </tr>
+                            </t>
+                        </tbody>
+                    </table>
+                </div>
+            </main>
+            <t t-set-slot="footer" owl="1">
+                <button class="btn btn-primary" t-on-click="_confirm" t-ref="autofocus">
+                Ok
+                </button>
+                <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel">
+                Cancel
+                </button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/list/list_controller.js b/addons/web/static/src/views/list/list_controller.js
new file mode 100644
index 00000000000..1d4a585fd12
--- /dev/null
+++ b/addons/web/static/src/views/list/list_controller.js
@@ -0,0 +1,428 @@
+/** @odoo-module */
+
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { download } from "@web/core/network/download";
+import { DynamicRecordList } from "@web/views/relational_model";
+import { useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+import { ActionMenus } from "@web/search/action_menus/action_menus";
+import { Layout } from "@web/search/layout";
+import { usePager } from "@web/search/pager_hook";
+import { session } from "@web/session";
+import { useModel } from "@web/views/model";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useSetupView } from "@web/views/view_hook";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { useViewButtons } from "@web/views/view_button/view_button_hook";
+import { ExportDataDialog } from "@web/views/view_dialogs/export_data_dialog";
+
+const { Component, onWillStart, useSubEnv, useEffect, useRef } = owl;
+
+export class ListViewHeaderButton extends ViewButton {
+    async onClick() {
+        const clickParams = this.props.clickParams;
+        const resIds = await this.props.getSelectedResIds();
+        const resModel = this.props.resModel;
+        clickParams.buttonContext = {
+            active_domain: this.props.domain,
+            // active_id: resIds[0], // FGE TODO
+            active_ids: resIds,
+            active_model: resModel,
+        };
+
+        this.env.onClickViewButton({
+            clickParams,
+            record: { resModel, resIds },
+        });
+    }
+}
+ListViewHeaderButton.props = [...ViewButton.props, "resModel", "domain", "getSelectedResIds"];
+
+// -----------------------------------------------------------------------------
+
+export class ListController extends Component {
+    setup() {
+        this.actionService = useService("action");
+        this.dialogService = useService("dialog");
+        this.notificationService = useService("notification");
+        this.userService = useService("user");
+        this.rpc = useService("rpc");
+        this.rootRef = useRef("root");
+
+        this.archInfo = this.props.archInfo;
+        this.editable = this.props.editable ? this.archInfo.editable : false;
+        this.multiEdit = this.archInfo.multiEdit;
+        this.activeActions = this.archInfo.activeActions;
+        const fields = this.props.fields;
+        const { rootState } = this.props.state || {};
+        this.model = useModel(this.props.Model, {
+            resModel: this.props.resModel,
+            fields,
+            activeFields: this.archInfo.activeFields,
+            fieldNodes: this.archInfo.fieldNodes,
+            handleField: this.archInfo.handleField,
+            viewMode: "list",
+            groupByInfo: this.archInfo.groupBy.fields,
+            limit: this.archInfo.limit || this.props.limit,
+            defaultOrder: this.archInfo.defaultOrder,
+            expand: this.archInfo.expand,
+            groupsLimit: this.archInfo.groupsLimit,
+            multiEdit: this.multiEdit,
+            rootState,
+        });
+
+        onWillStart(async () => {
+            this.isExportEnable = await this.userService.hasGroup("base.group_allow_export");
+        });
+
+        this.archiveEnabled =
+            "active" in fields
+                ? !fields.active.readonly
+                : "x_active" in fields
+                ? !fields.x_active.readonly
+                : false;
+        useSubEnv({ model: this.model }); // do this in useModel?
+        useViewButtons(this.model, this.rootRef);
+        useSetupView({
+            rootRef: this.rootRef,
+            beforeLeave: async () => {
+                const editedRecord = this.model.root.editedRecord;
+                if (editedRecord) {
+                    if (!(await editedRecord.save())) {
+                        throw new Error("View can't be saved");
+                    }
+                }
+            },
+            beforeUnload: () => {
+                const editedRecord = this.model.root.editedRecord;
+                if (editedRecord) {
+                    return editedRecord.urgentSave();
+                }
+            },
+            getLocalState: () => {
+                return {
+                    rootState: this.model.root.exportState(),
+                };
+            },
+        });
+
+        usePager(() => {
+            const list = this.model.root;
+            return {
+                offset: list.offset,
+                limit: list.limit,
+                total: list.count,
+                onUpdate: async ({ offset, limit }, hasNavigated) => {
+                    if (this.model.root.editedRecord) {
+                        if (!(await this.model.root.editedRecord.save())) {
+                            return;
+                        }
+                    }
+                    await list.load({ limit, offset });
+                    this.render(true); // FIXME WOWL reactivity
+                    if (hasNavigated) {
+                        this.onPageChangeScroll();
+                    }
+                },
+            };
+        });
+
+        useEffect(
+            () => {
+                if (this.props.onSelectionChanged) {
+                    const resIds = this.model.root.selection.map((record) => record.resId);
+                    this.props.onSelectionChanged(resIds);
+                }
+            },
+            () => [this.model.root.selection.length]
+        );
+    }
+
+    async createRecord({ group } = {}) {
+        const list = (group && group.list) || this.model.root;
+        if (this.editable) {
+            if (!(list instanceof DynamicRecordList)) {
+                throw new Error("List should be a DynamicRecordList");
+            }
+            if (list.editedRecord) {
+                await list.editedRecord.save();
+            }
+            if (!list.editedRecord) {
+                await (group || list).createRecord({}, this.editable === "top");
+            }
+            this.render();
+        } else {
+            await this.props.createRecord();
+        }
+    }
+
+    async openRecord(record) {
+        const activeIds = this.model.root.records.map((datapoint) => datapoint.resId);
+        this.props.selectRecord(record.resId, { activeIds });
+    }
+
+    onClickCreate() {
+        this.createRecord();
+    }
+
+    onClickDiscard() {
+        const editedRecord = this.model.root.editedRecord;
+        if (editedRecord.isVirtual) {
+            this.model.root.removeRecord(editedRecord);
+        } else {
+            editedRecord.discard();
+        }
+    }
+
+    onClickSave() {
+        this.model.root.editedRecord.save();
+    }
+
+    onMouseDownDiscard(mouseDownEvent) {
+        const list = this.model.root;
+        list.blockUpdate = true;
+        document.addEventListener(
+            "mouseup",
+            (mouseUpEvent) => {
+                if (mouseUpEvent.target !== mouseDownEvent.target) {
+                    list.blockUpdate = false;
+                    list.multiSave(list.editedRecord);
+                }
+            },
+            { capture: true, once: true }
+        );
+    }
+
+    onPageChangeScroll() {
+        if (this.rootRef && this.rootRef.el) {
+            this.rootRef.el.querySelector(".o_content").scrollTop = 0;
+        }
+    }
+
+    getSelectedResIds() {
+        return this.model.root.getResIds(true);
+    }
+
+    getActionMenuItems() {
+        const isM2MGrouped = this.model.root.isM2MGrouped;
+        const otherActionItems = [];
+        if (this.isExportEnable) {
+            otherActionItems.push({
+                description: this.env._t("Export"),
+                callback: () => this.onExportData(),
+            });
+        }
+        if (this.archiveEnabled && !isM2MGrouped) {
+            otherActionItems.push({
+                description: this.env._t("Archive"),
+                callback: () => {
+                    const dialogProps = {
+                        body: this.env._t(
+                            "Are you sure that you want to archive all the selected records?"
+                        ),
+                        confirm: () => {
+                            this.toggleArchiveState(true);
+                        },
+                        cancel: () => {},
+                    };
+                    this.dialogService.add(ConfirmationDialog, dialogProps);
+                },
+            });
+            otherActionItems.push({
+                description: this.env._t("Unarchive"),
+                callback: () => this.toggleArchiveState(false),
+            });
+        }
+        if (this.activeActions.delete && !isM2MGrouped) {
+            otherActionItems.push({
+                description: this.env._t("Delete"),
+                callback: () => this.onDeleteSelectedRecords(),
+            });
+        }
+        return Object.assign({}, this.props.info.actionMenus, { other: otherActionItems });
+    }
+
+    async onSelectDomain() {
+        this.model.root.selectDomain(true);
+        if (this.props.onSelectionChanged) {
+            const resIds = await this.model.root.getResIds(true);
+            this.props.onSelectionChanged(resIds);
+        }
+    }
+
+    get nbSelected() {
+        return this.model.root.selection.length;
+    }
+
+    get isPageSelected() {
+        const root = this.model.root;
+        return root.selection.length === root.records.length;
+    }
+
+    get isDomainSelected() {
+        return this.model.root.isDomainSelected;
+    }
+
+    get nbTotal() {
+        const list = this.model.root;
+        return list.isGrouped ? list.nbTotalRecords : list.count;
+    }
+
+    async downloadExport(fields, import_compat, format) {
+        const resIds = await this.getSelectedResIds();
+        const exportedFields = fields.map((field) => ({
+            name: field.name || field.id,
+            label: field.label || field.string,
+            store: field.store,
+            type: field.field_type,
+        }));
+        if (import_compat) {
+            exportedFields.unshift({ name: "id", label: this.env._t("External ID") });
+        }
+        await download({
+            data: {
+                data: JSON.stringify({
+                    import_compat,
+                    context: this.props.context,
+                    domain: this.model.root.domain,
+                    fields: exportedFields,
+                    groupby: this.model.root.groupBy,
+                    ids: resIds.length > 0 && resIds,
+                    model: this.model.root.resModel,
+                }),
+            },
+            url: `/web/export/${format}`,
+        });
+    }
+
+    async getExportedFields(model, import_compat, parentParams) {
+        return await this.rpc("/web/export/get_fields", {
+            ...parentParams,
+            model,
+            import_compat,
+        });
+    }
+
+    /**
+     * Opens the Export Dialog
+     *
+     * @private
+     */
+    async onExportData() {
+        const resIds = await this.getSelectedResIds();
+        const dialogProps = {
+            resIds,
+            context: this.props.context,
+            download: this.downloadExport.bind(this),
+            getExportedFields: this.getExportedFields.bind(this),
+            root: this.model.root,
+        };
+        this.dialogService.add(ExportDataDialog, dialogProps);
+    }
+    /**
+     * Export Records in a xls file
+     *
+     * @private
+     */
+    async onDirectExportData() {
+        const fields = await this.getExportedFields(this.model.root.resModel, true);
+        await this.downloadExport(
+            fields.filter((field) => this.model.root.activeFields[field.id]),
+            false,
+            "xlsx"
+        );
+    }
+    /**
+     * Called when clicking on 'Archive' or 'Unarchive' in the sidebar.
+     *
+     * @private
+     * @param {boolean} archive
+     * @returns {Promise}
+     */
+    async toggleArchiveState(archive) {
+        let resIds;
+        const isDomainSelected = this.model.root.isDomainSelected;
+        const total = this.model.root.count;
+        if (archive) {
+            resIds = await this.model.root.archive(true);
+        } else {
+            resIds = await this.model.root.unarchive(true);
+        }
+        if (
+            isDomainSelected &&
+            resIds.length === session.active_ids_limit &&
+            resIds.length < total
+        ) {
+            this.notificationService.add(
+                sprintf(
+                    this.env._t(
+                        "Of the %d records selected, only the first %d have been archived/unarchived."
+                    ),
+                    resIds.length,
+                    total
+                ),
+                { title: this.env._t("Warning") }
+            );
+        }
+    }
+
+    async onDeleteSelectedRecords() {
+        const root = this.model.root;
+        const body =
+            root.isDomainSelected || root.selection.length > 1
+                ? this.env._t("Are you sure you want to delete these records?")
+                : this.env._t("Are you sure you want to delete this record?");
+        const dialogProps = {
+            body,
+            confirm: async () => {
+                const total = root.count;
+                const resIds = await this.model.root.deleteRecords();
+                if (
+                    root.isDomainSelected &&
+                    resIds.length === session.active_ids_limit &&
+                    resIds.length < total
+                ) {
+                    this.notificationService.add(
+                        sprintf(
+                            this.env._t(
+                                `Only the first %s records have been deleted (out of %s selected)`
+                            ),
+                            resIds.length,
+                            total
+                        ),
+                        { title: this.env._t("Warning") }
+                    );
+                }
+            },
+            cancel: () => {},
+        };
+        this.dialogService.add(ConfirmationDialog, dialogProps);
+    }
+
+    discardSelection() {
+        this.model.root.records.forEach((record) => {
+            record.toggleSelection(false);
+        });
+    }
+}
+
+ListController.template = `web.ListView`;
+ListController.components = { ActionMenus, ListViewHeaderButton, Layout, ViewButton };
+ListController.props = {
+    ...standardViewProps,
+    editable: { type: Boolean, optional: true },
+    hasSelectors: { type: Boolean, optional: true },
+    onSelectionChanged: { type: Function, optional: true },
+    showButtons: { type: Boolean, optional: true },
+    Model: Function,
+    Renderer: Function,
+    buttonTemplate: String,
+    archInfo: Object,
+};
+ListController.defaultProps = {
+    createRecord: () => {},
+    editable: true,
+    hasSelectors: true,
+    selectRecord: () => {},
+    showButtons: true,
+};
diff --git a/addons/web/static/src/views/list/list_controller.scss b/addons/web/static/src/views/list/list_controller.scss
new file mode 100644
index 00000000000..e3ddd06f0ff
--- /dev/null
+++ b/addons/web/static/src/views/list/list_controller.scss
@@ -0,0 +1,372 @@
+.o_list_renderer {
+    position: relative;
+
+    .o_list_table {
+        position: relative;
+        cursor: pointer;
+        background-color: $o-view-background-color;
+        margin-bottom: 0px;
+
+        // Don't understand why but without those, the list view appears broken
+        // in both form views and standalone list views.
+        border-collapse: initial;
+        border-spacing: 0;
+
+        thead {
+            color: $table-head-color;
+            border-bottom: 1px solid #cacaca;
+            > tr > th:not(.o_list_record_selector) {
+                border-left: 1px solid #dfdfdf;
+                @include o-text-overflow(table-cell);
+                &:not(.o_column_sortable):hover {
+                    cursor: default;
+                }
+                &.o_list_number_th {
+                    text-align: right;
+                }
+            }
+        }
+        tbody > tr > td:not(.o_list_record_selector) {
+            &:not(.o_handle_cell):not(.o_list_button):not(.o_state_selection_cell) {
+                @include o-text-overflow(table-cell);
+                &.o_list_text {
+                    white-space: pre-wrap;
+                }
+            }
+
+            &.o_list_number {
+                text-align: right;
+            }
+            &.o_list_text {
+                word-break: break-word;
+            }
+            &.o_list_char.o_color_cell .o_field_color {
+                width: 17px;
+                height: 17px;
+            }
+            &.o_list_button {
+                white-space: nowrap;
+                > button {
+                    padding: 0 5px;
+                    &:not(:last-child) {
+                        margin-right: 3px;
+                    }
+                }
+            }
+        }
+        &.o_list_computing_widths {
+            > tbody > tr > td {
+                &.o_list_text, // text field, className on the td
+                > .o_field_text { // text field with widget, className inside the td
+                    white-space: pre !important;
+                }
+            }
+        }
+
+        tfoot {
+            cursor: default;
+            color: $o-list-footer-color;
+            background-color: $o-list-footer-bg-color;
+            font-weight: $o-list-footer-font-weight;
+            border-top: 2px solid #cacaca;
+            border-bottom: 1px solid #cacaca;
+
+            > tr > td {
+                @include o-text-overflow(table-cell);
+            }
+            .o_list_number {
+                text-align: right;
+            }
+        }
+
+        .o_column_sortable:not(.o_handle_cell) {
+            position: relative;
+            user-select: none;  // Prevent unwanted selection while sorting
+
+            &::after {
+                font-family: FontAwesome;
+                content: "\f0d7";
+                opacity: 0;
+            }
+            &:not(:empty)::after {
+                margin-left: 6px;
+            }
+            &.o-sort-up {
+                cursor: n-resize;
+                &::after {
+                    content: "\f0d7";
+                }
+            }
+            &.o-sort-down {
+                cursor: s-resize;
+                &::after {
+                    content: "\f0d8";
+                }
+            }
+            &:hover::after {
+                opacity: 0.3;
+            }
+            &.o-sort-up, &.o-sort-down {
+                color: $headings-color;
+                &::after {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .o_list_record_selector {
+            width: 40px;
+            padding-left: $o-horizontal-padding;
+            .custom-control-label {
+                cursor: pointer;
+            }
+        }
+        .o_list_record_remove, .o_handle_cell {
+            width: 1px;  // to prevent the column to expand
+        }
+
+        .o_list_record_remove button {
+            padding: 0px;
+            background: none;
+            border-style: none;
+            display: table-cell;
+            cursor: pointer;
+        }
+
+        // Grouped list views
+        tbody > tr.o_group_header {
+            > th, > td {
+                vertical-align: middle;
+                padding-top: 5px;
+                padding-bottom: 5px;
+            }
+            .o_group_name {
+                @include o-text-overflow(table-cell);
+            }
+            .o_group_buttons {
+                display: inline-block;
+                margin-left: 10px;
+
+                > button {
+                    @include o-hover-text-color($o-brand-primary, darken($o-brand-primary, 20%));
+                    background-color: transparent;
+                    border: none;
+                    padding-top: 0;
+                    padding-bottom: 0;
+                }
+            }
+            .o_pager {
+                cursor: text;
+                user-select: none;
+                text-align: right;
+                padding-top: 0 !important;
+                padding-bottom: 0 !important;
+                margin-top: -2px;
+                margin-bottom: -2px;
+
+                .o_pager_previous, .o_pager_next {
+                    max-height: 30px;
+                    padding: 0 5px;
+                    background-color: lighten($o-brand-lightsecondary, 10%);
+                    &:hover {
+                        background-color: $o-brand-lightsecondary;
+                    }
+                }
+            }
+        }
+        tbody + tbody {
+            border-top: none;  // Override bootstrap for grouped list views
+        }
+
+        &, &.table-striped {
+            tr:focus-within {
+                background-color: lighten($o-form-lightsecondary, 10%);
+            }
+        }
+        thead th:focus-within,
+        tbody.o_keyboard_navigation td:focus-within {
+            background-color: $o-form-lightsecondary;
+            outline: none;
+        }
+
+        .o_data_cell.o_text_overflow,
+        .o_data_cell.o_invisible_modifier {
+            // Override display: none to keep table cells aligned. Note: cannot use
+            // 'initial' as it will force them to 'inline', not 'table-cell'.
+            display: table-cell!important;
+        }
+
+        &.o_resizing tr > :not(.o_column_resizing) {
+            opacity: 0.5;
+        }
+
+        &.o_empty_list {
+            table-layout: fixed;
+        }
+
+        th {
+            position: relative;
+        }
+
+        span.o_resize {
+            bottom: 0;
+            cursor: col-resize;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 10px;
+            z-index: 1; // must be over the sort caret (::after pseudo-element)
+        }
+
+        .o_list_record_remove_header {
+            width: 32px;
+        }
+
+        .o_data_row.o_list_no_open {
+            cursor: default;
+        }
+
+        .o_data_row:not(.o_selected_row) .o_data_cell {
+
+            // Boolean fields in non-selected rows completely disabled.
+            .custom-checkbox {
+                pointer-events: none;
+            }
+
+            // These widgets enable the checkbox if there is no readonly modifier.
+            &.o_boolean_button_cell,
+            &.o_boolean_favorite_cell,
+            &.o_boolean_toggle_cell,
+            &.o_toggle_button_cell {
+                > .o_field_widget:not(.o_readonly_modifier) .custom-checkbox {
+                    pointer-events: auto;
+                }
+            }
+            &.o_many2many_avatar_user_cell {
+                .o_field_many2manytags {
+                    > span {
+                        margin-right: 2px;
+                    }
+                }
+            }
+        }
+
+        .o_data_row:not(.o_selected_row) {
+            .o_list_many2one,
+            .o_list_char,
+            .o_list_number {
+                white-space: nowrap;
+                .o_field_widget:not(.o_row_handle):not(.o_field_badge) {
+                    display: inline;
+                }
+            }
+        }
+
+        .o_data_row.o_selected_row > .o_data_cell {
+            position: relative; // for o_field_translate
+            &:not(.o_handle_cell) {
+                background-color: white;
+            }
+            > .o_field_widget:not(.o_readonly_modifier):not(.o_invisible_modifier) {
+                width: 100%;
+                .o_input {
+                    border: none;
+                    padding: 0;
+                }
+                &.o_field_text {
+                    vertical-align: top;
+                }
+                &.o_field_many2one {
+                    .o_external_button {
+                        padding: 0;
+                        border: none;
+                        background-color: inherit;
+                        margin-left: 5px;
+                        font-size: 12px;
+                    }
+                }
+                &.o_field_monetary input {
+                    width: 0; // override width: 100px and let flex makes this input grow
+                    margin: 0 4px;
+                }
+                &.o_field_many2manytags > .o_field_many2one {
+                    // reduce basis to prevent many2one input from going to the next line to often
+                    flex-basis: 40px;
+                }
+                &.o_field_badge {
+                    width: auto; // override width: 100% to keep the optimal badge width
+                }
+                .o_input_dropdown, .o_datepicker {
+                    > .o_input {
+                        padding-right: 15px; // to prevent caret overlapping
+                    }
+                    > .o_dropdown_button, .o_datepicker_button {
+                        margin-right: 5px;
+                        @include o-position-absolute(0, 0);
+                    }
+                }
+                > input.o_field_translate, textarea.o_field_translate {
+                    padding-right: 25px;
+                    + span.o_field_translate {
+                        margin-left: -35px;
+                        padding: 0px 1px;
+                        text-align: right;
+                        width: 35px;
+                        vertical-align: top;
+                        font-size: 12px;
+                    }
+                }
+                > .o_row_handle {
+                    visibility: hidden; // hide sequence when editing
+                }
+            }
+        }
+
+        .o_field_x2many_list_row_add, .o_group_field_row_add {
+            a:focus, a:active {
+                color: $link-hover-color;
+                outline: none;
+            }
+        }
+    }
+
+    // Optional fields
+    &.o_list_optional_columns {
+        th:last-child {
+            padding-right: 15px;
+        }
+    }
+
+    .o_optional_columns_dropdown,.o_optional_columns {
+        @include o-position-absolute($top: 0, $right: 0);
+    }
+
+    .o_optional_columns_dropdown {
+        .dropdown-toggle {
+            padding: 0 5px;
+            text-align: center;
+            line-height: 30px;
+            z-index: 1; // must be over the resize handle
+            background: none;
+            color: inherit;
+            border: none;
+        }
+    }
+
+    .o_optional_columns {
+        .o_optional_columns_dropdown {
+            margin-top: 30px;
+            user-select: none;
+            .dropdown-item {
+                label {
+                    padding-left: 10px;
+                }
+            }
+        }
+    }
+}
+
+.o_wowl_list_view.o_view_controller > .o_content > .table-responsive {
+    // in main list views, let .o_content scroll
+    overflow: visible;
+}
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
new file mode 100644
index 00000000000..53d05c3dc18
--- /dev/null
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ListView" owl="1">
+        <div t-att-class="props.className" t-ref="root">
+            <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
+                <t t-set-slot="layout-buttons">
+                    <t t-if="env.isSmall and nbSelected">
+                        <t t-call="web.ListView.Selection" />
+                    </t>
+                    <t t-else="">
+                        <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
+                            <t t-call="{{ props.buttonTemplate }}"/>
+                        </div>
+                    </t>
+                </t>
+                <t t-set-slot="control-panel-bottom-left">
+                    <t t-if="props.info.actionMenus and model.root.selection.length">
+                        <ActionMenus
+                            activeIds="model.root.selection.map((r) => r.resId)"
+                            context="props.context"
+                            domain="props.domain"
+                            items="getActionMenuItems()"
+                            isDomainSelected="model.root.isDomainSelected"
+                            resModel="model.root.resModel"/>
+                    </t>
+                </t>
+                <t t-component="props.Renderer" list="model.root" activeActions="activeActions" archInfo="archInfo" hasSelectors="props.hasSelectors" editable="editable" openRecord.bind="openRecord" noContentHelp="props.info.noContentHelp" onAdd.bind="createRecord"/>
+            </Layout>
+        </div>
+    </t>
+
+    <t t-name="web.ListView.Buttons" owl="1">
+        <div class="o_list_buttons d-flex" role="toolbar" aria-label="Main actions">
+            <t t-if="props.showButtons">
+                <t t-if="model.root.editedRecord">
+                    <button type="button" class="btn btn-primary o_list_button_save" data-tooltip="Save record" aria-label="Save record" data-hotkey="s" t-on-click.stop="onClickSave">
+                        Save
+                    </button>
+                    <button type="button" class="btn btn-secondary o_list_button_discard" data-tooltip="Discard changes" aria-label="Discard changes" data-hotkey="j" t-on-click="onClickDiscard" t-on-mousedown="onMouseDownDiscard">
+                        Discard
+                    </button>
+                </t>
+                <t t-elif="activeActions['create'] and (!model.root.isGrouped or !editable)">
+                    <button type="button" class="btn btn-primary o_list_button_add" data-tooltip="Create record" aria-label="Create record" data-hotkey="c" t-on-click="onClickCreate" data-bounce-button="">
+                        Create
+                    </button>
+                </t>
+                <t t-if="nbTotal and !nbSelected and activeActions['exportXlsx'] and isExportEnable and !env.isSmall">
+                    <button type="button" class="btn btn-secondary fa fa-download o_list_export_xlsx" data-tooltip="Export All" aria-label="Export All" t-on-click="onDirectExportData"/>
+                </t>
+            </t>
+            <t t-if="nbSelected">
+                <t t-foreach="archInfo.headerButtons" t-as="button" t-key="button.id">
+                    <ListViewHeaderButton
+                        clickParams="button.clickParams"
+                        defaultRank="button.defaultRank"
+                        domain="props.domain"
+                        icon="button.icon"
+                        getSelectedResIds.bind="getSelectedResIds"
+                        resModel="model.root.resModel"
+                        string="button.string"
+                        title="button.title"
+                    />
+                </t>
+                <t t-if="!env.isSmall">
+                    <t t-call="web.ListView.Selection"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.ListView.Selection" owl="1">
+        <div class="o_list_selection_box alert alert-info d-inline-flex align-items-center pl-0 px-lg-2 py-0 mb-0 ml-2" role="alert">
+            <t t-if="env.isSmall">
+                <button class="btn btn-link py-0 o_discard_selection" t-on-click="discardSelection">
+                    <span class="fa-2x">&#215;</span>
+                </button>
+            </t>
+            <span t-if="isDomainSelected">All <span class="text-monospace" t-esc="nbTotal"/> selected</span>
+            <t t-else="">
+                <span class="text-monospace mr-1" t-esc="nbSelected"/> selected
+                <a t-if="isPageSelected and nbTotal > nbSelected" href="#" class="o_list_select_domain ml-2 btn btn-sm btn-info px-2 py-1 border-0 font-weight-normal" t-on-click="onSelectDomain">
+                    <i class="fa fa-arrow-right"/> Select all <span class="text-monospace" t-esc="nbTotal"/>
+                </a>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
new file mode 100644
index 00000000000..7a6e415666b
--- /dev/null
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -0,0 +1,1648 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { Domain } from "@web/core/domain";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
+import { Pager } from "@web/core/pager/pager";
+import { evaluateExpr } from "@web/core/py_js/py";
+import { registry } from "@web/core/registry";
+import { useBus, useService } from "@web/core/utils/hooks";
+import { useSortable } from "@web/core/utils/sortable";
+import { getTabableElements } from "@web/core/utils/ui";
+import { Field } from "@web/views/fields/field";
+import { getTooltipInfo } from "@web/views/fields/field_tooltip";
+import { ViewButton } from "@web/views/view_button/view_button";
+import { useBounceButton } from "@web/views/view_hook";
+
+const {
+    Component,
+    onMounted,
+    onPatched,
+    onWillPatch,
+    onWillUpdateProps,
+    useExternalListener,
+    useRef,
+    useState,
+    useEffect,
+} = owl;
+
+const formatters = registry.category("formatters");
+
+const DEFAULT_GROUP_PAGER_COLSPAN = 1;
+
+const FIELD_CLASSES = {
+    char: "o_list_char",
+    float: "o_list_number",
+    integer: "o_list_number",
+    monetary: "o_list_number",
+    text: "o_list_text",
+    many2one: "o_list_many2one",
+};
+
+const FIXED_FIELD_COLUMN_WIDTHS = {
+    boolean: "70px",
+    date: "92px",
+    datetime: "146px",
+    float: "92px",
+    integer: "74px",
+    monetary: "104px",
+    handle: "33px",
+};
+
+function getElementToFocus(cell) {
+    return getTabableElements(cell)[0] || cell;
+}
+
+export class ListRenderer extends Component {
+    setup() {
+        this.uiService = useService("ui");
+        this.allColumns = this.props.archInfo.columns;
+        this.keyOptionalFields = this.createKeyOptionalFields();
+        this.getOptionalActiveFields();
+        this.cellClassByColumn = {};
+        this.groupByButtons = this.props.archInfo.groupBy.buttons;
+        this.state = useState({
+            columns: this.allColumns.filter(
+                (col) => !col.optional || this.optionalActiveFields[col.name]
+            ),
+        });
+        this.withHandleColumn = this.state.columns.some((col) => col.widget === "handle");
+        useExternalListener(document, "click", this.onGlobalClick.bind(this));
+        this.tableRef = useRef("table");
+
+        this.longTouchTimer = null;
+        this.touchStartMs = 0;
+
+        this.creates = this.props.archInfo.creates.length
+            ? this.props.archInfo.creates
+            : [{ description: this.env._t("Add a line") }];
+
+        this.cellToFocus = null;
+        this.activeRowId = null;
+        onMounted(() => {
+            this.activeElement = this.uiService.activeElement;
+        });
+        onWillPatch(() => {
+            const activeRow = document.activeElement.closest(".o_data_row.o_selected_row");
+            this.activeRowId = activeRow ? activeRow.dataset.id : null;
+        });
+        onWillUpdateProps((nextProps) => {
+            this.allColumns = nextProps.archInfo.columns;
+            this.state.columns = this.allColumns.filter(
+                (col) => !col.optional || this.optionalActiveFields[col.name]
+            );
+        });
+        onPatched(() => {
+            const editedRecord = this.props.list.editedRecord;
+            if (editedRecord && this.activeRowId !== editedRecord.id) {
+                let column = this.state.columns[0];
+                let forward;
+                if (this.cellToFocus && this.cellToFocus.record === editedRecord) {
+                    column = this.cellToFocus.column;
+                    forward = this.cellToFocus.forward;
+                }
+                this.focusCell(column, forward);
+            }
+            this.cellToFocus = null;
+        });
+        let dataRowId;
+        this.rootRef = useRef("root");
+        this.resequencePromise = Promise.resolve();
+        useSortable({
+            enable: () => this.canResequenceRows,
+            // Params
+            ref: this.rootRef,
+            elements: ".o_row_draggable",
+            handle: ".o_handle_cell",
+            cursor: "grabbing",
+            // Hooks
+            onStart: (_group, element) => {
+                dataRowId = element.dataset.id;
+                element.classList.add("o_dragged");
+            },
+            onStop: (_group, element) => element.classList.remove("o_dragged"),
+            onDrop: async ({ element, previous }) => {
+                if (this.props.list.editedRecord) {
+                    this.props.list.unselectRecord(true);
+                }
+                element.classList.remove("o_row_draggable");
+                const refId = previous ? previous.dataset.id : null;
+                this.resequencePromise = this.props.list.resequence(dataRowId, refId, {
+                    handleField: this.props.archInfo.handleField,
+                });
+                await this.resequencePromise;
+                element.classList.add("o_row_draggable");
+            },
+        });
+
+        if (this.env.searchModel) {
+            useBus(this.env.searchModel, "focus-view", () => {
+                if (this.props.list.model.useSampleModel || !this.showTable) {
+                    return;
+                }
+
+                const nextTh = this.tableRef.el.querySelector("thead th");
+                const toFocus = getElementToFocus(nextTh);
+                this.focus(toFocus);
+                this.tableRef.el.querySelector("tbody").classList.add("o_keyboard_navigation");
+            });
+        }
+
+        // not very beautiful but works: refactor at some point
+        this.lastCellFocused;
+        useBus(this.props.list.model, "list-confirmation-dialog-will-open", () => {
+            if (this.tableRef.el.contains(document.activeElement)) {
+                this.lastCellFocused = document.activeElement.closest("td");
+            }
+        });
+
+        useBus(this.props.list.model, "list-confirmation-dialog-closed", () => {
+            if (this.lastCellFocused) {
+                this.focus(this.lastCellFocused);
+            }
+        });
+
+        useBounceButton(this.rootRef, () => {
+            return this.showNoContentHelper;
+        });
+        useEffect(
+            (editedRecord) => {
+                if (editedRecord) {
+                    this.keepColumnWidths = true;
+                }
+            },
+            () => [this.props.list.editedRecord]
+        );
+        useEffect(
+            () => {
+                this.freezeColumnWidths();
+            },
+            () => [this.state.columns, this.isEmpty, this.showTable]
+        );
+        useExternalListener(window, "resize", () => {
+            this.columnWidths = null;
+            this.freezeColumnWidths();
+        });
+    }
+
+    get hasSelectors() {
+        return this.props.hasSelectors && !this.env.isSmall;
+    }
+
+    // The following code manipulates the DOM directly to avoid having to wait for a
+    // render + patch which would occur on the next frame and cause flickering.
+    freezeColumnWidths() {
+        if (!this.showTable) {
+            return;
+        }
+        if (!this.keepColumnWidths) {
+            this.columnWidths = null;
+        }
+
+        const table = this.tableRef.el;
+        const headers = [...table.querySelectorAll("thead th")];
+
+        if (!this.columnWidths || !this.columnWidths.length) {
+            // no column widths to restore
+            // Set table layout auto and remove inline style to make sure that css
+            // rules apply (e.g. fixed width of record selector)
+            table.style.tableLayout = "auto";
+            headers.forEach((th) => {
+                th.style.width = null;
+                th.style.maxWidth = null;
+            });
+
+            this.setDefaultColumnWidths();
+
+            // Squeeze the table by applying a max-width on largest columns to
+            // ensure that it doesn't overflow
+            this.columnWidths = this.computeColumnWidthsFromContent();
+            table.style.tableLayout = "fixed";
+        }
+        headers.forEach((th, index) => {
+            if (!th.style.width) {
+                th.style.width = `${this.columnWidths[index]}px`;
+            }
+        });
+    }
+
+    setDefaultColumnWidths() {
+        const widths = this.state.columns.map((col) => this.calculateColumnWidth(col));
+        const sumOfRelativeWidths = widths
+            .filter(({ type }) => type === "relative")
+            .reduce((sum, { value }) => sum + value, 0);
+
+        // 1 because nth-child selectors are 1-indexed, 2 when the first column contains
+        // the checkboxes to select records.
+        const columnOffset = this.hasSelectors ? 2 : 1;
+        widths.forEach(({ type, value }, i) => {
+            const headerEl = this.tableRef.el.querySelector(`th:nth-child(${i + columnOffset})`);
+            if (type === "absolute") {
+                if (this.isEmpty) {
+                    headerEl.style.width = value;
+                } else {
+                    headerEl.style.minWidth = value;
+                }
+            } else if (type === "relative" && this.isEmpty) {
+                headerEl.style.width = `${((value / sumOfRelativeWidths) * 100).toFixed(2)}%`;
+            }
+        });
+    }
+
+    computeColumnWidthsFromContent() {
+        const table = this.tableRef.el;
+
+        // Toggle a className used to remove style that could interfer with the ideal width
+        // computation algorithm (e.g. prevent text fields from being wrapped during the
+        // computation, to prevent them from being completely crushed)
+        table.classList.add("o_list_computing_widths");
+
+        const headers = [...table.querySelectorAll("thead th")];
+        const columnWidths = headers.map((th) => th.offsetWidth);
+        const getWidth = (th) => columnWidths[headers.indexOf(th)] || 0;
+        const getTotalWidth = () => columnWidths.reduce((tot, width) => tot + width, 0);
+        const shrinkColumns = (thsToShrink, shrinkAmount) => {
+            let canKeepShrinking = true;
+            for (const th of thsToShrink) {
+                const index = headers.indexOf(th);
+                let maxWidth = columnWidths[index] - shrinkAmount;
+                // prevent the columns from shrinking under 92px (~ date field)
+                if (maxWidth < 92) {
+                    maxWidth = 92;
+                    canKeepShrinking = false;
+                }
+                th.style.maxWidth = `${maxWidth}px`;
+                columnWidths[index] = maxWidth;
+            }
+            return canKeepShrinking;
+        };
+        // Sort columns, largest first
+        const sortedThs = [...table.querySelectorAll("thead th:not(.o_list_button)")].sort(
+            (a, b) => getWidth(b) - getWidth(a)
+        );
+        const allowedWidth = table.parentNode.offsetWidth;
+
+        let totalWidth = getTotalWidth();
+        for (let index = 1; totalWidth > allowedWidth; index++) {
+            // Find the largest columns
+            const largestCols = sortedThs.slice(0, index);
+            const currentWidth = getWidth(largestCols[0]);
+            for (; currentWidth === getWidth(sortedThs[index]); index++) {
+                largestCols.push(sortedThs[index]);
+            }
+
+            // Compute the number of px to remove from the largest columns
+            const nextLargest = sortedThs[index];
+            const toRemove = Math.ceil((totalWidth - allowedWidth) / largestCols.length);
+            const shrinkAmount = Math.min(toRemove, currentWidth - getWidth(nextLargest));
+
+            // Shrink the largest columns
+            const canKeepShrinking = shrinkColumns(largestCols, shrinkAmount);
+            if (!canKeepShrinking) {
+                break;
+            }
+
+            totalWidth = getTotalWidth();
+        }
+
+        // We are no longer computing widths, so restore the normal style
+        table.classList.remove("o_list_computing_widths");
+        return columnWidths;
+    }
+
+    get canResequenceRows() {
+        if (!this.props.list.canResequence()) {
+            return false;
+        }
+        const orderBy = this.props.list.orderBy;
+        const handleField = this.props.archInfo.handleField;
+        return !orderBy.length || (orderBy.length && orderBy[0].name === handleField);
+    }
+
+    /**
+     * No records, no groups.
+     */
+    get isEmpty() {
+        return !this.props.list.records.length;
+    }
+
+    get fields() {
+        return this.props.list.fields;
+    }
+
+    canUseFormatter(column, record) {
+        return (
+            !record.isInEdition && !column.widget && record.fields[column.name].type !== "boolean"
+        );
+    }
+
+    focusCell(column, forward = true) {
+        const index = this.state.columns.indexOf(column);
+        let columns;
+        if (index === -1 && !forward) {
+            columns = this.state.columns.slice(0).reverse();
+        } else {
+            columns = [
+                ...this.state.columns.slice(index, this.state.columns.length),
+                ...this.state.columns.slice(0, index),
+            ];
+        }
+        const editedRecord = this.props.list.editedRecord;
+        for (const column of columns) {
+            if (column.type !== "field") {
+                continue;
+            }
+            const fieldName = column.name;
+            // in findNextFocusableOnRow test is done by using classList
+            // refactor
+            if (!editedRecord.isReadonly(fieldName)) {
+                const cell = this.tableRef.el.querySelector(
+                    `.o_selected_row td[name=${fieldName}]`
+                );
+                if (cell) {
+                    const toFocus = getElementToFocus(cell);
+                    if (toFocus) {
+                        this.focus(toFocus);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    focus(el) {
+        el.focus();
+        if (["INPUT", "TEXTAREA"].includes(el.tagName)) {
+            if (el.selectionStart) {
+                //bad
+                el.selectionStart = 0;
+                el.selectionEnd = el.value.length;
+            }
+            el.select();
+        }
+    }
+
+    editGroupRecord(group) {
+        const { resId, resModel } = group.record;
+        this.env.services.action.doAction({
+            context: {
+                create: false,
+            },
+            res_model: resModel,
+            res_id: resId,
+            type: "ir.actions.act_window",
+            views: [[false, "form"]],
+            flags: { mode: "edit" },
+        });
+    }
+
+    createKeyOptionalFields() {
+        let keyParts = {
+            fields: this.props.list.fieldNames,
+            model: this.props.list.resModel,
+            viewMode: "list",
+            viewId: this.env.config.viewId,
+        };
+
+        if (this.props.nestedKeyOptionalFieldsData) {
+            keyParts = Object.assign(keyParts, {
+                model: this.props.nestedKeyOptionalFieldsData.model,
+                viewMode: this.props.nestedKeyOptionalFieldsData.viewMode,
+                relationalField: this.props.nestedKeyOptionalFieldsData.field,
+                subViewType: "list",
+            });
+        }
+
+        const parts = ["model", "viewMode", "viewId", "relationalField", "subViewType"];
+        const viewIdentifier = ["optional_fields"];
+        parts.forEach((partName) => {
+            if (partName in keyParts) {
+                viewIdentifier.push(keyParts[partName]);
+            }
+        });
+        keyParts.fields
+            .sort((left, right) => (left < right ? -1 : 1))
+            .forEach((fieldName) => {
+                return viewIdentifier.push(fieldName);
+            });
+        return viewIdentifier.join(",");
+    }
+
+    get getOptionalFields() {
+        return this.allColumns
+            .filter((col) => col.optional)
+            .map((col) => ({
+                string: col.string,
+                name: col.name,
+                value: this.optionalActiveFields[col.name],
+            }));
+    }
+
+    nbRecordsInGroup(group) {
+        if (group.isFolded) {
+            return 0;
+        } else if (group.list.isGrouped) {
+            let count = 0;
+            for (const gr of group.list.groups) {
+                count += this.nbRecordsInGroup(gr);
+            }
+            return count;
+        } else {
+            return group.list.records.length;
+        }
+    }
+    get selectAll() {
+        const list = this.props.list;
+        const nbDisplayedRecords = list.records.length;
+        if (list.isDomainSelected) {
+            return true;
+        } else {
+            return nbDisplayedRecords > 0 && list.selection.length === nbDisplayedRecords;
+        }
+    }
+
+    get aggregates() {
+        let values;
+        if (this.props.list.selection && this.props.list.selection.length) {
+            values = this.props.list.selection.map((r) => r.data);
+        } else if (this.props.list.isGrouped) {
+            values = this.props.list.groups.map((g) => g.aggregates);
+        } else {
+            values = this.props.list.records.map((r) => r.data);
+        }
+        const aggregates = {};
+        for (const fieldName in this.props.list.activeFields) {
+            const field = this.fields[fieldName];
+            const fieldValues = [];
+            for (const value of values) {
+                const fieldValue = value[fieldName];
+                if (fieldValue) {
+                    fieldValues.push(fieldValue);
+                }
+            }
+            if (!fieldValues.length) {
+                continue;
+            }
+            const type = field.type;
+            if (type !== "integer" && type !== "float" && type !== "monetary") {
+                continue;
+            }
+            const { rawAttrs, widget } = this.props.list.activeFields[fieldName];
+            const func =
+                (rawAttrs.sum && "sum") ||
+                (rawAttrs.avg && "avg") ||
+                (rawAttrs.max && "max") ||
+                (rawAttrs.min && "min");
+            if (func) {
+                let aggregateValue = 0;
+                if (func === "max") {
+                    aggregateValue = Math.max(-Infinity, ...fieldValues);
+                } else if (func === "min") {
+                    aggregateValue = Math.min(Infinity, ...fieldValues);
+                } else if (func === "avg") {
+                    aggregateValue =
+                        fieldValues.reduce((acc, val) => acc + val) / fieldValues.length;
+                } else if (func === "sum") {
+                    aggregateValue = fieldValues.reduce((acc, val) => acc + val);
+                }
+
+                const formatter = formatters.get(widget, false) || formatters.get(type, false);
+                const formatOptions = {
+                    digits: rawAttrs.digits ? JSON.parse(rawAttrs.digits) : undefined,
+                    escape: true,
+                };
+                aggregates[fieldName] = {
+                    help: rawAttrs[func],
+                    value: formatter ? formatter(aggregateValue, formatOptions) : aggregateValue,
+                };
+            }
+        }
+        return aggregates;
+    }
+
+    getGroupLevel(group) {
+        return this.props.list.groupBy.length - group.list.groupBy.length - 1;
+    }
+
+    getColumnClass(column) {
+        const field = this.fields[column.name];
+        const classNames = [];
+        if (field.sortable && column.hasLabel) {
+            classNames.push("o_column_sortable");
+        }
+        const orderBy = this.props.list.orderBy;
+        if (orderBy.length && orderBy[0].name === column.name) {
+            classNames.push(orderBy[0].asc ? "o-sort-up" : "o-sort-down");
+        }
+        if (["float", "integer", "monetary"].includes(field.type)) {
+            classNames.push("o_list_number_th");
+        }
+        if (column.type === "button_group") {
+            classNames.push("o_list_button");
+        }
+        // note: remove this oe_read/edit_only logic when form view
+        // will always be in edit mode
+        if (/\boe_edit_only\b/.test(column.className)) {
+            classNames.push("oe_edit_only");
+        } else if (/\boe_read_only\b/.test(column.className)) {
+            classNames.push("oe_read_only");
+        }
+        if (column.widget) {
+            classNames.push(`o_${column.widget}_cell`);
+        }
+
+        return classNames.join(" ");
+    }
+
+    /**
+     * Returns the classnames to apply to the row representing the given record.
+     * @param {Record} record
+     * @returns {string}
+     */
+    getRowClass(record) {
+        // classnames coming from decorations
+        const classNames = this.props.archInfo.decorations
+            .filter((decoration) => evaluateExpr(decoration.condition, record.evalContext))
+            .map((decoration) => decoration.class);
+        // "o_selected_row" classname for the potential row in edition
+        if (record.isInEdition) {
+            classNames.push("o_selected_row");
+        }
+        if (this.props.list.model.useSampleModel) {
+            classNames.push("o_sample_data_disabled");
+        }
+        if (this.canResequenceRows) {
+            classNames.push("o_row_draggable");
+        }
+        return classNames.join(" ");
+    }
+
+    getCellClass(column, record) {
+        if (!this.cellClassByColumn[column.id]) {
+            const classNames = ["o_data_cell"];
+            if (column.type === "button_group") {
+                classNames.push("o_list_button");
+            } else if (column.type === "field") {
+                classNames.push("o_field_cell");
+                if (column.rawAttrs && column.rawAttrs.class) {
+                    classNames.push(column.rawAttrs.class);
+                }
+                const typeClass = FIELD_CLASSES[this.fields[column.name].type];
+                if (typeClass) {
+                    classNames.push(typeClass);
+                }
+                if (column.widget) {
+                    classNames.push(`o_${column.widget}_cell`);
+                }
+            }
+            this.cellClassByColumn[column.id] = classNames;
+        }
+        const classNames = [...this.cellClassByColumn[column.id]];
+        if (column.type === "field") {
+            if (record.isRequired(column.name)) {
+                classNames.push("o_required_modifier");
+            }
+            if (record.isInvalid(column.name)) {
+                classNames.push("o_invalid_cell");
+            }
+            if (this.canUseFormatter(column, record)) {
+                // generate field decorations classNames (only if field-specific decorations
+                // have been defined in an attribute, e.g. decoration-danger="other_field = 5")
+                // only handle the text-decoration.
+                const { decorations } = record.activeFields[column.name];
+                for (const decoName in decorations) {
+                    if (evaluateExpr(decorations[decoName], record.evalContext)) {
+                        classNames.push(`text-${decoName}`);
+                    }
+                }
+            }
+        }
+        return classNames.join(" ");
+    }
+
+    getCellTitle(column, record) {
+        const fieldType = this.fields[column.name].type;
+        // Because we freeze the column sizes, it may happen that we have to shorten
+        // field values. In order for the user to have access to the complete value
+        // in those situations, we put the value as title of the cells.
+        // This is only necessary for some field types, as for the others, we hardcode
+        // a minimum column width that should be enough to display the entire value.
+        if (!(fieldType in FIXED_FIELD_COLUMN_WIDTHS)) {
+            return this.getFormattedValue(column, record);
+        }
+    }
+
+    getFormattedValue(column, record) {
+        const fieldName = column.name;
+        const field = this.fields[fieldName];
+        const formatter = formatters.get(field.type, (val) => val);
+        const formatOptions = {
+            escape: false,
+            data: record.data,
+            isPassword: "password" in column.rawAttrs,
+            digits: column.rawAttrs.digits ? JSON.parse(column.rawAttrs.digits) : field.digits,
+            field: record.fields[fieldName],
+            timezone: true,
+        };
+        return formatter(record.data[fieldName], formatOptions);
+    }
+
+    evalModifier(modifier, record) {
+        return !!(modifier && new Domain(modifier).contains(record.evalContext));
+    }
+
+    getGroupDisplayName(group) {
+        const { _t } = this.env;
+        if (group.groupByField.type === "boolean") {
+            return group.value === undefined ? _t("None") : group.value ? _t("Yes") : _t("No");
+        } else {
+            return group.value === undefined || group.value === false
+                ? _t("None")
+                : group.displayName;
+        }
+    }
+
+    get getEmptyRowIds() {
+        const nbEmptyRow = Math.max(0, 4 - this.props.list.records.length);
+        return Array.from(Array(nbEmptyRow).keys());
+    }
+
+    // Group headers logic:
+    // if there are aggregates, the first th spans until the first
+    // aggregate column then all cells between aggregates are rendered
+    // a single cell is rendered after the last aggregated column to render the
+    // pager (with adequate colspan)
+    // ex:
+    // TH TH TH TH TH AGG AGG TH AGG AGG TH TH TH
+    // 0  1  2  3  4   5   6   7  8   9  10 11 12
+    // [    TH 5    ][TH][TH][TH][TH][TH][ TH 3 ]
+    // [ group name ][ aggregate cells  ][ pager]
+    // TODO: move this somewhere, compute this only once (same result for each groups actually) ?
+    getFirstAggregateIndex(group) {
+        return this.state.columns.findIndex((col) => col.name in group.aggregates);
+    }
+    getLastAggregateIndex(group) {
+        const reversedColumns = [...this.state.columns].reverse(); // reverse is destructive
+        const index = reversedColumns.findIndex((col) => col.name in group.aggregates);
+        return index > -1 ? this.state.columns.length - index - 1 : -1;
+    }
+    getAggregateColumns(group) {
+        const firstIndex = this.getFirstAggregateIndex(group);
+        const lastIndex = this.getLastAggregateIndex(group);
+        return this.state.columns.slice(firstIndex, lastIndex + 1);
+    }
+    getGroupNameCellColSpan(group) {
+        // if there are aggregates, the first th spans until the first
+        // aggregate column then all cells between aggregates are rendered
+        const firstAggregateIndex = this.getFirstAggregateIndex(group);
+        let colspan;
+        if (firstAggregateIndex > -1) {
+            colspan = firstAggregateIndex;
+        } else {
+            colspan = Math.max(1, this.allColumns.length - DEFAULT_GROUP_PAGER_COLSPAN);
+        }
+        return this.hasSelectors ? colspan + 1 : colspan;
+    }
+    getGroupPagerCellColspan(group) {
+        const lastAggregateIndex = this.getLastAggregateIndex(group);
+        if (lastAggregateIndex > -1) {
+            return this.allColumns.length - lastAggregateIndex - 1;
+        } else {
+            return this.allColumns.length > 1 ? DEFAULT_GROUP_PAGER_COLSPAN : 0;
+        }
+    }
+
+    getGroupPagerProps(group) {
+        const list = group.list;
+        return {
+            offset: list.offset,
+            limit: list.limit,
+            total: list.count,
+            onUpdate: async ({ offset, limit }) => {
+                await list.load({ limit, offset });
+                this.render(true);
+            },
+            withAccessKey: false,
+        };
+    }
+
+    getOptionalActiveFields() {
+        this.optionalActiveFields = {};
+        let optionalActiveFields = browser.localStorage.getItem(this.keyOptionalFields);
+        if (optionalActiveFields) {
+            this.allColumns.forEach((col) => {
+                this.optionalActiveFields[col.name] = optionalActiveFields.includes(col.name);
+            });
+        } else {
+            this.allColumns.forEach((col) => {
+                this.optionalActiveFields[col.name] = col.optional === "show";
+            });
+        }
+    }
+
+    onClickSortColumn(column) {
+        if (this.props.list.editedRecord || this.props.list.model.useSampleModel) {
+            return;
+        }
+        const fieldName = column.name;
+        const list = this.props.list;
+        if (this.fields[fieldName].sortable && column.hasLabel) {
+            if (list.isGrouped) {
+                const isSortable =
+                    list.groups[0].getAggregates(fieldName) || list.groupBy.includes(fieldName);
+                if (isSortable) {
+                    list.sortBy(fieldName);
+                }
+            } else {
+                list.sortBy(fieldName);
+            }
+        }
+    }
+
+    onButtonCellClicked(record, column, ev) {
+        if (!ev.target.closest("button")) {
+            this.onCellClicked(record, column);
+        }
+    }
+
+    async onCellClicked(record, column) {
+        const recordAfterResequence = async () => {
+            const recordIndex = this.props.list.records.indexOf(record);
+            await this.resequencePromise;
+            // row might have changed record after resequence
+            record = this.props.list.records[recordIndex] || record;
+        };
+
+        if (this.props.list.model.multiEdit && record.selected) {
+            await recordAfterResequence();
+            await record.switchMode("edit");
+            this.cellToFocus = { column, record };
+        } else if (this.props.editable) {
+            if (record.isInEdition) {
+                this.focusCell(column);
+                this.cellToFocus = null;
+            } else {
+                await recordAfterResequence();
+                await record.switchMode("edit");
+                this.cellToFocus = { column, record };
+            }
+        } else if (this.props.list.editedRecord && this.props.list.editedRecord !== record) {
+            this.props.list.unselectRecord(true);
+        } else if (!this.props.archInfo.noOpen) {
+            this.props.openRecord(record);
+        }
+    }
+
+    async onDeleteRecord(record) {
+        this.keepColumnWidths = true;
+        const editedRecord = this.props.list.editedRecord;
+        if (editedRecord && editedRecord !== record) {
+            const unselected = await this.props.list.unselectRecord(true);
+            if (!unselected) {
+                return;
+            }
+        }
+        this.props.activeActions.onDelete(record);
+    }
+
+    /**
+     * @param {HTMLTableCellElement} cell
+     * @param {boolean} cellIsInGroupRow
+     * @param {"up"|"down"|"left"|"right"} direction
+     */
+    findFocusFutureCell(cell, cellIsInGroupRow, direction) {
+        const row = cell.parentElement;
+        const children = [...row.children];
+        const index = children.indexOf(cell);
+        let futureCell;
+        switch (direction) {
+            case "up": {
+                let futureRow = row.previousElementSibling;
+                futureRow =
+                    futureRow ||
+                    (row.parentElement.previousElementSibling &&
+                        row.parentElement.previousElementSibling.lastElementChild);
+
+                if (futureRow) {
+                    const addCell = [...futureRow.children].find((c) =>
+                        c.classList.contains("o_group_field_row_add")
+                    );
+                    const nextIsGroup = futureRow.classList.contains("o_group_header");
+                    const rowTypeSwitched = cellIsInGroupRow !== nextIsGroup;
+                    let defaultIndex = 0;
+                    if (cellIsInGroupRow) {
+                        defaultIndex = this.hasSelectors ? 1 : 0;
+                    }
+                    futureCell =
+                        addCell ||
+                        (futureRow && futureRow.children[rowTypeSwitched ? defaultIndex : index]);
+                }
+                break;
+            }
+            case "down": {
+                let futureRow = row.nextElementSibling;
+                futureRow =
+                    futureRow ||
+                    (row.parentElement.nextElementSibling &&
+                        row.parentElement.nextElementSibling.firstElementChild);
+                if (futureRow) {
+                    const addCell = [...futureRow.children].find((c) =>
+                        c.classList.contains("o_group_field_row_add")
+                    );
+                    const nextIsGroup = futureRow.classList.contains("o_group_header");
+                    const rowTypeSwitched = cellIsInGroupRow !== nextIsGroup;
+                    let defaultIndex = 0;
+                    if (cellIsInGroupRow) {
+                        defaultIndex = this.hasSelectors ? 1 : 0;
+                    }
+                    futureCell =
+                        addCell ||
+                        (futureRow && futureRow.children[rowTypeSwitched ? defaultIndex : index]);
+                }
+                break;
+            }
+            case "left": {
+                futureCell = children[index - 1];
+                break;
+            }
+            case "right": {
+                futureCell = children[index + 1];
+                break;
+            }
+        }
+        return futureCell && getElementToFocus(futureCell);
+    }
+
+    /**
+     * @param {KeyboardEvent} ev
+     * @param { import('@web/views/relational_model').Group
+     *  | null
+     * } group
+     * @param { import('@web/views/relational_model').Record
+     *  | import('@web/views/basic_relational_model').Record
+     *  | null
+     * } record
+     */
+    onCellKeydown(ev, group = null, record = null) {
+        if (this.props.list.model.useSampleModel) {
+            return;
+        }
+
+        const hotkey = getActiveHotkey(ev);
+
+        if (ev.target.tagName === "TEXTAREA" && hotkey === "enter") {
+            return;
+        }
+
+        const closestCell = ev.target.closest("td, th");
+
+        const handled = this.props.list.editedRecord
+            ? this.onCellKeydownEditMode(hotkey, closestCell, group, record)
+            : this.onCellKeydownReadOnlyMode(hotkey, closestCell, group, record); // record is supposed to be not null here
+
+        if (handled) {
+            this.lastCreatingAction = false;
+            this.tableRef.el.querySelector("tbody").classList.add("o_keyboard_navigation");
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+
+    findNextFocusableOnRow(row, cell) {
+        const children = [...row.children];
+        const index = children.indexOf(cell);
+        const nextCells = children.slice(index + 1);
+        for (const c of nextCells) {
+            if (!c.classList.contains("o_data_cell")) {
+                continue;
+            }
+            if (
+                c.firstElementChild &&
+                c.firstElementChild.classList.contains("o_readonly_modifier")
+            ) {
+                continue;
+            }
+            const toFocus = getElementToFocus(c);
+            if (toFocus !== c) {
+                return toFocus;
+            }
+        }
+        return null;
+    }
+
+    findPreviousFocusableOnRow(row, cell) {
+        const children = [...row.children];
+        const index = children.indexOf(cell);
+        const previousCells = children.slice(0, index);
+        for (const c of previousCells.reverse()) {
+            if (!c.classList.contains("o_data_cell")) {
+                continue;
+            }
+            if (
+                c.firstElementChild &&
+                c.firstElementChild.classList.contains("o_readonly_modifier")
+            ) {
+                continue;
+            }
+            const toFocus = getElementToFocus(c);
+            if (toFocus !== c) {
+                return toFocus;
+            }
+        }
+        return null;
+    }
+
+    applyCellKeydownMultiEditMode(hotkey, cell, group, record) {
+        const { list } = this.props;
+        const row = cell.parentElement;
+        let toFocus, futureRecord;
+        const index = list.selection.indexOf(record);
+        if (this.lastIsDirty && ["tab", "shift+tab", "enter"].includes(hotkey)) {
+            record.switchMode("readonly");
+            return true;
+        }
+
+        if (this.applyCellKeydownEditModeStayOnRow(hotkey, cell, group, record)) {
+            return true;
+        }
+
+        switch (hotkey) {
+            case "tab":
+                futureRecord = list.selection[index + 1] || list.selection[0];
+                if (record === futureRecord) {
+                    // Refocus first cell of same record
+                    toFocus = this.findNextFocusableOnRow(row);
+                    this.focus(toFocus);
+                    return true;
+                }
+                break;
+
+            case "shift+tab":
+                futureRecord =
+                    list.selection[index - 1] || list.selection[list.selection.length - 1];
+                if (record === futureRecord) {
+                    // Refocus last cell of same record
+                    toFocus = this.findPreviousFocusableOnRow(row);
+                    this.focus(toFocus);
+                    return true;
+                }
+                this.cellToFocus = { forward: false, record: futureRecord };
+                break;
+
+            case "enter":
+                if (list.selection.length === 1) {
+                    record.switchMode("readonly");
+                    return true;
+                }
+                futureRecord = list.selection[index + 1] || list.selection[0];
+                break;
+        }
+
+        if (futureRecord) {
+            futureRecord.switchMode("edit");
+            return true;
+        }
+        return false;
+    }
+
+    applyCellKeydownEditModeGroup(hotkey, cell, group, record) {
+        const { activeActions, editable } = this.props;
+        const groupIndex = group.list.records.indexOf(record);
+        const isLastOfGroup = groupIndex === group.list.records.length - 1;
+        const isDirty = record.isDirty || this.lastIsDirty;
+        const isEnterBehavior = hotkey === "enter" && (!record.canBeAbandoned || isDirty);
+        const isTabBehavior = hotkey === "tab" && !record.canBeAbandoned && isDirty;
+        if (isEnterBehavior && !record.checkValidity()) {
+            return true;
+        }
+        if (
+            isLastOfGroup &&
+            activeActions.create &&
+            editable === "bottom" &&
+            record.checkValidity() &&
+            (isEnterBehavior || isTabBehavior)
+        ) {
+            this.props.onAdd({ group });
+            return true;
+        }
+        return false;
+    }
+
+    applyCellKeydownEditModeStayOnRow(hotkey, cell, group, record) {
+        let toFocus;
+        const row = cell.parentElement;
+
+        switch (hotkey) {
+            case "tab":
+                toFocus = this.findNextFocusableOnRow(row, cell);
+                break;
+            case "shift+tab":
+                toFocus = this.findPreviousFocusableOnRow(row, cell);
+                break;
+        }
+
+        if (toFocus) {
+            this.focus(toFocus);
+            return true;
+        }
+        return false;
+    }
+
+    applyCellKeydownEditModeLastRow(hotkey, cell, group, record) {
+        const { activeActions, cycleOnTab, list } = this.props;
+        const row = cell.parentElement;
+        switch (hotkey) {
+            case "tab":
+                // X2many add a line
+                if (activeActions && (activeActions.canLink || activeActions.canCreate)) {
+                    if (record.isNew && !record.isDirty) {
+                        list.unselectRecord(true);
+                        return false;
+                    }
+                    // add a line
+                    if (record.checkValidity()) {
+                        const { context } = this.creates[0];
+                        this.props.onAdd({ context });
+                    }
+                } else if (
+                    activeActions.create &&
+                    !record.canBeAbandoned &&
+                    (record.isDirty || this.lastIsDirty)
+                ) {
+                    this.props.onAdd({ group });
+                } else if (cycleOnTab) {
+                    if (record.canBeAbandoned) {
+                        list.unselectRecord(true);
+                    }
+                    const futureRecord = list.records[0];
+                    if (record === futureRecord) {
+                        // Refocus first cell of same record
+                        const toFocus = this.findNextFocusableOnRow(row);
+                        this.focus(toFocus);
+                    } else {
+                        futureRecord.switchMode("edit");
+                    }
+                } else {
+                    return false;
+                }
+        }
+    }
+
+    /**
+     * @param {string} hotkey
+     * @param {HTMLTableCellElement} cell
+     * @param { import('@web/views/relational_model').Group
+     *  | null
+     * } group
+     * @param { import('@web/views/relational_model').Record
+     *  | import('@web/views/basic_relational_model').Record
+     * } record
+     * @returns {boolean} true if some behavior has been taken
+     */
+    onCellKeydownEditMode(hotkey, cell, group, record) {
+        const { activeActions, cycleOnTab, list } = this.props;
+        const row = cell.parentElement;
+        const applyMultiEditBehavior = record.selected && list.model.multiEdit;
+
+        if (
+            applyMultiEditBehavior &&
+            this.applyCellKeydownMultiEditMode(hotkey, cell, group, record)
+        ) {
+            return true;
+        }
+
+        if (this.applyCellKeydownEditModeStayOnRow(hotkey, cell, group, record)) {
+            return true;
+        }
+
+        if (group && this.applyCellKeydownEditModeGroup(hotkey, cell, group, record)) {
+            return true;
+        }
+
+        switch (hotkey) {
+            case "tab": {
+                const index = list.records.indexOf(record);
+                if (index === list.records.length - 1) {
+                    if (activeActions && (activeActions.canLink || activeActions.canCreate)) {
+                        if (record.isNew && !record.isDirty) {
+                            list.unselectRecord(true);
+                            return false;
+                        }
+                        // add a line
+                        if (record.checkValidity()) {
+                            const { context } = this.creates[0];
+                            this.props.onAdd(context);
+                        }
+                    } else if (
+                        activeActions.create &&
+                        !record.canBeAbandoned &&
+                        (record.isDirty || this.lastIsDirty)
+                    ) {
+                        this.props.onAdd({ group });
+                    } else if (cycleOnTab) {
+                        if (record.canBeAbandoned) {
+                            list.unselectRecord(true);
+                        }
+                        const futureRecord = list.records[0];
+                        if (record === futureRecord) {
+                            // Refocus first cell of same record
+                            const toFocus = this.findNextFocusableOnRow(row);
+                            this.focus(toFocus);
+                        } else {
+                            futureRecord.switchMode("edit");
+                        }
+                    } else {
+                        return false;
+                    }
+                } else {
+                    const futureRecord = list.records[index + 1];
+                    futureRecord.switchMode("edit");
+                }
+                break;
+            }
+            case "shift+tab": {
+                const index = list.records.indexOf(record);
+                if (index === 0) {
+                    if (cycleOnTab) {
+                        if (record.canBeAbandoned) {
+                            list.unselectRecord(true);
+                        }
+                        const futureRecord = list.records[list.records.length - 1];
+                        if (record === futureRecord) {
+                            // Refocus first cell of same record
+                            const toFocus = this.findPreviousFocusableOnRow(row);
+                            this.focus(toFocus);
+                        } else {
+                            this.cellToFocus = { forward: false, record: futureRecord };
+                            futureRecord.switchMode("edit");
+                        }
+                    } else {
+                        return false;
+                    }
+                } else {
+                    const futureRecord = list.records[index - 1];
+                    this.cellToFocus = { forward: false, record: futureRecord };
+                    futureRecord.switchMode("edit");
+                }
+                break;
+            }
+            case "enter": {
+                const index = list.records.indexOf(record);
+                let futureRecord = list.records[index + 1];
+
+                if (!futureRecord) {
+                    if (activeActions && activeActions.create === false) {
+                        futureRecord = list.records[0];
+                    }
+                }
+
+                if (futureRecord) {
+                    futureRecord.switchMode("edit");
+                } else if (this.lastIsDirty || !record.canBeAbandoned || this.lastCreatingAction) {
+                    this.props.onAdd({ group });
+                } else if (record.checkValidity()) {
+                    const index = list.records.indexOf(record);
+                    futureRecord = list.records[index + 1] || list.records.at(0);
+                    futureRecord.switchMode("edit");
+                }
+                break;
+            }
+            case "escape": {
+                // TODO this seems bad: refactor this
+                record.discard();
+                list.unselectRecord(true);
+                const firstAddButton = this.tableRef.el.querySelector(
+                    ".o_field_x2many_list_row_add a"
+                );
+
+                if (firstAddButton) {
+                    this.focus(firstAddButton);
+                } else if (group && record.isNew) {
+                    const children = [...row.parentElement.children];
+                    const index = children.indexOf(row);
+                    for (let i = index + 1; i < children.length; i++) {
+                        const row = children[i];
+                        if (row.classList.contains("o_group_header")) {
+                            break;
+                        }
+                        const addCell = [...row.children].find((c) =>
+                            c.classList.contains("o_group_field_row_add")
+                        );
+                        if (addCell) {
+                            const toFocus = addCell.querySelector("a");
+                            this.focus(toFocus);
+                            return true;
+                        }
+                    }
+                    this.focus(cell);
+                } else {
+                    this.focus(cell);
+                }
+                break;
+            }
+            default:
+                return false;
+        }
+        return true;
+    }
+
+    /**
+     * @param {string} hotkey
+     * @param {HTMLTableCellElement} cell
+     * @param { import('@web/views/relational_model').Group
+     *  | null
+     * } group
+     * @param { import('@web/views/relational_model').Record
+     *  | import('@web/views/basic_relational_model').Record
+     *  | null
+     * } record
+     * @returns {boolean} true if some behavior has been taken
+     */
+    onCellKeydownReadOnlyMode(hotkey, cell, group, record) {
+        const cellIsInGroupRow = Boolean(group && !record);
+        const applyMultiEditBehavior = record && record.selected && this.props.list.model.multiEdit;
+        let toFocus;
+        switch (hotkey) {
+            case "arrowup":
+                toFocus = this.findFocusFutureCell(cell, cellIsInGroupRow, "up");
+                if (!toFocus) {
+                    this.env.searchModel.trigger("focus-search");
+                    return true;
+                }
+                break;
+            case "arrowdown":
+                toFocus = this.findFocusFutureCell(cell, cellIsInGroupRow, "down");
+                break;
+            case "arrowleft":
+                if (cellIsInGroupRow && !group.isFolded) {
+                    this.toggleGroup(group);
+                    return true;
+                }
+
+                if (cell.classList.contains("o_field_x2many_list_row_add")) {
+                    // to refactor
+                    const a = document.activeElement;
+                    toFocus = a.previousElementSibling;
+                } else {
+                    toFocus = this.findFocusFutureCell(cell, cellIsInGroupRow, "left");
+                }
+                break;
+            case "arrowright":
+                if (cellIsInGroupRow && group.isFolded) {
+                    this.toggleGroup(group);
+                    return true;
+                }
+
+                if (cell.classList.contains("o_field_x2many_list_row_add")) {
+                    // This cell contains only <a/> elements, see template.
+                    const a = document.activeElement;
+                    toFocus = a.nextElementSibling;
+                } else {
+                    toFocus = this.findFocusFutureCell(cell, cellIsInGroupRow, "right");
+                }
+                break;
+            case "tab":
+                if (cellIsInGroupRow) {
+                    const buttons = Array.from(cell.querySelectorAll(".o_group_buttons button"));
+                    const currentButton = document.activeElement.closest("button");
+                    const index = buttons.indexOf(currentButton);
+                    toFocus = buttons[index + 1] || currentButton;
+                }
+                break;
+            case "shift+tab":
+                if (cellIsInGroupRow) {
+                    const buttons = Array.from(cell.querySelectorAll(".o_group_buttons button"));
+                    const currentButton = document.activeElement.closest("button");
+                    const index = buttons.indexOf(currentButton);
+                    toFocus = buttons[index - 1] || currentButton;
+                }
+                break;
+            case "enter":
+                if (!group && !record) {
+                    return false;
+                }
+
+                if (cell.classList.contains("o_list_record_remove")) {
+                    this.onDeleteRecord(record);
+                    return true;
+                }
+
+                if (cellIsInGroupRow) {
+                    const button = document.activeElement.closest("button");
+                    if (button) {
+                        button.click();
+                    } else {
+                        this.toggleGroup(group);
+                    }
+                    return true;
+                }
+
+                if (this.props.editable || applyMultiEditBehavior) {
+                    const column = this.state.columns.find(
+                        (c) => c.name === cell.getAttribute("name")
+                    );
+                    this.cellToFocus = { column, record };
+                    record.switchMode("edit");
+                    return true;
+                }
+
+                if (!this.props.archInfo.noOpen) {
+                    this.props.openRecord(record);
+                    return true;
+                }
+                break;
+            default:
+                // Return with no effect (no stop or prevent default...)
+                return false;
+        }
+
+        if (toFocus) {
+            this.focus(toFocus);
+            return true;
+        }
+
+        return false;
+    }
+
+    async onCreateAction(context) {
+        // TO DISCUSS: is it a use case for owl `batched()` ?
+        if (this.createProm) {
+            return;
+        }
+        this.props.onAdd({ context });
+        this.createProm = Promise.resolve();
+        this.createProm.then(() => {
+            this.lastCreatingAction = true;
+        });
+        await this.createProm;
+        this.createProm = null;
+    }
+
+    /**
+     * @param {FocusEvent & {
+     *  target: HTMLElement,
+     *  relatedTarget: HTMLElement | null
+     * }} ev
+     */
+    onFocusIn(ev) {
+        const { relatedTarget, target } = ev;
+        const fromOutside = !this.rootRef.el.contains(relatedTarget);
+        if (!fromOutside) {
+            return;
+        }
+
+        const isX2MRowAdder =
+            target.tagName === "A" &&
+            target.parentElement.classList.contains("o_field_x2many_list_row_add");
+        const withinSameUIActiveElement =
+            this.uiService.getActiveElementOf(relatedTarget) === this.activeElement;
+        if (withinSameUIActiveElement && isX2MRowAdder) {
+            const { context } = this.creates[0];
+            this.onCreateAction(context);
+        }
+    }
+
+    setDirty(isDirty) {
+        this.lastIsDirty = isDirty;
+    }
+
+    saveOptionalActiveFields() {
+        browser.localStorage.setItem(
+            this.keyOptionalFields,
+            Object.keys(this.optionalActiveFields).filter(
+                (fieldName) => this.optionalActiveFields[fieldName]
+            )
+        );
+    }
+
+    get showNoContentHelper() {
+        const { model } = this.props.list;
+        return this.props.noContentHelp && (model.useSampleModel || !model.hasData());
+    }
+
+    showGroupPager(group) {
+        return !group.isFolded && group.list.limit < group.list.count;
+    }
+
+    get showTable() {
+        const { model } = this.props.list;
+        return model.hasData() || !this.props.noContentHelp;
+    }
+
+    toggleGroup(group) {
+        group.toggle();
+    }
+
+    toggleSelection() {
+        const list = this.props.list;
+        if (list.selection.length === list.records.length) {
+            list.records.forEach((record) => {
+                record.toggleSelection(false);
+                list.selectDomain(false);
+            });
+        } else {
+            list.records.forEach((record) => {
+                record.toggleSelection(true);
+            });
+        }
+    }
+
+    toggleRecordSelection(record) {
+        record.toggleSelection();
+        this.props.list.selectDomain(false);
+    }
+
+    async toggleOptionalField(fieldName) {
+        await this.props.list.unselectRecord(true);
+        this.optionalActiveFields[fieldName] = !this.optionalActiveFields[fieldName];
+        this.state.columns = this.allColumns.filter(
+            (col) => !col.optional || this.optionalActiveFields[col.name]
+        );
+        this.saveOptionalActiveFields(
+            this.allColumns.filter((col) => this.optionalActiveFields[col.name] && col.optional)
+        );
+    }
+
+    onGlobalClick(ev) {
+        if (!this.props.list.editedRecord) {
+            return; // there's no row in edition
+        }
+
+        this.tableRef.el.querySelector("tbody").classList.remove("o_keyboard_navigation");
+
+        if (this.tableRef.el.contains(ev.target)) {
+            return; // ignore clicks inside the table, they are handled directly by the renderer
+        }
+        if (this.activeElement !== this.uiService.activeElement) {
+            return;
+        }
+        // Legacy DatePicker
+        if (ev.target.closest(".daterangepicker")) {
+            return;
+        }
+        this.props.list.unselectRecord(true);
+    }
+
+    calculateColumnWidth(column) {
+        if (column.options && column.rawAttrs.width) {
+            return { type: "absolute", value: column.rawAttrs.width };
+        }
+
+        if (column.type !== "field") {
+            return { type: "relative", value: 1 };
+        }
+
+        const type = column.widget || this.props.list.fields[column.name].type;
+        if (type in FIXED_FIELD_COLUMN_WIDTHS) {
+            return { type: "absolute", value: FIXED_FIELD_COLUMN_WIDTHS[type] };
+        }
+
+        return { type: "relative", value: 1 };
+    }
+
+    get isDebugMode() {
+        return Boolean(odoo.debug);
+    }
+
+    makeTooltip(column) {
+        return getTooltipInfo({
+            viewMode: "list",
+            resModel: this.props.list.resModel,
+            field: this.props.list.fields[column.name],
+            fieldInfo: this.props.list.activeFields[column.name],
+        });
+    }
+
+    /**
+     * Handles the resize feature on the column headers
+     *
+     * @private
+     * @param {MouseEvent} ev
+     */
+    onStartResize(ev) {
+        const table = this.tableRef.el;
+        const th = ev.target.closest("th");
+        table.style.width = `${table.offsetWidth}px`;
+        const thPosition = [...th.parentNode.children].indexOf(th);
+        const resizingColumnElements = [...table.getElementsByTagName("tr")]
+            .filter((tr) => tr.children.length === th.parentNode.children.length)
+            .map((tr) => tr.children[thPosition]);
+        const optionalDropdown = table.querySelector("o_optional_columns");
+        const initialX = ev.clientX;
+        const initialWidth = th.offsetWidth;
+        const initialTableWidth = table.offsetWidth;
+        const initialDropdownX = optionalDropdown ? optionalDropdown.offsetLeft : null;
+        const resizeStoppingEvents = ["keydown", "mousedown", "mouseup"];
+
+        // fix the width so that if the resize overflows, it doesn't affect the layout of the parent
+        if (!this.rootRef.el.style.width) {
+            this.rootRef.el.style.width = `${this.rootRef.el.offsetWidth}px`;
+        }
+
+        // Apply classes to table and selected column
+        table.classList.add("o_resizing");
+        for (const el of resizingColumnElements) {
+            el.classList.add("o_column_resizing");
+        }
+        // Mousemove event : resize header
+        const resizeHeader = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            const delta = ev.clientX - initialX;
+            const newWidth = Math.max(10, initialWidth + delta);
+            const tableDelta = newWidth - initialWidth;
+            th.style.width = `${newWidth}px`;
+            th.style.maxWidth = `${newWidth}px`;
+            table.style.width = `${initialTableWidth + tableDelta}px`;
+            if (optionalDropdown) {
+                optionalDropdown.style.left = `${initialDropdownX + tableDelta}px`;
+            }
+        };
+        window.addEventListener("mousemove", resizeHeader);
+
+        // Mouse or keyboard events : stop resize
+        const stopResize = (ev) => {
+            // Ignores the 'left mouse button down' event as it used to start resizing
+            if (ev.type === "mousedown" && ev.which === 1) {
+                return;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+
+            table.classList.remove("o_resizing");
+            for (const el of resizingColumnElements) {
+                el.classList.remove("o_column_resizing");
+            }
+
+            window.removeEventListener("mousemove", resizeHeader);
+            for (const eventType of resizeStoppingEvents) {
+                window.removeEventListener(eventType, stopResize);
+            }
+
+            // we remove the focus to make sure that the there is no focus inside
+            // the tr.  If that is the case, there is some css to darken the whole
+            // thead, and it looks quite weird with the small css hover effect.
+            document.activeElement.blur();
+        };
+        // We have to listen to several events to properly stop the resizing function. Those are:
+        // - mousedown (e.g. pressing right click)
+        // - mouseup : logical flow of the resizing feature (drag & drop)
+        // - keydown : (e.g. pressing 'Alt' + 'Tab' or 'Windows' key)
+        for (const eventType of resizeStoppingEvents) {
+            window.addEventListener(eventType, stopResize);
+        }
+    }
+
+    resetLongTouchTimer() {
+        if (this.longTouchTimer) {
+            browser.clearTimeout(this.longTouchTimer);
+            this.longTouchTimer = null;
+        }
+    }
+
+    onRowTouchStart(record, ev) {
+        if (this.props.list.selection.length) {
+            // in selection mode, only selection is allowed.
+            ev.preventDefault();
+            this.toggleRecordSelection(record);
+        } else {
+            this.touchStartMs = Date.now();
+            if (this.longTouchTimer === null) {
+                this.longTouchTimer = browser.setTimeout(() => {
+                    this.toggleRecordSelection(record);
+                    this.resetLongTouchTimer();
+                }, this.constructor.LONG_TOUCH_THRESHOLD);
+            }
+        }
+    }
+    onRowTouchEnd(record) {
+        const elapsedTime = Date.now() - this.touchStartMs;
+        if (elapsedTime < this.constructor.LONG_TOUCH_THRESHOLD) {
+            this.resetLongTouchTimer();
+        }
+    }
+    onRowTouchMove(record) {
+        this.resetLongTouchTimer();
+    }
+}
+
+ListRenderer.template = "web.ListRenderer";
+ListRenderer.components = { DropdownItem, Field, ViewButton, CheckBox, Dropdown, Pager };
+ListRenderer.props = [
+    "activeActions?",
+    "list",
+    "archInfo",
+    "openRecord",
+    "onAdd?",
+    "cycleOnTab?",
+    "hasSelectors?",
+    "editable?",
+    "noContentHelp?",
+    "nestedKeyOptionalFieldsData?",
+];
+ListRenderer.defaultProps = { hasSelectors: false, cycleOnTab: true };
+
+ListRenderer.LONG_TOUCH_THRESHOLD = 400;
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
new file mode 100644
index 00000000000..09b6439dbdc
--- /dev/null
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -0,0 +1,226 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ListRenderer" owl="1">
+        <div
+            class="o_list_renderer"
+            t-att-class="{'table-responsive': showTable}"
+            t-on-focusin="onFocusIn"
+            tabindex="-1"
+            t-ref="root"
+        >
+            <t t-if="showNoContentHelper" t-call="web.ActionHelper">
+                <t t-set="noContentHelp" t-value="props.noContentHelp"/>
+            </t>
+            <table t-if="showTable" t-attf-class="o_list_table table table-sm table-hover table-striped {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped'}}" t-ref="table">
+                <thead>
+                    <tr>
+                        <th t-if="hasSelectors" class="o_list_record_selector" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
+                            <CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="selectAll" onChange.bind="toggleSelection"/>
+                        </th>
+                        <t t-foreach="state.columns" t-as="column" t-key="column.id">
+                            <th t-if="column.type === 'field'" t-att-data-name="column.name" t-att-class="getColumnClass(column)" t-on-click="() => this.onClickSortColumn(column)" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)"  t-att-data-tooltip-template="isDebugMode ? 'web.FieldTooltip' : false" t-att-data-tooltip-info="isDebugMode ? makeTooltip(column) : false">
+                                <t t-if="column.hasLabel and column.widget !== 'handle'">
+                                    <t t-esc="column.label"/>
+                                    <span t-if="!isEmpty" class="o_resize" t-on-click.stop.prevent="" t-on-mousedown.stop.prevent="onStartResize"/>
+                                </t>
+                            </th>
+                            <th t-else="" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-att-class="{o_list_button: column.type === 'button_group'}"/>
+                        </t>
+                        <th t-if="props.activeActions and props.activeActions.onDelete" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" class="o_list_record_remove_header" style="width: 32px; min-width: 32px"/>
+                    </tr>
+                </thead>
+                <tbody class="ui-sortable">
+                    <t t-call="web.ListRenderer.Rows">
+                        <t t-set="list" t-value="props.list"/>
+                    </t>
+                    <t t-set="activeActions" t-value="props.activeActions" />
+                    <tr t-if="activeActions and ('canLink' in activeActions ? activeActions.canLink : activeActions.canCreate)">
+                        <td t-if="withHandleColumn"/>
+                        <td t-att-colspan="state.columns.length + 1"
+                            class="o_field_x2many_list_row_add"
+                            t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, null)"
+                        >
+                            <t t-foreach="creates" t-as="create" t-key="create_index">
+                                <a
+                                    href="#"
+                                    role="button"
+                                    t-att-class="create_index !== 0 ? 'ml16' : ''"
+                                    t-att-tabindex="props.list.editedRecord ? '-1' : '0'"
+                                    t-on-click.stop.prevent="() => this.onCreateAction(create.context)"
+                                >
+                                    <t t-esc="create.description"/>
+                                </a>
+                            </t>
+                        </td>
+                    </tr>
+                </tbody>
+                <tfoot t-on-click="() => props.list.unselectRecord(true)" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}">
+                    <tr>
+                        <td t-if="hasSelectors"/>
+                        <t t-foreach="state.columns" t-as="column" t-key="column.id">
+                            <t t-set="aggregate" t-value="aggregates[column.name]"/>
+                            <td t-if="aggregate" class="o_list_number" t-att-data-tooltip="aggregate.help">
+                                <t t-esc="aggregate.value"/>
+                            </td>
+                            <td t-else=""/>
+                        </t>
+                        <td t-if="props.activeActions and props.activeActions.onDelete"/>
+                    </tr>
+                </tfoot>
+                <Dropdown t-if="getOptionalFields.length" class="'o_optional_columns_dropdown'" position="'bottom-end'">
+                    <t t-set-slot="toggler">
+                        <i class="oi oi-settings-adjust o_optional_columns_dropdown_toggle"/>
+                    </t>
+                    <t t-foreach="getOptionalFields" t-as="field" t-key="field_index">
+                        <DropdownItem parentClosingMode="'none'" onSelected="() => this.toggleOptionalField(field.name)">
+                            <CheckBox
+                                onChange="() => this.toggleOptionalField(field.name)"
+                                value="field.value"
+                                name="field.name"
+                            >
+                                <t t-esc="field.string"/> <t t-if="env.debug" t-esc="' (' + field.name + ')'" />
+                            </CheckBox>
+                        </DropdownItem>
+                    </t>
+                </Dropdown>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="web.ListRenderer.Rows" owl="1">
+        <t t-if="!list.isGrouped">
+            <t t-foreach="list.records" t-as="record" t-key="record.id">
+                <t t-call="web.ListRenderer.RecordRow"/>
+            </t>
+            <t t-if="!props.list.isGrouped">
+                <tr t-foreach="getEmptyRowIds" t-as="emptyRowId" t-key="emptyRowId">
+                    <td t-att-colspan="state.columns.length + 1">&#8203;</td>
+                </tr>
+            </t>
+        </t>
+        <t t-else="">
+            <t t-foreach="list.groups" t-as="group" t-key="group.id">
+                <t t-call="web.ListRenderer.GroupRow"/>
+                <t t-if="!group.isFolded">
+                    <t t-call="web.ListRenderer.Rows">
+                        <t t-set="list" t-value="group.list"/>
+                    </t>
+                    <tr t-if="!group.list.isGrouped and props.editable and props.activeActions['create']">
+                        <td t-if="hasSelectors"/>
+                        <td
+                            t-att-colspan="state.columns.length + 1"
+                            class="o_group_field_row_add"
+                        >
+                            <a href="#"
+                                role="button"
+                                t-on-click.stop.prevent="() => group.createRecord({}, props.editable === 'top')"
+                                t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)"
+                            >
+                                Add a line
+                            </a>
+                        </td>
+                    </tr>
+                </t>
+            </t>
+        </t>
+    </t>
+
+    <t t-name="web.ListRenderer.GroupRow" owl="1">
+        <tr t-attf-class="{{group.count > 0 ? 'o_group_has_content' : ''}} o_group_header {{!group.isFolded ? 'o_group_open' : ''}}"
+            t-on-click="() => this.toggleGroup(group)"
+        >
+            <th t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" tabindex="-1" class="o_group_name" t-att-colspan="getGroupNameCellColSpan(group)">
+                <span t-attf-class="fa {{group.isFolded ? 'fa-caret-right' : 'fa-caret-down' }}"
+                    t-attf-style="padding-left: {{2 + getGroupLevel(group) * 20}}px; padding-right: 5px"/>
+                <t t-esc="getGroupDisplayName(group)"/> (<t t-esc="group.count"/>)
+                <div t-if="(groupByButtons[group.groupByField.name] and !group.isFolded)" class="o_group_buttons">
+                    <t t-foreach="groupByButtons[group.groupByField.name]" t-as="button" t-key="button.id">
+                        <t t-if="!evalModifier(button.modifiers.invisible, group.record)">
+                            <t t-if="button.clickParams.type === 'edit'">
+                                <button t-att-title="button.title" class="btn" t-on-click="() => this.editGroupRecord(group)" tabindex="-1">
+                                    <i t-attf-class="fa fa-fw {{button.icon}} o_button_icon"/>
+                                </button>
+                            </t>
+                            <t t-else="">
+                                <ViewButton
+                                    className="button.className"
+                                    clickParams="button.clickParams"
+                                    icon="button.icon"
+                                    record="group.record"
+                                    string="button.string"
+                                    title="button.title"
+                                    tabindex="'-1'"
+                                />
+                            </t>
+                        </t>
+                    </t>
+                </div>
+            </th>
+            <th t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" t-if="showGroupPager(group)">
+                <Pager t-props="getGroupPagerProps(group)"/>
+            </th>
+            <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" t-foreach="getAggregateColumns(group)" t-as="column" t-key="column.id" class="o_list_number">
+                <t t-esc="group.aggregates[column.name]"/>
+            </td>
+            <t t-set="groupPagerColspan" t-value="getGroupPagerCellColspan(group)"/>
+            <th t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group)" t-if="groupPagerColspan > 0" t-att-colspan="groupPagerColspan"/>
+        </tr>
+    </t>
+
+    <t t-name="web.ListRenderer.RecordRow" owl="1">
+        <tr class="o_data_row"
+            t-att-class="getRowClass(record)"
+            t-att-data-id="record.id"
+            t-on-touchstart="(ev) => this.onRowTouchStart(record, ev)"
+            t-on-touchend="() => this.onRowTouchEnd(record)"
+            t-on-touchmove="() => this.onRowTouchMove(record)"
+        >
+            <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" t-if="hasSelectors" class="o_list_record_selector" t-on-click.stop="() => this.toggleRecordSelection(record)" tabindex="-1">
+                <CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="record.selected" onChange.bind="() => this.toggleRecordSelection(record)" />
+            </td>
+            <t t-foreach="state.columns" t-as="column" t-key="column.id">
+                <t t-if="column.type === 'field'">
+                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-name="column.name" t-att-class="getCellClass(column, record)" t-att-data-tooltip="getCellTitle(column, record)" data-tooltip-delay="1000" t-on-click="() => this.onCellClicked(record, column)" tabindex="-1">
+                        <t t-if="!evalModifier(column.modifiers.invisible, record)">
+                            <t t-if="canUseFormatter(column, record)" t-esc="getFormattedValue(column, record)"/>
+                            <Field t-else="" name="column.name" record="record" type="column.widget" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>
+                        </t>
+                    </td>
+                </t>
+                <t t-if="column.type === 'button_group'">
+                    <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-class="getCellClass(column, record)" t-on-click="(ev) => this.onButtonCellClicked(record, column, ev)" tabindex="-1">
+                        <t t-foreach="column.buttons" t-as="button" t-key="button.id">
+                            <ViewButton t-if="!evalModifier(button.modifiers.invisible, record)"
+                                className="button.className"
+                                clickParams="button.clickParams"
+                                defaultRank="button.defaultRank"
+                                disabled="record.isVirtual"
+                                icon="button.icon"
+                                record="record"
+                                string="button.string"
+                                title="button.title"
+                                tabindex="props.list.editedRecord ? '-1' : '0'"
+                            />
+                        </t>
+                    </td>
+                </t>
+            </t>
+
+            <t t-set="activeActions" t-value="props.activeActions" />
+            <t t-if="activeActions">
+                <t t-set="canDelete" t-value="activeActions.canDelete" />
+                <t t-set="canUnlink" t-value="activeActions.canUnlink" />
+                <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" t-if="'canUnlink' in activeActions ? canUnlink : canDelete" class="o_list_record_remove" t-on-click.stop="() => this.onDeleteRecord(record)" tabindex="-1">
+                    <button class="fa"
+                        t-att-class="{ 'fa-trash-o': 'canUnlink' in activeActions ? false : canDelete, 'fa-times': 'canUnlink' in activeActions ? canUnlink : false }"
+                        name="delete"
+                        aria-label="Delete row"
+                        tabindex="-1"
+                    />
+                </td>
+            </t>
+        </tr>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/list/list_view.js b/addons/web/static/src/views/list/list_view.js
new file mode 100644
index 00000000000..49241ac6bc3
--- /dev/null
+++ b/addons/web/static/src/views/list/list_view.js
@@ -0,0 +1,35 @@
+/** @odoo-module */
+
+// import { registry } from "@web/core/registry";
+import { RelationalModel } from "../relational_model";
+import { ListArchParser } from "./list_arch_parser";
+import { ListController } from "./list_controller";
+import { ListRenderer } from "./list_renderer";
+
+export const listView = {
+    type: "list",
+    display_name: "List",
+    icon: "oi oi-view-list",
+    multiRecord: true,
+    Controller: ListController,
+    Renderer: ListRenderer,
+    ArchParser: ListArchParser,
+    Model: RelationalModel,
+    buttonTemplate: "web.ListView.Buttons",
+
+    props: (genericProps, view) => {
+        const { ArchParser } = view;
+        const { arch, relatedModels, resModel } = genericProps;
+        const archInfo = new ArchParser().parse(arch, relatedModels, resModel);
+
+        return {
+            ...genericProps,
+            Model: view.Model,
+            Renderer: view.Renderer,
+            buttonTemplate: view.buttonTemplate,
+            archInfo,
+        };
+    },
+};
+
+// registry.category("views").add("list", listView);
diff --git a/addons/web/static/src/views/list/list_view_extra.scss b/addons/web/static/src/views/list/list_view_extra.scss
new file mode 100644
index 00000000000..c6b73eec16f
--- /dev/null
+++ b/addons/web/static/src/views/list/list_view_extra.scss
@@ -0,0 +1,42 @@
+
+.o_wowl_list_view {
+    thead {
+        background-color: #eee;
+    }
+
+    tbody > tr.o_group_header {
+        background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
+
+        &:focus-within {
+           background-image: linear-gradient(to bottom, #fcfcfc, $o-form-lightsecondary);
+        }
+    }
+
+    .o_list_table .o_data_row.o_selected_row > .o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier):not(.o_remaining_days_cell) {
+        padding: .15rem;
+        .o_input {
+            border: none;
+            padding: .15rem;
+            .o_input {
+                box-shadow: none;
+                padding: 0;
+            }
+        }
+        select.o_input {
+            padding: .25rem 0;
+        }
+        .o_field_boolean {
+            padding-top: .15rem;
+            padding-bottom: .15rem;
+        }
+        &.o_invalid_cell .o_input {
+            box-shadow: 0 0 0 1px theme-color('danger');
+        }
+        &.o_list_button {
+            padding: .25rem;
+        }
+        &.o_color_cell > .o_field_widget {
+            padding: .15rem;
+        }
+    }
+}
diff --git a/addons/web/static/src/views/helpers/model.js b/addons/web/static/src/views/model.js
similarity index 74%
rename from addons/web/static/src/views/helpers/model.js
rename to addons/web/static/src/views/model.js
index 1eabbcea6fc..5941e9fcdc7 100644
--- a/addons/web/static/src/views/helpers/model.js
+++ b/addons/web/static/src/views/model.js
@@ -1,9 +1,9 @@
 /** @odoo-module **/
 
-import { SEARCH_KEYS } from "@web/search/with_search/with_search";
 import { useBus, useService } from "@web/core/utils/hooks";
-import { buildSampleORM } from "@web/views/helpers/sample_server";
-import { useSetupView } from "@web/views/helpers/view_hook";
+import { SEARCH_KEYS } from "@web/search/with_search/with_search";
+import { buildSampleORM } from "@web/views/sample_server";
+import { useSetupView } from "@web/views/view_hook";
 
 const { EventBus, onWillStart, onWillUpdateProps, useComponent } = owl;
 
@@ -48,6 +48,16 @@ export class Model extends EventBus {
         return true;
     }
 
+    /**
+     * This function is meant to be overriden by models that want to combine
+     * sample data with real groups that exist on the server.
+     *
+     * @returns {boolean}
+     */
+    getGroups() {
+        return null;
+    }
+
     notify() {
         this.trigger("update");
     }
@@ -86,7 +96,14 @@ export function useModel(ModelClass, params, options = {}) {
     services.orm = services.orm || useService("orm");
 
     const model = new ModelClass(component.env, params, services);
-    useBus(model, "update", options.onUpdate || component.render);
+    useBus(
+        model,
+        "update",
+        options.onUpdate ||
+            (() => {
+                component.render(true); // FIXME WOWL reactivity
+            })
+    );
 
     const globalState = component.props.globalState || {};
     let useSampleModel = Boolean(
@@ -100,14 +117,16 @@ export function useModel(ModelClass, params, options = {}) {
     const user = useService("user");
     let started = false;
     async function load(props) {
-        model.orm = orm;
         const searchParams = getSearchParams(props);
         await model.load(searchParams);
         if (useSampleModel && !model.hasData()) {
             sampleORM =
                 sampleORM || buildSampleORM(component.props.resModel, component.props.fields, user);
+            sampleORM.setGroups(model.getGroups());
+            // Load data with sampleORM then restore real ORM.
             model.orm = sampleORM;
             await model.load(searchParams);
+            model.orm = orm;
         } else {
             useSampleModel = false;
         }
@@ -117,6 +136,16 @@ export function useModel(ModelClass, params, options = {}) {
         }
     }
     onWillStart(async () => {
+        // FIXME: we have a problem here: in the view, we have two onWillStart:
+        //  - 1) to load the subviews that aren't inline
+        //  - 2) to load the data
+        //  2) must be done after 1), but we can't sync two onWillStarts
+        // The problem is also there with the relational model, but it isn't visible
+        // in the tests because the load the sub views in a tick, and we look inside
+        // the fieldsInfo after a tick as well. Here, we look into fieldsInfo directly.
+        if (params.beforeLoadProm) {
+            await params.beforeLoadProm;
+        }
         await load(component.props);
         started = true;
     });
diff --git a/addons/web/static/src/views/helpers/no_content_helpers.xml b/addons/web/static/src/views/no_content_helpers.xml
similarity index 100%
rename from addons/web/static/src/views/helpers/no_content_helpers.xml
rename to addons/web/static/src/views/no_content_helpers.xml
diff --git a/addons/web/static/src/views/onboarding_banner.js b/addons/web/static/src/views/onboarding_banner.js
index b886c386333..31ba74e4691 100644
--- a/addons/web/static/src/views/onboarding_banner.js
+++ b/addons/web/static/src/views/onboarding_banner.js
@@ -2,7 +2,7 @@
 
 import { loadCSS, loadJS } from "@web/core/assets";
 import { useService } from "@web/core/utils/hooks";
-import { useActionLinks } from "@web/views/helpers/view_hook";
+import { useActionLinks } from "@web/views/view_hook";
 
 const { Component, markup, onWillStart, xml } = owl;
 
diff --git a/addons/web/static/src/views/pivot/pivot_arch_parser.js b/addons/web/static/src/views/pivot/pivot_arch_parser.js
index 63ee6cdd292..588425c16b7 100644
--- a/addons/web/static/src/views/pivot/pivot_arch_parser.js
+++ b/addons/web/static/src/views/pivot/pivot_arch_parser.js
@@ -2,7 +2,7 @@
 
 import { evaluateExpr } from "@web/core/py_js/py";
 import { XMLParser } from "@web/core/utils/xml";
-import { archParseBoolean } from "@web/views/helpers/utils";
+import { archParseBoolean } from "@web/views/utils";
 
 export class PivotArchParser extends XMLParser {
     parse(arch) {
diff --git a/addons/web/static/src/views/pivot/pivot_controller.js b/addons/web/static/src/views/pivot/pivot_controller.js
index dc4b82329da..18af5f375db 100644
--- a/addons/web/static/src/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/views/pivot/pivot_controller.js
@@ -5,11 +5,11 @@ import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { download } from "@web/core/network/download";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
-import { useModel } from "@web/views/helpers/model";
-import { standardViewProps } from "@web/views/helpers/standard_view_props";
-import { useSetupView } from "@web/views/helpers/view_hook";
+import { useModel } from "@web/views/model";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { useSetupView } from "@web/views/view_hook";
 
-const { Component } = owl;
+const { Component, useRef } = owl;
 
 export class PivotController extends Component {
     setup() {
@@ -17,6 +17,7 @@ export class PivotController extends Component {
         this.model = useModel(this.props.Model, this.props.modelParams);
 
         useSetupView({
+            rootRef: useRef("root"),
             getLocalState: () => {
                 const { data, metaData } = this.model;
                 return { data, metaData };
diff --git a/addons/web/static/src/views/pivot/pivot_controller.xml b/addons/web/static/src/views/pivot/pivot_controller.xml
index 11c6f04d564..241b49cec2d 100644
--- a/addons/web/static/src/views/pivot/pivot_controller.xml
+++ b/addons/web/static/src/views/pivot/pivot_controller.xml
@@ -17,9 +17,9 @@
     </t>
 
     <t t-name="web.PivotView" owl="1">
-        <div t-att-class="props.className">
+        <div t-att-class="props.className" t-ref="root">
             <Layout className="model.useSampleModel ? 'o_view_sample_data' : ''">
-                <t t-set-slot="control-panel-bottom-left">
+                <t t-set-slot="layout-buttons">
                     <t t-call="{{ props.buttonTemplate }}"/>
                 </t>
                 <t t-set="displayNoContent" t-value="
diff --git a/addons/web/static/src/views/pivot/pivot_model.js b/addons/web/static/src/views/pivot/pivot_model.js
index 09d65276ce1..f77c3402c3f 100644
--- a/addons/web/static/src/views/pivot/pivot_model.js
+++ b/addons/web/static/src/views/pivot/pivot_model.js
@@ -5,8 +5,8 @@ import { cartesian, sections, sortBy, symmetricalDifference } from "@web/core/ut
 import { KeepLast, Race } from "@web/core/utils/concurrency";
 import { computeVariation } from "@web/core/utils/numbers";
 import { DEFAULT_INTERVAL } from "@web/search/utils/dates";
-import { Model } from "@web/views/helpers/model";
-import { computeReportMeasures, processMeasure } from "@web/views/helpers/utils";
+import { Model } from "@web/views/model";
+import { computeReportMeasures, processMeasure } from "@web/views/utils";
 
 /**
  * Pivot Model
@@ -1521,9 +1521,11 @@ export class PivotModel extends Model {
             metaData.fields[fieldName] &&
             metaData.fields[fieldName].type === "boolean"
         ) {
-            return value === undefined ?
-                this.env._t('None')
-                : (value ? this.env._t('Yes') : this.env._t('No'));
+            return value === undefined
+                ? this.env._t("None")
+                : value
+                ? this.env._t("Yes")
+                : this.env._t("No");
         }
         if (value === false) {
             return this.env._t("None");
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.js b/addons/web/static/src/views/pivot/pivot_renderer.js
index ae3c41d7467..dd511a19e6e 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/views/pivot/pivot_renderer.js
@@ -3,11 +3,12 @@
 import { CheckBox } from "@web/core/checkbox/checkbox";
 import { localization } from "@web/core/l10n/localization";
 import { registry } from "@web/core/registry";
+import { formatPercentage } from "@web/views/fields/formatters";
 import { PivotGroupByMenu } from "@web/views/pivot/pivot_group_by_menu";
 import fieldUtils from "web.field_utils";
 
 const { Component, onWillUpdateProps, useRef } = owl;
-const formatterRegistry = registry.category("formatters");
+const formatters = registry.category("formatters");
 
 export class PivotRenderer extends Component {
     setup() {
@@ -37,7 +38,7 @@ export class PivotRenderer extends Component {
         }
         //If the formatter is not found on the registry, search on the legacy fieldUtils.format.
         //This must be removed when all the formatters will be on the registry
-        const formatter = formatterRegistry.get(formatType, null) || fieldUtils.format[formatType];
+        const formatter = formatters.get(formatType, null) || fieldUtils.format[formatType];
         if (!formatter) {
             throw new Error(`${formatType} is not a defined formatter!`);
         }
@@ -54,7 +55,6 @@ export class PivotRenderer extends Component {
         if (isNaN(cell.value)) {
             return "-";
         }
-        const formatPercentage = formatterRegistry.get("percentage");
         return formatPercentage(cell.value, this.model.metaData.fields[cell.measure]);
     }
     /**
diff --git a/addons/web/static/src/views/record.js b/addons/web/static/src/views/record.js
new file mode 100644
index 00000000000..d50c5297441
--- /dev/null
+++ b/addons/web/static/src/views/record.js
@@ -0,0 +1,53 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { useModel } from "@web/views/model";
+import { RelationalModel } from "@web/views/relational_model";
+const { Component, xml, onWillStart, onWillUpdateProps } = owl;
+
+class _Record extends Component {
+    setup() {
+        const activeFields = Object.fromEntries(
+            this.props.info.fieldNames.map((f) => [f, { attrs: {}, options: {}, domain: "[]" }])
+        );
+
+        this.model = useModel(RelationalModel, {
+            resId: this.props.info.resId,
+            resModel: this.props.info.resModel,
+            fields: this.props.fields,
+            viewMode: "form",
+            rootType: "record",
+            activeFields,
+            mode: this.props.info.mode === "edit" ? "edit" : undefined,
+            initialValues: this.props.info.initialValues,
+        });
+        onWillUpdateProps(async (nextProps) => {
+            await this.model.load({
+                resId: nextProps.info.resId,
+                mode: nextProps.info.mode,
+            });
+        });
+    }
+}
+_Record.template = xml`<t t-slot="default" record="model.root"/>`;
+
+export class Record extends Component {
+    setup() {
+        if (this.props.fields) {
+            this.fields = this.props.fields;
+        } else {
+            const orm = useService("orm");
+            onWillStart(async () => {
+                this.fields = await orm.call(
+                    this.props.resModel,
+                    "fields_get",
+                    [this.props.fieldNames],
+                    {}
+                );
+            });
+        }
+    }
+}
+Record.template = xml`<_Record fields="fields" slots="props.slots" info="props" />`;
+Record.components = { _Record };
+Record.props = ["slots", "resModel", "fieldNames", "fields?", "resId?", "mode?", "initialValues?"];
diff --git a/addons/web/static/src/views/relational_model.js b/addons/web/static/src/views/relational_model.js
new file mode 100644
index 00000000000..d72b391c54d
--- /dev/null
+++ b/addons/web/static/src/views/relational_model.js
@@ -0,0 +1,3287 @@
+/* @odoo-module */
+
+import { AlertDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { makeContext } from "@web/core/context";
+import { Domain } from "@web/core/domain";
+import { WarningDialog } from "@web/core/errors/error_dialogs";
+import {
+    deserializeDate,
+    deserializeDateTime,
+    serializeDate,
+    serializeDateTime,
+} from "@web/core/l10n/dates";
+import { ORM, x2ManyCommands } from "@web/core/orm_service";
+import { evaluateExpr } from "@web/core/py_js/py";
+import { registry } from "@web/core/registry";
+import { unique } from "@web/core/utils/arrays";
+import { Deferred, KeepLast, Mutex } from "@web/core/utils/concurrency";
+import { escape } from "@web/core/utils/strings";
+import { session } from "@web/session";
+import { FormArchParser } from "@web/views/form/form_arch_parser";
+import { ListConfirmationDialog } from "@web/views/list/list_confirmation_dialog";
+import { Model } from "@web/views/model";
+import { archParseBoolean, evalDomain, isNumeric, isRelational, isX2Many } from "@web/views/utils";
+
+const { DateTime } = luxon;
+const { markRaw, markup, toRaw } = owl;
+
+const preloadedDataRegistry = registry.category("preloadedData");
+
+const { CREATE, UPDATE, DELETE, FORGET, LINK_TO, DELETE_ALL, REPLACE_WITH } = x2ManyCommands;
+const QUICK_CREATE_FIELD_TYPES = ["char", "boolean", "many2one", "selection"];
+const DEFAULT_HANDLE_FIELD = "sequence";
+const DEFAULT_QUICK_CREATE_FIELDS = {
+    display_name: { string: "Display name", type: "char" },
+};
+const DEFAULT_QUICK_CREATE_VIEW = {
+    // note: the required modifier is written in the format returned by the server
+    arch: /* xml */ `
+        <form>
+            <field name="display_name" placeholder="Title" modifiers='{"required": true}' />
+        </form>`,
+};
+
+/**
+ * @typedef {import("@web/core/context").ContextDescription} ContextDescription
+ * @typedef {import("@web/core/context").ContextDescription} Context
+ */
+
+/**
+ * @typedef {{
+ *  parent?: RawContext;
+ *  make: () => Context;
+ * }} RawContext
+ */
+
+/**
+ * @param {Object} groupByField
+ * @returns {boolean}
+ */
+export function isAllowedDateField(groupByField) {
+    return (
+        ["date", "datetime"].includes(groupByField.type) &&
+        archParseBoolean(groupByField.rawAttrs.allow_group_range_value)
+    );
+}
+
+/**
+ * @typedef {Object} OrderTerm ?
+ * @property {string} name
+ * @property {boolean} asc
+ */
+
+/**
+ * @param {OrderTerm[]} orderBy
+ * @returns {string}
+ */
+function orderByToString(orderBy) {
+    return orderBy.map((o) => `${o.name} ${o.asc ? "ASC" : "DESC"}`).join(", ");
+}
+
+/**
+ * FIXME: don't know where this function should be:
+ *   - on a dataPoint: don't want to make it accessible everywhere (e.g. in Fields)
+ *   - on the model: would still be accessible by views + I like the current light API of the model
+ *
+ * Given a model name and res ids, calls the method "action_archive" or
+ * "action_unarchive", and executes the returned action any.
+ *
+ * @param {string} resModel
+ * @param {integer[]} resIds
+ * @param {boolean} doArchive archive the records if true, otherwise unarchive them
+ * @param {Context} context
+ */
+async function toggleArchive(model, resModel, resIds, doArchive, context) {
+    const method = doArchive ? "action_archive" : "action_unarchive";
+    const action = await model.orm.call(resModel, method, [resIds], { context });
+    if (action && Object.keys(action).length !== 0) {
+        model.action.doAction(action);
+    }
+}
+
+async function unselectRecord(editedRecord, abandonRecord) {
+    if (editedRecord) {
+        const canBeAbandoned = editedRecord.canBeAbandoned;
+        if (!canBeAbandoned && editedRecord.checkValidity()) {
+            return editedRecord.switchMode("readonly");
+        } else if (canBeAbandoned) {
+            return abandonRecord(editedRecord.id);
+        }
+    }
+}
+
+class RequestBatcherORM extends ORM {
+    constructor() {
+        super(...arguments);
+        this.searchReadBatches = {};
+        this.searchReadBatchId = 1;
+        this.batches = {};
+    }
+
+    /**
+     * @param {number[]} ids
+     * @param {any[]} keys
+     * @param {Function} callback
+     * @returns {Promise<any>}
+     */
+    async batch(ids, keys, callback) {
+        const key = JSON.stringify(keys);
+        let batch = this.batches[key];
+        if (!batch) {
+            batch = {
+                deferred: new Deferred(),
+                scheduled: false,
+                ids: [],
+            };
+            this.batches[key] = batch;
+        }
+        batch.ids = unique([...batch.ids, ...ids]);
+
+        if (!batch.scheduled) {
+            batch.scheduled = true;
+            Promise.resolve().then(async () => {
+                delete this.batches[key];
+                const result = await callback(batch.ids);
+                batch.deferred.resolve(result);
+            });
+        }
+
+        return batch.deferred;
+    }
+
+    /**
+     * Entry point to batch "name_get" calls. If the `resModel` argument has
+     * already been called, the given ids are added to the previous list of ids
+     * to perform a single name_get call.
+     *
+     * @param {string} resModel
+     * @param {number[]} resIds
+     * @param {object} context
+     * @returns {Promise<[number, string][]>}
+     */
+    async nameGet(resModel, resIds, context) {
+        const pairs = await this.batch(resIds, ["name_get", resModel, context], (resIds) =>
+            super.nameGet(resModel, resIds, context)
+        );
+        return pairs.filter(([id]) => resIds.includes(id));
+    }
+
+    /**
+     * Entry point to batch "read" calls. If the `fields` and `resModel`
+     * arguments have already been called, the given ids are added to the
+     * previous list of ids to perform a single read call. Once the server
+     * responds, records are then dispatched to the callees based on the
+     * given ids arguments (kept in the closure).
+     *
+     * @param {string} resModel
+     * @param {number[]} resIds
+     * @param {string[]} fields
+     * @returns {Promise<Object[]>}
+     */
+    async read(resModel, resIds, fields, context) {
+        const records = await this.batch(resIds, ["read", resModel, fields, context], (resIds) =>
+            super.read(resModel, resIds, fields, context)
+        );
+        return records.filter((r) => resIds.includes(r.id));
+    }
+
+    /**
+     * Entry point to batch "unlink" calls. If the `resModel` argument has
+     * already been called, the given ids are added to the previous list of ids
+     * to perform a single unlink call.
+     *
+     * @param {string} resModel
+     * @param {number[]} resIds
+     * @returns {Promise<boolean>}
+     */
+    async unlink(resModel, resIds, context) {
+        return this.batch(resIds, ["unlink", resModel, context], (resIds) =>
+            super.unlink(resModel, resIds, context)
+        );
+    }
+
+    /**
+     * @override
+     */
+    async webSearchRead(/*model*/) {
+        // FIXME: discriminate on model? (it is always the same in our usecase)
+        const batchId = this.searchReadBatchId;
+        let batch = this.searchReadBatches[batchId];
+        if (!batch) {
+            batch = {
+                deferred: new Deferred(),
+                count: 0,
+            };
+            Promise.resolve().then(() => this.searchReadBatchId++);
+            this.searchReadBatches[batchId] = batch;
+        }
+        batch.count++;
+        const result = await super.webSearchRead(...arguments);
+        batch.count--;
+        if (batch.count === 0) {
+            delete this.searchReadBatches[batchId];
+            batch.deferred.resolve();
+        }
+        await batch.deferred;
+        return result;
+    }
+}
+
+let nextId = 0;
+class DataPoint {
+    /**
+     * @param {RelationalModel} model
+     * @param {Object} [params={}]
+     * @param {Object} [state={}]
+     */
+    constructor(model, params = {}, state = {}) {
+        this.id = `datapoint_${nextId++}`;
+
+        this.model = model;
+        this.resModel = params.resModel;
+        this.fields = params.fields;
+        this.activeFields = params.activeFields || {};
+
+        this.rawContext = params.rawContext;
+        this.defaultContext = params.defaultContext;
+        this.setup(params, state);
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get context() {
+        const contexts = [];
+        let rawContext = this.rawContext;
+        if (!rawContext) {
+            return Object.assign({}, this.defaultContext);
+        }
+        contexts.push({ ...this.defaultContext, ...rawContext.make() });
+
+        while (rawContext.parent) {
+            rawContext = rawContext.parent;
+            const context = rawContext.make();
+            for (const key in context) {
+                if (key.startsWith("default_")) {
+                    delete context[key];
+                }
+            }
+            contexts.push(context);
+        }
+
+        return Object.assign({}, ...contexts.reverse());
+    }
+
+    get fieldNames() {
+        return Object.keys(this.activeFields);
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    exportState() {
+        return {};
+    }
+
+    async load() {
+        throw new Error("load must be implemented");
+    }
+
+    /**
+     * @abstract
+     * @param {Object} params
+     * @param {Object} state
+     */
+    setup() {}
+
+    /**
+     * TODO WOWL: adapt this comment to new system
+     * Also, is datapoint the best place ? Could be in record.
+     *
+     * Invalidates the DataManager's cache if the main model (i.e. the model of
+     * its root parent) of the given dataPoint is a model in 'noCacheModels'.
+     *
+     * Reloads the currencies if the main model is 'res.currency'.
+     * Reloads the webclient if we modify a res.company, to (un)activate the
+     * multi-company environment if we are not in a tour test.
+     *
+     */
+    invalidateCache() {
+        if (this.resModel === "res.currency") {
+            // TODO WOWL: this needs to be ported from basic model for the list view to have it.
+            // session.reloadCurrencies();
+            // There is a test in form view but it uses the basic model for now.
+        }
+        if (this.resModel === "res.company") {
+            this.model.action.doAction("reload_context");
+        }
+        if (this.model.noCacheModels.includes(this.resModel)) {
+            this.model.env.bus.trigger("CLEAR-CACHES");
+        }
+    }
+
+    // -------------------------------------------------------------------------
+    // Protected
+    // -------------------------------------------------------------------------
+
+    _parseServerValue(field, value) {
+        switch (field.type) {
+            case "date": {
+                return value ? deserializeDate(value) : false;
+            }
+            case "datetime": {
+                return value ? deserializeDateTime(value) : false;
+            }
+            case "html": {
+                return markup(value);
+            }
+            case "selection": {
+                if (value === false) {
+                    // process selection: convert false to 0, if 0 is a valid key
+                    const hasKey0 = field.selection.find((option) => option[0] === 0);
+                    return hasKey0 ? 0 : value;
+                }
+                break;
+            }
+        }
+        return value;
+    }
+
+    _parseServerValues(values) {
+        const parsedValues = {};
+        if (!values) {
+            return parsedValues;
+        }
+        for (const fieldName in values) {
+            const value = values[fieldName];
+            const field = this.fields[fieldName];
+            parsedValues[fieldName] = this._parseServerValue(field, value);
+        }
+        return parsedValues;
+    }
+}
+
+markRaw(DataPoint.prototype);
+
+function clearObject(obj) {
+    for (const key in obj) {
+        delete obj[key];
+    }
+}
+
+export class Record extends DataPoint {
+    setup(params, state) {
+        if ("resId" in params) {
+            this.resId = params.resId;
+        } else if (state) {
+            this.resId = state.resId;
+        }
+        if (!this.resId) {
+            this.resId = false;
+            this.virtualId = params.virtualId || this.model.nextVirtualId;
+        }
+        this.resIds =
+            (params.resIds ? toRaw(params.resIds) : null) || // FIXME WOWL reactivity
+            state.resIds ||
+            (this.resId ? [this.resId] : []);
+
+        this._values = {};
+        this._changes = {};
+        this.data = {};
+
+        this.parentActiveFields = params.parentActiveFields || false;
+        this.onChanges = params.onChanges || (() => {});
+
+        this._invalidFields = new Set();
+        this._requiredFields = {};
+        this._setRequiredFields();
+        this.preloadedData = {};
+        this.preloadedDataCaches = {};
+        this.isInQuickCreation = params.isInQuickCreation || false;
+        this._onChangePromise = Promise.resolve({});
+
+        this._domains = {};
+
+        this.relationField = params.relationField;
+        this.parentRecord = params.parentRecord;
+
+        this.getParentRecordContext = params.getParentRecordContext;
+
+        this.selected = false;
+        this.mode = params.mode || (this.resId ? state.mode || "readonly" : "edit");
+
+        this._onWillSwitchMode = params.onRecordWillSwitchMode || (() => {});
+
+        this.canBeAbandoned = this.isVirtual;
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get dataContext() {
+        // should not be called befor this.data is ready!
+        const evalContext = { ...this.model.user.context };
+        for (const fieldName in this.activeFields) {
+            const value = this.data[fieldName];
+            if ([null].includes(value)) {
+                // simplify that?
+                evalContext[fieldName] = false;
+            } else if (isX2Many(this.fields[fieldName])) {
+                const list = this._cache[fieldName];
+                evalContext[fieldName] = list.getContext();
+                // ---> implied to initialize (resIds, commands) currentIds before loading static list
+            } else if (value && this.fields[fieldName].type === "date") {
+                evalContext[fieldName] = value.toFormat("yyyy-LL-dd");
+            } else if (value && this.fields[fieldName].type === "datetime") {
+                evalContext[fieldName] = value.toFormat("yyyy-LL-dd HH:mm:ss");
+            } else if (value && this.fields[fieldName].type === "many2one") {
+                evalContext[fieldName] = value[0];
+            } else if (value && this.fields[fieldName].type === "reference") {
+                evalContext[fieldName] = `${value.resModel},${value.resId}`;
+            } else {
+                evalContext[fieldName] = value;
+            }
+        }
+        evalContext.id = this.resId || false;
+        if (this.getParentRecordContext) {
+            evalContext.parent = this.getParentRecordContext();
+        }
+        return evalContext;
+    }
+
+    get evalContext() {
+        return {
+            // ...
+            ...this.dataContext,
+        };
+    }
+
+    /**
+     * Since the ORM can support both `active` and `x_active` fields for
+     * the archiving mechanism, check if any such field exists and prioritize
+     * them. The `active` field should always take priority over its custom
+     * version.
+     *
+     * @returns {boolean} true iff the field is active or there is no `active`
+     *   or `x_active` field on the model
+     */
+    get isActive() {
+        if ("active" in this.activeFields) {
+            return this.data.active;
+        } else if ("x_active" in this.activeFields) {
+            return this.data.x_active;
+        }
+        return true;
+    }
+
+    get isDirty() {
+        if (this.canBeAbandoned) {
+            // for a new record, have changes does not necessarily mean to be dirty!
+            return false;
+        }
+
+        const changes = { ...this._changes };
+        for (const fieldName in changes) {
+            const fieldType = this.fields[fieldName].type;
+            if (["one2many", "many2many"].includes(fieldType)) {
+                if (changes[fieldName].getCommands()) {
+                    return true;
+                }
+            } else {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    get dirtyFields() {
+        if (!this.isDirty) return [];
+        return this._changes.map((change) => this.activeFields[change]);
+    }
+
+    get isInEdition() {
+        return this.mode === "edit";
+    }
+
+    get isNew() {
+        return this.isVirtual;
+    }
+
+    get isVirtual() {
+        return !this.resId;
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    /**
+     * To be called **only** when Odoo is about to be closed, and we want to
+     * save potential changes on a given record.
+     *
+     * We can't follow the normal flow (onchange(s) + save, mutexified),
+     * because the 'beforeunload' handler must be *almost* sync (< 10 ms
+     * setTimeout seems fine, but an rpc roundtrip is definitely too long),
+     * so here we bypass the standard mechanism of notifying changes and
+     * saving them:
+     *  - we ask the model to bypass its mutex for upcoming 'notifyChanges' and
+     *   'save' requests
+     *  - we ask all fields to commit their changes (in case there would
+     *    be a focused field with a fresh value)
+     *  - we take all changes that have been reported to the
+     *    controller, but not yet sent to the model because of the mutex,
+     *    and directly notify the model about them, see update.
+     *  - we reset the widgets with all those changes, s.t. a further call
+     *    to 'canBeRemoved' uses the correct data (it asks the widgets if
+     *    they are set/valid, based on their internal state)
+     *  - if the record is dirty, we save directly
+     */
+    async urgentSave() {
+        this._urgentSave = true;
+        this.model.env.bus.trigger("RELATIONAL_MODEL:WILL_SAVE_URGENTLY");
+        this._save();
+    }
+
+    async archive() {
+        await toggleArchive(this.model, this.resModel, [this.resId], true, this.context);
+        await this.load();
+        this.model.notify();
+        this.invalidateCache();
+    }
+
+    checkValidity() {
+        for (const fieldName in this._requiredFields) {
+            const fieldType = this.fields[fieldName].type;
+            if (!evalDomain(this._requiredFields[fieldName], this.evalContext)) {
+                this._removeInvalidFields([fieldName]);
+                continue;
+            }
+            switch (fieldType) {
+                case "boolean":
+                case "float":
+                case "integer":
+                    continue;
+                case "one2many":
+                case "many2many":
+                    if (!this.isX2ManyValid(fieldName)) {
+                        this.setInvalidField(fieldName);
+                    }
+                    break;
+                default:
+                    if (this.isRequired(fieldName) && !this.data[fieldName]) {
+                        this.setInvalidField(fieldName);
+                    }
+            }
+        }
+        return !this._invalidFields.size;
+    }
+
+    async delete() {
+        const unlinked = await this.model.orm.unlink(this.resModel, [this.resId], this.context);
+        if (!unlinked) {
+            return false;
+        }
+        const index = this.resIds.indexOf(this.resId);
+        this.resIds.splice(index, 1);
+        this.resId = this.resIds[Math.min(index, this.resIds.length - 1)] || false;
+        if (this.resId) {
+            await this.load();
+            this.model.notify();
+        } else {
+            this.data = {};
+            this._values = {};
+            this._changes = {};
+            this.preloadedData = {};
+        }
+        this.invalidateCache();
+    }
+
+    discard() {
+        clearObject(this._changes);
+        clearObject(this._domains);
+        for (const fieldName in this.activeFields) {
+            // activeFields should be changed
+            const field = this.fields[fieldName];
+            if (isX2Many(field)) {
+                this.data[fieldName].discard();
+            } else if (fieldName in this._values) {
+                this.data[fieldName] = this._values[fieldName];
+            }
+        }
+        if (!this.isVirtual) {
+            this.switchMode("readonly");
+        }
+        this.model.notify();
+    }
+
+    // FIXME AAB: to discuss: not sure we want to keep resIds in the model (this concerns
+    // "duplicate" and "delete"). Alternative: handle this in form_view (but then what's the
+    // point of calling a Record method to do the operation?)
+    async duplicate() {
+        const kwargs = { context: this.context };
+        const index = this.resIds.indexOf(this.resId);
+        this.resId = await this.model.orm.call(this.resModel, "copy", [this.resId], kwargs);
+        this.resIds.splice(index + 1, 0, this.resId);
+        await this.load();
+        this.switchMode("edit");
+        this.model.notify();
+    }
+
+    exportState() {
+        return {
+            mode: this.mode,
+            resId: this.resId,
+            resIds: this.resIds,
+        };
+    }
+
+    getChanges(allFields = false, parentChanges = false) {
+        const changes = { ...(allFields ? this.data : this._changes) };
+        for (const fieldName in changes) {
+            if (!allFields && fieldName in this.activeFields && this.isReadonly(fieldName)) {
+                delete changes[fieldName];
+                continue;
+            }
+            const fieldType = this.fields[fieldName].type;
+            if (["one2many", "many2many"].includes(fieldType)) {
+                const staticList = this._cache[fieldName];
+                changes[fieldName] = staticList.getCommands(allFields); // always ask
+                if (!changes[fieldName]) {
+                    delete changes[fieldName];
+                }
+            } else if (fieldType === "many2one") {
+                changes[fieldName] = changes[fieldName] ? changes[fieldName][0] : false;
+            } else if (fieldType === "date") {
+                changes[fieldName] = changes[fieldName] ? serializeDate(changes[fieldName]) : false;
+            } else if (fieldType === "datetime") {
+                changes[fieldName] = changes[fieldName]
+                    ? serializeDateTime(changes[fieldName])
+                    : false;
+            } else if (fieldType === "reference") {
+                const value = changes[fieldName];
+                changes[fieldName] = value ? `${value.resModel},${value.resId}` : false;
+            }
+        }
+
+        const relationalFieldChanges = {};
+        if (allFields && parentChanges && this.relationField && this.parentRecord) {
+            relationalFieldChanges[this.relationField] = this.parentRecord.getChanges(allFields);
+        }
+
+        return {
+            ...this._rawChanges,
+            ...changes,
+            ...relationalFieldChanges,
+        };
+    }
+
+    getFieldContext(fieldName) {
+        return Object.assign(
+            this.context,
+            makeContext([this.activeFields[fieldName].context], this.evalContext)
+        );
+    }
+
+    getFieldDomain(fieldName) {
+        return Domain.and([
+            this._domains[fieldName] || [],
+            this.fields[fieldName].domain || [],
+            evaluateExpr(this.activeFields[fieldName].domain, this.evalContext),
+        ]);
+    }
+
+    isInvalid(fieldName) {
+        return this._invalidFields.has(fieldName);
+    }
+
+    /**
+     * FIXME: memoize this at some point?
+     * @param {string} fieldName
+     * @returns {boolean}
+     */
+    isInvisible(fieldName) {
+        const activeField = this.activeFields[fieldName];
+        const { invisible } = activeField.modifiers || {};
+        return invisible ? evalDomain(invisible, this.evalContext) : false;
+    }
+
+    /**
+     * FIXME: memoize this at some point?
+     * @param {string} fieldName
+     * @returns {boolean}
+     */
+    isReadonly(fieldName) {
+        const activeField = this.activeFields[fieldName];
+        const { readonly } = activeField.modifiers || {};
+        return readonly ? evalDomain(readonly, this.evalContext) : false;
+    }
+
+    /**
+     * FIXME: memoize this at some point?
+     * @param {string} fieldName
+     * @returns {boolean}
+     */
+    isRequired(fieldName) {
+        const required = this._requiredFields[fieldName];
+        return required ? evalDomain(required, this.evalContext) : false;
+    }
+
+    isX2ManyValid(fieldName) {
+        const value = this.data[fieldName];
+        return value.records.every((r) => r.checkValidity());
+    }
+
+    async load(params = {}) {
+        this._cache = {};
+        for (const fieldName in this.activeFields) {
+            const field = this.fields[fieldName];
+            if (isX2Many(field)) {
+                const staticList = this._createStaticList(fieldName);
+                this._cache[fieldName] = staticList;
+            }
+        }
+
+        if (!(params.values || !this.isVirtual)) {
+            const changes = params.changes || (await this._onChange());
+            await this._load({ changes });
+        } else {
+            let values = params.values || {};
+            const missingFields = this.fieldNames.filter((fieldName) => !(fieldName in values));
+            if (missingFields.length) {
+                values = Object.assign({}, values, await this._read(missingFields));
+            }
+            await this._load({ values });
+        }
+    }
+
+    async loadPreloadedData() {
+        const fetchPreloadedData = async (info, fieldName) => {
+            if (!info.loadOnTypes.includes(this.fields[fieldName].type)) {
+                return;
+            }
+            const domain = this.getFieldDomain(fieldName).toList(this.evalContext).toString();
+            const getExtraKey = info.extraMemoizationKey || (() => null);
+            const key = JSON.stringify([domain, getExtraKey(this, fieldName)]);
+            if (this.preloadedDataCaches[fieldName] !== key) {
+                this.preloadedDataCaches[fieldName] = key;
+                this.preloadedData[fieldName] = await info.preload(this.model.orm, this, fieldName);
+            }
+        };
+
+        const proms = [];
+        for (const fieldName in this.activeFields) {
+            const activeField = this.activeFields[fieldName];
+            // @FIXME type should not be get like this
+            const type = activeField.widget || this.fields[fieldName].type;
+            if (!this.isInvisible(fieldName) && preloadedDataRegistry.contains(type)) {
+                proms.push(fetchPreloadedData(preloadedDataRegistry.get(type), fieldName));
+            }
+        }
+        await Promise.all(proms);
+    }
+
+    async loadRelationalData() {
+        const proms = [];
+        for (const fieldName in this.activeFields) {
+            const field = this.fields[fieldName];
+            if (field.type === "many2one") {
+                proms.push(
+                    this._loadMany2OneData(fieldName, this.data[fieldName]).then((value) => {
+                        this.data[fieldName] = value;
+                        this._values[fieldName] = value;
+                    })
+                );
+            } else if (field.type === "reference") {
+                proms.push(
+                    this._loadReference(fieldName, this.data[fieldName]).then((value) => {
+                        this.data[fieldName] = value;
+                        this._values[fieldName] = value;
+                    })
+                );
+            } else if (isX2Many(field)) {
+                proms.push(this._loadX2ManyData(fieldName));
+            }
+        }
+        await Promise.all(proms);
+    }
+
+    /**
+     *
+     * @param {Object} options
+     * @param {boolean} [options.stayInEdition=false]
+     * @param {boolean} [options.noReload=false] prevents the record from
+     *  reloading after changes are applied, typically used to defer the load.
+     * @returns {Promise<boolean>}
+     */
+    async save(options = { stayInEdition: false, noReload: false }) {
+        return this.model.mutex.exec(() => this._save(options));
+    }
+
+    async setInvalidField(fieldName) {
+        if (this.selected && this.model.multiEdit) {
+            const dialogProps = {
+                body: this.model.env._t("No valid record to save"),
+                confirm: () => {
+                    this.discard();
+                },
+            };
+            await this.model.dialogService.add(AlertDialog, dialogProps);
+        } else {
+            this._invalidFields.add(fieldName);
+            this.model.notify();
+        }
+    }
+
+    /**
+     * @param {"edit" | "readonly"} mode
+     * @returns {Promise<void>}
+     */
+    async switchMode(mode) {
+        if (this.mode === mode) {
+            return;
+        }
+        const preventSwitch = await this._onWillSwitchMode(this, mode);
+        if (preventSwitch === false) {
+            return;
+        }
+        if (mode === "readonly") {
+            for (const fieldName in this.activeFields) {
+                const field = this.fields[fieldName];
+                if (isX2Many(field)) {
+                    const editedRecord = this.data[fieldName] && this.data[fieldName].editedRecord;
+                    if (editedRecord) {
+                        editedRecord.switchMode("readonly");
+                    }
+                }
+            }
+        }
+        this.mode = mode;
+        this.model.notify();
+    }
+
+    toggleSelection(selected) {
+        if (typeof selected === "boolean") {
+            this.selected = selected;
+        } else {
+            this.selected = !this.selected;
+        }
+        this.model.notify();
+    }
+
+    async unarchive() {
+        await toggleArchive(this.model, this.resModel, [this.resId], false, this.context);
+        await this.load();
+        this.model.notify();
+        this.invalidateCache();
+    }
+
+    async update(changes) {
+        if (this._urgentSave) {
+            return this._update(changes);
+        }
+        return this.model.mutex.exec(async () => {
+            await this._update(changes);
+        });
+    }
+
+    // -------------------------------------------------------------------------
+    // Protected
+    // -------------------------------------------------------------------------
+
+    async _applyChanges(changes) {
+        for (let [fieldName, value] of Object.entries(changes)) {
+            const field = this.fields[fieldName];
+            if (field && isX2Many(field)) {
+                this._changes[fieldName] = value;
+                await this.data[fieldName].update(value);
+            } else {
+                if (field && field.type === "many2one") {
+                    value = await this.__applyMany2OneChange(fieldName, value);
+                } else if (field && field.type === "reference") {
+                    value = await this._loadReference(fieldName, value);
+                }
+                this.data[fieldName] = value;
+                this._changes[fieldName] = value;
+            }
+        }
+    }
+
+    async __applyMany2OneChange(fieldName, nameGet) {
+        if (!nameGet) {
+            return false;
+        }
+        let [id, label] = nameGet;
+
+        if (!id && !label) {
+            return [false, ""];
+        }
+        const relation = this.fields[fieldName].relation;
+        if (!id && label) {
+            // only display_name given -> do a name_create
+            const res = await this.model.orm.call(relation, "name_create", [label], {
+                context: this.context,
+            });
+            // Check if a record is really created. Models without defined
+            // _rec_name cannot create record based on name_create.
+            if (!res) {
+                return [false, ""]; // not sure about ""
+            }
+            id = res[0];
+            label = res[1];
+        }
+        return [id, label];
+    }
+
+    _createStaticList(fieldName) {
+        const field = this.fields[fieldName];
+        const activeField = this.activeFields[fieldName];
+        const { fieldsToFetch, relatedFields = {}, views = {}, viewMode } = activeField;
+        const fields = {
+            id: { name: "id", type: "integer", readonly: true },
+            ...relatedFields,
+            ...fieldsToFetch,
+        };
+        const activeFields = (views[viewMode] && views[viewMode].activeFields) || {
+            ...fieldsToFetch,
+        };
+        for (const fieldName in relatedFields) {
+            if (relatedFields[fieldName].active) {
+                activeFields[fieldName] = relatedFields[fieldName]; // a field and an active field are not the same thing
+                // bad idea
+            }
+        }
+        const limit = views[viewMode] && views[viewMode].limit;
+        const orderBy = views[viewMode] && views[viewMode].defaultOrder;
+
+        const editable = views[viewMode] && views[viewMode].editable;
+
+        const list = this.model.createDataPoint("static_list", {
+            resModel: this.fields[fieldName].relation,
+            field,
+            fields,
+            activeFields,
+            getParentRecordContext: () => this.dataContext,
+            limit,
+            orderBy,
+            editable,
+            rawContext: {
+                parent: this.rawContext,
+                make: () => {
+                    return makeContext([activeField.context], {
+                        ...this.evalContext,
+                        ...list.evalContext,
+                    });
+                },
+            },
+            parentRecord: this,
+            relationField: field.relation_field,
+            views,
+            viewMode,
+            onChanges: async () => {
+                this._changes[fieldName] = list;
+                const proms = [];
+                if (activeField && activeField.onChange && this.isX2ManyValid(fieldName)) {
+                    const changes = await this._onChange([fieldName]);
+                    const proms = [];
+                    for (const [fieldName, value] of Object.entries(changes)) {
+                        const field = this.fields[fieldName];
+                        // for x2many fields, the onchange returns commands, not ids, so we need to process them
+                        // for now, we simply return an empty list
+                        if (isX2Many(field)) {
+                            this._changes[fieldName] = value;
+                            this.data[fieldName].applyCommands(value);
+                            proms.push(this.data[fieldName].load());
+                        } else {
+                            this._changes[fieldName] = value;
+                            this.data[fieldName] = this._changes[fieldName];
+                        }
+                    }
+                }
+                this.canBeAbandoned = false;
+                await Promise.all(proms);
+                if (this.selected && this.model.multiEdit) {
+                    await this.model.root.multiSave(this);
+                }
+                this.onChanges();
+            },
+        });
+
+        return list;
+    }
+
+    _getDefaultValues() {
+        const defaultValues = {};
+        for (const fieldName of this.fieldNames) {
+            const field = this.fields[fieldName];
+            if (isNumeric(field)) {
+                defaultValues[fieldName] = 0;
+            } else if (["date", "datetime"].includes(field.type)) {
+                defaultValues[fieldName] = false;
+            } else if (isX2Many(field)) {
+                defaultValues[fieldName] = [];
+            } else {
+                defaultValues[fieldName] = null;
+            }
+        }
+        return defaultValues;
+    }
+
+    _getOnchangeSpec() {
+        const specs = {};
+        function buildSpec(activeFields, prefix) {
+            for (const [fieldName, activeField] of Object.entries(activeFields)) {
+                const key = prefix ? `${prefix}.${fieldName}` : fieldName;
+                specs[key] = activeField.onChange ? "1" : "";
+                const subViewInfo = activeField.views && activeField.views[activeField.viewMode];
+                if (subViewInfo) {
+                    buildSpec(subViewInfo.activeFields, key);
+                }
+            }
+        }
+        buildSpec(this.activeFields);
+        return specs;
+    }
+
+    /**
+     * @param {Object} params
+     * @param {Object} params.values
+     * @param {Object} params.changes
+     */
+    async _load(params = {}) {
+        this._values = params.values || {};
+        this._changes = params.changes || {};
+        this._rawChanges = { ...this._changes };
+        const defaultValues = this._getDefaultValues();
+        for (const fieldName in this.activeFields) {
+            delete this._rawChanges[fieldName];
+            const field = this.fields[fieldName];
+            if (isX2Many(field)) {
+                const resIds = this._values[fieldName];
+                const commands = this._changes[fieldName];
+                const staticList = this._cache[fieldName];
+                staticList.setCurrentIds(resIds, commands);
+                this._values[fieldName] = staticList;
+                this._changes[fieldName] = staticList;
+                this.data[fieldName] = staticList;
+            } else {
+                // smth is wrong here for many2one maybe
+                if (fieldName in this._changes) {
+                    this.data[fieldName] = this._changes[fieldName];
+                } else if (fieldName in this._values) {
+                    this.data[fieldName] = this._values[fieldName];
+                } else {
+                    this.data[fieldName] = defaultValues[fieldName];
+                }
+            }
+        }
+
+        await this.loadRelationalData();
+        await this.loadPreloadedData();
+
+        // every field value should be correct here
+        this._invalidFields.clear();
+    }
+
+    async _loadMany2OneData(fieldName, value) {
+        const relation = this.fields[fieldName].relation;
+        const activeField = this.activeFields[fieldName];
+        if (
+            activeField &&
+            !this.isInvisible(fieldName) &&
+            value &&
+            (!value[1] || activeField.options.always_reload)
+        ) {
+            const context = this.getFieldContext(fieldName);
+            const result = await this.model.orm.nameGet(relation, [value[0]], context);
+            return result[0];
+        }
+        return value;
+    }
+
+    async _loadReference(fieldName, value) {
+        // const modelField = this.activeFields[fieldName].options.model_field;
+        // if (modelField) {
+        // }
+        if (value) {
+            if (typeof value === "string") {
+                const [resModel, resId] = value.split(",");
+                value = { resModel, resId: parseInt(resId, 10) };
+            }
+            const { resModel, resId } = value;
+            const context = this.getFieldContext(fieldName);
+            const nameGet = await this.model.orm.nameGet(resModel, [resId], context);
+            return {
+                resModel,
+                resId,
+                displayName: nameGet[0][1],
+            };
+        } else {
+            return false;
+        }
+    }
+
+    async _loadX2ManyData(fieldName) {
+        if (!this.isInvisible(fieldName)) {
+            await this.data[fieldName].load();
+        }
+    }
+
+    async _onChange(fieldNames) {
+        if (!this.fieldNames.length) {
+            return;
+        }
+
+        const { domain, value: changes, warning } = await this.model.orm.call(
+            this.resModel,
+            "onchange",
+            [
+                this.resId ? [this.resId] : [],
+                this.getChanges(true, true),
+                fieldNames && fieldNames.length ? fieldNames : [],
+                this._getOnchangeSpec(),
+            ],
+            { context: this.context }
+        );
+        if (warning) {
+            const { type, title, message } = warning;
+            if (type === "dialog") {
+                this.model.dialogService.add(WarningDialog, { title, message });
+            } else {
+                this.model.notificationService.add(message, {
+                    className: warning.className,
+                    sticky: warning.sticky,
+                    title,
+                    type: "warning",
+                });
+            }
+        }
+        if (domain) {
+            // do this outside
+            Object.assign(this._domains, domain);
+        }
+        return this._parseServerValues(changes);
+    }
+
+    async _read(fieldNames) {
+        fieldNames = fieldNames || this.fieldNames;
+        if (!fieldNames.length) {
+            return {};
+        }
+        const [serverValues] = await this.model.orm.read(this.resModel, [this.resId], fieldNames, {
+            bin_size: true,
+            ...this.context,
+        });
+        return this._parseServerValues(serverValues);
+    }
+
+    _removeInvalidFields(fieldNames) {
+        for (const fieldName of fieldNames) {
+            this._invalidFields.delete(fieldName);
+        }
+    }
+
+    _sanitizeValues(values) {
+        if (this.resModel !== this.model.resModel) {
+            return values;
+        }
+        const sanitizedValues = {};
+        for (const fieldName in values) {
+            if (this.fields[fieldName].type === "char") {
+                sanitizedValues[fieldName] = values[fieldName] || "";
+            } else {
+                sanitizedValues[fieldName] = values[fieldName];
+            }
+        }
+        return sanitizedValues;
+    }
+
+    /**
+     *
+     * @param {Object} options
+     * @param {boolean} [options.stayInEdition=false]
+     * @param {boolean} [options.noReload=false] prevents the record from
+     *  reloading after changes are applied, typically used to defer the load.
+     * @returns {Promise<boolean>}
+     */
+    async _save(options = { stayInEdition: false, noReload: false }) {
+        this.model.env.bus.trigger("RELATIONAL_MODEL:NEED_LOCAL_CHANGES");
+        if (!this.checkValidity()) {
+            const invalidFields = [...this._invalidFields].map((fieldName) => {
+                return `<li>${escape(this.fields[fieldName].string || fieldName)}</li>`;
+            }, this);
+            this.model.notificationService.add(markup(`<ul>${invalidFields.join("")}</ul>`), {
+                title: this.model.env._t("Invalid fields: "),
+                type: "danger",
+            });
+            return false;
+        }
+        const changes = this.getChanges();
+        const keys = Object.keys(changes);
+        const hasChanges = this.isVirtual || keys.length;
+        const shouldReload = hasChanges ? !options.noReload : false;
+
+        if (this.isVirtual) {
+            if (keys.length === 1 && keys[0] === "display_name") {
+                const [resId] = await this.model.orm.call(
+                    this.resModel,
+                    "name_create",
+                    [changes.display_name],
+                    { context: this.context }
+                );
+                this.resId = resId;
+            } else {
+                this.resId = await this.model.orm.create(this.resModel, changes, this.context);
+            }
+            delete this.virtualId;
+            this.data.id = this.resId;
+            this.resIds.push(this.resId);
+            this.invalidateCache();
+        } else if (keys.length > 0) {
+            try {
+                await this.model.orm.write(this.resModel, [this.resId], changes, this.context);
+            } catch (e) {
+                if (!this.isInEdition) {
+                    await Promise.all([this.model.reloadRecords(this.resId), this.load()]);
+                    this.model.notify();
+                }
+                throw e;
+            }
+            this.invalidateCache();
+        }
+
+        // Switch to the parent active fields
+        if (this.parentActiveFields) {
+            this.activeFields = this.parentActiveFields;
+            this.parentActiveFields = false;
+        }
+        this.isInQuickCreation = false;
+        if (shouldReload) {
+            await Promise.all([this.model.reloadRecords(this.resId), this.load()]);
+            this.model.trigger("record-updated", { record: this });
+            this.model.notify();
+        }
+        if (!options.stayInEdition) {
+            this.switchMode("readonly");
+        }
+        return true;
+    }
+
+    _setRequiredFields() {
+        for (const [fieldName, activeField] of Object.entries(this.activeFields)) {
+            const { modifiers } = activeField;
+            if (modifiers && modifiers.required) {
+                this._requiredFields[fieldName] = modifiers.required;
+            }
+        }
+    }
+
+    async _update(changes) {
+        await this._applyChanges(changes);
+        if (this.selected && this.model.multiEdit) {
+            await this.model.root._multiSave(this);
+        } else {
+            const proms = [];
+            const fieldNames = Object.keys(changes);
+            if (fieldNames.length) {
+                this.onChanges();
+            }
+            this._removeInvalidFields(fieldNames);
+            if (
+                fieldNames.some(
+                    (fieldName) =>
+                        this.activeFields[fieldName] && this.activeFields[fieldName].onChange
+                )
+            ) {
+                const changes = await this._onChange(fieldNames);
+                for (const [fieldName, value] of Object.entries(changes)) {
+                    const field = this.fields[fieldName];
+                    // for x2many fields, the onchange returns commands, not ids, so we need to process them
+                    // for now, we simply return an empty list
+                    if (isX2Many(field)) {
+                        this._changes[fieldName] = value;
+                        this.data[fieldName].applyCommands(value);
+                        proms.push(this.data[fieldName].load());
+                    } else {
+                        this._changes[fieldName] = value;
+                        this.data[fieldName] = this._changes[fieldName];
+                    }
+                }
+            }
+            proms.push(this.loadPreloadedData());
+            await Promise.all(proms);
+            this.canBeAbandoned = false;
+            this.model.notify();
+        }
+    }
+}
+
+class DynamicList extends DataPoint {
+    setup(params, state) {
+        this.groupBy = params.groupBy || [];
+        this.domain = markRaw(params.domain || []);
+        this.orderBy = params.orderBy || []; // rename orderBy + get back from state
+        this.offset = state.offset || 0;
+        this.count = 0;
+        this.limit = params.limit || state.limit || this.constructor.DEFAULT_LIMIT;
+        this.isDomainSelected = false;
+        this.loadedCount = state.loadedCount || 0;
+        this.previousParams = state.previousParams || "[]";
+
+        this.editedRecord = null;
+        this.onCreateRecord = params.onCreateRecord || (() => {});
+        this.onRecordWillSwitchMode = async (record, mode) => {
+            const editedRecord = this.editedRecord;
+            this.editedRecord = null;
+            if (!params.onRecordWillSwitchMode && editedRecord) {
+                // not really elegant, but we only need the root list to save the record
+                if (editedRecord !== record && editedRecord.canBeAbandoned) {
+                    this.abandonRecord(editedRecord.id);
+                } else {
+                    const isSaved = await editedRecord.save();
+                    if (!isSaved) {
+                        this.editedRecord = editedRecord;
+                        return false;
+                    }
+                }
+            }
+            if (mode === "edit") {
+                this.editedRecord = record;
+            }
+            if (params.onRecordWillSwitchMode) {
+                params.onRecordWillSwitchMode(record, mode);
+            }
+        };
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get currentParams() {
+        return JSON.stringify([this.domain, this.groupBy]);
+    }
+
+    get firstGroupBy() {
+        return this.groupBy[0] || false;
+    }
+
+    get groupByField() {
+        if (!this.firstGroupBy) {
+            return false;
+        }
+        const [groupByFieldName] = this.firstGroupBy.split(":");
+        return {
+            rawAttrs: {},
+            ...this.fields[groupByFieldName],
+            ...this.activeFields[groupByFieldName],
+        };
+    }
+
+    get isM2MGrouped() {
+        return this.groupBy.some((fieldName) => this.fields[fieldName].type === "many2many");
+    }
+
+    get selection() {
+        return this.records.filter((r) => r.selected);
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    abandonRecord(recordId) {
+        const record = this.records.find((r) => r.id === recordId);
+        this.removeRecord(record);
+    }
+
+    /**
+     * @param {boolean} [isSelected]
+     * @returns {Promise<number[]>}
+     */
+    async archive(isSelected) {
+        const resIds = await this.getResIds(isSelected);
+        await toggleArchive(this.model, this.resModel, resIds, true, this.context);
+        await this.model.load();
+        this.invalidateCache();
+        return resIds;
+    }
+
+    canQuickCreate() {
+        return (
+            this.groupByField &&
+            (isAllowedDateField(this.groupByField) ||
+                QUICK_CREATE_FIELD_TYPES.includes(this.groupByField.type))
+        );
+    }
+
+    canResequence() {
+        return this.model.handleField || DEFAULT_HANDLE_FIELD in this.fields;
+    }
+
+    exportState() {
+        return {
+            limit: this.limit,
+            loadedCount: this.records.length,
+            previousParams: this.currentParams,
+        };
+    }
+
+    /**
+     * @param {boolean} [isSelected]
+     * @returns {Promise<number[]>}
+     */
+    async getResIds(isSelected) {
+        let resIds;
+        if (isSelected) {
+            if (this.isDomainSelected) {
+                resIds = await this.model.orm.search(
+                    this.resModel,
+                    this.domain,
+                    {
+                        limit: session.active_ids_limit,
+                    },
+                    this.context
+                );
+            } else {
+                resIds = this.selection.map((r) => r.resId);
+            }
+        } else {
+            resIds = this.records.map((r) => r.resId);
+        }
+        return resIds;
+    }
+
+    async multiSave(record) {
+        return this.model.mutex.exec(() => this._multiSave(record));
+    }
+
+    selectDomain(value) {
+        this.isDomainSelected = value;
+        this.model.notify();
+    }
+
+    async sortBy(fieldName) {
+        if (this.orderBy.length && this.orderBy[0].name === fieldName) {
+            this.orderBy[0].asc = !this.orderBy[0].asc;
+        } else {
+            this.orderBy = this.orderBy.filter((o) => o.name !== fieldName);
+            this.orderBy.unshift({
+                name: fieldName,
+                asc: true,
+            });
+        }
+
+        await this.load();
+        this.model.notify();
+    }
+
+    /**
+     * @param {boolean} [isSelected]
+     * @returns {Promise<number[]>}
+     */
+    async unarchive(isSelected) {
+        const resIds = await this.getResIds(isSelected);
+        await toggleArchive(this.model, this.resModel, resIds, false, this.context);
+        await this.model.load();
+        this.invalidateCache();
+        return resIds;
+    }
+
+    // -------------------------------------------------------------------------
+    // Protected
+    // -------------------------------------------------------------------------
+
+    async _multiSave(record) {
+        if (this.blockUpdate) {
+            return;
+        }
+        const selection = this.selection;
+        const changes = record.getChanges();
+        if (!changes) {
+            return;
+        }
+        const validSelection = selection.reduce((result, record) => {
+            if (
+                !Object.keys(changes).filter(
+                    (fieldName) =>
+                        record.isReadonly(fieldName) ||
+                        (record.isRequired(fieldName) && !changes[fieldName])
+                ).length
+            ) {
+                result.push(record);
+            }
+            return result;
+        }, []);
+
+        if (validSelection.length === 0) {
+            const dialogProps = {
+                body: this.model.env._t("No valid record to save"),
+                confirm: () => {
+                    record.discard();
+                },
+            };
+            await this.model.dialogService.add(AlertDialog, dialogProps);
+        } else if (validSelection.length > 1) {
+            this.editedRecord = null;
+            const dialogProps = {
+                confirm: async () => {
+                    const resIds = validSelection.map((r) => r.resId);
+                    try {
+                        await this.model.orm.write(this.resModel, resIds, changes, this.context);
+                        this.invalidateCache();
+                        validSelection.forEach((record) => {
+                            record.selected = false;
+                        });
+                        await Promise.all(validSelection.map((record) => record.load()));
+                        record.switchMode("readonly");
+                        this.model.notify();
+                    } catch (_) {
+                        record.discard();
+                    }
+                    validSelection.forEach((record) => {
+                        record.selected = false;
+                    });
+                },
+                cancel: () => {
+                    record.discard();
+                },
+                isDomainSelected: this.isDomainSelected,
+                fields: Object.keys(changes).map((fieldName) => {
+                    const label =
+                        record.activeFields[fieldName].string || record.fields[fieldName].string;
+                    const widget = record.activeFields[fieldName].widget;
+                    return { name: fieldName, label, widget };
+                }),
+                nbRecords: selection.length,
+                nbValidRecords: validSelection.length,
+                record,
+                fieldNodes: this.model.fieldNodes,
+            };
+            this.model.trigger("list-confirmation-dialog-will-open");
+            await this.model.dialogService.add(ListConfirmationDialog, dialogProps, {
+                onClose: () => {
+                    this.model.trigger("list-confirmation-dialog-closed");
+                },
+            });
+        } else {
+            await record._save();
+            record.selected = false;
+        }
+    }
+
+    /**
+     * Calls the method 'resequence' on the given resModel.
+     * The record matching that 'moveId' will be resequenced in the given list of
+     * records, at the start of the list or after the record matching 'targetId' (if any).
+     *
+     * @param {(Group | Record)[]} originalList
+     * @param {string} resModel
+     * @param {string} movedId
+     * @param {string} [targetId]
+     * @returns {Promise<(Group | Record)[]>}
+     */
+    async _resequence(originalList, resModel, movedId, targetId) {
+        if (this.resModel === resModel && !this.canResequence()) {
+            // There is no handle field on the current model
+            return originalList;
+        }
+
+        const handleField = this.model.handleField || DEFAULT_HANDLE_FIELD;
+        const records = [...originalList];
+        const order = this.orderBy.find((o) => o.name === handleField);
+        const asc = !order || order.asc;
+
+        // Find indices
+        const fromIndex = records.findIndex((r) => r.id === movedId);
+        let toIndex = 0;
+        if (targetId !== null) {
+            const targetIndex = records.findIndex((r) => r.id === targetId);
+            toIndex = fromIndex > targetIndex ? targetIndex + 1 : targetIndex;
+        }
+
+        const getSequence = (rec) => rec && rec.data[handleField];
+
+        // Determine what records need to be modified
+        const firstIndex = Math.min(fromIndex, toIndex);
+        const lastIndex = Math.max(fromIndex, toIndex) + 1;
+        let reorderAll = false;
+        let lastSequence = (asc ? -1 : 1) * Infinity;
+        for (let index = 0; index < records.length; index++) {
+            const sequence = getSequence(records[index]);
+            if (
+                ((index < firstIndex || index >= lastIndex) &&
+                    ((asc && lastSequence >= sequence) || (!asc && lastSequence <= sequence))) ||
+                (index >= firstIndex && index < lastIndex && lastSequence === sequence)
+            ) {
+                reorderAll = true;
+            }
+            lastSequence = sequence;
+        }
+
+        // Perform the resequence in the list of records
+        const [record] = records.splice(fromIndex, 1);
+        records.splice(toIndex, 0, record);
+
+        // Creates the list of to modify
+        let toReorder = records;
+        if (!reorderAll) {
+            toReorder = toReorder.slice(firstIndex, lastIndex).filter((r) => r.id !== movedId);
+            if (fromIndex < toIndex) {
+                toReorder.push(record);
+            } else {
+                toReorder.unshift(record);
+            }
+        }
+        if (!asc) {
+            toReorder.reverse();
+        }
+
+        const ids = toReorder.map((r) => r.resId).filter((s) => s === 0 || (s && !isNaN(s)));
+        const sequences = toReorder.map(getSequence);
+        const offset = sequences.length && Math.min(...sequences);
+
+        // Assemble the params
+        const params = { model: resModel, ids, context: this.context };
+        if (offset) {
+            params.offset = offset;
+        }
+        if (this.model.handleField) {
+            params.field = handleField;
+        }
+
+        // Try to write new sequences on the affected records
+        const wasResequenced = await this.model.keepLast.add(
+            this.model.rpc("/web/dataset/resequence", params)
+        );
+        if (!wasResequenced) {
+            return originalList;
+        }
+
+        // Read the actual values set by the server and update the records
+        const result = await this.model.keepLast.add(
+            this.model.orm.read(resModel, ids, [handleField], this.context)
+        );
+        for (const recordData of result) {
+            const record = records.find((r) => r.resId === recordData.id);
+            const value = { [handleField]: recordData[handleField] };
+            if (record instanceof Record) {
+                await record.update(value);
+            } else {
+                Object.assign(record.data, value);
+            }
+        }
+
+        this.model.notify();
+        return records;
+    }
+
+    async unselectRecord() {
+        await unselectRecord(this.editedRecord, this.abandonRecord.bind(this));
+    }
+}
+
+DynamicList.DEFAULT_LIMIT = 80;
+
+export class DynamicRecordList extends DynamicList {
+    setup(params) {
+        super.setup(...arguments);
+
+        /** @type {Record[]} */
+        this.records = [];
+        this.data = params.data;
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get quickCreateRecord() {
+        return this.records.find((r) => r.isInQuickCreation);
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    /**
+     * @param {Record} record
+     * @param {number} [index]
+     * @returns {Record}
+     */
+    addRecord(record, index) {
+        this.records.splice(Number.isInteger(index) ? index : this.records.length, 0, record);
+        this.count++;
+        this.model.notify();
+        return record;
+    }
+
+    async cancelQuickCreate(force = false) {
+        const record = this.quickCreateRecord;
+        if (record && (force || !record.isDirty)) {
+            this.removeRecord(record);
+        }
+    }
+
+    /**
+     * @param {Object} [params={}]
+     * @param {boolean} [atFirstPosition]
+     * @returns {Promise<Record>} the newly created record
+     */
+    async createRecord(params = {}, atFirstPosition = false) {
+        const newRecord = this.model.createDataPoint("record", {
+            resModel: this.resModel,
+            fields: this.fields,
+            activeFields: this.activeFields,
+            parentActiveFields: this.activeFields,
+            onRecordWillSwitchMode: this.onRecordWillSwitchMode,
+            defaultContext: this.defaultContext,
+            ...params,
+        });
+        if (this.model.useSampleModel) {
+            this.model.useSampleModel = false;
+            await this.load();
+        }
+        await this.model.keepLast.add(this.model.mutex.exec(() => newRecord.load()));
+        this.editedRecord = newRecord;
+        this.onCreateRecord(newRecord);
+        return this.addRecord(newRecord, atFirstPosition ? 0 : this.count);
+    }
+
+    /**
+     * @param {Record[]} [records=[]]
+     * @returns {Promise<number[]>}
+     */
+    async deleteRecords(records = []) {
+        let deleted = false;
+        let resIds;
+        if (records.length) {
+            resIds = records.map((r) => r.resId);
+        } else {
+            resIds = await this.getResIds(true);
+            records = this.records.filter((r) => resIds.includes(r.resId));
+            if (this.isDomainSelected) {
+                await this.model.orm.unlink(this.resModel, resIds, this.context);
+                deleted = true;
+            }
+        }
+        if (!deleted) {
+            await Promise.all(records.map((record) => record.delete()));
+        }
+        for (const record of records) {
+            this.removeRecord(record);
+        }
+        await this._adjustOffset();
+        return resIds;
+    }
+
+    empty() {
+        this.records = [];
+        this.count = 0;
+    }
+
+    async load(params = {}) {
+        this.limit = params.limit === undefined ? this.limit : params.limit;
+        this.offset = params.offset === undefined ? this.offset : params.offset;
+        this.records = await this._loadRecords();
+        await this._adjustOffset();
+    }
+
+    async loadMore() {
+        this.offset = this.records.length;
+        const nextRecords = await this._loadRecords();
+        for (const record of nextRecords) {
+            this.addRecord(record);
+        }
+    }
+
+    async quickCreate(activeFields, context) {
+        const record = this.quickCreateRecord;
+        if (record) {
+            this.removeRecord(record);
+        }
+        const rawContext = {
+            parent: this.rawContext,
+            make: () => makeContext([context, {}]),
+        };
+        return this.createRecord({ activeFields, rawContext, isInQuickCreation: true }, true);
+    }
+
+    /**
+     * @param {Record} record
+     * @returns {Record}
+     */
+    removeRecord(record) {
+        const index = this.records.findIndex((r) => r === record);
+        if (index < 0) {
+            return;
+        }
+        this.records.splice(index, 1);
+        this.count--;
+        if (this.editedRecord === record) {
+            this.editedRecord = null;
+        }
+        this.model.notify();
+        return record;
+    }
+
+    async resequence() {
+        this.records = await this._resequence(this.records, this.resModel, ...arguments);
+    }
+
+    // -------------------------------------------------------------------------
+    // Protected
+    // -------------------------------------------------------------------------
+
+    /**
+     * Reload the model if more records should appear on the current page.
+     *
+     * @returns {Promise<void>}
+     */
+    async _adjustOffset() {
+        if (this.offset && !this.records.length) {
+            this.offset = Math.max(this.offset - this.limit, 0);
+            await this.load();
+        }
+    }
+
+    /**
+     * @returns {Promise<Record[]>}
+     */
+    async _loadRecords() {
+        const options = {
+            limit: this.limit,
+            offset: this.offset,
+            order: orderByToString(this.orderBy),
+        };
+        if (this.loadedCount > this.limit) {
+            // This condition means that we are reloading a list of records
+            // that has been manually extended: we need to load exactly the
+            // same amount of records.
+            options.limit = this.loadedCount;
+            options.offset = 0;
+        }
+        const { records: rawRecords, length } =
+            this.data ||
+            (await this.model.orm.webSearchRead(
+                this.resModel,
+                this.domain,
+                this.fieldNames,
+                options,
+                { bin_size: true, ...this.context }
+            ));
+
+        const records = await Promise.all(
+            rawRecords.map(async (data) => {
+                data = this._parseServerValues(data);
+                const record = this.model.createDataPoint("record", {
+                    resModel: this.resModel,
+                    resId: data.id,
+                    fields: this.fields,
+                    activeFields: this.activeFields,
+                    rawContext: this.rawContext,
+                    onRecordWillSwitchMode: this.onRecordWillSwitchMode,
+                });
+                await record.load({ values: data });
+                return record;
+            })
+        );
+
+        delete this.data;
+        this.count = length;
+
+        return records;
+    }
+}
+
+export class DynamicGroupList extends DynamicList {
+    setup(params, state) {
+        super.setup(...arguments);
+
+        this.groupByInfo = params.groupByInfo || {}; // FIXME: is this something specific to the list view?
+        this.openGroupsByDefault = params.openGroupsByDefault || false;
+        /** @type {Group[]} */
+        this.groups = state.groups || [];
+        this.activeFields = params.activeFields;
+        this.isGrouped = true;
+        this.quickCreateInfo = null; // Lazy loaded;
+        this.expand = params.expand;
+        this.limitByGroup = this.limit;
+        this.limit =
+            params.groupsLimit ||
+            (this.expand ? this.constructor.DEFAULT_LOAD_LIMIT : this.constructor.DEFAULT_LIMIT);
+        this.onCreateRecord =
+            params.onCreateRecord ||
+            (async (record) => {
+                const editedRecord = this.editedRecord;
+                if (editedRecord && !record.isInQuickCreation) {
+                    if (editedRecord.canBeAbandoned) {
+                        this.abandonRecord(editedRecord.id);
+                    } else {
+                        await editedRecord.save();
+                    }
+                }
+                this.editedRecord = record;
+            });
+    }
+
+    // -------------------------------------------------------------------------
+    // Getters
+    // -------------------------------------------------------------------------
+
+    get commonGroupParams() {
+        return {
+            fields: this.fields,
+            activeFields: this.activeFields,
+            resModel: this.resModel,
+            domain: this.domain,
+            groupBy: this.groupBy.slice(1),
+            orderBy: this.orderBy,
+            limit: this.limitByGroup,
+            groupByInfo: this.groupByInfo,
+            rawContext: this.rawContext,
+            onCreateRecord: this.onCreateRecord,
+            onRecordWillSwitchMode: this.onRecordWillSwitchMode,
+        };
+    }
+
+    /**
+     * List of loaded records inside groups.
+     */
+    get records() {
+        return this.groups
+            .filter((group) => !group.isFolded)
+            .map((group) => group.list.records)
+            .flat();
+    }
+
+    // -------------------------------------------------------------------------
+    // Public
+    // -------------------------------------------------------------------------
+
+    /**
+     * @param {Group} group
+     * @param {number} [index]
+     * @returns {Group}
+     */
+    addGroup(group, index) {
+        this.groups.splice(Number.isInteger(index) ? index : this.count, 0, group);
+        this.count++;
+        this.model.notify();
+        return group;
+    }
+
+    canQuickCreate() {
+        return super.canQuickCreate() && this.groups.length;
+    }
+
+    /**
+     * @param {any} value
+     * @returns {Promise<Group>}
+     */
+    async createGroup(value) {
+        const [id, displayName] = await this.model.mutex.exec(() =>
+            this.model.orm.call(this.groupByField.relation, "name_create", [value], {
+                context: this.context,
+            })
+        );
+        const group = this.model.createDataPoint("group", {
+            ...this.commonGroupParams,
+            count: 0,
+            value: id,
+            displayName,
+            aggregates: {},
+            groupByField: this.groupByField,
+            rawContext: this.rawContext,
+            // FIXME
+            // groupDomain: this.groupDomain,
+        });
+        group.isFolded = false;
+        return this.addGroup(group);
+    }
+
+    /**
+     * @param {Group[]} groups
+     * @returns {Promise<void>}
+     */
+    async deleteGroups(groups) {
+        let shouldReload = false;
+        await Promise.all(
+            groups.map(async (group) => {
+                await group.delete();
+                if (!this.model.useSampleModel && group.list.records.length) {
+                    shouldReload = true;
+                }
+            })
+        );
+        if (shouldReload) {
+            await this.model.load();
+        } else {
+            for (const group of groups) {
+                this.removeGroup(group);
+            }
+        }
+    }
+
+    async deleteRecords() {
+        for (const group of this.groups) {
+            group.list.deleteRecords();
+        }
+    }
+
+    exportState() {
+        return {
+            ...super.exportState(),
+            groups: this.groups,
+        };
+    }
+
+    /**
+     * @param {string} shortType
+     * @returns {boolean}
+     */
+    groupedBy(shortType) {
+        const { type } = this.groupByField;
+        switch (shortType) {
+            case "m2o":
+            case "many2one": {
+                return type === "many2one";
+            }
+            case "o2m":
+            case "one2many": {
+                return type === "one2many";
+            }
+            case "m2m":
+            case "many2many": {
+                return type === "many2many";
+            }
+            case "m2x":
+            case "many2x": {
+                return ["many2one", "many2many"].includes(type);
+            }
+            case "x2m":
+            case "x2many": {
+                return ["one2many", "many2many"].includes(type);
+            }
+        }
+        return false;
+    }
+
+    async load(params = {}) {
+        this.limit = params.limit || this.limit;
+        this.offset = params.offset || this.offset;
+        /** @type {[Group, number][]} */
+        const previousGroups = this.groups.map((g, i) => [g, i]);
+        this.groups = await this._loadGroups();
+        await Promise.all(this.groups.map((group) => group.load()));
+        if (this.previousParams === this.currentParams) {
+            for (const [group, index] of previousGroups) {
+                const newGroup = this.groups.find((g) => group.valueEquals(g.value));
+                if (!group.deleted && !newGroup) {
+                    group.empty();
+                    this.groups.splice(index, 0, group);
+                }
+            }
+        }
+    }
+
+    get nbTotalRecords() {
+        return this.groups.reduce((acc, group) => acc + group.count, 0);
+    }
+
+    async quickCreate(group) {
+        if (this.model.useSampleModel) {
+            // Empty the groups because they contain sample data
+            this.groups.map((group) => group.empty());
+        }
+        this.model.useSampleModel = false;
+        if (!this.quickCreateInfo) {
+            this.quickCreateInfo = await this._loadQuickCreateView();
+        }
+        group = group || this.groups[0];
+        if (group.isFolded) {
+            await group.toggle();
+        }
+        await group.quickCreate(this.quickCreateInfo.activeFields, this.context);
+    }
+
+    /**
+     * @param {Group} group
+     * @returns {Group}
+     */
+    removeGroup(group) {
+        const index = this.groups.findIndex((g) => g === group);
+        this.groups.splice(index, 1);
+        this.count--;
+        this.model.notify();
+        return group;
+    }
+
+    removeRecord(record) {
+        for (const group of this.groups) {
+            const removedRecord = group.list.removeRecord(record);
+            if (removedRecord) {
+                group.count--;
+                if (removedRecord === this.editedRecord) {
+                    this.editedRecord = null;
+                }
+                return removedRecord;
+            }
+        }
+    }
+
+    async resequence() {
+        const resModel = isRelational(this.groupByField)
+            ? this.groupByField.relation
+            : this.resModel;
+        this.groups = await this._resequence(this.groups, resModel, ...arguments);
+    }
+
+    // ------------------------------------------------------------------------
+    // Protected
+    // ------------------------------------------------------------------------
+
+    async _loadGroups() {
+        const orderby = orderByToString(this.orderBy);
+        const { groups, length } = await this.model.orm.webReadGroup(
+            this.resModel,
+            this.domain,
+            unique([...this.fieldNames, this.groupBy[0]]),
+            this.groupBy,
+            {
+                orderby,
+                lazy: true,
+                expand: this.expand,
+                offset: this.offset,
+                limit: this.limit,
+            },
+            this.context
+        );
+        this.count = length;
+
+        const groupByField = this.groupByField;
+        let openGroups = 0;
+
+        const groupsParams = groups.map((data) => {
+            const groupParams = {
+                ...this.commonGroupParams,
+                aggregates: {},
+                groupByField,
+            };
+            for (const key in data) {
+                const value = data[key];
+                switch (key) {
+                    case this.firstGroupBy: {
+                        if (value && ["date", "datetime"].includes(groupByField.type)) {
+                            const dateString = data.__range[groupByField.name].to;
+                            const dateValue = this._parseServerValue(groupByField, dateString);
+                            const granularity = groupByField.type === "date" ? "day" : "second";
+                            groupParams.value = dateValue.minus({ [granularity]: 1 });
+                        } else {
+                            groupParams.value = Array.isArray(value) ? value[0] : value;
+                        }
+                        if (groupByField.type === "selection") {
+                            groupParams.displayName = Object.fromEntries(groupByField.selection)[
+                                groupParams.value
+                            ];
+                        } else {
+                            groupParams.displayName = Array.isArray(value) ? value[1] : value;
+                        }
+                        if (this.groupedBy("m2x")) {
+                            groupParams.recordParams = this.groupByInfo[this.firstGroupBy];
+                        }
+                        break;
+                    }
+                    case `${groupByField.name}_count`: {
+                        groupParams.count = value;
+                        break;
+                    }
+                    case "__domain": {
+                        groupParams.groupDomain = value;
+                        break;
+                    }
+                    case "__fold": {
+                        // optional
+                        groupParams.isFolded = value;
+                        if (!value) {
+                            openGroups++;
+                        }
+                        break;
+                    }
+                    case "__range": {
+                        groupParams.range = value;
+                        break;
+                    }
+                    case "__data": {
+                        groupParams.data = value;
+                        break;
+                    }
+                    default: {
+                        // other optional aggregated fields
+                        if (key in this.fields) {
+                            groupParams.aggregates[key] = value;
+                        }
+                    }
+                }
+            }
+            const previousGroup = this.groups.find(
+                (g) => !g.deleted && g.value === groupParams.value
+            );
+            const state = previousGroup ? previousGroup.exportState() : {};
+            return [groupParams, state];
+        });
+
+        // Unfold groups that can still be unfolded by default
+        if (this.openGroupsByDefault || this.expand) {
+            for (const [params, state] of groupsParams) {
+                if (openGroups >= this.constructor.DEFAULT_LOAD_LIMIT) {
+                    break;
+                }
+                const finalState = { ...params, ...state };
+                const hasValue = isRelational(this.groupByField) ? finalState.value : true;
+                if (hasValue && !("isFolded" in finalState)) {
+                    params.isFolded = false;
+                    openGroups++;
+                }
+            }
+        }
+
+        return groupsParams.map(([params, state]) =>
+            this.model.createDataPoint("group", params, state)
+        );
+    }
+
+    async _loadQuickCreateView() {
+        if (this.isLoadingQuickCreate) {
+            return;
+        }
+        this.isLoadingQuickCreate = true;
+        const { quickCreateView: viewRef } = this.model;
+        let quickCreateFields = DEFAULT_QUICK_CREATE_FIELDS;
+        let quickCreateForm = DEFAULT_QUICK_CREATE_VIEW;
+        let quickCreateRelatedModels = {};
+        if (viewRef) {
+            const { fields, relatedModels, views } = await this.model.keepLast.add(
+                this.model.viewService.loadViews({
+                    context: { ...this.context, form_view_ref: viewRef },
+                    resModel: this.resModel,
+                    views: [[false, "form"]],
+                })
+            );
+            quickCreateFields = fields;
+            quickCreateForm = views.form;
+            quickCreateRelatedModels = relatedModels;
+        }
+        this.isLoadingQuickCreate = false;
+        const models = {
+            ...quickCreateRelatedModels,
+            [this.modelName]: quickCreateFields,
+        };
+        return new FormArchParser().parse(quickCreateForm.arch, models, this.modelName);
+    }
+}
+
+DynamicGroupList.DEFAULT_LOAD_LIMIT = 10;
+
+export class Group extends DataPoint {
+    setup(params, state) {
+        this.value = params.value;
+        this.displayName = params.displayName;
+        this.aggregates = params.aggregates;
+        this.groupDomain = params.groupDomain;
+        this.range = params.range;
+        this.count = params.count;
+        this.groupByField = params.groupByField;
+        this.groupByInfo = params.groupByInfo;
+        this.recordParams = params.recordParams;
+        if ("isFolded" in state) {
+            this.isFolded = state.isFolded;
+        } else if ("isFolded" in params) {
+            this.isFolded = params.isFolded;
+        } else {
+            this.isFolded = true;
+        }
+        if (isRelational(this.groupByField)) {
+            // If the groupBy field is a relational field, the group model must
+            // then be the relation of that field.
+            this.resModel = this.groupByField.relation;
+            this.resId = params.value || false;
+            this.data = {};
+        } else {
+            this.data = null;
+        }
+        const listParams = {
+            data: params.data,
+            domain: this.groupDomain,
+            groupBy: params.groupBy,
+            rawContext: params.rawContext,
+            orderBy: params.orderBy,
+            resModel: params.resModel,
+            activeFields: params.activeFields,
+            fields: params.fields,
+            limit: params.limit,
+            groupByInfo: params.groupByInfo,
+            onCreateRecord: params.onCreateRecord,
+            onRecordWillSwitchMode: params.onRecordWillSwitchMode,
+            defaultContext: {
+                ...params.defaultContext,
+                [`default_${this.groupByField.name}`]: this.getServerValue(),
+            },
+        };
+        this.list = this.model.createDataPoint("list", listParams, state.listState);
+    }
+
+    // ------------------------------------------------------------------------
+    // Public
+    // ------------------------------------------------------------------------
+
+    /**
+     * @see DynamicRecordList.addRecord
+     */
+    addRecord(record, index) {
+        this.count++;
+        this.isFolded = false;
+        return this.list.addRecord(record, index);
+    }
+
+    createRecord(params = {}, atFirstPosition = false) {
+        this.count++;
+        this.list.createRecord(params, atFirstPosition);
+    }
+
+    async delete() {
+        this.deleted = true;
+        if (this.record) {
+            return this.record.delete();
+        } else {
+            return this.model.orm.unlink(this.resModel, [this.value], this.context);
+        }
+    }
+
+    /**
+     * @see DynamicRecordList.deleteRecords
+     */
+    async deleteRecords() {
+        return this.list.deleteRecords(...arguments);
+    }
+
+    empty() {
+        this.count = 0;
+        this.aggregates = {};
+        this.list.empty();
+    }
+
+    exportState() {
+        return {
+            isFolded: this.isFolded,
+            listState: this.list.exportState(),
+        };
+    }
+
+    getAggregableRecords() {
+        return this.list.records.filter((r) => !r.isInQuickCreation);
+    }
+
+    getAggregates(fieldName) {
+        return fieldName ? this.aggregates[fieldName] || 0 : this.count;
+    }
+
+    getServerValue() {
+        const { name, selection, type } = this.groupByField;
+        switch (type) {
+            case "many2one":
+            case "char":
+            case "boolean": {
+                return this.value || false;
+            }
+            case "selection": {
+                const descriptor = selection.find((opt) => opt[0] === this.value);
+                return descriptor && descriptor[0];
+            }
+            // for a date/datetime field, we take the last moment of the group as the group value
+            case "date":
+            case "datetime": {
+                const range = this.range[name];
+                if (!range) {
+                    return false;
+                }
+                if (type === "date") {
+                    return serializeDate(
+                        DateTime.fromFormat(range.to, "yyyy-MM-dd", { zone: "utc" }).minus({
+                            day: 1,
+                        })
+                    );
+                } else {
+                    return serializeDateTime(
+                        DateTime.fromFormat(range.to, "yyyy-MM-dd HH:mm:ss").minus({ second: 1 })
+                    );
+                }
+            }
+            default: {
+                return false; // other field types are not handled
+            }
+        }
+    }
+
+    async load() {
+        if (!this.record && this.recordParams) {
+            this.record = this.makeRecord(this.recordParams);
+            await this.record.load();
+        }
+        if (!this.isFolded && this.count) {
+            await this.list.load();
+        }
+    }
+
+    makeRecord(params) {
+        return this.model.createDataPoint("record", {
+            resModel: this.resModel,
+            resId: this.value,
+            rawContext: this.rawContext,
+            ...params,
+        });
+    }
+
+    quickCreate(activeFields, context) {
+        const ctx = {
+            ...context,
+            [`default_${this.groupByField.name}`]: this.getServerValue(),
+        };
+        return this.list.quickCreate(activeFields, ctx);
+    }
+
+    /**
+     * @see DynamicRecordList.removeRecord
+     */
+    removeRecord(record) {
+        this.count--;
+        return this.list.removeRecord(record);
+    }
+
+    async toggle() {
+        this.isFolded = !this.isFolded;
+        await this.model.keepLast.add(this.load());
+        this.model.notify();
+    }
+
+    async validateQuickCreate() {
+        const record = this.list.quickCreateRecord;
+        if (!record) {
+            return false;
+        }
+        const saved = await record.save();
+        if (saved) {
+            this.addRecord(this.removeRecord(record));
+            this.count++;
+            this.list.count++;
+            return record;
+        } else {
+            this.removeRecord(record);
+        }
+    }
+
+    valueEquals(value) {
+        return this.value instanceof DateTime ? this.value.equals(value) : this.value === value;
+    }
+}
+
+function add(arr, el) {
+    const index = arr.indexOf(el);
+    if (index === -1) {
+        arr.push(el);
+    }
+}
+
+function remove(arr, el) {
+    const index = arr.indexOf(el);
+    if (index > -1) {
+        arr.splice(index, 1);
+    }
+}
+
+const symbolValues = Symbol("values");
+
+export class StaticList extends DataPoint {
+    setup(params, state) {
+        this.offset = params.offset || 0;
+        this.limit = params.limit || state.limit || this.constructor.DEFAULT_LIMIT;
+        this.initialLimit = this.limit;
+        this.editable = params.editable || false; // ("bottom" or "top")
+        this.field = params.field;
+        this.relationField = params.relationField;
+        this.parentRecord = params.parentRecord;
+
+        this.orderBy = params.orderBy || [];
+        this.isOrder = true;
+
+        // async computation that depends on previous params
+        // to be initialized
+        this.records = [];
+
+        this._cache = {};
+        this._mapping = {}; // maps record.resId || record.virtualId to record.id
+
+        this.views = params.views || {};
+        this.viewMode = params.viewMode;
+
+        this.onChanges = params.onChanges || (() => {});
+
+        this.getParentRecordContext = params.getParentRecordContext;
+
+        this.editedRecord = null;
+        this.onRecordWillSwitchMode = async (record, mode) => {
+            const editedRecord = this.editedRecord;
+            if (editedRecord && editedRecord.id === record.id && mode === "readonly") {
+                const valid = record.checkValidity();
+                if (valid) {
+                    this.editedRecord = null;
+                }
+                return valid;
+            }
+            if (editedRecord) {
+                await editedRecord.switchMode("readonly");
+            }
+            if (mode === "edit") {
+                this.editedRecord = record;
+            }
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Getters
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {number}
+     */
+    get count() {
+        if (!this.currentIds) {
+            throw new Error("you rascal");
+        }
+        return this.currentIds.length;
+    }
+
+    get evalContext() {
+        return {
+            // ...
+            parent: this.getParentRecordContext(),
+        };
+    }
+
+    // ------------------------------------------------------------------------
+    // Public
+    // ------------------------------------------------------------------------
+
+    /**
+     * Add a true record in relation
+     * see final API of StaticList in basic_relational_model.js
+     */
+    async add(params) {
+        //
+        // if (!params.resId) {
+        //     throw new Error("you rascal");
+        // }
+        // const { resId } = params;
+        // this.limit++;
+        // this.applyCommand(x2ManyCommands.linkTo(resId));
+        // if (!this._mapping[resId]) {
+        //     const record = this._createRecord(params);
+        //     await record.load();
+        // }
+        // this.isOrder = false;
+        // this.records = this._getRecords();
+        // this.onChanges();
+        // this.model.notify(); // should be in onChanges?
+    }
+
+    /**
+     * Add a new record in relation
+     * @param {Object} params
+     */
+    async addNew(params) {
+        if (params.resId) {
+            throw new Error("you rascal");
+        }
+
+        const record = this._createRecord(params);
+        await record.load();
+
+        record._onWillSwitchMode(record, "edit"); // bof
+
+        this.limit++;
+        this.applyCommand(x2ManyCommands.create(record.virtualId, symbolValues));
+
+        this.isOrder = false;
+        this.records = this._getRecords();
+        this.onChanges();
+        this.model.notify();
+
+        return record;
+    }
+
+    applyCommand(command) {
+        this.applyCommands([command]);
+    }
+
+    /**
+     * @param {Array[]} commands  array of commands
+     */
+    applyCommands(commands) {
+        this._commands = this._getNormalizedCommands(this._commands, commands);
+        this.currentIds = this._getCurrentIds(this.currentIds, commands);
+        this._mapping = this._getNextMapping(this._mapping, commands);
+    }
+
+    /**
+     * @param {RecordId} recordId
+     */
+    async delete(recordId) {
+        const record = this._cache[recordId];
+        if (record.isVirtual) {
+            delete this._cache[recordId];
+        }
+        const id = record.resId || record.virtualId;
+        this.applyCommand(x2ManyCommands.delete(id));
+        await this._loadRecords();
+        this.records = this._getRecords();
+        this.onChanges();
+        this.model.notify();
+    }
+
+    discard() {
+        for (const record of Object.values(this._cache)) {
+            if (record.isVirtual) {
+                delete this._cache[record.id];
+            } else {
+                record.discard();
+            }
+        }
+        this.limit = this.initialLimit;
+        this._commands = [];
+        this._commandsById = {};
+        this.currentIds = [...this._serverIds];
+        this.records = this._getRecords();
+    }
+
+    exportState() {
+        return {
+            limit: this.limit,
+        };
+    }
+
+    async load() {
+        if (!this.count) {
+            this.records = [];
+            return;
+        }
+
+        const orderFieldNames = this.orderBy.map((o) => o.name);
+        const isAscByFieldName = {};
+        for (const o of this.orderBy) {
+            isAscByFieldName[o.name] = o.asc;
+        }
+        const compareRecords = (d1, d2) => {
+            for (const fieldName of orderFieldNames) {
+                let v1 = d1[fieldName];
+                let v2 = d2[fieldName];
+                if (this.fields[fieldName].type === "many2one") {
+                    v1 = v1[1];
+                    v2 = v2[1];
+                }
+                if (v1 !== v2) {
+                    if (v1 < v2) {
+                        return isAscByFieldName[fieldName] ? -1 : 1;
+                    } else {
+                        return isAscByFieldName[fieldName] ? 1 : -1;
+                    }
+                }
+            }
+            return 0;
+        };
+
+        const hasSeveralPages = this.limit < this.count;
+        if (hasSeveralPages && orderFieldNames.length) {
+            // there several pages in the x2many and it is ordered, so we must know the value
+            // for the sorted field for all records and sort the resIds w.r.t. to those values
+            // before fetching the activeFields for the resIds of the current page.
+            // 1) populate values for already fetched records
+            const recordValues = {};
+            const resIds = [];
+            for (const id of this.currentIds) {
+                const recordId = this._mapping[id];
+                if (recordId) {
+                    const record = this._cache[recordId];
+                    recordValues[id] = {};
+                    for (const fieldName of orderFieldNames) {
+                        recordValues[id][fieldName] = record.data[fieldName];
+                    }
+                } else {
+                    resIds.push(id); // id is a resId
+                }
+            }
+            // 2) fetch values for non loaded records
+            if (resIds.length) {
+                const result = await this.model.orm.read(
+                    this.resModel,
+                    resIds,
+                    orderFieldNames,
+                    this.context
+                );
+                for (const values of result) {
+                    const resId = values.id;
+                    recordValues[resId] = {};
+                    for (const fieldName of orderFieldNames) {
+                        recordValues[resId][fieldName] = values[fieldName];
+                    }
+                }
+            }
+            // 3) sort this.currentIds
+            this.currentIds.sort((id1, id2) => {
+                return compareRecords(recordValues[id1], recordValues[id2]);
+            });
+        }
+
+        await this._loadRecords();
+
+        if (!hasSeveralPages && orderFieldNames.length) {
+            this.currentIds.sort((id1, id2) => {
+                const recId1 = this._mapping[id1];
+                const recId2 = this._mapping[id2];
+                return compareRecords(this._cache[recId1].data, this._cache[recId2].data);
+            });
+        }
+
+        this.records = this._getRecords();
+    }
+
+    moveRecord() {
+        // used only in the context of a basic_relational_model
+    }
+
+    /**
+     * @returns {Array[] | null}
+     */
+    getCommands(allFields = false) {
+        if (this._commands.length) {
+            const commands = [];
+
+            const getRecordValues = (id) => {
+                const recordId = this._mapping[id];
+                if (recordId) {
+                    const record = this._cache[recordId];
+                    return record.getChanges(allFields);
+                } else {
+                    const values = {};
+                    for (const fieldName in this._initialValues[id]) {
+                        const field = this.fields[fieldName];
+                        let fieldValue = this._initialValues[id][fieldName];
+                        if (isX2Many(field)) {
+                            if (fieldValue[0][0] === DELETE_ALL) {
+                                fieldValue = fieldValue.slice(1);
+                            }
+                        }
+                        values[fieldName] = fieldValue;
+                    }
+                    return values;
+                }
+            };
+
+            const hasReplaceWithCommand = this._commands && REPLACE_WITH === this._commands[0][0];
+            if (hasReplaceWithCommand) {
+                commands.push(this._commands[0]);
+            }
+
+            for (const resId of this.currentIds) {
+                const dictCommand = this._commandsById[resId];
+                if (dictCommand) {
+                    if (dictCommand[CREATE]) {
+                        const id = (dictCommand[CREATE] || dictCommand[UPDATE])[1];
+                        commands.push(x2ManyCommands.create(id, getRecordValues(id)));
+                    } else if (dictCommand[UPDATE]) {
+                        const id = dictCommand[UPDATE][1];
+                        commands.push(x2ManyCommands.update(id, getRecordValues(id)));
+                    } else if (dictCommand[LINK_TO]) {
+                        commands.push(x2ManyCommands.linkTo(resId));
+                    }
+                } else if (!hasReplaceWithCommand) {
+                    commands.push(x2ManyCommands.linkTo(resId));
+                }
+            }
+
+            for (const command of this._commands) {
+                const code = command[0];
+                if ([DELETE].includes(code)) {
+                    commands.push(command);
+                }
+            }
+
+            if (DELETE_ALL === this._commands[0][0] && !allFields) {
+                for (const resId of this._serverIds) {
+                    if (!this.currentIds.includes(resId)) {
+                        commands.push(x2ManyCommands.delete(resId));
+                    }
+                }
+            }
+            return commands;
+        }
+        return null;
+    }
+
+    getContext() {
+        const commands = [];
+        if (this.field.type === "one2many") {
+            if (this.currentIds) {
+                for (const resId of this.currentIds) {
+                    const record = this._cache[this._mapping[resId]];
+                    if (record && record.isVirtual) {
+                        commands.push(x2ManyCommands.create(resId, record.data));
+                    } else {
+                        commands.push(x2ManyCommands.linkTo(resId));
+                    }
+                }
+            }
+        } else {
+            if (this.currentIds && this.currentIds.length) {
+                commands.push(x2ManyCommands.replaceWith(this.currentIds));
+            }
+        }
+        return commands;
+    }
+
+    async replaceWith(resIds) {
+        this.applyCommand(x2ManyCommands.replaceWith(resIds));
+        await this.load();
+        this.onChanges();
+        this.model.notify();
+    }
+
+    setCurrentIds(resIds = [], commands = []) {
+        this._serverIds = resIds;
+        this._commandsById = {}; // to remove?
+        this._commands = this._getNormalizedCommands([], commands); // modifies commands and this._commandsById in places
+        this.currentIds = this._getCurrentIds(this._serverIds, this._commands, true);
+    }
+
+    async sortBy(fieldName) {
+        if (this.orderBy.length && this.orderBy[0].name === fieldName) {
+            if (this.isOrder) {
+                this.orderBy[0].asc = !this.orderBy[0].asc;
+            }
+        } else {
+            this.orderBy = this.orderBy.filter((o) => o.name !== fieldName);
+            this.orderBy.unshift({
+                name: fieldName,
+                asc: true,
+            });
+        }
+
+        this.isOrder = true;
+        await this.load();
+        this.model.notify();
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    // TO DISCUSS AND IMP
+    _getNextMapping(mapping, commands) {
+        let nextMapping = mapping;
+        for (const command of commands) {
+            const code = command[0];
+            const id = command[1];
+
+            switch (code) {
+                case UPDATE:
+                    nextMapping[id] = mapping[id];
+                    break;
+                case LINK_TO:
+                    nextMapping[id] = mapping[id];
+                    break;
+                case DELETE_ALL:
+                    nextMapping = {};
+                    break;
+                case REPLACE_WITH:
+                    break;
+            }
+        }
+        return nextMapping;
+    }
+
+    /**
+     * @param {Object} params
+     * @returns {Record}
+     */
+    _createRecord(params = {}) {
+        const record = this.model.createDataPoint("record", {
+            resModel: this.resModel,
+            fields: this.fields,
+            activeFields: this.activeFields,
+            viewMode: this.viewMode,
+            views: this.views,
+            onRecordWillSwitchMode: this.onRecordWillSwitchMode,
+            onChanges: async () => {
+                this.applyCommand(
+                    x2ManyCommands.update(record.resId || record.virtualId, symbolValues)
+                );
+                this.onChanges();
+            },
+            rawContext: {
+                parent: this.rawContext,
+                make: () => {
+                    return makeContext([params.context], this.evalContext);
+                },
+            },
+            ...params,
+
+            getParentRecordContext: this.getParentRecordContext,
+            parentRecord: this.parentRecord,
+            relationField: this.relationField,
+        });
+        const id = record.resId || record.virtualId; // is resId sometimes changed after record creation? (for a record in a staticList)
+
+        this._mapping[id] = record.id;
+        this._cache[record.id] = record;
+
+        return record;
+    }
+
+    _getCurrentIds(currentIds, commands, serverCommands = false) {
+        let nextIds = [...currentIds];
+        for (const command of commands) {
+            const code = command[0];
+            const id = command[1];
+            switch (code) {
+                case 0: // create
+                    if (nextIds.indexOf(id) === -1) {
+                        const index =
+                            this.editable === "top" && !serverCommands
+                                ? this.offset
+                                : this.offset + this.limit - 1;
+                        nextIds.splice(index, 0, id);
+                    } else {
+                        throw new Error("you rascal");
+                    }
+                    break;
+                case 1: // update
+                    add(nextIds, id);
+                    break;
+                case 2: // delete
+                case 3: // forget
+                    remove(nextIds, id);
+                    break;
+                case 4: // linkTo
+                    add(nextIds, id);
+                    break;
+                case 5: // deleteAll
+                case 6: // replaceWith
+                    nextIds = command[2] || [];
+                    break;
+            }
+        }
+        return nextIds;
+    }
+
+    /**
+     * Returns the array of visible ids (resId or virtualId)
+     * @returns {Record[]}
+     */
+    _getDisplayedIds() {
+        const hasSeveralPages = this.limit < this.count;
+        let displayedIds = this.currentIds.slice(0);
+        if (hasSeveralPages) {
+            displayedIds = this.currentIds.slice(this.offset, this.offset + this.limit);
+        }
+        return displayedIds;
+    }
+
+    /**
+     * Concat two arrays of commands and normalize the result
+     * The first array must be normalized.
+     * ! modifies in place the commands themselves ! TODO fix this
+     * @param {Array[]} normalizedCommands normalized array of commands
+     * @param {Array[]} commands  array of commands
+     * @returns {Array[]} a normalized array of commands
+     */
+    _getNormalizedCommands(normalizedCommands, commands) {
+        let nextCommands = [...normalizedCommands];
+        for (const command of commands) {
+            const code = command[0];
+
+            if (code === CREATE && !command[1]) {
+                // FIXME WOWL: works because we change command in place (also stored in parent _changes)
+                command[1] = this.model.nextVirtualId;
+            }
+
+            const id = command[1];
+
+            if ([CREATE, UPDATE].includes(code)) {
+                if (!this._commandsById[id]) {
+                    if (!this._initialValues) {
+                        this._initialValues = {};
+                    }
+                    this._initialValues[id] = this._parseServerValues(command[2]);
+                }
+                command[2] = symbolValues;
+            }
+
+            if ([DELETE_ALL, REPLACE_WITH].includes(code)) {
+                this._commandsById = {};
+                nextCommands = [command];
+                continue;
+            } else if (!this._commandsById[id]) {
+                // possible problem with same ids (0) returned by server in accounting
+                // -> add a test
+                this._commandsById[id] = { [code]: command };
+                nextCommands.push(command);
+                continue;
+            }
+
+            switch (code) {
+                case UPDATE:
+                    // we assume that delete/forget cannot be found in this._commandsById[id]
+                    // we can find create/linkTo/update
+                    // we merge create/update and update/update
+                    if (this._commandsById[id][LINK_TO]) {
+                        this._commandsById[id][UPDATE] = { [UPDATE]: command };
+                        remove(nextCommands, this._commandsById[id][LINK_TO]);
+                        nextCommands.push(command);
+                    }
+                    break;
+                case DELETE:
+                    // we assume that delete/forget cannot be found in this._commandsById[id]
+                    // we can find create/linkTo/update
+                    // if one finds create, we erase everything
+                    // else we add delete and remove linkTo/update
+                    if (this._commandsById[id][UPDATE]) {
+                        remove(nextCommands, this._commandsById[id][UPDATE]);
+                    }
+                    if (this._commandsById[id][CREATE]) {
+                        remove(nextCommands, this._commandsById[id][CREATE]);
+                        delete this._commandsById[id];
+                    } else {
+                        if (this._commandsById[id][LINK_TO]) {
+                            remove(nextCommands, this._commandsById[id][LINK_TO]);
+                        }
+                        this._commandsById[id] = { [DELETE]: command };
+                        nextCommands.push(command);
+                    }
+                    break;
+                case FORGET:
+                    // we assume that delete/forget cannot be found in this._commandsById[id]
+                    // we can find create/linkTo/update
+                    // if one finds linkTo, we erase linkTo and forget
+                    if (this._commandsById[id][LINK_TO]) {
+                        remove(nextCommands, this._commandsById[id][LINK_TO]);
+                        delete this._commandsById[id][LINK_TO];
+                        // do we need to remove update?
+                    } else {
+                        this._commandsById[id][FORGET] = command;
+                        nextCommands.push(command);
+                    }
+                    break;
+                case LINK_TO:
+                    // we assume that that create/delete cannot be found in this._commandsById[id]
+                    if (this._commandsById[id][FORGET]) {
+                        delete this._commandsById[id][FORGET];
+                        remove(nextCommands, this._commandsById[id][FORGET]);
+                    } else {
+                        this._commandsById[id][LINK_TO] = command;
+                        nextCommands.push(command);
+                    }
+                    break;
+            }
+        }
+        return nextCommands;
+    }
+
+    /**
+     * Returns visible records
+     * @returns {Record[]}
+     */
+    _getRecords() {
+        const displayedIds = this._getDisplayedIds();
+        return displayedIds.map((id) => this._cache[this._mapping[id]]);
+    }
+
+    /**
+     * Add missing records to display to cache and load them
+     */
+    async _loadRecords() {
+        const displayedIds = this._getDisplayedIds();
+        const proms = [];
+        for (const id of displayedIds) {
+            const recordId = this._mapping[id];
+            if (!recordId) {
+                const key = typeof id === "number" ? "resId" : "virtualId";
+                const record = this._createRecord({ [key]: id, mode: "readonly" });
+                let changes;
+                const createCommand = this._commandsById[id] && this._commandsById[id][CREATE];
+                if (createCommand) {
+                    changes = this._initialValues[id];
+                }
+                proms.push(record.load({ changes }));
+            }
+        }
+        await Promise.all(proms);
+    }
+
+    async unselectRecord() {
+        await unselectRecord(this.editedRecord);
+    }
+}
+
+StaticList.DEFAULT_LIMIT = 40;
+
+export class RelationalModel extends Model {
+    setup(params, { action, dialog, notification, rpc, user, view }) {
+        this.action = action;
+        this.dialogService = dialog;
+        this.notificationService = notification;
+        this.rpc = rpc;
+        this.user = user;
+        this.viewService = view;
+        this.orm = new RequestBatcherORM(rpc, user);
+        this.keepLast = new KeepLast();
+        this.mutex = new Mutex();
+
+        this.onCreate = params.onCreate;
+        this.multiEdit = params.multiEdit || false;
+        this.quickCreateView = params.quickCreateView;
+        this.defaultGroupBy = params.defaultGroupBy || false;
+        this.defaultOrderBy = params.defaultOrder;
+        this.handleField = params.handleField;
+        this.rootType = params.rootType || "list";
+        this.initialRootState = params.rootState;
+        this.rootParams = {
+            activeFields: params.activeFields || {},
+            fields: params.fields || {},
+            viewMode: params.viewMode || null,
+            resModel: params.resModel,
+            groupByInfo: params.groupByInfo,
+        };
+        this.fieldNodes = params.fieldNodes; // used by the ListConfirmationDialog
+        if (this.rootType === "record") {
+            this.rootParams.resId = params.resId;
+            this.rootParams.resIds = params.resIds;
+            if (params.mode) {
+                this.rootParams.mode = params.mode;
+            }
+        } else {
+            this.rootParams.openGroupsByDefault = params.openGroupsByDefault || false;
+            this.rootParams.limit = params.limit;
+            this.rootParams.expand = params.expand;
+            this.rootParams.groupsLimit = params.groupsLimit;
+        }
+        this.initialValues = params.initialValues;
+
+        // this.db = Object.create(null);
+        this.root = null;
+
+        this.nextId = 1;
+
+        // list of models for which the DataManager's cache should be cleared on create, update and delete operations
+        this.noCacheModels = ["ir.actions.act_window", "ir.filters", "ir.ui.view", "res.currency"];
+    }
+
+    /**
+     * @param {Object} [params={}]
+     * @param {Comparison | null} [params.comparison]
+     * @param {Context} [params.context]
+     * @param {DomainListRepr} [params.domain]
+     * @param {string[]} [params.groupBy]
+     * @param {Object[]} [params.orderBy]
+     * @param {number} [params.resId] should not be there
+     * @returns {Promise<void>}
+     */
+    async load(params = {}) {
+        const rootParams = { ...this.rootParams, ...params };
+        if (this.defaultOrderBy && !(params.orderBy && params.orderBy.length)) {
+            rootParams.orderBy = this.defaultOrderBy;
+        }
+        if (
+            this.defaultGroupBy &&
+            !this.env.inDialog &&
+            !(params.groupBy && params.groupBy.length)
+        ) {
+            rootParams.groupBy = [this.defaultGroupBy];
+        }
+        rootParams.rawContext = {
+            make: () => {
+                return makeContext([rootParams.context], {});
+            },
+        };
+        const state = this.root ? this.root.exportState() : this.initialRootState;
+        const newRoot = this.createDataPoint(this.rootType, rootParams, state);
+        await this.keepLast.add(newRoot.load({ values: this.initialValues }));
+        this.root = newRoot;
+        this.rootParams = rootParams;
+        this.notify();
+    }
+
+    /**
+     * @param {"group" | "list" | "record"} type
+     * @param {Record<any, any>} params
+     * @param {Record<any, any>} [state={}]
+     * @returns {DataPoint}
+     */
+    createDataPoint(type, params, state = {}) {
+        let DpClass;
+        switch (type) {
+            case "group": {
+                DpClass = this.constructor.Group;
+                break;
+            }
+            case "list": {
+                if ((params.groupBy || []).length) {
+                    DpClass = this.constructor.DynamicGroupList;
+                } else {
+                    DpClass = this.constructor.DynamicRecordList;
+                }
+                break;
+            }
+            case "record": {
+                DpClass = this.constructor.Record;
+                break;
+            }
+            case "static_list": {
+                DpClass = this.constructor.StaticList;
+                break;
+            }
+        }
+        return new DpClass(this, params, state);
+    }
+
+    hasData() {
+        return this.root.count > 0;
+    }
+
+    get nextVirtualId() {
+        return `virtual_${this.nextId++}`;
+    }
+
+    /**
+     * @override
+     */
+    getGroups() {
+        return this.root.groups && this.root.groups.length ? this.root.groups : null;
+    }
+
+    async reloadRecords(resId) {
+        if (this.rootType !== "form") {
+            const records = this.root.records.filter((r) => r.resId === resId);
+            if (records.length) {
+                await Promise.all(records.map((r) => r.load()));
+            }
+        }
+    }
+}
+
+RelationalModel.services = ["action", "dialog", "notification", "rpc", "user", "view"];
+RelationalModel.Record = Record;
+RelationalModel.Group = Group;
+RelationalModel.DynamicRecordList = DynamicRecordList;
+RelationalModel.DynamicGroupList = DynamicGroupList;
+RelationalModel.StaticList = StaticList;
diff --git a/addons/web/static/src/views/helpers/sample_server.js b/addons/web/static/src/views/sample_server.js
similarity index 94%
rename from addons/web/static/src/views/helpers/sample_server.js
rename to addons/web/static/src/views/sample_server.js
index ed0e82ad118..770a7fd7fe1 100644
--- a/addons/web/static/src/views/helpers/sample_server.js
+++ b/addons/web/static/src/views/sample_server.js
@@ -1,9 +1,9 @@
 /** @odoo-module **/
 
-import { groupBy as arrayGroupBy, sortBy as arraySortBy } from "@web/core/utils/arrays";
-import { registry } from "@web/core/registry";
-import { ORM } from "../../core/orm_service";
 import { parseDate, serializeDate, serializeDateTime } from "@web/core/l10n/dates";
+import { ORM } from "@web/core/orm_service";
+import { registry } from "@web/core/registry";
+import { groupBy as arrayGroupBy, sortBy as arraySortBy } from "@web/core/utils/arrays";
 
 class UnimplementedRouteError extends Error {}
 
@@ -107,6 +107,8 @@ export class SampleServer {
         switch (params.method || params.route) {
             case "/web/dataset/search_read":
                 return this._mockSearchReadController(params);
+            case "web_search_read":
+                return this._mockWebSearchRead(params);
             case "web_read_group":
                 return this._mockWebReadGroup(params);
             case "read_group":
@@ -236,9 +238,12 @@ export class SampleServer {
                 }
                 return false;
             case "date":
-            case "datetime":
+            case "datetime": {
                 const datetime = this._getRandomDate();
-                return field.type === "date" ? serializeDate(datetime): serializeDateTime(datetime);
+                return field.type === "date"
+                    ? serializeDate(datetime)
+                    : serializeDateTime(datetime);
+            }
             case "float":
                 return this._getRandomFloat(SampleServer.MAX_FLOAT);
             case "integer": {
@@ -468,12 +473,13 @@ export class SampleServer {
      * @private
      * @param {Object} params
      * @param {string} params.model
-     * @param {Object} params.kwargs
+     * @param {string} params.group_by
+     * @param {Object} params.progress_bar
      * @return {Object}
      */
     _mockReadProgressBar(params) {
-        const groupBy = params.kwargs.group_by;
-        const progress_bar = params.kwargs.progress_bar;
+        const groupBy = params.group_by;
+        const progress_bar = params.progress_bar;
         const groupByField = this.data[params.model].fields[groupBy];
         const data = {};
         for (const record of this.data[params.model].records) {
@@ -500,13 +506,25 @@ export class SampleServer {
     /**
      * Mocks calls to the /web/dataset/search_read route to return sample
      * records.
+     * @deprecated
+     * @see _mockWebSearchRead
+     */
+    _mockSearchReadController(params) {
+        console.warn(
+            "Using deprecated route /web/dataset/search_read (call method web_search read on the model instead)"
+        );
+        return this._mockWebSearchRead(params);
+    }
+
+    /**
+     * Mocks calls to the web_search_read method to return sample records.
      * @private
      * @param {Object} params
      * @param {string} params.model
      * @param {string[]} params.fields
      * @returns {{ records: Object[], length: number }}
      */
-    _mockSearchReadController(params) {
+    _mockWebSearchRead(params) {
         const model = this.data[params.model];
         const rawRecords = model.records.slice(0, SampleServer.SEARCH_READ_LIMIT);
         const records = this._mockRead({
@@ -554,20 +572,18 @@ export class SampleServer {
     _populateExistingGroups(params) {
         if (!this.existingGroupsPopulated) {
             const groups = this.existingGroups;
-            this.groupsInfo = groups;
             const groupBy = params.groupBy[0];
-            const values = groups.map((g) => g[groupBy]);
             const groupByField = this.data[params.model].fields[groupBy];
             const groupedByM2O = groupByField.type === "many2one";
             if (groupedByM2O) {
                 // re-populate co model with relevant records
-                this.data[groupByField.relation].records = values.map((v) => {
-                    return { id: v[0], display_name: v[1] };
+                this.data[groupByField.relation].records = groups.map((g) => {
+                    return { id: g.value, display_name: g.displayName };
                 });
             }
             for (const r of this.data[params.model].records) {
-                const value = getSampleFromId(r.id, values);
-                r[groupBy] = groupedByM2O ? value[0] : value;
+                const group = getSampleFromId(r.id, groups);
+                r[groupBy] = group.value;
             }
             this.existingGroupsPopulated = true;
         }
@@ -629,13 +645,11 @@ export class SampleServer {
 
         // update count and aggregates for each group
         const groupBy = params.groupBy[0].split(":")[0];
-        const groupByField = this.data[params.model].fields[groupBy];
-        const groupedByM2O = groupByField.type === "many2one";
         const records = this.data[params.model].records;
         for (const g of groups) {
-            const groupValue = groupedByM2O ? g[groupBy][0] : g[groupBy];
-            const recordsInGroup = records.filter((r) => r[groupBy] === groupValue);
+            const recordsInGroup = records.filter((r) => r[groupBy] === g.value);
             g[`${groupBy}_count`] = recordsInGroup.length;
+            g[groupBy] = [g.value, g.displayName];
             for (const field of params.fields) {
                 const fieldType = this.data[params.model].fields[field].type;
                 if (["integer, float", "monetary"].includes(fieldType)) {
@@ -701,9 +715,11 @@ SampleServer.UnimplementedRouteError = UnimplementedRouteError;
 export function buildSampleORM(resModel, fields, user) {
     const sampleServer = new SampleServer(resModel, fields);
     const fakeRPC = async (_, params) => {
-        const { kwargs, method, model } = params;
+        const { args, kwargs, method, model } = params;
         const { groupby: groupBy } = kwargs;
-        return sampleServer.mockRpc({ method, model, ...kwargs, groupBy });
+        return sampleServer.mockRpc({ method, model, args, ...kwargs, groupBy });
     };
-    return new ORM(fakeRPC, user);
+    const sampleORM = new ORM(fakeRPC, user);
+    sampleORM.setGroups = (groups) => sampleServer.setExistingGroups(groups);
+    return sampleORM;
 }
diff --git a/addons/web/static/src/views/standard_view_props.js b/addons/web/static/src/views/standard_view_props.js
new file mode 100644
index 00000000000..bd78b474c5c
--- /dev/null
+++ b/addons/web/static/src/views/standard_view_props.js
@@ -0,0 +1,42 @@
+/** @odoo-module **/
+
+// TODO: add this in info props description
+
+// breadcrumbs: { type: Array, optional: true },
+// __getLocalState__: { type: CallbackRecorder, optional: true },
+// __getContext__: { type: CallbackRecorder, optional: true },
+// display: { type: Object, optional: true },
+// displayName: { type: String, optional: true },
+// noContentHelp: { type: String, optional: true },
+// searchViewId: { type: [Number, false], optional: true },
+// viewId: { type: [Number, false], optional: true },
+// views: { type: Array, element: Array, optional: true },
+// viewSwitcherEntries: { type: Array, optional: true },
+
+export const standardViewProps = {
+    info: {
+        type: Object,
+    },
+    resModel: String,
+    arch: { type: String },
+    bannerRoute: { type: String, optional: true },
+    className: { type: String, optional: true },
+    comparison: { validate: () => true }, // fix problem with validation with type: [Object, null]
+    // Issue OWL: https://github.com/odoo/owl/issues/910
+    context: { type: Object },
+    createRecord: { type: Function, optional: true },
+    domain: { type: Array },
+    fields: { type: Object, elements: Object },
+    globalState: { type: Object, optional: true },
+    groupBy: { type: Array, elements: String },
+    limit: { type: Number, optional: true },
+    noBreadcrumbs: { type: Boolean, optional: true },
+    orderBy: { type: Array, elements: String },
+    relatedModels: { type: Object, elements: Object, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    resIds: { type: Array, optional: true },
+    searchMenuTypes: { type: Array, elements: String },
+    selectRecord: { type: Function, optional: true },
+    state: { type: Object, optional: true },
+    useSampleModel: { type: Boolean },
+};
diff --git a/addons/web/static/src/views/utils.js b/addons/web/static/src/views/utils.js
new file mode 100644
index 00000000000..74c0a7efb1a
--- /dev/null
+++ b/addons/web/static/src/views/utils.js
@@ -0,0 +1,238 @@
+/** @odoo-module */
+
+import { Domain } from "@web/core/domain";
+import { _t } from "@web/core/l10n/translation";
+
+export const X2M_TYPES = ["one2many", "many2many"];
+const RELATIONAL_TYPES = [...X2M_TYPES, "many2one"];
+const NUMERIC_TYPES = ["integer", "float", "monetary"];
+
+/**
+ * Parse the arch to check if is true or false
+ * If the string is empty, 0, False or false it's considered as false
+ * The rest is considered as true
+ *
+ * @param {string} str
+ * @param {boolean} [trueIfEmpty=false]
+ * @returns {boolean}
+ */
+export function archParseBoolean(str, trueIfEmpty = false) {
+    return str ? !/^false|0$/i.test(str) : trueIfEmpty;
+}
+
+/**
+ * TODO: doc
+ *
+ * @param {Object} fields
+ * @param {Object} fieldAttrs
+ * @param {string[]} activeMeasures
+ * @param {string[]} [additionalMeasures=[]]
+ * @returns {Object}
+ */
+export const computeReportMeasures = (
+    fields,
+    fieldAttrs,
+    activeMeasures,
+    additionalMeasures = []
+) => {
+    const measures = {
+        __count: { name: "__count", string: _t("Count"), type: "integer" },
+    };
+    for (const [fieldName, field] of Object.entries(fields)) {
+        if (fieldName === "id" || !field.store) {
+            continue;
+        }
+        const { isInvisible } = fieldAttrs[fieldName] || {};
+        if (isInvisible && !additionalMeasures.includes(fieldName)) {
+            continue;
+        }
+        if (
+            ["integer", "float", "monetary"].includes(field.type) ||
+            additionalMeasures.includes(fieldName)
+        ) {
+            measures[fieldName] = field;
+        }
+    }
+
+    // add active measures to the measure list.  This is very rarely
+    // necessary, but it can be useful if one is working with a
+    // functional field non stored, but in a model with an overridden
+    // read_group method.  In this case, the pivot view could work, and
+    // the measure should be allowed.  However, be careful if you define
+    // a measure in your pivot view: non stored functional fields will
+    // probably not work (their aggregate will always be 0).
+    for (const measure of activeMeasures) {
+        if (!measures[measure]) {
+            measures[measure] = fields[measure];
+        }
+    }
+
+    for (const fieldName in fieldAttrs) {
+        if (fieldAttrs[fieldName].string && fieldName in measures) {
+            measures[fieldName].string = fieldAttrs[fieldName].string;
+        }
+    }
+
+    const sortedMeasures = Object.entries(measures).sort(([m1, f1], [m2, f2]) => {
+        if (m1 === "__count" || m2 === "__count") {
+            return m1 === "__count" ? 1 : -1; // Count is always last
+        }
+        return f1.string.toLowerCase().localeCompare(f2.string.toLowerCase());
+    });
+
+    return Object.fromEntries(sortedMeasures);
+};
+
+/**
+ * @param {Array[] | boolean} modifier
+ * @param {Object} evalContext
+ * @returns {boolean}
+ */
+export function evalDomain(modifier, evalContext) {
+    if (Array.isArray(modifier)) {
+        modifier = new Domain(modifier).contains(evalContext);
+    }
+    return Boolean(modifier);
+}
+
+export function getActiveActions(rootNode) {
+    return {
+        edit: archParseBoolean(rootNode.getAttribute("edit"), true),
+        create: archParseBoolean(rootNode.getAttribute("create"), true),
+        delete: archParseBoolean(rootNode.getAttribute("delete"), true),
+        duplicate: archParseBoolean(rootNode.getAttribute("duplicate"), true),
+    };
+}
+
+export function getDecoration(rootNode) {
+    const decorations = [];
+    for (const name of rootNode.getAttributeNames()) {
+        if (name.startsWith("decoration-")) {
+            decorations.push({
+                class: name.replace("decoration", "text"),
+                condition: rootNode.getAttribute(name),
+            });
+        }
+    }
+    return decorations;
+}
+
+/**
+ * @param {number | number[]} idsList
+ * @returns {number[]}
+ */
+export function getIds(idsList) {
+    if (Array.isArray(idsList)) {
+        if (idsList.length === 2 && typeof idsList[1] === "string") {
+            return [idsList[0]];
+        } else {
+            return idsList;
+        }
+    } else if (idsList) {
+        return [idsList];
+    } else {
+        return [];
+    }
+}
+
+/**
+ * @param {any} field
+ * @returns {boolean}
+ */
+export function isRelational(field) {
+    return field && RELATIONAL_TYPES.includes(field.type);
+}
+
+/**
+ * @param {any} field
+ * @returns {boolean}
+ */
+export function isX2Many(field) {
+    return field && X2M_TYPES.includes(field.type);
+}
+
+/**
+ * @param {Object} field
+ * @returns {boolean} true iff the given field is a numeric field
+ */
+export function isNumeric(field) {
+    return NUMERIC_TYPES.includes(field.type);
+}
+
+export function processButton(node) {
+    return {
+        className: node.getAttribute("class") || "",
+        icon: node.getAttribute("icon") || false,
+        title: node.getAttribute("title") || undefined,
+        string: node.getAttribute("string") || undefined,
+        options: JSON.parse(node.getAttribute("options") || "{}"),
+        modifiers: JSON.parse(node.getAttribute("modifiers") || "{}"),
+        clickParams: {
+            context: node.getAttribute("context") || "{}",
+            name: node.getAttribute("name"),
+            type: node.getAttribute("type"),
+        },
+    };
+}
+
+/**
+ * In the preview implementation of reporting views, the virtual field used to
+ * display the number of records was named __count__, whereas __count is
+ * actually the one used in xml. So basically, activating a filter specifying
+ * __count as measures crashed. Unfortunately, as __count__ was used in the JS,
+ * all filters saved as favorite at that time were saved with __count__, and
+ * not __count. So in order the make them still work with the new
+ * implementation, we handle both __count__ and __count.
+ *
+ * This function replaces occurences of '__count__' by '__count' in the given
+ * element(s).
+ *
+ * @param {any | any[]} [measures]
+ * @returns {any}
+ */
+export function processMeasure(measure) {
+    if (Array.isArray(measure)) {
+        return measure.map(processMeasure);
+    }
+    return measure === "__count__" ? "__count" : measure;
+}
+
+/**
+ * @param {any} string
+ * @return {OrderTerm[]}
+ */
+export function stringToOrderBy(string) {
+    if (!string) {
+        return [];
+    }
+    return string.split(",").map((order) => {
+        const splitOrder = order.trim().split(" ");
+        if (splitOrder.length === 2) {
+            return {
+                name: splitOrder[0],
+                asc: splitOrder[1].toLowerCase() === "asc",
+            };
+        } else {
+            return {
+                name: splitOrder[0],
+                asc: true,
+            };
+        }
+    });
+}
+
+/**
+ * Transforms a string into a valid expression to be injected
+ * in a template as a props via setAttribute.
+ * Example: myString = `Some weird language quote (") `;
+ *     should become in the template:
+ *      <Component label="&quot;Some weird language quote (\\&quot;)&quot; " />
+ *     which should be interpreted by owl as a JS expression being a string:
+ *      `Some weird language quote (") `
+ *
+ * @param  {string} str The initial value: a pure string to be interpreted as such
+ * @return {string}     the valid string to be injected into a component's node props.
+ */
+export function toStringExpression(str) {
+    return `\`${str.replaceAll("`", "\\`")}\``;
+}
diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
index 67462af3ae9..d1251ac12af 100644
--- a/addons/web/static/src/views/view.js
+++ b/addons/web/static/src/views/view.js
@@ -4,12 +4,12 @@ import { evaluateExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
 import { KeepLast } from "@web/core/utils/concurrency";
 import { useService } from "@web/core/utils/hooks";
-import { deepCopy } from "@web/core/utils/objects";
+import { deepCopy, pluck } from "@web/core/utils/objects";
 import { extractLayoutComponents } from "@web/search/layout";
 import { WithSearch } from "@web/search/with_search/with_search";
-import { useActionLinks } from "@web/views/helpers/view_hook";
+import { useActionLinks } from "@web/views/view_hook";
 
-const { Component, onWillUpdateProps, onWillStart, toRaw, useSubEnv } = owl;
+const { Component, markRaw, onWillUpdateProps, onWillStart, toRaw, useSubEnv } = owl;
 const viewRegistry = registry.category("views");
 
 /** @typedef {Object} Config
@@ -89,6 +89,8 @@ export function getDefaultConfig() {
  *  @property {Object} [globalState]
  */
 
+export class ViewNotFoundError extends Error {}
+
 const STANDARD_PROPS = [
     "resModel",
     "type",
@@ -120,6 +122,8 @@ const STANDARD_PROPS = [
     "globalState",
 
     "activateFavorite",
+    "dynamicFilters",
+    "searchMenuTypes",
 
     // LEGACY: remove this later (clean when mappings old state <-> new state are established)
     "searchPanel",
@@ -129,7 +133,6 @@ const STANDARD_PROPS = [
 export class View extends Component {
     setup() {
         const { arch, fields, resModel, searchViewArch, searchViewFields, type } = this.props;
-
         if (!resModel) {
             throw Error(`View props should have a "resModel" key`);
         }
@@ -156,19 +159,19 @@ export class View extends Component {
 
         this.handleActionLinks = useActionLinks({ resModel });
 
-        onWillStart(this.onWillStart);
-        onWillUpdateProps(this.onWillUpdateProps);
+        onWillStart(() => this.loadView(this.props));
+        onWillUpdateProps((nextProps) => this.onWillUpdateProps(nextProps));
     }
 
-    async onWillStart() {
+    async loadView(props) {
         // determine view type
-        let descr = viewRegistry.get(this.props.type);
+        let descr = viewRegistry.get(props.type);
         const type = descr.type;
 
         // determine views for which descriptions should be obtained
-        let { viewId, searchViewId } = this.props;
+        let { viewId, searchViewId } = props;
 
-        const views = deepCopy(this.env.config.views);
+        const views = deepCopy(props.views || this.env.config.views);
         const view = views.find((v) => v[1] === type) || [];
         if (view.length) {
             view[0] = viewId !== undefined ? viewId : view[0];
@@ -188,7 +191,7 @@ export class View extends Component {
         // searchViewId will remains undefined if loadSearchView=false
 
         // prepare view description
-        const { context, resModel, loadActionMenus, loadIrFilters } = this.props;
+        const { context, resModel, loadActionMenus, loadIrFilters } = props;
         let {
             arch,
             fields,
@@ -197,7 +200,7 @@ export class View extends Component {
             searchViewFields,
             irFilters,
             actionMenus,
-        } = this.props;
+        } = props;
 
         let loadView = !arch || (!actionMenus && loadActionMenus);
         let loadSearchView =
@@ -212,7 +215,7 @@ export class View extends Component {
                 { context, resModel, views },
                 { actionId: this.env.config.actionId, loadActionMenus, loadIrFilters }
             );
-            // Note: if this.props.views is different from views, the cached descriptions
+            // Note: if props.views is different from views, the cached descriptions
             // will certainly not be reused! (but for the standard flow this will work as
             // before)
             viewDescription = result.views[type];
@@ -228,8 +231,8 @@ export class View extends Component {
                 }
             }
             this.env.config.views = views;
-            fields = fields || result.fields;
-            relatedModels = relatedModels || result.relatedModels;
+            fields = fields || markRaw(result.fields);
+            relatedModels = relatedModels || markRaw(result.relatedModels);
         }
 
         if (!arch) {
@@ -243,13 +246,17 @@ export class View extends Component {
         const xml = parser.parseFromString(arch, "text/xml");
         const rootNode = xml.documentElement;
 
-        const subType = rootNode.getAttribute("js_class");
+        let subType = rootNode.getAttribute("js_class");
         const bannerRoute = rootNode.getAttribute("banner_route");
         const sample = rootNode.getAttribute("sample");
 
         // determine ViewClass to instantiate (if not already done)
         if (subType) {
-            descr = viewRegistry.get(subType);
+            if (viewRegistry.contains(subType)) {
+                descr = viewRegistry.get(subType);
+            } else {
+                subType = null;
+            }
         }
 
         Object.assign(this.env.config, {
@@ -257,47 +264,65 @@ export class View extends Component {
             viewType: type,
             viewSubType: subType,
             bannerRoute,
+            noBreadcrumbs: props.noBreadcrumbs,
             ...extractLayoutComponents(descr),
         });
+        const info = {
+            actionMenus,
+            mode: props.display.mode,
+            irFilters,
+            searchViewArch,
+            searchViewFields,
+            searchViewId,
+        };
 
         // prepare the view props
         const viewProps = {
-            info: { actionMenus, mode: this.props.display.mode },
+            info,
             arch,
             fields,
             relatedModels,
             resModel,
             useSampleModel: false,
-            className: `${this.props.className} o_view_controller o_${this.env.config.viewType}_view`,
+            className: `${props.className} o_view_controller o_${this.env.config.viewType}_view`,
         };
-        if (this.props.globalState) {
-            viewProps.globalState = this.props.globalState;
+        if (viewDescription.custom_view_id) {
+            // for dashboard
+            viewProps.info.customViewId = viewDescription.custom_view_id;
+        }
+        if (props.globalState) {
+            viewProps.globalState = props.globalState;
         }
 
-        if ("useSampleModel" in this.props) {
-            viewProps.useSampleModel = this.props.useSampleModel;
+        if ("useSampleModel" in props) {
+            viewProps.useSampleModel = props.useSampleModel;
         } else if (sample) {
             viewProps.useSampleModel = Boolean(evaluateExpr(sample));
         }
 
-        for (const key in this.props) {
+        for (const key in props) {
             if (!STANDARD_PROPS.includes(key)) {
-                viewProps[key] = this.props[key];
+                viewProps[key] = props[key];
             }
         }
 
-        let { noContentHelp } = this.props;
+        let { noContentHelp } = props;
         if (noContentHelp) {
             viewProps.info.noContentHelp = noContentHelp;
         }
 
+        const searchMenuTypes =
+            props.searchMenuTypes || descr.searchMenuTypes || this.constructor.searchMenuTypes;
+        viewProps.searchMenuTypes = searchMenuTypes;
+
         const finalProps = descr.props ? descr.props(viewProps, descr, this.env.config) : viewProps;
         // prepare the WithSearch component props
+        this.Controller = descr.Controller;
+        this.componentProps = finalProps;
         this.withSearchProps = {
-            ...toRaw(this.props),
-            Component: descr.Controller,
+            ...toRaw(props),
+            searchMenuTypes,
             SearchModel: descr.SearchModel,
-            componentProps: finalProps,
         };
 
         if (searchViewId !== undefined) {
@@ -311,11 +336,20 @@ export class View extends Component {
             this.withSearchProps.irFilters = irFilters;
         }
 
-        if (!this.withSearchProps.searchMenuTypes) {
-            this.withSearchProps.searchMenuTypes =
-                this.props.searchMenuTypes ||
-                descr.searchMenuTypes ||
-                this.constructor.searchMenuTypes;
+        if (descr.display) {
+            // FIXME: there's something inelegant here: display might come from
+            // the View's defaultProps, in which case, modifying it in place
+            // would have unwanted effects.
+            const viewDisplay = deepCopy(descr.display);
+            const display = { ...this.withSearchProps.display };
+            for (const key in viewDisplay) {
+                if (typeof display[key] === "object") {
+                    Object.assign(display[key], viewDisplay[key]);
+                } else if (!(key in display) || display[key]) {
+                    display[key] = viewDisplay[key];
+                }
+            }
+            this.withSearchProps.display = display;
         }
 
         for (const key in this.withSearchProps) {
@@ -325,7 +359,12 @@ export class View extends Component {
         }
     }
 
-    async onWillUpdateProps(nextProps) {
+    onWillUpdateProps(nextProps) {
+        const oldProps = pluck(this.props, "arch", "type", "resModel");
+        const newProps = pluck(nextProps, "arch", "type", "resModel");
+        if (JSON.stringify(oldProps) !== JSON.stringify(newProps)) {
+            return this.loadView(nextProps);
+        }
         // we assume that nextProps can only vary in the search keys:
         // comparison, context, domain, groupBy, orderBy
         const { comparison, context, domain, groupBy, orderBy } = nextProps;
@@ -333,6 +372,8 @@ export class View extends Component {
     }
 }
 
+View._download = async function () {};
+
 View.template = "web.View";
 View.components = { WithSearch };
 View.defaultProps = {
@@ -344,33 +385,3 @@ View.defaultProps = {
 };
 
 View.searchMenuTypes = ["filter", "groupBy", "favorite"];
-
-/** @todo rework doc */
-
-// - create a fakeORM service? --> use sampleServer and mockServer parts?
-
-// - action service uses View comp --> see if things cannot be simplified (we will use also maybe a ClientAction comp similar to view)
-
-// - see if we want to simplify things related to callback recorders --> the class should be put elsewhere too (maybe in core along registry?)
-
-/**
- * To manage (how?):
- *
-  Relate to search
-      searchModel // search model state (searchItems, query)
-      searchPanel // search panel component state (expanded (hierarchy), scrollbar)
-
-  Related to config/display/layout
-      breadcrumbs
-      withBreadcrumbs // 'no_breadcrumbs' in context ? !context.no_breadcrumbs : true,
-      withControlPanel // this.withControlPanel from constructor
-      withSearchBar // 'no_breadcrumbs' in context ? !context.no_breadcrumbs : true,
-      withSearchPanel // this.withSearchPanel from constructor
-      search_panel // = params.search_panel or context.search_panel
-
-  Prepare for concrete view ???
-      activeActions
-
-  Do stuff in View comp ???
-      banner // from arch = this.arch.attrs.banner_route
-*/
diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml
index 9b13d6991df..b54c98b749f 100644
--- a/addons/web/static/src/views/view.xml
+++ b/addons/web/static/src/views/view.xml
@@ -2,7 +2,16 @@
 <templates xml:space="preserve">
 
   <t t-name="web.View" owl="1">
-      <WithSearch t-props="withSearchProps" t-on-click="handleActionLinks"/>
+      <WithSearch t-props="withSearchProps" t-slot-scope="search">
+        <t t-component="Controller"
+          t-on-click="handleActionLinks"
+          t-props="componentProps"
+          context="search.context"
+          domain="search.domain"
+          groupBy="search.groupBy"
+          orderBy="search.orderBy"
+          comparison="search.comparison"/>
+      </WithSearch>
   </t>
 
   <t t-name="web.ReportViewMeasures" owl="1">
diff --git a/addons/web/static/src/views/view_button/view_button.js b/addons/web/static/src/views/view_button/view_button.js
new file mode 100644
index 00000000000..7f293ef529c
--- /dev/null
+++ b/addons/web/static/src/views/view_button/view_button.js
@@ -0,0 +1,134 @@
+/** @odoo-module */
+
+import { debounce as debounceFn } from "@web/core/utils/timing";
+
+const { Component } = owl;
+
+const explicitRankClasses = [
+    "btn-primary",
+    "btn-secondary",
+    "btn-link",
+    "btn-success",
+    "btn-info",
+    "btn-warning",
+    "btn-danger",
+];
+
+const odooToBootstrapClasses = {
+    oe_highlight: "btn-primary",
+    oe_link: "btn-link",
+};
+
+function iconFromString(iconString) {
+    const icon = {};
+    if (iconString.startsWith("fa-")) {
+        icon.tag = "i";
+        icon.class = `fa fa-fw o_button_icon ${iconString}`;
+    } else {
+        icon.tag = "img";
+        icon.src = iconString;
+    }
+    return icon;
+}
+
+export class ViewButton extends Component {
+    setup() {
+        if (this.props.icon) {
+            this.icon = iconFromString(this.props.icon);
+        }
+        const { debounce } = this.clickParams;
+        if (debounce) {
+            this.onClick = debounceFn(this.onClick.bind(this), debounce, true);
+        }
+        this.tooltip = JSON.stringify({
+            debug: Boolean(odoo.debug),
+            button: {
+                string: this.props.string,
+                help: this.clickParams.help,
+                context: this.clickParams.context,
+                modifiers: this.clickParams.modifiers,
+                special: this.clickParams.special,
+                type: this.clickParams.type,
+                name: this.clickParams.name,
+                title: this.props.title,
+            },
+            context: this.props.record && this.props.record.context,
+            model: (this.props.record && this.props.record.resModel) || this.props.resModel,
+        });
+    }
+
+    get clickParams() {
+        return { context: this.props.context, ...this.props.clickParams };
+    }
+
+    get hasBigTooltip() {
+        return Boolean(odoo.debug) || this.clickParams.help;
+    }
+
+    get hasSmallToolTip() {
+        return !this.hasBigTooltip && this.props.title;
+    }
+
+    get disabled() {
+        const { name, type, special } = this.clickParams;
+        return (!name && !type && !special) || this.props.disabled;
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    onClick(ev) {
+        if (this.props.tag === "a") {
+            ev.preventDefault();
+        }
+        this.env.onClickViewButton({
+            clickParams: this.clickParams,
+            record: this.props.record,
+        });
+    }
+
+    getClassName() {
+        const classNames = [];
+        let hasExplicitRank = false;
+        for (let cls of this.props.className.split(" ")) {
+            if (cls in odooToBootstrapClasses) {
+                cls = odooToBootstrapClasses[cls];
+            }
+            classNames.push(cls);
+            if (!hasExplicitRank && explicitRankClasses.includes(cls)) {
+                hasExplicitRank = true;
+            }
+        }
+        if (this.props.tag === "button") {
+            classNames.push("btn");
+            if (!hasExplicitRank) {
+                classNames.push(this.props.defaultRank || "btn-secondary");
+            }
+            if (this.props.size) {
+                classNames.push(`btn-${this.props.size}`);
+            }
+        }
+        return classNames.join(" ");
+    }
+}
+ViewButton.template = "views.ViewButton";
+ViewButton.props = [
+    "tag?",
+    "record?",
+    "className?",
+    "context?",
+    "clickParams?",
+    "icon?",
+    "defaultRank?",
+    "disabled?",
+    "size?",
+    "tabindex?",
+    "title?",
+    "string?",
+    "slots?",
+];
+ViewButton.defaultProps = {
+    tag: "button",
+    className: "",
+    clickParams: {},
+};
diff --git a/addons/web/static/src/views/view_button/view_button.xml b/addons/web/static/src/views/view_button/view_button.xml
new file mode 100644
index 00000000000..5a80c9a68e7
--- /dev/null
+++ b/addons/web/static/src/views/view_button/view_button.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+  <t t-name="views.ViewButton" owl="1">
+    <t t-tag="props.tag"
+        t-att-class="getClassName()"
+        t-att-disabled="disabled"
+        t-att-name="props.clickParams.name"
+        t-att-special="props.clickParams.special"
+        t-att-href="props.tag === 'a' and '#'"
+        t-att-type="clickParams.type"
+        t-att-data-tooltip-template="hasBigTooltip ? 'views.ViewButtonTooltip' : false"
+        t-att-data-tooltip-info="hasBigTooltip ? tooltip : false"
+        t-att-data-tooltip="hasSmallToolTip ? props.title : false"
+        t-att-tabindex="props.tabindex"
+        t-on-click.stop="onClick"
+    >
+      <t t-if="icon" t-tag="icon.tag" t-att-class="icon.class" t-att-src="icon.src"/>
+      <t t-slot="contents"><t t-esc="props.string"/></t>
+    </t>
+  </t>
+
+  <t t-name="views.ViewButtonTooltip" owl="1">
+      <t t-if="info.debug || info.button.help">
+        <div class="o-tooltip--string" t-if="info.debug || info.button.string" role="tooltip">
+            <t t-if="info.debug">
+                Button
+                <t t-if="info.button.string">: </t>
+                <t t-if="!info.button.string"> (no string)</t>
+            </t>
+            <t t-esc="info.button.string"/>
+        </div>
+        <p t-if="info.button.title" class="o-tooltip--help" role="tooltip">
+            <t t-esc="info.button.title"/>
+        </p>
+        <p t-if="info.button.help" class="o-tooltip--help" role="tooltip">
+            <t t-esc="info.button.help"/>
+        </p>
+        <ul t-if="info.debug" class="o-tooltip--technical" role="tooltip">
+            <li data-item="object">
+                <span class="o-tooltip--technical--title">Object:</span>
+                <t t-esc="info.model"/>
+            </li>
+            <li t-if="info.button.context" data-item="context">
+                <span class="o-tooltip--technical--title">Context:</span>
+                <t t-esc="info.button.context || info.context"/>
+            </li>
+            <li t-if="info.button.modifiers" data-item="modifiers">
+                <span class="o-tooltip--technical--title">Modifiers:</span>
+                <t t-esc="info.button.modifiers"/>
+            </li>
+            <li t-if="info.button.special" data-item="special">
+                <span class="o-tooltip--technical--title">Special:</span>
+                <t t-esc="info.button.special"/>
+            </li>
+            <t t-set="button_type" t-value="info.button.type"/>
+            <li t-if="button_type" data-item="button_type">
+                <span class="o-tooltip--technical--title">Button Type:</span>
+                <t t-esc="button_type"/>
+            </li>
+            <li t-if="button_type === 'object'" data-item="button_method">
+                <span class="o-tooltip--technical--title">Method:</span>
+                <t t-esc="info.button.name"/>
+            </li>
+            <li t-if="button_type === 'action'" data-item="button_action">
+                <span class="o-tooltip--technical--title">Action ID:</span>
+                <t t-esc="info.button.name"/>
+            </li>
+        </ul>
+      </t>
+  </t>
+</templates>
diff --git a/addons/web/static/src/views/view_button/view_button_hook.js b/addons/web/static/src/views/view_button/view_button_hook.js
new file mode 100644
index 00000000000..5e3fb5cb9ed
--- /dev/null
+++ b/addons/web/static/src/views/view_button/view_button_hook.js
@@ -0,0 +1,106 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { evaluateExpr } from "@web/core/py_js/py";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+
+const { useEnv, useSubEnv } = owl;
+
+function disableButtons(el) {
+    // WOWL: can we do this non-imperatively?
+    const btns = [...el.querySelectorAll("button:not([disabled])")];
+    for (const btn of btns) {
+        btn.setAttribute("disabled", "1");
+    }
+    return btns;
+}
+
+function enableButtons(el, manuallyDisabledButtons) {
+    if (el) {
+        for (const btn of manuallyDisabledButtons) {
+            btn.removeAttribute("disabled");
+        }
+    }
+}
+export function useViewButtons(model, ref, options = {}) {
+    const action = useService("action");
+    const dialog = useService("dialog");
+    const comp = owl.useComponent();
+    const env = useEnv();
+    const beforeExecuteAction =
+        options.beforeExecuteAction ||
+        (() => {
+            return true;
+        });
+    useSubEnv({
+        async onClickViewButton({ clickParams, record }) {
+            const manuallyDisabledButtons = disableButtons(getEl());
+
+            async function execute() {
+                const _continue = await beforeExecuteAction(clickParams);
+                if (typeof _continue !== "undefined" && !_continue) {
+                    enableButtons(getEl(), manuallyDisabledButtons);
+                    return;
+                }
+                const resId = record.resId;
+                const resIds = record.resIds || model.resIds;
+                let buttonContext = {};
+                if (clickParams.context) {
+                    if (typeof clickParams.context === "string") {
+                        const valuesForEval = Object.assign({}, record.data, {
+                            active_id: resId,
+                            active_ids: resIds,
+                        });
+                        buttonContext = evaluateExpr(clickParams.context, valuesForEval);
+                    } else {
+                        buttonContext = clickParams.context;
+                    }
+                }
+                if (clickParams.buttonContext) {
+                    Object.assign(buttonContext, clickParams.buttonContext);
+                }
+                const doActionParams = Object.assign({}, clickParams, {
+                    resModel: record.resModel || model.resModel,
+                    resId,
+                    resIds,
+                    context: record.context || {}, //LPE FIXME new Context(payload.env.context).eval();
+                    buttonContext,
+                    onClose: async () => {
+                        const reload = options.reload || (() => record.model.root.load());
+                        await reload();
+                        comp.render(true); // FIXME WOWL reactivity
+                    },
+                });
+                try {
+                    await action.doActionButton(doActionParams);
+                } catch (_e) {
+                    await doActionParams.onClose();
+                } finally {
+                    enableButtons(getEl(), manuallyDisabledButtons);
+                }
+            }
+
+            if (clickParams.confirm) {
+                await new Promise((resolve) => {
+                    const dialogProps = {
+                        body: clickParams.confirm,
+                        confirm: execute,
+                        cancel: () => {},
+                    };
+                    dialog.add(ConfirmationDialog, dialogProps, { onClose: resolve });
+                });
+                enableButtons(getEl(), manuallyDisabledButtons);
+            } else {
+                return execute();
+            }
+        },
+    });
+
+    function getEl() {
+        if (env.inDialog) {
+            return ref.el.closest(".modal");
+        } else {
+            return ref.el;
+        }
+    }
+}
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
new file mode 100644
index 00000000000..fa41b3ea459
--- /dev/null
+++ b/addons/web/static/src/views/view_compiler.js
@@ -0,0 +1,461 @@
+/** @odoo-module **/
+
+import { Domain } from "@web/core/domain";
+import {
+    append,
+    combineAttributes,
+    createElement,
+    createTextNode,
+    getTag,
+} from "@web/core/utils/xml";
+import { toStringExpression } from "./utils";
+
+/**
+ * @typedef Compiler
+ * @property {string} selector
+ * @property {(el: Element, params: Record<string, any>) => Element} fn
+ */
+
+const { xml } = owl;
+
+const templateIds = Object.create(null);
+
+const BUTTON_CLICK_PARAMS = [
+    "name",
+    "type",
+    "args",
+    "context",
+    "close",
+    "confirm",
+    "special",
+    "effect",
+    "help",
+    "modifiers",
+    // WOWL SAD: is adding the support for debounce attribute here justified or should we
+    // just override compileButton in kanban compiler to add the debounce?
+    "debounce",
+];
+const BUTTON_STRING_PROPS = ["string", "size", "title", "icon"];
+
+/**
+ * @param {Element} el
+ * @param {string} attr
+ * @param {string} string
+ */
+function appendAttr(el, attr, string) {
+    const attrKey = `t-att-${attr}`;
+    const attrVal = el.getAttribute(attrKey);
+    el.setAttribute(attrKey, appendToStringifiedObject(attrVal, string));
+}
+
+/**
+ * @param {string} originalTattr
+ * @param {string} string
+ * @returns {string}
+ */
+function appendToStringifiedObject(originalTattr, string) {
+    const re = /{(.*)}/;
+    const oldString = re.exec(originalTattr);
+
+    if (oldString) {
+        string = `${oldString[1]},${string}`;
+    }
+    return `{${string}}`;
+}
+
+/**
+ * @param {Element} target
+ * @param  {...Element} sources
+ * @returns {Element}
+ */
+export function assignOwlDirectives(target, ...sources) {
+    for (const source of sources) {
+        for (const { name, value } of source.attributes) {
+            if (name.startsWith("t-attf-")) {
+                const propName = name.slice(7);
+                const tAttf = value
+                    .split("}}")
+                    .map((leftAndExpr) => {
+                        const [left, expr] = leftAndExpr.split("{{");
+                        const part = toStringExpression(left);
+                        return expr ? part + `+${expr}+` : part;
+                    })
+                    .join("");
+                target.setAttribute(propName, tAttf);
+            } else if (name.startsWith("t-att-")) {
+                const propName = name.slice(6);
+                target.setAttribute(propName, value);
+            } else if (name.startsWith("t-")) {
+                target.setAttribute(name, value);
+            }
+        }
+    }
+    return target;
+}
+
+/**
+ * @param {Element} el
+ * @param {Element} compiled
+ */
+export function copyAttributes(el, compiled) {
+    if (getTag(el, true) === "button") {
+        return;
+    }
+
+    const isComponent = isComponentNode(compiled);
+    const classes = el.className;
+    if (classes) {
+        if (isComponent) {
+            const cls = compiled.className;
+            compiled.setAttribute("class", cls ? `'${classes} ' + ${cls}` : `'${classes}'`);
+        } else {
+            compiled.classList.add(...classes.split(/\s+/).filter(Boolean));
+        }
+    }
+
+    for (const attName of ["style", "placeholder"]) {
+        let att = el.getAttribute(attName);
+        if (att) {
+            if (isComponent) {
+                att = toStringExpression(att);
+            }
+            compiled.setAttribute(attName, att);
+        }
+    }
+}
+
+/**
+ * Decodes a string within an attribute into an Object
+ * @param  {string} str
+ * @return {Object}
+ */
+export function decodeObjectForTemplate(str) {
+    return JSON.parse(decodeURI(str));
+}
+
+/**
+ * Encodes an object into a string usable inside a pre-compiled template
+ * @param  {Object}
+ * @return {string}
+ */
+export function encodeObjectForTemplate(obj) {
+    return `"${encodeURI(JSON.stringify(obj))}"`;
+}
+
+export function evalDomainFromRecord(record, expr) {
+    return new Domain(expr).contains(record.evalContext);
+}
+
+/**
+ * @param {Element} el
+ * @param {string} modifierName
+ * @returns {boolean | boolean[]}
+ */
+export function getModifier(el, modifierName) {
+    // cf python side def transfer_node_to_modifiers
+    // modifiers' string are evaluated to their boolean or array form
+    const modifiers = JSON.parse(el.getAttribute("modifiers") || "{}");
+    const mod = modifierName in modifiers ? modifiers[modifierName] : false;
+    return Array.isArray(mod) ? mod : !!mod;
+}
+
+/**
+ * @param {any} node
+ * @returns {string}
+ */
+function getTitleTag(node) {
+    return getTag(node)[0].toUpperCase() + getTag(node).slice(1);
+}
+
+/**
+ * @param {any} invisibleModifer
+ * @param {{ enableInvisible?: boolean }} params
+ * @returns {boolean}
+ */
+export function isAlwaysInvisible(invisibleModifer, params) {
+    return !params.enableInvisible && typeof invisibleModifer === "boolean" && invisibleModifer;
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+function isComment(node) {
+    return node.nodeType === 8;
+}
+
+/**
+ * @param {Element} el
+ * @returns {boolean}
+ */
+export function isComponentNode(el) {
+    return (
+        getTag(el) === getTitleTag(el) ||
+        (getTag(el, true) === "t" && "t-component" in el.attributes)
+    );
+}
+
+/**
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isTextNode(node) {
+    return node.nodeType === 3;
+}
+
+/**
+ * @param {string} title
+ * @returns {Element}
+ */
+export function makeSeparator(title) {
+    const separator = createElement("div");
+    separator.className = "o_horizontal_separator";
+    separator.textContent = title;
+    return separator;
+}
+
+export class ViewCompiler {
+    constructor() {
+        /** @type {number} */
+        this.id = 1;
+        /** @type {Compiler[]} */
+        this.compilers = [
+            { selector: "a[type],a[data-type],button", fn: this.compileButton },
+            { selector: "field", fn: this.compileField },
+            { selector: "widget", fn: this.compileWidget },
+        ];
+        this.ctx = { readonly: "props.readonly" };
+        this.setup();
+    }
+
+    setup() {}
+
+    /**
+     * @param {any} invisible
+     * @param {Element} compiled
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    applyInvisible(invisible, compiled, params) {
+        if (!invisible) {
+            return compiled;
+        }
+        if (typeof invisible === "boolean" && !params.enableInvisible) {
+            return;
+        }
+        if (!params.enableInvisible) {
+            combineAttributes(
+                compiled,
+                "t-if",
+                `!evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`,
+                " and "
+            );
+        } else {
+            let expr;
+            if (Array.isArray(invisible)) {
+                expr = `evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`;
+            } else {
+                expr = invisible;
+            }
+            appendAttr(compiled, "class", `o_invisible_modifier:${expr}`);
+        }
+        return compiled;
+    }
+
+    /**
+     * @param {Element} xmlElement
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compile(xmlElement, params = {}) {
+        const newRoot = createElement("t");
+        const child = this.compileNode(xmlElement, params);
+        return append(newRoot, child);
+    }
+
+    /**
+     * @param {Node} node
+     * @param {Record<string, any>} params
+     * @returns {Element | Text | void}
+     */
+    compileNode(node, params = {}, evalInvisible = true) {
+        if (isComment(node)) {
+            return;
+        }
+        if (isTextNode(node)) {
+            return createTextNode(node.nodeValue);
+        }
+
+        let invisible;
+        if (evalInvisible) {
+            invisible = getModifier(node, "invisible");
+            if (isAlwaysInvisible(invisible, params)) {
+                return;
+            }
+        }
+
+        const compiler = this.compilers.find((cp) => node.matches(cp.selector));
+        let compiledNode;
+        if (compiler) {
+            compiledNode = compiler.fn.call(this, node, params);
+            if (compiledNode) {
+                copyAttributes(node, compiledNode);
+            }
+        } else {
+            compiledNode = this.compileGenericNode(node, params);
+        }
+
+        if (evalInvisible && compiledNode) {
+            compiledNode = this.applyInvisible(invisible, compiledNode, params);
+        }
+        return compiledNode;
+    }
+
+    //-----------------------------------------------------------------------------
+    // Compilers
+    //-----------------------------------------------------------------------------
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileButton(el, params) {
+        let tag = getTag(el, true);
+        const type = el.getAttribute("type");
+        if (tag === "a" && type === "url") {
+            tag = "button";
+        }
+        const button = createElement("ViewButton", {
+            tag: toStringExpression(tag),
+            record: `props.record`,
+        });
+
+        assignOwlDirectives(button, el);
+
+        const clickParams = {};
+        for (const { name, value } of el.attributes) {
+            if (BUTTON_CLICK_PARAMS.includes(name)) {
+                clickParams[name] = value;
+            } else if (BUTTON_STRING_PROPS.includes(name)) {
+                button.setAttribute(name, toStringExpression(value));
+            }
+        }
+
+        button.setAttribute("clickParams", JSON.stringify(clickParams));
+        button.setAttribute("className", toStringExpression(el.className));
+        el.removeAttribute("class");
+        button.removeAttribute("class");
+
+        // Button's body
+        const buttonContent = [];
+        for (const child of el.childNodes) {
+            const compiled = this.compileNode(child, params);
+            if (compiled) {
+                buttonContent.push(compiled);
+            }
+        }
+        if (buttonContent.length) {
+            const contentSlot = createElement("t");
+            contentSlot.setAttribute("t-set-slot", "contents");
+            append(button, contentSlot);
+            for (const buttonChild of buttonContent) {
+                append(contentSlot, buttonChild);
+            }
+        }
+        return button;
+    }
+
+    /**
+     * @param {Element} el
+     * @returns {Element}
+     */
+    compileField(el) {
+        const fieldName = el.getAttribute("name");
+        const fieldId = el.getAttribute("field_id") || fieldName;
+
+        const field = createElement("Field");
+        field.setAttribute("id", `'${fieldId}'`);
+        field.setAttribute("name", `'${fieldName}'`);
+        field.setAttribute("record", `props.record`);
+        field.setAttribute("fieldInfo", `props.archInfo.fieldNodes['${fieldId}']`);
+
+        if (el.hasAttribute("widget")) {
+            field.setAttribute("type", `'${el.getAttribute("widget")}'`);
+        }
+
+        return field;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Record<string, any>} params
+     * @returns {Element}
+     */
+    compileGenericNode(el, params) {
+        const compiled = createElement(el.nodeName);
+        const metaAttrs = ["modifiers", "attrs", "invisible", "readonly"];
+        for (const attr of el.attributes) {
+            if (metaAttrs.includes(attr.name)) {
+                continue;
+            }
+            compiled.setAttribute(attr.name, attr.value);
+        }
+        for (const child of el.childNodes) {
+            append(compiled, this.compileNode(child, params));
+        }
+        if (el.hasAttribute("t-foreach") && !el.hasAttribute("t-key")) {
+            compiled.setAttribute("t-key", `${el.getAttribute("t-as")}_index`);
+            console.warn(`Missing attribute "t-key" in "t-foreach" statement.`);
+        }
+        return compiled;
+    }
+
+    /**
+     * @param {Element} el
+     * @returns {Element}
+     */
+    compileWidget(el) {
+        const attrs = {};
+        const props = { record: `props.record`, readonly: this.ctx.readonly };
+        for (const { name, value } of el.attributes) {
+            switch (name) {
+                case "class":
+                case "name": {
+                    props[name] = `'${value}'`;
+                    break;
+                }
+                case "modifiers": {
+                    attrs.modifiers = JSON.parse(value || "{}");
+                    break;
+                }
+                default: {
+                    attrs[name] = value;
+                }
+            }
+        }
+        props.node = encodeObjectForTemplate({ attrs });
+        const widget = createElement("Widget", props);
+        return assignOwlDirectives(widget, el);
+    }
+}
+
+/**
+ * @param {typeof ViewCompiler} ViewCompiler
+ * @param {string} templateKey
+ * @param {Element} xmlDoc
+ * @param {Record<string, any>} [params]
+ * @returns {string}
+ */
+export function useViewCompiler(ViewCompiler, templateKey, xmlDoc, params) {
+    // Creates a new compiled template if the given template key hasn't been
+    // compiled already.
+    if (templateKey === undefined) {
+        throw new Error("templateKey can not be Undefined!");
+    }
+    if (!templateIds[templateKey]) {
+        const compiledDoc = new ViewCompiler().compile(xmlDoc, params);
+        templateIds[templateKey] = xml`${compiledDoc.outerHTML}`;
+    }
+    return templateIds[templateKey];
+}
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.js b/addons/web/static/src/views/view_dialogs/export_data_dialog.js
new file mode 100644
index 00000000000..d9326027008
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.js
@@ -0,0 +1,352 @@
+/** @odoo-module **/
+
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { Dialog } from "@web/core/dialog/dialog";
+import { useService } from "@web/core/utils/hooks";
+import { fuzzyLookup } from "@web/core/utils/search";
+import { useSortable } from "@web/core/utils/sortable";
+
+const { Component, useRef, useState, onWillStart } = owl;
+
+class DeleteExportListDialog extends Component {
+    async onDelete() {
+        await this.props.delete();
+        this.props.close();
+    }
+}
+DeleteExportListDialog.components = { Dialog };
+DeleteExportListDialog.template = "web.DeleteExportListDialog";
+
+class ExportDataItem extends Component {
+    setup() {
+        this.subFields = [];
+        this.state = useState({
+            isExpanded: false,
+        });
+    }
+
+    async onClick(ev) {
+        if (this.props.isFieldExpandable(this.props.field)) {
+            this.subFields = await this.props.onClick(ev);
+            this.state.isExpanded = this.props.isFieldExpanded(this.props.field.name);
+        }
+    }
+
+    isFieldSelected(current) {
+        return this.props.exportList.find(({ name }) => name === current);
+    }
+}
+ExportDataItem.template = "web.ExportDataItem";
+ExportDataItem.components = { ExportDataItem };
+ExportDataItem.props = {
+    field: { type: Object, optional: true },
+    exportList: { type: Object, optional: true },
+    expandedContent: Function,
+    isDebug: Boolean,
+    isFieldExpandable: Function,
+    isFieldExpanded: Function,
+    onClick: Function,
+    onAdd: Function,
+};
+
+export class ExportDataDialog extends Component {
+    setup() {
+        this.dialog = useService("dialog");
+        this.notification = useService("notification");
+        this.orm = useService("orm");
+        this.rpc = useService("rpc");
+        this.draggableRef = useRef("draggable");
+        this.exportListRef = useRef("exportList");
+        this.searchRef = useRef("search");
+
+        this.knownFields = {};
+        this.expandedFields = {};
+        this.availableFormats = [];
+        this.templates = [];
+
+        this.state = useState({
+            exportList: [],
+            isCompatible: false,
+            isEditingTemplate: false,
+            search: [],
+            selectedFormat: 0,
+            templateId: null,
+        });
+
+        this.title = this.env._t("Export Data");
+        this.newTemplateText = this.env._t("New template");
+        this.removeFieldText = this.env._t("Remove field");
+        this.expandText = this.env._t("Show sub-fields");
+
+        useSortable({
+            // Params
+            ref: this.draggableRef,
+            elements: ".o_export_field",
+            cursor: "grabbing",
+            // Hooks
+            onDrop: async ({ element, previous, next }) => {
+                const indexes = [element, previous, next].map(
+                    (e) =>
+                        e &&
+                        Object.values(this.state.exportList).findIndex(
+                            ({ name }) => name === e.dataset.field_id
+                        )
+                );
+                let target;
+                if (indexes[0] < indexes[1]) {
+                    target = previous ? indexes[1] : 0;
+                } else {
+                    target = next ? indexes[2] : this.state.exportList.length - 1;
+                }
+                this.onDraggingEnd([indexes[0], target]);
+            },
+        });
+
+        onWillStart(async () => {
+            this.availableFormats = await this.rpc("/web/export/formats");
+            this.templates = await this.rpc("/web/dataset/call_kw", {
+                args: [],
+                kwargs: {
+                    context: this.props.context,
+                },
+                model: "ir.exports",
+                method: "search_read",
+            });
+            await this.fetchFields();
+        });
+    }
+
+    get fieldsAvailable() {
+        if (this.searchRef.el && this.searchRef.el.value) {
+            return this.state.search.length && Object.values(this.state.search);
+        }
+        return Object.values(this.knownFields);
+    }
+
+    get isDebug() {
+        return Boolean(odoo.debug);
+    }
+
+    get rootFields() {
+        return this.fieldsAvailable.filter(({ parent }) => !parent);
+    }
+
+    /**
+     * Load fields to display and (re)set the list of available fields
+     */
+    async fetchFields() {
+        this.state.search = [];
+        this.knownFields = {};
+        await this.loadFields();
+        this.setDefaultExportList();
+        if (this.searchRef.el) {
+            this.searchRef.el.value = "";
+        }
+        if (this.state.templateId) {
+            this.loadExportList(this.state.templateId);
+        }
+    }
+
+    enterTemplateEdition() {
+        if (this.state.templateId && !this.state.isEditingTemplate) {
+            this.state.isEditingTemplate = true;
+        }
+    }
+
+    expandedContent(id) {
+        return this.isFieldExpanded(id) && this.expandedFields[id].fields;
+    }
+
+    isFieldExpanded(id) {
+        return this.expandedFields[id] && !this.expandedFields[id].hidden;
+    }
+
+    isFieldExpandable({ field_type, name }) {
+        return ["one2many", "many2one"].includes(field_type) && name.split("/").length < 3;
+    }
+
+    async loadExportList(value) {
+        this.state.templateId = value;
+        if (value === "new_template") {
+            this.state.isEditingTemplate = true;
+            return;
+        }
+        this.state.isEditingTemplate = false;
+        const fields = await this.rpc("/web/export/namelist", {
+            model: this.props.root.resModel,
+            export_id: Number(value),
+        });
+        this.state.exportList = fields;
+    }
+
+    async loadFields(id) {
+        let model = this.props.root.resModel;
+        let parentField, parentParams;
+        if (id) {
+            if (this.expandedFields[id]) {
+                // we don't make a new RPC if the value is already known
+                this.expandedFields[id].hidden = !this.expandedFields[id].hidden;
+                return this.expandedFields[id].fields;
+            }
+            parentField = this.knownFields[id];
+            model = parentField.params && parentField.params.model;
+            parentParams = {
+                ...parentField.params,
+                parent_field_type: parentField.field_type,
+                parent_field: parentField,
+                parent_name: parentField.string,
+                exclude: [parentField.relation_field],
+            };
+        }
+        const fields = await this.props.getExportedFields(
+            model,
+            this.state.isCompatible,
+            parentParams
+        );
+        for (const field of fields) {
+            field.name = field.id;
+            field.label = field.string;
+            field.parent = parentField;
+            if (!this.knownFields[field.id]) {
+                this.knownFields[field.id] = field;
+            }
+        }
+        if (id) {
+            this.expandedFields[id] = { fields };
+        }
+        return fields;
+    }
+
+    onDraggingEnd([item, target]) {
+        this.state.exportList.splice(target, 0, this.state.exportList.splice(item, 1)[0]);
+    }
+
+    onAddItemExportList(ev) {
+        const field = ev.target.closest(".o_export_tree_item").dataset.field_id;
+        this.state.exportList.push(this.knownFields[field]);
+        this.state.search = [];
+        this.searchRef.el.value = "";
+        this.enterTemplateEdition();
+    }
+
+    onRemoveItemExportList(ev) {
+        const item = this.state.exportList.findIndex(
+            ({ name }) => name === ev.target.parentElement.dataset.field_id
+        );
+        this.state.exportList.splice(item, 1);
+        this.enterTemplateEdition();
+    }
+
+    async onChangeExportList(ev) {
+        this.loadExportList(ev.target.value);
+    }
+
+    async onSaveExportTemplate() {
+        const name = this.exportListRef.el.value;
+        if (!name) {
+            return this.notification.add(this.env._t("Please enter save field list name"), {
+                type: "danger",
+            });
+        }
+        const id = await this.orm.create(
+            "ir.exports",
+            {
+                name,
+                export_fields: this.state.exportList.map((field) => [
+                    0,
+                    0,
+                    {
+                        name: field.name,
+                    },
+                ]),
+                resource: this.props.root.resModel,
+            },
+            this.props.context
+        );
+        this.state.isEditingTemplate = false;
+        this.state.templateId = id;
+        this.templates.push({ id, name });
+    }
+
+    onCancelExportTemplate() {
+        this.state.isEditingTemplate = false;
+        if (this.state.templateId === "new_template") {
+            this.state.templateId = null;
+            return;
+        }
+        this.loadExportList(this.state.templateId);
+    }
+
+    async onClickExportButton() {
+        if (!this.state.exportList.length) {
+            return this.notification.add(
+                this.env._t("Please select fields to save export list..."),
+                {
+                    type: "danger",
+                }
+            );
+        }
+        await this.props.download(
+            this.state.exportList,
+            this.state.isCompatible,
+            this.availableFormats[this.state.selectedFormat].tag
+        );
+    }
+
+    async onDeleteExportTemplate() {
+        this.dialog.add(DeleteExportListDialog, {
+            text: this.env._t("Do you really want to delete this export template?"),
+            delete: async () => {
+                const id = Number(this.state.templateId);
+                await this.orm.unlink("ir.exports", [id], this.props.context);
+                this.templates.splice(
+                    this.templates.findIndex((i) => i.id === id),
+                    1
+                );
+                this.state.templateId = null;
+                this.setDefaultExportList();
+            },
+        });
+    }
+
+    async onSearch(ev) {
+        this.state.search = fuzzyLookup(
+            ev.target.value,
+            this.fieldsAvailable || Object.values(this.knownFields),
+            (field) => field.string
+        );
+    }
+
+    async onToggleCompatibleExport(value) {
+        this.state.isCompatible = value;
+        await this.fetchFields();
+    }
+
+    async onToggleExpandField(ev) {
+        const id = ev.target.closest(".o_export_tree_item").dataset.field_id;
+        const fields = await this.loadFields(id);
+        return fields;
+    }
+
+    setDefaultExportList() {
+        if (this.state.isCompatible) {
+            this.state.exportList = this.state.exportList.filter(
+                ({ name }) => this.knownFields[name]
+            );
+        } else {
+            this.state.exportList = Object.values(this.knownFields).filter(
+                ({ name }) => name && this.props.root.activeFields[name]
+            );
+        }
+    }
+
+    setFormat(ev) {
+        if (ev.target.checked) {
+            this.state.selectedFormat = this.availableFormats.findIndex(
+                ({ tag }) => tag === ev.target.value
+            );
+        }
+    }
+}
+ExportDataDialog.components = { CheckBox, Dialog, ExportDataItem };
+ExportDataDialog.template = "web.ExportDataDialog";
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.scss b/addons/web/static/src/views/view_dialogs/export_data_dialog.scss
new file mode 100644
index 00000000000..5379b7a39da
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.scss
@@ -0,0 +1,42 @@
+.o_export_data_dialog{
+    .modal-body {
+        display: flex;
+        margin: auto -16px;
+
+        .o_left_panel, .o_right_panel {
+            height: inherit;
+
+            .o_left_field_panel, .o_right_field_panel {
+                user-select: none;
+                .o_export_tree_item {
+                    &:hover:not(.o_expanded) {
+                        background: rgba($o-brand-odoo, .3);
+                        color: white;
+                    }
+
+                    &.o_expanded {
+                        border-bottom: 1px solid grey;
+                        margin-bottom: 0.2em;
+                        background: rgba($o-brand-odoo, .2);
+                    }
+
+                    .o_tree_column {
+                        justify-content: space-between;
+                    }
+
+                    .o_inactive {
+                        opacity: 0.2;
+                    }
+
+                    .o_expand_parent {
+                        inset: 4px auto auto 0.5em;
+                    }
+                }
+
+                .o_export_field > *:not(.o_remove_field) {
+                    @include o-grab-cursor;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
new file mode 100644
index 00000000000..7f435cb5971
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.DeleteExportListDialog" owl="1">
+        <Dialog title="'Confirmation'" size="'md'">
+            <div t-esc="props.text" />
+            <t t-set-slot="footer">
+                <button class="btn btn-primary" t-on-click="onDelete">Delete</button>
+                <button class="btn btn-secondary" t-on-click="() => props.close()">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+
+    <t t-name="web.ExportDataItem" owl="1">
+        <div t-att-data-field_id="props.field.name" t-attf-class="o_export_tree_item o_cursor_pointer position-relative pl-4 {{ state.isExpanded ? 'o_expanded' : '' }}" role="treeitem" t-on-click.stop="onClick" t-on-dblclick="(ev) => !props.isFieldExpandable(props.field) and !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)">
+            <span t-if="props.isFieldExpandable(props.field)" t-attf-class="o_expand_parent d-inline-block position-absolute small fa {{ state.isExpanded ? 'fa-chevron-down' : 'fa-chevron-right' }}" role="img" aria-label="Show sub-fields" title="expandText" />
+            <div class="o_tree_column d-flex align-items-center">
+                <span t-if="props.isDebug and props.field.id" t-esc="`${props.field.string} (${props.field.id})`" />
+                <span t-else="" t-esc="props.field.string" />
+                <span title="Select field" t-attf-class="fa fa-plus float-end m-1 o_add_field {{ isFieldSelected(props.field.name) ? 'o_inactive' : '' }}" t-on-click.stop="(ev) => !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)" />
+            </div>
+            <t t-if="state.isExpanded">
+                <t t-foreach="subFields" t-as="field" t-key="field.name">
+                    <ExportDataItem
+                        t-props="props"
+                        field="field"
+                    />
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.ExportDataDialog" owl="1">
+        <Dialog contentClass="'o_export_data_dialog h100'" title="title" size="'lg'">
+            <div class="o_left_panel col-12 col-md-6 d-flex flex-column flex-nowrap">
+                <div class="o_import_compat">
+                    <CheckBox className="'o_import_compat'" id="'o-update-data'" value="state.isCompatible" onChange.bind="onToggleCompatibleExport">
+                        I want to update data (import-compatible export)
+                    </CheckBox>
+                </div>
+                <h4 class="mt-3">Available fields</h4>
+                <input t-ref="search" type="search" class="form-control mb-3 o_export_search_input" id="o-export-search-filter" placeholder="Search" t-on-input="onSearch" />
+                <div class="o_left_field_panel h-100 overflow-auto border">
+                    <div class="o_field_tree_structure">
+                        <t t-if="fieldsAvailable">
+                            <t t-foreach="rootFields" t-as="field" t-key="field.name">
+                                <ExportDataItem
+                                    field="field"
+                                    expandedContent.bind="expandedContent"
+                                    isFieldExpanded.bind="isFieldExpanded"
+                                    exportList="state.exportList"
+                                    isFieldExpandable="isFieldExpandable"
+                                    isDebug="isDebug"
+                                    onClick.bind="onToggleExpandField"
+                                    onAdd.bind="onAddItemExportList"
+                                />
+                            </t>
+                        </t>
+                        <h3 t-else="" class="text-center text-muted mt-5 o_no_match">No match found.</h3>
+                    </div>
+                </div>
+            </div>
+            <div class="o_right_panel col-12 col-md-6 d-flex flex-column flex-nowrap mt-3 mt-md-0">
+                <div class="o_export_format">
+                    <strong>Export Format:</strong>
+                    <t t-foreach="availableFormats" t-as="format" t-key="format.tag">
+                        <div class="radio form-check form-check-inline pl-4">
+                            <input t-att-id="'o_radio' + format.tag" type="radio" t-att-checked="format.tag === availableFormats[state.selectedFormat].tag" name="o_export_format_name" t-att-value="format.tag" class="form-check-input" t-on-change="setFormat" />
+                            <label class="form-check-label" t-att-for="'o_radio' + format.tag" t-esc="format.label" />
+                        </div>
+                    </t>
+                </div>
+                <div class="mt-3">
+                    <h4>Fields to export</h4>
+                </div>
+                <div class="o_exported_lists">
+                    <div class="input-group mb-3">
+                        <t t-if="state.templateId === 'new_template'">
+                            <label class="pt-2 mb-0 font-weight-bold">Save as: </label>
+                            <input t-ref="exportList" class="form-control ml-4 o_save_list_name" t-att-placeholder="newTemplateText" />
+                        </t>
+                        <t t-else="">
+                            <label class="pt-2 mb-0 font-weight-bold">Template: </label>
+                            <select class="form-control ml-4 o_exported_lists_select" t-on-change="onChangeExportList">
+                                <option />
+                                <t t-foreach="templates" t-as="template" t-key="template.id">
+                                    <option t-att-value="template.id" t-esc="template.name or 'undefined'" t-att-selected="state.templateId === template.id" />
+                                </t>
+                                <option class="font-italic" value="new_template">New template </option>
+                            </select>
+                        </t>
+                        <t t-if="state.isEditingTemplate">
+                            <button t-if="state.templateId === 'new_template'" type="button" class="btn btn-secondary ml-1 o_save_list_btn" t-on-click.stop="onSaveExportTemplate">
+                                <i class="fa fa-floppy-o" />
+                            </button>
+                            <button type="button" class="btn btn-secondary ml-1 o_cancel_list_btn" t-on-click.stop="onCancelExportTemplate">
+                                <i t-attf-class="fa {{ state.templateId === 'new_template' ? 'fa-times' : 'fa-undo' }}" />
+                            </button>
+                        </t>
+                        <t t-else="">
+                            <button t-if="state.templateId" type="button" class="btn btn-secondary ml-1 o_delete_exported_list" t-on-click.stop="onDeleteExportTemplate">
+                                <i class="fa fa-trash" />
+                            </button>
+                        </t>
+                    </div>
+                </div>
+                <div class="o_right_field_panel h-100 px-2 overflow-auto border">
+                    <ul class="o_fields_list list-unstyled" t-ref="draggable">
+                        <t t-foreach="state.exportList" t-as="field" t-key="field.name">
+                            <li class="o_export_field" t-att-data-field_id="field.name">
+                                <span class="fa fa-sort o_sort_field mx-1" t-attf-style="opacity:{{ state.exportList.length === 1 ? 0 : 1 }}" />
+                                <span t-if="isDebug and field.id" t-esc="`${field.string or field.label} (${field.id})`" />
+                                <span t-else="" t-esc="field.string or field.label" />
+                                <span class="fa fa-trash m-1 float-end o_remove_field o_cursor_pointer" t-att-title="removeFieldText" t-on-click.stop="onRemoveItemExportList" />
+                            </li>
+                        </t>
+                    </ul>
+                </div>
+            </div>
+            <t t-set-slot="footer">
+                <button class="btn btn-primary o_select_button" data-hotkey="v" t-on-click.stop="onClickExportButton">Export</button>
+                <button class="btn o_form_button_cancel" t-att-class="(props.disableMultipleSelection &amp;&amp; props.noCreate) ? 'btn-primary' : 'btn-secondary'" data-hotkey="z" t-on-click.stop="props.close">Close</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/view_dialogs/form_view_dialog.js b/addons/web/static/src/views/view_dialogs/form_view_dialog.js
new file mode 100644
index 00000000000..93b8aaf66bf
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/form_view_dialog.js
@@ -0,0 +1,90 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { useChildRef } from "@web/core/utils/hooks";
+import { View } from "@web/views/view";
+
+const { Component, onMounted } = owl;
+
+export class FormViewDialog extends Component {
+    setup() {
+        super.setup();
+
+        this.modalRef = useChildRef();
+
+        const buttonTemplate = this.props.isToMany
+            ? "web.FormViewDialog.ToMany.buttons"
+            : "web.FormViewDialog.ToOne.buttons";
+
+        this.viewProps = {
+            type: "form",
+            buttonTemplate,
+
+            context: this.props.context || {},
+            display: { controlPanel: false },
+            mode: this.props.mode || "edit",
+            resId: this.props.resId || false,
+            resModel: this.props.resModel,
+            viewId: this.props.viewId || false,
+            preventCreate: this.props.preventCreate,
+            preventEdit: this.props.preventEdit,
+            discardRecord: () => {
+                this.props.close();
+            },
+            saveRecord: async (record, { saveAndNew }) => {
+                const saved = await record.save({ stayInEdition: true, noReload: true });
+                if (saved) {
+                    await this.props.onRecordSaved(record);
+                    if (saveAndNew) {
+                        const context = Object.assign({}, this.props.context);
+                        Object.keys(context).forEach((k) => {
+                            if (k.startsWith("default_")) {
+                                delete context[k];
+                            }
+                        });
+                        await record.model.load({ resId: null, context });
+                    } else {
+                        this.props.close();
+                    }
+                }
+            },
+        };
+
+        onMounted(() => {
+            if (this.modalRef.el.querySelector(".modal-footer").childElementCount > 1) {
+                const defaultButton = this.modalRef.el.querySelector(
+                    ".modal-footer button.o-default-button"
+                );
+                if (defaultButton) {
+                    defaultButton.classList.add("d-none");
+                }
+            }
+        });
+    }
+}
+
+FormViewDialog.components = { Dialog, View };
+FormViewDialog.props = {
+    close: Function,
+    resModel: String,
+
+    context: { type: Object, optional: true },
+    mode: {
+        optional: true,
+        validate: (m) => ["edit", "readonly"].includes(m),
+    },
+    onRecordSaved: { type: Function, optional: true },
+    resId: { type: [Number, Boolean], optional: true },
+    title: { type: String, optional: true },
+    viewId: { type: [Number, Boolean], optional: true },
+    preventCreate: { type: Boolean, optional: true },
+    preventEdit: { type: Boolean, optional: true },
+    isToMany: { type: Boolean, optional: true },
+};
+FormViewDialog.defaultProps = {
+    onRecordSaved: () => {},
+    preventCreate: false,
+    preventEdit: false,
+    isToMany: false,
+};
+FormViewDialog.template = "web.FormViewDialog";
diff --git a/addons/web/static/src/views/view_dialogs/form_view_dialog.scss b/addons/web/static/src/views/view_dialogs/form_view_dialog.scss
new file mode 100644
index 00000000000..b8fa9ae5d29
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/form_view_dialog.scss
@@ -0,0 +1,5 @@
+.o_form_view_dialog {
+    .modal-body {
+        padding: 0;
+    }
+}
diff --git a/addons/web/static/src/views/view_dialogs/form_view_dialog.xml b/addons/web/static/src/views/view_dialogs/form_view_dialog.xml
new file mode 100644
index 00000000000..3a1891de2d0
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/form_view_dialog.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+  <t t-name="web.FormViewDialog" owl="1">
+    <Dialog title="props.title" contentClass="'o_form_view_dialog'" modalRef="modalRef">
+      <View t-props="viewProps"/>
+      <t t-set-slot="footer">
+        <t t-if="props.preventEdit and props.preventCreate">
+          <button class="btn btn-primary" t-on-click="() => props.close()">Close</button>
+        </t>
+        <t t-else="">
+          <button class="btn btn-primary o-default-button" t-on-click="() => props.close()">Ok</button>
+        </t>
+      </t>
+    </Dialog>
+  </t>
+
+  <t t-name="web.FormViewDialog.ToMany.buttons" t-inherit="web.FormView.Buttons" owl="1">
+    <xpath expr="//button[contains(@class, 'o_form_button_save')]" position="replace">
+      <button class="btn btn-primary o_form_button_save" t-on-click="save" data-hotkey="c">Save &amp; Close</button>
+      <button class="btn btn-primary o_form_button_save_new" t-on-click="() => this.save({saveAndNew: true})" data-hotkey="n">Save &amp; New</button>
+    </xpath>
+  </t>
+
+  <t t-name="web.FormViewDialog.ToOne.buttons" t-inherit="web.FormView.Buttons" owl="1">
+    <xpath expr="//button[contains(@class, 'o_form_button_save')]" position="replace">
+      <button class="btn btn-primary o_form_button_save" t-on-click="save" data-hotkey="c">Save &amp; Close</button>
+    </xpath>
+  </t>
+
+</templates>
diff --git a/addons/web/static/src/views/view_dialogs/select_create_dialog.js b/addons/web/static/src/views/view_dialogs/select_create_dialog.js
new file mode 100644
index 00000000000..43fbd7254a2
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/select_create_dialog.js
@@ -0,0 +1,82 @@
+/** @odoo-module **/
+
+import { Dialog } from "@web/core/dialog/dialog";
+import { useService } from "@web/core/utils/hooks";
+import { View } from "@web/views/view";
+import { escape } from "@web/core/utils/strings";
+
+const { Component, markup, useState } = owl;
+
+export class SelectCreateDialog extends Component {
+    setup() {
+        this.viewService = useService("view");
+        this.state = useState({ resIds: [] });
+        this.baseViewProps = {
+            display: { searchPanel: false },
+            editable: false, // readonly
+            noBreadcrumbs: true,
+            noContentHelp: markup(`<p>${escape(this.env._t("No records found!"))}</p>`),
+            showButtons: false,
+            selectRecord: (resId) => this.select([resId]),
+            onSelectionChanged: (resIds) => {
+                this.state.resIds = resIds;
+            },
+        };
+    }
+
+    get viewProps() {
+        let id;
+        const viewProps = {
+            ...this.baseViewProps,
+            context: this.props.context,
+            domain: this.props.domain,
+            dynamicFilters: this.props.dynamicFilters,
+            hasSelectors: this.props.multiSelect,
+            resModel: this.props.resModel,
+            searchViewId: this.props.searchViewId,
+            type: this.env.isSmall ? "kanban" : "list",
+        };
+        const context = this.props.context || {};
+        if (viewProps.type === "kanban") {
+            viewProps.forceGlobalClick = true;
+            id = context["kanban_view_ref"];
+        } else {
+            id = context["list_view_ref"] || context["tree_view_ref"];
+        }
+        return { ...viewProps, viewId: id || false };
+    }
+
+    async select(resIds) {
+        if (this.props.onSelected) {
+            await this.props.onSelected(resIds);
+            this.props.close();
+        }
+    }
+
+    async createEditRecord() {
+        if (this.props.onCreateEdit) {
+            await this.props.onCreateEdit();
+            this.props.close();
+        }
+    }
+}
+SelectCreateDialog.components = { Dialog, View };
+SelectCreateDialog.template = "web.SelectCreateDialog";
+
+SelectCreateDialog.defaultProps = {
+    dynamicFilters: [],
+    multiSelect: true,
+    searchViewId: false,
+    type: "list",
+};
+
+/**
+ * Props: (to complete)
+ *
+ * resModel
+ * domain
+ * context
+ * title
+ * onSelected
+ * type
+ */
diff --git a/addons/web/static/src/views/view_dialogs/select_create_dialog.xml b/addons/web/static/src/views/view_dialogs/select_create_dialog.xml
new file mode 100644
index 00000000000..309e6a2f022
--- /dev/null
+++ b/addons/web/static/src/views/view_dialogs/select_create_dialog.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.SelectCreateDialog" owl="1">
+        <Dialog title="props.title">
+            <View t-props="viewProps" />
+            <t t-set-slot="footer">
+                <t t-if="props.multiSelect">
+                    <button class="btn btn-primary o_select_button"
+                        t-att-disabled="state.resIds.length === 0"
+                        data-hotkey="v"
+                        t-on-click="() => this.select(state.resIds)"
+                    >
+                        Select
+                    </button>
+                </t>
+                <t t-if="!props.noCreate">
+                    <button class="btn btn-primary" data-hotkey="c" t-on-click="createEditRecord">Create</button>
+                </t>
+                <button class="btn o_form_button_cancel" t-att-class="(props.disableMultipleSelection &amp;&amp; props.noCreate) ? 'btn-primary' : 'btn-secondary'" data-hotkey="z" t-on-click="() => this.props.close()">Cancel</button>
+            </t>
+        </Dialog>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/helpers/view_hook.js b/addons/web/static/src/views/view_hook.js
similarity index 81%
rename from addons/web/static/src/views/helpers/view_hook.js
rename to addons/web/static/src/views/view_hook.js
index a5065faad5b..c7e50a7ea42 100644
--- a/addons/web/static/src/views/helpers/view_hook.js
+++ b/addons/web/static/src/views/view_hook.js
@@ -4,9 +4,10 @@ import { useDebugCategory } from "@web/core/debug/debug_context";
 import { useSetupAction } from "@web/webclient/actions/action_hook";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
+import { browser } from "@web/core/browser/browser";
 import { evaluateExpr } from "@web/core/py_js/py";
 
-const { useComponent, xml } = owl;
+const { useComponent, useEffect, xml } = owl;
 
 export function useSetupView(params) {
     const component = useComponent();
@@ -105,12 +106,11 @@ export function useActionLinks({ resModel, reload }) {
                           [false, "form"],
                       ];
             }
-
             const action = {
                 name: target.getAttribute("title") || target.textContent.trim(),
                 type: "ir.actions.act_window",
                 res_model: data.model || resModel,
-                target: "current", // TODO: make customisable?
+                target: "current",
                 views,
                 domain: data.domain ? evaluateExpr(data.domain) : [],
             };
@@ -134,3 +134,28 @@ export function useActionLinks({ resModel, reload }) {
         }
     };
 }
+
+export function useBounceButton(containerRef, shouldBounce) {
+    let timeout;
+    const ui = useService("ui");
+    useEffect(
+        (containerEl) => {
+            if (!containerEl) {
+                return;
+            }
+            const handler = (ev) => {
+                const button = ui.activeElement.querySelector("[data-bounce-button]");
+                if (button && shouldBounce(ev.target)) {
+                    button.classList.add("o_catch_attention");
+                    browser.clearTimeout(timeout);
+                    timeout = browser.setTimeout(() => {
+                        button.classList.remove("o_catch_attention");
+                    }, 400);
+                }
+            };
+            containerEl.addEventListener("click", handler);
+            return () => containerEl.removeEventListener("click", handler);
+        },
+        () => [containerRef.el]
+    );
+}
diff --git a/addons/web/static/src/views/view_service.js b/addons/web/static/src/views/view_service.js
index 10f38d7f528..1e99837ba1e 100644
--- a/addons/web/static/src/views/view_service.js
+++ b/addons/web/static/src/views/view_service.js
@@ -44,7 +44,6 @@ import { generateLegacyLoadViewsResult } from "@web/legacy/legacy_load_views";
  */
 
 export const viewService = {
-    name: "view",
     dependencies: ["orm"],
     start(env, { orm }) {
         let cache = {};
@@ -61,10 +60,10 @@ export const viewService = {
          * fields of the corresponding model, and optionally the filters.
          *
          * @param {LoadViewsParams} params
-         * @param {LoadViewsOptions} options
+         * @param {LoadViewsOptions} [options={}]
          * @returns {Promise<ViewDescriptions>}
          */
-        async function loadViews(params, options) {
+        async function loadViews(params, options = {}) {
             const loadViewsOptions = {
                 action_id: options.actionId || false,
                 load_filters: options.loadIrFilters || false,
@@ -74,7 +73,9 @@ export const viewService = {
                 loadViewsOptions.mobile = true;
             }
             const { context, resModel, views } = params;
-            let filteredContext = Object.fromEntries(Object.entries(context || {}).filter((k,v) => !String(k).startsWith("default_")));
+            let filteredContext = Object.fromEntries(
+                Object.entries(context || {}).filter((k, v) => !String(k).startsWith("default_"))
+            );
             const key = JSON.stringify([resModel, views, filteredContext, loadViewsOptions]);
             if (!cache[key]) {
                 cache[key] = orm
@@ -89,8 +90,8 @@ export const viewService = {
                             views: {},
                         };
                         for (const viewType in views) {
-                            const { arch, toolbar, id, filters } = views[viewType];
-                            const viewDescription = { arch, id };
+                            const { arch, toolbar, id, filters, custom_view_id } = views[viewType];
+                            const viewDescription = { arch, id, custom_view_id };
                             if (toolbar) {
                                 viewDescription.actionMenus = toolbar;
                             }
diff --git a/addons/web/static/src/views/widgets/week_days/week_days.js b/addons/web/static/src/views/widgets/week_days/week_days.js
new file mode 100644
index 00000000000..609e287fbe5
--- /dev/null
+++ b/addons/web/static/src/views/widgets/week_days/week_days.js
@@ -0,0 +1,40 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { CheckBox } from "@web/core/checkbox/checkbox";
+import { localization } from "@web/core/l10n/localization";
+
+const { Component } = owl;
+
+const WEEKDAYS = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"];
+
+export class WeekDays extends Component {
+    get weekdays() {
+        return [
+            ...WEEKDAYS.slice(localization.weekStart % WEEKDAYS.length, WEEKDAYS.length),
+            ...WEEKDAYS.slice(0, localization.weekStart % WEEKDAYS.length),
+        ];
+    }
+    get data() {
+        return Object.fromEntries(this.weekdays.map((day) => [day, this.props.record.data[day]]));
+    }
+
+    onChange(day, checked) {
+        this.props.record.update({ [day]: checked });
+    }
+}
+
+WeekDays.template = "web.WeekDays";
+WeekDays.components = { CheckBox };
+
+WeekDays.fieldDependencies = {
+    sun: { type: "boolean" },
+    mon: { type: "boolean" },
+    tue: { type: "boolean" },
+    wed: { type: "boolean" },
+    thu: { type: "boolean" },
+    fri: { type: "boolean" },
+    sat: { type: "boolean" },
+};
+
+registry.category("view_widgets").add("week_days", WeekDays);
diff --git a/addons/web/static/src/views/widgets/week_days/week_days.xml b/addons/web/static/src/views/widgets/week_days/week_days.xml
new file mode 100644
index 00000000000..c9824dc29f6
--- /dev/null
+++ b/addons/web/static/src/views/widgets/week_days/week_days.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.WeekDays" owl="1">
+        <div class="o_recurrent_weekdays border mt-2 mb-2">
+            <table class="table table-responsive mb-0">
+                <tr>
+                    <t t-foreach="weekdays" t-as="day" t-key="day">
+                        <th class="text-center border font-weight-bold">
+                            <div class="o_recurrent_weekday_label" t-att-data-tooltip="props.record.fields[day].string">
+                                <t t-esc="props.record.fields[day].string" />
+                            </div>
+                        </th>
+                    </t>
+                </tr>
+                <tr>
+                    <t t-foreach="weekdays" t-as="day" t-key="day">
+                        <td>
+                            <CheckBox
+                                disabled="props.readonly"
+                                value="data[day]"
+                                className="'o_recurrent_weekday_checkbox text-center'"
+                                onChange="(checked) => this.onChange(day, checked)"
+                            />
+                        </td>
+                    </t>
+                </tr>
+            </table>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/widgets/widget.js b/addons/web/static/src/views/widgets/widget.js
new file mode 100644
index 00000000000..d7aa91a099c
--- /dev/null
+++ b/addons/web/static/src/views/widgets/widget.js
@@ -0,0 +1,45 @@
+/* @odoo-module */
+
+import { registry } from "@web/core/registry";
+import { decodeObjectForTemplate } from "@web/views/view_compiler";
+
+const { Component, xml } = owl;
+const viewWidgetRegistry = registry.category("view_widgets");
+
+function findWidgetComponent(name) {
+    return viewWidgetRegistry.get(name);
+}
+
+/**
+ * A Component that supports rendering `<widget />` tags in a view arch
+ * It should have minimum legacy support that is:
+ * - getting the legacy widget class from the legacy registry
+ * - instanciating a legacy widget
+ * - passing to it a "legacy node", which is a representation of the arch's node
+ * It supports instancing components from the "view_widgets" registry.
+ */
+export class Widget extends Component {
+    get Widget() {
+        return findWidgetComponent(this.props.name);
+    }
+
+    get widgetProps() {
+        const { record, node: rawNode, options, readonly } = this.props;
+        const node = rawNode ? decodeObjectForTemplate(rawNode) : {};
+        return { record, node, options: options || {}, readonly };
+    }
+}
+Widget.template = xml/*xml*/ `
+    <div class="o_widget" t-att-class="props.className" t-att-style="props.style">
+        <t t-component="Widget" t-props="widgetProps" />
+    </div>`;
+
+Widget.parseWidgetNode = function (node) {
+    const name = node.getAttribute("name");
+    const component = findWidgetComponent(name);
+    return {
+        name,
+        component,
+        fieldDependencies: { ...component.fieldDependencies },
+    };
+};
diff --git a/addons/web/static/src/webclient/actions/action_dialog.js b/addons/web/static/src/webclient/actions/action_dialog.js
index 3a4970cd78d..53b7ccabf07 100644
--- a/addons/web/static/src/webclient/actions/action_dialog.js
+++ b/addons/web/static/src/webclient/actions/action_dialog.js
@@ -21,9 +21,17 @@ class ActionDialog extends Dialog {
     setup() {
         super.setup();
         useOwnDebugContext();
-        const actionProps = this.props && this.props.actionProps;
-        const action = actionProps && actionProps.action;
-        this.actionType = action && action.type;
+        useEffect(
+            () => {
+                if (this.modalRef.el.querySelector(".modal-footer").childElementCount > 1) {
+                    const defaultButton = this.modalRef.el.querySelector(
+                        ".modal-footer button.o-default-button"
+                    );
+                    defaultButton.classList.add("d-none");
+                }
+            },
+            () => []
+        );
     }
 }
 ActionDialog.components = { ...Dialog.components, DebugMenu };
@@ -34,6 +42,7 @@ ActionDialog.props = {
     slots: { optional: true },
     ActionComponent: { optional: true },
     actionProps: { optional: true },
+    actionType: { optional: true },
     title: { optional: true },
 };
 
diff --git a/addons/web/static/src/webclient/actions/action_dialog.xml b/addons/web/static/src/webclient/actions/action_dialog.xml
index a3f70df271d..35aca379fe9 100644
--- a/addons/web/static/src/webclient/actions/action_dialog.xml
+++ b/addons/web/static/src/webclient/actions/action_dialog.xml
@@ -7,7 +7,7 @@
     </xpath>
     <xpath expr="//main[hasclass('modal-body')]" position="attributes">
       <attribute name="t-att-class">
-        {"o_act_window": actionType === "ir.actions.act_window"}
+        {"o_act_window": props.actionType === "ir.actions.act_window"}
       </attribute>
     </xpath>
     <xpath expr="//t[@t-slot='default']" position="replace">
@@ -19,7 +19,7 @@
     <xpath expr="//t[@t-slot='footer']" position="replace">
       <t t-if="!isLegacy">
         <t t-slot="buttons">
-          <button class="btn btn-primary" t-on-click="data.close">Ok</button>
+          <button class="btn btn-primary o-default-button" t-on-click="data.close">Ok</button>
         </t>
       </t>
     </xpath>
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index 459fb0b69d1..a66171235e1 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -10,7 +10,7 @@ import { KeepLast } from "@web/core/utils/concurrency";
 import { useBus, useService } from "@web/core/utils/hooks";
 import { sprintf } from "@web/core/utils/strings";
 import { cleanDomFromBootstrap } from "@web/legacy/utils";
-import { View } from "@web/views/view";
+import { View, ViewNotFoundError } from "@web/views/view";
 import { ActionDialog } from "./action_dialog";
 import { CallbackRecorder } from "./action_hook";
 
@@ -59,7 +59,6 @@ function parseActiveIds(ids) {
 // -----------------------------------------------------------------------------
 // Errors
 // -----------------------------------------------------------------------------
-export class ViewNotFoundError extends Error {}
 
 export class ControllerNotFoundError extends Error {}
 
@@ -381,7 +380,9 @@ function makeActionManager(env) {
                 currentController.action.type === "ir.actions.act_window" &&
                 currentActionId === state.action
             ) {
-                const props = { resId: state.id || false };
+                const props = {
+                    resId: state.id || false,
+                };
                 const viewType = state.view_type || currentController.view.type;
                 return { viewType, props };
             }
@@ -426,8 +427,26 @@ function makeActionManager(env) {
             loadIrFilters: action.views.some((v) => v[1] === "search"),
             resModel: action.res_model,
             type: view.type,
+            selectRecord: async (resId, { activeIds, mode }) => {
+                if (_getView("form")) {
+                    await switchView("form", { mode, resId, resIds: activeIds });
+                }
+            },
+            createRecord: async () => {
+                if (_getView("form")) {
+                    await switchView("form", { resId: false });
+                }
+            },
         });
 
+        if (view.type === "form" && action.target === "new") {
+            viewProps.mode = "edit";
+        }
+
+        if (action.flags && "mode" in action.flags && view.type === "form") {
+            viewProps.mode = action.flags.mode;
+        }
+
         if (target === "inline") {
             viewProps.searchMenuTypes = [];
         }
@@ -463,6 +482,8 @@ function makeActionManager(env) {
         }
         // END LEGACY CODE COMPATIBILITY
 
+        viewProps.noBreadcrumbs = action.context.no_breadcrumbs;
+        delete action.context.no_breadcrumbs;
         return {
             props: viewProps,
             config: {
@@ -544,11 +565,7 @@ function makeActionManager(env) {
         }
         const nextStack = controllerStack.slice(0, index).concat(controllerArray);
         // Compute breadcrumbs
-        if (action.target === "new") {
-            controller.config.breadcrumbs = _getBreadcrumbs([nextStack[nextStack.length - 1]]);
-        } else {
-            controller.config.breadcrumbs = _getBreadcrumbs(nextStack);
-        }
+        controller.config.breadcrumbs = action.target === "new" ? [] : _getBreadcrumbs(nextStack);
         controller.config.getDisplayName = () => controller.displayName;
         controller.config.setDisplayName = (displayName) => {
             controller.displayName = displayName;
@@ -655,7 +672,7 @@ function makeActionManager(env) {
                             if (c.action.type === "ir.actions.act_window") {
                                 for (const viewType in c.action.controllers) {
                                     const controller = c.action.controllers[viewType];
-                                    if (controller.Component.isLegacy) {
+                                    if (controller.view.isLegacy) {
                                         toDestroy.add(controller);
                                     }
                                 }
@@ -698,12 +715,13 @@ function makeActionManager(env) {
                 // TODO add size
                 ActionComponent: ControllerComponent,
                 actionProps: controller.props,
+                actionType: action.type,
             };
             if (action.name) {
                 actionDialogProps.title = action.name;
             }
 
-            let onClose = _removeDialog();
+            const onClose = _removeDialog();
             const removeDialog = env.services.dialog.add(ActionDialog, actionDialogProps, {
                 onClose: () => {
                     const onClose = _removeDialog();
@@ -800,13 +818,41 @@ function makeActionManager(env) {
      * @param {ActWindowAction} action
      * @param {ActionOptions} options
      */
-    function _executeActWindowAction(action, options) {
+    async function _executeActWindowAction(action, options) {
+        // LEGACY CODE COMPATIBILITY: load views to determine js_class if any, s.t.
+        // we know if the view to use is legacy or not
+        // When all views will be converted, this will be done exclusively by View
+        // #action-serv-leg-compat-js-class
+        const loadViewParams = {
+            context: action.context || {},
+            views: action.views,
+            resModel: action.res_model,
+        };
+        const loadViewOptions = {
+            actionId: action.id,
+            loadActionMenus: action.target !== "new" && action.target !== "inline",
+            loadIrFilters: action.views.some((v) => v[1] === "search"),
+        };
+        const prom = env.services.view.loadViews(loadViewParams, loadViewOptions);
+        const { views: viewDescriptions } = await keepLast.add(prom);
+        const domParser = new DOMParser();
         const views = [];
         for (const [, type] of action.views) {
-            if (viewRegistry.contains(type)) {
-                views.push(viewRegistry.get(type));
+            if (type !== "search") {
+                const arch = viewDescriptions[type].arch;
+                const archDoc = domParser.parseFromString(arch, "text/xml").documentElement;
+                const jsClass = archDoc.getAttribute("js_class");
+                const key = viewRegistry.contains(jsClass) ? jsClass : type;
+                views.push(viewRegistry.get(key));
             }
         }
+        // END LEGACY CODE COMPATIBILITY
+        // const views = [];
+        // for (const [, type] of action.views) {
+        //     if (type !== "search" && viewRegistry.contains(type)) {
+        //         views.push(viewRegistry.get(key));
+        //     }
+        // }
         if (!views.length) {
             throw new Error(`No view found for act_window action ${action.id}`);
         }
@@ -831,7 +877,7 @@ function makeActionManager(env) {
 
         const controller = {
             jsId: `controller_${++id}`,
-            Component: view.isLegacy ? view : View,
+            Component: view.isLegacy ? view.Controller : View,
             action,
             view,
             views,
@@ -848,7 +894,7 @@ function makeActionManager(env) {
         if (lazyView) {
             updateUIOptions.lazyController = {
                 jsId: `controller_${++id}`,
-                Component: lazyView.isLegacy ? lazyView : View,
+                Component: lazyView.isLegacy ? lazyView.Controller : View,
                 action,
                 view: lazyView,
                 views,
@@ -1146,7 +1192,7 @@ function makeActionManager(env) {
             case "ir.actions.server":
                 return _executeServerAction(action, options);
             default: {
-                let handler = actionHandlersRegistry.get(action.type, null);
+                const handler = actionHandlersRegistry.get(action.type, null);
                 if (handler !== null) {
                     return handler({ env, action, options });
                 }
@@ -1213,7 +1259,7 @@ function makeActionManager(env) {
         // filter out context keys that are specific to the current action, because:
         //  - wrong default_* and search_default_* values won't give the expected result
         //  - wrong group_by values will fail and forbid rendering of the destination view
-        let currentCtx = {};
+        const currentCtx = {};
         for (const key in params.context) {
             if (key.match(CTX_KEY_REGEX) === null) {
                 currentCtx[key] = params.context[key];
@@ -1266,7 +1312,7 @@ function makeActionManager(env) {
         }
         const newController = controller.action.controllers[viewType] || {
             jsId: `controller_${++id}`,
-            Component: view.isLegacy ? view : View,
+            Component: view.isLegacy ? view.Controller : View,
             action: controller.action,
             views: controller.views,
             view,
@@ -1389,7 +1435,7 @@ function makeActionManager(env) {
             const props = controller.props;
             newState.model = props.resModel;
             newState.view_type = props.type;
-            newState.id = props.resId || (props.state && props.state.currentId) || undefined;
+            newState.id = props.resId || (props.state && props.state.resId) || undefined;
         }
         env.services.router.pushState(newState, { replace: true });
     }
@@ -1400,7 +1446,7 @@ function makeActionManager(env) {
         restore,
         loadState,
         async loadAction(actionRequest, context) {
-            let action = await _loadAction(actionRequest, context);
+            const action = await _loadAction(actionRequest, context);
             return _preprocessAction(action, context);
         },
         get currentController() {
@@ -1420,6 +1466,7 @@ export const actionService = {
         "router",
         "rpc",
         "title",
+        "view", // for legacy view compatibility #action-serv-leg-compat-js-class
         "ui",
         "user",
     ],
diff --git a/addons/web/static/tests/core/dialog_service_tests.js b/addons/web/static/tests/core/dialog_service_tests.js
index 332ab848a44..f49dc18a261 100644
--- a/addons/web/static/tests/core/dialog_service_tests.js
+++ b/addons/web/static/tests/core/dialog_service_tests.js
@@ -243,7 +243,6 @@ QUnit.test("dialog component crashes", async (assert) => {
     serviceRegistry.add("rpc", rpc);
     serviceRegistry.add("notification", notificationService);
     serviceRegistry.add("error", errorService);
-    serviceRegistry.add("localization", makeFakeLocalizationService());
 
     await mount(PseudoWebClient, target, { env });
 
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index 47204fb7249..601abc719c8 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -54,6 +54,7 @@ function prepareRegistriesWithCleanup() {
     cloneRegistryWithCleanup(registry.category("fields"));
 
     cloneRegistryWithCleanup(registry.category("main_components"));
+    cloneRegistryWithCleanup(registry.category("fields"));
 
     // Clear registries
     clearRegistryWithCleanup(registry.category("command_categories"));
@@ -67,7 +68,9 @@ function prepareRegistriesWithCleanup() {
 
     clearRegistryWithCleanup(registry.category("systray"));
     clearRegistryWithCleanup(registry.category("user_menuitems"));
+    clearRegistryWithCleanup(registry.category("kanban_examples"));
     clearRegistryWithCleanup(registry.category("__processed_archs__"));
+    clearRegistryWithCleanup(registry.category("action_menus"));
     // fun fact: at least one registry is missing... this shows that we need a
     // better design for the way we clear these registries...
 }
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index e45ad33c34c..c68e273e7a1 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -94,7 +94,7 @@ export class MockServer {
     async performRPC(route, args) {
         args = JSON.parse(JSON.stringify(args));
         if (this.debug) {
-            console.log("%c[rpc] request " + route, "color: blue; font-weight: bold;", args);
+            console.log("%c[rpc] request " + route, "color: #66e; font-weight: bold;", args);
             args = JSON.parse(JSON.stringify(args));
         }
         let result;
@@ -115,7 +115,7 @@ export class MockServer {
         if (this.debug) {
             console.log(
                 "%c[rpc] response" + route,
-                "color: blue; font-weight: bold;",
+                "color: #66e; font-weight: bold;",
                 JSON.parse(resultString)
             );
         }
@@ -456,6 +456,8 @@ export class MockServer {
                 return this.mockLoadAction(args);
             case "/web/dataset/search_read":
                 return this.mockSearchReadController(args);
+            case "/web/dataset/resequence":
+                return this.mockResequence(args);
         }
         if (
             route.indexOf("/web/image") >= 0 ||
@@ -463,12 +465,19 @@ export class MockServer {
         ) {
             return;
         }
+
         switch (args.method) {
             case "render_public_asset": {
                 return true;
             }
+            case "action_archive":
+                return this.mockWrite(args.model, [args.args[0], { active: false }]);
+            case "action_unarchive":
+                return this.mockWrite(args.model, [args.args[0], { active: true }]);
+            case "copy":
+                return this.mockCopy(args.model, args.args[0]);
             case "create":
-                return this.mockCreate(args.model, args.args[0]);
+                return this.mockCreate(args.model, args.args[0], args.kwargs);
             case "fields_get":
                 return this.mockFieldsGet(args.model);
             case "get_views":
@@ -501,6 +510,8 @@ export class MockServer {
                 return this.mockReadGroup(args.model, args.kwargs);
             case "web_read_group":
                 return this.mockWebReadGroup(args.model, args.kwargs);
+            case "read_progress_bar":
+                return this.mockReadProgressBar(args.model, args.kwargs);
             case "write":
                 return this.mockWrite(args.model, args.args);
         }
@@ -512,7 +523,26 @@ export class MockServer {
         throw new Error(`Unimplemented route: ${route}`);
     }
 
-    mockCreate(modelName, values) {
+    /**
+     * Simulate a 'copy' operation, so we simply try to duplicate a record in
+     * memory
+     *
+     * @private
+     * @param {string} modelName
+     * @param {integer} id the ID of a valid record
+     * @returns {integer} the ID of the duplicated record
+     */
+    mockCopy(modelName, id) {
+        const model = this.models[modelName];
+        const newID = this.getUnusedID(modelName);
+        const originalRecord = model.records.find((record) => record.id === id);
+        const duplicatedRecord = { ...originalRecord, id: newID };
+        duplicatedRecord.display_name = `${originalRecord.display_name} (copy)`;
+        model.records.push(duplicatedRecord);
+        return newID;
+    }
+
+    mockCreate(modelName, values, kwargs = {}) {
         if ("id" in values) {
             throw new Error("Cannot create a record with a predefinite id");
         }
@@ -520,7 +550,7 @@ export class MockServer {
         const id = this.getUnusedID(modelName);
         const record = { id };
         model.records.push(record);
-        this.applyDefaults(model, values);
+        this.applyDefaults(model, values, kwargs.context);
         this.writeRecord(modelName, values, id);
         this.updateComodelRelationalFields(modelName, record);
         return id;
@@ -611,7 +641,7 @@ export class MockServer {
      * Simulate a 'name_create' operation
      *
      * @private
-     * @param {string} model
+     * @param {string} modelName
      * @param {string} name
      * @returns {Array} a couple [id, name]
      */
@@ -668,7 +698,7 @@ export class MockServer {
         const result = [];
         for (const r of records) {
             const isInDomain = this.evaluateDomain(domain, r);
-            if (isInDomain && (!str.length || r.display_name.includes(str))) {
+            if (isInDomain && (!str.length || (r.display_name && r.display_name.includes(str)))) {
                 result.push([r.id, r.display_name]);
             }
         }
@@ -1070,6 +1100,29 @@ export class MockServer {
         };
     }
 
+    mockReadProgressBar(modelName, kwargs) {
+        const { domain, group_by: groupBy, progress_bar: progressBar } = kwargs;
+        const records = this.getRecords(modelName, domain || []);
+
+        const data = {};
+        for (const record of records) {
+            const groupByValue = record[groupBy]; // always technical value here
+            if (!(groupByValue in data)) {
+                data[groupByValue] = {};
+                for (const key in progressBar.colors) {
+                    data[groupByValue][key] = 0;
+                }
+            }
+
+            const fieldValue = record[progressBar.field];
+            if (fieldValue in data[groupByValue]) {
+                data[groupByValue][fieldValue]++;
+            }
+        }
+
+        return data;
+    }
+
     /**
      * Simulates a call to the server '_search_panel_field_image' method.
      *
@@ -1685,6 +1738,19 @@ export class MockServer {
         };
     }
 
+    mockResequence(args) {
+        const offset = args.offset ? Number(args.offset) : 0;
+        const field = args.field || "sequence";
+        if (!(field in this.models[args.model].fields)) {
+            return false;
+        }
+        for (const index in args.ids) {
+            const record = this.models[args.model].records.find((r) => r.id === args.ids[index]);
+            record[field] = Number(index) + offset;
+        }
+        return true;
+    }
+
     mockWrite(modelName, args) {
         args[0].forEach((id) => {
             const [originalRecord] = this.mockSearchRead(modelName, [[["id", "=", id]]], {});
@@ -2049,14 +2115,16 @@ export class MockServer {
         );
     }
 
-    applyDefaults(model, record) {
+    applyDefaults(model, record, context = {}) {
         record.display_name = record.display_name || record.name;
         for (const fieldName in model.fields) {
             if (fieldName === "id") {
                 continue;
             }
             if (!(fieldName in record)) {
-                if ("default" in model.fields[fieldName]) {
+                if (`default_${fieldName}` in context) {
+                    record[fieldName] = context[`default_${fieldName}`];
+                } else if ("default" in model.fields[fieldName]) {
                     const def = model.fields[fieldName].default;
                     record[fieldName] = typeof def === "function" ? def.call(this) : def;
                 } else if (["one2many", "many2many"].includes(model.fields[fieldName].type)) {
@@ -2081,6 +2149,10 @@ export async function makeMockServer(serverData, mockRPC) {
     await mockServer.setup();
     const _mockRPC = async (route, args = {}) => {
         let res;
+        if (args.method !== "POST") {
+            // simulates that we serialized the call to be passed in a real request
+            args = JSON.parse(JSON.stringify(args));
+        }
         const performRPC = (route, args) => mockServer.performRPC(route, args);
         if (mockRPC) {
             res = await mockRPC(route, args, performRPC);
diff --git a/addons/web/static/tests/helpers/mock_services.js b/addons/web/static/tests/helpers/mock_services.js
index 06913a4c43f..6f4adbc0073 100644
--- a/addons/web/static/tests/helpers/mock_services.js
+++ b/addons/web/static/tests/helpers/mock_services.js
@@ -25,7 +25,7 @@ export const defaultLocalization = {
     dateTimeFormat: "MM/dd/yyyy HH:mm:ss",
     decimalPoint: ".",
     direction: "ltr",
-    grouping: [3, 0],
+    grouping: [],
     multiLang: false,
     thousandsSep: ",",
     weekStart: 7,
@@ -95,7 +95,9 @@ export function makeMockXHR(response, sendCb, def) {
                     if (typeof data === "string") {
                         try {
                             data = JSON.parse(data);
-                        } catch (_e) {}
+                        } catch (_e) {
+                            // Ignore
+                        }
                     }
                     try {
                         await sendCb.call(this, data);
diff --git a/addons/web/static/tests/helpers/utils.js b/addons/web/static/tests/helpers/utils.js
index 0abdc2ee4da..006629a1c3a 100644
--- a/addons/web/static/tests/helpers/utils.js
+++ b/addons/web/static/tests/helpers/utils.js
@@ -38,6 +38,7 @@ export function patchDate(year, month, day, hours, minutes, seconds) {
 
     var timeInterval = actualDate.getTime() - fakeDate.getTime();
 
+    // eslint-disable-next-line no-global-assign
     window.Date = (function (NativeDate) {
         function Date(Y, M, D, h, m, s, ms) {
             var length = arguments.length;
@@ -169,42 +170,59 @@ function findElement(el, selector) {
     return target;
 }
 
-const keyboardEventBubble = (args) =>
-    Object.assign({}, args, { bubbles: true, keyCode: args.which });
+function keyboardEventBubble(args) {
+    return Object.assign({}, args, { bubbles: true, keyCode: args.which });
+}
 
-const mouseEventMapping = (args) =>
-    Object.assign({}, args, {
+function mouseEventMapping(args) {
+    return {
+        clientX: args ? args.pageX : undefined,
+        clientY: args ? args.pageY : undefined,
+        ...args,
         bubbles: true,
         cancelable: true,
+        view: window,
+    };
+}
+
+function mouseEventNoBubble(args) {
+    return {
         clientX: args ? args.pageX : undefined,
         clientY: args ? args.pageY : undefined,
-        view: window,
-    });
-
-const mouseEventNoBubble = (args) =>
-    Object.assign({}, args, {
+        ...args,
         bubbles: false,
         cancelable: false,
-        clientX: args ? args.pageX : undefined,
-        clientY: args ? args.pageY : undefined,
         view: window,
-    });
+    };
+}
 
-const touchEventMapping = (args) => ({
-    ...args,
-    bubbles: true,
-    cancelable: true,
-    touches: args.touches ? [...args.touches.map((e) => new Touch(e))] : undefined,
-});
+function touchEventMapping(args) {
+    return {
+        ...args,
+        cancelable: true,
+        bubbles: true,
+        composed: true,
+        view: window,
+        rotation: 0.0,
+        zoom: 1.0,
+        touches: args.touches ? [...args.touches.map((e) => new Touch(e))] : undefined,
+    };
+}
 
-const touchEventCancelMapping = (args) => ({
-    ...touchEventMapping(args),
-    cancelable: false,
-});
+function touchEventCancelMapping(args) {
+    return {
+        ...touchEventMapping(args),
+        cancelable: false,
+    };
+}
 
-const noBubble = (args) => Object.assign({}, args, { bubbles: false });
+function noBubble(args) {
+    return Object.assign({}, args, { bubbles: false });
+}
 
-const onlyBubble = (args) => Object.assign({}, args, { bubbles: true });
+function onlyBubble(args) {
+    return Object.assign({}, args, { bubbles: true });
+}
 
 // TriggerEvent constructor/args processor mapping
 const EVENT_TYPES = {
@@ -249,7 +267,7 @@ if (typeof TouchEvent === "function") {
     });
 }
 
-export async function triggerEvent(el, selector, eventType, eventAttrs = {}) {
+function _makeEvent(eventType, eventAttrs) {
     let event;
     if (eventType in EVENT_TYPES) {
         const { constructor, processParameters } = EVENT_TYPES[eventType];
@@ -257,25 +275,39 @@ export async function triggerEvent(el, selector, eventType, eventAttrs = {}) {
     } else {
         event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
     }
+    return event;
+}
+
+export async function triggerEvent(el, selector, eventType, eventAttrs = {}, options = {}) {
+    const event = _makeEvent(eventType, eventAttrs);
     const target = findElement(el, selector);
     if (!target) {
         throw new Error(`Can't find a target to trigger ${eventType} event`);
     }
-    const isVisible =
-        target === document ||
-        target === window ||
-        target.offsetWidth > 0 ||
-        target.offsetHeight > 0;
-    if (!isVisible) {
-        throw new Error(`Called triggerEvent ${eventType} on invisible target`);
+    if (!options.skipVisibilityCheck) {
+        const isVisible =
+            target === document ||
+            target === window ||
+            target.offsetWidth > 0 ||
+            target.offsetHeight > 0;
+        if (!isVisible) {
+            throw new Error(`Called triggerEvent ${eventType} on invisible target`);
+        }
     }
     target.dispatchEvent(event);
-    await nextTick();
+    if (!options.fast) {
+        await nextTick();
+    }
+    return event;
 }
 
 export async function triggerEvents(el, querySelector, events) {
     for (let e = 0; e < events.length; e++) {
-        triggerEvent(el, querySelector, events[e]);
+        if (Array.isArray(events[e])) {
+            triggerEvent(el, querySelector, events[e][0], events[e][1]);
+        } else {
+            triggerEvent(el, querySelector, events[e]);
+        }
     }
     await nextTick();
 }
@@ -322,6 +354,7 @@ export async function triggerScroll(
         });
         target.scrollTo(scrollCoordinates);
         target.dispatchEvent(new UIEvent("scroll"));
+        await nextTick();
         if (!canPropagate || !Object.entries(coordinates).length) return;
     }
     target.parentElement
@@ -330,12 +363,94 @@ export async function triggerScroll(
     await nextTick();
 }
 
-export function click(el, selector) {
-    return triggerEvent(el, selector, "click", { bubbles: true, cancelable: true });
+export function click(el, selector, skipVisibilityCheck = false) {
+    return triggerEvent(
+        el,
+        selector,
+        "click",
+        { bubbles: true, cancelable: true },
+        { skipVisibilityCheck }
+    );
 }
 
-export async function mouseEnter(el, selector) {
-    return triggerEvent(el, selector, "mouseenter");
+export function clickCreate(htmlElement) {
+    if (htmlElement.querySelectorAll(".o_form_button_create").length) {
+        return click(htmlElement, ".o_form_button_create");
+    } else if (htmlElement.querySelectorAll(".o_list_button_create").length) {
+        return click(htmlElement, ".o_list_button_create");
+    } else {
+        throw new Error("No edit button found to be clicked.");
+    }
+}
+
+export function clickEdit(htmlElement) {
+    if (htmlElement.querySelectorAll(".o_form_button_edit").length) {
+        return click(htmlElement, ".o_form_button_edit");
+    } else if (htmlElement.querySelectorAll(".o_list_button_edit").length) {
+        return click(htmlElement, ".o_list_button_edit");
+    } else {
+        throw new Error("No edit button found to be clicked.");
+    }
+}
+
+export function clickSave(htmlElement) {
+    if (htmlElement.querySelectorAll(".o_form_button_save").length) {
+        return click(htmlElement, ".o_form_button_save");
+    } else if (htmlElement.querySelectorAll(".o_list_button_save").length) {
+        return click(htmlElement, ".o_list_button_save");
+    } else {
+        throw new Error("No save button found to be clicked.");
+    }
+}
+
+export function clickDiscard(htmlElement) {
+    if (htmlElement.querySelectorAll(".o_form_button_cancel").length) {
+        return click(htmlElement, ".o_form_button_cancel");
+    } else if (htmlElement.querySelectorAll(".o_list_button_discard").length) {
+        return click(htmlElement, ".o_list_button_discard");
+    } else {
+        throw new Error("No discard button found to be clicked.");
+    }
+}
+
+/**
+ * Triggers a mouseenter event on the given target. If no
+ * coordinates are given, the event is located by default
+ * in the middle of the target to simplify the test process
+ *
+ * @param {HTMLElement} el
+ * @param {string} selector
+ * @param {Object} coordinates position of the mouseenter event
+ */
+export async function mouseEnter(el, selector, coordinates) {
+    const target = el.querySelector(selector) || el;
+    const atPos = coordinates || {
+        clientX: target.getBoundingClientRect().left + target.getBoundingClientRect().width / 2,
+        clientY: target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2,
+    };
+    return triggerEvent(target, null, "mouseenter", atPos);
+}
+
+export async function editInput(el, selector, value) {
+    const input = findElement(el, selector);
+    if (
+        !["INPUT", "TEXTAREA"].includes(input.tagName) ||
+        !["text", "textarea", "email", "number", "search", "color"].includes(input.type)
+    ) {
+        throw new Error("Only inputs tag and textarea tag can be edited with editInput.");
+    }
+    input.value = value;
+    await triggerEvent(input, null, "input");
+    return triggerEvent(input, null, "change");
+}
+
+export function editSelect(el, selector, value) {
+    const select = findElement(el, selector);
+    if (select.tagName !== "SELECT") {
+        throw new Error("Only select tag can be edited with selectInput.");
+    }
+    select.value = value;
+    return triggerEvent(select, null, "change");
 }
 
 /**
@@ -468,7 +583,7 @@ export function destroy(comp) {
 }
 
 export function findChildren(comp, predicate = (e) => e) {
-    let queue = [];
+    const queue = [];
     [].unshift.apply(queue, Object.values(comp.__owl__.children));
 
     while (queue.length > 0) {
@@ -515,3 +630,162 @@ export function useLogLifeCycle(logFn, name = "") {
         });
     }
 }
+
+/**
+ * Returns the list of nodes containing n2 (included) that do not contain n1.
+ *
+ * @param {Node} n1
+ * @param {Node} n2
+ * @returns {Node[]}
+ */
+function getDifferentParents(n1, n2) {
+    const parents = [n2];
+    while (parents[0].parentNode) {
+        const parent = parents[0].parentNode;
+        if (parent.contains(n1)) {
+            break;
+        }
+        parents.unshift(parent);
+    }
+    return parents;
+}
+
+/**
+ * Helper performing a drag and drop sequence.
+ *
+ * - the 'fromSelector' is used to determine the element on which the drag will
+ *  start;
+ * - the 'toSelector' will determine the element on which the first one will be
+ * dropped.
+ *
+ * The first element will be dragged by its center, and will be dropped on the
+ * bottom-right inner pixel of the target element. This behavior covers both
+ * cases of appending the first element to the end of a list (toSelector =
+ * target list) or moving it at the position of another element, effectively
+ * placing the first element before the second (toSelector = other element).
+ *
+ * A position can be given to drop the first element above, below, or on the
+ * side of the second (default is inside, as specified above).
+ *
+ * Note that only the last event is awaited, since all the others are
+ * considered to be synchronous.
+ *
+ * @param {Element|string} from
+ * @param {Element|string} to
+ * @param {string} [position] "top" | "bottom" | "left" | "right"
+ * @returns {Promise<void>}
+ */
+export async function dragAndDrop(from, to, position) {
+    const fixture = getFixture();
+    from = from instanceof Element ? from : fixture.querySelector(from);
+    to = to instanceof Element ? to : fixture.querySelector(to);
+
+    // Mouse down on main target
+    const fromRect = from.getBoundingClientRect();
+    const toRect = to.getBoundingClientRect();
+    triggerEvent(from, null, "mousedown", {
+        clientX: fromRect.x + fromRect.width / 2,
+        clientY: fromRect.y + fromRect.height / 2,
+    });
+
+    // Find target position
+    const toPos = {
+        clientX: toRect.x + toRect.width / 2,
+        clientY: toRect.y + toRect.height / 2,
+    };
+    switch (position) {
+        case "top": {
+            toPos.clientY = toRect.y - 1;
+            break;
+        }
+        case "bottom": {
+            toPos.clientY = toRect.y + toRect.height + 1;
+            break;
+        }
+        case "left": {
+            toPos.clientX = toRect.x - 1;
+            break;
+        }
+        case "right": {
+            toPos.clientX = toRect.x + toRect.width + 1;
+            break;
+        }
+    }
+
+    // Move, enter and drop the element on the target
+    triggerEvent(window, null, "mousemove", toPos);
+    // "mouseenter" is fired on every parent of `to` that do not contain
+    // `from` (typically: different parent lists).
+    for (const target of getDifferentParents(from, to)) {
+        triggerEvent(target, null, "mouseenter", toPos);
+    }
+    await triggerEvent(from, null, "mouseup", toPos);
+}
+
+export async function clickDropdown(target, fieldName) {
+    const dropdownInput = target.querySelector(`[name='${fieldName}'] .dropdown input`);
+    dropdownInput.focus();
+    await click(dropdownInput);
+}
+
+export async function clickOpenedDropdownItem(target, fieldName, itemContent) {
+    const dropdownItems = target.querySelectorAll(`[name='${fieldName}'] .dropdown ul li`);
+    const indexToClick = Array.from(dropdownItems)
+        .map((html) => html.textContent)
+        .indexOf(itemContent);
+    if (indexToClick === -1) {
+        throw new Error(`The element '${itemContent}' does not exist in the dropdown`);
+    }
+    await click(dropdownItems[indexToClick], null, "click");
+}
+
+export async function selectDropdownItem(target, fieldName, itemContent) {
+    await clickDropdown(target, fieldName);
+    await clickOpenedDropdownItem(target, fieldName, itemContent);
+}
+
+export function getNodesTextContent(nodes) {
+    return Array.from(nodes).map((n) => n.textContent);
+}
+
+/**
+ * Click to open the dropdown on a many2one
+ */
+export async function clickOpenM2ODropdown(el, fieldName, selector) {
+    const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
+    const matches = el.querySelectorAll(m2oSelector);
+    if (matches.length !== 1) {
+        throw new Error(
+            `cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
+        );
+    }
+
+    await click(matches[0]);
+    return matches[0];
+}
+
+/**
+ * Click on the active (highlighted) selection in a m2o dropdown.
+ */
+// TO FIX
+export async function clickM2OHighlightedItem(el, fieldName, selector) {
+    const m2oSelector = `${selector || ""} .o_field_many2one[name=${fieldName}] input`;
+    // const $dropdown = $(m2oSelector).autocomplete('widget');
+    const matches = el.querySelectorAll(m2oSelector);
+    if (matches.length !== 1) {
+        throw new Error(
+            `cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`
+        );
+    }
+    // clicking on an li (no matter which one), will select the focussed one
+    return click(matches[0].parentElement.querySelector("li"));
+}
+
+// X2Many
+export async function addRow(target, selector) {
+    await click(target.querySelector(`${selector ? selector : ""} .o_field_x2many_list_row_add a`));
+}
+
+export async function removeRow(target, index) {
+    await click(target.querySelectorAll(".o_list_record_remove")[index]);
+}
diff --git a/addons/web/static/tests/legacy/components/pager_tests.js b/addons/web/static/tests/legacy/components/pager_tests.js
index 6d852e21a80..16344684fd4 100644
--- a/addons/web/static/tests/legacy/components/pager_tests.js
+++ b/addons/web/static/tests/legacy/components/pager_tests.js
@@ -23,7 +23,7 @@ odoo.define('web.pager_tests', function (require) {
 
     QUnit.module('Components', {}, function () {
 
-        QUnit.module('Pager');
+        QUnit.module('Legacy Pager');
 
         QUnit.test('basic interactions', async function (assert) {
             assert.expect(2);
diff --git a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
index 5c67f6fe56c..6d3449ae958 100644
--- a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
@@ -5,16 +5,27 @@ import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
 import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 import { Model } from "web.Model";
 import Registry from "web.Registry";
+import FormView from 'web.FormView';
+import ListView from 'web.ListView';
+import KanbanView from 'web.KanbanView';
 import SearchBar from "web.SearchBar";
 import { registry } from "@web/core/registry";
 import * as cpHelpers from "@web/../tests/search/helpers";
 import { getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { browser } from "@web/core/browser/browser";
+import legacyViewRegistry from 'web.view_registry';
 
 let serverData;
 let target;
 QUnit.module("Search Bar (legacy)", (hooks) => {
     hooks.beforeEach(() => {
+        registry.category("views").remove("list"); // remove new list from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
         serverData = {
             models: {
                 partner: {
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index 052fc338ad0..9d40d2a1bce 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -2,9 +2,12 @@ odoo.define('web.owl_dialog_tests', function (require) {
     "use strict";
 
     const LegacyDialog = require('web.Dialog');
+    const FormView = require('web.FormView');
     const makeTestEnvironment = require('web.test_env');
     const Dialog = require('web.OwlDialog');
     const testUtils = require('web.test_utils');
+    const { registry } = require("@web/core/registry");
+    const legacyViewRegistry = require('web.view_registry');
 
     const { makeLegacyDialogMappingTestEnv } = require('@web/../tests/helpers/legacy_env_utils');
     const { Dialog: WowlDialog } = require("@web/core/dialog/dialog");
@@ -330,11 +333,11 @@ odoo.define('web.owl_dialog_tests', function (require) {
 
             assert.verifySteps([]);
             assert.containsN(document.body, ".modal", 3);
-            await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
+            await testUtils.dom.triggerEvent(document.activeElement, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_3_closed']);
-            await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
+            await testUtils.dom.triggerEvent(document.activeElement, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_2_closed']);
-            await testUtils.dom.triggerEvent(window, 'keydown', EscapeKey); // Press Escape
+            await testUtils.dom.triggerEvent(document.activeElement, 'keydown', EscapeKey); // Press Escape
             assert.verifySteps(['dialog_1_closed']);
             await nextTick();
             assert.containsNone(document.body, ".modal");
@@ -415,6 +418,9 @@ odoo.define('web.owl_dialog_tests', function (require) {
         });
 
         QUnit.test("remove tabindex on inactive dialog", async (assert) => {
+            registry.category("views").remove("form"); // remove new form from registry
+            legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
             const serverData = {
                 actions: {
                     1: {
diff --git a/addons/web/static/tests/legacy/fields/basic_fields_tests.js b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
index 44a67549160..c415136fb5c 100644
--- a/addons/web/static/tests/legacy/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/basic_fields_tests.js
@@ -13,6 +13,7 @@ var session = require('web.session');
 var testUtils = require('web.test_utils');
 var testUtilsDom = require('web.test_utils_dom');
 var field_registry = require('web.field_registry');
+const legacyViewRegistry = require('web.view_registry');
 const  makeTestEnvironment = require("web.test_env");
 const { makeLegacyCommandService } = require("@web/legacy/utils");
 const { registry } = require("@web/core/registry");
@@ -34,10 +35,17 @@ const EN_FLAG_URL = '/base/static/img/country_flags/gb.png';
 
 let target;
 
-QUnit.module('fields', {}, function () {
+QUnit.module('Legacy fields', {}, function () {
 
-QUnit.module('basic_fields', {
+QUnit.module('Legacy basic_fields', {
     beforeEach: function () {
+        registry.category("views").remove("list"); // remove new list from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
         this.data = {
             partner: {
                 fields: {
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
index 856024cec01..d25808c3e55 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_many2many_tests.js
@@ -7,9 +7,9 @@ var testUtils = require('web.test_utils');
 const cpHelpers = require('@web/../tests/search/helpers');
 var createView = testUtils.createView;
 
-QUnit.module('fields', {}, function () {
+QUnit.module('Legacy fields', {}, function () {
 
-    QUnit.module('relational_fields', {
+    QUnit.module('Legacy relational_fields', {
         beforeEach: function () {
             this.data = {
                 partner: {
@@ -115,7 +115,7 @@ QUnit.module('fields', {}, function () {
             };
         },
     }, function () {
-        QUnit.module('FieldMany2Many');
+        QUnit.module('Legacy FieldMany2Many');
 
         QUnit.test('many2many kanban: edition', async function (assert) {
             assert.expect(33);
@@ -184,7 +184,7 @@ QUnit.module('fields', {}, function () {
                 event.data.callback({ user_context: {} });
             });
 
-            assert.ok(!form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(!form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should not be visible in readonly');
             assert.ok(!form.$('.o_field_many2many .o-kanban-button-new').length,
                 '"Add" button should not be visible in readonly');
@@ -195,7 +195,7 @@ QUnit.module('fields', {}, function () {
                 'should contain 2 records');
             assert.strictEqual(form.$('.o_kanban_record:first() span').text(), 'gold',
                 'display_name of subrecord should be the one in DB');
-            assert.ok(form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should be visible in edit');
             assert.ok(form.$('.o_field_many2many .o-kanban-button-new').length,
                 '"Add" button should be visible in edit');
@@ -342,7 +342,7 @@ QUnit.module('fields', {}, function () {
 
             assert.ok(form.$('.o-kanban-button-new').length,
                 '"Add" button should be available in edit');
-            assert.ok(form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should be visible in edit');
 
             await testUtils.dom.click(form.$('.o-kanban-button-new'));
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
index 8aebca573b2..9a86273f1c5 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_many2one_tests.js
@@ -8,6 +8,8 @@ var relationalFields = require('web.relational_fields');
 var StandaloneFieldManagerMixin = require('web.StandaloneFieldManagerMixin');
 var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
+const legacyViewRegistry = require("web.view_registry");
+const { registry } = require("@web/core/registry");
 
 const { triggerScroll } = require("@web/../tests/helpers/utils");
 const { legacyExtraNextTick } = require("@web/../tests/helpers/utils");
@@ -17,9 +19,9 @@ const { patchWithCleanup, getFixture } = require('@web/../tests/helpers/utils');
 const cpHelpers = require('@web/../tests/search/helpers');
 var createView = testUtils.createView;
 
-QUnit.module('fields', {}, function () {
+QUnit.module('Legacy fields', {}, function () {
 
-    QUnit.module('relational_fields', {
+    QUnit.module('Legacy relational_fields', {
         beforeEach: function () {
             this.data = {
                 partner: {
@@ -158,7 +160,7 @@ QUnit.module('fields', {}, function () {
             };
         },
     }, function () {
-        QUnit.module('FieldMany2One');
+        QUnit.module('Legacy FieldMany2One');
 
         QUnit.test('many2ones in form views', async function (assert) {
             assert.expect(5);
@@ -3726,6 +3728,9 @@ QUnit.module('fields', {}, function () {
         QUnit.test('many2one links form view call', async function (assert) {
             assert.expect(5);
 
+            registry.category("views").remove("form"); // remove new form from registry
+            legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
             let serverData = {};
             serverData.models = this.data;
             serverData.models['turtle'].records[1].product_id = 37;
diff --git a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
index 06593a76727..ef29ffd8ff0 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields/field_one2many_tests.js
@@ -25,9 +25,9 @@ const fieldRegistryOwl = require('web.field_registry_owl');
 
 const { onMounted, onWillUnmount, xml } = owl;
 
-QUnit.module('fields', {}, function () {
+QUnit.module('Legacy fields', {}, function () {
 
-    QUnit.module('relational_fields', {
+    QUnit.module('Legacy relational_fields', {
         beforeEach: function () {
             this.data = {
                 partner: {
@@ -171,7 +171,7 @@ QUnit.module('fields', {}, function () {
             };
         },
     }, function () {
-        QUnit.module('FieldOne2Many');
+        QUnit.module('Legacy FieldOne2Many');
 
         QUnit.test('New record with a o2m also with 2 new records, ordered, and resequenced', async function (assert) {
             assert.expect(2);
@@ -2431,7 +2431,7 @@ QUnit.module('fields', {}, function () {
                 },
             });
 
-            assert.ok(!form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(!form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should not be visible in readonly');
             assert.ok(!form.$('.o_field_one2many .o-kanban-button-new').length,
                 '"Create" button should not be visible in readonly');
@@ -2444,7 +2444,7 @@ QUnit.module('fields', {}, function () {
                 'display_name of subrecord should be the one in DB');
             assert.strictEqual(form.$('.o_kanban_record span:nth(1)').text(), 'Red',
                 'color of subrecord should be the one in DB');
-            assert.ok(form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should be visible in edit');
             assert.ok(form.$('.o_field_one2many .o-kanban-button-new').length,
                 '"Create" button should be visible in edit');
@@ -2487,8 +2487,8 @@ QUnit.module('fields', {}, function () {
             assert.containsNone($('.o_modal'), "modal should have been closed");
             assert.strictEqual(form.$('.o_kanban_record:not(.o_kanban_ghost)').length, 3,
                 'should contain 3 records');
-            await testUtils.dom.click(form.$('.o_kanban_view .delete_icon:first()'));
-            await testUtils.dom.click(form.$('.o_kanban_view .delete_icon:first()'));
+            await testUtils.dom.click(form.$('.o_legacy_kanban_view .delete_icon:first()'));
+            await testUtils.dom.click(form.$('.o_legacy_kanban_view .delete_icon:first()'));
             assert.strictEqual(form.$('.o_kanban_record:not(.o_kanban_ghost)').length, 1,
                 'should contain 1 records');
             assert.strictEqual(form.$('.o_kanban_record span:first').text(), 'new subrecord 3',
@@ -2563,7 +2563,7 @@ QUnit.module('fields', {}, function () {
 
             assert.ok(!form.$('.o-kanban-button-new').length,
                 '"Add" button should not be available in edit');
-            assert.ok(form.$('.o_kanban_view .delete_icon').length,
+            assert.ok(form.$('.o_legacy_kanban_view .delete_icon').length,
                 'delete icon should be visible in edit');
             form.destroy();
         });
@@ -5759,9 +5759,9 @@ QUnit.module('fields', {}, function () {
                 res_id: 4,
             });
 
-            assert.containsOnce(form, '.o_field_widget .o_kanban_view',
+            assert.containsOnce(form, '.o_field_widget .o_legacy_kanban_view',
                 "should have one inner kanban view for the one2many field");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 0,
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 0,
                 "should not have kanban records yet");
 
             // // switch to edit mode and create a new kanban record
@@ -5773,24 +5773,24 @@ QUnit.module('fields', {}, function () {
                 "should already have the default value for field foo");
             await testUtils.dom.click($('.modal-content .btn-primary').first());
 
-            assert.containsOnce(form, '.o_field_widget .o_kanban_view',
+            assert.containsOnce(form, '.o_field_widget .o_legacy_kanban_view',
                 "should have one inner kanban view for the one2many field");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 1,
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 1,
                 "should now have one kanban record");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_id').text(),
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_id').text(),
                 '', "should not have a value for the id field");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_foo').text(),
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_foo').text(),
                 'My little Foo Value', "should have a value for the foo field");
 
             // save the view to force a create of the new record in the one2many
             await testUtils.form.clickSave(form);
-            assert.containsOnce(form, '.o_field_widget .o_kanban_view',
+            assert.containsOnce(form, '.o_field_widget .o_legacy_kanban_view',
                 "should have one inner kanban view for the one2many field");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 1,
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)').length, 1,
                 "should now have one kanban record");
-            assert.notEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_id').text(),
+            assert.notEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_id').text(),
                 '', "should now have a value for the id field");
-            assert.strictEqual(form.$('.o_field_widget .o_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_foo').text(),
+            assert.strictEqual(form.$('.o_field_widget .o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost) .o_test_foo').text(),
                 'My little Foo Value', "should still have a value for the foo field");
 
             form.destroy();
@@ -5848,7 +5848,7 @@ QUnit.module('fields', {}, function () {
             });
 
             // 1. Define all css selector
-            var oKanbanView = '.o_field_widget .o_kanban_view';
+            var oKanbanView = '.o_field_widget .o_legacy_kanban_view';
             var oKanbanRecordActive = oKanbanView + ' .o_kanban_record:not(.o_kanban_ghost)';
             var oAllKanbanButton = oKanbanRecordActive + ' button[data-type="object"]';
             var btn1 = oKanbanRecordActive + ':nth-child(1) button[data-type="object"]';
@@ -6124,7 +6124,7 @@ QUnit.module('fields', {}, function () {
                 res_id: 1,
             });
 
-            assert.containsOnce(form, '.o_field_one2many .o_kanban_view',
+            assert.containsOnce(form, '.o_field_one2many .o_legacy_kanban_view',
                 "should have rendered a kanban view");
 
             form.destroy();
@@ -8497,8 +8497,6 @@ QUnit.module('fields', {}, function () {
         });
 
         QUnit.test('one2many with onchange, required field, shortcut enter', async function (assert) {
-            assert.expect(5);
-
             this.data.turtle.onchanges = {
                 turtle_foo: function () { },
             };
@@ -8517,6 +8515,7 @@ QUnit.module('fields', {}, function () {
                     '</form>',
                 mockRPC: function (route, args) {
                     var result = this._super.apply(this, arguments);
+                    assert.step(args.method);
                     if (args.method === 'onchange') {
                         return Promise.resolve(prom).then(_.constant(result));
                     }
@@ -8537,14 +8536,18 @@ QUnit.module('fields', {}, function () {
 
             // write something in the field
             var $input = form.$('input[name="turtle_foo"]');
-            await testUtils.fields.editInput($input, value);
-            await testUtils.fields.triggerKeydown($input, 'enter');
+            $input[0].value = value;
+            await testUtils.dom.triggerEvent($input, "input");
+            testUtils.fields.triggerKeydown($input, 'enter');
+            await testUtils.dom.triggerEvent($input, "change");
 
             // check that nothing changed before the onchange finished
             assert.strictEqual($input.val(), value, "input content shouldn't change");
             assert.containsOnce(form, '.o_data_row',
                 "should still contain only one row");
 
+            assert.verifySteps(["onchange", "onchange", "onchange"]);
+
             // unlock onchange
             prom.resolve();
             await testUtils.nextTick();
@@ -8555,6 +8558,8 @@ QUnit.module('fields', {}, function () {
             assert.containsN(form, '.o_data_row', 2,
                 "should now contain two rows");
 
+            assert.verifySteps(["onchange"]);
+
             form.destroy();
         });
 
@@ -8982,14 +8987,14 @@ QUnit.module('fields', {}, function () {
             });
 
             assert.strictEqual(form.$('.o_kanban_record:not(.o_kanban_ghost)').text(), 'yopblipkawa');
-            assert.doesNotHaveClass(form.$('.o_field_one2many .o_kanban_view'), 'ui-sortable');
+            assert.doesNotHaveClass(form.$('.o_field_one2many .o_legacy_kanban_view'), 'ui-sortable');
 
             await testUtils.form.clickEdit(form);
 
-            assert.hasClass(form.$('.o_field_one2many .o_kanban_view'), 'ui-sortable');
+            assert.hasClass(form.$('.o_field_one2many .o_legacy_kanban_view'), 'ui-sortable');
 
-            var $record = form.$('.o_field_one2many[name=turtles] .o_kanban_view .o_kanban_record:first');
-            var $to = form.$('.o_field_one2many[name=turtles] .o_kanban_view .o_kanban_record:nth-child(3)');
+            var $record = form.$('.o_field_one2many[name=turtles] .o_legacy_kanban_view .o_kanban_record:first');
+            var $to = form.$('.o_field_one2many[name=turtles] .o_legacy_kanban_view .o_kanban_record:nth-child(3)');
             await testUtils.dom.dragAndDrop($record, $to, {position: "bottom"});
 
             assert.strictEqual(form.$('.o_kanban_record:not(.o_kanban_ghost)').text(), 'blipkawayop');
@@ -10057,7 +10062,6 @@ QUnit.module('fields', {}, function () {
             const form = await createView({
                 View: FormView,
                 model: 'partner',
-                debug: 1,
                 data: this.data,
                 arch: `<form>
                         <field name="p">
diff --git a/addons/web/static/tests/legacy/fields/relational_fields_tests.js b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
index c2da4a2dec1..0a1f76cca4c 100644
--- a/addons/web/static/tests/legacy/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/legacy/fields/relational_fields_tests.js
@@ -20,9 +20,9 @@ const { makeLegacyDialogMappingTestEnv } = require('@web/../tests/helpers/legacy
 const cpHelpers = require('@web/../tests/search/helpers');
 var createView = testUtils.createView;
 
-QUnit.module('fields', {}, function () {
+QUnit.module('Legacy fields', {}, function () {
 
-QUnit.module('relational_fields', {
+QUnit.module('Legacy relational_fields', {
     beforeEach: function () {
         this.data = {
             partner: {
@@ -1025,7 +1025,7 @@ QUnit.module('relational_fields', {
     });
 
     // TODO: Once the code base is converted with wowl, replace webclient by formview.
-    QUnit.test('statusbar edited by the smart action "Move to stage..."', async function (assert) {
+    QUnit.skip('statusbar edited by the smart action "Move to stage..."', async function (assert) {
         assert.expect(3);
 
         const legacyEnv = makeTestEnvironment({ bus: core.bus });
@@ -4108,14 +4108,14 @@ QUnit.module('relational_fields', {
 
         await testUtils.fields.editInput(form.$('.o_field_many2one input'), 'ABC');
         // click create and edit
-        await testUtils.dom.click($('.ui-autocomplete .ui-menu-item a:contains(Create and)').trigger('mouseenter'));
+        testUtils.dom.click($('.ui-autocomplete .ui-menu-item a:contains(Create and)').trigger('mouseenter'));
 
         // hit escape immediately
         var escapeKey = $.ui.keyCode.ESCAPE;
         $(document.activeElement).trigger(
             $.Event('keydown', {which: escapeKey, keyCode: escapeKey}));
 
-        assert.ok('did not crash');
+        assert.containsNone(document.body, ".modal");
         relationalFields.FieldMany2One.prototype.AUTOCOMPLETE_DELAY = M2O_DELAY;
         form.destroy();
     });
diff --git a/addons/web/static/tests/legacy/legacy_setup.js b/addons/web/static/tests/legacy/legacy_setup.js
index b70699e240d..cb32fcb0ac9 100644
--- a/addons/web/static/tests/legacy/legacy_setup.js
+++ b/addons/web/static/tests/legacy/legacy_setup.js
@@ -1,5 +1,14 @@
 /** @odoo-module alias=web.legacySetup **/
+import { registry } from "@web/core/registry";
+import legacyViewRegistry from "web.view_registry";
 
 // in tests, there's nothing to setup globally (we don't want to deploy services),
 // but this module must exist has it is required by other modules
 export const legacySetupProm = Promise.resolve();
+
+export function useLegacyViews(views = ["list", "form"]) {
+  for (const vname of views) {
+    registry.category("views").remove(vname); // remove new view from registry
+    legacyViewRegistry.add(vname, legacyViewRegistry.get(vname)); // add legacy view -> will be wrapped and added to new registry
+  }
+}
diff --git a/addons/web/static/tests/legacy/owl_compatibility_tests.js b/addons/web/static/tests/legacy/owl_compatibility_tests.js
index c6355e1b133..3ebbdbfc524 100644
--- a/addons/web/static/tests/legacy/owl_compatibility_tests.js
+++ b/addons/web/static/tests/legacy/owl_compatibility_tests.js
@@ -1128,7 +1128,7 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
         });
 
         QUnit.test("lifecycle mount in fragment", async function (assert) {
-            assert.expect(18);
+            assert.expect(17);
 
             class MyChildComponent extends LegacyComponent {
                 setup() {
@@ -1145,8 +1145,8 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
             MyComponent.components = { MyChildComponent };
             const MyWidget = WidgetAdapter.extend({
                 start() {
-                    this.component = new ComponentWrapper(this, MyComponent, {});
-                    return this.component.mount(this.el);
+                    let component = new ComponentWrapper(this, MyComponent, {});
+                    return component.mount(this.el);
                 }
             });
 
@@ -1165,9 +1165,6 @@ odoo.define('web.OwlCompatibilityTests', function (require) {
                 "onRendered MyChildComponent",
             ]);
 
-            await widget.component.update({});
-            assert.verifySteps([]); // Out of DOM: shouldn't do anything.
-
             widget.$el.appendTo(target);
             widget.on_attach_callback();
             assert.verifySteps([
diff --git a/addons/web/static/tests/legacy/views/abstract_controller_tests.js b/addons/web/static/tests/legacy/views/abstract_controller_tests.js
index d695b32e3c0..f52f4db6855 100644
--- a/addons/web/static/tests/legacy/views/abstract_controller_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_controller_tests.js
@@ -43,7 +43,7 @@ function getHtmlView(html, viewType) {
     });
 }
 
-QUnit.module("Views", {
+QUnit.module("LegacyViews", {
     beforeEach: function () {
         this.data = {
             test_model: {
diff --git a/addons/web/static/tests/legacy/views/abstract_model_tests.js b/addons/web/static/tests/legacy/views/abstract_model_tests.js
index 544a908b063..0075b0330b1 100644
--- a/addons/web/static/tests/legacy/views/abstract_model_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_model_tests.js
@@ -4,7 +4,7 @@ odoo.define('web.abstract_model_tests', function (require) {
     const AbstractModel = require('web.AbstractModel');
     const Domain = require('web.Domain');
 
-    QUnit.module('Views', {}, function () {
+    QUnit.module('LegacyViews', {}, function () {
         QUnit.module('AbstractModel');
 
         QUnit.test('leave sample mode when unknown route is called on sample server', async function (assert) {
diff --git a/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js b/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
index e5aa14faccc..ee3e890cbdf 100644
--- a/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_view_banner_tests.js
@@ -23,7 +23,7 @@ var TestView = AbstractView.extend({
 
 var test_css_url = '/test_assetsbundle/static/src/css/test_cssfile1.css';
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
         beforeEach: function () {
             this.data = {
                 test_model: {
diff --git a/addons/web/static/tests/legacy/views/abstract_view_tests.js b/addons/web/static/tests/legacy/views/abstract_view_tests.js
index a94a99d96e1..4a5bc84cd35 100644
--- a/addons/web/static/tests/legacy/views/abstract_view_tests.js
+++ b/addons/web/static/tests/legacy/views/abstract_view_tests.js
@@ -4,11 +4,14 @@ odoo.define('web.abstract_view_tests', function (require) {
 var AbstractView = require('web.AbstractView');
 var ajax = require('web.ajax');
 var testUtils = require('web.test_utils');
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
+var ListView = require('web.ListView');
 
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 var createView = testUtils.createView;
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         this.data = {
             fake_model: {
@@ -117,6 +120,9 @@ QUnit.module('Views', {
     QUnit.test('group_by from context can be a string, instead of a list of strings', async function (assert) {
         assert.expect(1);
 
+        registry.category("views").remove("list"); // remove new list from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+
         const serverData = {
             actions: {
                 1: {
diff --git a/addons/web/static/tests/legacy/views/basic_model_tests.js b/addons/web/static/tests/legacy/views/basic_model_tests.js
index 6678c47f7af..0dbc6a5a3db 100644
--- a/addons/web/static/tests/legacy/views/basic_model_tests.js
+++ b/addons/web/static/tests/legacy/views/basic_model_tests.js
@@ -9,7 +9,7 @@ odoo.define('web.basic_model_tests', function (require) {
     var createModel = testUtils.createModel;
     var createView = testUtils.createView;
 
-    QUnit.module('Views', {
+    QUnit.module('LegacyViews', {
         beforeEach: function () {
             this.data = {
                 partner: {
@@ -106,7 +106,7 @@ odoo.define('web.basic_model_tests', function (require) {
                 groupedBy: ['product_id'],
                 fieldNames: ['foo'],
             });
-    
+
             model.load(params)
                 .then(function (stateID) {
                     return model.resequence('product', [41, 37], stateID);
diff --git a/addons/web/static/tests/legacy/views/basic_view_tests.js b/addons/web/static/tests/legacy/views/basic_view_tests.js
index f8ef97e92e7..f9353c85665 100644
--- a/addons/web/static/tests/legacy/views/basic_view_tests.js
+++ b/addons/web/static/tests/legacy/views/basic_view_tests.js
@@ -11,7 +11,7 @@ odoo.define('web.basic_view_tests', function (require) {
 
     const createView = testUtils.createView;
 
-    QUnit.module('Views', {
+    QUnit.module('LegacyViews', {
         beforeEach: function () {
             this.data = {
                 fake_model: {
diff --git a/addons/web/static/tests/legacy/views/calendar_tests.js b/addons/web/static/tests/legacy/views/calendar_tests.js
index 6a95cc5a72d..bdaff1fda07 100644
--- a/addons/web/static/tests/legacy/views/calendar_tests.js
+++ b/addons/web/static/tests/legacy/views/calendar_tests.js
@@ -40,7 +40,7 @@ function _preventScroll(ev) {
     ev.stopImmediatePropagation();
 }
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         window.addEventListener('scroll', _preventScroll, true);
         patchWithCleanup(session, {
@@ -139,7 +139,7 @@ QUnit.module('Views', {
     },
 }, function () {
 
-    QUnit.module('CalendarView');
+    QUnit.module('CalendarView (legacy)');
 
     var archs = {
         "event,false,form":
@@ -4170,7 +4170,7 @@ QUnit.module('Views', {
         calendar.destroy();
         delete fieldRegistry.map.deferred_widget;
     });
- 
+
     QUnit.test('select events and discard create', async function (assert) {
         assert.expect(4);
 
@@ -4208,7 +4208,7 @@ QUnit.module('Views', {
 
         calendar.destroy();
     });
- 
+
     QUnit.test("popover ignores readonly field modifier", async function (assert) {
         assert.expect(1);
 
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index a99b195c061..058c7b18a2a 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -11,6 +11,8 @@ const fieldRegistryOwl = require('web.field_registry_owl');
 const { FieldBoolean } = require("web.basic_fields_owl");
 const FormRenderer = require('web.FormRenderer');
 var FormView = require('web.FormView');
+var ListView = require('web.ListView');
+var KanbanView = require('web.KanbanView');
 var mixins = require('web.mixins');
 var pyUtils = require('web.py_utils');
 var RamStorage = require('web.RamStorage');
@@ -19,6 +21,8 @@ var ViewDialogs = require('web.view_dialogs');
 var widgetRegistry = require('web.widget_registry');
 const widgetRegistryOwl = require('web.widgetRegistry');
 var Widget = require('web.Widget');
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
 
 var _t = core._t;
 var createView = testUtils.createView;
@@ -28,7 +32,6 @@ const { createWebClient, doAction } = require('@web/../tests/webclient/helpers')
 const { makeTestEnv } = require("@web/../tests/helpers/mock_env");
 const makeTestEnvironment = require("web.test_env");
 const { mapLegacyEnvToWowlEnv } = require("@web/legacy/utils");
-const { registry } = require("@web/core/registry");
 const { scrollerService } = require("@web/core/scroller_service");
 const { LegacyComponent } = require("@web/legacy/legacy_component");
 
@@ -36,11 +39,18 @@ const { onMounted, onWillUnmount, xml } = owl;
 
 let serverData;
 let target;
-QUnit.module('Views', {
-    beforeEach: async function () {
+QUnit.module('LegacyViews', {
+    beforeEach: function () {
+        target = getFixture();
+
         registry.category("services").add("scroller", scrollerService);
 
-        target = getFixture();
+        registry.category("views").remove("list"); // remove new list from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
 
         this.data = {
             partner: {
@@ -180,7 +190,7 @@ QUnit.module('Views', {
     },
 }, function () {
 
-    QUnit.module('FormView');
+    QUnit.module('FormView (legacy)');
 
     QUnit.test('simple form rendering', async function (assert) {
         assert.expect(12);
@@ -1057,7 +1067,7 @@ QUnit.module('Views', {
                             <notebook>
                                 <page string="Non scrollable page">
                                     <div id="anchor1">No scrollbar!</div>
-                                    <a href="#anchor2" class="link2">TO ANCHOR 2</a> 
+                                    <a href="#anchor2" class="link2">TO ANCHOR 2</a>
                                 </page>
                                 <page string="Other scrollable page">
                                     <p style="font-size: large">
@@ -1082,7 +1092,7 @@ QUnit.module('Views', {
                                         at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo
                                         placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum
                                         augue.
-                                    </p>   
+                                    </p>
                                 </page>
                             </notebook>
                         </sheet>
@@ -1377,7 +1387,7 @@ QUnit.module('Views', {
         assert.containsN(form, 'button.oe_stat_button[disabled]', 1);
         await testUtils.dom.click('button[name=action_to_perform]');
         assert.containsN(form, 'button.oe_stat_button[disabled]', 1, "After performing the action, only one button should be disabled.");
-        
+
         form.destroy();
     });
 
@@ -9369,7 +9379,7 @@ QUnit.module('Views', {
         await testUtils.dom.click('.o_control_panel .o_form_button_cancel');
         await legacyExtraNextTick();
         assert.containsNone(target, '.o_form_view');
-        assert.containsOnce(target, '.o_kanban_view');
+        assert.containsOnce(target, '.o_legacy_kanban_view');
     });
 
     QUnit.test("one2many create record dialog shouldn't have a 'remove' button", async function (assert) {
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index 82a2d78550b..a32b208ccab 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -82,7 +82,7 @@ function checkLegend(assert, graph, expectedLegendLabels) {
 }
 
 let serverData;
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         this.data = {
             foo: {
diff --git a/addons/web/static/tests/legacy/views/kanban_model_tests.js b/addons/web/static/tests/legacy/views/kanban_model_tests.js
index 2598f2bd676..d2820f508bc 100644
--- a/addons/web/static/tests/legacy/views/kanban_model_tests.js
+++ b/addons/web/static/tests/legacy/views/kanban_model_tests.js
@@ -6,7 +6,7 @@ var testUtils = require('web.test_utils');
 
 var createModel = testUtils.createModel;
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         this.data = {
             partner: {
@@ -60,7 +60,7 @@ QUnit.module('Views', {
     },
 }, function () {
 
-    QUnit.module('KanbanModel');
+    QUnit.module('KanbanModel (legacy)');
 
     QUnit.test('load grouped + add a new group', async function (assert) {
         var done = assert.async();
diff --git a/addons/web/static/tests/legacy/views/kanban_tests.js b/addons/web/static/tests/legacy/views/kanban_tests.js
index 9e78a73bf2c..31b76c4173f 100644
--- a/addons/web/static/tests/legacy/views/kanban_tests.js
+++ b/addons/web/static/tests/legacy/views/kanban_tests.js
@@ -14,6 +14,8 @@ var Widget = require('web.Widget');
 var widgetRegistry = require('web.widget_registry');
 const widgetRegistryOwl = require('web.widgetRegistry');
 const { LegacyComponent } = require("@web/legacy/legacy_component");
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
 
 var makeTestPromise = testUtils.makeTestPromise;
 var nextTick = testUtils.nextTick;
@@ -23,7 +25,7 @@ var createView = testUtils.createView;
 const { Markup } = require("web.utils");
 const { markup, xml } = owl;
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     before: function () {
         this._initialKanbanProgressBarAnimate = KanbanColumnProgressBar.prototype.ANIMATE;
         KanbanColumnProgressBar.prototype.ANIMATE = false;
@@ -32,6 +34,9 @@ QUnit.module('Views', {
         KanbanColumnProgressBar.prototype.ANIMATE = this._initialKanbanProgressBarAnimate;
     },
     beforeEach: function () {
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+
         this.data = {
             partner: {
                 fields: {
@@ -106,7 +111,7 @@ QUnit.module('Views', {
     },
 }, function () {
 
-    QUnit.module('KanbanView');
+    QUnit.module('KanbanView (legacy)');
 
     QUnit.test('basic ungrouped rendering', async function (assert) {
         assert.expect(6);
@@ -128,8 +133,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_kanban_ungrouped');
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_kanban_test');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_ungrouped');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_test');
         assert.containsN(kanban, '.o_kanban_record:not(.o_kanban_ghost)', 4);
         assert.containsN(kanban,'.o_kanban_ghost', 6);
         assert.containsOnce(kanban, '.o_kanban_record:contains(gnap)');
@@ -159,8 +164,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped');
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_kanban_test');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_test');
         assert.containsN(kanban, '.o_kanban_group', 2);
         assert.containsOnce(kanban, '.o_kanban_group:nth-child(1) .o_kanban_record');
         assert.containsN(kanban, '.o_kanban_group:nth-child(2) .o_kanban_record', 3);
@@ -547,11 +552,11 @@ QUnit.module('Views', {
             groupBy: ['product_id'],
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'),'ui-sortable',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'ui-sortable',
             "columns are sortable when grouped by a m2o field");
         assert.hasClass(kanban.$buttons.find('.o-kanban-button-new'),'btn-primary',
             "'create' button should be btn-primary for grouped kanban with at least one column");
-        assert.hasClass(kanban.$('.o_kanban_view > div:last'),'o_column_quick_create',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view > div:last'),'o_column_quick_create',
             "column quick create should be enabled when grouped by a many2one field)");
 
         await testUtils.kanban.clickCreate(kanban); // Click on 'Create'
@@ -578,12 +583,12 @@ QUnit.module('Views', {
             groupBy: ['foo'],
         });
 
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'ui-sortable',
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'ui-sortable',
             "columns aren't sortable when not grouped by a m2o field");
         assert.containsN(kanban, '.o_kanban_group', 3, "should have " + 3 + " columns");
         assert.strictEqual(kanban.$('.o_kanban_group:first() .o_column_title').text(), "yop",
             "'yop' column should be the first column");
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view > div:last'), 'o_column_quick_create',
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view > div:last'), 'o_column_quick_create',
             "column quick create should be disabled when not grouped by a many2one field)");
         kanban.destroy();
     });
@@ -3338,7 +3343,7 @@ QUnit.module('Views', {
                         assert.deepEqual(args.args[1], {date: '2017-02-28'});
                     } else if ("datetime" in args.args[1]) {
                         assert.deepEqual(args.args[1], {datetime: '2017-02-28 23:59:59'});
-                    } 
+                    }
                 }
                 return this._super(route, args);
             },
@@ -3359,7 +3364,7 @@ QUnit.module('Views', {
                         "Should now have 3 records");
 
         await kanban.reload({groupBy: ['datetime:month']});
-        
+
         assert.strictEqual(kanban.$('.o_kanban_group').length, 2, "should have 2 columns");
         assert.strictEqual(kanban.$('.o_kanban_group:nth-child(1) .o_kanban_record').length, 2,
                         "1st column should contain 2 records of January month");
@@ -3491,7 +3496,7 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped');
         assert.containsN(kanban, '.o_kanban_group', 2, "should have " + 2 + " columns");
 
         // simulate an update coming from the searchview, with another groupby given
@@ -3540,7 +3545,7 @@ QUnit.module('Views', {
             context: { search_default_itsName: 1, },
         });
 
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped');
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped');
         assert.containsNone(kanban, '.o_control_panel div.o_search_options div.o_group_by_menu');
         assert.deepEqual(cpHelpers.getFacetTexts(kanban.el), []);
 
@@ -4195,7 +4200,7 @@ QUnit.module('Views', {
         // click to see the examples
         await testUtils.dom.click(kanban.$('.o_column_quick_create .o_kanban_examples'));
 
-        assert.strictEqual($('.modal .o_kanban_examples_dialog').length, 1,
+        assert.strictEqual($('.modal .o_legacy_kanban_examples_dialog').length, 1,
             "should have open the examples dialog");
         assert.strictEqual($('.modal .o_kanban_examples_dialog_nav li').length, 2,
             "should have two examples (in the menu)");
@@ -4407,11 +4412,11 @@ QUnit.module('Views', {
                     '</kanban>',
         });
 
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped');
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped');
         await kanban.update({groupBy: ['product_id']});
-        assert.hasClass(kanban.$('.o_kanban_view'),'o_kanban_grouped');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'o_kanban_grouped');
         await kanban.update({groupBy: []});
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped');
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped');
 
         kanban.destroy();
     });
@@ -4806,7 +4811,7 @@ QUnit.module('Views', {
         // add a record
         await testUtils.dom.click(kanban.$('.o_kanban_quick_add'));
 
-        await testUtils.dom.click(kanban.$('.o_kanban_view'));
+        await testUtils.dom.click(kanban.$('.o_legacy_kanban_view'));
 
         assert.containsOnce(kanban, '.o_view_nocontent',
             "there should be again a nocontent helper");
@@ -4988,7 +4993,7 @@ QUnit.module('Views', {
         assert.containsNone(kanban, '.o_view_nocontent');
         assert.containsOnce(kanban.$('.o_kanban_group:first'), '.o_kanban_quick_create');
 
-        await testUtils.dom.click(kanban.$('.o_kanban_view'));
+        await testUtils.dom.click(kanban.$('.o_legacy_kanban_view'));
         assert.doesNotHaveClass(kanban.$el, 'o_view_sample_data');
         assert.containsNone(kanban, '.o_kanban_quick_create');
         assert.containsNone(kanban, '.o_kanban_record');
@@ -5230,7 +5235,7 @@ QUnit.module('Views', {
                         return {
                             product_id: [r.id, r.display_name],
                             product_id_count: 0,
-                            __domain: ['product_id', '=', r.id],
+                            __domain: ['product_id', '=', r.id], // This domain shouldn't be valid.
                         };
                     });
                     result.length = result.groups.length;
@@ -5424,7 +5429,7 @@ QUnit.module('Views', {
                         return {
                             product_id: [r.id, r.display_name],
                             product_id_count: 0,
-                            __domain: ['product_id', '=', r.id],
+                            __domain: ['product_id', '=', r.id], // This domain shouldn't be valid.
                         };
                     });
                     result.length = result.groups.length;
@@ -5479,12 +5484,12 @@ QUnit.module('Views', {
             },
         });
 
-        await testUtils.dom.click(kanban.$('.o_kanban_view'));
+        await testUtils.dom.click(kanban.$('.o_legacy_kanban_view'));
         assert.doesNotHaveClass(kanban.$('.o-kanban-button-new'), 'o_catch_attention');
 
         await kanban.reload({ domain: [['id', '<', 0]] });
 
-        await testUtils.dom.click(kanban.$('.o_kanban_view'));
+        await testUtils.dom.click(kanban.$('.o_legacy_kanban_view'));
         assert.hasClass(kanban.$('.o-kanban-button-new'), 'o_catch_attention');
 
         kanban.destroy();
@@ -5593,7 +5598,6 @@ QUnit.module('Views', {
             data.partner.records[0].active = false;
             event.data.on_closed();
         });
-
         assert.strictEqual(kanban.$('.o_kanban_record:contains(yop)').length, 1, "should display 'yop' record");
         await testUtils.dom.click(kanban.$('.o_kanban_record:contains(yop) button[data-name="toggle_active"]'));
         assert.strictEqual(kanban.$('.o_kanban_record:contains(yop)').length, 0, "should remove 'yop' record from the view");
@@ -5786,7 +5790,7 @@ QUnit.module('Views', {
             groupBy: ['product_id'],
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'),'ui-sortable',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'ui-sortable',
             "columns should be sortable");
         assert.containsN(kanban, '.o_kanban_group', 2,
             "should have two columns");
@@ -6056,7 +6060,7 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'),'o_kanban_grouped',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'o_kanban_grouped',
                         "should have classname 'o_kanban_grouped'");
         assert.containsN(kanban, '.o_kanban_group', 2, "should have " + 2 + " columns");
 
@@ -6354,7 +6358,7 @@ QUnit.module('Views', {
             groupBy: ['bar'],
         });
 
-        assert.containsN(kanban, '.o_kanban_counter', this.data.product.records.length,
+        assert.containsN(kanban, '.o_legacy_kanban_counter', this.data.product.records.length,
             "kanban counters should have been created");
 
         assert.strictEqual(parseInt(kanban.$('.o_kanban_counter_side').last().text()), 36,
@@ -6385,7 +6389,7 @@ QUnit.module('Views', {
         });
 
         assert.containsN(kanban, '.o_kanban_group', 2);
-        assert.strictEqual(kanban.$('.o_kanban_counter:last .o_kanban_counter_side').text(), "4");
+        assert.strictEqual(kanban.$('.o_legacy_kanban_counter:last .o_kanban_counter_side').text(), "4");
         assert.containsN(kanban, '.o_kanban_counter_progress:last .progress-bar', 4);
         assert.containsOnce(kanban, '.o_kanban_counter_progress:last .progress-bar[data-filter="__false"]',
             "should have false kanban color");
@@ -6395,7 +6399,7 @@ QUnit.module('Views', {
 
         assert.hasClass(kanban.$('.o_kanban_counter_progress:last .progress-bar[data-filter="__false"]'), 'progress-bar-animated');
         assert.hasClass(kanban.$('.o_kanban_group:last'), 'o_kanban_group_show_muted');
-        assert.strictEqual(kanban.$('.o_kanban_counter:last .o_kanban_counter_side').text(), "1");
+        assert.strictEqual(kanban.$('.o_legacy_kanban_counter:last .o_kanban_counter_side').text(), "1");
 
         kanban.destroy();
     });
@@ -6424,12 +6428,12 @@ QUnit.module('Views', {
         });
 
         assert.containsN(kanban, '.o_kanban_group', 2);
-        assert.strictEqual(kanban.$('.o_kanban_counter:last .o_kanban_counter_side').text(), "51");
+        assert.strictEqual(kanban.$('.o_legacy_kanban_counter:last .o_kanban_counter_side').text(), "51");
 
         await testUtils.dom.click(kanban.$('.o_kanban_counter_progress:last .progress-bar[data-filter="__false"]'));
 
         assert.hasClass(kanban.$('.o_kanban_counter_progress:last .progress-bar[data-filter="__false"]'), 'progress-bar-animated');
-        assert.strictEqual(kanban.$('.o_kanban_counter:last .o_kanban_counter_side').text(), "15");
+        assert.strictEqual(kanban.$('.o_legacy_kanban_counter:last .o_kanban_counter_side').text(), "15");
 
         kanban.destroy();
     });
@@ -6485,7 +6489,7 @@ QUnit.module('Views', {
             groupBy: ['product_id'],
         });
 
-        var nbProgressBars = kanban.$('.o_kanban_counter').length;
+        var nbProgressBars = kanban.$('.o_legacy_kanban_counter').length;
 
         // Create a new column: this should create an empty progressbar
         var $columnQuickCreate = kanban.$('.o_column_quick_create');
@@ -6493,7 +6497,7 @@ QUnit.module('Views', {
         $columnQuickCreate.find('input').val('test');
         await testUtils.dom.click($columnQuickCreate.find('.btn-primary'));
 
-        assert.containsN(kanban, '.o_kanban_counter', nbProgressBars + 1,
+        assert.containsN(kanban, '.o_legacy_kanban_counter', nbProgressBars + 1,
             "a new column with a new column progressbar should have been created");
 
         kanban.destroy();
@@ -7360,9 +7364,9 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'),'o_kanban_grouped',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'o_kanban_grouped',
             "the kanban view should be grouped");
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'o_kanban_ungrouped',
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_ungrouped',
             "the kanban view should not be ungrouped");
 
         kanban.update({domain: []}); // 1st update on kanban view
@@ -7370,9 +7374,9 @@ QUnit.module('Views', {
         prom.resolve(); // simulate slow 1st update of kanban view
 
         await nextTick();
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'o_kanban_grouped',
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'o_kanban_grouped',
             "the kanban view should not longer be grouped");
-        assert.hasClass(kanban.$('.o_kanban_view'),'o_kanban_ungrouped',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'),'o_kanban_ungrouped',
             "the kanban view should have become ungrouped");
 
         kanban.destroy();
@@ -7854,12 +7858,12 @@ QUnit.module('Views', {
             },
         });
 
-        assert.hasClass(kanban.$('.o_kanban_view'), 'ui-sortable');
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'ui-sortable');
         assert.strictEqual(kanban.$('.o_kanban_record:not(.o_kanban_ghost)').text(),
             'yopblipgnapblip');
 
-        var $record = kanban.$('.o_kanban_view .o_kanban_record:first');
-        var $to = kanban.$('.o_kanban_view .o_kanban_record:nth-child(4)');
+        var $record = kanban.$('.o_legacy_kanban_view .o_kanban_record:first');
+        var $to = kanban.$('.o_legacy_kanban_view .o_kanban_record:nth-child(4)');
         envIDs = [2, 3, 4, 1]; // first record of moved after last one
         await testUtils.dom.dragAndDrop($record, $to, {position: "bottom"});
 
@@ -7890,12 +7894,12 @@ QUnit.module('Views', {
             },
         });
 
-        assert.doesNotHaveClass(kanban.$('.o_kanban_view'), 'ui-sortable');
+        assert.doesNotHaveClass(kanban.$('.o_legacy_kanban_view'), 'ui-sortable');
         assert.strictEqual(kanban.$('.o_kanban_record:not(.o_kanban_ghost)').text(),
             'yopblipgnapblip');
 
-        var $draggedRecord = kanban.$('.o_kanban_view .o_kanban_record:first');
-        var $to = kanban.$('.o_kanban_view .o_kanban_record:nth-child(4)');
+        var $draggedRecord = kanban.$('.o_legacy_kanban_view .o_kanban_record:first');
+        var $to = kanban.$('.o_legacy_kanban_view .o_kanban_record:nth-child(4)');
         await testUtils.dom.dragAndDrop($draggedRecord, $to, {position: "bottom"});
 
         assert.strictEqual(kanban.$('.o_kanban_record:not(.o_kanban_ghost)').text(),
@@ -8123,11 +8127,11 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
 
@@ -8144,7 +8148,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban.el, ".o_kanban_group.o_kanban_group_show");
         assert.strictEqual(kanban.el.querySelector(".o_column_title").innerText, "Yes");
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "0 blip", "0 __false"],
         );
 
@@ -8159,11 +8163,11 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
 
@@ -8202,7 +8206,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8210,7 +8214,7 @@ QUnit.module('Views', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8223,7 +8227,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban.el, ".o_kanban_group.o_kanban_group_show");
         assert.strictEqual(kanban.el.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title").innerText, "Yes");
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group.o_kanban_group_show .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group.o_kanban_group_show .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8242,7 +8246,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8250,7 +8254,7 @@ QUnit.module('Views', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8269,7 +8273,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8277,7 +8281,7 @@ QUnit.module('Views', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8320,7 +8324,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8328,7 +8332,7 @@ QUnit.module('Views', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8358,7 +8362,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "0 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8366,7 +8370,7 @@ QUnit.module('Views', {
             [],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "2 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8413,7 +8417,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8421,7 +8425,7 @@ QUnit.module('Views', {
             ["4 blip"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
@@ -8458,7 +8462,7 @@ QUnit.module('Views', {
             ["No", "Yes"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(1) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["1 yop", "1 blip", "0 __false"],
         );
         assert.deepEqual(
@@ -8466,7 +8470,7 @@ QUnit.module('Views', {
             ["4 blip", "1 yop"],
         );
         assert.deepEqual(
-            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
+            [...kanban.el.querySelectorAll(".o_kanban_group:nth-child(2) .o_legacy_kanban_counter .progress-bar")].map(el => el.dataset.originalTitle),
             ["0 yop", "1 blip", "1 __false"],
         );
         assert.deepEqual(
diff --git a/addons/web/static/tests/legacy/views/list_tests.js b/addons/web/static/tests/legacy/views/list_tests.js
index 816abb0d3f6..99ac97efef5 100644
--- a/addons/web/static/tests/legacy/views/list_tests.js
+++ b/addons/web/static/tests/legacy/views/list_tests.js
@@ -15,12 +15,17 @@ const ListView = require('web.ListView');
 const mixins = require('web.mixins');
 const RamStorage = require('web.RamStorage');
 const testUtils = require('web.test_utils');
+var KanbanView = require('web.KanbanView');
 const { patch, unpatch } = require('web.utils');
 const widgetRegistry = require('web.widget_registry');
 const widgetRegistryOwl = require('web.widgetRegistry');
-const Widget = require('web.Widget');
+var Widget = require('web.Widget');
 const ControlPanel = require('web.ControlPanel');
 const ListController = require('web.ListController');
+
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
+
 const cpHelpers = require('@web/../tests/search/helpers');
 const { LegacyComponent } = require("@web/legacy/legacy_component");
 var createView = testUtils.createView;
@@ -33,8 +38,15 @@ const { markup, onMounted, onWillUnmount, xml } = owl;
 
 let serverData;
 let target;
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
+        registry.category("views").remove("list"); // remove new list from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
         this.data = {
             foo: {
                 fields: {
@@ -140,7 +152,7 @@ QUnit.module('Views', {
     }
 }, function () {
 
-    QUnit.module('ListView');
+    QUnit.module('ListView (legacy)');
 
     QUnit.test('simple readonly list', async function (assert) {
         assert.expect(10);
@@ -2262,7 +2274,7 @@ QUnit.module('Views', {
         // select a record
         await testUtils.dom.click(list.$('.o_data_row:first .o_list_record_selector input'));
         assert.containsOnce(list.$('.o_cp_buttons'), '.o_list_selection_box');
-        const lastElement = list.$('.o_cp_buttons .o_list_buttons').children(":last")[0];
+        const lastElement = list.$('.o_cp_buttons .o_legacy_list_buttons').children(":last")[0];
         assert.strictEqual(lastElement, list.$('.o_cp_buttons .o_list_selection_box')[0],
             "last element should selection box");
         assert.strictEqual(list.$('.o_list_selection_box').text().trim(), '1 selected');
@@ -4394,7 +4406,7 @@ QUnit.module('Views', {
             }
         });
 
-        assert.containsNone(list, '.o_list_buttons', "should not have any buttons");
+        assert.containsNone(list, '.o_legacy_list_buttons', "should not have any buttons");
         list.destroy();
     });
 
@@ -10948,6 +10960,7 @@ QUnit.module('Views', {
             View: ListView,
             model: 'foo',
             data: this.data,
+            debug: 1,
             arch: '<tree editable="bottom"><field name="foo" required="1"/></tree>',
             groupBy: ['bar'],
         });
@@ -11768,7 +11781,7 @@ QUnit.module('Views', {
 
         assert.containsNone(target, '.o_list_view',
             "should not display the list view anymore");
-        assert.containsOnce(target, '.o_kanban_view',
+        assert.containsOnce(target, '.o_legacy_kanban_view',
             "should have switched to the kanban view");
 
         // switch back to list view
@@ -11777,7 +11790,7 @@ QUnit.module('Views', {
             view_type: 'list',
         });
 
-        assert.containsNone(target, '.o_kanban_view',
+        assert.containsNone(target, '.o_legacy_kanban_view',
             "should not display the kanban view anymoe");
         assert.containsOnce(target, '.o_list_view',
             "should display the list view");
@@ -11803,12 +11816,12 @@ QUnit.module('Views', {
 
         assert.containsNone(target, '.o_list_view',
             "should not display the list view anymore");
-        assert.containsOnce(target, '.o_kanban_view',
+        assert.containsOnce(target, '.o_legacy_kanban_view',
             "should have switched to the kanban view");
 
         await doAction(webClient, 2);
 
-        assert.containsNone(target, '.o_kanban_view',
+        assert.containsNone(target, '.o_legacy_kanban_view',
             "should not havethe kanban view anymoe");
         assert.containsOnce(target, '.o_list_view',
             "should display the list view");
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index c6bfcbe2877..4b8d50aa4d7 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -36,7 +36,7 @@ var getCurrentValues = function (pivot) {
 let serverData;
 let target;
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         registry.category("views").remove("pivot"); // remove new pivot from registry
         legacyViewRegistry.add("pivot", PivotView); // add legacy pivot -> will be wrapped and added to new registry
@@ -129,7 +129,7 @@ QUnit.module('Views', {
         patchWithCleanup(browser, { setTimeout: (fn) => fn() });
     },
 }, function () {
-    QUnit.module('Legacy PivotView');
+    QUnit.module('PivotView (legacy)');
 
     QUnit.test('simple pivot rendering', async function (assert) {
         assert.expect(3);
@@ -2031,7 +2031,7 @@ QUnit.module('Views', {
             [
                 "Total",
                     "xphone",
-                    "xpad" 
+                    "xpad"
             ]
         );
 
diff --git a/addons/web/static/tests/legacy/views/search_panel_tests.js b/addons/web/static/tests/legacy/views/search_panel_tests.js
index 53d84c3f566..7de7145b62d 100644
--- a/addons/web/static/tests/legacy/views/search_panel_tests.js
+++ b/addons/web/static/tests/legacy/views/search_panel_tests.js
@@ -6,6 +6,7 @@ const KanbanView = require('web.KanbanView');
 const ListView = require('web.ListView');
 const testUtils = require('web.test_utils');
 const SearchPanel = require("web.searchPanel");
+const legacyViewRegistry = require('web.view_registry');
 
 const createView = testUtils.createView;
 
@@ -51,6 +52,13 @@ let target;
 
 QUnit.module('Views', {
     beforeEach: function () {
+        registry.category("views").remove("list"); // remove new list from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
         this.data = {
             partner: {
                 fields: {
@@ -182,9 +190,9 @@ QUnit.module('Views', {
         });
 
         assert.containsOnce(kanban, '.o_content.o_controller_with_searchpanel > .o_search_panel');
-        assert.containsOnce(kanban, '.o_content.o_controller_with_searchpanel > .o_kanban_view');
+        assert.containsOnce(kanban, '.o_content.o_controller_with_searchpanel > .o_legacy_kanban_view');
 
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
 
         assert.containsN(kanban, '.o_search_panel_section', 2);
 
@@ -1304,7 +1312,7 @@ QUnit.module('Views', {
             },
         });
 
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
 
         // trigger a reload and delay the get_filter
         def = testUtils.makeTestPromise();
@@ -1312,12 +1320,12 @@ QUnit.module('Views', {
         await toggleMenuItem(kanban.$el[0], 0);
         await testUtils.nextTick();
 
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 4);
 
         def.resolve();
         await testUtils.nextTick();
 
-        assert.containsOnce(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)');
+        assert.containsOnce(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)');
 
         kanban.destroy();
     });
@@ -1373,7 +1381,7 @@ QUnit.module('Views', {
         assert.containsNone(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         // check 'asustek'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
@@ -1381,7 +1389,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
 
         // check 'agrolait'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
@@ -1389,7 +1397,7 @@ QUnit.module('Views', {
         assert.containsN(kanban, '.o_search_panel_filter_value input:checked', 2);
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         // uncheck 'asustek'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
@@ -1397,7 +1405,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 1);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 1);
 
         // uncheck 'agrolait'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
@@ -1405,7 +1413,7 @@ QUnit.module('Views', {
         assert.containsNone(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         assert.verifySteps([
             // nothing checked
@@ -1479,7 +1487,7 @@ QUnit.module('Views', {
         assert.containsNone(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'ABC1DEF1GHI1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         // check 'abc'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
@@ -1487,7 +1495,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'ABC1DEF1GHI1');
-        assert.containsOnce(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 1);
+        assert.containsOnce(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 1);
 
         // check 'def'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
@@ -1495,7 +1503,7 @@ QUnit.module('Views', {
         assert.containsN(kanban, '.o_search_panel_filter_value input:checked', 2);
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'ABC1DEF1GHI1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
 
         // uncheck 'abc'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
@@ -1503,7 +1511,7 @@ QUnit.module('Views', {
         assert.containsOnce(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'ABC1DEF1GHI1');
-        assert.containsOnce(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)');
+        assert.containsOnce(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)');
 
         // uncheck 'def'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
@@ -1511,7 +1519,7 @@ QUnit.module('Views', {
         assert.containsNone(kanban, '.o_search_panel_filter_value input:checked');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'ABC1DEF1GHI1');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         assert.verifySteps([
             // nothing checked
@@ -1916,7 +1924,7 @@ QUnit.module('Views', {
             'goldsilver');
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolait1camptocamp');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3);
 
         // check 'asustek'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:first input'));
@@ -1927,7 +1935,7 @@ QUnit.module('Views', {
             "first group checkbox should be checked");
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolaitcamptocamp');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
 
         // check 'agrolait'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(1) input'));
@@ -1940,7 +1948,7 @@ QUnit.module('Views', {
             "second group checkbox should be indeterminate");
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustekagrolaitcamptocamp');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 0);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 0);
 
         // check 'camptocamp'
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_value:nth(2) input'));
@@ -1953,7 +1961,7 @@ QUnit.module('Views', {
             "second group checkbox should not be indeterminate");
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustekagrolaitcamptocamp');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 0);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 0);
 
         // uncheck second group
         await testUtils.dom.click(kanban.$('.o_search_panel_filter_group:nth(1) > header > div > input'));
@@ -1966,7 +1974,7 @@ QUnit.module('Views', {
             "second group checkbox should not be indeterminate");
         assert.strictEqual(kanban.$('.o_search_panel_filter_value').text().replace(/\s/g, ''),
             'asustek2agrolaitcamptocamp');
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 2);
 
         assert.verifySteps([
             // nothing checked
@@ -2354,7 +2362,7 @@ QUnit.module('Views', {
 
         await doAction(webClient, 1);
 
-        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_kanban_view');
+        assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_legacy_kanban_view');
         assert.containsOnce(target, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
         await switchView(target, 'pivot');
@@ -2389,7 +2397,7 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
 
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_kanban_view');
+        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_legacy_kanban_view');
         assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
         await switchView(webClient, 'list');
@@ -2508,7 +2516,7 @@ QUnit.module('Views', {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
 
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_kanban_view');
+        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_legacy_kanban_view');
         assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_search_panel');
         assert.containsNone(webClient, '.o_search_panel_filter_value input:checked');
         assert.containsN(webClient, '.o_kanban_record:not(.o_kanban_ghost)', 4);
@@ -2544,7 +2552,7 @@ QUnit.module('Views', {
         await testUtils.dom.click($(target).find('.o_form_view button:contains("multi view")'));
         await legacyExtraNextTick();
 
-        assert.containsOnce(target, '.o_kanban_view');
+        assert.containsOnce(target, '.o_legacy_kanban_view');
         assert.containsOnce(target, '.o_search_panel');
         assert.containsOnce(target, '.o_search_panel_category_value:first .active');
 
@@ -2561,7 +2569,7 @@ QUnit.module('Views', {
         await testUtils.dom.click($(target).find('.o_form_view button:contains("multi view")'));
         await legacyExtraNextTick();
 
-        assert.containsOnce(target, '.o_kanban_view');
+        assert.containsOnce(target, '.o_legacy_kanban_view');
         assert.containsNone(target, '.o_search_panel');
     });
 
@@ -2611,7 +2619,7 @@ QUnit.module('Views', {
             await testUtils.nextTick();
         }
 
-        assert.containsOnce(target, '.o_content .o_kanban_view');
+        assert.containsOnce(target, '.o_content .o_legacy_kanban_view');
         assert.strictEqual($(target).find('.o_search_panel').scrollTop(), 0);
 
         // simulate a scroll in the search panel and switch into list
@@ -2625,7 +2633,7 @@ QUnit.module('Views', {
         await scroll(30);
         await switchView(target, 'kanban');
         await legacyExtraNextTick();
-        assert.containsOnce(target, '.o_content .o_kanban_view');
+        assert.containsOnce(target, '.o_content .o_legacy_kanban_view');
         assert.strictEqual($(target).find('.o_search_panel').scrollTop(), 30);
         SearchPanel.scrollDebounce = originalDebounce;
     });
diff --git a/addons/web/static/tests/legacy/views/state_mapping_tests.js b/addons/web/static/tests/legacy/views/state_mapping_tests.js
index fda85b64a5a..c28abdf31f2 100644
--- a/addons/web/static/tests/legacy/views/state_mapping_tests.js
+++ b/addons/web/static/tests/legacy/views/state_mapping_tests.js
@@ -32,7 +32,7 @@ const viewRegistry = registry.category("views");
 
 let serverData;
 let target;
-QUnit.module("Views", (hooks) => {
+QUnit.module("LegacyViews", (hooks) => {
     hooks.beforeEach(async () => {
         target = getFixture();
 
diff --git a/addons/web/static/tests/legacy/views/view_dialogs_tests.js b/addons/web/static/tests/legacy/views/view_dialogs_tests.js
index e46f9785b1d..5f51b2e2372 100644
--- a/addons/web/static/tests/legacy/views/view_dialogs_tests.js
+++ b/addons/web/static/tests/legacy/views/view_dialogs_tests.js
@@ -18,7 +18,7 @@ async function createParent(params) {
     return widget;
 }
 
-QUnit.module('Views', {
+QUnit.module('LegacyViews', {
     beforeEach: function () {
         this.data = {
             partner: {
@@ -63,7 +63,7 @@ QUnit.module('Views', {
     },
 }, function () {
 
-    QUnit.module('view_dialogs');
+    QUnit.module('ViewDialog (legacy)');
 
     QUnit.test('formviewdialog buttons in footer are positioned properly', async function (assert) {
         assert.expect(2);
diff --git a/addons/web/static/tests/legacy/widgets/domain_selector_tests.js b/addons/web/static/tests/legacy/widgets/domain_selector_tests.js
index 50e1fb85210..adcf0eb1ca2 100644
--- a/addons/web/static/tests/legacy/widgets/domain_selector_tests.js
+++ b/addons/web/static/tests/legacy/widgets/domain_selector_tests.js
@@ -1,10 +1,13 @@
 odoo.define('web.domain_selector_tests', function (require) {
 "use strict";
 
+const FormView = require("web.FormView");
 var DomainSelector = require("web.DomainSelector");
 var Widget = require("web.Widget");
 var testUtils = require("web.test_utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
 
 QUnit.module('widgets', {}, function () {
 
@@ -239,6 +242,9 @@ QUnit.module('DomainSelector', {
     });
 
     QUnit.test("inline domain editor in modal", async function (assert) {
+        registry.category("views").remove("form"); // remove new form from registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+
         assert.expect(1);
 
         const serverData = {
diff --git a/addons/web/static/tests/mobile/mobile_list_view_tests.js b/addons/web/static/tests/mobile/mobile_list_view_tests.js
new file mode 100644
index 00000000000..47fee106b6b
--- /dev/null
+++ b/addons/web/static/tests/mobile/mobile_list_view_tests.js
@@ -0,0 +1,235 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import { makeFakeUserService } from "../helpers/mock_services";
+import { click, getFixture, patchWithCleanup, triggerEvents } from "../helpers/utils";
+import { getMenuItemTexts, toggleActionMenu } from "../search/helpers";
+import { makeView, setupViewRegistries } from "../views/helpers";
+
+let serverData;
+let fixture;
+
+QUnit.module("Mobile Views", ({ beforeEach }) => {
+    beforeEach(() => {
+        setupViewRegistries();
+        fixture = getFixture();
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                    },
+                    records: [
+                        { id: 1, bar: true, foo: "yop" },
+                        { id: 2, bar: true, foo: "blip" },
+                        { id: 3, bar: true, foo: "gnap" },
+                        { id: 4, bar: false, foo: "blip" },
+                    ],
+                },
+            },
+        };
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn() || true,
+            clearTimeout: () => {},
+        });
+    });
+
+    QUnit.module("ListView");
+
+    QUnit.test("selection is properly displayed (single page)", async function (assert) {
+        registry.category("services").add(
+            "user",
+            makeFakeUserService(() => false),
+            { force: true }
+        );
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>
+            `,
+            loadActionMenus: true,
+        });
+
+        assert.containsN(fixture, ".o_data_row", 4);
+        assert.containsNone(fixture, ".o_list_selection_box");
+
+        // select a record
+        await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
+        assert.containsOnce(fixture, ".o_list_selection_box");
+        assert.containsNone(fixture, ".o_list_selection_box .o_list_select_domain");
+        assert.ok(
+            fixture.querySelector(".o_list_selection_box").textContent.includes("1 selected")
+        );
+
+        // unselect a record
+        await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
+        assert.containsNone(fixture, ".o_list_selection_box .o_list_select_domain");
+
+        // select 2 records
+        await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
+        await triggerEvents(fixture, ".o_data_row:nth-child(2)", ["touchstart", "touchend"]);
+        assert.ok(
+            fixture.querySelector(".o_list_selection_box").textContent.includes("2 selected")
+        );
+        assert.containsOnce(fixture, "div.o_control_panel .o_cp_action_menus");
+
+        await toggleActionMenu(fixture);
+        assert.deepEqual(
+            getMenuItemTexts(fixture.querySelector(".o_cp_action_menus")),
+            ["Delete"],
+            "action menu should contain the Delete action"
+        );
+
+        // unselect all
+        await click(fixture, ".o_discard_selection");
+        assert.containsNone(fixture, ".o_list_selection_box");
+    });
+
+    QUnit.test("selection box is properly displayed (multi pages)", async function (assert) {
+        registry.category("services").add(
+            "user",
+            makeFakeUserService(() => false),
+            { force: true }
+        );
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree limit="3">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>
+            `,
+            loadActionMenus: true,
+        });
+
+        assert.containsN(fixture, ".o_data_row", 3);
+        assert.containsNone(fixture, ".o_list_selection_box");
+
+        // select a record
+        await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
+
+        assert.containsOnce(fixture, ".o_list_selection_box");
+        assert.containsNone(fixture, ".o_list_selection_box .o_list_select_domain");
+        assert.ok(
+            fixture.querySelector(".o_list_selection_box").textContent.includes("1 selected")
+        );
+        assert.containsOnce(fixture, ".o_list_selection_box");
+        assert.containsOnce(fixture, "div.o_control_panel .o_cp_action_menus");
+
+        await toggleActionMenu(fixture);
+        assert.deepEqual(
+            getMenuItemTexts(fixture.querySelector(".o_cp_action_menus")),
+            ["Delete"],
+            "action menu should contain the Delete action"
+        );
+
+        // select all records of first page
+        await triggerEvents(fixture, ".o_data_row:nth-child(2)", ["touchstart", "touchend"]);
+        await triggerEvents(fixture, ".o_data_row:nth-child(3)", ["touchstart", "touchend"]);
+        assert.containsOnce(fixture, ".o_list_selection_box");
+        assert.containsOnce(fixture, ".o_list_selection_box .o_list_select_domain");
+        assert.ok(
+            fixture.querySelector(".o_list_selection_box").textContent.includes("3 selected")
+        );
+        assert.containsOnce(fixture, ".o_list_select_domain");
+
+        // select all domain
+        await click(fixture, ".o_list_selection_box .o_list_select_domain");
+        assert.containsOnce(fixture, ".o_list_selection_box");
+        assert.ok(
+            fixture.querySelector(".o_list_selection_box").textContent.includes("All 4 selected")
+        );
+    });
+
+    QUnit.test("export button is properly hidden", async (assert) => {
+        registry.category("services").add(
+            "user",
+            makeFakeUserService((group) => group === "base.group_allow_export"),
+            { force: true }
+        );
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>
+            `,
+        });
+
+        assert.containsN(fixture, ".o_data_row", 4);
+        assert.isNotVisible(fixture.querySelector(".o_list_export_xlsx"));
+    });
+
+    QUnit.test("editable readonly list view is disabled", async (assert) => {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo" />
+                </tree>
+            `,
+        });
+
+        await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
+        await click(fixture, ".o_data_row:nth-child(1) .o_data_cell:nth-child(1)");
+        assert.containsNone(
+            fixture,
+            ".o_selected_row .o_field_widget[name=foo]",
+            "The listview should not contains an edit field"
+        );
+    });
+
+    QUnit.test("add custom field button not shown in mobile (with opt. col.)", async (assert) => {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                    <tree>
+                        <field name="foo" />
+                        <field name="bar" optional="hide" />
+                    </tree>
+                `,
+        });
+        assert.containsOnce(fixture, "table .o_optional_columns_dropdown_toggle");
+        await click(fixture, "table .o_optional_columns_dropdown_toggle");
+        assert.containsOnce(fixture, "div.o_optional_columns_dropdown .dropdown-item");
+    });
+
+    QUnit.test(
+        "add custom field button not shown to non-system users (wo opt. col.)",
+        async (assert) => {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="foo" />
+                        <field name="bar" />
+                    </tree>
+                `,
+            });
+
+            assert.containsNone(fixture, "table .o_optional_columns_dropdown_toggle");
+        }
+    );
+});
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index ea295660b9c..6df7b90b7ed 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -39,7 +39,7 @@ QUnit.module("Search", (hooks) => {
 
         assert.containsOnce(target, ".o_cp_top");
         assert.containsOnce(target, ".o_cp_top_left");
-        assert.containsNone(target, ".o_cp_top_right");
+        assert.strictEqual(target.querySelector(".o_cp_top_right").innerHTML, "");
         assert.containsOnce(target, ".o_cp_bottom");
         assert.containsOnce(target, ".o_cp_bottom_left");
         assert.containsOnce(target, ".o_cp_bottom_right");
diff --git a/addons/web/static/tests/search/helpers.js b/addons/web/static/tests/search/helpers.js
index 516d229aa2a..c09b2b2874d 100644
--- a/addons/web/static/tests/search/helpers.js
+++ b/addons/web/static/tests/search/helpers.js
@@ -1,5 +1,14 @@
 /** @odoo-module **/
 
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import {
+    click,
+    editInput,
+    getFixture,
+    mount,
+    mouseEnter,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { notificationService } from "@web/core/notifications/notification_service";
 import { ormService } from "@web/core/orm_service";
@@ -9,30 +18,28 @@ import { WithSearch } from "@web/search/with_search/with_search";
 import { getDefaultConfig } from "@web/views/view";
 import { viewService } from "@web/views/view_service";
 import { actionService } from "@web/webclient/actions/action_service";
-import { makeTestEnv } from "../helpers/mock_env";
-import { click, getFixture, mount, mouseEnter, triggerEvent } from "../helpers/utils";
 
-const { Component } = owl;
+const { Component, xml } = owl;
 const serviceRegistry = registry.category("services");
 const favoriteMenuRegistry = registry.category("favoriteMenu");
 
-export const setupControlPanelServiceRegistry = () => {
+export function setupControlPanelServiceRegistry() {
     serviceRegistry.add("action", actionService);
     serviceRegistry.add("hotkey", hotkeyService);
     serviceRegistry.add("notification", notificationService);
     serviceRegistry.add("orm", ormService);
     serviceRegistry.add("view", viewService);
-};
+}
 
-export const setupControlPanelFavoriteMenuRegistry = () => {
+export function setupControlPanelFavoriteMenuRegistry() {
     favoriteMenuRegistry.add(
         "custom-favorite-item",
         { Component: CustomFavoriteItem, groupNumber: 3 },
         { sequence: 0 }
     );
-};
+}
 
-export const makeWithSearch = async (params) => {
+export async function makeWithSearch(params) {
     const props = { ...params };
 
     const serverData = props.serverData || undefined;
@@ -45,45 +52,71 @@ export const makeWithSearch = async (params) => {
     delete props.serverData;
     delete props.mockRPC;
     delete props.config;
+    const componentProps = props.componentProps;
+    delete props.componentProps;
+    delete props.Component;
+
+    class Parent extends Component {
+        setup() {
+            this.withSearchProps = props;
+            this.componentProps = componentProps;
+        }
+    }
+    Parent.template = xml`
+        <WithSearch t-props="withSearchProps" t-slot-scope="search">
+            <Component
+                t-props="componentProps"
+                context="search.context"
+                domain="search.domain"
+                groupBy="search.groupBy"
+                orderBy="search.orderBy"
+                comparison="search.comparison" />
+        </WithSearch>`;
+    Parent.components = { Component: params.Component, WithSearch };
 
     const env = await makeTestEnv({ serverData, mockRPC, config });
-    const withSearch = await mount(WithSearch, getFixture(), { env, props });
-    const withSearchNode = withSearch.__owl__;
-    const componentNode = Object.values(withSearchNode.children)[0];
+    const parent = await mount(Parent, getFixture(), { env, props });
+    const parentNode = parent.__owl__;
+    const withSearchNode = getUniqueChild(parentNode);
+    const componentNode = getUniqueChild(withSearchNode);
     const component = componentNode.component;
-
     return component;
-};
+}
 
-const getNode = (target) => {
+function getUniqueChild(node) {
+    return Object.values(node.children)[0];
+}
+
+function getNode(target) {
     return target instanceof Component ? target.el : target;
-};
+}
 
-const findItem = (target, selector, finder = 0) => {
+function findItem(target, selector, finder = 0) {
     const el = getNode(target);
     const elems = [...el.querySelectorAll(selector)];
     if (Number.isInteger(finder)) {
         return elems[finder];
     }
-    return elems.find((el) => el.innerText.trim().toLowerCase() === finder.toLowerCase());
-};
+    return elems.find((el) => el.innerText.trim().toLowerCase() === String(finder).toLowerCase());
+}
 
 /** Menu (generic) */
 
-export const toggleMenu = async (el, menuFinder) => {
+export async function toggleMenu(el, menuFinder) {
     const menu = findItem(el, `.dropdown button.dropdown-toggle`, menuFinder);
     await click(menu);
-};
+}
 
-export const toggleMenuItem = async (el, itemFinder) => {
+export async function toggleMenuItem(el, itemFinder) {
     const item = findItem(el, `.o_menu_item`, itemFinder);
     if (item.classList.contains("dropdown-toggle")) {
         await mouseEnter(item);
     } else {
         await click(item);
     }
-};
-export const toggleMenuItemOption = async (el, itemFinder, optionFinder) => {
+}
+
+export async function toggleMenuItemOption(el, itemFinder, optionFinder) {
     const item = findItem(el, `.o_menu_item`, itemFinder);
     const option = findItem(item.parentNode, ".o_item_option", optionFinder);
     if (option.classList.contains("dropdown-toggle")) {
@@ -91,46 +124,53 @@ export const toggleMenuItemOption = async (el, itemFinder, optionFinder) => {
     } else {
         await click(option);
     }
-};
-export const isItemSelected = (el, itemFinder) => {
+}
+
+export function isItemSelected(el, itemFinder) {
     const item = findItem(el, `.o_menu_item`, itemFinder);
     return item.classList.contains("selected");
-};
-export const isOptionSelected = (el, itemFinder, optionFinder) => {
+}
+
+export function isOptionSelected(el, itemFinder, optionFinder) {
     const item = findItem(el, `.o_menu_item`, itemFinder);
     const option = findItem(item.parentNode, ".o_item_option", optionFinder);
     return option.classList.contains("selected");
-};
-export const getMenuItemTexts = (target) => {
+}
+
+export function getMenuItemTexts(target) {
     const el = getNode(target);
-    return [...el.querySelectorAll(`.dropdown ul .o_menu_item`)].map((e) => e.innerText.trim());
-};
+    return [...el.querySelectorAll(`.dropdown-menu .o_menu_item`)].map((e) => e.innerText.trim());
+}
+
+export function getButtons(el) {
+    return [...el.querySelector(`div.o_cp_bottom div.o_cp_buttons`).children];
+}
 
 /** Filter menu */
 
-export const toggleFilterMenu = async (el) => {
+export async function toggleFilterMenu(el) {
     await click(findItem(el, `.o_filter_menu button.dropdown-toggle`));
-};
+}
 
-export const toggleAddCustomFilter = async (el) => {
+export async function toggleAddCustomFilter(el) {
     await mouseEnter(findItem(el, `.o_add_custom_filter_menu .dropdown-toggle`));
-};
+}
 
-export const editConditionField = async (el, index, fieldName) => {
+export async function editConditionField(el, index, fieldName) {
     const condition = findItem(el, `.o_filter_condition`, index);
     const select = findItem(condition, "select", 0);
     select.value = fieldName;
     await triggerEvent(select, null, "change");
-};
+}
 
-export const editConditionOperator = async (el, index, operator) => {
+export async function editConditionOperator(el, index, operator) {
     const condition = findItem(el, `.o_filter_condition`, index);
     const select = findItem(condition, "select", 1);
     select.value = operator;
     await triggerEvent(select, null, "change");
-};
+}
 
-export const editConditionValue = async (el, index, value, valueIndex = 0) => {
+export async function editConditionValue(el, index, value, valueIndex = 0) {
     const condition = findItem(el, `.o_filter_condition`, index);
     const target = findItem(
         condition,
@@ -139,15 +179,15 @@ export const editConditionValue = async (el, index, value, valueIndex = 0) => {
     );
     target.value = value;
     await triggerEvent(target, null, "change");
-};
+}
 
-export const applyFilter = async (el) => {
+export async function applyFilter(el) {
     await click(findItem(el, `.o_add_custom_filter_menu .dropdown-menu button.o_apply_filter`));
-};
+}
 
-export const addCondition = async (el) => {
+export async function addCondition(el) {
     await click(findItem(el, `.o_add_custom_filter_menu .dropdown-menu button.o_add_condition`));
-};
+}
 
 export async function removeCondition(el, index) {
     const condition = findItem(el, `.o_filter_condition`, index);
@@ -156,98 +196,130 @@ export async function removeCondition(el, index) {
 
 /** Group by menu */
 
-export const toggleGroupByMenu = async (el) => {
+export async function toggleGroupByMenu(el) {
     await click(findItem(el, `.o_group_by_menu .dropdown-toggle`));
-};
+}
 
-export const toggleAddCustomGroup = async (el) => {
+export async function toggleAddCustomGroup(el) {
     await mouseEnter(findItem(el, `.o_add_custom_group_menu .dropdown-toggle`));
-};
+}
 
-export const selectGroup = async (el, fieldName) => {
+export async function selectGroup(el, fieldName) {
     const select = findItem(el, `.o_add_custom_group_menu .dropdown-menu select`);
     select.value = fieldName;
     await triggerEvent(select, null, "change");
-};
+}
 
-export const applyGroup = async (el) => {
+export async function applyGroup(el) {
     await click(findItem(el, `.o_add_custom_group_menu .dropdown-menu .btn`));
-};
+}
+
+export async function groupByMenu(el, fieldName) {
+    await toggleGroupByMenu(el);
+    await toggleAddCustomGroup(el);
+    await selectGroup(el, fieldName);
+    await applyGroup(el);
+}
 
 /** Favorite menu */
 
-export const toggleFavoriteMenu = async (el) => {
+export async function toggleFavoriteMenu(el) {
     await click(findItem(el, `.o_favorite_menu .dropdown-toggle`));
-};
+}
 
-export const deleteFavorite = async (el, favoriteFinder) => {
+export async function deleteFavorite(el, favoriteFinder) {
     const favorite = findItem(el, `.o_favorite_menu .o_menu_item`, favoriteFinder);
     await click(findItem(favorite, "i.fa-trash-o"));
-};
+}
 
-export const toggleSaveFavorite = async (el) => {
+export async function toggleSaveFavorite(el) {
     await mouseEnter(findItem(el, `.o_favorite_menu .o_add_favorite .dropdown-toggle`));
-};
+}
 
-export const editFavoriteName = async (el, name) => {
+export async function editFavoriteName(el, name) {
     const input = findItem(
         el,
         `.o_favorite_menu .o_add_favorite .dropdown-menu input[type="text"]`
     );
     input.value = name;
     await triggerEvent(input, null, "input");
-};
+}
 
-export const saveFavorite = async (el) => {
+export async function saveFavorite(el) {
     await click(findItem(el, `.o_favorite_menu .o_add_favorite .dropdown-menu button`));
-};
+}
 
 /** Comparison menu */
 
-export const toggleComparisonMenu = async (el) => {
+export async function toggleComparisonMenu(el) {
     await click(findItem(el, `.o_comparison_menu button.dropdown-toggle`));
-};
+}
 
 /** Search bar */
 
-export const getFacetTexts = (target) => {
+export function getFacetTexts(target) {
     const el = getNode(target);
     return [...el.querySelectorAll(`div.o_searchview_facet`)].map((facet) =>
         facet.innerText.trim()
     );
-};
+}
 
-export const removeFacet = async (el, facetFinder = 0) => {
+export async function removeFacet(el, facetFinder = 0) {
     const facet = findItem(el, `div.o_searchview_facet`, facetFinder);
     await click(facet.querySelector("i.o_facet_remove"));
-};
+}
 
-export const editSearch = async (el, value) => {
+export async function editSearch(el, value) {
     const input = findItem(el, `.o_searchview input`);
     input.value = value;
     await triggerEvent(input, null, "input");
-};
+}
 
-export const validateSearch = async (el) => {
+export async function validateSearch(el) {
     const input = findItem(el, `.o_searchview input`);
     await triggerEvent(input, null, "keydown", { key: "Enter" });
-};
+}
 
 /** Switch View */
 
-export const switchView = async (el, viewType) => {
+export async function switchView(el, viewType) {
     await click(findItem(el, `button.o_switch_view.o_${viewType}`));
-};
+}
+
+/** Pager */
+
+export function getPagerValue(el) {
+    const valueEl = findItem(el, ".o_pager .o_pager_value");
+    return valueEl.innerText.trim().split("-").map(Number);
+}
+
+export function getPagerLimit(el) {
+    const limitEl = findItem(el, ".o_pager .o_pager_limit");
+    return Number(limitEl.innerText.trim());
+}
+
+export async function pagerNext(el) {
+    await click(findItem(el, ".o_pager button.o_pager_next"));
+}
+
+export async function pagerPrevious(el) {
+    await click(findItem(el, ".o_pager button.o_pager_previous"));
+}
+
+export async function editPager(el, value) {
+    await click(findItem(el, ".o_pager .o_pager_value"));
+    await editInput(getNode(el), ".o_pager .o_pager_value.o_input", value);
+}
 
 /////////////////////////////////////
 // Action Menu
 /////////////////////////////////////
-// /**
-//  * @param {EventTarget} el
-//  * @param {string} [menuFinder="Action"]
-//  * @returns {Promise}
-//  */
-// export async function toggleActionMenu(el, menuFinder = "Action") {
-//     const dropdown = findItem(el, `.o_cp_action_menus button`, menuFinder);
-//     await click(dropdown);
-// }
+/**
+ * @param {EventTarget} el
+ * @param {string} [menuFinder="Action"]
+ * @returns {Promise}
+ */
+export async function toggleActionMenu(el, menuFinder = "Action") {
+    const dropdown = findItem(el, `.o_cp_action_menus button`, menuFinder);
+    await click(dropdown);
+}
diff --git a/addons/web/static/tests/search/search_panel_tests.js b/addons/web/static/tests/search/search_panel_tests.js
index 66a537068ad..ebe53c363c4 100644
--- a/addons/web/static/tests/search/search_panel_tests.js
+++ b/addons/web/static/tests/search/search_panel_tests.js
@@ -4,9 +4,9 @@ import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 import {
     click,
     getFixture,
-    legacyExtraNextTick,
     makeDeferred,
     nextTick,
+    selectDropdownItem,
 } from "@web/../tests/helpers/utils";
 import {
     makeWithSearch,
@@ -20,7 +20,6 @@ import { registry } from "@web/core/registry";
 import { FilterMenu } from "@web/search/filter_menu/filter_menu";
 import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
 import { SearchPanel } from "@web/search/search_panel/search_panel";
-import testUtils from "web.test_utils";
 
 const { Component, xml } = owl;
 
@@ -30,7 +29,7 @@ const serviceRegistry = registry.category("services");
 // Helpers
 //-----------------------------------------------------------------------------
 
-const getValues = (el, type) => {
+function getValues(el, type) {
     switch (type) {
         case "category": {
             return [...el.querySelectorAll(".o_search_panel_category_value header")];
@@ -45,9 +44,9 @@ const getValues = (el, type) => {
             return [...el.getElementsByClassName("o_search_panel_group_header")];
         }
     }
-};
+}
 
-const getValue = (el, type, content = 0, additionalSelector = null) => {
+function getValue(el, type, content = 0, additionalSelector = null) {
     const values = getValues(el, type);
     let match = null;
     if (Number.isInteger(content) && content < values.length) {
@@ -60,33 +59,51 @@ const getValue = (el, type, content = 0, additionalSelector = null) => {
         match = match.querySelector(additionalSelector);
     }
     return match;
-};
+}
 
-const parseContent = ([value, counter]) => (counter ? `${value}: ${counter}` : value);
-const getContent = (el, type, parse = parseContent) => {
+function parseContent([value, counter]) {
+    return counter ? `${value}: ${counter}` : value;
+}
+
+function getContent(el, type, parse = parseContent) {
     return getValues(el, type)
         .map((v) => parse(v.innerText.trim().split(/\s+/)))
         .filter((v) => v !== null);
-};
+}
 
 // Categories
-const getCategory = (el, ...args) => getValue(el, "category", ...args);
-const getCategoriesContent = (el, ...args) => getContent(el, "category", ...args);
+function getCategory(el, ...args) {
+    return getValue(el, "category", ...args);
+}
+
+function getCategoriesContent(el, ...args) {
+    return getContent(el, "category", ...args);
+}
 
 // Filters
-const getFilter = (el, ...args) => getValue(el, "filter", ...args);
-const getFiltersContent = (el, ...args) => getContent(el, "filter", ...args);
+function getFilter(el, ...args) {
+    return getValue(el, "filter", ...args);
+}
+
+function getFiltersContent(el, ...args) {
+    return getContent(el, "filter", ...args);
+}
 
 // Filter groups
-const getFilterGroup = (el, ...args) => getValue(el, "filterGroup", ...args);
-const getFilterGroupContent = (el, ...args) => {
+function getFilterGroup(el, ...args) {
+    return getValue(el, "filterGroup", ...args);
+}
+
+function getFilterGroupContent(el, ...args) {
     const group = getFilterGroup(el, ...args);
     return [getContent(group, "groupHeader")[0], getFiltersContent(group)];
-};
+}
 
-const getCounters = (v) => (isNaN(v[1]) ? null : Number(v[1]));
+function getCounters(v) {
+    return isNaN(v[1]) ? null : Number(v[1]);
+}
 
-const makeTestComponent = ({ onWillStart, onWillUpdateProps } = {}) => {
+function makeTestComponent({ onWillStart, onWillUpdateProps } = {}) {
     let domain;
     class TestComponent extends Component {
         setup() {
@@ -114,7 +131,7 @@ const makeTestComponent = ({ onWillStart, onWillUpdateProps } = {}) => {
         </div>`;
 
     return { TestComponent, getDomain: () => domain };
-};
+}
 
 let serverData;
 let target;
@@ -261,7 +278,7 @@ QUnit.module("Search", (hooks) => {
                         <filter name="filter" string="Filter" domain="[('bar', '=', true)]"/>
                         <filter name="true_domain" string="True Domain" domain="[(1, '=', 1)]"/>
                         <filter name="group_by_bar" string="Bar" context="{ 'group_by': 'bar' }"/>
-                        <searchpanel view_types="kanban,tree,toy">
+                        <searchpanel view_types="kanban,list,toy">
                             <field name="company_id" enable_counters="1" expand="1"/>
                             <field name="category_id" select="multi" enable_counters="1" expand="1"/>
                         </searchpanel>
@@ -1997,25 +2014,23 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_kanban_view .o_content.o_component_with_search_panel");
+        assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
 
         await switchView(target, "pivot");
 
-        assert.containsOnce(target, ".o_content .o_pivot");
-        assert.containsNone(target, ".o_content .o_search_panel");
+        assert.containsOnce(target, ".o_pivot_view .o_content");
+        assert.containsNone(target, ".o_pivot_view .o_content .o_search_panel");
 
         await switchView(target, "list");
-        await legacyExtraNextTick();
 
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_list_view");
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_list_view .o_content.o_component_with_search_panel");
+        assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
 
         await click(target.querySelector(".o_data_row .o_data_cell"));
-        await legacyExtraNextTick();
 
-        assert.containsOnce(target, ".o_content .o_form_view");
-        assert.containsNone(target, ".o_content .o_search_panel");
+        assert.containsOnce(target, ".o_form_view .o_content");
+        assert.containsNone(target, ".o_form_view .o_content .o_search_panel");
     });
 
     QUnit.test("search panel with view_types attribute", async (assert) => {
@@ -2037,13 +2052,12 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1);
 
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
-        assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+        assert.containsOnce(target, ".o_kanban_view .o_content.o_component_with_search_panel");
+        assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
 
         await switchView(target, "list");
-        await legacyExtraNextTick();
 
-        assert.containsOnce(target, ".o_content .o_list_view");
+        assert.containsOnce(target, ".o_list_view .o_content");
         assert.containsNone(target, ".o_content .o_search_panel");
 
         await switchView(target, "pivot");
@@ -2057,9 +2071,9 @@ QUnit.module("Search", (hooks) => {
 
         const webclient = await createWebClient({
             serverData,
-            async mockRPC(route, { domain }) {
-                if (route === "/web/dataset/search_read") {
-                    assert.step(JSON.stringify(domain));
+            async mockRPC(route, { kwargs, method }) {
+                if (method === "web_search_read") {
+                    assert.step(JSON.stringify(kwargs.domain));
                 }
             },
         });
@@ -2076,7 +2090,6 @@ QUnit.module("Search", (hooks) => {
         assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
 
         await switchView(target, "list");
-        await legacyExtraNextTick();
 
         assert.hasClass(getCategory(target, 1), "active");
         assert.containsN(target, ".o_data_row", 2);
@@ -2088,7 +2101,6 @@ QUnit.module("Search", (hooks) => {
         assert.containsN(target, ".o_data_row", 2);
 
         await switchView(target, "kanban");
-        await legacyExtraNextTick();
 
         assert.hasClass(getCategory(target, 2), "active");
         assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 2);
@@ -2107,9 +2119,9 @@ QUnit.module("Search", (hooks) => {
 
         const webclient = await createWebClient({
             serverData,
-            async mockRPC(route, { domain }) {
-                if (route === "/web/dataset/search_read") {
-                    assert.step(JSON.stringify(domain));
+            async mockRPC(route, { kwargs, method }) {
+                if (method === "web_search_read") {
+                    assert.step(JSON.stringify(kwargs.domain));
                 }
             },
         });
@@ -2126,7 +2138,6 @@ QUnit.module("Search", (hooks) => {
         assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 1);
 
         await switchView(target, "list");
-        await legacyExtraNextTick();
 
         assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
         assert.containsN(target, ".o_data_row", 1);
@@ -2138,15 +2149,12 @@ QUnit.module("Search", (hooks) => {
         assert.containsN(target, ".o_data_row", 4);
 
         await switchView(target, "kanban");
-        await legacyExtraNextTick();
 
         assert.containsN(target, ".o_search_panel_filter_value input:checked", 2);
         assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
         await click(target.querySelector(".o_kanban_record"));
-        await legacyExtraNextTick();
         await click(target.querySelector(".breadcrumb-item"));
-        await legacyExtraNextTick();
 
         assert.verifySteps([
             "[]", // initial search_read
@@ -2167,8 +2175,8 @@ QUnit.module("Search", (hooks) => {
 
             await doAction(webclient, 1);
 
-            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_kanban_view");
-            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+            assert.containsOnce(target, ".o_kanban_view .o_content.o_component_with_search_panel");
+            assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
             assert.containsNone(target, ".o_search_panel_filter_value input:checked");
             assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
@@ -2181,16 +2189,15 @@ QUnit.module("Search", (hooks) => {
             // switch to pivot
             await switchView(target, "pivot");
 
-            assert.containsOnce(target, ".o_content .o_pivot");
+            assert.containsOnce(target, ".o_pivot_view .o_content");
             assert.containsNone(target, ".o_content .o_search_panel");
             assert.strictEqual(target.querySelector(".o_pivot_cell_value").innerText.trim(), "15");
 
             // switch to list
             await switchView(target, "list");
-            await legacyExtraNextTick();
 
-            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_list_view");
-            assert.containsOnce(target, ".o_content.o_controller_with_searchpanel .o_search_panel");
+            assert.containsOnce(target, ".o_list_view .o_content.o_component_with_search_panel");
+            assert.containsOnce(target, ".o_content.o_component_with_search_panel .o_search_panel");
             assert.containsOnce(target, ".o_search_panel_filter_value input:checked");
             assert.containsN(target, ".o_data_row", 1);
         }
@@ -2202,8 +2209,7 @@ QUnit.module("Search", (hooks) => {
         const webclient = await createWebClient({ serverData });
 
         await doAction(webclient, 1, { viewType: "form" });
-        await click(target.querySelector(".o_form_view button"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_form_view .o_form_nosheet button"));
 
         assert.containsOnce(target, ".o_kanban_view");
         assert.containsOnce(target, ".o_search_panel");
@@ -2213,8 +2219,6 @@ QUnit.module("Search", (hooks) => {
     QUnit.test(
         "categories and filters are not reloaded when switching between views",
         async (assert) => {
-            assert.expect(3);
-
             const webclient = await createWebClient({
                 serverData,
                 async mockRPC(route, { method }) {
@@ -2227,9 +2231,7 @@ QUnit.module("Search", (hooks) => {
             await doAction(webclient, 1);
 
             await switchView(target, "list");
-            await legacyExtraNextTick();
             await switchView(target, "kanban");
-            await legacyExtraNextTick();
 
             assert.verifySteps([
                 "search_panel_select_range", // kanban: categories
@@ -2241,8 +2243,6 @@ QUnit.module("Search", (hooks) => {
     QUnit.test(
         "categories and filters are loaded when switching from a view without the search panel",
         async (assert) => {
-            assert.expect(5);
-
             // set the pivot view as the default view
             serverData.actions[1].views = [
                 [false, "pivot"],
@@ -2263,18 +2263,14 @@ QUnit.module("Search", (hooks) => {
             assert.verifySteps([]);
 
             await switchView(target, "list");
-            await legacyExtraNextTick();
             assert.verifySteps(["search_panel_select_range", "search_panel_select_multi_range"]);
 
             await switchView(target, "kanban");
-            await legacyExtraNextTick();
             assert.verifySteps([]);
         }
     );
 
     QUnit.test("scroll position is kept when switching between controllers", async (assert) => {
-        assert.expect(6);
-
         for (let i = 10; i < 20; i++) {
             serverData.models.category.records.push({ id: i, name: "Cat " + i });
         }
@@ -2289,23 +2285,21 @@ QUnit.module("Search", (hooks) => {
 
         const getSearchPanel = () => target.querySelector(".o_search_panel");
 
-        assert.containsOnce(target, ".o_content .o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view .o_content");
         assert.strictEqual(getSearchPanel().scrollTop, 0);
 
         // simulate a scroll in the search panel and switch into list
         getSearchPanel().scrollTo(0, 100);
         await switchView(target, "list");
-        await legacyExtraNextTick();
 
-        assert.containsOnce(target, ".o_content .o_list_view");
+        assert.containsOnce(target, ".o_list_view .o_content");
         assert.strictEqual(getSearchPanel().scrollTop, 100);
 
         // simulate another scroll and switch back to kanban
         getSearchPanel().scrollTo(0, 25);
         await switchView(target, "kanban");
-        await legacyExtraNextTick();
 
-        assert.containsOnce(target, ".o_content .o_kanban_view");
+        assert.containsOnce(target, ".o_kanban_view .o_content");
         assert.strictEqual(getSearchPanel().scrollTop, 25);
     });
 
@@ -2329,9 +2323,7 @@ QUnit.module("Search", (hooks) => {
 
         await doAction(webclient, 1, { viewType: "form" });
 
-        await testUtils.fields.many2one.clickOpenDropdown("company_id");
-        await testUtils.fields.many2one.clickItem("company_id", "Search");
-        await legacyExtraNextTick();
+        await selectDropdownItem(target, "company_id", "Search More...");
 
         assert.containsOnce(document.body, ".modal .o_list_view");
         assert.containsNone(document.body, ".modal .o_search_panel");
diff --git a/addons/web/static/tests/setup.js b/addons/web/static/tests/setup.js
index 5f5d584a0b2..2dd44f517a8 100644
--- a/addons/web/static/tests/setup.js
+++ b/addons/web/static/tests/setup.js
@@ -11,6 +11,10 @@ import { session as sessionInfo } from "@web/session";
 import { prepareLegacyRegistriesWithCleanup } from "./helpers/legacy_env_utils";
 import { config as transitionConfig } from "@web/core/transition";
 
+import { registry } from "@web/core/registry";
+import { formView } from "@web/views/form/form_view";
+import { listView } from "@web/views/list/list_view";
+
 transitionConfig.disabled = true;
 
 import { patch } from "@web/core/utils/patch";
@@ -146,6 +150,9 @@ function patchBrowserWithCleanup() {
             // in tests, we never want to interact with the real local/session storages.
             localStorage: makeRAMLocalStorage(),
             sessionStorage: makeRAMLocalStorage(),
+            // Don't want original animation frames in tests
+            requestAnimationFrame: (fn) => fn(),
+            cancelAnimationFrame: () => {},
         },
         { pure: true }
     );
@@ -221,7 +228,7 @@ function removeUnwantedAttrsFromTemplates(templates, attrs) {
         element.removeAttribute(attrKey);
         element.setAttribute(`${prefix}data-${attrName}`, attrValue);
     }
-    const attrPrefixes = ['', 't-att-', 't-attf-'];
+    const attrPrefixes = ["", "t-att-", "t-attf-"];
     for (const attrName of attrs) {
         for (const prefix of attrPrefixes) {
             for (const element of templates.querySelectorAll(`*[${prefix}${attrName}]`)) {
@@ -241,6 +248,10 @@ export async function setupTests() {
         patchLegacyCoreBus();
         patchOdoo();
         patchSessionInfo();
+
+        // WOWL: remove this once new form and list views are activated
+        registry.category("views").add("form", formView, { force: true });
+        registry.category("views").add("list", listView, { force: true });
     });
 
     const templatesUrl = `/web/webclient/qweb/${new Date().getTime()}?bundle=web.assets_qweb`;
@@ -251,7 +262,7 @@ export async function setupTests() {
     // we assert for the scroll position. The src attribute is removed
     // as well to make sure images won't trigger a GET request on the
     // server.
-    removeUnwantedAttrsFromTemplates(window.__OWL_TEMPLATES__, ['alt', 'src']);
+    removeUnwantedAttrsFromTemplates(window.__OWL_TEMPLATES__, ["alt", "src"]);
     session.owlTemplates = window.__OWL_TEMPLATES__;
     await Promise.all([whenReady(), legacyProm]);
 
diff --git a/addons/web/static/tests/views/fields/ace_editor_field_tests.js b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
new file mode 100644
index 00000000000..ff5056da2fb
--- /dev/null
+++ b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
@@ -0,0 +1,60 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "text",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: `yop`,
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("AceEditorField");
+
+    QUnit.test("AceEditorField on text fields works", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" widget="ace" />
+                </form>`,
+        });
+
+        assert.ok("ace" in window, "the ace library should be loaded");
+        assert.containsOnce(
+            target,
+            "div.ace_content",
+            "should have rendered something with ace editor"
+        );
+
+        assert.ok(target.querySelector(".o_field_ace").textContent.includes("yop"));
+    });
+});
diff --git a/addons/web/static/tests/views/fields/badge_field_tests.js b/addons/web/static/tests/views/fields/badge_field_tests.js
new file mode 100644
index 00000000000..069c3063777
--- /dev/null
+++ b/addons/web/static/tests/views/fields/badge_field_tests.js
@@ -0,0 +1,130 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: {
+                            string: "Char Field",
+                            type: "char",
+                            default: "Default char value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        many2one_field: {
+                            string: "Many2one Field",
+                            type: "many2one",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        selection_field: {
+                            string: "Selection",
+                            type: "selection",
+                            searchable: true,
+                            selection: [
+                                ["normal", "Normal"],
+                                ["blocked", "Blocked"],
+                                ["done", "Done"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            many2one_field: 4,
+                            selection_field: "blocked",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            many2one_field: 1,
+                            selection_field: "normal",
+                        },
+                        {
+                            id: 3,
+                            display_name: "", // empty value
+                            selection_field: "done",
+                        },
+                        {
+                            id: 4,
+                            display_name: "fourth record",
+                            selection_field: "done",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+        target = getFixture();
+    });
+
+    QUnit.module("BadgeField");
+
+    QUnit.test("BadgeField component on a char field in list view", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: '<list><field name="display_name" widget="badge"/></list>',
+        });
+
+        assert.containsOnce(target, '.o_field_badge[name="display_name"]:contains(first record)');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"]:contains(second record)');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"]:contains(fourth record)');
+    });
+
+    QUnit.test("BadgeField component on a selection field in list view", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: '<list><field name="selection_field" widget="badge"/></list>',
+        });
+
+        assert.containsOnce(target, '.o_field_badge[name="selection_field"]:contains(Blocked)');
+        assert.containsOnce(target, '.o_field_badge[name="selection_field"]:contains(Normal)');
+        assert.containsN(target, '.o_field_badge[name="selection_field"]:contains(Done)', 2);
+    });
+
+    QUnit.test("BadgeField component on a many2one field in list view", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: '<list><field name="many2one_field" widget="badge"/></list>',
+        });
+
+        assert.containsOnce(target, '.o_field_badge[name="many2one_field"]:contains(first record)');
+        assert.containsOnce(
+            target,
+            '.o_field_badge[name="many2one_field"]:contains(fourth record)'
+        );
+    });
+
+    QUnit.test("BadgeField component with decoration-xxx attributes", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <list>
+                    <field name="selection_field" widget="badge"/>
+                    <field name="display_name" widget="badge" decoration-danger="selection_field == 'done'" decoration-warning="selection_field == 'blocked'"/>
+                </list>`,
+        });
+
+        assert.containsN(target, '.o_field_badge[name="display_name"]', 4);
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-danger-light');
+        assert.containsOnce(target, '.o_field_badge[name="display_name"] .bg-warning-light');
+    });
+});
diff --git a/addons/web/static/tests/views/fields/badge_selection_field_tests.js b/addons/web/static/tests/views/fields/badge_selection_field_tests.js
new file mode 100644
index 00000000000..97714fdca41
--- /dev/null
+++ b/addons/web/static/tests/views/fields/badge_selection_field_tests.js
@@ -0,0 +1,151 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                        reference: {
+                            string: "Reference Field",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner_type", "Partner Type"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            reference: "product,37",
+                        },
+                        {
+                            id: 2,
+                            product_id: 37,
+                        },
+                    ],
+                },
+                product: {
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("BadgeSelectionField");
+
+    QUnit.test("BadgeSelectionField widget on a many2one in a new record", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="product_id" widget="selection_badge"/></form>',
+        });
+
+        assert.containsOnce(
+            target,
+            "div.o_field_selection_badge",
+            "should have rendered outer div"
+        );
+        assert.containsN(target, "span.o_selection_badge", 2, "should have 2 possible choices");
+        assert.strictEqual(
+            target.querySelector("span.o_selection_badge").textContent,
+            "xphone",
+            "one of them should be xphone"
+        );
+        assert.containsNone(target, "span.active", "none of the input should be checked");
+
+        await click(target.querySelector("span.o_selection_badge"));
+
+        assert.containsOnce(target, "span.active", "one of the input should be checked");
+
+        await click(target, ".o_form_button_save");
+
+        var newRecord = _.last(serverData.models.partner.records);
+        assert.strictEqual(newRecord.product_id, 37, "should have saved record with correct value");
+    });
+
+    QUnit.test(
+        "BadgeSelectionField widget on a selection in a new record",
+        async function (assert) {
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: '<form><field name="color" widget="selection_badge"/></form>',
+            });
+
+            assert.containsOnce(
+                target,
+                "div.o_field_selection_badge",
+                "should have rendered outer div"
+            );
+            assert.containsN(target, "span.o_selection_badge", 2, "should have 2 possible choices");
+            assert.strictEqual(
+                target.querySelector("span.o_selection_badge").textContent,
+                "Red",
+                "one of them should be Red"
+            );
+
+            // click on 2nd option
+            await click(target.querySelector("span.o_selection_badge:last-child"));
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            var newRecord = _.last(serverData.models.partner.records);
+            assert.strictEqual(
+                newRecord.color,
+                "black",
+                "should have saved record with correct value"
+            );
+        }
+    );
+
+    QUnit.test(
+        "BadgeSelectionField widget on a selection in a readonly mode",
+        async function (assert) {
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: '<form><field name="color" widget="selection_badge" readonly="1"/></form>',
+            });
+
+            assert.containsOnce(
+                target,
+                "div.o_readonly_modifier span",
+                "should have 1 possible value in readonly mode"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/binary_field_tests.js b/addons/web/static/tests/views/fields/binary_field_tests.js
new file mode 100644
index 00000000000..da4ae98c18a
--- /dev/null
+++ b/addons/web/static/tests/views/fields/binary_field_tests.js
@@ -0,0 +1,327 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { patch, unpatch } from "@web/core/utils/patch";
+import { FileUploader } from "@web/views/fields/file_handler";
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { makeMockXHR } from "@web/../tests/helpers/mock_services";
+import {
+    click,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            trim: true,
+                        },
+                        document: { string: "Binary", type: "binary" },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            foo: "coucou.txt",
+                            document: "coucou==\n",
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("BinaryField");
+
+    QUnit.test("BinaryField is correctly rendered", async function (assert) {
+        assert.expect(15);
+
+        async function send(data) {
+            assert.ok(data instanceof FormData);
+            assert.strictEqual(
+                data.get("field"),
+                "document",
+                "we should download the field document"
+            );
+            assert.strictEqual(
+                data.get("data"),
+                "coucou==\n",
+                "we should download the correct data"
+            );
+
+            this.status = 200;
+            this.response = new Blob([data.get("data")], { type: "text/plain" });
+        }
+        const MockXHR = makeMockXHR("", send);
+
+        patchWithCleanup(
+            browser,
+            {
+                XMLHttpRequest: MockXHR,
+            },
+            { pure: true }
+        );
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="document" filename="foo"/>
+                    <field name="foo"/>
+                </form>`,
+            resId: 1,
+        });
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="document"] a > .fa-download',
+            "the binary field should be rendered as a downloadable link in readonly"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="document"] span').textContent.trim(),
+            "coucou.txt",
+            "the binary field should display the name of the file in the link"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char").textContent,
+            "coucou.txt",
+            "the filename field should have the file name as value"
+        );
+
+        // Testing the download button in the field
+        // We must avoid the browser to download the file effectively
+        const prom = makeDeferred();
+        const downloadOnClick = (ev) => {
+            const target = ev.target;
+            if (target.tagName === "A" && "download" in target.attributes) {
+                ev.preventDefault();
+                document.removeEventListener("click", downloadOnClick);
+                prom.resolve();
+            }
+        };
+        document.addEventListener("click", downloadOnClick);
+        registerCleanup(() => document.removeEventListener("click", downloadOnClick));
+        await click(target.querySelector('.o_field_widget[name="document"] a'));
+        await prom;
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsNone(
+            target,
+            '.o_field_widget[name="document"] a > .fa-download',
+            "the binary field should not be rendered as a downloadable link in edit"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="document"].o_field_binary span')
+                .textContent,
+            "coucou.txt",
+            "the binary field should display the file name in the input edit mode"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_binary .o_clear_file_button",
+            "there shoud be a button to clear the file"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char input").value,
+            "coucou.txt",
+            "the filename field should have the file name as value"
+        );
+
+        await click(target.querySelector(".o_field_binary .o_clear_file_button"));
+
+        assert.isNotVisible(
+            target.querySelector(".o_field_binary input"),
+            "the input should be hidden"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_binary .o_select_file_button",
+            "there should be a button to upload the file"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char input").value,
+            "",
+            "the filename field should be empty since we removed the file"
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.containsNone(
+            target,
+            '.o_field_widget[name="document"] a > .fa-download',
+            "the binary field should not render as a downloadable link since we removed the file"
+        );
+        assert.containsNone(
+            target,
+            "o_field_widget span",
+            "the binary field should not display a filename in the link since we removed the file"
+        );
+    });
+
+    QUnit.test(
+        "binary fields input value is empty when clearing after uploading",
+        async function (assert) {
+            patch(FileUploader.prototype, "test.FileUploader", {
+                async onFileChange(ev) {
+                    const file = new File([ev.target.value], ev.target.value + ".txt", {
+                        type: "text/plain",
+                    });
+                    await this._super({
+                        target: { files: [file] },
+                    });
+                },
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="document" filename="foo"/>
+                        <field name="foo"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_binary input");
+            // We need to convert the input type since we can't programmatically set
+            // the value of a file input. The patch of the onFileChange will create
+            // a file object to be used by the component.
+            input.setAttribute("type", "text");
+            input.value = "fake_file";
+            input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+            input.dispatchEvent(new Event("change", { bubbles: true }));
+            await nextTick();
+            await nextTick();
+
+            assert.strictEqual(
+                target.querySelector(".o_field_binary span").textContent,
+                "fake_file.txt",
+                'displayed value should be changed to "fake_file.txt"'
+            );
+
+            await click(target.querySelector(".o_clear_file_button"));
+
+            assert.strictEqual(
+                target.querySelector(".o_input_file").value,
+                "",
+                "input value should be empty"
+            );
+
+            unpatch(FileUploader.prototype, "test.FileUploader");
+        }
+    );
+
+    QUnit.test("BinaryField: option accepted_file_extensions", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="document" widget="binary" options="{'accepted_file_extensions': '.dat,.bin'}"/>
+                </form>`,
+        });
+        assert.strictEqual(
+            target.querySelector("input.o_input_file").getAttribute("accept"),
+            ".dat,.bin",
+            "the input should have the correct ``accept`` attribute"
+        );
+    });
+
+    QUnit.test(
+        "BinaryField that is readonly in create mode does not download",
+        async function (assert) {
+            async function download() {
+                assert.step("We shouldn't be getting the file.");
+            }
+            const MockXHR = makeMockXHR("", download);
+
+            patchWithCleanup(
+                browser,
+                {
+                    XMLHttpRequest: MockXHR,
+                },
+                { pure: true }
+            );
+
+            serverData.models.partner.onchanges = {
+                product_id: function (obj) {
+                    obj.document = "onchange==\n";
+                },
+            };
+
+            serverData.models.partner.fields.document.readonly = true;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="product_id"/>
+                        <field name="document" filename="yooo"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target, ".o_form_button_create");
+            await click(target, ".o_field_many2one[name='product_id'] input");
+            await click(
+                target.querySelector(".o_field_many2one[name='product_id'] .dropdown-item")
+            );
+
+            assert.containsNone(
+                target,
+                '.o_field_widget[name="document"] a',
+                "The link to download the binary should not be present"
+            );
+            assert.containsNone(
+                target,
+                '.o_field_widget[name="document"] a > .fa-download',
+                "The download icon should not be present"
+            );
+
+            assert.verifySteps([], "We shouldn't have passed through steps");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/boolean_favorite_field_tests.js b/addons/web/static/tests/views/fields/boolean_favorite_field_tests.js
new file mode 100644
index 00000000000..9a780983108
--- /dev/null
+++ b/addons/web/static/tests/views/fields/boolean_favorite_field_tests.js
@@ -0,0 +1,198 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        bar: { string: "Bar", type: "boolean", default: true, searchable: true },
+                    },
+                    records: [
+                        { id: 1, bar: true },
+                        { id: 2, bar: true },
+                        { id: 4, bar: true },
+                        { id: 3, bar: true },
+                        { id: 5, bar: false },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("BooleanFavoriteField");
+
+    QUnit.test("FavoriteField in kanban view", async function (assert) {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="bar" widget="boolean_favorite" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            domain: [["id", "=", 1]],
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_record .o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record .o_field_widget .o_favorite > a").textContent,
+            " Remove from Favorites",
+            'the label should say "Remove from Favorites"'
+        );
+
+        // click on favorite
+        await click(target, ".o_field_widget .o_favorite");
+        assert.containsNone(
+            target,
+            ".o_kanban_record  .o_field_widget .o_favorite > a i.fa.fa-star",
+            "should not be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record .o_field_widget .o_favorite > a").textContent,
+            " Add to Favorites",
+            'the label should say "Add to Favorites"'
+        );
+    });
+
+    QUnit.test("FavoriteField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="bar" widget="boolean_favorite" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .o_favorite > a").textContent,
+            " Remove from Favorites",
+            'the label should say "Remove from Favorites"'
+        );
+
+        // click on favorite
+        await click(target, ".o_field_widget .o_favorite");
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_favorite > a i.fa.fa-star",
+            "should not be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .o_favorite > a").textContent,
+            " Add to Favorites",
+            'the label should say "Add to Favorites"'
+        );
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_favorite > a i.fa.fa-star-o",
+            "should not be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .o_favorite > a").textContent,
+            " Add to Favorites",
+            'the label should say "Add to Favorites"'
+        );
+
+        // click on favorite
+        await click(target, ".o_field_widget .o_favorite");
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .o_favorite > a").textContent,
+            " Remove from Favorites",
+            'the label should say "Remove from Favorites"'
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .o_favorite > a").textContent,
+            " Remove from Favorites",
+            'the label should say "Remove from Favorites"'
+        );
+    });
+
+    QUnit.test("FavoriteField in editable list view without label", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="bar" widget="boolean_favorite" nolabel="1" />
+                </tree>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_data_row:first .o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector("tbody td:not(.o_list_record_selector)"));
+        assert.containsOnce(
+            target,
+            ".o_data_row:first .o_field_widget .o_favorite > a i.fa.fa-star",
+            "should be favorite"
+        );
+
+        // click on favorite
+        await click(target.querySelector(".o_data_row .o_field_widget .o_favorite"));
+        assert.containsNone(
+            target,
+            ".o_data_row:first .o_field_widget .o_favorite > a i.fa.fa-star",
+            "should not be favorite"
+        );
+
+        // save
+        await click(target, ".o_list_button_save");
+        assert.containsOnce(
+            target,
+            ".o_data_row:first .o_field_widget .o_favorite > a i.fa.fa-star-o",
+            "should not be favorite"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/boolean_field_tests.js b/addons/web/static/tests/views/fields/boolean_field_tests.js
new file mode 100644
index 00000000000..d8d2dfdf89c
--- /dev/null
+++ b/addons/web/static/tests/views/fields/boolean_field_tests.js
@@ -0,0 +1,306 @@
+/** @odoo-module **/
+
+import {
+    click,
+    getFixture,
+    nextTick,
+    triggerEvent,
+    triggerEvents,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        bar: { string: "Bar", type: "boolean", default: true, searchable: true },
+                    },
+                    records: [
+                        { id: 1, bar: true },
+                        { id: 2, bar: true },
+                        { id: 3, bar: true },
+                        { id: 4, bar: true },
+                        { id: 5, bar: false },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("BooleanField");
+
+    QUnit.test("boolean field in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="bar" string="Awesome checkbox" />
+                    <field name="bar" />
+                </form>`,
+        });
+
+        assert.containsOnce(target, ".o_field_boolean input:checked", "checkbox should be checked");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:disabled",
+            "checkbox should be disabled"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be checked"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:disabled",
+            "checkbox should not be disabled"
+        );
+
+        // uncheck the checkbox
+        await click(target, ".o_field_boolean input:checked");
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should no longer be checked"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still no longer be checked"
+        );
+
+        // switch to edit mode and test the opposite change
+        await click(target, ".o_form_button_edit");
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be unchecked"
+        );
+
+        // check the checkbox
+        await click(target, ".o_field_boolean input");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should now be checked"
+        );
+
+        // uncheck it back
+        await click(target, ".o_field_boolean input");
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should now be unchecked"
+        );
+
+        // check the checkbox by clicking on label
+        await click(target, ".o_form_view label:not(.custom-control-label)");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should now be checked"
+        );
+
+        // uncheck it back
+        await click(target, ".o_form_view label:not(.custom-control-label)");
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should now be unchecked"
+        );
+
+        // check the checkbox by hitting the "enter" key after focusing it
+        await triggerEvents(target, ".o_field_boolean input", [
+            ["focusin"],
+            ["keydown", { key: "Enter" }],
+            ["keyup", { key: "Enter" }],
+        ]);
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should now be checked"
+        );
+
+        // blindly press enter again, it should uncheck the checkbox
+        await triggerEvent(document.activeElement, null, "keydown", { key: "Enter" });
+        assert.containsNone(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should not be checked"
+        );
+        await nextTick();
+        // blindly press enter again, it should check the checkbox back
+        await triggerEvent(document.activeElement, null, "keydown", { key: "Enter" });
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be checked"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be checked"
+        );
+    });
+
+    QUnit.test("boolean field in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="bar" />
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            5,
+            "should have 5 checkboxes"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            4,
+            "should have 4 checked input"
+        );
+
+        // Edit a line
+        let cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        assert.ok(
+            cell.querySelector(".custom-checkbox input:checked").disabled,
+            "input should be disabled in readonly mode"
+        );
+        await click(cell);
+        assert.notOk(
+            cell.querySelector(".custom-checkbox input:checked").disabled,
+            "input should not have the disabled property in edit mode"
+        );
+        await click(cell, ".custom-checkbox");
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        assert.ok(
+            cell.querySelector(".custom-checkbox input:not(:checked)").disabled,
+            "input should be disabled again"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            5,
+            "should still have 5 checkboxes"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            3,
+            "should now have only 3 checked input"
+        );
+
+        // Re-Edit the line and fake-check the checkbox
+        await click(cell);
+        await click(cell, ".custom-checkbox");
+        await click(cell, ".custom-checkbox");
+
+        // Save
+        await click(target.querySelector(".o_list_button_save"));
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            5,
+            "should still have 5 checkboxes"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            3,
+            "should still have only 3 checked input"
+        );
+
+        // Re-Edit the line to check the checkbox back but this time click on
+        // the checkbox directly in readonly mode.
+        // This should not toggle the checkbox and only pass the record in edition.
+        cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        await click(cell, ".o_field_boolean");
+
+        assert.notOk(
+            cell.querySelector(".custom-checkbox input").disabled,
+            "input should not have the disabled property in edit mode"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox",
+            5,
+            "should still have 5 checkboxes"
+        );
+        assert.containsN(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked",
+            3,
+            "should still have only 3 checked input"
+        );
+    });
+
+    QUnit.test("readonly boolean field", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form><field name="bar" readonly="1"/></form>`,
+        });
+        assert.containsOnce(target, ".o_field_boolean input:checked", "checkbox should be checked");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:disabled",
+            "checkbox should be disabled"
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be checked"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:disabled",
+            "checkbox should still be disabled"
+        );
+
+        await click(target, ".o_field_boolean .custom-checkbox");
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:checked",
+            "checkbox should still be checked"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_boolean input:disabled",
+            "checkbox should still be disabled"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js b/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
new file mode 100644
index 00000000000..5d831f17c4e
--- /dev/null
+++ b/addons/web/static/tests/views/fields/boolean_toggle_field_tests.js
@@ -0,0 +1,205 @@
+/** @odoo-module **/
+
+import { click, clickEdit, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        bar: { string: "Bar", type: "boolean", default: true, searchable: true },
+                    },
+                    records: [{ id: 1, bar: false }],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("BooleanToggleField");
+
+    QUnit.test("use BooleanToggleField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar" widget="boolean_toggle" />
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".custom-checkbox.o_boolean_toggle",
+            "Boolean toggle widget applied to boolean field"
+        );
+        assert.containsOnce(
+            target,
+            ".custom-checkbox.o_boolean_toggle .fa-check-circle",
+            "Boolean toggle should have fa-check-circle icon"
+        );
+
+        await click(target, ".o_field_widget[name='bar'] input");
+        assert.containsOnce(
+            target,
+            ".custom-checkbox.o_boolean_toggle .fa-times-circle",
+            "Boolean toggle should have fa-times-circle icon"
+        );
+    });
+
+    QUnit.test("readonly BooleanToggleField is not disabled in edit mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar" widget="boolean_toggle" readonly="1" />
+                </form>`,
+        });
+
+        assert.containsOnce(target, ".o_boolean_toggle input:disabled:checked");
+
+        await click(target, ".o_field_widget[name='bar'] label");
+
+        assert.containsOnce(target, ".o_boolean_toggle input:disabled:checked");
+    });
+
+    QUnit.test("BooleanToggleField is not disabled in readonly mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
+        await click(target, ".o_field_widget[name='bar'] label");
+        assert.ok(target.querySelector(".o_boolean_toggle input").checked);
+    });
+
+    QUnit.test("BooleanToggleField is disabled with a readonly attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="bar" widget="boolean_toggle" readonly="1"/></form>',
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
+        await click(target, ".o_field_widget[name='bar'] label");
+        assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
+    });
+
+    QUnit.test("BooleanToggleField is enabled in edit mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".custom-checkbox.o_boolean_toggle");
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.notOk(target.querySelector(".o_boolean_toggle input").checked);
+        await click(target, ".o_field_widget[name='bar'] label");
+        assert.ok(target.querySelector(".o_boolean_toggle input").checked);
+    });
+
+    QUnit.test("boolean toggle widget is not disabled in readonly mode", async function (assert) {
+        assert.expect(3);
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                    <form>
+                        <field name="bar" widget="boolean_toggle" />
+                    </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".custom-checkbox.o_boolean_toggle",
+            "Boolean toggle widget applied to boolean field"
+        );
+        assert.containsNone(target, ".o_boolean_toggle input:checked");
+
+        await click(target, ".o_boolean_toggle");
+        assert.containsOnce(target, ".o_boolean_toggle input:checked");
+    });
+
+    QUnit.test(
+        "boolean toggle widget is disabled with a readonly attribute",
+        async function (assert) {
+            assert.expect(3);
+
+            await makeView({
+                type: "form",
+                serverData,
+                resModel: "partner",
+                resId: 1,
+                arch: `
+                    <form>
+                        <field name="bar" widget="boolean_toggle" readonly="1" />
+                    </form>`,
+            });
+
+            assert.containsOnce(
+                target,
+                ".custom-checkbox.o_boolean_toggle",
+                "Boolean toggle widget applied to boolean field"
+            );
+
+            await clickEdit(target);
+            assert.containsNone(target, ".o_boolean_toggle input:checked");
+
+            await click(target, ".o_boolean_toggle");
+            assert.containsNone(target, ".o_boolean_toggle input:checked");
+        }
+    );
+
+    QUnit.test("boolean toggle widget is enabled in edit mode", async function (assert) {
+        assert.expect(3);
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="bar" widget="boolean_toggle" />
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".custom-checkbox.o_boolean_toggle",
+            "Boolean toggle widget applied to boolean field"
+        );
+
+        await clickEdit(target);
+        assert.containsNone(target, ".o_boolean_toggle input:checked");
+
+        await click(target, ".o_boolean_toggle");
+        assert.containsOnce(target, ".o_boolean_toggle input:checked");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/char_field_tests.js b/addons/web/static/tests/views/fields/char_field_tests.js
new file mode 100644
index 00000000000..29c4bf2bf39
--- /dev/null
+++ b/addons/web/static/tests/views/fields/char_field_tests.js
@@ -0,0 +1,1016 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import {
+    click,
+    editInput,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import { session } from "@web/session";
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            foo: "yop",
+                            int_field: 10,
+                            p: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            foo: "blip",
+                            int_field: 0,
+                            p: [],
+                        },
+                        { id: 3, foo: "gnap", int_field: 80 },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            foo: "abc",
+                            int_field: false,
+                        },
+                        { id: 5, foo: "blop", int_field: -4 },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char", searchable: true },
+                        color: { string: "Color index", type: "integer", searchable: true },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                currency: {
+                    fields: {
+                        digits: { string: "Digits" },
+                        symbol: { string: "Currency Sumbol", type: "char", searchable: true },
+                        position: { string: "Currency Position", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "$",
+                            symbol: "$",
+                            position: "before",
+                        },
+                        {
+                            id: 2,
+                            display_name: "€",
+                            symbol: "€",
+                            position: "after",
+                        },
+                    ],
+                },
+                "ir.translation": {
+                    fields: {
+                        lang: { type: "char" },
+                        value: { type: "char" },
+                        res_id: { type: "integer" },
+                    },
+                    records: [
+                        {
+                            id: 99,
+                            res_id: 37,
+                            value: "",
+                            lang: "en_US",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("CharField");
+
+    QUnit.test("char field in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "yop",
+            "the value should be displayed properly"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".o_field_widget input[type='text']",
+            "should have an input for the char field"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input[type='text']").value,
+            "yop",
+            "input should contain field value in edit mode"
+        );
+
+        // change value in edit mode
+        const input = target.querySelector(".o_field_widget input[type='text']");
+        input.value = "limbo";
+        await triggerEvent(input, null, "change");
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "limbo",
+            "the new value should be displayed"
+        );
+    });
+
+    QUnit.test(
+        "setting a char field to empty string is saved as a false value",
+        async function (assert) {
+            assert.expect(1);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="foo" />
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { args, method }) {
+                    if (method === "write") {
+                        assert.strictEqual(args[1].foo, false, "the foo value should be false");
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_widget input[type='text']");
+            input.value = "";
+            await triggerEvent(input, null, "change");
+
+            // save
+            await click(target, ".o_form_button_save");
+        }
+    );
+
+    QUnit.test("char field with size attribute", async function (assert) {
+        serverData.models.partner.fields.foo.size = 5; // max length
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.hasAttrValue(
+            target.querySelector("input"),
+            "maxlength",
+            "5",
+            "maxlength attribute should have been set correctly on the input"
+        );
+    });
+
+    QUnit.test("char field in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo" />
+                </tree>`,
+        });
+
+        assert.containsN(target, "tbody td:not(.o_list_record_selector)", 5, "should have 5 cells");
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector)").textContent,
+            "yop",
+            "value should be displayed properly as text"
+        );
+
+        // Edit a line and check the result
+        let cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        await click(cell);
+        assert.hasClass(cell.parentElement, "o_selected_row", "should be set as edit mode");
+        assert.strictEqual(
+            cell.querySelector("input").value,
+            "yop",
+            "should have the corect value in internal input"
+        );
+
+        const input = cell.querySelector("input");
+        input.value = "brolo";
+        await triggerEvent(input, null, "change");
+
+        // save
+        await click(target, ".o_list_button_save");
+        cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        assert.doesNotHaveClass(
+            cell.parentElement,
+            "o_selected_row",
+            "should not be in edit mode anymore"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector)").textContent,
+            "brolo",
+            "value should be properly updated"
+        );
+    });
+
+    QUnit.test("char field translatable", async function (assert) {
+        assert.expect(12);
+
+        serverData.models.partner.fields.foo.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+        patchWithCleanup(session.user_context, {
+            lang: "en_US",
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method, model }) {
+                if (route === "/web/dataset/call_button" && method === "translate_fields") {
+                    assert.deepEqual(
+                        args,
+                        ["partner", 1, "foo"],
+                        'should call "call_button" route'
+                    );
+                    return Promise.resolve({
+                        domain: [],
+                        context: { search_default_name: "partnes,foo" },
+                    });
+                }
+                if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                    return Promise.resolve([
+                        ["en_US", "English"],
+                        ["fr_BE", "French (Belgium)"],
+                    ]);
+                }
+                if (method === "search_read" && model === "ir.translation") {
+                    return Promise.resolve([
+                        { lang: "en_US", src: "yop", value: "yop", id: 42 },
+                        { lang: "fr_BE", src: "yop", value: "valeur français", id: 43 },
+                    ]);
+                }
+                if (method === "write" && model === "ir.translation") {
+                    assert.deepEqual(
+                        args[1],
+                        { value: "english value" },
+                        "the new translation value should be written"
+                    );
+                    return Promise.resolve(null);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(
+            target,
+            ".o_field_char .o_field_translate",
+            "should have a translate button"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char .o_field_translate").textContent,
+            "EN",
+            "the button should have as test the current language"
+        );
+        await click(target, ".o_field_char .o_field_translate");
+
+        assert.containsOnce(target, ".modal", "a translate modal should be visible");
+        assert.containsN(
+            target,
+            ".modal .o_translation_dialog .translation",
+            2,
+            "two rows should be visible"
+        );
+
+        let enFields = target.querySelectorAll(".modal .o_translation_dialog .translation input");
+        assert.strictEqual(enFields[0].value, "yop", "English translation should be filled");
+        assert.strictEqual(
+            enFields[enFields.length - 1].value,
+            "valeur français",
+            "French translation should be filled"
+        );
+
+        await editInput(enFields[0], null, "english value");
+        await click(target, ".modal button.btn-primary"); // save
+
+        assert.strictEqual(
+            target.querySelector(`.o_field_char input[type="text"]`).value,
+            "english value",
+            "the new translation was not transfered to modified record"
+        );
+
+        await editInput(target, `.o_field_char input[type="text"]`, "new english value");
+        await click(target, ".o_field_char .o_field_translate");
+
+        enFields = target.querySelectorAll(".modal .o_translation_dialog .translation input");
+        assert.strictEqual(
+            enFields[0].value,
+            "new english value",
+            "Modified value should be used instead of translation"
+        );
+        assert.strictEqual(
+            enFields[enFields.length - 1].value,
+            "valeur français",
+            "French translation should be filled"
+        );
+    });
+
+    QUnit.test("html field translatable", async function (assert) {
+        assert.expect(6);
+
+        serverData.models.partner.fields.foo.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+        patchWithCleanup(session.user_context, {
+            lang: "en_US",
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method, model }) {
+                if (route === "/web/dataset/call_button" && method === "translate_fields") {
+                    assert.deepEqual(
+                        args,
+                        ["partner", 1, "foo"],
+                        `should call "call_button" route`
+                    );
+                    return Promise.resolve({
+                        domain: [],
+                        context: {
+                            search_default_name: "partner,foo",
+                            translation_type: "char",
+                            translation_show_src: true,
+                        },
+                    });
+                }
+                if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                    return Promise.resolve([
+                        ["en_US", "English"],
+                        ["fr_BE", "French (Belgium)"],
+                    ]);
+                }
+                if (method === "search_read" && model === "ir.translation") {
+                    return Promise.resolve([
+                        { lang: "en_US", src: "first paragraph", value: "first paragraph", id: 42 },
+                        {
+                            lang: "en_US",
+                            src: "second paragraph",
+                            value: "second paragraph",
+                            id: 43,
+                        },
+                        {
+                            lang: "fr_BE",
+                            src: "first paragraph",
+                            value: "premier paragraphe",
+                            id: 44,
+                        },
+                        {
+                            lang: "fr_BE",
+                            src: "second paragraph",
+                            value: "deuxième paragraphe",
+                            id: 45,
+                        },
+                    ]);
+                }
+                if (method === "write" && model === "ir.translation") {
+                    assert.deepEqual(
+                        args[1],
+                        { value: "first paragraph modified" },
+                        "Wrong update on translation"
+                    );
+                    return Promise.resolve(null);
+                }
+            },
+        });
+        await click(target, ".o_form_button_edit");
+
+        // this will not affect the translate_fields effect until the record is
+        // saved but is set for consistency of the test
+        await editInput(
+            target,
+            `.o_field_char input[type="text"]`,
+            "<p>first paragraph</p><p>second paragraph</p>"
+        );
+
+        await click(target, ".o_field_char .o_field_translate");
+        assert.containsOnce(target, ".modal", "a translate modal should be visible");
+        assert.containsN(
+            target,
+            ".modal .o_translation_dialog .translation",
+            4,
+            "four rows should be visible"
+        );
+
+        const enField = target.querySelector(".modal .o_translation_dialog .translation input");
+        assert.strictEqual(
+            enField.value,
+            "first paragraph",
+            "first part of english translation should be filled"
+        );
+
+        await editInput(enField, null, "first paragraph modified");
+        await click(target, ".modal button.btn-primary"); // save
+
+        assert.strictEqual(
+            target.querySelector(`.o_field_char input[type="text"]`).value,
+            "<p>first paragraph</p><p>second paragraph</p>",
+            "the new partial translation should not be transfered"
+        );
+    });
+
+    QUnit.test("char field translatable in create mode", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.fields.foo.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            `.o_field_char .o_field_translate`,
+            "should have a translate button in create mode"
+        );
+    });
+
+    QUnit.test("char field does not allow html injections", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+        const input = target.querySelector("input");
+        input.value = "<script>throw Error();</script>";
+        await triggerEvent(input, null, "change");
+
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "<script>throw Error();</script>",
+            "the value should have been properly escaped"
+        );
+    });
+
+    QUnit.test("char field trim (or not) characters", async function (assert) {
+        serverData.models.partner.fields.foo2 = { string: "Foo2", type: "char", trim: false };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" />
+                            <field name="foo2" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        let input = target.querySelector(".o_field_widget[name='foo'] input");
+        input.value = "  abc  ";
+        await triggerEvent(input, null, "change");
+
+        input = target.querySelector(".o_field_widget[name='foo2'] input");
+        input.value = "  def  ";
+        await triggerEvent(input, null, "change");
+
+        await click(target, ".o_form_button_save");
+
+        // edit mode
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='foo'] input").value,
+            "abc",
+            "Foo value should have been trimmed"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='foo2'] input").value,
+            "  def  ",
+            "Foo2 value should not have been trimmed"
+        );
+    });
+
+    QUnit.test(
+        "input field: change value before pending onchange returns",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                product_id() {},
+            };
+
+            let def;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="p">
+                                <tree editable="bottom">
+                                    <field name="product_id" />
+                                    <field name="foo" />
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+                async mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+            await click(target, ".o_field_x2many_list_row_add a");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "My little Foo Value",
+                "should contain the default value"
+            );
+
+            def = makeDeferred();
+            await click(target, ".o-autocomplete--input");
+            await click(target.querySelector(".o-autocomplete--dropdown-item"));
+
+            // set foo before onchange
+            await editInput(target, ".o_field_widget[name='foo'] input", "tralala");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "input should contain tralala"
+            );
+
+            // complete the onchange
+            def.resolve();
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "input should contain the same value as before onchange"
+            );
+        }
+    );
+
+    QUnit.test(
+        "input field: change value before pending onchange returns (with fieldDebounce)",
+        async function (assert) {
+            // this test is exactly the same as the previous one, except that in
+            // this scenario the onchange return *before* we validate the change
+            // on the input field (before the "change" event is triggered).
+            serverData.models.partner.onchanges = {
+                product_id(obj) {
+                    obj.int_field = obj.product_id ? 7 : false;
+                },
+            };
+
+            let def;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="product_id"/>
+                                <field name="foo"/>
+                                <field name="int_field"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target, ".o_field_x2many_list_row_add a");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "My little Foo Value",
+                "should contain the default value"
+            );
+
+            def = makeDeferred();
+            await click(target, ".o-autocomplete--input");
+            await click(target.querySelector(".o-autocomplete--dropdown-item"));
+
+            // set foo before onchange
+            target.querySelector(".o_field_widget[name='foo'] input").value = "tralala";
+            await triggerEvent(target, ".o_field_widget[name='foo'] input", "input");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "input should contain tralala"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='int_field'] input").value,
+                ""
+            );
+
+            // complete the onchange
+            def.resolve();
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "foo should contain the same value as before onchange"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='int_field'] input").value,
+                "7",
+                "int_field should contain the value returned by the onchange"
+            );
+        }
+    );
+
+    QUnit.test(
+        "input field: change value before pending onchange renaming",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                product_id(obj) {
+                    obj.foo = "on change value";
+                },
+            };
+
+            const def = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="product_id" />
+                            <field name="foo" />
+                        </sheet>
+                    </form>`,
+                async mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "yop",
+                "should contain the correct value"
+            );
+
+            await click(target, ".o-autocomplete--input");
+            await click(target.querySelector(".o-autocomplete--dropdown-item"));
+
+            // set foo before onchange
+            editInput(target, ".o_field_widget[name='foo'] input", "tralala");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "should contain tralala"
+            );
+
+            // complete the onchange
+            def.resolve();
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='foo'] input").value,
+                "tralala",
+                "input should contain the same value as before onchange"
+            );
+        }
+    );
+
+    QUnit.test("support autocomplete attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="display_name" autocomplete="coucou"/></form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.hasAttrValue(
+            target.querySelector('.o_field_widget[name="display_name"] input'),
+            "autocomplete",
+            "coucou",
+            "attribute autocomplete should be set"
+        );
+    });
+
+    QUnit.test("input autocomplete attribute set to none by default", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="display_name"/></form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.hasAttrValue(
+            target.querySelector('.o_field_widget[name="display_name"] input'),
+            "autocomplete",
+            "off",
+            "attribute autocomplete should be set to none by default"
+        );
+    });
+
+    QUnit.test("support password attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo" password="True"/></form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"]').innerText,
+            "***",
+            "password should be displayed with stars"
+        );
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').value,
+            "yop",
+            "input value should be the password"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').type,
+            "password",
+            "input should be of type password"
+        );
+    });
+
+    QUnit.test("input field: change password value", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" password="True" />
+                </form>`,
+        });
+
+        assert.notEqual(
+            target.querySelector(".o_field_char").textContent,
+            "yop",
+            "password field value should not be visible in read mode"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char").textContent,
+            "***",
+            "password field value should be hidden with '*' in read mode"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_char input"),
+            "type",
+            "password",
+            "password field input should be with type 'password' in edit mode"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char input").value,
+            "yop",
+            "password field input value should be the (non-hidden) password value"
+        );
+    });
+
+    QUnit.test("input field: empty password", async function (assert) {
+        serverData.models.partner.records[0].foo = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" password="True" />
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_char").textContent,
+            "",
+            "password field value should be empty in read mode"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_char input"),
+            "type",
+            "password",
+            "password field input should be with type 'password' in edit mode"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_char input").value,
+            "",
+            "password field input value should be the (non-hidden, empty) password value"
+        );
+    });
+
+    QUnit.test(
+        "input field: set and remove value, then wait for onchange",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                product_id(obj) {
+                    obj.foo = obj.product_id ? "onchange value" : false;
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="product_id"/>
+                                <field name="foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            await click(target, ".o_field_x2many_list_row_add a");
+            assert.strictEqual(target.querySelector(".o_field_widget[name=foo] input").value, "");
+
+            // set value for foo
+            target.querySelector(".o_field_widget[name=foo] input").value = "test";
+            await triggerEvent(target, ".o_field_widget[name=foo] input", "input");
+            // remove value for foo
+            target.querySelector(".o_field_widget[name=foo] input").value = "";
+            await triggerEvent(target, ".o_field_widget[name=foo] input", "input");
+
+            // trigger the onchange by setting a product
+            await click(target, ".o-autocomplete--input");
+            await click(target.querySelector(".o-autocomplete--dropdown-item"));
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=foo] input").value,
+                "onchange value",
+                "input should contain correct value after onchange"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/color_field_tests.js b/addons/web/static/tests/views/fields/color_field_tests.js
new file mode 100644
index 00000000000..d21b7be9b39
--- /dev/null
+++ b/addons/web/static/tests/views/fields/color_field_tests.js
@@ -0,0 +1,88 @@
+/** @odoo-module **/
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        hex_color: { string: "hexadecimal color", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                        },
+                        {
+                            id: 2,
+                            hex_color: "#ff4444",
+                        },
+                    ],
+                },
+            },
+        };
+        setupViewRegistries();
+    });
+
+    QUnit.module("ColorField");
+
+    QUnit.test("field contains a color input", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <group>
+                        <field name="hex_color" widget="color" />
+                    </group>
+                </form>`,
+        });
+        assert.containsOnce(
+            target,
+            ".o_field_color input[type='color']",
+            "native color input is used by the field"
+        );
+        // style returns the value in the rgb format
+        assert.strictEqual(
+            target.querySelector(".o_field_color div").style.backgroundColor,
+            "rgb(0, 0, 0)",
+            "field has the default color set as background if no value has been selected"
+        );
+
+        await editInput(target, ".o_field_color input", "#fefefe");
+        assert.strictEqual(
+            target.querySelector(".o_field_color div").style.backgroundColor,
+            "rgb(254, 254, 254)",
+            "field has the new color set as background"
+        );
+    });
+
+    QUnit.test("color field in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <tree editable="bottom">
+                    <field name="hex_color" widget="color" />
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            ".o_field_color input[type='color']",
+            2,
+            "native color input is used on each row"
+        );
+
+        await click(target.querySelector(".o_field_color input"));
+        assert.doesNotHaveClass(target.querySelector(".o_data_row"), "o_selected_row");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/color_picker_field_tests.js b/addons/web/static/tests/views/fields/color_picker_field_tests.js
new file mode 100644
index 00000000000..79481a0e40b
--- /dev/null
+++ b/addons/web/static/tests/views/fields/color_picker_field_tests.js
@@ -0,0 +1,199 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: "first",
+                            int_field: 0,
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("ColorPickerField");
+
+    QUnit.test(
+        "No chosen color is a red line with a white background (color 0)",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="int_field" widget="color_picker"/>
+                        </group>
+                    </form>`,
+            });
+
+            // switch to edit mode
+            await click(target, ".o_form_button_edit");
+
+            assert.hasClass(
+                target.querySelectorAll(".o_field_color_picker button"),
+                "o_colorlist_item_color_0",
+                "The default no color value does have the right class"
+            );
+
+            await click(target, ".o_field_color_picker button");
+
+            assert.hasClass(
+                target.querySelectorAll(".o_field_color_picker button"),
+                "o_colorlist_item_color_0",
+                "The no color item does have the right class in the list"
+            );
+
+            await click(target, ".o_field_color_picker .o_colorlist_item_color_3");
+            await click(target, ".o_field_color_picker button");
+
+            assert.hasClass(
+                target.querySelectorAll(".o_field_color_picker button"),
+                "o_colorlist_item_color_0",
+                "The no color item still have the right class in the list"
+            );
+        }
+    );
+
+    QUnit.test("closes when color selected or outside click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="int_field" widget="color_picker"/>
+                        <field name="foo"/>
+                    </group>
+                </form>`,
+        });
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_field_color_picker button");
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_color_picker button").length > 1,
+            true,
+            "there should be more color elements when the component is opened"
+        );
+
+        await click(target, ".o_field_color_picker .o_colorlist_item_color_3");
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_color_picker button").length,
+            1,
+            "there should be one color element when the component is closed"
+        );
+
+        await click(target, ".o_field_color_picker button");
+
+        await click(target.querySelector('.o_field_widget[name="foo"] input'));
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_color_picker button").length,
+            1,
+            "there should be one color element when the component is closed"
+        );
+    });
+
+    QUnit.test(
+        "stop event propagation on click to avoid oppening record on tree view",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="int_field" widget="color_picker"/>
+                    </tree>`,
+            });
+
+            await click(target, ".o_field_color_picker button");
+
+            assert.strictEqual(
+                document.querySelectorAll(".o_list_renderer").length,
+                1,
+                "The current view should still be a list view"
+            );
+
+            await click(target, ".o_field_color_picker .o_colorlist_item_color_6");
+
+            assert.strictEqual(
+                document.querySelectorAll(".o_list_renderer").length,
+                1,
+                "The current view should still be a list view"
+            );
+        }
+    );
+
+    QUnit.test("column widths: dont overflow color picker in list", async function (assert) {
+        serverData.models.partner.fields.date_field = {
+            string: "Date field",
+            type: "date",
+        };
+
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: `
+                 <tree editable="top">
+                     <field name="date_field"/>
+                     <field name="int_field" widget="color_picker"/>
+                 </tree>`,
+            domain: [["id", "<", 0]],
+        });
+        await click(target.querySelector(".o_list_button_add"));
+        const date_column_width = target
+            .querySelector('.o_list_table thead th[data-name="date_field"]')
+            .style.width.replace("px", "");
+        const int_field_column_width = target
+            .querySelector('.o_list_table thead th[data-name="int_field"]')
+            .style.width.replace("px", "");
+        // Default values for date and int fields are: date: '92px', integer: '74px'
+        // With the screen growing, the proportion is kept and thus int_field would remain smaller than date if
+        // the color_picker wouldn't have widthInList set to '1'. With that property set, int_field size will be bigger
+        // than date's one.
+        assert.ok(
+            parseFloat(date_column_width) < parseFloat(int_field_column_width),
+            "colorpicker should display properly (Horizontly)"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/copy_clipboard_field_tests.js b/addons/web/static/tests/views/fields/copy_clipboard_field_tests.js
new file mode 100644
index 00000000000..d0a232bb193
--- /dev/null
+++ b/addons/web/static/tests/views/fields/copy_clipboard_field_tests.js
@@ -0,0 +1,124 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        char_field: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        text_field: {
+                            string: "txt",
+                            type: "text",
+                            default: "My little txt Value\nHo-ho-hoooo Merry Christmas",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            char_field: "yop",
+                        },
+                    ],
+                },
+            },
+        };
+        target = getFixture();
+        setupViewRegistries();
+    });
+
+    QUnit.module("CopyClipboardField");
+
+    QUnit.test("Char & Text Fields: Copy to clipboard button", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form string="Partners">
+                    <sheet>
+                        <div>
+                            <field name="text_field" widget="CopyClipboardText"/>
+                            <field name="char_field" widget="CopyClipboardChar"/>
+                        </div>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_clipboard_button.o_btn_text_copy",
+            "Should have copy button on text type field"
+        );
+        assert.containsOnce(
+            target,
+            ".o_clipboard_button.o_btn_char_copy",
+            "Should have copy button on char type field"
+        );
+    });
+
+    QUnit.test("CopyClipboardField on unset field", async function (assert) {
+        serverData.models.partner.records[0].char_field = false;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="char_field" widget="CopyClipboardChar" />
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(
+            target,
+            '.o_field_copy[name="char_field"] .o_clipboard_button',
+            "char_field (unset) should not contain a button"
+        );
+    });
+
+    QUnit.test(
+        "CopyClipboardField on readonly unset fields in create mode",
+        async function (assert) {
+            serverData.models.partner.fields.display_name.readonly = true;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="display_name" widget="CopyClipboardChar" />
+                            </group>
+                        </sheet>
+                    </form>`,
+            });
+
+            assert.containsNone(
+                target,
+                '.o_field_copy[name="display_name"] .o_clipboard_button',
+                "the readonly unset field should not contain a button"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/date_field_tests.js b/addons/web/static/tests/views/fields/date_field_tests.js
new file mode 100644
index 00000000000..5a17d19374f
--- /dev/null
+++ b/addons/web/static/tests/views/fields/date_field_tests.js
@@ -0,0 +1,716 @@
+/** @odoo-module **/
+
+import { strftimeToLuxonFormat } from "@web/core/l10n/dates";
+import { registry } from "@web/core/registry";
+import {
+    click,
+    getFixture,
+    patchWithCleanup,
+    patchTimeZone,
+    triggerEvent,
+    triggerEvents,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        date: { string: "A date", type: "date", searchable: true },
+                        datetime: { string: "A datetime", type: "datetime", searchable: true },
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            date: "2017-02-03",
+                            datetime: "2017-02-08 10:00:00",
+                            display_name: "first record",
+                            foo: "yop",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            foo: "blip",
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            foo: "abc",
+                        },
+                        { id: 3, foo: "gnap" },
+                        { id: 5, foo: "blop" },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("DateField");
+
+    QUnit.test("DateField: toggle datepicker [REQUIRE FOCUS]", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" />
+                    <field name="date" />
+                </form>`,
+        });
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed initially"
+        );
+
+        await click(target, ".o_datepicker input");
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+
+        // focus another field
+        target.querySelector(".o_field_widget[name='foo'] input").focus();
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should close itself when the user clicks outside"
+        );
+    });
+
+    QUnit.test(
+        "DateField: toggle datepicker far in the future [REQUIRE FOCUS]",
+        async function (assert) {
+            serverData.models.partner.records = [
+                {
+                    id: 1,
+                    date: "9999-12-30",
+                    foo: "yop",
+                },
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo" />
+                        <field name="date" />
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+            assert.containsNone(
+                document.body,
+                ".bootstrap-datetimepicker-widget",
+                "datepicker should be closed initially"
+            );
+
+            await click(target, ".o_datepicker input");
+            assert.containsOnce(
+                document.body,
+                ".bootstrap-datetimepicker-widget",
+                "datepicker should be opened"
+            );
+
+            // focus another field
+            target.querySelector(".o_field_widget[name='foo'] input").focus();
+            assert.containsNone(
+                document.body,
+                ".bootstrap-datetimepicker-widget",
+                "datepicker should close itself when the user clicks outside"
+            );
+        }
+    );
+
+    QUnit.test("date field is empty if no date is set", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 4,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget > span",
+            "should have one span in the form view"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget > span").textContent,
+            "",
+            "and it should be empty"
+        );
+    });
+
+    QUnit.test(
+        "DateField: set an invalid date when the field is already set",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: '<form><field name="date"/></form>',
+            });
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_widget[name='date'] input");
+            assert.strictEqual(input.value, "02/03/2017");
+
+            input.value = "mmmh";
+            await triggerEvent(input, null, "change");
+            assert.strictEqual(input.value, "02/03/2017", "should have reset the original value");
+        }
+    );
+
+    QUnit.test(
+        "DateField: set an invalid date when the field is not set yet",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 4,
+                serverData,
+                arch: '<form><field name="date"/></form>',
+            });
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_widget[name='date'] input");
+            assert.strictEqual(input.value, "");
+
+            input.value = "mmmh";
+            await triggerEvent(input, null, "change");
+            assert.strictEqual(input.value, "", "The date field should be empty");
+        }
+    );
+
+    QUnit.test("DateField value should not set on first click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 4,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+        });
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_datepicker input");
+        // open datepicker and select a date
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='date'] input").value,
+            "",
+            "date field's input should be empty on first click"
+        );
+        await click(document.body, ".day[data-day*='/22/']");
+
+        // re-open datepicker
+        await click(target, ".o_datepicker input");
+        assert.strictEqual(
+            document.body.querySelector(".day.active").textContent,
+            "22",
+            "datepicker should be highlight with 22nd day of month"
+        );
+    });
+
+    QUnit.test("DateField in form view (with positive time zone offset)", async function (assert) {
+        assert.expect(8);
+
+        patchTimeZone(120); // Should be ignored by date fields
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(
+                        args[1].date,
+                        "2017-02-22",
+                        "the correct value should be saved"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_date").textContent,
+            "02/03/2017",
+            "the date should be correctly displayed in readonly"
+        );
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/03/2017",
+            "the date should be correct in edit mode"
+        );
+
+        // open datepicker and select another value
+        await click(target, ".o_datepicker_input");
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+        assert.containsOnce(
+            document.body,
+            ".day.active[data-day='02/03/2017']",
+            "datepicker should be highlight February 3"
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[8]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[1]);
+        await click(document.body.querySelector(".day[data-day*='/22/']"));
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/22/2017",
+            "the selected date should be displayed in the input"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_date").textContent,
+            "02/22/2017",
+            "the selected date should be displayed after saving"
+        );
+    });
+
+    QUnit.test("DateField in form view (with negative time zone offset)", async function (assert) {
+        patchTimeZone(-120); // Should be ignored by date fields
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_date").textContent,
+            "02/03/2017",
+            "the date should be correctly displayed in readonly"
+        );
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/03/2017",
+            "the date should be correct in edit mode"
+        );
+    });
+
+    QUnit.test("DateField dropdown disappears on scroll", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <div class="scrollable" style="height: 2000px;">
+                        <field name="date" />
+                    </div>
+                </form>`,
+        });
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_datepicker input");
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+
+        await triggerEvent(target, null, "scroll");
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed"
+        );
+    });
+
+    QUnit.test("DateField with warn_future option", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 4,
+            serverData,
+            arch: `
+                <form>
+                    <field name="date" options="{ 'datepicker': { 'warn_future': true } }" />
+                </form>`,
+        });
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+
+        // open datepicker and select another value
+        await click(target, ".o_datepicker input");
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[11]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[11]);
+        await click(document.body, ".day[data-day*='/31/']");
+
+        assert.containsOnce(
+            target,
+            ".o_datepicker_warning",
+            "should have a warning in the form view"
+        );
+
+        const input = target.querySelector(".o_field_widget[name='date'] input");
+        input.value = "";
+        await triggerEvent(input, null, "change"); // remove the value
+
+        assert.containsNone(
+            target,
+            ".o_datepicker_warning",
+            "the warning in the form view should be hidden"
+        );
+    });
+
+    QUnit.test(
+        "DateField with warn_future option: do not overwrite datepicker option",
+        async function (assert) {
+            // Making sure we don't have a legit default value
+            // or any onchange that would set the value
+            serverData.models.partner.fields.date.default = undefined;
+            serverData.models.partner.onchanges = {};
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo" /> <!-- Do not let the date field get the focus in the first place -->
+                        <field name="date" options="{ 'datepicker': { 'warn_future': true } }" />
+                    </form>`,
+            });
+            // switch to edit mode
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='date'] input").value,
+                "02/03/2017",
+                "The existing record should have a value for the date field"
+            );
+
+            // save with no changes
+            await click(target, ".o_form_button_save");
+
+            //Create a new record
+            await click(target, ".o_form_button_create");
+            assert.notOk(
+                target.querySelector(".o_field_widget[name='date'] input").value,
+                "The new record should not have a value that the framework would have set"
+            );
+        }
+    );
+
+    QUnit.test("DateField in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: '<tree editable="bottom"><field name="date"/></tree>',
+        });
+
+        const cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        assert.strictEqual(
+            cell.textContent,
+            "02/03/2017",
+            "the date should be displayed correctly in readonly"
+        );
+        await click(cell);
+
+        assert.containsOnce(
+            target,
+            "input.o_datepicker_input",
+            "the view should have a date input for editable mode"
+        );
+
+        assert.strictEqual(
+            target.querySelector("input.o_datepicker_input"),
+            document.activeElement,
+            "date input should have the focus"
+        );
+
+        assert.strictEqual(
+            target.querySelector("input.o_datepicker_input").value,
+            "02/03/2017",
+            "the date should be correct in edit mode"
+        );
+
+        // open datepicker and select another value
+        await click(target, ".o_datepicker_input");
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[8]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[1]);
+        await click(document.body.querySelector(".day[data-day*='/22/']"));
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/22/2017",
+            "the selected date should be displayed in the input"
+        );
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        assert.strictEqual(
+            target.querySelector("tr.o_data_row td:not(.o_list_record_selector)").textContent,
+            "02/22/2017",
+            "the selected date should be displayed after saving"
+        );
+    });
+
+    QUnit.test("DateField remove value", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(args[1].date, false, "the correct value should be saved");
+                }
+            },
+        });
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/03/2017",
+            "the date should be correct in edit mode"
+        );
+
+        const input = target.querySelector(".o_datepicker_input");
+        input.value = "";
+        await triggerEvents(input, null, ["input", "change", "focusout"]);
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "",
+            "should have correctly removed the value"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_date").textContent,
+            "",
+            "the selected date should be displayed after saving"
+        );
+    });
+
+    QUnit.test(
+        "do not trigger a field_changed for datetime field with date widget",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: '<form><field name="datetime" widget="date"/></form>',
+                mockRPC(route, { method }) {
+                    assert.step(method);
+                },
+            });
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_datepicker_input").value,
+                "02/08/2017",
+                "the date should be correct"
+            );
+
+            const input = target.querySelector(".o_field_widget[name='datetime'] input");
+            input.value = "02/08/2017";
+            await triggerEvents(input, null, ["input", "change", "focusout"]);
+            await click(target, ".o_form_button_save");
+
+            assert.verifySteps(["get_views", "read"]); // should not have save as nothing changed
+        }
+    );
+
+    QUnit.test(
+        "field date should select its content onclick when there is one",
+        async function (assert) {
+            assert.expect(3);
+            const done = assert.async();
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: '<form><field name="date"/></form>',
+            });
+            await click(target, ".o_form_button_edit");
+
+            $(target).on("show.datetimepicker", () => {
+                assert.containsOnce(
+                    document.body,
+                    ".bootstrap-datetimepicker-widget",
+                    "bootstrap-datetimepicker is visible"
+                );
+                const active = document.activeElement;
+                assert.strictEqual(
+                    active.tagName,
+                    "INPUT",
+                    "The datepicker input should be focused"
+                );
+                assert.strictEqual(
+                    active.value.slice(active.selectionStart, active.selectionEnd),
+                    "02/03/2017",
+                    "The whole input of the date field should have been selected"
+                );
+                done();
+            });
+
+            await click(target, ".o_datepicker input");
+        }
+    );
+
+    QUnit.test("DateField support internationalization", async function (assert) {
+        // The DatePicker component needs the locale to be available since it
+        // is still using Moment.js for the bootstrap datepicker
+        const originalLocale = moment.locale();
+        moment.defineLocale("no", {
+            monthsShort: "jan._feb._mars_april_mai_juni_juli_aug._sep._okt._nov._des.".split("_"),
+            monthsParseExact: true,
+            dayOfMonthOrdinalParse: /\d{1,2}\./,
+            ordinal: "%d.",
+        });
+
+        registry.category("services").remove("localization");
+        registry
+            .category("services")
+            .add(
+                "localization",
+                makeFakeLocalizationService({ dateFormat: strftimeToLuxonFormat("%d-%m/%Y") })
+            );
+        patchWithCleanup(luxon.Settings, {
+            defaultLocale: "no",
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="date"/></form>',
+            resId: 1,
+        });
+
+        const dateViewForm = target.querySelector(".o_field_date").textContent;
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target, ".o_datepicker input");
+
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            dateViewForm,
+            "input date field should be the same as it was in the view form"
+        );
+        await click(document.body.querySelector(".day[data-day*='/22/']"));
+        const dateEditForm = target.querySelector(".o_datepicker_input").value;
+        await click(target.querySelector(".o_form_button_save"));
+        assert.strictEqual(
+            target.querySelector(".o_field_date").textContent,
+            dateEditForm,
+            "date field should be the same as the one selected in the view form"
+        );
+
+        moment.locale(originalLocale);
+        moment.updateLocale("no", null);
+    });
+
+    QUnit.test("DateField: hit enter should update value", async function (assert) {
+        patchTimeZone(120);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="date"/></form>',
+        });
+        await click(target, ".o_form_button_edit");
+
+        const year = new Date().getFullYear();
+        const input = target.querySelector(".o_field_widget[name='date'] input");
+
+        input.value = "01/08";
+        await triggerEvent(input, null, "change");
+        await triggerEvent(input, null, "keydown", { key: "Enter" });
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='date'] input").value,
+            `01/08/${year}`
+        );
+
+        input.value = "08/01";
+        await triggerEvent(input, null, "change");
+        await triggerEvent(input, null, "keydown", { key: "Enter" });
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='date'] input").value,
+            `08/01/${year}`
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/daterange_field_tests.js b/addons/web/static/tests/views/fields/daterange_field_tests.js
new file mode 100644
index 00000000000..868c37070c0
--- /dev/null
+++ b/addons/web/static/tests/views/fields/daterange_field_tests.js
@@ -0,0 +1,563 @@
+/** @odoo-module **/
+
+import {
+    click,
+    editInput,
+    getFixture,
+    patchTimeZone,
+    triggerEvent,
+    triggerScroll,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        date: { string: "A date", type: "date", searchable: true },
+                        datetime: { string: "A datetime", type: "datetime", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            date: "2017-02-03",
+                            datetime: "2017-02-08 10:00:00",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+
+        // Date field should not have an offset as they are ignored.
+        // However, in the test environement, a UTC timezone is set to run all tests. And if any code does not use the safe timezone method
+        // provided by the framework (which happens in this case inside the date range picker lib), unexpected behavior kicks in as the timezone
+        // of the dev machine collides with the timezone set by the test env.
+        // To avoid failing test on dev's local machines, a hack is to apply an timezone offset greater than the difference between UTC and the dev's
+        // machine timezone. For belgium, > 60 is enough. For India, > 5h30 is required, hence 330.
+        patchTimeZone(330);
+    });
+
+    QUnit.module("DateRangeField");
+
+    QUnit.test(
+        "Datetime field - interaction with the datepicker [REQUIRE FOCUS]",
+        async function (assert) {
+            serverData.models.partner.fields.datetime_end = {
+                string: "Datetime End",
+                type: "datetime",
+            };
+            serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
+                        <field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
+                    </form>`,
+            });
+
+            let fields = target.querySelectorAll(".o_field_daterange");
+            // Check date display correctly in readonly
+            assert.strictEqual(
+                fields[0].textContent,
+                "02/08/2017 15:30:00",
+                "the start date should be correctly displayed in readonly"
+            );
+            assert.strictEqual(
+                fields[fields.length - 1].textContent,
+                "03/13/2017 05:30:00",
+                "the end date should be correctly displayed in readonly"
+            );
+
+            // Edit
+            await click(target, ".o_form_button_edit");
+
+            // Check date range picker initialization
+            assert.containsN(
+                document.body,
+                ".daterangepicker",
+                2,
+                "should initialize 2 date range picker"
+            );
+            const datepickers = document.querySelectorAll(`.daterangepicker`);
+            assert.isNotVisible(
+                datepickers[0],
+                "first date range picker should be closed initially"
+            );
+            assert.isNotVisible(
+                datepickers[datepickers.length - 1],
+                "second date range picker should be closed initially"
+            );
+
+            // open the first one
+            fields = target.querySelectorAll(".o_field_daterange");
+            await click(fields[0].querySelector("input"));
+
+            let datepicker = document.querySelector(
+                `.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
+            );
+            assert.isVisible(datepicker, "first date range picker should be opened");
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
+                "8",
+                "active start date should be '8' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .hourselect").value,
+                "15",
+                "active start date hour should be '15' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .minuteselect").value,
+                "30",
+                "active start date minute should be '30' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
+                "13",
+                "active end date should be '13' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .hourselect").value,
+                "5",
+                "active end date hour should be '5' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .minuteselect").value,
+                "30",
+                "active end date minute should be '30' in date range picker"
+            );
+            assert.containsN(
+                datepicker.querySelector(".drp-calendar.left .minuteselect"),
+                "option",
+                12,
+                "minute selection should contain 12 options (1 for each 5 minutes)"
+            );
+            // Close picker
+            await click(datepicker.querySelector(".cancelBtn"));
+            assert.strictEqual(
+                datepicker.style.display,
+                "none",
+                "date range picker should be closed"
+            );
+
+            // Try to check with end date
+            await click(fields[fields.length - 1], "input");
+            datepicker = document.querySelector(
+                `.daterangepicker[data-name="${fields[fields.length - 1].getAttribute("name")}"]`
+            );
+
+            assert.isVisible(datepicker, "date range picker should be opened");
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .active.start-date").textContent,
+                "8",
+                "active start date should be '8' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .hourselect").value,
+                "15",
+                "active start date hour should be '15' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.left .minuteselect").value,
+                "30",
+                "active start date minute should be '30' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .active.end-date").textContent,
+                "13",
+                "active end date should be '13' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .hourselect").value,
+                "5",
+                "active end date hour should be '5' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".drp-calendar.right .minuteselect").value,
+                "30",
+                "active end date minute should be '30' in date range picker"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Date field - interaction with the datepicker [REQUIRE FOCUS]",
+        async function (assert) {
+            serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
+            serverData.models.partner.records[0].date_end = "2017-02-08";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
+                        <field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
+                    </form>`,
+            });
+
+            let fields = target.querySelectorAll(".o_field_daterange");
+
+            // Check date display correctly in readonly
+            assert.strictEqual(
+                fields[0].textContent,
+                "02/03/2017",
+                "the start date should be correctly displayed in readonly"
+            );
+            assert.strictEqual(
+                fields[fields.length - 1].textContent,
+                "02/08/2017",
+                "the end date should be correctly displayed in readonly"
+            );
+
+            // Edit
+            await click(target, ".o_form_button_edit");
+
+            fields = target.querySelectorAll(".o_field_daterange");
+            const datepickers = document.querySelectorAll(`.daterangepicker`);
+
+            // Check date range picker initialization
+            assert.containsN(
+                document.body,
+                ".daterangepicker",
+                2,
+                "should initialize 2 date range picker"
+            );
+            assert.isNotVisible(
+                datepickers[0],
+                "first date range picker should be closed initially"
+            );
+            assert.isNotVisible(
+                datepickers[datepickers.length - 1],
+                "second date range picker should be closed initially"
+            );
+
+            // open the first one
+            await click(fields[0].querySelector("input"));
+            let datepicker = document.querySelector(
+                `.daterangepicker[data-name="${fields[0].getAttribute("name")}"]`
+            );
+
+            assert.isVisible(datepicker, "first date range picker should be opened");
+            assert.strictEqual(
+                datepicker.querySelector(".active.start-date").textContent,
+                "3",
+                "active start date should be '3' in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".active.end-date").textContent,
+                "8",
+                "active end date should be '8' in date range picker"
+            );
+
+            // Change date
+            await triggerEvent(
+                datepicker,
+                ".drp-calendar.left .available[data-title='r2c4']",
+                "mousedown"
+            );
+            await triggerEvent(
+                datepicker,
+                ".drp-calendar.right .available[data-title='r2c0']",
+                "mousedown"
+            );
+            await click(datepicker.querySelector(".applyBtn"));
+
+            // Check date after change
+            assert.isNotVisible(datepicker, "date range picker should be closed");
+            assert.strictEqual(
+                fields[0].querySelector("input").value,
+                "02/16/2017",
+                "the date should be '02/16/2017'"
+            );
+            assert.strictEqual(
+                fields[1].querySelector("input").value,
+                "03/12/2017",
+                "'the date should be '03/12/2017'"
+            );
+
+            // Try to change range with end date
+            await click(fields[1].querySelector("input"));
+            datepicker = document.querySelector(
+                `.daterangepicker[data-name="${fields[1].getAttribute("name")}"]`
+            );
+
+            assert.isVisible(datepicker, "date range picker should be opened");
+            assert.strictEqual(
+                datepicker.querySelector(".active.start-date").textContent,
+                "16",
+                "start date should be a 16 in date range picker"
+            );
+            assert.strictEqual(
+                datepicker.querySelector(".active.end-date").textContent,
+                "12",
+                "end date should be a 12 in date range picker"
+            );
+
+            // Change date
+            await triggerEvent(
+                datepicker,
+                ".drp-calendar.left .available[data-title='r2c1']",
+                "mousedown"
+            );
+            await triggerEvent(
+                datepicker,
+                ".drp-calendar.right .available[data-title='r2c6']",
+                "mousedown"
+            );
+            await click(datepicker, ".applyBtn");
+
+            // Check date after change
+            assert.isNotVisible(
+                datepickers[datepickers.length - 1],
+                "date range picker should be closed"
+            );
+            assert.strictEqual(
+                fields[0].querySelector("input").value,
+                "02/13/2017",
+                "the start date should be '02/13/2017'"
+            );
+            assert.strictEqual(
+                fields[1].querySelector("input").value,
+                "03/18/2017",
+                "the end date should be '03/18/2017'"
+            );
+
+            // Save
+            await click(target, ".o_form_button_save");
+            fields = target.querySelectorAll(".o_field_daterange");
+
+            // Check date after save
+            assert.strictEqual(
+                fields[0].textContent,
+                "02/13/2017",
+                "the start date should be '02/13/2017' after save"
+            );
+            assert.strictEqual(
+                fields[fields.length - 1].textContent,
+                "03/18/2017",
+                "the end date should be '03/18/2017' after save"
+            );
+        }
+    );
+
+    QUnit.test(
+        "daterangepicker should disappear on scrolling outside of it",
+        async function (assert) {
+            serverData.models.partner.fields.datetime_end = {
+                string: "Datetime End",
+                type: "datetime",
+            };
+            serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
+                        <field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+            await click(target.querySelector(".o_field_daterange[name='datetime'] input"));
+
+            assert.isVisible(
+                document.querySelector(".daterangepicker[data-name='datetime']"),
+                "date range picker should be opened"
+            );
+
+            await triggerScroll(target, { top: 50 });
+            assert.isNotVisible(
+                document.querySelector(".daterangepicker[data-name='datetime']"),
+                "date range picker should be closed"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Datetime field manually input value should send utc value to server",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.fields.datetime_end = {
+                string: "Datetime End",
+                type: "datetime",
+            };
+            serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end'}"/>
+                        <field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime'}"/>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(args.args[1], { datetime: "2017-02-08 06:00:00" });
+                    }
+                },
+            });
+
+            // check date display correctly in readonly
+            assert.strictEqual(
+                target.querySelector(".o_field_daterange").textContent,
+                "02/08/2017 15:30:00",
+                "the start date should be correctly displayed in readonly"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_field_daterange")[1].textContent,
+                "03/13/2017 05:30:00",
+                "the end date should be correctly displayed in readonly"
+            );
+
+            // edit form
+            await click(target.querySelector(".o_form_button_edit"));
+            // update input for Datetime
+            await editInput(
+                target,
+                ".o_field_daterange[name='datetime'] input",
+                "02/08/2017 11:30:00"
+            );
+            // save form
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_daterange").textContent,
+                "02/08/2017 11:30:00",
+                "the start date should be correctly displayed in readonly after manual update"
+            );
+        }
+    );
+
+    QUnit.test(
+        "DateRangeField manually input wrong value should show toaster",
+        async function (assert) {
+            serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
+            serverData.models.partner.records[0].date_end = "2017-02-08";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
+                        <field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target, ".o_form_button_edit");
+            await editInput(target, ".o_field_daterange[name='date'] input", "blabla");
+            // click outside daterange field
+            await click(target);
+            assert.hasClass(
+                target.querySelector(".o_field_daterange[name='date']"),
+                "o_field_invalid",
+                "date field should be displayed as invalid"
+            );
+            // update input date with right value
+            await editInput(target, ".o_field_daterange[name='date'] input", "02/08/2017");
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_daterange[name='date']"),
+                "o_field_invalid",
+                "date field should not be displayed as invalid now"
+            );
+
+            // again enter wrong value and try to save should raise invalid fields value
+            await editInput(target, ".o_field_daterange[name='date'] input", "blabla");
+            await click(target.querySelector(".o_form_button_save"));
+            assert.strictEqual(
+                target.querySelector(".o_notification_title").textContent,
+                "Invalid fields: "
+            );
+            assert.strictEqual(
+                target.querySelector(".o_notification_content").innerHTML,
+                "<ul><li>A date</li></ul>"
+            );
+            assert.hasClass(target.querySelector(".o_notification"), "border-danger");
+        }
+    );
+
+    QUnit.test("Datetime field with option format type is 'date'", async function (assert) {
+        serverData.models.partner.fields.datetime_end = {
+            string: "Datetime End",
+            type: "datetime",
+        };
+        serverData.models.partner.records[0].datetime_end = "2017-03-13 00:00:00";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="datetime" widget="daterange" options="{'related_end_date': 'datetime_end', 'format_type': 'date'}"/>'
+                    <field name="datetime_end" widget="daterange" options="{'related_start_date': 'datetime', 'format_type': 'date'}"/>'
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_daterange[name='datetime']").textContent,
+            "02/08/2017",
+            "the start date should only show date when option formatType is Date"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_daterange[name='datetime_end']").textContent,
+            "03/13/2017",
+            "the end date should only show date when option formatType is Date"
+        );
+    });
+
+    QUnit.test("Date field with option format type is 'datetime'", async function (assert) {
+        serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
+        serverData.models.partner.records[0].date_end = "2017-03-13";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="date" widget="daterange" options="{'related_end_date': 'date_end', 'format_type': 'datetime'}"/>
+                    <field name="date_end" widget="daterange" options="{'related_start_date': 'date', 'format_type': 'datetime'}"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_daterange[name='date']").textContent,
+            "02/03/2017 05:30:00",
+            "the start date should show date with time when option format_type is datatime"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_daterange[name='date_end']").textContent,
+            "03/13/2017 05:30:00",
+            "the end date should show date with time when option format_type is datatime"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/datetime_field_tests.js b/addons/web/static/tests/views/fields/datetime_field_tests.js
new file mode 100644
index 00000000000..9f33d0496cf
--- /dev/null
+++ b/addons/web/static/tests/views/fields/datetime_field_tests.js
@@ -0,0 +1,610 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import {
+    click,
+    editInput,
+    getFixture,
+    patchTimeZone,
+    triggerEvent,
+    triggerEvents,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        date: { string: "A date", type: "date", searchable: true },
+                        datetime: { string: "A datetime", type: "datetime", searchable: true },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            date: "2017-02-03",
+                            datetime: "2017-02-08 10:00:00",
+                            p: [],
+                        },
+                        {
+                            id: 2,
+                            date: false,
+                            datetime: false,
+                        },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("DatetimeField");
+
+    QUnit.test("DatetimeField in form view", async function (assert) {
+        patchTimeZone(120);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="datetime"/></form>',
+        });
+
+        const expectedDateString = "02/08/2017 12:00:00"; // 10:00:00 without timezone
+        assert.strictEqual(
+            target.querySelector(".o_field_datetime").textContent,
+            expectedDateString,
+            "the datetime should be correctly displayed in readonly"
+        );
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            expectedDateString,
+            "the datetime should be correct in edit mode"
+        );
+
+        // datepicker should not open on focus
+        assert.containsNone(document.body, ".bootstrap-datetimepicker-widget");
+
+        await click(target, ".o_datepicker_input");
+        assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget");
+
+        // select 22 February at 8:25:35
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[8]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[3]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .day[data-day*='/22/']")
+        );
+        await click(document.body.querySelector(".bootstrap-datetimepicker-widget .fa-clock-o"));
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-hour")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .hour")[8]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-minute")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .minute")[5]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-second")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .second")[7]);
+
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed"
+        );
+
+        const newExpectedDateString = "04/22/2017 08:25:35";
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            newExpectedDateString,
+            "the selected date should be displayed in the input"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_datetime").textContent,
+            newExpectedDateString,
+            "the selected date should be displayed after saving"
+        );
+    });
+
+    QUnit.test(
+        "DatetimeField does not trigger fieldChange before datetime completly picked",
+        async function (assert) {
+            patchTimeZone(120);
+
+            serverData.models.partner.onchanges = {
+                datetime() {},
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: '<form><field name="datetime"/></form>',
+                mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        assert.step("onchange");
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            await click(target, ".o_datepicker_input");
+            assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget");
+
+            // select a date and time
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+            );
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+            );
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[8]
+            );
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[3]
+            );
+            await click(
+                document.body.querySelector(
+                    ".bootstrap-datetimepicker-widget .day[data-day*='/22/']"
+                )
+            );
+            await click(
+                document.body.querySelector(".bootstrap-datetimepicker-widget .fa-clock-o")
+            );
+            await click(
+                document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-hour")
+            );
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .hour")[8]
+            );
+            await click(
+                document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-minute")
+            );
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .minute")[5]
+            );
+            await click(
+                document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-second")
+            );
+            assert.verifySteps([], "should not have done any onchange yet");
+            await click(
+                document.body.querySelectorAll(".bootstrap-datetimepicker-widget .second")[7]
+            );
+
+            assert.containsNone(document.body, ".bootstrap-datetimepicker-widget");
+            assert.strictEqual(
+                target.querySelector(".o_datepicker_input").value,
+                "04/22/2017 08:25:35"
+            );
+            assert.verifySteps(["onchange"], "should have done only one onchange");
+        }
+    );
+
+    QUnit.test("DatetimeField with datetime formatted without second", async function (assert) {
+        patchTimeZone(0);
+
+        serverData.models.partner.fields.datetime.default = "2017-08-02 12:00:05";
+        serverData.models.partner.fields.datetime.required = true;
+
+        registry.category("services").add(
+            "localization",
+            makeFakeLocalizationService({
+                dateFormat: "MM/dd/yyyy",
+                timeFormat: "HH:mm",
+                dateTimeFormat: "MM/dd/yyyy HH:mm",
+            }),
+            { force: true }
+        );
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="datetime"/></form>',
+        });
+
+        const expectedDateString = "08/02/2017 12:00";
+        assert.strictEqual(
+            target.querySelector(".o_field_datetime input").value,
+            expectedDateString,
+            "the datetime should be correctly displayed in readonly"
+        );
+
+        await click(target, ".o_form_button_cancel");
+        assert.containsNone(document.body, ".modal", "there should not be a Warning dialog");
+    });
+
+    QUnit.test("DatetimeField in editable list view", async function (assert) {
+        patchTimeZone(120);
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `<tree editable="bottom"><field name="datetime"/></tree>`,
+        });
+
+        const expectedDateString = "02/08/2017 12:00:00"; // 10:00:00 without timezone
+        const cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        assert.strictEqual(
+            cell.textContent,
+            expectedDateString,
+            "the datetime should be correctly displayed in readonly"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsOnce(
+            target,
+            "input.o_datepicker_input",
+            "the view should have a date input for editable mode"
+        );
+        assert.strictEqual(
+            target.querySelector("input.o_datepicker_input"),
+            document.activeElement,
+            "date input should have the focus"
+        );
+
+        assert.strictEqual(
+            target.querySelector("input.o_datepicker_input").value,
+            expectedDateString,
+            "the date should be correct in edit mode"
+        );
+
+        assert.containsNone(document.body, ".bootstrap-datetimepicker-widget");
+        await click(target, ".o_datepicker_input");
+        assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget");
+
+        // select 22 February at 8:25:35
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[0]
+        );
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")[8]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[3]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .day[data-day*='/22/']")
+        );
+        await click(document.body.querySelector(".bootstrap-datetimepicker-widget .fa-clock-o"));
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-hour")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .hour")[8]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-minute")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .minute")[5]);
+        await click(
+            document.body.querySelector(".bootstrap-datetimepicker-widget .timepicker-second")
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .second")[7]);
+
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be closed"
+        );
+
+        const newExpectedDateString = "04/22/2017 08:25:35";
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            newExpectedDateString,
+            "the selected datetime should be displayed in the input"
+        );
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        assert.strictEqual(
+            target.querySelector("tr.o_data_row td:not(.o_list_record_selector)").textContent,
+            newExpectedDateString,
+            "the selected datetime should be displayed after saving"
+        );
+    });
+
+    QUnit.test(
+        "multi edition of DatetimeField in list view: edit date in input",
+        async function (assert) {
+            await makeView({
+                serverData,
+                type: "list",
+                resModel: "partner",
+                arch: '<tree multi_edit="1"><field name="datetime"/></tree>',
+            });
+
+            const rows = target.querySelectorAll(".o_data_row");
+
+            // select two records and edit them
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+
+            await click(rows[0], ".o_data_cell");
+
+            assert.containsOnce(target, "input.o_datepicker_input");
+            await editInput(target, ".o_datepicker_input", "10/02/2019 09:00:00");
+
+            assert.containsOnce(document.body, ".modal");
+            await click(target.querySelector(".modal .modal-footer .btn-primary"));
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row:first-child .o_data_cell").textContent,
+                "10/02/2019 09:00:00"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_data_row:nth-child(1) .o_data_cell").textContent,
+                "10/02/2019 09:00:00"
+            );
+        }
+    );
+
+    QUnit.test("DatetimeField remove value", async function (assert) {
+        assert.expect(4);
+
+        patchTimeZone(120);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="datetime"/></form>',
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(
+                        args[1].datetime,
+                        false,
+                        "the correct value should be saved"
+                    );
+                }
+            },
+        });
+
+        // switch to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "02/08/2017 12:00:00",
+            "the date time should be correct in edit mode"
+        );
+
+        const input = target.querySelector(".o_datepicker_input");
+        input.value = "";
+        await triggerEvents(input, null, ["input", "change", "focusout"]);
+        assert.strictEqual(
+            target.querySelector(".o_datepicker_input").value,
+            "",
+            "should have an empty input"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_datetime").textContent,
+            "",
+            "the selected date should be displayed after saving"
+        );
+    });
+
+    QUnit.test(
+        "DatetimeField with date/datetime widget (with day change)",
+        async function (assert) {
+            patchTimeZone(-240);
+
+            serverData.models.partner.records[0].p = [2];
+            serverData.models.partner.records[1].datetime = "2017-02-08 02:00:00"; // UTC
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="datetime" />
+                            </tree>
+                            <form>
+                                <field name="datetime" widget="date" />
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            const expectedDateString = "02/07/2017 22:00:00"; // local time zone
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='p'] .o_data_cell").textContent,
+                expectedDateString,
+                "the datetime (datetime widget) should be correctly displayed in tree view"
+            );
+
+            // switch to form view
+            await click(target, ".o_field_widget[name='p'] .o_data_cell");
+            assert.strictEqual(
+                document.body.querySelector(".modal .o_field_date[name='datetime']").textContent,
+                "02/07/2017",
+                "the datetime (date widget) should be correctly displayed in form view"
+            );
+        }
+    );
+
+    QUnit.test(
+        "DatetimeField with date/datetime widget (without day change)",
+        async function (assert) {
+            patchTimeZone(-240);
+
+            serverData.models.partner.records[0].p = [2];
+            serverData.models.partner.records[1].datetime = "2017-02-08 10:00:00"; // without timezone
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="datetime" />
+                            </tree>
+                            <form>
+                                <field name="datetime" widget="date" />
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            const expectedDateString = "02/08/2017 06:00:00"; // with timezone
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='p'] .o_data_cell").textContent,
+                expectedDateString,
+                "the datetime (datetime widget) should be correctly displayed in tree view"
+            );
+
+            // switch to form view
+            await click(target, ".o_field_widget[name='p'] .o_data_cell");
+            assert.strictEqual(
+                document.body.querySelector(".modal .o_field_date[name='datetime']").textContent,
+                "02/08/2017",
+                "the datetime (date widget) should be correctly displayed in form view"
+            );
+        }
+    );
+
+    QUnit.test("datepicker option: daysOfWeekDisabled", async function (assert) {
+        serverData.models.partner.fields.datetime.default = "2017-08-02 12:00:05";
+        serverData.models.partner.fields.datetime.required = true;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="datetime" options="{'datepicker': { 'daysOfWeekDisabled': [0, 6] }}" />
+                </form>`,
+        });
+
+        await click(target, ".o_datepicker_input");
+
+        for (const el of document.body.querySelectorAll(".day:nth-child(2), .day:last-child")) {
+            assert.hasClass(el, "disabled", "first and last days must be disabled");
+        }
+
+        // the assertions below could be replaced by a single hasClass classic on the jQuery set using the idea
+        // All not <=> not Exists. But we want to be sure that the set is non empty. We don't have an helper
+        // function for that.
+        for (const el of document.body.querySelectorAll(
+            ".day:not(:nth-child(2)):not(:last-child)"
+        )) {
+            assert.doesNotHaveClass(el, "disabled", "other days must stay clickable");
+        }
+    });
+
+    QUnit.test("datetime field: hit enter should update value", async function (assert) {
+        // This test verifies that the field datetime is correctly computed when:
+        //     - we press enter to validate our entry
+        //     - we click outside the field to validate our entry
+        //     - we save
+        patchTimeZone(120);
+
+        registry.category("services").add(
+            "localization",
+            makeFakeLocalizationService({
+                dateFormat: "%m/%d/%Y",
+                timeFormat: "%H:%M:%S",
+            }),
+            { force: true }
+        );
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="datetime"/></form>',
+            resId: 1,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        const datetime = target.querySelector(".o_field_datetime input");
+
+        // Enter a beginning of date and press enter to validate
+        await editInput(datetime, null, "01/08/22 14:30:40");
+        await triggerEvent(datetime, null, "keydown", { key: "Enter" });
+
+        const datetimeValue = `01/08/2022 14:30:40`;
+
+        assert.strictEqual(datetime.value, datetimeValue);
+
+        // Click outside the field to check that the field is not changed
+        await click(target);
+        assert.strictEqual(datetime.value, datetimeValue);
+
+        // Save and check that it's still ok
+        await click(target, ".o_form_button_save");
+
+        const { textContent } = target.querySelector(".o_field_datetime span");
+        assert.strictEqual(textContent, datetimeValue);
+    });
+
+    QUnit.test(
+        "datetime field with date widget: hit enter should update value",
+        async function (assert) {
+            /**
+             * Don't think this test is usefull in the new system.
+             */
+            patchTimeZone(120);
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: '<form><field name="datetime" widget="date"/></form>',
+                resId: 1,
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            await editInput(target, ".o_field_widget input", "01/08/22");
+            await triggerEvent(target, ".o_field_widget input", "keydown", { key: "Enter" });
+
+            assert.strictEqual(target.querySelector(".o_field_widget input").value, "01/08/2022");
+
+            // Click outside the field to check that the field is not changed
+            await click(target);
+            assert.strictEqual(target.querySelector(".o_field_widget input").value, "01/08/2022");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/domain_field_tests.js b/addons/web/static/tests/views/fields/domain_field_tests.js
new file mode 100644
index 00000000000..85fb0bdfee4
--- /dev/null
+++ b/addons/web/static/tests/views/fields/domain_field_tests.js
@@ -0,0 +1,809 @@
+/** @odoo-module **/
+
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import {
+    click,
+    editInput,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        date: { string: "A date", type: "date" },
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                        },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            date: "2017-02-03",
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 0,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            foo: "abc",
+                            int_field: false,
+                        },
+                        { id: 3, bar: true, foo: "gnap", int_field: 80 },
+                        { id: 5, bar: false, foo: "blop", int_field: -4 },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char", searchable: true },
+                        color: { string: "Color index", type: "integer", searchable: true },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("DomainField");
+
+    QUnit.test(
+        "The domain editor should not crash the view when given a dynamic filter",
+        async function (assert) {
+            // dynamic filters (containing variables, such as uid, parent or today)
+            // are not handled by the domain editor, but it shouldn't crash the view
+            serverData.models.partner.records[0].foo = `[("int_field", "=", uid)]`;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo" widget="domain" options="{'model': 'partner'}" />
+                        <field name="int_field" invisible="1" />
+                    </form>`,
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_read_mode").textContent,
+                "This domain is not supported.",
+                "The widget should not crash the view, but gracefully admit its failure."
+            );
+        }
+    );
+
+    QUnit.test("basic domain field usage is ok", async function (assert) {
+        serverData.models.partner.records[0].foo = "[]";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="domain" options="{'model': 'partner_type'}" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+        await click(target, ".o_form_button_edit");
+
+        // As the domain is empty, there should be a button to add the first
+        // domain part
+        assert.containsOnce(
+            target,
+            ".o_domain_add_first_node_button",
+            "there should be a button to create first domain element"
+        );
+
+        // Clicking on the button should add the [["id", "=", "1"]] domain, so
+        // there should be a field selector in the DOM
+        await click(target, ".o_domain_add_first_node_button");
+        assert.containsOnce(target, ".o_field_selector", "there should be a field selector");
+
+        // Focusing the field selector input should open the field selector
+        // popover
+        await click(target, ".o_field_selector");
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_search input",
+            "field selector popover should contain a search input"
+        );
+
+        // The popover should contain the list of partner_type fields and so
+        // there should be the "Color index" field
+        assert.strictEqual(
+            document.body.querySelector(".o_field_selector_item").textContent,
+            "Color index",
+            "field selector popover should contain 'Color index' field"
+        );
+
+        // Clicking on this field should close the popover, then changing the
+        // associated value should reveal one matched record
+        await click(document.body.querySelector(".o_field_selector_item"));
+
+        const input = target.querySelector(".o_domain_leaf_value_input");
+        input.value = 2;
+        await triggerEvent(input, null, "change");
+
+        assert.strictEqual(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim().substr(0, 2),
+            "1 ",
+            "changing color value to 2 should reveal only one record"
+        );
+
+        // Saving the form view should show a readonly domain containing the
+        // "color" field
+        await click(target, ".o_form_button_save");
+        assert.ok(
+            target.querySelector(".o_field_domain").textContent.includes("Color index"),
+            "field selector readonly value should now contain 'Color index'"
+        );
+    });
+
+    QUnit.test("domain field is correctly reset on every view change", async function (assert) {
+        serverData.models.partner.records[0].foo = `[("id", "=", 1)]`;
+        serverData.models.partner.fields.bar.type = "char";
+        serverData.models.partner.records[0].bar = "product";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="bar" />
+                            <field name="foo" widget="domain" options="{'model': 'bar'}" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+        await click(target, ".o_form_button_edit");
+
+        // As the domain is equal to [["id", "=", 1]] there should be a field
+        // selector to change this
+        assert.containsOnce(
+            target,
+            ".o_field_domain .o_field_selector",
+            "there should be a field selector"
+        );
+
+        // Focusing its input should open the field selector popover
+        await click(target.querySelector(".o_field_selector"));
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // As the value of the "bar" field is "product", the field selector
+        // popover should contain the list of "product" fields
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_item",
+            "field selector popover should contain only one field"
+        );
+        assert.strictEqual(
+            document.body.querySelector(".o_field_selector_item").textContent,
+            "Product Name",
+            "field selector popover should contain 'Product Name' field"
+        );
+
+        // Now change the value of the "bar" field to "partner_type"
+        const input = target.querySelector(".o_field_widget[name='bar'] input");
+        await click(input);
+        input.value = "partner_type";
+        await triggerEvent(input, null, "change");
+
+        // Refocusing the field selector input should open the popover again
+        await click(target.querySelector(".o_field_selector"));
+        assert.containsOnce(
+            document.body,
+            ".o_field_selector_popover",
+            "field selector popover should be visible"
+        );
+
+        // Now the list of fields should be the ones of the "partner_type" model
+        assert.containsN(
+            document.body,
+            ".o_field_selector_item",
+            2,
+            "field selector popover should contain two fields"
+        );
+        assert.strictEqual(
+            document.body.querySelector(".o_field_selector_item").textContent,
+            "Color index",
+            "field selector popover should contain 'Color index' field"
+        );
+    });
+
+    QUnit.test(
+        "domain field can be reset with a new domain (from onchange)",
+        async function (assert) {
+            serverData.models.partner.records[0].foo = "[]";
+            serverData.models.partner.onchanges = {
+                display_name(obj) {
+                    obj.foo = `[("id", "=", 1)]`;
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name" />
+                        <field name="foo" widget="domain" options="{'model': 'partner'}" />
+                    </form>`,
+            });
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "5 record(s)",
+                "the domain being empty, there should be 5 records"
+            );
+
+            // update display_name to trigger the onchange and reset foo
+            const input = target.querySelector(".o_field_widget[name='display_name'] input");
+            input.value = "new value";
+            await triggerEvent(input, null, "change");
+
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "1 record(s)",
+                "the domain has changed, there should be only 1 record"
+            );
+        }
+    );
+
+    QUnit.test("domain field: handle false domain as []", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.records[0].foo = false;
+        serverData.models.partner.fields.bar.type = "char";
+        serverData.models.partner.records[0].bar = "product";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="bar" />
+                            <field name="foo" widget="domain" options="{'model': 'bar'}" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "search_count") {
+                    assert.deepEqual(args[0], [], "should send a valid domain");
+                }
+            },
+        });
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name='foo']:not(.o_field_empty)",
+            "there should be a domain field, not considered empty"
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.containsNone(
+            target,
+            ".o_field_widget[name='foo'] .text-warning",
+            "should not display that the domain is invalid"
+        );
+    });
+
+    QUnit.test("basic domain field: show the selection", async function (assert) {
+        serverData.models.partner.records[0].foo = "[]";
+        serverData.views = {
+            "partner_type,false,list": `<tree><field name="display_name" /></tree>`,
+            "partner_type,false,search": `<search><field name="name" string="Name" /></search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="domain" options="{'model': 'partner_type'}" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.equal(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim().substr(0, 2),
+            "2 ",
+            "selection should contain 2 records"
+        );
+
+        // open the selection
+        await click(target, ".o_domain_show_selection_button");
+        assert.strictEqual(
+            target.querySelectorAll(".modal .o_list_view .o_data_row").length,
+            2,
+            "should have open a list view with 2 records in a dialog"
+        );
+
+        // click on a record -> should not open the record
+        // we don't actually check that it doesn't open the record because even
+        // if it tries to, it will crash as we don't define an arch in this test
+        await click(target, ".modal .o_list_view .o_data_row .o_data_cell[data-tooltip='gold']");
+    });
+
+    QUnit.test("field context is propagated when opening selection", async function (assert) {
+        serverData.models.partner.records[0].foo = "[]";
+        serverData.views = {
+            "partner_type,false,list": `<tree><field name="display_name" /></tree>`,
+            "partner_type,3,list": `<tree><field name="id" /></tree>`,
+            "partner_type,false,search": `<search><field name="name" string="Name" /></search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" widget="domain" options="{'model': 'partner_type'}" context="{'tree_view_ref': 3}"/>
+                </form>`,
+        });
+
+        await click(target, ".o_domain_show_selection_button");
+        assert.deepEqual(
+            [...target.querySelectorAll(".modal .o_data_row")].map((x) => x.textContent),
+            ["12", "14"],
+            "should have picked the correct list view"
+        );
+    });
+
+    QUnit.test("domain field: manually edit domain with textarea", async function (assert) {
+        patchWithCleanup(odoo, { debug: true });
+
+        serverData.models.partner.records[0].foo = false;
+        serverData.models.partner.fields.bar.type = "char";
+        serverData.models.partner.records[0].bar = "product";
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="bar"/>
+                    <field name="foo" widget="domain" options="{'model': 'bar'}"/>
+                </form>`,
+            "partner,false,search": `<search />`,
+        };
+
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "test",
+                res_id: 1,
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+            },
+        };
+
+        const webClient = await createWebClient({
+            serverData,
+            mockRPC(route, { method, args }) {
+                if (method === "search_count") {
+                    assert.step(JSON.stringify(args[0]));
+                }
+            },
+        });
+
+        await doAction(webClient, 1);
+        assert.verifySteps(["[]"]);
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+            "2 record(s)"
+        );
+        assert.verifySteps(["[]"]);
+
+        await editInput(target, ".o_domain_debug_input", "[['id', '<', 40]]");
+        // the count should not be re-computed when editing with the textarea
+        assert.strictEqual(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+            "2 record(s)"
+        );
+        assert.verifySteps([]);
+
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+            "1 record(s)"
+        );
+        assert.verifySteps([
+            '[["id","<",40]]', // to validate the domain, before saving
+            '[["id","<",40]]', // to render in readonly once it has been saved
+        ]);
+    });
+
+    QUnit.test(
+        "domain field: manually set an invalid domain with textarea",
+        async function (assert) {
+            patchWithCleanup(odoo, { debug: true });
+
+            serverData.models.partner.records[0].foo = false;
+            serverData.models.partner.fields.bar.type = "char";
+            serverData.models.partner.records[0].bar = "product";
+
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <field name="bar"/>
+                        <field name="foo" widget="domain" options="{'model': 'bar'}"/>
+                    </form>`,
+                "partner,false,search": `<search />`,
+            };
+
+            serverData.actions = {
+                1: {
+                    id: 1,
+                    name: "test",
+                    res_id: 1,
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [[false, "form"]],
+                },
+            };
+
+            const webClient = await createWebClient({
+                serverData,
+                mockRPC(route, { method, args }) {
+                    if (method === "search_count") {
+                        assert.step(JSON.stringify(args[0]));
+                    }
+                    if (method === "write") {
+                        throw new Error("should not save");
+                    }
+                },
+            });
+
+            await doAction(webClient, 1);
+            assert.verifySteps(["[]"]);
+
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "2 record(s)"
+            );
+            assert.verifySteps(["[]"]);
+
+            await editInput(target, ".o_domain_debug_input", "[['abc']]");
+            // the count should not be re-computed when editing with the textarea
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "2 record(s)"
+            );
+            assert.verifySteps([]);
+
+            await click(target, ".o_form_button_save");
+            assert.hasClass(
+                target.querySelector(".o_field_domain"),
+                "o_field_invalid",
+                "the field is marked as invalid"
+            );
+            assert.containsOnce(
+                target,
+                ".o_form_view .o_form_editable",
+                "the view is still in edit mode"
+            );
+            assert.verifySteps(['[["abc"]]']);
+        }
+    );
+
+    QUnit.test(
+        "domain field: reload count by clicking on the refresh button",
+        async function (assert) {
+            patchWithCleanup(odoo, { debug: true });
+
+            serverData.models.partner.records[0].foo = "[]";
+            serverData.models.partner.fields.bar.type = "char";
+            serverData.models.partner.records[0].bar = "product";
+
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <field name="bar"/>
+                        <field name="foo" widget="domain" options="{'model': 'bar'}"/>
+                    </form>`,
+                "partner,false,search": `<search />`,
+            };
+
+            serverData.actions = {
+                1: {
+                    id: 1,
+                    name: "test",
+                    res_id: 1,
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [[false, "form"]],
+                },
+            };
+
+            const webClient = await createWebClient({
+                serverData,
+                mockRPC(route, { method, args }) {
+                    if (method === "search_count") {
+                        assert.step(JSON.stringify(args[0]));
+                    }
+                },
+            });
+
+            await doAction(webClient, 1);
+            assert.verifySteps(["[]"]);
+
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "2 record(s)"
+            );
+
+            await editInput(target, ".o_domain_debug_input", "[['id', '<', 40]]");
+            // the count should not be re-computed when editing with the textarea
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "2 record(s)"
+            );
+            assert.verifySteps(["[]"]);
+
+            // click on the refresh button
+            await click(target, ".o_refresh_count");
+            assert.strictEqual(
+                target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+                "1 record(s)"
+            );
+            assert.verifySteps(['[["id","<",40]]']);
+        }
+    );
+
+    QUnit.test("domain field: does not wait for the count to render", async function (assert) {
+        serverData.models.partner.records[0].foo = "[]";
+        serverData.models.partner.fields.bar.type = "char";
+        serverData.models.partner.records[0].bar = "product";
+
+        const def = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="foo" widget="domain" options="{'model': 'bar'}"/>
+                </form>`,
+            async mockRPC(route, { method }) {
+                if (method === "search_count") {
+                    await def;
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_field_domain_panel .fa-circle-o-notch.fa-spin");
+        assert.containsNone(target, ".o_field_domain_panel .o_domain_show_selection_button");
+
+        def.resolve();
+        await nextTick();
+
+        assert.containsNone(target, ".o_field_domain_panel .fa-circle-o-notch .fa-spin");
+        assert.containsOnce(target, ".o_field_domain_panel .o_domain_show_selection_button");
+        assert.strictEqual(
+            target.querySelector(".o_domain_show_selection_button").textContent.trim(),
+            "2 record(s)"
+        );
+    });
+
+    QUnit.test("domain field: edit domain with dynamic content", async function (assert) {
+        assert.expect(2);
+
+        patchWithCleanup(odoo, { debug: true });
+
+        let rawDomain = `
+            [
+                ["date", ">=", datetime.datetime.combine(context_today() + relativedelta(days = -365), datetime.time(0, 0, 0)).to_utc().strftime("%Y-%m-%d %H:%M:%S")]
+            ]
+        `;
+        serverData.models.partner.records[0].foo = rawDomain;
+        serverData.models.partner.fields.bar.type = "char";
+        serverData.models.partner.records[0].bar = "partner";
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="bar"/>
+                    <field name="foo" widget="domain" options="{'model': 'bar'}"/>
+                </form>`,
+            "partner,false,search": `<search />`,
+        };
+
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "test",
+                res_id: 1,
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+            },
+        };
+
+        const webClient = await createWebClient({
+            serverData,
+            mockRPC(route, { method, args }) {
+                if (method === "write") {
+                    assert.strictEqual(args[1].foo, rawDomain);
+                }
+            },
+        });
+
+        await doAction(webClient, 1);
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(target.querySelector(".o_domain_debug_input").value, rawDomain);
+
+        rawDomain = `
+            [
+                ["date", ">=", datetime.datetime.combine(context_today() + relativedelta(days = -1), datetime.time(0, 0, 0)).to_utc().strftime("%Y-%m-%d %H:%M:%S")]
+            ]
+        `;
+        await editInput(target, ".o_domain_debug_input", rawDomain);
+        await click(target, ".o_form_button_save");
+    });
+
+    QUnit.test("domain field without model", async function (assert) {
+        serverData.models.partner.fields.model_name = { string: "Model name", type: "char" };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="model_name"/>
+                    <field name="display_name" widget="domain" options="{'model': 'model_name'}"/>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "search_count") {
+                    assert.step(args.model);
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="display_name"]').innerText,
+            "Select a model to add a filter.",
+            "should contain an error message saying the model is missing"
+        );
+        assert.verifySteps([]);
+        await editInput(target, ".o_field_widget[name=model_name] input", "test");
+        assert.notStrictEqual(
+            target.querySelector('.o_field_widget[name="display_name"]').innerText,
+            "Select a model to add a filter.",
+            "should not contain an error message anymore"
+        );
+        assert.verifySteps(["test"]);
+    });
+
+    QUnit.test("domain field in kanban view", async function (assert) {
+        serverData.models.partner.records[0].foo = "[]";
+        serverData.views = {
+            "partner_type,false,list": `<tree><field name="display_name" /></tree>`,
+            "partner_type,false,search": `<search><field name="name" string="Name" /></search>`,
+        };
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="bar" />
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="foo" widget="domain" options="{'model': 'partner_type'}" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            selectRecord: (resId) => {
+                assert.step(`open record ${resId}`);
+            },
+        });
+
+        assert.strictEqual(target.querySelector(".o_read_mode").textContent, "Match All records");
+
+        await click(target.querySelector(".o_domain_show_selection_button"));
+        assert.containsOnce(
+            target,
+            ".o_dialog .o_list_view",
+            "selected records are listed in a dialog"
+        );
+
+        await click(target.querySelector(".o_domain_selector"));
+        assert.verifySteps(
+            ["open record 1"],
+            "record should not open when clicked on the 'N record(s)' button"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/email_field_tests.js b/addons/web/static/tests/views/fields/email_field_tests.js
new file mode 100644
index 00000000000..ad8dcdb02d3
--- /dev/null
+++ b/addons/web/static/tests/views/fields/email_field_tests.js
@@ -0,0 +1,242 @@
+/** @odoo-module **/
+
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            trim: true,
+                        },
+                        empty_string: {
+                            string: "Empty string",
+                            type: "char",
+                            default: false,
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                    },
+                    records: [{ foo: "yop" }, { foo: "blip" }],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("EmailField");
+
+    QUnit.test("EmailField in form view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="email"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        let mailtoLink = target.querySelector(".o_field_email a.o_form_uri.o_text_overflow");
+        assert.containsOnce(target, mailtoLink, "should have a anchor with correct classes");
+        assert.strictEqual(mailtoLink.textContent, "yop", "the value should be displayed properly");
+        assert.hasAttrValue(mailtoLink, "href", "mailto:yop", "should have proper mailto prefix");
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        const mailtoEdit = target.querySelector('.o_field_email input[type="email"]');
+        assert.containsOnce(target, mailtoEdit, "should have an input for the email field");
+        assert.strictEqual(
+            mailtoEdit.value,
+            "yop",
+            "input should contain field value in edit mode"
+        );
+
+        // change value in edit mode
+        await editInput(target, ".o_field_email input[type='email']", "new");
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        mailtoLink = target.querySelector(".o_field_email a");
+        assert.strictEqual(mailtoLink.textContent, "new", "new value should be displayed properly");
+        assert.hasAttrValue(
+            mailtoLink,
+            "href",
+            "mailto:new",
+            "should still have proper mailto prefix"
+        );
+    });
+
+    QUnit.test("EmailField in editable list view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree editable="bottom"><field name="foo" widget="email"/></tree>',
+        });
+        assert.strictEqual(
+            target.querySelectorAll("tbody td:not(.o_list_record_selector) a").length,
+            2,
+            "should have 2 cells with a link"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector)").textContent,
+            "yop",
+            "value should be displayed properly as text"
+        );
+
+        let mailtoLink = target.querySelectorAll(".o_field_email a");
+        assert.containsN(
+            target,
+            ".o_field_email a",
+            2,
+            "should have 2 anchors with correct classes"
+        );
+        assert.hasAttrValue(
+            mailtoLink[0],
+            "href",
+            "mailto:yop",
+            "should have proper mailto prefix"
+        );
+        // Edit a line and check the result
+        let cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        await click(cell);
+        assert.hasClass(cell.parentElement, "o_selected_row", "should be set as edit mode");
+        const mailField = cell.querySelector("input");
+        assert.strictEqual(
+            mailField.value,
+            "yop",
+            "should have the correct value in internal input"
+        );
+        await editInput(cell, "input", "new");
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        assert.doesNotHaveClass(
+            cell.parentElement,
+            "o_selected_row",
+            "should not be in edit mode anymore"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector)").textContent,
+            "new",
+            "value should be properly updated"
+        );
+        mailtoLink = target.querySelectorAll(".o_field_widget[name='foo'] a");
+        assert.strictEqual(mailtoLink.length, 2, "should still have anchors with correct classes");
+        assert.hasAttrValue(
+            mailtoLink[0],
+            "href",
+            "mailto:new",
+            "should still have proper mailto prefix"
+        );
+    });
+
+    QUnit.test("EmailField with empty value", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="empty_string" widget="email"/>
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target.querySelector(".o_form_button_save"));
+        const mailtoLink = target.querySelector(".o_field_email a");
+        assert.strictEqual(mailtoLink.textContent, "", "the value should be displayed properly");
+    });
+
+    QUnit.test("EmailField trim user value", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="foo" widget="email"/></form>',
+        });
+        await editInput(target, ".o_field_widget[name='foo'] input", "  abc@abc.com  ");
+        const mailFieldInput = target.querySelector('.o_field_widget[name="foo"] input');
+        await click(target.querySelector(".o_form_button_save"));
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            mailFieldInput.value,
+            "abc@abc.com",
+            "Foo value should have been trimmed"
+        );
+    });
+
+    QUnit.test(
+        "readonly EmailField is properly rerendered after been changed by onchange",
+        async function (assert) {
+            serverData.models.partner.records[0].foo = "dolores.abernathy@delos";
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="int_field" on_change="1"/> <!-- onchange to update mobile in readonly mode directly -->
+                                <field name="foo" widget="email" readonly="1"/> <!-- readonly only, we don't want to go through write mode -->
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        return Promise.resolve({
+                            value: {
+                                foo: "lara.espin@unknown", // onchange to update foo in readonly mode directly
+                            },
+                        });
+                    }
+                },
+            });
+            // check initial rendering
+            assert.strictEqual(
+                target.querySelector(".o_field_email").textContent,
+                "dolores.abernathy@delos",
+                "Initial email text should be set"
+            );
+
+            // edit the phone field, but with the mail in readonly mode
+            await click(target.querySelector(".o_form_button_edit"));
+            await editInput(target, ".o_field_widget[name='int_field'] input", 3);
+
+            // check rendering after changes
+            assert.strictEqual(
+                target.querySelector(".o_field_email").textContent,
+                "lara.espin@unknown",
+                "email text should be updated"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/float_factor_field_tests.js b/addons/web/static/tests/views/fields/float_factor_field_tests.js
new file mode 100644
index 00000000000..ff5ebeff88a
--- /dev/null
+++ b/addons/web/static/tests/views/fields/float_factor_field_tests.js
@@ -0,0 +1,70 @@
+/** @odoo-module **/
+
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: { qux: { string: "Qux", type: "float", digits: [16, 1] } },
+                    records: [{ id: 1, qux: 9.1 }],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("FloatFactorField");
+
+    QUnit.test("FloatFactorField in form view", async function (assert) {
+        assert.expect(4);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="qux" widget="float_factor" options="{'factor': 0.5}" digits="[16,2]" />
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    // 2.3 / 0.5 = 4.6
+                    assert.strictEqual(args[1].qux, 4.6, "the correct float value should be saved");
+                }
+            },
+        });
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "4.55", // 9.1 / 0.5
+            "The formatted value should be displayed properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='qux'] input").value,
+            "4.55",
+            "The value should be rendered correctly in the input."
+        );
+
+        await editInput(target, ".o_field_widget[name='qux'] input", "2.3");
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "2.30",
+            "The new value should be saved and displayed properly."
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/float_field_tests.js b/addons/web/static/tests/views/fields/float_field_tests.js
new file mode 100644
index 00000000000..f0eb5a3e06e
--- /dev/null
+++ b/addons/web/static/tests/views/fields/float_field_tests.js
@@ -0,0 +1,450 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        float_field: { string: "Float field", type: "float" },
+                        int_field: { string: "Int field", type: "integer" },
+                    },
+                    records: [
+                        { id: 1, float_field: 0.36 },
+                        { id: 2, float_field: 0 },
+                        { id: 3, float_field: -3.89859 },
+                        { id: 4, float_field: false },
+                        { id: 5, float_field: 9.1 },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("FloatField");
+
+    QUnit.test("unset field should be set to 0", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 4,
+            arch: '<form><field name="float_field"/></form>',
+        });
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_empty",
+            "Non-set float field should be considered as 0.00"
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0.00",
+            "Non-set float field should be considered as 0."
+        );
+    });
+
+    QUnit.test("use correct digit precision from field definition", async function (assert) {
+        serverData.models.partner.fields.float_field.digits = [0, 1];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: '<form><field name="float_field"/></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_float").textContent,
+            "0.4",
+            "should contain a number rounded to 1 decimal"
+        );
+    });
+
+    QUnit.test("use correct digit precision from options", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `<form><field name="float_field" options="{ 'digits': [0, 1] }" /></form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_float").textContent,
+            "0.4",
+            "should contain a number rounded to 1 decimal"
+        );
+    });
+
+    QUnit.test("use correct digit precision from field attrs", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: '<form><field name="float_field" digits="[0, 1]" /></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_float").textContent,
+            "0.4",
+            "should contain a number rounded to 1 decimal"
+        );
+    });
+
+    QUnit.test("with 'step' option", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `<form><field name="float_field" options="{'type': 'number', 'step': 0.3}"/></form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.ok(
+            target.querySelector(".o_field_widget input").hasAttribute("step"),
+            "Integer field with option type must have a step attribute."
+        );
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "step",
+            "0.3",
+            'Integer field with option type must have a step attribute equals to "3".'
+        );
+    });
+
+    QUnit.test("basic flow in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: `<form><field name="float_field" options="{ 'digits': [0, 3] }" /></form>`,
+        });
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_empty",
+            "Float field should be considered set for value 0."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0.000",
+            "The value should be displayed properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "0.000",
+            "The value should be rendered with correct precision."
+        );
+
+        await editInput(target, 'div[name="float_field"] input', "108.2451938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "108.2451938598598",
+            "The value should not be formatted yet."
+        );
+
+        await editInput(target, ".o_field_widget[name=float_field] input", "18.8958938598598");
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "18.896",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("use a formula", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: `<form><field name="float_field" options="{ 'digits': [0, 3] }" /></form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=float_field] input", "=20+3*2");
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "26.000",
+            "The new value should be calculated properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=float_field] input", "=2**3");
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "8.000",
+            "The new value should be calculated properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=float_field] input", "=2^3");
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "8.000",
+            "The new value should be calculated properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=float_field] input", "=100/3");
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "33.333",
+            "The new value should be calculated properly."
+        );
+    });
+
+    QUnit.test("use incorrect formula", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: `<form><field name="float_field" options="{ 'digits': [0, 3] }" /></form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=float_field] input", "=abc");
+        await click(target, ".o_form_button_save");
+
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=float_field]"),
+            "o_field_invalid",
+            "fload field should be displayed as invalid"
+        );
+        assert.containsOnce(target, ".o_form_editable", "form view should still be editable");
+
+        await editInput(target, ".o_field_widget[name=float_field] input", "=3:2?+4");
+        await click(target, ".o_form_button_save");
+
+        assert.containsOnce(target, ".o_form_editable", "form view should still be editable");
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=float_field]"),
+            "o_field_invalid",
+            "float field should be displayed as invalid"
+        );
+    });
+
+    QUnit.test("float field in editable list view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `
+                <tree editable="bottom">
+                    <field name="float_field" widget="float" digits="[5,3]" />
+                </tree>`,
+        });
+
+        // switch to edit mode
+        var cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        await click(cell);
+
+        assert.containsOnce(
+            target,
+            'div[name="float_field"] input',
+            "The view should have 1 input for editable float."
+        );
+
+        await editInput(target, 'div[name="float_field"] input', "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector('div[name="float_field"] input').value,
+            "108.2458938598598",
+            "The value should not be formatted yet."
+        );
+
+        await editInput(target, 'div[name="float_field"] input', "18.8958938598598");
+        await click(target.querySelector(".o_list_button_save"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "18.896",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("do not trigger a field_changed if they have not changed", async function (assert) {
+        serverData.models.partner.records[0].float_field = false;
+        serverData.models.partner.records[0].int_field = false;
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="float_field" widget="float" digits="[5,3]"/>
+                        <field name="int_field"/>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method }) {
+                assert.step(method);
+            },
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.verifySteps(["get_views", "read"]); // should not have save as nothing changed
+    });
+
+    QUnit.test("float field with type number option", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="float_field" options="{'type': 'number'}"/>
+                </form>`,
+            resId: 4,
+        });
+        registry.category("services").remove("localization");
+        registry
+            .category("services")
+            .add(
+                "localization",
+                makeFakeLocalizationService({ thousandsSep: ",", grouping: [3, 0] })
+            );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.ok(
+            target.querySelector(".o_field_widget input").hasAttribute("type"),
+            "Float field with option type must have a type attribute."
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "type",
+            "number",
+            'Float field with option type must have a type attribute equals to "number".'
+        );
+        await editInput(target, ".o_field_widget[name=float_field] input", "123456.7890");
+        await click(target.querySelector(".o_form_button_save"));
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "123456.7890",
+            "Float value must be not formatted if input type is number."
+        );
+        await click(target.querySelector(".o_form_button_save"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "123,456.79",
+            "Float value must be formatted in readonly view even if the input type is number."
+        );
+    });
+
+    QUnit.test(
+        "float field with type number option and comma decimal separator",
+        async function (assert) {
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" options="{'type': 'number'}"/>
+                    </form>`,
+                resId: 4,
+            });
+            registry.category("services").remove("localization");
+            registry.category("services").add(
+                "localization",
+                makeFakeLocalizationService({
+                    thousandsSep: ".",
+                    decimalPoint: ",",
+                    grouping: [3, 0],
+                })
+            );
+
+            await click(target.querySelector(".o_form_button_edit"));
+            assert.ok(
+                target.querySelector(".o_field_widget input").hasAttribute("type"),
+                "Float field with option type must have a type attribute."
+            );
+            assert.hasAttrValue(
+                target.querySelector(".o_field_widget input"),
+                "type",
+                "number",
+                'Float field with option type must have a type attribute equals to "number".'
+            );
+            await editInput(target, ".o_field_widget[name=float_field] input", "123456.789");
+            await click(target.querySelector(".o_form_button_save"));
+            await click(target.querySelector(".o_form_button_edit"));
+            assert.strictEqual(
+                target.querySelector(".o_field_widget input").value,
+                "123456.789",
+                "Float value must be not formatted if input type is number."
+            );
+            await click(target.querySelector(".o_form_button_save"));
+            assert.strictEqual(
+                target.querySelector(".o_field_widget").textContent,
+                "123.456,79",
+                "Float value must be formatted in readonly view even if the input type is number."
+            );
+        }
+    );
+
+    QUnit.test("float field without type number option", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="float_field"/></form>',
+            resId: 4,
+        });
+        registry.category("services").remove("localization");
+        registry
+            .category("services")
+            .add(
+                "localization",
+                makeFakeLocalizationService({ thousandsSep: ",", grouping: [3, 0] })
+            );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "type",
+            "text",
+            "Float field with option type must have a text type (default type)."
+        );
+
+        await editInput(target, ".o_field_widget[name=float_field] input", "123456.7890");
+        await click(target.querySelector(".o_form_button_save"));
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "123,456.79",
+            "Float value must be formatted if input type isn't number."
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/float_time_field_tests.js b/addons/web/static/tests/views/fields/float_time_field_tests.js
new file mode 100644
index 00000000000..dae0322b3da
--- /dev/null
+++ b/addons/web/static/tests/views/fields/float_time_field_tests.js
@@ -0,0 +1,167 @@
+/** @odoo-module **/
+
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        qux: { string: "Qux", type: "float", digits: [16, 1], searchable: true },
+                    },
+                    records: [{ id: 5, qux: 9.1 }],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("FloatTimeField");
+
+    QUnit.test("FloatTimeField in form view", async function (assert) {
+        assert.expect(5);
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="qux" widget="float_time"/>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    // 48 / 60 = 0.8
+                    assert.strictEqual(
+                        args.args[1].qux,
+                        -11.8,
+                        "the correct float value should be saved"
+                    );
+                }
+            },
+            resId: 5,
+        });
+
+        // 9 + 0.1 * 60 = 9.06
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "09:06",
+            "The formatted time value should be displayed properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_field_float_time[name=qux] input").value,
+            "09:06",
+            "The value should be rendered correctly in the input."
+        );
+
+        await editInput(
+            target.querySelector(".o_field_float_time[name=qux] input"),
+            null,
+            "-11:48"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_float_time[name=qux] input").value,
+            "-11:48",
+            "The new value should be displayed properly in the input."
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "-11:48",
+            "The new value should be saved and displayed properly."
+        );
+    });
+
+    QUnit.test("FloatTimeField value formatted on blur", async function (assert) {
+        assert.expect(4);
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="qux" widget="float_time"/>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(
+                        args.args[1].qux,
+                        9.5,
+                        "the correct float value should be saved"
+                    );
+                }
+            },
+            resId: 5,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "09:06",
+            "The formatted time value should be displayed properly."
+        );
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target.querySelector(".o_field_float_time[name=qux] input"), null, "9.5");
+        assert.strictEqual(
+            target.querySelector(".o_field_float_time[name=qux] input").value,
+            "09:30",
+            "The new value should be displayed properly in the input."
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "09:30",
+            "The new value should be saved and displayed properly."
+        );
+    });
+
+    QUnit.test("FloatTimeField with invalid value", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="qux" widget="float_time"/>
+                </form>`,
+        });
+
+        await editInput(
+            target.querySelector(".o_field_float_time[name=qux] input"),
+            null,
+            "blabla"
+        );
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_notification_title").textContent,
+            "Invalid fields: "
+        );
+        assert.strictEqual(
+            target.querySelector(".o_notification_content").innerHTML,
+            "<ul><li>Qux</li></ul>"
+        );
+        assert.hasClass(target.querySelector(".o_notification"), "border-danger");
+        assert.hasClass(target.querySelector(".o_field_float_time[name=qux]"), "o_field_invalid");
+
+        await editInput(target.querySelector(".o_field_float_time[name=qux] input"), null, "6.5");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_float_time[name=qux] input"),
+            "o_field_invalid",
+            "date field should not be displayed as invalid now"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/float_toggle_field_tests.js b/addons/web/static/tests/views/fields/float_toggle_field_tests.js
new file mode 100644
index 00000000000..427c0c29b1a
--- /dev/null
+++ b/addons/web/static/tests/views/fields/float_toggle_field_tests.js
@@ -0,0 +1,120 @@
+/** @odoo-module **/
+
+import { click, clickEdit, clickSave, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        float_field: { string: "Float field", type: "float" },
+                    },
+                    records: [{ id: 1, float_field: 0.44444 }],
+                },
+            },
+        };
+        setupViewRegistries();
+        target = getFixture();
+    });
+
+    QUnit.module("FloatToggleField");
+
+    QUnit.test("basic flow in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="float_toggle" options="{'factor': 0.125, 'range': [0, 1, 0.75, 0.5, 0.25]}" digits="[5,3]"/>
+                </form>`,
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    // 1.000 / 0.125 = 8
+                    assert.step(args[1].float_field.toString());
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0.056", // 0.4444 * 0.125
+            "The formatted time value should be displayed properly."
+        );
+
+        await clickEdit(target);
+
+        assert.strictEqual(
+            target.querySelector("button.o_field_float_toggle").textContent,
+            "0.056",
+            "The value should be rendered correctly on the button."
+        );
+
+        await click(target.querySelector("button.o_field_float_toggle"));
+
+        assert.strictEqual(
+            target.querySelector("button.o_field_float_toggle").textContent,
+            "0.000",
+            "The value should be rendered correctly on the button."
+        );
+
+        // note, 0 will not be written, it's kept in the _changes of the datapoint.
+        // because save has not been clicked.
+
+        await click(target.querySelector("button.o_field_float_toggle"));
+
+        assert.strictEqual(
+            target.querySelector("button.o_field_float_toggle").textContent,
+            "1.000",
+            "The value should be rendered correctly on the button."
+        );
+
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "1.000",
+            "The new value should be saved and displayed properly."
+        );
+
+        assert.verifySteps(["8"]);
+    });
+
+    QUnit.test("kanban view (readonly) with option force_button", async function (assert) {
+        await makeView({
+            type: "kanban",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="float_field" widget="float_toggle" options="{'force_button': true}"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.containsOnce(
+            target,
+            "button.o_field_float_toggle",
+            "should have rendered toggle button"
+        );
+
+        const value = target.querySelector("button.o_field_float_toggle").textContent;
+        await click(target.querySelector("button.o_field_float_toggle"));
+        assert.notEqual(
+            target.querySelector("button.o_field_float_toggle").textContent,
+            value,
+            "float_field field value should be changed"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/font_selection_field_tests.js b/addons/web/static/tests/views/fields/font_selection_field_tests.js
new file mode 100644
index 00000000000..00aa4b532de
--- /dev/null
+++ b/addons/web/static/tests/views/fields/font_selection_field_tests.js
@@ -0,0 +1,68 @@
+/** @odoo-module **/
+import { editSelect, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        fonts: {
+                            type: "selection",
+                            selection: [
+                                ["Lato", "Lato"],
+                                ["Oswald", "Oswald"],
+                            ],
+                            default: "Lato",
+                            string: "Fonts",
+                        },
+                    },
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("FontSelectionField");
+
+    QUnit.test("FontSelectionField displays the correct fonts on options", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="fonts" widget="font"/></form>',
+        });
+        const options = target.querySelectorAll('.o_field_widget[name="fonts"] option');
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="fonts"] > *').style.fontFamily,
+            "Lato",
+            "Widget font should be default (Lato)"
+        );
+        assert.strictEqual(options[0].value, "false", "Unselected option has no value");
+        assert.strictEqual(
+            options[1].style.fontFamily,
+            "Lato",
+            "Option 1 should have the correct font (Lato)"
+        );
+        assert.strictEqual(
+            options[2].style.fontFamily,
+            "Oswald",
+            "Option 2 should have the correct font (Oswald)"
+        );
+
+        await editSelect(target, ".o_input", options[2].value);
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="fonts"] > *').style.fontFamily,
+            "Oswald",
+            "Widget font should be updated (Oswald)"
+        );
+    });
+});
diff --git a/addons/web/static/tests/fields/formatters_tests.js b/addons/web/static/tests/views/fields/formatters_tests.js
similarity index 80%
rename from addons/web/static/tests/fields/formatters_tests.js
rename to addons/web/static/tests/views/fields/formatters_tests.js
index 09d7781bbda..297f6fdba6f 100644
--- a/addons/web/static/tests/fields/formatters_tests.js
+++ b/addons/web/static/tests/views/fields/formatters_tests.js
@@ -1,6 +1,9 @@
 /** @odoo-module **/
 
+import { defaultLocalization } from "@web/../tests/helpers/mock_services";
+import { patchWithCleanup } from "@web/../tests/helpers/utils";
 import { localization } from "@web/core/l10n/localization";
+import { session } from "@web/session";
 import {
     formatFloat,
     formatFloatFactor,
@@ -9,21 +12,20 @@ import {
     formatMany2one,
     formatMonetary,
     formatPercentage,
-} from "@web/fields/formatters";
-import { defaultLocalization } from "../helpers/mock_services";
-import { patchWithCleanup } from "../helpers/utils";
-import { session } from "@web/session";
+    formatReference,
+    formatX2many,
+} from "@web/views/fields/formatters";
 
 QUnit.module("Fields", (hooks) => {
     hooks.beforeEach(() => {
-        patchWithCleanup(localization, defaultLocalization);
+        patchWithCleanup(localization, { ...defaultLocalization, grouping: [3, 0] });
     });
 
     QUnit.module("Formatters");
 
     QUnit.test("formatFloat", function (assert) {
         assert.strictEqual(formatFloat(false), "");
-        assert.strictEqual(formatFloat(null), '0.00');
+        assert.strictEqual(formatFloat(null), "0.00");
         assert.strictEqual(formatFloat(1000000), "1,000,000.00");
 
         let options = { grouping: [3, 2, -1], decimalPoint: "?", thousandsSep: "€" };
@@ -192,21 +194,17 @@ QUnit.module("Fields", (hooks) => {
     });
 
     QUnit.test("formatMany2one", function (assert) {
-        assert.strictEqual(formatMany2one(null), "");
-        assert.strictEqual(formatMany2one([1, "A M2O value"]), "A M2O value");
+        assert.strictEqual(formatMany2one(false), "");
+        assert.strictEqual(formatMany2one([false, "M2O value"]), "M2O value");
+        assert.strictEqual(formatMany2one([1, "M2O value"]), "M2O value");
+        assert.strictEqual(formatMany2one([1, "M2O value"], { escape: true }), "M2O%20value");
+    });
 
-        let value = {
-            data: { display_name: "A M2O value" },
-        };
-        assert.strictEqual(formatMany2one(value), "A M2O value");
-
-        value = [1, "A M2O value"];
-        assert.strictEqual(formatMany2one(value, { escape: true }), "A%20M2O%20value");
-
-        value = {
-            data: { display_name: "A M2O value" },
-        };
-        assert.strictEqual(formatMany2one(value, { escape: true }), "A%20M2O%20value");
+    QUnit.test("formatX2many", function (assert) {
+        // Results are cast as strings since they're lazy translated.
+        assert.strictEqual(String(formatX2many({ currentIds: [] })), "No records");
+        assert.strictEqual(String(formatX2many({ currentIds: [1] })), "1 record");
+        assert.strictEqual(String(formatX2many({ currentIds: [1, 3] })), "2 records");
     });
 
     QUnit.test("formatMonetary", function (assert) {
@@ -231,21 +229,24 @@ QUnit.module("Fields", (hooks) => {
         assert.strictEqual(formatMonetary(false), "");
         assert.strictEqual(formatMonetary(200), "200.00");
 
-        assert.deepEqual(formatMonetary(1234567.654, { currencyId: 10 }), "1,234,567.65 €");
-        assert.deepEqual(formatMonetary(1234567.654, { currencyId: 11 }), "$ 1,234,567.65");
+        assert.deepEqual(formatMonetary(1234567.654, { currencyId: 10 }), "1,234,567.65\u00a0€");
+        assert.deepEqual(formatMonetary(1234567.654, { currencyId: 11 }), "$\u00a01,234,567.65");
         assert.deepEqual(formatMonetary(1234567.654, { currencyId: 44 }), "1,234,567.65");
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 10, noSymbol: true }),
             "1,234,567.65"
         );
-        assert.deepEqual(formatMonetary(8.0, { currencyId: 10, humanReadable: true }), "8.00 €");
+        assert.deepEqual(
+            formatMonetary(8.0, { currencyId: 10, humanReadable: true }),
+            "8.00\u00a0€"
+        );
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 10, humanReadable: true }),
-            "1.23M €"
+            "1.23M\u00a0€"
         );
         assert.deepEqual(
             formatMonetary(1990000.001, { currencyId: 10, humanReadable: true }),
-            "1.99M €"
+            "1.99M\u00a0€"
         );
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 44, digits: [69, 1] }),
@@ -253,28 +254,29 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 11, digits: [69, 1] }),
-            "$ 1,234,567.65",
+            "$\u00a01,234,567.65",
             "currency digits should take over options digits when both are defined"
         );
 
+        // GES TODO do we keep below behavior ?
         // with field and data
-        const field = {
-            type: "monetary",
-            currency_field: "c_x",
-        };
-        let data = {
-            c_x: { res_id: 11 },
-            c_y: { res_id: 12 },
-        };
-        assert.strictEqual(formatMonetary(200, { field, currencyId: 10, data }), "200.00 €");
-        assert.strictEqual(formatMonetary(200, { field, data }), "$ 200.00");
-        assert.strictEqual(formatMonetary(200, { field, currencyField: "c_y", data }), "200.00 &");
-
-        const floatField = { type: "float" };
-        data = {
-            currency_id: { res_id: 11 },
-        };
-        assert.strictEqual(formatMonetary(200, { field: floatField, data }), "$ 200.00");
+        // const field = {
+        //     type: "monetary",
+        //     currency_field: "c_x",
+        // };
+        // let data = {
+        //     c_x: { res_id: 11 },
+        //     c_y: { res_id: 12 },
+        // };
+        // assert.strictEqual(formatMonetary(200, { field, currencyId: 10, data }), "200.00 €");
+        // assert.strictEqual(formatMonetary(200, { field, data }), "$ 200.00");
+        // assert.strictEqual(formatMonetary(200, { field, currencyField: "c_y", data }), "200.00 &");
+        //
+        // const floatField = { type: "float" };
+        // data = {
+        //     currency_id: { res_id: 11 },
+        // };
+        // assert.strictEqual(formatMonetary(200, { field: floatField, data }), "$ 200.00");
     });
 
     QUnit.test("formatMonetary without currency", function (assert) {
@@ -309,4 +311,10 @@ QUnit.module("Fields", (hooks) => {
         assert.strictEqual(formatPercentage(0.125), "12,5%");
         assert.strictEqual(formatPercentage(0.666666), "66,67%");
     });
+
+    QUnit.test("formatReference", function (assert) {
+        assert.strictEqual(formatReference(false), "");
+        const value = { resModel: "product", resId: 2, displayName: "Chair" };
+        assert.strictEqual(formatReference(value), "Chair");
+    });
 });
diff --git a/addons/web/static/tests/views/fields/handle_field_tests.js b/addons/web/static/tests/views/fields/handle_field_tests.js
new file mode 100644
index 00000000000..ae9a9b6bbd4
--- /dev/null
+++ b/addons/web/static/tests/views/fields/handle_field_tests.js
@@ -0,0 +1,168 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        sequence: { type: "integer", string: "Sequence", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            p: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            p: [],
+                            sequence: 4,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            sequence: 9,
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("HandleField");
+
+    QUnit.test("HandleField in x2m", async function (assert) {
+        serverData.models.partner.records[0].p = [2, 4];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="sequence" widget="handle" />
+                            <field name="display_name" />
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector("td span.o_row_handle").textContent,
+            "",
+            "handle should not have any content"
+        );
+
+        // WOWL-KANBAN: relies on o_form_view scss rules which do not apply for now
+        // assert.strictEqual(
+        //     getComputedStyle(target.querySelector("td span.o_row_handle")).display,
+        //     "none",
+        //     "handle should be invisible in readonly mode"
+        // );
+
+        assert.containsN(target, "span.o_row_handle", 2, "should have 2 handles");
+
+        await click(target, ".o_form_button_edit");
+
+        assert.hasClass(
+            target.querySelector("td"),
+            "o_handle_cell",
+            "column widget should be displayed in css class"
+        );
+
+        assert.notStrictEqual(
+            getComputedStyle(target.querySelector("td span.o_row_handle")).display,
+            "none",
+            "handle should be visible in edit mode"
+        );
+
+        await click(target.querySelectorAll("td")[1]);
+        assert.containsOnce(
+            target.querySelector("td"),
+            "span.o_row_handle",
+            "content of the cell should have been replaced"
+        );
+    });
+
+    QUnit.test("HandleField with falsy values", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="sequence" widget="handle" />
+                    <field name="display_name" />
+                </tree>`,
+        });
+
+        const visibleRowHandles = [...target.querySelectorAll(".o_row_handle")].filter(
+            (el) => getComputedStyle(el).display !== "none"
+        );
+
+        assert.containsN(
+            target,
+            visibleRowHandles,
+            serverData.models.partner.records.length,
+            "there should be a visible handle for each record"
+        );
+    });
+
+    QUnit.test("HandleField in a readonly one2many", async function (assert) {
+        serverData.models.partner.records[0].p = [1, 2, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" readonly="1">
+                        <tree editable="top">
+                            <field name="sequence" widget="handle" />
+                            <field name="display_name" />
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(target, ".o_row_handle", 3, "there should be 3 handles, one for each row");
+        // WOWL-KANBAN: relies on o_form_view scss rules which do not apply for now
+        // assert.strictEqual(
+        //     getComputedStyle(target.querySelector("td span.o_row_handle")).display,
+        //     "none",
+        //     "handle should be invisible in readonly mode"
+        // );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(target, ".o_row_handle", 3, "the handle fields should still be there");
+        // WOWL-KANBAN: relies on o_form_view scss rules which do not apply for now
+        // assert.strictEqual(
+        //     getComputedStyle(target.querySelector("td span.o_row_handle")).display,
+        //     "none",
+        //     "the handle icons should still not be displayed (on readonly fields)"
+        // );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/html_field_tests.js b/addons/web/static/tests/views/fields/html_field_tests.js
new file mode 100644
index 00000000000..cfa33c1099f
--- /dev/null
+++ b/addons/web/static/tests/views/fields/html_field_tests.js
@@ -0,0 +1,71 @@
+/** @odoo-module **/
+
+import { click, getFixture, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { registry } from "@web/core/registry";
+import { HtmlField } from "@web/views/fields/html/html_field";
+
+const RED_TEXT = /* html */ `<div class="kek" style="color:red">some text</div>`;
+const GREEN_TEXT = /* html */ `<div class="kek" style="color:green">hello</div>`;
+const BLUE_TEXT = /* html */ `<div class="kek" style="color:blue">hello world</div>`;
+
+QUnit.module("Fields", ({ beforeEach }) => {
+    let serverData;
+    let target;
+
+    beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        txt: { string: "txt", type: "html", trim: true },
+                    },
+                    records: [{ id: 1, txt: RED_TEXT }],
+                },
+            },
+        };
+        target = getFixture();
+
+        setupViewRegistries();
+
+        // Explicitly removed by web_editor, we need to add it back
+        registry.category("fields").add("html", HtmlField);
+    });
+
+    QUnit.module("HtmlField");
+
+    QUnit.test("html fields are correctly rendered", async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: /* xml */ `<form><field name="txt" /></form>`,
+        });
+
+        assert.containsOnce(target, ".o_field_html", "should have a text area");
+        assert.strictEqual(target.querySelector(".o_field_html .kek").style.color, "red");
+        assert.strictEqual(target.querySelector(".o_field_html").textContent, "some text");
+
+        await click(target, ".o_form_button_edit");
+        const textarea = target.querySelector(".o_field_html textarea");
+        assert.ok(textarea, "should have a text area");
+        assert.strictEqual(textarea.value, RED_TEXT);
+
+        textarea.value = GREEN_TEXT;
+        await triggerEvent(textarea, null, "change");
+
+        assert.strictEqual(textarea.value, GREEN_TEXT);
+        assert.containsNone(target.querySelector(".o_field_html"), ".kek");
+
+        textarea.value = /* html */ BLUE_TEXT;
+        await triggerEvent(textarea, null, "change");
+
+        assert.strictEqual(textarea.value, BLUE_TEXT);
+
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(target.querySelector(".o_field_html .kek").style.color, "blue");
+        assert.strictEqual(target.querySelector(".o_field_html").textContent, "hello world");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/image_field_tests.js b/addons/web/static/tests/views/fields/image_field_tests.js
new file mode 100644
index 00000000000..9b5a9422667
--- /dev/null
+++ b/addons/web/static/tests/views/fields/image_field_tests.js
@@ -0,0 +1,370 @@
+/** @odoo-module **/
+
+import { click, getFixture, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+const MY_IMAGE =
+    "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
+const PRODUCT_IMAGE =
+    "R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        timmy: {
+                            string: "pokemon",
+                            type: "many2many",
+                            relation: "partner_type",
+                            searchable: true,
+                        },
+                        document: { string: "Binary", type: "binary" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            timmy: [],
+                            document: "coucou==\n",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            timmy: [],
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char", searchable: true },
+                        color: { string: "Color index", type: "integer", searchable: true },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("ImageField");
+
+    QUnit.test("ImageField is correctly rendered", async function (assert) {
+        assert.expect(10);
+
+        serverData.models.partner.records[0].__last_update = "2017-02-08 10:00:00";
+        serverData.models.partner.records[0].document = MY_IMAGE;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="document" widget="image" options="{'size': [90, 90]}" />
+                </form>`,
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/read") {
+                    assert.deepEqual(
+                        args[1],
+                        ["document", /*"__last_update",*/ "display_name"],
+                        "The fields document, display_name and __last_update should be present when reading an image"
+                    );
+                }
+            },
+        });
+
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name='document']"),
+            "o_field_image",
+            "the widget should have the correct class"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name='document'] > img",
+            "the widget should contain an image"
+        );
+        assert.strictEqual(
+            target.querySelector('div[name="document"] > img').dataset.src,
+            `data:image/png;base64,${MY_IMAGE}`,
+            "the image should have the correct src"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name='document'] > img"),
+            "img-fluid",
+            "the image should have the correct class"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name='document'] > img"),
+            "width",
+            "90",
+            "the image should correctly set its attributes"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='document'] > img").style.maxWidth,
+            "90px",
+            "the image should correctly set its attributes"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(
+            target,
+            ".o_form_image_controls .o_select_file_button",
+            "the image can be edited"
+        );
+        assert.containsOnce(
+            target,
+            ".o_form_image_controls .o_clear_file_button",
+            "the image can be deleted"
+        );
+        assert.strictEqual(
+            target.querySelector("input.o_input_file").getAttribute("accept"),
+            "image/*",
+            'the default value for the attribute "accept" on the "image" widget must be "image/*"'
+        );
+    });
+
+    QUnit.test(
+        "ImageField is correctly replaced when given an incorrect value",
+        async function (assert) {
+            serverData.models.partner.records[0].document = "incorrect_base64_value";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="document" widget="image" options="{'size': [90, 90]}"/>
+                    </form>`,
+            });
+
+            assert.strictEqual(
+                target.querySelector('div[name="document"] > img').dataset.src,
+                "data:image/png;base64,incorrect_base64_value",
+                "the image has the invalid src by default"
+            );
+
+            // As GET requests can't occur in tests, we must generate an error
+            // on the img element to check whether the data-src is replaced with
+            // a placeholder, here knowing that the GET request would fail
+            await triggerEvent(target, 'div[name="document"] > img', "error");
+
+            assert.hasClass(
+                target.querySelector('.o_field_widget[name="document"]'),
+                "o_field_image",
+                "the widget should have the correct class"
+            );
+            assert.containsOnce(
+                target,
+                ".o_field_widget[name='document'] > img",
+                "the widget should contain an image"
+            );
+            assert.strictEqual(
+                target.querySelector('div[name="document"] > img').dataset.src,
+                "/web/static/img/placeholder.png",
+                "the image should have the correct src"
+            );
+            assert.hasClass(
+                target.querySelector(".o_field_widget[name='document'] > img"),
+                "img-fluid",
+                "the image should have the correct class"
+            );
+            assert.hasAttrValue(
+                target.querySelector(".o_field_widget[name='document'] > img"),
+                "width",
+                "90",
+                "the image should correctly set its attributes"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='document'] > img").style.maxWidth,
+                "90px",
+                "the image should correctly set its attributes"
+            );
+
+            await click(target, ".o_form_button_edit");
+
+            assert.containsOnce(
+                target,
+                ".o_form_image_controls .o_select_file_button",
+                "the image can be edited"
+            );
+            assert.containsNone(
+                target,
+                ".o_form_image_controls .o_clear_file_button",
+                "the image cannot be deleted as it has not been uploaded"
+            );
+        }
+    );
+
+    QUnit.test("ImageField: option accepted_file_extensions", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="document" widget="image" options="{'accepted_file_extensions': '.png,.jpeg'}" />
+                </form>`,
+        });
+        // The view must be in edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector("input.o_input_file").getAttribute("accept"),
+            ".png,.jpeg",
+            "the input should have the correct ``accept`` attribute"
+        );
+    });
+
+    QUnit.test("ImageField: zoom and zoom_delay options", async function (assert) {
+        serverData.models.partner.records[0].document = MY_IMAGE;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="document" widget="image" options="{'zoom': true, 'zoom_delay': 600}" />
+                </form>`,
+        });
+        // data-tooltip attribute is used by the tooltip service
+        assert.strictEqual(
+            JSON.parse(target.querySelector(".o_field_image img").dataset["tooltipInfo"]).url,
+            `data:image/png;base64,${MY_IMAGE}`,
+            "shows a tooltip on hover"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_image img").dataset["tooltipDelay"],
+            "600",
+            "tooltip has the right delay"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.ok(
+            !target.querySelector(".o_field_image img").dataset["tooltipInfo"],
+            "the tooltip is not present in edition"
+        );
+    });
+
+    QUnit.test("ImageField in subviews is loaded correctly", async function (assert) {
+        serverData.models.partner.records[0].__last_update = "2017-02-08 10:00:00";
+        serverData.models.partner.records[0].document = MY_IMAGE;
+        serverData.models.partner_type.fields.image = { name: "image", type: "binary" };
+        serverData.models.partner_type.records[0].image = PRODUCT_IMAGE;
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="document" widget="image" options="{'size': [90, 90]}" />
+                    <field name="timmy" widget="many2many" mode="kanban">
+                        <kanban>
+                            <field name="display_name" />
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <span>
+                                            <t t-esc="record.display_name.value" />
+                                        </span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="image" widget="image" />
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsOnce(target, `img[data-src="data:image/png;base64,${MY_IMAGE}"]`);
+        assert.containsOnce(target, ".o_kanban_record.oe_kanban_global_click");
+
+        // Actual flow: click on an element of the m2m to get its form view
+        await click(target, ".oe_kanban_global_click");
+        assert.containsOnce(target, ".modal", "The modal should have opened");
+
+        assert.containsOnce(target, `img[data-src="data:image/gif;base64,${PRODUCT_IMAGE}"]`);
+    });
+
+    QUnit.test("ImageField in x2many list is loaded correctly", async function (assert) {
+        serverData.models.partner_type.fields.image = { name: "image", type: "binary" };
+        serverData.models.partner_type.records[0].image = PRODUCT_IMAGE;
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many">
+                        <tree>
+                            <field name="image" widget="image" />
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsOnce(target, "tr.o_data_row", "There should be one record in the many2many");
+        assert.ok(
+            document.querySelector(`img[data-src="data:image/gif;base64,${PRODUCT_IMAGE}"]`),
+            "The list's image is in the DOM"
+        );
+    });
+
+    QUnit.test("ImageField with required attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="document" widget="image" required="1" />
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "create") {
+                    throw new Error("Should not do a create RPC with unset required image field");
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_save");
+
+        assert.containsOnce(
+            target.querySelector(".o_form_view"),
+            ".o_form_editable",
+            "form view should still be editable"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_invalid",
+            "image field should be displayed as invalid"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/image_url_field_tests.js b/addons/web/static/tests/views/fields/image_url_field_tests.js
new file mode 100644
index 00000000000..a6723fbeac3
--- /dev/null
+++ b/addons/web/static/tests/views/fields/image_url_field_tests.js
@@ -0,0 +1,215 @@
+/** @odoo-module **/
+
+import { KanbanController } from "@web/views/kanban/kanban_controller";
+import { click, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+const FR_FLAG_URL = "/base/static/img/country_flags/fr.png";
+const EN_FLAG_URL = "/base/static/img/country_flags/gb.png";
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        timmy: {
+                            string: "pokemon",
+                            type: "many2many",
+                            relation: "partner_type",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: FR_FLAG_URL,
+                            timmy: [],
+                        },
+                    ],
+                    onchanges: {},
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char", searchable: true },
+                        color: { string: "Color index", type: "integer", searchable: true },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    /**
+     * Same tests than for Image fields, but for Char fields with image_url widget.
+     */
+    QUnit.module("ImageUrlField");
+
+    QUnit.test("image fields are correctly rendered", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="foo" widget="image_url" options="{'size': [90, 90]}"/>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.hasClass(
+            target.querySelector('div[name="foo"]'),
+            "o_field_image_url",
+            "the widget should have the correct class"
+        );
+        assert.containsOnce(target, 'div[name="foo"] > img', "the widget should contain an image");
+        assert.strictEqual(
+            target.querySelector('div[name="foo"] > img').dataset.src,
+            FR_FLAG_URL,
+            "the image should have the correct src"
+        );
+        assert.hasClass(
+            target.querySelector('div[name="foo"] > img'),
+            "img-fluid",
+            "the image should have the correct class"
+        );
+        assert.hasAttrValue(
+            target.querySelector('div[name="foo"] > img'),
+            "width",
+            "90",
+            "the image should correctly set its attributes"
+        );
+        assert.strictEqual(
+            target.querySelector('div[name="foo"] > img').style.maxWidth,
+            "90px",
+            "the image should correctly set its attributes"
+        );
+    });
+
+    QUnit.test("ImageUrlField in subviews are loaded correctly", async function (assert) {
+        serverData.models.partner_type.fields.image = { name: "image", type: "char" };
+        serverData.models.partner_type.records[0].image = EN_FLAG_URL;
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="foo" widget="image_url" options="{'size': [90, 90]}"/>
+                    <field name="timmy" widget="many2many" mode="kanban">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="image" widget="image_url"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.ok(
+            document.querySelector(`img[data-src="${FR_FLAG_URL}"]`),
+            "The view's image is in the DOM"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record.oe_kanban_global_click",
+            "There should be one record in the many2many"
+        );
+
+        // Actual flow: click on an element of the m2m to get its form view
+        await click(target.querySelector(".oe_kanban_global_click"));
+        assert.containsOnce(document.body, ".modal", "The modal should have opened");
+
+        assert.ok(
+            document.querySelector(`img[data-src="${EN_FLAG_URL}"]`),
+            "The dialog's image is in the DOM"
+        );
+    });
+
+    QUnit.test("image fields in x2many list are loaded correctly", async function (assert) {
+        serverData.models.partner_type.fields.image = { name: "image", type: "char" };
+        serverData.models.partner_type.records[0].image = EN_FLAG_URL;
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many">
+                        <tree>
+                            <field name="image" widget="image_url"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "tr.o_data_row", "There should be one record in the many2many");
+        assert.ok(
+            document.querySelector(`img[data-src="${EN_FLAG_URL}"]`),
+            "The list's image is in the DOM"
+        );
+    });
+
+    QUnit.test("image url fields in kanban don't stop opening record", async function (assert) {
+        patchWithCleanup(KanbanController.prototype, {
+            openRecord() {
+                assert.step("open record");
+            },
+        });
+
+        await makeView({
+            type: "kanban",
+            serverData,
+            resModel: "partner",
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="foo" widget="image_url"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        await click(target.querySelector(".o_kanban_record"));
+        assert.verifySteps(["open record"]);
+    });
+});
diff --git a/addons/web/static/tests/views/fields/integer_field_tests.js b/addons/web/static/tests/views/fields/integer_field_tests.js
new file mode 100644
index 00000000000..69e2abb2149
--- /dev/null
+++ b/addons/web/static/tests/views/fields/integer_field_tests.js
@@ -0,0 +1,302 @@
+/** @odoo-module **/
+
+import { localization } from "@web/core/l10n/localization";
+import { defaultLocalization } from "@web/../tests/helpers/mock_services";
+import { click, editInput, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                        },
+                    },
+                    records: [
+                        { id: 1, int_field: 10 },
+                        { id: 2, int_field: false },
+                        { id: 3, int_field: 8069 },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("IntegerField");
+
+    QUnit.test("should be 0 when unset", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: '<form><field name="int_field"/></form>',
+        });
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_empty",
+            "Non-set integer field should be recognized as 0."
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0",
+            "Non-set integer field should be recognized as 0."
+        );
+    });
+
+    QUnit.test("basic form view flow", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: '<form><field name="int_field"/></form>',
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "10",
+            "The value should be rendered correctly in edit mode."
+        );
+
+        await editInput(target, ".o_field_widget[name=int_field] input", "30");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "30",
+            "The value should be correctly displayed in the input."
+        );
+
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "30",
+            "The new value should be saved and displayed properly."
+        );
+    });
+
+    QUnit.test("rounded when using formula in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: '<form><field name="int_field"/></form>',
+        });
+
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_widget[name=int_field] input", "=100/3");
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "33",
+            "The new value should be calculated properly."
+        );
+    });
+
+    QUnit.test("with input type 'number' option", async function (assert) {
+        patchWithCleanup(localization, { ...defaultLocalization, grouping: [3, 0] });
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `<form><field name="int_field" options="{'type': 'number'}"/></form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.ok(
+            target.querySelector(".o_field_widget input").hasAttribute("type"),
+            "Integer field with option type must have a type attribute."
+        );
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "type",
+            "number",
+            'Integer field with option type must have a type attribute equals to "number".'
+        );
+
+        await editInput(target, ".o_field_widget[name=int_field] input", "1234567890");
+        await click(target, ".o_form_button_save");
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "1234567890",
+            "Integer value must be not formatted if input type is number."
+        );
+
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "1,234,567,890",
+            "Integer value must be formatted in readonly view even if the input type is number."
+        );
+    });
+
+    QUnit.test("with 'step' option", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `<form><field name="int_field" options="{'type': 'number', 'step': 3}"/></form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.ok(
+            target.querySelector(".o_field_widget input").hasAttribute("step"),
+            "Integer field with option type must have a step attribute."
+        );
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "step",
+            "3",
+            'Integer field with option type must have a step attribute equals to "3".'
+        );
+    });
+
+    QUnit.test("without input type option", async function (assert) {
+        patchWithCleanup(localization, { ...defaultLocalization, grouping: [3, 0] });
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: '<form><field name="int_field"/></form>',
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget input"),
+            "type",
+            "text",
+            "Integer field without option type must have a text type (default type)."
+        );
+
+        await editInput(target, ".o_field_widget[name=int_field] input", "1234567890");
+        await click(target, ".o_form_button_save");
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "1,234,567,890",
+            "Integer value must be formatted if input type isn't number."
+        );
+    });
+
+    QUnit.test("with disable formatting option", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 3,
+            arch: `<form><field name="int_field"  options="{'format': 'false'}"/></form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field]").textContent,
+            "8069",
+            "Integer value must not be formatted"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "8069",
+            "Integer value must not be formatted"
+        );
+    });
+
+    QUnit.test("IntegerField is formatted by default", async function (assert) {
+        patchWithCleanup(localization, { ...defaultLocalization, grouping: [3, 0] });
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 3,
+            arch: '<form><field name="int_field"/></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field]").textContent,
+            "8,069",
+            "Integer value must be formatted by default"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "8,069",
+            "Integer value must be formatted by default"
+        );
+    });
+
+    QUnit.test("basic flow in editable list view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree editable="bottom"><field name="int_field"/></tree>',
+        });
+        var zeroValues = Array.from(target.querySelectorAll("td")).filter(
+            (el) => el.textContent === "0"
+        );
+        assert.strictEqual(
+            zeroValues.length,
+            1,
+            "Unset integer values should not be rendered as zeros."
+        );
+
+        // switch to edit mode
+        var cell = target.querySelector("tr.o_data_row td:not(.o_list_record_selector)");
+        await click(cell);
+
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="int_field"] input',
+            "The view should have 1 input for editable integer."
+        );
+
+        await editInput(target, ".o_field_widget[name=int_field] input", "-28");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="int_field"] input').value,
+            "-28",
+            "The value should be displayed properly in the input."
+        );
+
+        await click(target.querySelector(".o_list_button_save"));
+        assert.strictEqual(
+            target.querySelector("td:not(.o_list_record_selector)").textContent,
+            "-28",
+            "The new value should be saved and displayed properly."
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
new file mode 100644
index 00000000000..264fa5c3ebc
--- /dev/null
+++ b/addons/web/static/tests/views/fields/journal_dashboard_graph_field_tests.js
@@ -0,0 +1,182 @@
+/** @odoo-module **/
+
+import { click, getFixture, nextTick, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let target;
+let serverData;
+
+QUnit.module("Fields", (hooks) => {
+    const graph_values = [
+        { value: 300, label: "5-11 Dec" },
+        { value: 500, label: "12-18 Dec" },
+        { value: 100, label: "19-25 Dec" },
+    ];
+
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        selection: {
+                            string: "Selection",
+                            type: "selection",
+                            searchable: true,
+                            selection: [
+                                ["normal", "Normal"],
+                                ["blocked", "Blocked"],
+                                ["done", "Done"],
+                            ],
+                        },
+                        graph_data: { string: "Graph Data", type: "text" },
+                        graph_type: {
+                            string: "Graph Type",
+                            type: "selection",
+                            selection: [
+                                ["line", "Line"],
+                                ["bar", "Bar"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            int_field: 10,
+                            selection: "blocked",
+                            graph_type: "bar",
+                            graph_data: JSON.stringify([
+                                {
+                                    color: "blue",
+                                    title: "Partner 1",
+                                    values: graph_values,
+                                    key: "A key",
+                                    area: true,
+                                },
+                            ]),
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            int_field: 0,
+                            selection: "normal",
+                            graph_type: "line",
+                            graph_data: JSON.stringify([
+                                {
+                                    color: "red",
+                                    title: "Partner 0",
+                                    values: graph_values,
+                                    key: "A key",
+                                    area: true,
+                                },
+                            ]),
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    async function reloadKanbanView(target) {
+        await click(target, "input.o_searchview_input");
+        await triggerEvent(target, "input.o_searchview_input", "keydown", { key: "Enter" });
+    }
+    // Kanban
+    // WOWL remove this helper and user the control panel instead
+    const reload = async (kanban, params = {}) => {
+        kanban.env.searchModel.reload(params);
+        kanban.env.searchModel.search();
+        await nextTick();
+    };
+
+    QUnit.module("JournalDashboardGraphField");
+
+    QUnit.test("JournalDashboardGraphField is rendered correctly", async function (assert) {
+        await makeView({
+            serverData,
+            type: "kanban",
+            resModel: "partner",
+            arch: `
+                <kanban>
+                    <field name="graph_type"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="graph_data" t-att-graph_type="record.graph_type.raw_value" widget="dashboard_graph"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            domain: [["id", "in", [1, 2]]],
+        });
+        assert.containsN(
+            target,
+            ".o_dashboard_graph canvas",
+            2,
+            "there should be two graphs rendered"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(1) .o_graph_barchart",
+            "graph of first record should be a barchart"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(2) .o_graph_linechart",
+            "graph of second record should be a linechart"
+        );
+
+        await reloadKanbanView(target);
+        assert.containsN(
+            target,
+            ".o_dashboard_graph canvas",
+            2,
+            "there should be two graphs rendered"
+        );
+    });
+
+    QUnit.test(
+        "rendering of a JournalDashboardGraphField in an updated grouped kanban view",
+        async function (assert) {
+            const kanban = await makeView({
+                serverData,
+                type: "kanban",
+                resModel: "partner",
+                arch: `
+                    <kanban>
+                        <field name="graph_type"/>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="graph_data" t-att-graph_type="record.graph_type.raw_value" widget="dashboard_graph"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>`,
+                domain: [["id", "in", [1, 2]]],
+            });
+            assert.containsN(
+                target,
+                ".o_dashboard_graph canvas",
+                2,
+                "there should be two graph rendered"
+            );
+
+            await reload(kanban, { groupBy: ["selection"], domain: [["int_field", "=", 10]] });
+
+            assert.containsOnce(
+                target,
+                ".o_dashboard_graph canvas",
+                "there should be one graph rendered"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/label_selection_field_tests.js b/addons/web/static/tests/views/fields/label_selection_field_tests.js
new file mode 100644
index 00000000000..849550ee9f2
--- /dev/null
+++ b/addons/web/static/tests/views/fields/label_selection_field_tests.js
@@ -0,0 +1,267 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        selection: {
+                            string: "Selection",
+                            type: "selection",
+                            searchable: true,
+                            selection: [
+                                ["normal", "Normal"],
+                                ["blocked", "Blocked"],
+                                ["done", "Done"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            foo: "yop",
+                            selection: "blocked",
+                        },
+                        {
+                            foo: "blip",
+                            selection: "normal",
+                        },
+                        {
+                            foo: "abc",
+                            selection: "done",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("LabelSelectionField");
+
+    QUnit.test("LabelSelectionField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="selection" widget="label_selection"
+                            options="{'classes': {'normal': 'secondary', 'blocked': 'warning','done': 'success'}}"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have a warning status label since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should not have a default status since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should not have a success status since selection is the second, blocked state"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the label should say 'Blocked' since this is the label value for that state"
+        );
+
+        // // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have a warning status label since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should not have a default status since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should not have a success status since selection is the second, blocked state"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the label should say 'Blocked' since this is the label value for that state"
+        );
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have a warning status label since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should not have a default status since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should not have a success status since selection is the second, blocked state"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the label should say 'Blocked' since this is the label value for that state"
+        );
+    });
+
+    QUnit.test("LabelSelectionField in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="selection" widget="label_selection"
+                    options="{'classes': {'normal': 'secondary', 'blocked': 'warning','done': 'success'}}"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_widget .badge:not(:empty)").length,
+            3,
+            "should have three visible status labels"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have one warning status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the warning label should read 'Blocked'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should have one default status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            "Normal",
+            "the default label should read 'Normal'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should have one success status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            "Done",
+            "the success label should read 'Done'"
+        );
+
+        // switch to edit mode and check the result
+        await click(target.querySelector("tbody td:not(.o_list_record_selector)"));
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_widget .badge:not(:empty)").length,
+            3,
+            "should have three visible status labels"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have one warning status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the warning label should read 'Blocked'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should have one default status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            "Normal",
+            "the default label should read 'Normal'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should have one success status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            "Done",
+            "the success label should read 'Done'"
+        );
+
+        // save and check the result
+        await click(target.querySelector(".o_list_button_save"));
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_widget .badge:not(:empty)").length,
+            3,
+            "should have three visible status labels"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-warning",
+            "should have one warning status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-warning").textContent,
+            "Blocked",
+            "the warning label should read 'Blocked'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-secondary",
+            "should have one default status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-secondary").textContent,
+            "Normal",
+            "the default label should read 'Normal'"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .badge.badge-success",
+            "should have one success status label"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget .badge.badge-success").textContent,
+            "Done",
+            "the success label should read 'Done'"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2many_binary_field_tests.js b/addons/web/static/tests/views/fields/many2many_binary_field_tests.js
new file mode 100644
index 00000000000..119f029e2a0
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2many_binary_field_tests.js
@@ -0,0 +1,178 @@
+/** @odoo-module **/
+
+import { FileUploader } from "@web/views/fields/file_handler";
+import { click, getFixture, nextTick, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let target;
+let serverData;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                turtle: {
+                    fields: {
+                        picture_ids: {
+                            string: "Pictures",
+                            type: "many2many",
+                            relation: "ir.attachment",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            picture_ids: [17],
+                        },
+                    ],
+                },
+                "ir.attachment": {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        mimetype: { string: "Mimetype", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Marley&Me.jpg",
+                            mimetype: "jpg",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("Many2ManyBinaryField");
+
+    QUnit.test("widget many2many_binary", async function (assert) {
+        assert.expect(23);
+
+        patchWithCleanup(FileUploader.prototype, {
+            async onFileChange(ev) {
+                const file = new File([ev.target.value], ev.target.value + ".tiff", {
+                    type: "text/plain",
+                });
+                await this._super({
+                    target: { files: [file] },
+                });
+            },
+        });
+        serverData.views = {
+            "ir.attachment,false,list": '<tree string="Pictures"><field name="name"/></tree>',
+        };
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "turtle",
+            arch: `
+                <form>
+                    <group>
+                        <field name="picture_ids" widget="many2many_binary" options="{'accepted_file_extensions': 'image/*'}"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    assert.step(route);
+                }
+                if (route === "/web/dataset/call_kw/ir.attachment/read") {
+                    assert.deepEqual(args.args[1], ["name", "mimetype"]);
+                }
+            },
+        });
+
+        assert.containsOnce(
+            target,
+            "div.o_field_widget .oe_fileupload",
+            "there should be the attachment widget"
+        );
+        assert.containsOnce(
+            target,
+            "div.o_field_widget .oe_fileupload .o_attachments",
+            "there should be one attachment"
+        );
+        assert.containsNone(
+            target,
+            "div.o_field_widget .oe_fileupload .o_attach",
+            "there should not be an Add button (readonly)"
+        );
+        assert.containsNone(
+            target,
+            "div.o_field_widget .oe_fileupload .o_attachment .o_attachment_delete",
+            "there should not be a Delete button (readonly)"
+        );
+
+        // to edit mode
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            "div.o_field_widget .oe_fileupload .o_attach",
+            "there should be an Add button"
+        );
+        assert.strictEqual(
+            target.querySelector("div.o_field_widget .oe_fileupload .o_attach").textContent.trim(),
+            "Pictures",
+            "the button should be correctly named"
+        );
+
+        assert.strictEqual(
+            target.querySelector("input.o_input_file").getAttribute("accept"),
+            "image/*",
+            'there should be an attribute "accept" on the input'
+        );
+        assert.verifySteps([
+            "/web/dataset/call_kw/turtle/read",
+            "/web/dataset/call_kw/ir.attachment/read",
+        ]);
+
+        const input = target.querySelector(".o_field_many2many_binary input");
+        // We need to convert the input type since we can't programmatically set
+        // the value of a file input. The patch of the onFileChange will create
+        // a file object to be used by the component.
+        input.setAttribute("type", "text");
+        input.value = "fake_file";
+        input.dispatchEvent(new InputEvent("input", { bubbles: true }));
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+        await nextTick();
+        await nextTick();
+
+        assert.verifySteps([
+            "/web/dataset/call_kw/ir.attachment/name_create",
+            "/web/dataset/call_kw/ir.attachment/read",
+        ]);
+        assert.strictEqual(
+            target.querySelector(".o_attachment:nth-child(2) .caption a").textContent,
+            "fake_file.tiff",
+            'value of attachment should be "fake_file.tiff"'
+        );
+        assert.strictEqual(
+            target.querySelector(".o_attachment:nth-child(2) .caption.small a").textContent,
+            "tiff",
+            "file extension should be correct"
+        );
+
+        // delete the attachment
+        await click(
+            target.querySelector(
+                "div.o_field_widget .oe_fileupload .o_attachment .o_attachment_delete"
+            )
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            "div.o_field_widget .oe_fileupload .o_attachments",
+            "there should be only one attachment left"
+        );
+        assert.verifySteps([
+            "/web/dataset/call_kw/turtle/write",
+            "/web/dataset/call_kw/turtle/read",
+            "/web/dataset/call_kw/ir.attachment/read",
+        ]);
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js b/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
new file mode 100644
index 00000000000..1e443405dcf
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2many_checkboxes_field_tests.js
@@ -0,0 +1,447 @@
+/** @odoo-module **/
+
+import { click, clickSave, getFixture, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                    },
+                    records: [{ id: 1, int_field: 10, p: [1] }],
+                    onchanges: {},
+                },
+                partner_type: {
+                    records: [
+                        { id: 12, display_name: "gold" },
+                        { id: 14, display_name: "silver" },
+                    ],
+                },
+            },
+        };
+        setupViewRegistries();
+    });
+
+    QUnit.module("Many2ManyCheckBoxesField");
+
+    QUnit.test("Many2ManyCheckBoxesField", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        const commands = [[[6, false, [12, 14]]], [[6, false, [14]]]];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="timmy" widget="many2many_checkboxes" />
+                    </group>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step("write");
+                    assert.deepEqual(args.args[1].timmy, commands.shift());
+                }
+            },
+        });
+
+        assert.containsN(target, "div.o_field_widget div.custom-checkbox", 2);
+
+        let checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        assert.ok(checkboxes[0].checked);
+        assert.notOk(checkboxes[1].checked);
+
+        assert.containsN(target, "div.o_field_widget div.custom-checkbox input:disabled", 2);
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsNone(target, "div.o_field_widget div.custom-checkbox input:disabled");
+
+        // add a m2m value by clicking on input
+        checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        await click(checkboxes[1]);
+        await click(target, ".o_form_button_save");
+        assert.containsN(target, "div.o_field_widget div.custom-checkbox input:checked", 2);
+
+        // remove a m2m value by clinking on label
+        await click(target, ".o_form_button_edit");
+        await click(target.querySelector("div.o_field_widget div.custom-checkbox > label"));
+        await click(target, ".o_form_button_save");
+        checkboxes = target.querySelectorAll("div.o_field_widget div.custom-checkbox input");
+        assert.notOk(checkboxes[0].checked);
+        assert.ok(checkboxes[1].checked);
+
+        assert.verifySteps(["write", "write"]);
+    });
+
+    QUnit.test("Many2ManyCheckBoxesField (readonly)", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="timmy" widget="many2many_checkboxes" attrs="{'readonly': true}" />
+                    </group>
+                </form>`,
+        });
+
+        assert.containsN(
+            target,
+            "div.o_field_widget div.custom-checkbox",
+            2,
+            "should have fetched and displayed the 2 values of the many2many"
+        );
+
+        assert.ok(
+            target.querySelector("div.o_field_widget div.custom-checkbox input").checked,
+            "first checkbox should be checked"
+        );
+        assert.notOk(
+            target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+            "second checkbox should not be checked"
+        );
+
+        assert.containsN(
+            target,
+            "div.o_field_widget div.custom-checkbox input:disabled",
+            2,
+            "the checkboxes should be disabled"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(
+            target,
+            "div.o_field_widget div.custom-checkbox input:disabled",
+            2,
+            "the checkboxes should be disabled"
+        );
+
+        await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox > label")[1]);
+
+        assert.ok(
+            target.querySelector("div.o_field_widget div.custom-checkbox input").checked,
+            "first checkbox should be checked"
+        );
+        assert.notOk(
+            target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+            "second checkbox should not be checked"
+        );
+    });
+
+    QUnit.test(
+        "Many2ManyCheckBoxesField: start non empty, then remove twice",
+        async function (assert) {
+            serverData.models.partner.records[0].timmy = [12, 14];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="timmy" widget="many2many_checkboxes" />
+                        </group>
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[0]);
+            await click(target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1]);
+            await click(target, ".o_form_button_save");
+            assert.notOk(
+                target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[0].checked,
+                "first checkbox should not be checked"
+            );
+            assert.notOk(
+                target.querySelectorAll("div.o_field_widget div.custom-checkbox input")[1].checked,
+                "second checkbox should not be checked"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Many2ManyCheckBoxesField: values are updated when domain changes",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field" />
+                        <field name="timmy" widget="many2many_checkboxes" domain="[['id', '>', int_field]]" />
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='int_field'] input").value,
+                "10"
+            );
+            assert.containsN(target, ".o_field_widget[name='timmy'] .custom-checkbox", 2);
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='timmy']").textContent,
+                "goldsilver"
+            );
+
+            const input = target.querySelector(".o_field_widget[name='int_field'] input");
+            input.value = 13;
+            await triggerEvent(input, null, "change");
+
+            assert.containsOnce(target, ".o_field_widget[name='timmy'] .custom-checkbox");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='timmy']").textContent,
+                "silver"
+            );
+        }
+    );
+
+    QUnit.test("Many2ManyCheckBoxesField with 40+ values", async function (assert) {
+        // 40 is the default limit for x2many fields. However, the many2many_checkboxes is a
+        // special field that fetches its data through the fetchSpecialData mechanism, and it
+        // uses the name_search server-side limit of 100. This test comes with a fix for a bug
+        // that occurred when the user (un)selected a checkbox that wasn't in the 40 first checkboxes,
+        // because the piece of data corresponding to that checkbox hadn't been processed by the
+        // BasicModel, whereas the code handling the change assumed it had.
+        assert.expect(3);
+
+        const records = [];
+        for (let id = 1; id <= 90; id++) {
+            records.push({
+                id,
+                display_name: `type ${id}`,
+            });
+        }
+        serverData.models.partner_type.records = records;
+        serverData.models.partner.records[0].timmy = records.map((r) => r.id);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_checkboxes" />
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    const expectedIds = records.map((r) => r.id);
+                    expectedIds.pop();
+                    assert.deepEqual(args[1].timmy, [[6, false, expectedIds]]);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(
+            target,
+            ".o_field_widget[name='timmy'] input[type='checkbox']:checked",
+            90
+        );
+
+        // toggle the last value
+        let checkboxes = target.querySelectorAll(
+            ".o_field_widget[name='timmy'] input[type='checkbox']"
+        );
+        await click(checkboxes[checkboxes.length - 1]);
+
+        await click(target, ".o_form_button_save");
+        checkboxes = target.querySelectorAll(
+            ".o_field_widget[name='timmy'] input[type='checkbox']"
+        );
+        assert.notOk(checkboxes[checkboxes.length - 1].checked);
+    });
+
+    QUnit.test("Many2ManyCheckBoxesField with 100+ values", async function (assert) {
+        // The many2many_checkboxes widget limits the displayed values to 100 (this is the
+        // server-side name_search limit). This test encodes a scenario where there are more than
+        // 100 records in the co-model, and all values in the many2many relationship aren't
+        // displayed in the widget (due to the limit). If the user (un)selects a checkbox, we don't
+        // want to remove all values that aren't displayed from the relation.
+        assert.expect(7);
+
+        const records = [];
+        for (let id = 1; id < 150; id++) {
+            records.push({
+                id,
+                display_name: `type ${id}`,
+            });
+        }
+        serverData.models.partner_type.records = records;
+        serverData.models.partner.records[0].timmy = records.map((r) => r.id);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_checkboxes" />
+                </form>`,
+            async mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    const expectedIds = records.map((r) => r.id);
+                    expectedIds.shift();
+                    assert.deepEqual(args[1].timmy, [[6, false, expectedIds]]);
+                    assert.step("write");
+                }
+                if (method === "name_search") {
+                    assert.step("name_search");
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(
+            target,
+            ".o_field_widget[name='timmy'] input[type='checkbox']",
+            100,
+            "should only display 100 checkboxes"
+        );
+        assert.ok(
+            target.querySelector(".o_field_widget[name='timmy'] input[type='checkbox']").checked
+        );
+
+        // toggle the first value
+        await click(target.querySelector(".o_field_widget[name='timmy'] input[type='checkbox']"));
+
+        await click(target, ".o_form_button_save");
+        assert.notOk(
+            target.querySelector(".o_field_widget[name='timmy'] input[type='checkbox']").checked
+        );
+        assert.verifySteps(["name_search", "write"]);
+    });
+
+    QUnit.test("Many2ManyCheckBoxesField in a one2many", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner_type.records.push({ id: 15, display_name: "bronze" });
+        serverData.models.partner.records[0].timmy = [14, 15];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree><field name="id"/></tree>
+                        <form>
+                            <field name="timmy" widget="many2many_checkboxes"/>
+                        </form>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1], {
+                        p: [[1, 1, { timmy: [[6, false, [15, 12]]] }]],
+                    });
+                }
+            },
+            resId: 1,
+        });
+
+        await click(target, ".o_form_button_edit");
+        await click(target.querySelector(".o_data_cell"));
+
+        // edit the timmy field by (un)checking boxes on the widget
+        const firstCheckbox = target.querySelector(".modal .custom-control-input");
+        await click(firstCheckbox);
+        assert.ok(firstCheckbox.checked, "the checkbox should be ticked");
+        const secondCheckbox = target.querySelectorAll(".modal .custom-control-input")[1];
+        await click(secondCheckbox);
+        assert.notOk(secondCheckbox.checked, "the checkbox should be unticked");
+
+        await click(target.querySelector(".modal .o_form_button_save"));
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("Many2ManyCheckBoxesField with default values", async function (assert) {
+        assert.expect(7);
+
+        serverData.models.partner.fields.timmy.default = [3];
+        serverData.models.partner.fields.timmy.type = "many2many";
+        serverData.models.partner_type.records.push({ id: 3, display_name: "bronze" });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_checkboxes"/>
+                </form>`,
+            mockRPC: function (route, args) {
+                if (args.method === "create") {
+                    assert.deepEqual(
+                        args.args[0].timmy,
+                        [[6, false, [12]]],
+                        "correct values should have been sent to create"
+                    );
+                }
+            },
+        });
+
+        assert.notOk(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[0].checked,
+            "first checkbox should not be checked"
+        );
+        assert.notOk(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[1].checked,
+            "second checkbox should not be checked"
+        );
+        assert.ok(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[2].checked,
+            "third checkbox should be checked"
+        );
+
+        await click(target.querySelector(".o_form_view .custom-checkbox input:checked"));
+        await click(target.querySelector(".o_form_view .custom-checkbox input"));
+        await click(target.querySelector(".o_form_view .custom-checkbox input"));
+        await click(target.querySelector(".o_form_view .custom-checkbox input"));
+
+        assert.ok(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[0].checked,
+            "first checkbox should be checked"
+        );
+        assert.notOk(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[1].checked,
+            "second checkbox should not be checked"
+        );
+        assert.notOk(
+            target.querySelectorAll(".o_form_view .custom-checkbox input")[2].checked,
+            "third checkbox should not be checked"
+        );
+
+        await clickSave(target);
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2many_field_tests.js b/addons/web/static/tests/views/fields/many2many_field_tests.js
new file mode 100644
index 00000000000..968739c5cf5
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2many_field_tests.js
@@ -0,0 +1,1824 @@
+/** @odoo-module **/
+
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import {
+    click,
+    clickEdit,
+    clickSave,
+    editInput,
+    editSelect,
+    getFixture,
+    getNodesTextContent,
+    nextTick,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
+import { editSearch, validateSearch } from "@web/../tests/search/helpers";
+
+let target;
+let serverData;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        turtles: {
+                            string: "one2many turtle field",
+                            type: "one2many",
+                            relation: "turtle",
+                            relation_field: "turtle_trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                        date: { string: "Some Date", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        user_id: { string: "User", type: "many2one", relation: "user" },
+                        reference: {
+                            string: "Reference Field",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner_type", "Partner Type"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            p: [],
+                            turtles: [2],
+                            timmy: [],
+                            trululu: 4,
+                            user_id: 17,
+                            reference: "product,37",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            p: [],
+                            timmy: [],
+                            trululu: 1,
+                            product_id: 37,
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                            user_id: 17,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            bar: false,
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        display_name: { string: "Partner Type", type: "char" },
+                        name: { string: "Partner Type", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        turtle_foo: { string: "Foo", type: "char" },
+                        turtle_bar: { string: "Bar", type: "boolean", default: true },
+                        turtle_int: { string: "int", type: "integer", sortable: true },
+                        turtle_trululu: {
+                            string: "Trululu",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        turtle_ref: {
+                            string: "Reference",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            required: true,
+                        },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "leonardo",
+                            turtle_bar: true,
+                            turtle_foo: "yop",
+                            partner_ids: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "donatello",
+                            turtle_bar: true,
+                            turtle_foo: "blip",
+                            turtle_int: 9,
+                            partner_ids: [2, 4],
+                        },
+                        {
+                            id: 3,
+                            display_name: "raphael",
+                            product_id: 37,
+                            turtle_bar: false,
+                            turtle_foo: "kawa",
+                            turtle_int: 21,
+                            partner_ids: [],
+                            turtle_ref: "product,37",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            string: "one2many partners field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                            partner_ids: [1, 2],
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("Many2ManyField");
+
+    QUnit.test("many2many kanban: edition", async function (assert) {
+        assert.expect(33);
+
+        serverData.views = {
+            "partner_type,false,form": '<form><field name="display_name"/></form>',
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search": '<search><field name="name" string="Name"/></search>',
+        };
+
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.models.partner_type.records.push({ id: 15, display_name: "red", color: 6 });
+        serverData.models.partner_type.records.push({ id: 18, display_name: "yellow", color: 4 });
+        serverData.models.partner_type.records.push({ id: 21, display_name: "blue", color: 1 });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner_type/write") {
+                    assert.strictEqual(
+                        args.args[1].display_name,
+                        "new name",
+                        "should write 'new_name'"
+                    );
+                }
+                if (route === "/web/dataset/call_kw/partner_type/create") {
+                    assert.strictEqual(
+                        args.args[0].display_name,
+                        "A new type",
+                        "should create 'A new type'"
+                    );
+                }
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    var commands = args.args[1].timmy;
+                    assert.strictEqual(commands.length, 1, "should have generated one command");
+                    assert.strictEqual(
+                        commands[0][0],
+                        6,
+                        "generated command should be REPLACE WITH"
+                    );
+                    // get the created type's id
+                    var createdType = _.findWhere(serverData.models.partner_type.records, {
+                        display_name: "A new type",
+                    });
+                    var ids = _.sortBy([12, 15, 18].concat(createdType.id), _.identity.bind(_));
+                    assert.ok(
+                        _.isEqual(_.sortBy(commands[0][2], _.identity.bind(_)), ids),
+                        "new value should be " + ids
+                    );
+                }
+            },
+        });
+
+        assert.ok(
+            !$(target).find(".o_kanban_renderer .delete_icon").length,
+            "delete icon should not be visible in readonly"
+        );
+        assert.ok(
+            !$(target).find(".o_field_many2many .o-kanban-button-new").length,
+            '"Add" button should not be visible in readonly'
+        );
+
+        await clickEdit(target);
+
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            2,
+            "should contain 2 records"
+        );
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:first() span").text(),
+            "gold",
+            "display_name of subrecord should be the one in DB"
+        );
+        assert.ok(
+            $(target).find(".o_kanban_renderer .delete_icon").length,
+            "delete icon should be visible in edit"
+        );
+        assert.ok(
+            $(target).find(".o_field_many2many .o-kanban-button-new").length,
+            '"Add" button should be visible in edit'
+        );
+        assert.strictEqual(
+            $(target).find(".o_field_many2many .o-kanban-button-new").text().trim(),
+            "Add",
+            'Create button should have "Add" label'
+        );
+
+        // edit existing subrecord
+        await click($(target).find(".oe_kanban_global_click:first()")[0]);
+
+        await editInput(target, ".modal .o_form_view input", "new name");
+        await click($(".modal .modal-footer .btn-primary")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:first() span").text(),
+            "new name",
+            "value of subrecord should have been updated"
+        );
+
+        // add subrecords
+        // -> single select
+        await click($(target).find(".o_field_many2many .o-kanban-button-new")[0]);
+        assert.ok($(".modal .o_list_view").length, "should have opened a list view in a modal");
+        assert.strictEqual(
+            $(".modal .o_list_view tbody .o_list_record_selector").length,
+            3,
+            "list view should contain 3 records"
+        );
+        await click($(".modal .o_list_view tbody tr:contains(red) .o_data_cell")[0]);
+        assert.ok(!$(".modal .o_list_view").length, "should have closed the modal");
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            3,
+            "kanban should now contain 3 records"
+        );
+        assert.ok(
+            $(target).find(".o_kanban_record:contains(red)").length,
+            'record "red" should be in the kanban'
+        );
+
+        // -> multiple select
+        await click($(target).find(".o_field_many2many .o-kanban-button-new")[0]);
+        assert.ok(
+            $(".modal .o_select_button").prop("disabled"),
+            "select button should be disabled"
+        );
+        assert.strictEqual(
+            $(".modal .o_list_view tbody .o_list_record_selector").length,
+            2,
+            "list view should contain 2 records"
+        );
+        await click($(".modal .o_list_view thead .o_list_record_selector input")[0]);
+        await nextTick();
+        await click($(".modal .o_select_button")[0]);
+        assert.ok(
+            !$(".modal .o_select_button").prop("disabled"),
+            "select button should be enabled"
+        );
+        assert.ok(!$(".modal .o_list_view").length, "should have closed the modal");
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            5,
+            "kanban should now contain 5 records"
+        );
+        // -> created record
+        await click($(target).find(".o_field_many2many .o-kanban-button-new")[0]);
+        await click($(".modal .modal-footer .btn-primary:nth(1)")[0]);
+        assert.ok(
+            $(".modal .o_form_view.o_form_editable").length,
+            "should have opened a form view in edit mode, in a modal"
+        );
+        await editInput(target, ".modal .o_form_view input", "A new type");
+        await click($(".modal:not(.o_inactive_modal) footer .btn-primary:first()")[0]);
+        assert.ok(!$(".modal").length, "should have closed both modals");
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            6,
+            "kanban should now contain 6 records"
+        );
+        assert.ok(
+            $(target).find(".o_kanban_record:contains(A new type)").length,
+            "the newly created type should be in the kanban"
+        );
+
+        // delete subrecords
+        await click($(target).find(".o_kanban_record:contains(silver)")[0]);
+        assert.strictEqual(
+            $(".modal .modal-footer .o_btn_remove").length,
+            1,
+            "There should be a modal having Remove Button"
+        );
+        await click($(".modal .modal-footer .o_btn_remove")[0]);
+        assert.containsNone($(".o_modal"), "modal should have been closed");
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            5,
+            "should contain 5 records"
+        );
+        assert.ok(
+            !$(target).find(".o_kanban_record:contains(silver)").length,
+            "the removed record should not be in kanban anymore"
+        );
+
+        await click($(target).find(".o_kanban_record:contains(blue) .delete_icon")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            4,
+            "should contain 4 records"
+        );
+        assert.ok(
+            !$(target).find(".o_kanban_record:contains(blue)").length,
+            "the removed record should not be in kanban anymore"
+        );
+
+        // save the record
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "many2many kanban(editable): properly handle add-label node attribute",
+        async function (assert) {
+            serverData.models.partner.records[0].timmy = [12];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="timmy" add-label="Add timmy" mode="kanban">
+                            <kanban>
+                                <templates>
+                                    <t t-name="kanban-box">
+                                        <div class="oe_kanban_details">
+                                            <field name="display_name"/>
+                                        </div>
+                                    </t>
+                                </templates>
+                            </kanban>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+            assert.strictEqual(
+                target
+                    .querySelector(".o_field_many2many[name=timmy] .o-kanban-button-new")
+                    .innerText.trim()
+                    .toUpperCase(), // for community/enterprise compatibility
+                "ADD TIMMY",
+                "In M2M Kanban, Add button should have 'Add timmy' label"
+            );
+        }
+    );
+
+    QUnit.test("many2many kanban: create action disabled", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search":
+                "<search>" + '<field name="display_name" string="Name"/>' + "</search>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <kanban create="0">
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.ok(
+            !$(target).find(".o-kanban-button-new").length,
+            '"Add" button should not be available in readonly'
+        );
+
+        await clickEdit(target);
+
+        assert.ok(
+            $(target).find(".o-kanban-button-new").length,
+            '"Add" button should be available in edit'
+        );
+        assert.ok(
+            $(target).find(".o_kanban_renderer .delete_icon").length,
+            "delete icon should be visible in edit"
+        );
+
+        await click($(target).find(".o-kanban-button-new")[0]);
+        assert.strictEqual(
+            $(".modal .modal-footer .btn-primary").length,
+            1, // only button 'Select'
+            '"Create" button should not be available in the modal'
+        );
+    });
+
+    QUnit.test("many2many kanban: conditional create/delete actions", async function (assert) {
+        serverData.views = {
+            "partner_type,false,form": '<form><field name="name"/></form>',
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search": "<search/>",
+        };
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'create': [('color', '=', 'red')], 'delete': [('color', '=', 'red')]}">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        // color is red
+        assert.containsOnce(target, ".o-kanban-button-new", '"Add" button should be available');
+
+        await click($(target).find(".o_kanban_record:contains(silver)")[0]);
+        assert.containsOnce(
+            document.body,
+            ".modal .modal-footer .o_btn_remove",
+            "remove button should be visible in modal"
+        );
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        await click($(target).find(".o-kanban-button-new")[0]);
+        assert.containsN(
+            document.body,
+            ".modal .modal-footer button",
+            3,
+            "there should be 3 buttons available in the modal"
+        );
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // set color to black
+        await editSelect(target, 'div[name="color"] select', '"black"');
+        assert.containsOnce(
+            target,
+            ".o-kanban-button-new",
+            '"Add" button should still be available even after color field changed'
+        );
+
+        await click($(target).find(".o-kanban-button-new")[0]);
+        // only select and cancel button should be available, create
+        // button should be removed based on color field condition
+        assert.containsN(
+            document.body,
+            ".modal .modal-footer button",
+            2,
+            '"Create" button should not be available in the modal after color field changed'
+        );
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        await click($(target).find(".o_kanban_record:contains(silver)")[0]);
+        assert.containsNone(
+            document.body,
+            ".modal .modal-footer .o_btn_remove",
+            "remove button should not be visible in modal"
+        );
+    });
+
+    QUnit.test("many2many list (non editable): edition", async function (assert) {
+        assert.expect(34);
+
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.models.partner_type.records.push({ id: 15, display_name: "bronze", color: 6 });
+        serverData.models.partner_type.fields.float_field = { string: "Float", type: "float" };
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search": '<search><field name="display_name"/></search>',
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree>
+                            <field name="display_name"/><field name="float_field"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    assert.step(_.last(route.split("/")));
+                }
+                if (args.method === "write" && args.model === "partner") {
+                    assert.deepEqual(args.args[1].timmy, [[6, false, [12, 15]]]);
+                }
+            },
+        });
+
+        assert.verifySteps([
+            "read", // main record
+            "read", // relational field
+        ]);
+        assert.containsNone(
+            target,
+            ".o_list_record_remove",
+            "delete icon should not be visible in readonly"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_x2many_list_row_add",
+            '"Add an item" should not be visible in readonly'
+        );
+
+        await clickEdit(target);
+
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 records"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").innerText,
+            "gold",
+            "display_name of first subrecord should be the one in DB"
+        );
+        assert.containsN(
+            target,
+            ".o_list_record_remove",
+            2,
+            "delete icon should be visible in edit"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            '"Add an item" should be visible in edit'
+        );
+
+        // edit existing subrecord
+        await click(target.querySelector(".o_list_renderer tbody tr .o_data_cell"));
+        assert.verifySteps([]); // No further read: all fields were fetched at the first read
+
+        assert.containsNone(
+            target,
+            ".modal .modal-footer .o_btn_remove",
+            'there should not be a "Remove" button in the modal footer'
+        );
+
+        await editInput(target, ".modal .o_form_view input", "new name");
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+        assert.verifySteps(["write", "read"]); // save relational record from dialog then read it
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").innerText,
+            "new name",
+            "value of subrecord should have been updated"
+        );
+
+        // add new subrecords
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.verifySteps(["web_search_read"]);
+        assert.containsNone(
+            target,
+            ".modal .modal-footer .o_btn_remove",
+            'there should not be a "Remove" button in the modal footer'
+        );
+        assert.containsOnce(target, ".modal", "a modal should be open");
+        assert.containsOnce(
+            target,
+            ".modal .o_list_view .o_data_row",
+            "the list should contain one row"
+        );
+        await click(target.querySelector(".modal .o_list_view .o_data_row .o_data_cell"));
+        assert.verifySteps(["read"]); // relational model (udpated)
+        assert.containsNone(target, ".modal", "the modal should be closed");
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            3,
+            "should contain 3 subrecords"
+        );
+
+        // remove subrecords
+        await click(target.querySelectorAll(".o_list_record_remove")[1]);
+        assert.verifySteps([]);
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 subrecords"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer .o_data_row td").innerText,
+            "new name",
+            "the updated row still has the correct values"
+        );
+
+        // save
+        await clickSave(target);
+        assert.verifySteps(["write", "read", "read"]); // save main record then re-reads it
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 subrecords"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer .o_data_row td").innerText,
+            "new name",
+            "the updated row still has the correct values"
+        );
+    });
+
+    QUnit.test("many2many list (editable): edition", async function (assert) {
+        assert.expect(31);
+
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.models.partner_type.records.push({ id: 15, display_name: "bronze", color: 6 });
+        serverData.models.partner_type.fields.float_field = { string: "Float", type: "float" };
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search": '<search><field name="display_name"/></search>',
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                            <field name="float_field"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    assert.step(_.last(route.split("/")));
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].timmy, [
+                        [6, false, [12, 15]],
+                        [1, 12, { display_name: "new name" }],
+                    ]);
+                }
+            },
+            resId: 1,
+        });
+
+        assert.containsNone(target, ".o_list_record_remove");
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+
+        await clickEdit(target);
+
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 records"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").innerText,
+            "gold",
+            "display_name of first subrecord should be the one in DB"
+        );
+        assert.containsN(
+            target,
+            ".o_list_record_remove",
+            2,
+            "delete icon should be visible in edit"
+        );
+        assert.hasClass(
+            target.querySelector("td.o_list_record_remove button"),
+            "fa fa-times",
+            "should have X icons to remove (unlink) records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            '"Add an item" should not visible in edit'
+        );
+
+        // edit existing subrecord
+        await click(target.querySelector(".o_list_renderer tbody td"));
+        assert.containsNone(
+            target,
+            ".modal",
+            "in edit, clicking on a subrecord should not open a dialog"
+        );
+        assert.hasClass(
+            target.querySelector(".o_list_renderer tbody tr"),
+            "o_selected_row",
+            "first row should be in edition"
+        );
+        await editInput(target, ".o_selected_row div[name=display_name] input", "new name");
+        assert.hasClass(
+            target.querySelector(".o_list_renderer .o_data_row"),
+            "o_selected_row",
+            "first row should still be in edition"
+        );
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_list_renderer div[name=display_name] input"),
+            "edited field should still have the focus"
+        );
+        await click(target.querySelector(".o_form_view"));
+        assert.doesNotHaveClass(
+            target.querySelector(".o_list_renderer tbody tr"),
+            "o_selected_row",
+            "first row should not be in edition anymore"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").innerText,
+            "new name",
+            "value of subrecord should have been updated"
+        );
+        assert.verifySteps(["read", "read"]);
+
+        // add new subrecords
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.containsOnce(target, ".modal", "a modal should be open");
+        assert.containsOnce(
+            target,
+            ".modal .o_list_view .o_data_row",
+            "the list should contain one row"
+        );
+        await click(target.querySelector(".modal .o_list_view .o_data_row .o_data_cell"));
+        assert.containsNone(target, ".modal .o_list_view", "the modal should be closed");
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            3,
+            "should contain 3 subrecords"
+        );
+
+        // remove subrecords
+        await click(target.querySelectorAll(".o_list_record_remove")[1]);
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 subrecord"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody .o_data_row td").innerText,
+            "new name",
+            "the updated row still has the correct values"
+        );
+
+        // save
+        await clickSave(target);
+        assert.containsN(
+            target,
+            ".o_list_renderer td.o_list_number",
+            2,
+            "should contain 2 subrecords"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer .o_data_row td").innerText,
+            "new name",
+            "the updated row still has the correct values"
+        );
+
+        assert.verifySteps([
+            "web_search_read", // list view in dialog
+            "read", // relational field (updated)
+            "write", // save main record
+            "read", // main record
+            "read", // relational field
+        ]);
+    });
+
+    QUnit.test("many2many: create & delete attributes (both true)", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree create="true" delete="true">
+                            <field name="color"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            "should have the 'Add an item' link"
+        );
+        assert.containsN(target, ".o_list_record_remove", 2, "should have the 'Add an item' link");
+    });
+
+    QUnit.test("many2many: create & delete attributes (both false)", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree create="false" delete="false">
+                            <field name="color"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            "should have the 'Add an item' link"
+        );
+        assert.containsN(
+            target,
+            ".o_list_record_remove",
+            2,
+            "each record should have the 'Remove Item' link"
+        );
+    });
+
+    QUnit.test("many2many list: create action disabled", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree create="0">
+                            <field name="name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+        await clickEdit(target);
+        assert.containsOnce(target, ".o_field_x2many_list_row_add");
+    });
+
+    QUnit.test("fieldmany2many list comodel not writable", async function (assert) {
+        /**
+         * Many2Many List should behave as the m2m_tags
+         * that is, the relation can be altered even if the comodel itself is not CRUD-able
+         * This can happen when someone has read access alone on the comodel
+         * and full CRUD on the current model
+         */
+        assert.expect(12);
+
+        serverData.views = {
+            "partner_type,false,list": `
+                <tree create="false" delete="false" edit="false">
+                    <field name="display_name"/>
+                </tree>`,
+            "partner_type,false,search": '<search><field name="display_name"/></search>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many" can_create="false" can_write="false"/>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/create") {
+                    assert.deepEqual(args.args[0], { timmy: [[6, false, [12]]] });
+                }
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.deepEqual(args.args[1], { timmy: [[6, false, []]] });
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_field_many2many .o_field_x2many_list_row_add");
+        await click(target.querySelector(".o_field_many2many .o_field_x2many_list_row_add a"));
+        assert.containsOnce(target, ".modal");
+
+        assert.containsN(target.querySelector(".modal-footer"), "button", 2);
+        assert.containsOnce(target.querySelector(".modal-footer"), "button.o_select_button");
+        assert.containsOnce(target.querySelector(".modal-footer"), "button.o_form_button_cancel");
+
+        await click(target.querySelector(".modal .o_list_view .o_data_cell"));
+        assert.containsNone(target, ".modal");
+
+        assert.containsOnce(target, ".o_field_many2many .o_data_row");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_field_many2many .o_data_row")),
+            ["gold"]
+        );
+        assert.containsOnce(target, ".o_field_many2many .o_field_x2many_list_row_add");
+
+        await clickSave(target);
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_field_many2many .o_data_row .o_list_record_remove");
+        await click(target.querySelector(".o_field_many2many .o_data_row .o_list_record_remove"));
+        await clickSave(target);
+    });
+
+    QUnit.test("many2many list: conditional create/delete actions", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search": "<search/>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'create': [('color', '=', 'red')], 'delete': [('color', '=', 'red')]}">
+                        <tree>
+                            <field name="name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        // color is red -> create and delete actions are available
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            "should have the 'Add an item' link"
+        );
+        assert.containsN(target, ".o_list_record_remove", 2, "should have two remove icons");
+
+        await click($(target).find(".o_field_x2many_list_row_add a")[0]);
+
+        assert.containsN(
+            target,
+            ".modal .modal-footer button",
+            3,
+            "there should be 3 buttons available in the modal"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // set color to black -> create and delete actions are no longer available
+        await editSelect(target, 'div[name="color"] select', '"black"');
+
+        // add a line and remove icon should still be there as they don't create/delete records,
+        // but rather add/remove links
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            '"Add a line" button should still be available even after color field changed'
+        );
+        assert.containsN(
+            target,
+            ".o_list_record_remove",
+            2,
+            "should still have remove icon even after color field changed"
+        );
+
+        await click($(target).find(".o_field_x2many_list_row_add a")[0]);
+        assert.containsN(
+            target,
+            ".modal .modal-footer button",
+            2,
+            '"Create" button should not be available in the modal after color field changed'
+        );
+    });
+
+    QUnit.test("many2many field with link/unlink options (list)", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search": "<search/>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'link': [('color', '=', 'red')], 'unlink': [('color', '=', 'red')]}">
+                        <tree>
+                            <field name="name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        // color is red -> link and unlink actions are available
+        assert.containsOnce(
+            target,
+            ".o_field_x2many_list_row_add",
+            "should have the 'Add an item' link"
+        );
+        assert.containsN(target, ".o_list_record_remove", 2, "should have two remove icons");
+
+        await click($(target).find(".o_field_x2many_list_row_add a")[0]);
+
+        assert.containsN(
+            target,
+            ".modal .modal-footer button",
+            3,
+            "there should be 3 buttons available in the modal (Create action is available)"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // set color to black -> link and unlink actions are no longer available
+        await editSelect(target, 'div[name="color"] select', '"black"');
+
+        assert.containsNone(
+            target,
+            ".o_field_x2many_list_row_add",
+            '"Add a line" should no longer be available after color field changed'
+        );
+        assert.containsNone(
+            target,
+            ".o_list_record_remove",
+            "should no longer have remove icon after color field changed"
+        );
+    });
+
+    QUnit.test(
+        'many2many field with link/unlink options (list, create="0")',
+        async function (assert) {
+            serverData.models.partner.records[0].timmy = [12, 14];
+            serverData.views = {
+                "partner_type,false,list": '<tree><field name="name"/></tree>',
+                "partner_type,false,search": "<search/>",
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'link': [('color', '=', 'red')], 'unlink': [('color', '=', 'red')]}">
+                        <tree create="0">
+                            <field name="name"/>
+                        </tree>
+                    </field>
+                </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // color is red -> link and unlink actions are available
+            assert.containsOnce(
+                target,
+                ".o_field_x2many_list_row_add",
+                "should have the 'Add an item' link"
+            );
+            assert.containsN(target, ".o_list_record_remove", 2, "should have two remove icons");
+
+            await click($(target).find(".o_field_x2many_list_row_add a")[0]);
+
+            assert.containsN(
+                document.body,
+                ".modal .modal-footer button",
+                2,
+                "there should be 2 buttons available in the modal (Create action is not available)"
+            );
+
+            await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+            // set color to black -> link and unlink actions are no longer available
+            await editSelect(target, 'div[name="color"] select', '"black"');
+
+            assert.containsNone(
+                target,
+                ".o_field_x2many_list_row_add",
+                '"Add a line" should no longer be available after color field changed'
+            );
+            assert.containsNone(
+                target,
+                ".o_list_record_remove",
+                "should no longer have remove icon after color field changed"
+            );
+        }
+    );
+
+    QUnit.test("many2many field with link option (kanban)", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search": "<search/>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'link': [('color', '=', 'red')]}">
+                        <kanban>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div><field name="name"/></div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        // color is red -> link and unlink actions are available
+        assert.containsOnce(target, ".o-kanban-button-new", "should have the 'Add' button");
+
+        await click(target.querySelector(".o-kanban-button-new"));
+
+        assert.containsN(
+            document.body,
+            ".modal .modal-footer button",
+            3,
+            "there should be 3 buttons available in the modal (Create action is available"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // set color to black -> link and unlink actions are no longer available
+        await editSelect(target, 'div[name="color"] select', '"black"');
+
+        assert.containsNone(
+            target,
+            ".o-kanban-button-new",
+            '"Add" should no longer be available after color field changed'
+        );
+    });
+
+    QUnit.test('many2many field with link option (kanban, create="0")', async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "partner_type,false,search": "<search/>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="color"/>
+                    <field name="timmy" options="{'link': [('color', '=', 'red')]}">
+                        <kanban create="0">
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div><field name="name"/></div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        // color is red -> link and unlink actions are available
+        assert.containsOnce(target, ".o-kanban-button-new", "should have the 'Add' button");
+
+        await click(target.querySelector(".o-kanban-button-new"));
+
+        assert.containsN(
+            document.body,
+            ".modal .modal-footer button",
+            2,
+            "there should be 2 buttons available in the modal (Create action is not available"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // set color to black -> link and unlink actions are no longer available
+        await editSelect(target, 'div[name="color"] select', '"black"');
+
+        assert.containsNone(
+            target,
+            ".o-kanban-button-new",
+            '"Add" should no longer be available after color field changed'
+        );
+    });
+
+    QUnit.test("many2many list: list of id as default value", async function (assert) {
+        serverData.models.partner.fields.turtles.default = [2, 3];
+        serverData.models.partner.fields.turtles.type = "many2many";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<form>" +
+                '<field name="turtles">' +
+                "<tree>" +
+                '<field name="turtle_foo"/>' +
+                "</tree>" +
+                "</field>" +
+                "</form>",
+        });
+
+        assert.strictEqual(
+            $(target).find("td.o_data_cell").text(),
+            "blipkawa",
+            "should have loaded default data"
+        );
+    });
+
+    QUnit.test("many2many list with x2many: add a record", async function (assert) {
+        serverData.models.partner_type.fields.m2m = {
+            string: "M2M",
+            type: "many2many",
+            relation: "turtle",
+        };
+        serverData.models.partner_type.records[0].m2m = [1, 2];
+        serverData.models.partner_type.records[1].m2m = [2, 3];
+
+        serverData.views = {
+            "partner_type,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            "partner_type,false,search":
+                '<search><field name="display_name" string="Name"/></search>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy"/></form>',
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    assert.step(_.last(route.split("/")) + " on " + args.model);
+                }
+                if (args.model === "turtle") {
+                    assert.step(JSON.stringify(args.args[0])); // the read ids
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await click($(target).find(".modal .o_data_row:first .o_data_cell")[0]);
+
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "the record should have been added to the relation"
+        );
+        assert.strictEqual(
+            $(target).find(".o_data_row:first .o_tag_badge_text").text(),
+            "leonardodonatello",
+            "inner m2m should have been fetched and correctly displayed"
+        );
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await click(target.querySelector(".modal .o_data_row:nth-child(1) .o_data_cell"));
+
+        assert.containsN(
+            target,
+            ".o_data_row",
+            2,
+            "the second record should have been added to the relation"
+        );
+        assert.strictEqual(
+            $(target).find(".o_data_row:nth(1) .o_tag_badge_text").text(),
+            "donatelloraphael",
+            "inner m2m should have been fetched and correctly displayed"
+        );
+
+        assert.verifySteps([
+            "read on partner",
+            "web_search_read on partner_type",
+            "read on turtle",
+            "[1,2,3]",
+            "read on partner_type",
+            "read on turtle",
+            "[1,2]",
+            "web_search_read on partner_type",
+            "read on turtle",
+            "[2,3]",
+            "read on partner_type",
+            "read on turtle",
+            "[2,3]",
+        ]);
+    });
+
+    QUnit.test("many2many with a domain", async function (assert) {
+        // The domain specified on the field should not be replaced by the potential
+        // domain the user writes in the dialog, they should rather be concatenated
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search":
+                '<search><field name="display_name" string="Name"/></search>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" domain="[['display_name', '=', 'gold']]"/>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.strictEqual($(".modal .o_data_row").length, 1, "should contain only one row (gold)");
+
+        const modal = document.body.querySelector(".modal");
+        await editSearch(modal, "s");
+        await validateSearch(modal);
+
+        assert.strictEqual($(".modal .o_data_row").length, 0, "should contain no row");
+    });
+
+    QUnit.test("many2many list with onchange and edition of a record", async function (assert) {
+        serverData.models.partner.fields.turtles.type = "many2many";
+        serverData.models.partner.onchanges.turtles = function () {};
+
+        serverData.views = {
+            "turtle,false,form": '<form string="Turtle Power"><field name="turtle_bar"/></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        assert.verifySteps(["get_views", "read", "read"]);
+
+        await clickEdit(target);
+        await click($(target).find("td.o_data_cell:first")[0]);
+        assert.verifySteps(["get_views", "read"]);
+
+        await click($('.modal-body input[type="checkbox"]')[0]);
+        await click($(".modal .modal-footer .btn-primary").first()[0]);
+        assert.verifySteps(["write", "onchange", "read"]);
+
+        // there is nothing left to save -> should not do a 'write' RPC
+        await clickSave(target);
+        assert.verifySteps([]);
+    });
+
+    QUnit.test("onchange with 40+ commands for a many2many", async function (assert) {
+        // this test ensures that the basic_model correctly handles more LINK_TO
+        // commands than the limit of the dataPoint (40 for x2many kanban)
+        assert.expect(25);
+
+        // create a lot of partner_types that will be linked by the onchange
+        var commands = [[5]];
+        for (var i = 0; i < 45; i++) {
+            var id = 100 + i;
+            serverData.models.partner_type.records.push({ id: id, display_name: "type " + id });
+            commands.push([4, id]);
+        }
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.timmy = commands;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="timmy">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div><t t-esc="record.display_name.value"/></div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "write") {
+                    assert.strictEqual(args.args[1].timmy[0][0], 6, "should send a command 6");
+                    assert.strictEqual(
+                        args.args[1].timmy[0][2].length,
+                        45,
+                        "should replace with 45 ids"
+                    );
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        assert.verifySteps(["get_views", "read"]);
+
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger onchange");
+
+        assert.verifySteps(["onchange", "read"]);
+        assert.strictEqual(
+            $(target).find(".o_x2m_control_panel .o_pager_counter").text().trim(),
+            "1-40 / 45",
+            "pager should be correct"
+        );
+        assert.strictEqual(
+            $(target).find('.o_kanban_record:not(".o_kanban_ghost")').length,
+            40,
+            "there should be 40 records displayed on page 1"
+        );
+
+        await click($(target).find(".o_field_widget[name=timmy] .o_pager_next")[0]);
+        assert.verifySteps(["read"]);
+        assert.strictEqual(
+            $(target).find(".o_x2m_control_panel .o_pager_counter").text().trim(),
+            "41-45 / 45",
+            "pager should be correct"
+        );
+        assert.strictEqual(
+            $(target).find('.o_kanban_record:not(".o_kanban_ghost")').length,
+            5,
+            "there should be 5 records displayed on page 2"
+        );
+
+        await clickSave(target);
+
+        assert.strictEqual(
+            $(target).find(".o_x2m_control_panel .o_pager_counter").text().trim(),
+            "1-40 / 45",
+            "pager should be correct"
+        );
+        assert.strictEqual(
+            $(target).find('.o_kanban_record:not(".o_kanban_ghost")').length,
+            40,
+            "there should be 40 records displayed on page 1"
+        );
+
+        await click($(target).find(".o_field_widget[name=timmy] .o_pager_next")[0]);
+        assert.strictEqual(
+            $(target).find(".o_x2m_control_panel .o_pager_counter").text().trim(),
+            "41-45 / 45",
+            "pager should be correct"
+        );
+        assert.strictEqual(
+            $(target).find('.o_kanban_record:not(".o_kanban_ghost")').length,
+            5,
+            "there should be 5 records displayed on page 2"
+        );
+
+        await click($(target).find(".o_field_widget[name=timmy] .o_pager_next")[0]);
+        assert.strictEqual(
+            $(target).find(".o_x2m_control_panel .o_pager_counter").text().trim(),
+            "1-40 / 45",
+            "pager should be correct"
+        );
+        assert.strictEqual(
+            $(target).find('.o_kanban_record:not(".o_kanban_ghost")').length,
+            40,
+            "there should be 40 records displayed on page 1"
+        );
+
+        assert.verifySteps(["write", "read", "read", "read"]);
+    });
+
+    QUnit.test("default_get, onchange, onchange on m2m", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.onchanges.int_field = function (obj) {
+            if (obj.int_field === 2) {
+                assert.deepEqual(obj.timmy, [
+                    [6, false, [12]],
+                    [1, 12, { display_name: "gold" }],
+                ]);
+            }
+            obj.timmy = [[5], [1, 12, { display_name: "gold" }]];
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="timmy">
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                        </field>
+                        <field name="int_field"/>
+                    </sheet>
+                </form>`,
+        });
+
+        await editInput(target, ".o_field_widget[name=int_field] input", 2);
+    });
+
+    QUnit.test("many2many list add *many* records, remove, re-add", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.partner.fields.timmy.domain = [["color", "=", 2]];
+        serverData.models.partner.fields.timmy.onChange = true;
+        serverData.models.partner_type.fields.product_ids = {
+            string: "Product",
+            type: "many2many",
+            relation: "product",
+        };
+
+        for (var i = 0; i < 50; i++) {
+            var new_record_partner_type = { id: 100 + i, display_name: "batch" + i, color: 2 };
+            serverData.models.partner_type.records.push(new_record_partner_type);
+        }
+
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search":
+                '<search><field name="display_name"/><field name="color"/></search>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many">
+                        <tree>
+                            <field name="display_name"/>
+                            <field name="product_ids" widget="many2many_tags"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "get_formview_id") {
+                    assert.deepEqual(
+                        args.args[0],
+                        [1],
+                        "should call get_formview_id with correct id"
+                    );
+                }
+            },
+        });
+
+        // First round: add 51 records in batch
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+
+        var $modal = $(".modal-lg");
+
+        assert.equal($modal.length, 1, "There should be one modal");
+
+        await click($modal.find("thead input[type=checkbox]")[0]);
+        await nextTick();
+
+        await click($modal.find(".btn.btn-primary.o_select_button")[0]);
+
+        assert.strictEqual(
+            $(target).find(".o_data_row").length,
+            51,
+            "We should have added all the records present in the search view to the m2m field"
+        ); // the 50 in batch + 'gold'
+
+        await clickSave(target);
+
+        // Secound round: remove one record
+        await clickEdit(target);
+        var trash_buttons = $(target).find(
+            ".o_field_many2many.o_field_widget .o_field_x2many.o_field_x2many_list .o_list_record_remove"
+        );
+
+        await click(trash_buttons.first()[0]);
+
+        var pager_limit = $(target).find(
+            ".o_field_many2many.o_field_widget .o_field_x2many.o_field_x2many_list .o_pager_limit"
+        );
+        assert.equal(pager_limit.text(), "50", "We should have 50 records in the m2m field");
+
+        // Third round: re-add 1 records
+        await click($(target).find(".o_field_x2many_list_row_add a")[0]);
+
+        $modal = $(".modal-lg");
+
+        assert.equal($modal.length, 1, "There should be one modal");
+
+        await click($modal.find("thead input[type=checkbox]")[0]);
+        await nextTick();
+
+        await click($modal.find(".btn.btn-primary.o_select_button")[0]);
+
+        assert.strictEqual(
+            $(target).find(".o_data_row").length,
+            51,
+            "We should have 51 records in the m2m field"
+        );
+    });
+
+    QUnit.test("many2many kanban: action/type attribute", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <kanban action="a1" type="object">
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <field name="display_name"/>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        patchWithCleanup(form.env.services.action, {
+            doActionButton(params) {
+                assert.step(`doActionButton type ${params.type} name ${params.name}`);
+                params.onClose();
+            },
+        });
+        await click(target.querySelector(".oe_kanban_global_click"));
+        assert.verifySteps(["doActionButton type object name a1"]);
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
new file mode 100644
index 00000000000..ba3527f9b4c
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
@@ -0,0 +1,361 @@
+/** @odoo-module **/
+
+import { click, getFixture, selectDropdownItem } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                    },
+                    records: [
+                        { id: 1, display_name: "first record" },
+                        { id: 2, display_name: "second record" },
+                        { id: 4, display_name: "aaa" },
+                    ],
+                    onchanges: {},
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        { id: 1, display_name: "leonardo", partner_ids: [] },
+                        { id: 2, display_name: "donatello", partner_ids: [2, 4] },
+                        { id: 3, display_name: "raphael" },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("Many2ManyTagsAvatarField");
+
+    QUnit.test("widget many2many_tags_avatar", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="partner_ids" widget="many2many_tags_avatar"/>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsN(
+            target,
+            ".o_field_many2many_tags_avatar.o_field_widget .badge",
+            2,
+            "should have 2 records"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags_avatar.o_field_widget .badge img").dataset
+                .src,
+            "/web/image/partner/2/avatar_128",
+            "should have correct avatar image"
+        );
+    });
+
+    QUnit.test("widget many2many_tags_avatar in list view", async function (assert) {
+        const records = [];
+        for (let id = 5; id <= 15; id++) {
+            records.push({
+                id,
+                display_name: `record ${id}`,
+            });
+        }
+        serverData.models.partner.records = serverData.models.partner.records.concat(records);
+
+        serverData.models.turtle.records.push({
+            id: 4,
+            display_name: "crime master gogo",
+            partner_ids: [1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
+        });
+        serverData.models.turtle.records[0].partner_ids = [1];
+        serverData.models.turtle.records[1].partner_ids = [1, 2, 4, 5, 6, 7];
+        serverData.models.turtle.records[2].partner_ids = [1, 2, 4, 5, 7];
+
+        await makeView({
+            type: "list",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="partner_ids" widget="many2many_tags_avatar"/>
+                </tree>`,
+        });
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_field_many2many_tags_avatar img.o_m2m_avatar")
+                .dataset.src,
+            "/web/image/partner/1/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(
+                    ".o_data_row .o_many2many_tags_avatar_cell .o_field_many2many_tags_avatar"
+                )
+                .textContent.trim(),
+            "first record",
+            "should display like many2one avatar if there is only one record"
+        );
+        assert.containsN(
+            target,
+            ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_tag:not(.o_m2m_avatar_empty)",
+            4,
+            "should have 4 records"
+        );
+        assert.containsN(
+            target,
+            ".o_data_row:nth-child(3) .o_field_many2many_tags_avatar .o_tag:not(.o_m2m_avatar_empty)",
+            5,
+            "should have 5 records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_m2m_avatar_empty",
+            "should have o_m2m_avatar_empty span"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(
+                    ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+                )
+                .textContent.trim(),
+            "+2",
+            "should have +2 in o_m2m_avatar_empty"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/1/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_tag:nth-child(2) img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/2/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_tag:nth-child(3) img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/4/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_tag:nth-child(4) img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/5/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.containsNone(
+            target,
+            ".o_data_row:nth-child(3) .o_field_many2many_tags_avatar .o_m2m_avatar_empty",
+            "should have o_m2m_avatar_empty span"
+        );
+        assert.containsN(
+            target,
+            ".o_data_row:nth-child(4) .o_field_many2many_tags_avatar .o_tag:not(.o_m2m_avatar_empty)",
+            4,
+            "should have 4 records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_data_row:nth-child(4) .o_field_many2many_tags_avatar .o_m2m_avatar_empty",
+            "should have o_m2m_avatar_empty span"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(
+                    ".o_data_row:nth-child(4) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+                )
+                .textContent.trim(),
+            "+9",
+            "should have +9 in o_m2m_avatar_empty"
+        );
+
+        // check data-tooltip attribute (used by the tooltip service)
+        const tag = target.querySelector(
+            ".o_data_row:nth-child(2) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+        );
+        assert.strictEqual(
+            tag.dataset["tooltip"],
+            "record 6<br/>record 7",
+            "shows a tooltip on hover"
+        );
+
+        await click(target.querySelector(".o_data_row .o_many2many_tags_avatar_cell"));
+        assert.containsN(
+            target,
+            ".o_data_row.o_selected_row .o_many2many_tags_avatar_cell .badge",
+            1,
+            "should have 1 many2many badges in edit mode"
+        );
+
+        await selectDropdownItem(target, "partner_ids", "second record");
+        await click(target.querySelector(".o_list_button_save"));
+        assert.containsN(
+            target,
+            ".o_data_row:first-child .o_field_many2many_tags_avatar .o_tag",
+            2,
+            "should have 2 records"
+        );
+    });
+
+    QUnit.test("widget many2many_tags_avatar in kanban view", async function (assert) {
+        assert.expect(12);
+
+        const records = [];
+        for (let id = 5; id <= 15; id++) {
+            records.push({
+                id,
+                display_name: `record ${id}`,
+            });
+        }
+        serverData.models.partner.records = serverData.models.partner.records.concat(records);
+
+        serverData.models.turtle.records.push({
+            id: 4,
+            display_name: "crime master gogo",
+            partner_ids: [1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
+        });
+        serverData.models.turtle.records[0].partner_ids = [1];
+        serverData.models.turtle.records[1].partner_ids = [1, 2, 4];
+        serverData.models.turtle.records[2].partner_ids = [1, 2, 4, 5];
+        serverData.views = {
+            "turtle,false,form": '<form><field name="display_name"/></form>',
+        };
+
+        await makeView({
+            type: "kanban",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="display_name"/>
+                                <div class="oe_kanban_footer">
+                                    <div class="o_kanban_record_bottom">
+                                        <div class="oe_kanban_bottom_right">
+                                            <field name="partner_ids" widget="many2many_tags_avatar"/>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            selectRecord(recordId) {
+                assert.strictEqual(
+                    recordId,
+                    1,
+                    "should call its selectRecord prop with the clicked record"
+                );
+            },
+        });
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:first-child .o_field_many2many_tags_avatar img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/1/avatar_128",
+            "should have correct avatar image"
+        );
+
+        assert.containsN(
+            target,
+            ".o_kanban_record:nth-child(2) .o_field_many2many_tags_avatar .o_tag",
+            3,
+            "should have 3 records"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar .o_tags_list > span:not(.o_m2m_avatar_empty)",
+            2,
+            "should have 2 records"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar img.o_m2m_avatar"
+            ).dataset.src,
+            "/web/image/partner/1/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(
+                ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar img.o_m2m_avatar"
+            )[1].dataset.src,
+            "/web/image/partner/2/avatar_128",
+            "should have correct avatar image"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar .o_m2m_avatar_empty",
+            "should have o_m2m_avatar_empty span"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(
+                    ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+                )
+                .textContent.trim(),
+            "+2",
+            "should have +2 in o_m2m_avatar_empty"
+        );
+
+        assert.containsN(
+            target,
+            ".o_kanban_record:nth-child(4) .o_field_many2many_tags_avatar .o_tags_list > span:not(.o_m2m_avatar_empty)",
+            2,
+            "should have 2 records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(4) .o_field_many2many_tags_avatar .o_m2m_avatar_empty",
+            "should have o_m2m_avatar_empty span"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(
+                    ".o_kanban_record:nth-child(4) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+                )
+                .textContent.trim(),
+            "9+",
+            "should have 9+ in o_m2m_avatar_empty"
+        );
+
+        // check data-tooltip attribute (used by the tooltip service)
+        const tag = target.querySelector(
+            ".o_kanban_record:nth-child(3) .o_field_many2many_tags_avatar .o_m2m_avatar_empty"
+        );
+        assert.strictEqual(
+            tag.dataset["tooltip"],
+            "aaa<br/>record 5",
+            "shows a tooltip on hover with the right text"
+        );
+
+        await click(
+            target.querySelector(".o_kanban_record .o_field_many2many_tags_avatar img.o_m2m_avatar")
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2many_tags_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_field_tests.js
new file mode 100644
index 00000000000..28d922be56a
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2many_tags_field_tests.js
@@ -0,0 +1,1528 @@
+/** @odoo-module **/
+
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { Many2ManyTagsField } from "@web/views/fields/many2many_tags/many2many_tags_field";
+import {
+    click,
+    clickDropdown,
+    clickEdit,
+    clickOpenedDropdownItem,
+    clickSave,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+    selectDropdownItem,
+    triggerEvent,
+    triggerHotkey,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        turtles: {
+                            string: "one2many turtle field",
+                            type: "one2many",
+                            relation: "turtle",
+                            relation_field: "turtle_trululu",
+                        },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            foo: "yop",
+                            turtles: [2],
+                            timmy: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            foo: "blip",
+                            timmy: [],
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        turtle_bar: { string: "Bar", type: "boolean", default: true },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "leonardo",
+                            turtle_bar: true,
+                            partner_ids: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "donatello",
+                            turtle_bar: true,
+                            partner_ids: [2, 4],
+                        },
+                        {
+                            id: 3,
+                            display_name: "raphael",
+                            turtle_bar: false,
+                            partner_ids: [],
+                        },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("Many2ManyTagsField");
+
+    QUnit.test("Many2ManyTagsField with and without color", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.fields.partner_ids = {
+            string: "Partner",
+            type: "many2many",
+            relation: "partner",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="partner_ids" widget="many2many_tags" options="{'color_field': 'color'}"/>
+                    <field name="timmy" widget="many2many_tags"/>
+                </form>`,
+            mockRPC: (route, { args, method, model }) => {
+                if (method === "read" && model === "partner_type") {
+                    assert.deepEqual(
+                        args,
+                        [[12], ["display_name"]],
+                        "should not read any color field"
+                    );
+                } else if (method === "read" && model === "partner") {
+                    assert.deepEqual(
+                        args,
+                        [[1], ["display_name", "color"]],
+                        "should read color field"
+                    );
+                }
+            },
+        });
+
+        await selectDropdownItem(target, "partner_ids", "first record");
+
+        await clickDropdown(target, "timmy");
+        const autocomplete = target.querySelector("[name='timmy'] .o-autocomplete.dropdown");
+        assert.strictEqual(
+            autocomplete.querySelectorAll("li").length,
+            3,
+            "autocomplete dropdown should have 3 entries (2 values + 'Search and Edit...')"
+        );
+        await clickOpenedDropdownItem(target, "timmy", "gold");
+        assert.deepEqual(
+            getNodesTextContent(
+                target.querySelectorAll(`.o_field_many2many_tags[name="timmy"] .badge`)
+            ),
+            ["gold"]
+        );
+    });
+
+    QUnit.test("Many2ManyTagsField with color: rendering and edition", async function (assert) {
+        assert.expect(28);
+
+        serverData.models.partner.records[0].timmy = [12, 14];
+        serverData.models.partner_type.records.push({ id: 13, display_name: "red", color: 8 });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags" options="{'color_field': 'color', 'no_create_edit': True }"/>
+                </form>`,
+            resId: 1,
+            mockRPC: (route, { args, method, model }) => {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    var commands = args[1].timmy;
+                    assert.strictEqual(commands.length, 1, "should have generated one command");
+                    assert.strictEqual(
+                        commands[0][0],
+                        6,
+                        "generated command should be REPLACE WITH"
+                    );
+                    assert.deepEqual(commands[0][2], [12, 13], "new value should be [12, 13]");
+                }
+                if (method === "read" && model === "partner_type") {
+                    assert.deepEqual(
+                        args[1],
+                        ["display_name", "color"],
+                        "should read the color field"
+                    );
+                }
+            },
+        });
+        assert.containsN(target, ".o_field_many2many_tags .badge", 2, "should contain 2 tags");
+        assert.strictEqual(
+            target.querySelector(".badge .o_tag_badge_text").textContent,
+            "gold",
+            "should have fetched and rendered gold partner tag"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".badge .o_tag_badge_text")[1].textContent,
+            "silver",
+            "should have fetched and rendered silver partner tag"
+        );
+        assert.hasClass(
+            target.querySelector(".badge"),
+            "o_tag_color_2",
+            "should have correctly set the color"
+        );
+
+        await clickEdit(target);
+
+        assert.containsN(
+            target,
+            ".o_field_many2many_tags .badge",
+            2,
+            "should still contain 2 tags in edit mode"
+        );
+        assert.ok(
+            target.querySelector(".o_tag_color_2 .o_tag_badge_text").textContent === "gold",
+            'first tag should still contain "gold" and be color 2 in edit mode'
+        );
+        assert.containsN(
+            target,
+            ".o_field_many2many_tags .o_delete",
+            2,
+            "tags should contain a delete button"
+        );
+
+        // add an other existing tag
+        await click(target.querySelector("div[name='timmy'] .o-autocomplete.dropdown input"));
+
+        const autocompleteDropdown = target.querySelector(".o-autocomplete--dropdown-menu");
+
+        assert.strictEqual(
+            autocompleteDropdown.querySelectorAll("li").length,
+            2,
+            "autocomplete dropdown should have 2 entry"
+        );
+
+        assert.strictEqual(
+            autocompleteDropdown.querySelector("li a").textContent,
+            "red",
+            "autocomplete dropdown should contain 'red'"
+        );
+
+        await click(autocompleteDropdown.querySelector("li a"));
+        assert.containsN(target, ".o_field_many2many_tags .badge", 3, "should contain 3 tags");
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_many2many_tags .badge .o_tag_badge_text")[2]
+                .textContent,
+            "red",
+            "should contain newly added tag 'red'"
+        );
+        assert.hasClass(
+            target.querySelectorAll(".badge")[2],
+            "o_tag_color_8",
+            "should have fetched the color of added tag"
+        );
+
+        // remove tag silver
+        await click(target.querySelectorAll(".o_field_many2many_tags .o_delete")[1]);
+        assert.containsN(target, ".o_field_many2many_tags .badge", 2, "should contain 2 tags");
+        const textContent = getNodesTextContent(
+            target.querySelectorAll(".o_field_many2many_tags  .dropdown-toggle .badge")
+        );
+        assert.strictEqual(
+            textContent.includes("silver"),
+            false,
+            `should not contain tag 'silver' anymore but found: ${textContent}`
+        );
+        // save the record (should do the write RPC with the correct commands)
+        await click(target.querySelector(".o_form_button_save"));
+
+        // checkbox 'Hide in Kanban'
+        const badgeElement = target.querySelectorAll(".o_field_many2many_tags .badge")[1]; // selects 'red' tag
+        await click(badgeElement);
+        assert.containsOnce(
+            target,
+            ".o_tag_popover .custom-checkbox input",
+            "should have a checkbox in the colorpicker popover"
+        );
+
+        let checkBox = target.querySelector(".o_tag_popover .custom-checkbox input");
+        assert.notOk(checkBox.checked, "should have unticked checkbox in colorpicker popover");
+
+        await click(target, ".o_tag_popover input[type='checkbox']");
+
+        assert.strictEqual(
+            badgeElement.dataset.color,
+            "0",
+            "should become white/transparent when toggling on checkbox"
+        );
+
+        await click(badgeElement);
+        checkBox = target.querySelector(".o_tag_popover .custom-checkbox input"); // refresh
+
+        assert.ok(
+            checkBox.checked,
+            "should have a ticked checkbox in colorpicker popover after mousedown"
+        );
+
+        await click(target, ".o_tag_popover input[type='checkbox']");
+
+        assert.strictEqual(
+            badgeElement.dataset.color,
+            "8",
+            "should revert to old color when toggling off checkbox"
+        );
+
+        await click(badgeElement);
+        checkBox = target.querySelector(".o_tag_popover .custom-checkbox input"); // refresh
+
+        assert.notOk(
+            checkBox.checked,
+            "should have an unticked checkbox in colorpicker popover after 2nd click"
+        );
+    });
+
+    QUnit.test("Many2ManyTagsField in tree view", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="timmy" widget="many2many_tags" options="{'color_field': 'color'}"/>
+                    <field name="foo"/>
+                </tree>`,
+            selectRecord: () => {
+                assert.step("selectRecord");
+            },
+        });
+
+        assert.containsN(target, ".o_field_many2many_tags .badge", 2, "there should be 2 tags");
+        assert.containsNone(target, ".badge.dropdown-toggle", "the tags should not be dropdowns");
+
+        // click on the tag: should do nothing and open the form view
+        click(target.querySelector(".o_field_many2many_tags .badge :nth-child(1)"));
+
+        assert.verifySteps(["selectRecord"]);
+    });
+
+    QUnit.test("Many2ManyTagsField view a domain", async function (assert) {
+        assert.expect(7);
+
+        serverData.models.partner.fields.timmy.domain = [["id", "<", 50]];
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner_type.records.push({ id: 99, display_name: "red", color: 8 });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags" options="{'no_create_edit': True}"/>
+                </form>`,
+            resId: 1,
+            mockRPC: (route, args) => {
+                if (args.method === "name_search") {
+                    assert.deepEqual(
+                        args.kwargs.args,
+                        ["&", ["id", "<", 50], "!", ["id", "in", [12]]],
+                        "domain sent to name_search should be correct"
+                    );
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_field_many2many_tags .badge", "should contain 1 tag");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".badge")),
+            ["gold"],
+            "should have fetched and rendered gold partner tag"
+        );
+
+        await clickEdit(target);
+
+        await clickDropdown(target, "timmy");
+
+        const autocompleteDropdown = target.querySelector(".o-autocomplete--dropdown-menu");
+
+        assert.strictEqual(
+            autocompleteDropdown.querySelectorAll("li").length,
+            2,
+            "autocomplete dropdown should have 2 entry"
+        );
+
+        assert.strictEqual(
+            autocompleteDropdown.querySelector("li a").textContent,
+            "silver",
+            "autocomplete dropdown should contain 'silver'"
+        );
+
+        await clickOpenedDropdownItem(target, "timmy", "silver");
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_many2many_tags .badge").length,
+            2,
+            "should contain 2 tags"
+        );
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".badge")),
+            ["gold", "silver"],
+            "should contain newly added tag 'silver'"
+        );
+    });
+
+    QUnit.test("Many2ManyTagsField in a new record", async function (assert) {
+        assert.expect(7);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+            mockRPC: (route, { args }) => {
+                if (route === "/web/dataset/call_kw/partner/create") {
+                    var commands = args[0].timmy;
+                    assert.strictEqual(commands.length, 1, "should have generated one command");
+                    assert.strictEqual(
+                        commands[0][0],
+                        6,
+                        "generated command should be REPLACE WITH"
+                    );
+                    assert.ok(_.isEqual(commands[0][2], [12]), "new value should be [12]");
+                }
+            },
+        });
+        assert.strictEqual(
+            target.querySelectorAll(".o_form_view .o_form_editable").length,
+            1,
+            "form should be in edit mode"
+        );
+
+        await clickDropdown(target, "timmy");
+        const autocomplete = target.querySelector("[name='timmy'] .o-autocomplete.dropdown");
+        assert.strictEqual(
+            autocomplete.querySelectorAll("li").length,
+            3,
+            "autocomplete dropdown should have 3 entries (2 values + 'Search and Edit...')"
+        );
+        await clickOpenedDropdownItem(target, "timmy", "gold");
+
+        assert.containsOnce(target, ".o_field_many2many_tags .badge", "should contain 1 tag");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_field_many2many_tags .badge")),
+            ["gold"],
+            "should contain newly added tag 'gold'"
+        );
+
+        // save the record (should do the write RPC with the correct commands)
+        await clickSave(target);
+    });
+
+    QUnit.test("Many2ManyTagsField: update color", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner_type.records[0].color = 0;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags" options="{'color_field': 'color'}"/>
+                </form>`,
+            mockRPC: (route, { args, method }) => {
+                if (method === "write") {
+                    assert.step(JSON.stringify(args[1]));
+                }
+            },
+            resId: 1,
+        });
+
+        // First checks that default color 0 is rendered as 0 color
+        let badgeNode = target.querySelector(".o_tag.badge");
+        assert.strictEqual(badgeNode.dataset.color, "0", "first tag color should be 0");
+
+        // Update the color in readonly => write automatically
+        await click(badgeNode);
+        await click(target, '.o_colorlist button[data-color="1"]');
+        assert.strictEqual(
+            badgeNode.dataset.color,
+            "1",
+            "should have correctly updated the color (in readonly)"
+        );
+
+        // Update the color in edit => write on save with rest of the record
+        await clickEdit(target);
+        await click(badgeNode);
+        await click(target, '.o_colorlist button[data-color="6"]');
+        await nextTick();
+        assert.strictEqual(
+            badgeNode.dataset.color,
+            "6",
+            "should have correctly updated the color (in edit)"
+        );
+
+        // TODO POST WOWL GES: commented code below is to make the m2mtags more.
+        // consistent. No color change if edit => discard.
+        // await clickSave(target);
+
+        assert.verifySteps([
+            `{"color":1}`,
+            `{"color":6}`,
+            //  `{"timmy":[[1,12,{"color":6}]]}`
+        ]);
+
+        /*
+        badgeNode = target.querySelector(".o_tag.badge"); // need to refresh the reference
+
+        // Update the color in edit without save => we don't go through RPC
+        // so it's not saved and it is lost on discard.
+        await clickEdit(target);
+        await click(badgeNode);
+        await click(target, '.o_colorlist button[data-color="8"]');
+        await nextTick();
+        assert.strictEqual(
+            badgeNode.dataset.color,
+            "8",
+            "should have correctly updated the color (in edit)"
+        );
+
+        await clickDiscard(target);
+
+        assert.strictEqual(
+            badgeNode.dataset.color,
+            "6",
+            "should have correctly cancel the color update"
+        );
+
+        */
+    });
+
+    QUnit.test("Many2ManyTagsField with no_edit_color option", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags" options="{'color_field': 'color', 'no_edit_color': 1}"/>
+                </form>`,
+            resId: 1,
+        });
+
+        // Click to try to open colorpicker
+        await click(target.querySelector(".o_tag.badge"));
+        assert.containsNone(target, ".o_colorlist");
+    });
+
+    QUnit.test("Many2ManyTagsField in editable list", async function (assert) {
+        assert.expect(7);
+
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            context: { take: "five" },
+            arch: `
+                <tree editable="bottom">
+                    <field name="timmy" widget="many2many_tags"/>
+                </tree>`,
+            mockRPC: (route, { kwargs, method, model }) => {
+                if (method === "read" && model === "partner_type") {
+                    assert.strictEqual(
+                        kwargs.context.take,
+                        "five",
+                        "The context should be passed to the RPC"
+                    );
+                }
+            },
+        });
+
+        const firstRow = target.querySelector(".o_data_row:nth-child(1)");
+        const m2mTagsCell = firstRow.querySelector(".o_many2many_tags_cell");
+
+        assert.containsOnce(firstRow, ".o_field_many2many_tags .badge");
+
+        // edit first row
+        await click(m2mTagsCell);
+
+        assert.containsOnce(m2mTagsCell, ".o_field_many2many_selection");
+
+        // add a tag
+        await selectDropdownItem(firstRow, "timmy", "silver");
+
+        assert.containsN(firstRow, ".o_field_many2many_tags .badge", 2);
+
+        await clickSave(target);
+
+        assert.containsN(firstRow, ".o_field_many2many_tags .badge", 2);
+    });
+
+    QUnit.test("Many2ManyTagsField can load more than 40 records", async function (assert) {
+        serverData.models.partner.fields.partner_ids = {
+            string: "Partner",
+            type: "many2many",
+            relation: "partner",
+        };
+        serverData.models.partner.records[0].partner_ids = [];
+        for (var i = 15; i < 115; i++) {
+            serverData.models.partner.records.push({ id: i, display_name: "walter" + i });
+            serverData.models.partner.records[0].partner_ids.push(i);
+        }
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="partner_ids" widget="many2many_tags"/></form>',
+            resId: 1,
+        });
+        assert.containsN(
+            target,
+            '.o_field_widget[name="partner_ids"] .badge',
+            100,
+            "should have rendered 100 tags"
+        );
+    });
+
+    QUnit.test(
+        "Many2ManyTagsField loads records according to limit defined on widget prototype",
+        async function (assert) {
+            patchWithCleanup(Many2ManyTagsField, {
+                limit: 30,
+            });
+
+            serverData.models.partner.fields.partner_ids = {
+                string: "Partner",
+                type: "many2many",
+                relation: "partner",
+            };
+            serverData.models.partner.records[0].partner_ids = [];
+            for (var i = 15; i < 50; i++) {
+                serverData.models.partner.records.push({ id: i, display_name: "walter" + i });
+                serverData.models.partner.records[0].partner_ids.push(i);
+            }
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="partner_ids" widget="many2many_tags"/></form>',
+                resId: 1,
+            });
+
+            assert.strictEqual(
+                target.querySelectorAll('.o_field_widget[name="partner_ids"] .badge').length,
+                30,
+                "should have rendered 30 tags even though 35 records linked"
+            );
+        }
+    );
+
+    QUnit.test("Many2ManyTagsField keeps focus when being edited", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner.onchanges.foo = function (obj) {
+            obj.timmy = [[5]]; // DELETE command
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="timmy" widget="many2many_tags"/>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.containsOnce(target, ".o_field_many2many_tags .badge", "should contain one tag");
+
+        // update foo, which will trigger an onchange and update timmy
+        // -> m2mtags input should not have taken the focus
+        const textInput = target.querySelector("[name=foo] input");
+        textInput.focus();
+        await editInput(textInput, null, "trigger onchange");
+        assert.containsNone(target, ".o_field_many2many_tags .badge", "should contain no tags");
+        assert.strictEqual(
+            textInput,
+            document.activeElement,
+            "foo input should have kept the focus"
+        );
+
+        await selectDropdownItem(target, "timmy", "gold");
+        assert.containsOnce(target, ".o_field_many2many_tags .badge", "should contain a tag");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags input"),
+            document.activeElement,
+            "m2m tags input should have kept the focus"
+        );
+
+        // remove a tag -> m2mtags input should still have the focus
+        await click(target.querySelector(".o_field_many2many_tags .o_delete"));
+        assert.containsNone(target, ".o_field_many2many_tags .badge", "should contain no tags");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags input"),
+            document.activeElement,
+            "m2m tags input should have kept the focus"
+        );
+    });
+
+    QUnit.test("Many2ManyTagsField: tags title attribute", async function (assert) {
+        serverData.models.turtle.records[0].partner_ids = [2];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "turtle",
+            resId: 1,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="display_name"/>
+                        <field name="partner_ids" widget="many2many_tags"/>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.deepEqual(
+            target.querySelector(".o_field_many2many_tags .o_tag.badge").title,
+            "second record",
+            "the title should be filled in"
+        );
+    });
+
+    QUnit.test(
+        "Many2ManyTagsField: toggle colorpicker with multiple tags",
+        async function (assert) {
+            serverData.models.partner.records[0].timmy = [12, 14];
+            serverData.models.partner_type.records[0].color = 0;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="timmy" widget="many2many_tags" options="{'color_field': 'color'}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsNone(target, ".o_colorpicker", "colorpicker should be closed");
+
+            // click on the badge to open colorpicker
+            await click(target.querySelector(".o_field_many2many_tags .badge"));
+            assert.containsOnce(target, ".o_colorlist", "colorpicker should be open");
+
+            await click(target.querySelector(".o_field_many2many_tags [title=silver]"));
+            assert.containsOnce(target, ".o_colorlist", "only one colorpicker should be open");
+
+            await click(target.querySelector(".o_field_many2many_tags [title=silver]"));
+            assert.containsNone(target, ".o_colorpicker", "colorpicker should be closed");
+
+            await click(target.querySelector(".o_field_many2many_tags [title=silver]"));
+            assert.containsOnce(target, ".o_colorlist", "colorpicker should be open");
+
+            await click(target);
+            assert.containsNone(
+                target,
+                ".o_colorpicker",
+                "click outside should close the colorpicker"
+            );
+        }
+    );
+
+    QUnit.test("Many2ManyTagsField: toggle colorpicker multiple times", async function (assert) {
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner_type.records[0].color = 0;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags" options="{'color_field': 'color'}"/>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_many2many_tags .badge").length,
+            1,
+            "should have one tag"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .badge").dataset.color,
+            "0",
+            "tag should have color 0"
+        );
+        assert.containsNone(target, ".o_colorpicker", "colorpicker should be closed");
+
+        // click on the badge to open colorpicker
+        await click(target.querySelector(".o_field_many2many_tags .badge"));
+
+        assert.containsOnce(target, ".o_colorlist", "colorpicker should be open");
+
+        // click on the badge again to close colorpicker
+        await click(target.querySelector(".o_field_many2many_tags .badge"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .badge").dataset.color,
+            "0",
+            "tag should still have color 0"
+        );
+        assert.containsNone(target, ".o_colorlist", "colorpicker should be closed");
+
+        // click on the badge to open colorpicker
+        await click(target.querySelector(".o_field_many2many_tags .badge"));
+
+        assert.containsOnce(target, ".o_colorlist", "colorpicker should be open");
+
+        // click on the colorpicker, but not on a color
+        await click(target.querySelector(".o_colorlist"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .badge").dataset.color,
+            "0",
+            "tag should still have color 0"
+        );
+        assert.containsOnce(target, ".o_colorlist", "colorpicker should not be closed");
+
+        await click(target, '.o_colorlist button[data-color="2"]');
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .badge").dataset.color,
+            "2",
+            "tag should have color 2"
+        );
+        assert.containsNone(target, ".o_colorlist", "colorpicker should be closed");
+    });
+
+    QUnit.test("Many2ManyTagsField: quick create a new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+        });
+
+        assert.containsNone(target, ".o_field_many2many_tags .badge");
+
+        await editInput(
+            target.querySelector(".o_field_many2many_selection .o_input_dropdown input"),
+            null,
+            "new"
+        );
+        await selectDropdownItem(target, "timmy", `Create "new"`);
+
+        assert.containsOnce(target, ".o_field_many2many_tags .badge");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags").textContent.trim(),
+            "new"
+        );
+    });
+
+    QUnit.test("select a many2many value by focusing out", async function (assert) {
+        serverData.models.partner_type.records.push({ id: 13, display_name: "red", color: 8 });
+
+        patchWithCleanup(AutoComplete, {
+            timeout: 0,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+        });
+
+        assert.containsNone(target, ".o_field_many2many_tags .badge");
+        let input = target.querySelector(".o_field_many2many_tags input");
+        await triggerEvent(input, null, "focus");
+        await click(input);
+        await editInput(input, null, "go");
+        await triggerEvent(input, null, "blur");
+
+        assert.containsNone(document.body, ".modal");
+        assert.containsOnce(target, ".o_field_many2many_tags .badge");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .badge").textContent,
+            "gold"
+        );
+
+        input = target.querySelector(".o_field_many2many_tags input");
+        await triggerEvent(input, null, "focus");
+        await click(input);
+        await editInput(input, null, "r");
+        await triggerEvent(input, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(input, null, "blur");
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_many2many_tags .badge")[1].textContent,
+            "red",
+            "the second element in the list has been selected"
+        );
+    });
+
+    QUnit.test("Many2ManyTagsField in one2many with display_name", async function (assert) {
+        serverData.models.turtle.records[0].partner_ids = [2];
+        serverData.views = {
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="partner_ids" widget="many2many_tags"/>
+                        </tree>
+                        <form>
+                            <field name="partner_ids"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["second recordaaa"],
+            "the tags should be correctly rendered"
+        );
+
+        // open the x2m form view
+        await click(target.querySelector('.o_field_one2many[name="turtles"] .o_data_cell'));
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".modal .o_data_cell")),
+            ["blip", "My little Foo Value"],
+            "the list view should be correctly rendered with foo"
+        );
+
+        await click(target.querySelector(".modal button.o_form_button_cancel"));
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["second recordaaa"],
+            "the tags should still be correctly rendered"
+        );
+    });
+
+    QUnit.test("many2many read, field context is properly sent", async function (assert) {
+        serverData.models.partner.fields.timmy.context = { hello: "world" };
+        serverData.models.partner.records[0].timmy = [12];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "read" && args.model === "partner_type") {
+                    assert.step(args.kwargs.context.hello);
+                }
+            },
+        });
+
+        assert.verifySteps(["world"]);
+        await clickEdit(target);
+        await selectDropdownItem(target, "timmy", "silver");
+        assert.verifySteps(["world"]);
+    });
+
+    QUnit.test("Many2ManyTagsField: select multiple records", async function (assert) {
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,search": '<search><field name="display_name"/></search>',
+        };
+
+        for (var i = 1; i <= 10; i++) {
+            serverData.models.partner_type.records.push({
+                id: 100 + i,
+                display_name: "Partner" + i,
+            });
+        }
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="timmy" widget="many2many_tags"/>
+                </form>`,
+        });
+
+        await clickEdit(target);
+        await selectDropdownItem(target, "timmy", "Search More...");
+
+        assert.ok(target.querySelector(".o_dialog"), "should have open the modal");
+        // + 1 for the select all
+        assert.containsN(
+            target,
+            ".o_dialog .o_list_renderer .o_list_record_selector input",
+            serverData.models.partner_type.records.length + 1,
+            "Should have record selector checkboxes to select multiple records"
+        );
+        //multiple select tag
+        await click(
+            target.querySelector(".o_dialog .o_list_renderer .o_list_record_selector input")
+        );
+        await nextTick(); // necessary for the button to be switched to enabled.
+        const selectButton = target.querySelector(".o_dialog .o_select_button");
+        assert.ok(!selectButton.disabled, "select button should be enabled");
+
+        await click(selectButton);
+        assert.containsNone(target, "o_dialog", "should have closed the modal");
+        assert.containsN(
+            target,
+            '[name="timmy"] .badge',
+            serverData.models.partner_type.records.length,
+            "many2many tag should now contain 12 records"
+        );
+    });
+
+    QUnit.test(
+        "Many2ManyTagsField: select multiple records doesn't show already added tags",
+        async function (assert) {
+            serverData.models.partner.records[0].timmy = [12];
+
+            serverData.views = {
+                "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+                "partner_type,false,search": '<search><field name="display_name"/></search>',
+            };
+
+            for (var i = 1; i <= 10; i++) {
+                serverData.models.partner_type.records.push({
+                    id: 100 + i,
+                    display_name: "Partner" + i,
+                });
+            }
+
+            await makeView({
+                type: "form",
+                serverData,
+                resModel: "partner",
+                resId: 1,
+                arch: `
+                    <form>
+                        <field name="timmy" widget="many2many_tags"/>
+                    </form>`,
+            });
+
+            await clickEdit(target);
+            await selectDropdownItem(target, "timmy", "Search More...");
+
+            // -1 for the one that is already on the form & +1 for the select all,
+            assert.containsN(
+                target,
+                ".o_dialog .o_list_renderer .o_list_record_selector input",
+                serverData.models.partner_type.records.length - 1 + 1,
+                "Should have record selector checkboxes to select multiple records"
+            );
+
+            //multiple select tag
+            await click(
+                target.querySelector(".o_dialog .o_list_renderer .o_list_record_selector input")
+            );
+            await nextTick(); // necessary for the button to be switched to enabled.
+            await click(target.querySelector(".o_dialog .o_select_button"));
+            assert.containsN(
+                target,
+                '[name="timmy"] .badge',
+                serverData.models.partner_type.records.length,
+                "many2many tag should now contain 12 records"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Many2ManyTagsField: save&new in edit mode doesn't close edit window",
+        async function (assert) {
+            for (var i = 1; i <= 10; i++) {
+                serverData.models.partner_type.records.push({
+                    id: 100 + i,
+                    display_name: "Partner" + i,
+                });
+            }
+
+            serverData.views = {
+                "partner_type,false,list": '<tree><field name="display_name"/></tree>',
+                "partner_type,false,search": '<search><field name="display_name"/></search>',
+                "partner_type,false,form": '<form><field name="display_name"/></form>',
+            };
+
+            const nameSearchProm = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="timmy" widget="many2many_tags"/>
+                    </form>`,
+                resId: 1,
+                async mockRPC(route, args) {
+                    if (args.method === "name_search") {
+                        nameSearchProm.resolve();
+                    }
+                },
+            });
+            await clickEdit(target);
+
+            await editInput(target, `div[name="timmy"] input`, "Ralts");
+            await nameSearchProm;
+            await nextTick();
+            await clickOpenedDropdownItem(target, "timmy", "Create and edit...");
+            await nextTick();
+            //await testUtils.fields.many2one.createAndEdit("timmy", "Ralts");
+            assert.containsOnce($(target), ".modal .o_form_view", "should have opened the modal");
+
+            // Create multiple records with save & new
+            await editInput(target, ".modal input", "Ralts");
+            await click($(".modal .btn-primary:nth-child(2)")[0]);
+            await nextTick();
+            assert.containsOnce($(target), ".modal .o_form_view", "modal should still be open");
+            assert.equal($(".modal input:first")[0].value, "", "input should be empty");
+
+            // Create another record and click save & close
+            await editInput(target, ".modal input", "Pikachu");
+
+            await click($(".modal .o_form_buttons_edit .btn-primary:first")[0]);
+            assert.containsNone($(target), ".modal .o_list_view", "should have closed the modal");
+            assert.containsN(
+                target,
+                '.o_field_many2many_tags[name="timmy"] .badge',
+                2,
+                "many2many tag should now contain 2 records"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Many2ManyTagsField: make tag name input field blank on Save&New",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.views = {
+                "partner_type,false,form": '<form><field name="name"/></form>',
+            };
+
+            let onchangeCalls = 0;
+            const nameSearchProm = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+                resId: 1,
+                mockRPC: function (route, args) {
+                    if (args.method === "name_search") {
+                        nameSearchProm.resolve();
+                    }
+                    if (args.method === "onchange") {
+                        if (onchangeCalls === 0) {
+                            assert.deepEqual(
+                                args.kwargs.context,
+                                { default_name: "hello", lang: "en", tz: "taht", uid: 7 },
+                                "context should have default_name with 'hello' as value"
+                            );
+                        }
+                        if (onchangeCalls === 1) {
+                            assert.deepEqual(
+                                args.kwargs.context,
+                                { lang: "en", tz: "taht", uid: 7 },
+                                "context should have default_name with false as value"
+                            );
+                        }
+                        onchangeCalls++;
+                    }
+                },
+            });
+
+            await clickEdit(target);
+
+            await editInput(target, ".o_field_widget input", "hello");
+            await nameSearchProm;
+            await nextTick();
+            await clickOpenedDropdownItem(target, "timmy", "Create and edit...");
+            await nextTick();
+
+            assert.strictEqual(
+                target.querySelector(".modal .o_form_view input").value,
+                "hello",
+                "should contain the 'hello' in the tag name input field"
+            );
+
+            // Create record with save & new
+            await click(target.querySelector(".modal .btn-primary:nth-child(2)"));
+            assert.strictEqual(
+                target.querySelector(".modal .o_form_view input").value,
+                "",
+                "should display the blank value in the tag name input field"
+            );
+        }
+    );
+
+    QUnit.test("Many2ManyTagsField: conditional create/delete actions", async function (assert) {
+        serverData.models.turtle.records[0].partner_ids = [2];
+        for (var i = 1; i <= 10; i++) {
+            serverData.models.partner.records.push({
+                id: 100 + i,
+                display_name: "Partner" + i,
+            });
+        }
+
+        serverData.views = {
+            "partner,false,list": '<tree><field name="name"/></tree>',
+            "partner,false,search": "<search/>",
+        };
+
+        let nameSearchProm = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <form>
+                    <field name="display_name"/>
+                    <field name="turtle_bar"/>
+                    <field name="partner_ids" options="{'create': [('turtle_bar', '=', True)], 'delete': [('turtle_bar', '=', True)]}" widget="many2many_tags"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "name_search") {
+                    nameSearchProm.resolve();
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        // turtle_bar is true -> create and delete actions are available
+        assert.containsOnce(
+            target,
+            ".o_field_many2many_tags.o_field_widget .badge .o_delete",
+            "X icon on badges should not be available"
+        );
+
+        await clickDropdown(target, "partner_ids");
+        await nameSearchProm;
+        await nextTick();
+
+        const $dropdown1 = $(target.querySelector(".o-autocomplete.dropdown"));
+        assert.containsOnce(
+            $dropdown1,
+            "li.o_m2o_start_typing a:contains(Start typing...)",
+            "autocomplete should contain Start typing..."
+        );
+
+        await clickOpenedDropdownItem(target, "partner_ids", "Search More...");
+
+        assert.containsN(
+            target,
+            ".modal .modal-footer button",
+            3,
+            "there should be 3 buttons (Select, Create and Cancel) available in the modal footer"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // type something that doesn't exist
+        nameSearchProm = makeDeferred();
+        const input = target.querySelector(".o_field_many2many_tags input");
+
+        await triggerEvent(input, null, "focus");
+        await nextTick();
+        input.value = "Something that does not exist";
+
+        await triggerEvent(input, null, "keydown", {
+            code: "ArrowDown",
+            key: "ArrowDown",
+            bubbles: true,
+        });
+        await nameSearchProm;
+        await nextTick();
+
+        assert.containsN(
+            $(target.querySelector(".o-autocomplete.dropdown")),
+            "li.o_m2o_dropdown_option",
+            2,
+            "autocomplete should contain Create and Create and Edit... options"
+        );
+
+        // set turtle_bar false -> create and delete actions are no longer available
+        await click($(target.querySelector('.o_field_widget[name="turtle_bar"] input')).first()[0]);
+        await nextTick();
+
+        // remove icon should still be there as it doesn't delete records but rather remove links
+        assert.containsOnce(
+            target,
+            ".o_field_many2many_tags.o_field_widget .badge .o_delete",
+            "X icon on badge should still be there even after turtle_bar is not checked"
+        );
+
+        nameSearchProm = makeDeferred();
+        await clickDropdown(target, "partner_ids");
+        await nameSearchProm;
+        await nextTick();
+
+        // only Search More option should be available
+        assert.containsOnce(
+            $(target.querySelector(".o-autocomplete.dropdown")),
+            "li.o_m2o_dropdown_option",
+            "autocomplete should contain only one option"
+        );
+        assert.containsOnce(
+            $(target.querySelector(".o-autocomplete.dropdown")),
+            "li.o_m2o_dropdown_option a:contains(Search More...)",
+            "autocomplete option should be Search More"
+        );
+
+        await clickOpenedDropdownItem(target, "partner_ids", "Search More...");
+
+        assert.containsN(
+            document.body,
+            ".modal .modal-footer button",
+            2,
+            "there should be 2 buttons (Select and Cancel) available in the modal footer"
+        );
+
+        await click($(".modal .modal-footer .o_form_button_cancel")[0]);
+
+        // type something that does exist in multiple occurrences
+        // LPE: to check with AAB
+        nameSearchProm = makeDeferred();
+
+        await triggerEvent(input, null, "focus");
+        await nextTick();
+        input.value = "Pa";
+
+        await triggerEvent(input, null, "keydown", {
+            code: "ArrowUp",
+            key: "ArrowUp",
+            bubbles: true,
+        });
+        await nextTick();
+        await nameSearchProm;
+        await nextTick();
+
+        // only Search More option should be available
+        assert.containsOnce(
+            $(target.querySelector(".o-autocomplete.dropdown")),
+            "li.o_m2o_dropdown_option",
+            "autocomplete should contain only one option"
+        );
+        assert.containsOnce(
+            $(target.querySelector(".o-autocomplete.dropdown")),
+            "li.o_m2o_dropdown_option a:contains(Search More)",
+            "autocomplete option should be Search More"
+        );
+    });
+
+    QUnit.test("failing many2one quick create in a Many2ManyTagsField", async function (assert) {
+        assert.expect(5);
+
+        serverData.views = {
+            "partner_type,false,form": `
+                <form>
+                    <field name="name"/>
+                    <field name="color"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="timmy" widget="many2many_tags"/></form>',
+            mockRPC(route, args) {
+                if (args.method === "name_create") {
+                    return Promise.reject();
+                }
+                if (args.method === "create") {
+                    assert.deepEqual(args.args[0], {
+                        color: 8,
+                        name: "new partner",
+                    });
+                }
+            },
+        });
+
+        assert.containsNone(target, ".o_field_many2many_tags .badge");
+
+        // try to quick create a record
+        await triggerEvent(target, ".o_field_many2many_tags input", "focus");
+        await editInput(target, ".o_field_many2many_tags input", "new partner");
+        await selectDropdownItem(target, "timmy", `Create "new partner"`);
+
+        // as the quick create failed, a dialog should be open to 'slow create' the record
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.strictEqual($(".modal .o_field_widget[name=name] input").val(), "new partner");
+
+        await editInput(target, ".modal .o_field_widget[name=color] input", 8);
+        await click(target.querySelector(".modal footer .o_form_buttons_edit button"));
+
+        assert.containsOnce(target, ".o_field_many2many_tags .badge");
+    });
+
+    QUnit.test("navigation in tags (mode 'readonly')", async function (assert) {
+        // keep a single line with 2 badges
+        serverData.models.partner.records = serverData.models.partner.records.slice(0, 1);
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="timmy" widget="many2many_tags"/>
+                </tree>`,
+        });
+
+        target.querySelector("tr.o_data_row input[type=checkbox]").focus();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tr.o_data_row input[type=checkbox]")
+        );
+
+        triggerHotkey("ArrowRight");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tr.o_data_row td[name=timmy]")
+        );
+    });
+
+    QUnit.test("navigation in tags (mode 'edit')", async function (assert) {
+        // keep a single line with 2 badges
+        serverData.models.partner.records = serverData.models.partner.records.slice(0, 1);
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="timmy" widget="many2many_tags"/>
+                </tree>`,
+        });
+
+        const row = target.querySelector("tr.o_data_row");
+        const m2mTagsCell = row.querySelector(".o_many2many_tags_cell");
+
+        await click(m2mTagsCell);
+
+        assert.containsN(row, ".o_field_many2many_tags .badge", 2);
+
+        assert.strictEqual(
+            document.activeElement,
+            row.querySelector("[name=timmy] .o-autocomplete--input")
+        );
+
+        // press left to focus the rightmost facet
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(
+            document.activeElement,
+            row.querySelector("[name=timmy] .badge:nth-child(2)")
+        );
+
+        // press left to focus the leftmost facet
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(
+            document.activeElement,
+            row.querySelector("[name=timmy] .badge:nth-child(1)")
+        );
+
+        // press left to focus the input
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(
+            document.activeElement,
+            row.querySelector("[name=timmy] .o-autocomplete--input")
+        );
+        // press left to focus the leftmost facet
+        triggerHotkey("ArrowRight");
+
+        assert.strictEqual(
+            document.activeElement,
+            row.querySelector("[name=timmy] .badge:nth-child(1)")
+        );
+        assert.containsN(row, ".o_field_many2many_tags .badge", 2);
+        assert.deepEqual(
+            [...row.querySelectorAll(".o_field_many2many_tags .badge")].map((el) => el.innerText),
+            ["gold", "silver"]
+        );
+
+        triggerHotkey("BackSpace");
+        await nextTick();
+
+        assert.containsOnce(row, ".o_field_many2many_tags .badge");
+        assert.deepEqual(
+            [...row.querySelectorAll(".o_field_many2many_tags .badge")].map((el) => el.innerText),
+            ["silver"]
+        );
+        assert.containsOnce(row, ".o-autocomplete--input");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
new file mode 100644
index 00000000000..57eab4a0de8
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2one_avatar_field_tests.js
@@ -0,0 +1,227 @@
+/** @odoo-module **/
+
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { browser } from "@web/core/browser/browser";
+import {
+    click,
+    clickEdit,
+    clickSave,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    patchWithCleanup,
+    selectDropdownItem,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: { string: "int_field", type: "integer" },
+                        user_id: { string: "User", type: "many2one", relation: "user" },
+                    },
+                    records: [
+                        { id: 1, user_id: 17 },
+                        { id: 2, user_id: 19 },
+                        { id: 3, user_id: 17 },
+                        { id: 4, user_id: false },
+                    ],
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+
+        patchWithCleanup(AutoComplete, {
+            delay: 0,
+        });
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+    });
+
+    QUnit.module("Many2OneAvatar");
+
+    QUnit.test("basic form view flow", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="user_id" widget="many2one_avatar"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=user_id]").textContent.trim(),
+            "Aline"
+        );
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/17/avatar_128"]'
+        );
+
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_input_dropdown");
+        assert.strictEqual(target.querySelector(".o_input_dropdown input").value, "Aline");
+        assert.containsOnce(target, ".o_external_button");
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/17/avatar_128"]'
+        );
+
+        await selectDropdownItem(target, "user_id", "Christine");
+
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/19/avatar_128"]'
+        );
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=user_id]").textContent.trim(),
+            "Christine"
+        );
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/19/avatar_128"]'
+        );
+
+        await clickEdit(target);
+        await editInput(target, '.o_field_widget[name="user_id"] input', "");
+
+        assert.containsNone(target, ".o_m2o_avatar > img");
+        assert.containsOnce(target, ".o_m2o_avatar > .o_m2o_avatar_empty");
+        await clickSave(target);
+
+        assert.containsNone(target, ".o_m2o_avatar > img");
+        assert.containsNone(target, ".o_m2o_avatar > .o_m2o_avatar_empty");
+    });
+
+    QUnit.test("onchange in form view flow", async function (assert) {
+        serverData.models.partner.onchanges = {
+            int_field: function (obj) {
+                if (obj.int_field === 1) {
+                    obj.user_id = [19, "Christine"];
+                } else if (obj.int_field === 2) {
+                    obj.user_id = false;
+                } else {
+                    obj.user_id = [17, "Aline"]; // default value
+                }
+            },
+        };
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="int_field"/>
+                    <field name="user_id" widget="many2one_avatar" readonly="1"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=user_id]").textContent.trim(),
+            "Aline"
+        );
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/17/avatar_128"]'
+        );
+
+        await editInput(target, "div[name=int_field] input", 1);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=user_id]").textContent.trim(),
+            "Christine"
+        );
+        assert.containsOnce(
+            target,
+            '.o_m2o_avatar > img[data-src="/web/image/user/19/avatar_128"]'
+        );
+
+        await editInput(target, "div[name=int_field] input", 2);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=user_id]").textContent.trim(),
+            ""
+        );
+        assert.containsNone(target, ".o_m2o_avatar > img");
+    });
+
+    QUnit.test("basic list view flow", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: '<tree><field name="user_id" widget="many2one_avatar"/></tree>',
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell .o_form_uri span")),
+            ["Aline", "Christine", "Aline", ""]
+        );
+        const imgs = target.querySelectorAll(".o_m2o_avatar > img");
+        assert.strictEqual(imgs[0].dataset.src, "/web/image/user/17/avatar_128");
+        assert.strictEqual(imgs[1].dataset.src, "/web/image/user/19/avatar_128");
+        assert.strictEqual(imgs[2].dataset.src, "/web/image/user/17/avatar_128");
+    });
+
+    QUnit.test("basic flow in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: '<tree editable="top"><field name="user_id" widget="many2one_avatar"/></tree>',
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell .o_form_uri span")),
+            ["Aline", "Christine", "Aline", ""]
+        );
+
+        const imgs = target.querySelectorAll(".o_m2o_avatar > img");
+        assert.strictEqual(imgs[0].dataset.src, "/web/image/user/17/avatar_128");
+        assert.strictEqual(imgs[1].dataset.src, "/web/image/user/19/avatar_128");
+        assert.strictEqual(imgs[2].dataset.src, "/web/image/user/17/avatar_128");
+
+        await click(target.querySelectorAll(".o_data_row .o_data_cell")[0]);
+
+        assert.strictEqual(
+            target.querySelector(".o_m2o_avatar > img").dataset.src,
+            "/web/image/user/17/avatar_128"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/many2one_field_tests.js b/addons/web/static/tests/views/fields/many2one_field_tests.js
new file mode 100644
index 00000000000..eda9e043815
--- /dev/null
+++ b/addons/web/static/tests/views/fields/many2one_field_tests.js
@@ -0,0 +1,4037 @@
+/** @odoo-module **/
+
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+import { Field } from "@web/views/fields/field";
+import { Record } from "@web/views/record";
+import {
+    click,
+    clickDiscard,
+    clickDropdown,
+    clickEdit,
+    clickOpenedDropdownItem,
+    clickSave,
+    dragAndDrop,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    makeDeferred,
+    mount,
+    nextTick,
+    patchWithCleanup,
+    selectDropdownItem,
+    triggerEvent,
+    triggerEvents,
+    triggerHotkey,
+    triggerScroll,
+} from "@web/../tests/helpers/utils";
+import {
+    applyFilter,
+    editSearch,
+    toggleAddCustomFilter,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenuItem,
+    validateSearch,
+} from "@web/../tests/search/helpers";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        turtles: {
+                            string: "one2many turtle field",
+                            type: "one2many",
+                            relation: "turtle",
+                            relation_field: "turtle_trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        date: { string: "Some Date", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        user_id: { string: "User", type: "many2one", relation: "user" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            p: [],
+                            turtles: [2],
+                            timmy: [],
+                            trululu: 4,
+                            user_id: 17,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            p: [],
+                            timmy: [],
+                            trululu: 1,
+                            product_id: 37,
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                            user_id: 17,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            bar: false,
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        display_name: { string: "Partner Type", type: "char" },
+                        name: { string: "Partner Type", type: "char" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold" },
+                        { id: 14, display_name: "silver" },
+                    ],
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        turtle_foo: { string: "Foo", type: "char" },
+                        turtle_bar: { string: "Bar", type: "boolean", default: true },
+                        turtle_trululu: {
+                            string: "Trululu",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            required: true,
+                        },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "leonardo",
+                            turtle_bar: true,
+                            turtle_foo: "yop",
+                            partner_ids: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "donatello",
+                            turtle_bar: true,
+                            turtle_foo: "blip",
+                            partner_ids: [2, 4],
+                        },
+                        {
+                            id: 3,
+                            display_name: "raphael",
+                            product_id: 37,
+                            turtle_bar: false,
+                            turtle_foo: "kawa",
+                            partner_ids: [],
+                        },
+                    ],
+                    onchanges: {},
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            string: "one2many partners field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                            partner_ids: [1, 2],
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+
+        patchWithCleanup(AutoComplete, {
+            delay: 0,
+        });
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+    });
+
+    QUnit.module("Many2oneField");
+
+    QUnit.test("many2ones in form views", async function (assert) {
+        assert.expect(5);
+
+        function createMockActionService(assert) {
+            return {
+                dependencies: [],
+                start() {
+                    return {
+                        doAction(params) {
+                            assert.strictEqual(
+                                params.res_id,
+                                17,
+                                "should do a do_action with correct parameters"
+                            );
+                        },
+                        loadState() {},
+                    };
+                },
+            };
+        }
+        registry
+            .category("services")
+            .add("action", createMockActionService(assert), { force: true });
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" string="custom label" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "get_formview_action") {
+                    assert.deepEqual(
+                        args[0],
+                        [4],
+                        "should call get_formview_action with correct id"
+                    );
+                    return Promise.resolve({
+                        res_id: 17,
+                        type: "ir.actions.act_window",
+                        target: "current",
+                        res_model: "res.partner",
+                    });
+                }
+                if (method === "get_formview_id") {
+                    assert.deepEqual(args[0], [4], "should call get_formview_id with correct id");
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        assert.containsOnce(target, "a.o_form_uri:contains(aaa)", "should contain a link");
+        await click(target, "a.o_form_uri");
+
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_external_button");
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent.trim(),
+            "Open: custom label",
+            "dialog title should display the custom string label"
+        );
+
+        // TODO: test that we can edit the record in the dialog, and that
+        // the value is correctly updated on close
+    });
+
+    QUnit.test("editing a many2one, but not changing anything", async function (assert) {
+        assert.expect(2);
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            resIds: [1, 2],
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="trululu" />
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "get_formview_id") {
+                    assert.deepEqual(args[0], [4], "should call get_formview_id with correct id");
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        // click on the external button (should do an RPC)
+        await click(target, ".o_external_button");
+        // save and close modal
+        await clickSave(target.querySelector(".modal"));
+        // save form
+        await clickSave(target);
+        // click next on pager
+        await click(target, ".o_pager .o_pager_next");
+
+        // this checks that the view did not ask for confirmation that the
+        // record is dirty
+        assert.strictEqual(
+            target.querySelector(".o_pager").textContent.trim(),
+            "2 / 2",
+            "pager should be at second page"
+        );
+    });
+
+    QUnit.test("context in many2one and default get", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.fields.int_field.default = 14;
+        serverData.models.partner.fields.trululu.default = 2;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field" />
+                    <field name="trululu" context="{'blip': int_field}" options="{'always_reload': 1}" />
+                </form>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "name_get") {
+                    assert.strictEqual(
+                        kwargs.context.blip,
+                        14,
+                        "context should have been properly sent to the nameget rpc"
+                    );
+                }
+            },
+        });
+    });
+
+    QUnit.test(
+        "editing a many2one (with form view opened with external button)",
+        async function (assert) {
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <field name="foo" />
+                    </form>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                resIds: [1, 2],
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="trululu" />
+                        </sheet>
+                    </form>`,
+                mockRPC(route, { method }) {
+                    if (method === "get_formview_id") {
+                        return Promise.resolve(false);
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            // click on the external button (should do an RPC)
+            await click(target, ".o_external_button");
+
+            const input = target.querySelector(".modal .o_field_widget[name='foo'] input");
+            input.value = "brandon";
+            await triggerEvent(input, null, "change");
+
+            // save and close modal
+            await clickSave(target.querySelector(".modal"));
+            // save form
+            await click(target, ".o_form_button_save");
+            // click next on pager
+            await click(target, ".o_pager .o_pager_next");
+
+            // this checks that the view did not ask for confirmation that the
+            // record is dirty
+            assert.strictEqual(
+                target.querySelector(".o_pager").textContent.trim(),
+                "2 / 2",
+                "pager should be at second page"
+            );
+        }
+    );
+
+    QUnit.test("many2ones in form views with show_address", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" context="{'show_address': 1}" options="{'always_reload': 1}" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "name_get" && kwargs.context.show_address) {
+                    return [[4, "aaa\nStreet\nCity ZIP"]];
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector("a.o_form_uri").innerHTML,
+            "<span>aaa</span><br><span>Street</span><br><span>City ZIP</span>",
+            "input should have a multi-line content in readonly due to show_address"
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(target.querySelector("input.o_input").value, "aaa");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one_extra").innerHTML,
+            "<span>Street</span><br><span>City ZIP</span>"
+        );
+        assert.containsOnce(
+            target,
+            "button.o_external_button",
+            "should have an open record button"
+        );
+    });
+
+    QUnit.test("many2one show_address in edit", async function (assert) {
+        const namegets = {
+            1: "first record\nFirst\nRecord",
+            2: "second record\nSecond\nRecord",
+            4: "aaa\nAAA\nRecord",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" context="{'show_address': 1}" options="{'always_reload': 1}"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, kwargs, method }) {
+                if (method === "name_get" && kwargs.context.show_address) {
+                    return args.map((id) => [id, namegets[id]]);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+        const input = target.querySelector(".o_field_widget input");
+
+        assert.strictEqual(input.value, "aaa");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one_extra").innerHTML,
+            "<span>AAA</span><br><span>Record</span>"
+        );
+
+        await editInput(input, null, "first record");
+        await click(target.querySelector(".dropdown-menu li"));
+
+        assert.strictEqual(input.value, "first record");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one_extra").innerHTML,
+            "<span>First</span><br><span>Record</span>"
+        );
+
+        await editInput(input, null, "second record");
+        await click(target.querySelector(".dropdown-menu li"));
+
+        assert.strictEqual(input.value, "second record");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one_extra").innerHTML,
+            "<span>Second</span><br><span>Record</span>"
+        );
+    });
+
+    QUnit.test(
+        "show_address works in a view embedded in a view of another type",
+        async function (assert) {
+            serverData.models.turtle.records[1].turtle_trululu = 2;
+            serverData.views = {
+                "turtle,false,form": `
+                    <form>
+                        <field name="display_name" />
+                        <field name="turtle_trululu" context="{'show_address': 1}" options="{'always_reload': 1}" />
+                    </form>`,
+                "turtle,false,list": `
+                    <tree>
+                        <field name="display_name" />
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <field name="display_name" />
+                        <field name="turtles" />
+                    </form>`,
+                mockRPC(route, { kwargs, method, model }) {
+                    if (method === "name_get" && kwargs.context.show_address) {
+                        return [[2, "second record\nrue morgue\nparis 75013"]];
+                    }
+                },
+            });
+            // click the turtle field, opens a modal with the turtle form view
+            await click(target, ".o_data_row td.o_data_cell");
+
+            assert.strictEqual(
+                target.querySelector('[name="turtle_trululu"]').textContent,
+                "second recordrue morgueparis 75013",
+                "The partner's address should be displayed"
+            );
+        }
+    );
+
+    QUnit.test(
+        "many2one data is reloaded if there is a context to take into account",
+        async function (assert) {
+            serverData.models.turtle.records[1].turtle_trululu = 2;
+            serverData.views = {
+                "turtle,false,form": `
+                    <form>
+                        <field name="display_name" />
+                        <field name="turtle_trululu" context="{'show_address': 1}" options="{'always_reload': 1}" />
+                    </form>`,
+                "turtle,false,list": `
+                    <tree>
+                        <field name="display_name" />
+                        <field name="turtle_trululu" />
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <field name="display_name" />
+                        <field name="turtles" />
+                    </form>`,
+                mockRPC(route, { kwargs, method, model }) {
+                    if (method === "name_get" && kwargs.context.show_address) {
+                        return [[2, "second record\nrue morgue\nparis 75013"]];
+                    }
+                },
+            });
+            // click the turtle field, opens a modal with the turtle form view
+            await click(target.querySelector(".o_data_row td.o_data_cell"));
+
+            assert.strictEqual(
+                target.querySelector('.modal [name="turtle_trululu"]').textContent,
+                "second recordrue morgueparis 75013",
+                "The partner's address should be displayed"
+            );
+        }
+    );
+
+    QUnit.test("many2ones in form views with search more", async function (assert) {
+        assert.expect(3);
+
+        for (let i = 5; i < 11; i++) {
+            serverData.models.partner.records.push({ id: i, display_name: `Partner ${i}` });
+        }
+        serverData.models.partner.fields.datetime.searchable = true;
+        serverData.views = {
+            "partner,false,search": `
+                <search>
+                    <field name="datetime" />
+                </search>`,
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name" />
+                </tree>`,
+        };
+
+        // add custom filter needs this
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        await selectDropdownItem(target, "trululu", "Search More...");
+
+        assert.strictEqual($("tr.o_data_row").length, 9, "should display 9 records");
+
+        const modal = target.querySelector(".modal");
+
+        await toggleFilterMenu(modal);
+        await toggleAddCustomFilter(modal);
+        assert.strictEqual(
+            modal.querySelector(".o_generator_menu_field").value,
+            "datetime",
+            "datetime field should be selected"
+        );
+        await applyFilter(modal);
+
+        assert.strictEqual($("tr.o_data_row").length, 0, "should display 0 records");
+    });
+
+    QUnit.test(
+        "onchanges on many2ones trigger when editing record in form view",
+        async function (assert) {
+            assert.expect(11);
+
+            serverData.models.partner.onchanges.user_id = function () {};
+            serverData.models.user.fields.other_field = { string: "Other Field", type: "char" };
+            serverData.views = {
+                "user,false,form": `
+                    <form>
+                        <field name="other_field" />
+                    </form>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="user_id" />
+                            </group>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, { args, method }) {
+                    assert.step(method);
+                    if (method === "get_formview_id") {
+                        return Promise.resolve(false);
+                    }
+                    if (method === "onchange") {
+                        assert.strictEqual(
+                            args[1].user_id,
+                            17,
+                            "onchange is triggered with correct user_id"
+                        );
+                    }
+                },
+            });
+
+            // open the many2one in form view and change something
+            await click(target, ".o_form_button_edit");
+            await click(target, ".o_external_button");
+            await editInput(
+                target,
+                ".modal-body .o_field_widget[name='other_field'] input",
+                "wood"
+            );
+
+            // save the modal and make sure an onchange is triggered
+            await clickSave(target.querySelector(".modal"));
+            assert.verifySteps([
+                "get_views",
+                "read",
+                "get_formview_id",
+                "get_views",
+                "read",
+                "write",
+                "read",
+                "onchange",
+            ]);
+
+            // save the main record, and check that no extra rpcs are done (record
+            // is not dirty, only a related record was modified)
+            await click(target, ".o_form_button_save");
+            assert.verifySteps([]);
+        }
+    );
+
+    QUnit.test("many2one doesn't trigger field_change when being emptied", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="trululu"/>
+                </tree>`,
+        });
+
+        // Select two records
+        await click(target.querySelectorAll(".o_data_row")[0], ".o_list_record_selector input");
+        await click(target.querySelectorAll(".o_data_row")[1], ".o_list_record_selector input");
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "");
+        await triggerEvent(target, ".o_field_widget[name=trululu] input", "blur");
+
+        assert.containsNone(target, ".modal", "No save should be triggered when removing value");
+
+        await click(target.querySelector(".o_field_widget[name=trululu] input"));
+        await click(target.querySelector(".o_field_widget[name=trululu] .ui-menu-item"));
+
+        assert.containsOnce(target, ".modal", "Saving should be triggered when selecting a value");
+        await click(target, ".modal .btn-primary");
+    });
+
+    QUnit.test("focus tracking on a many2one in a list", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="foo" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="trululu"/>
+                </tree>`,
+        });
+
+        // Select two records
+        await click(target.querySelectorAll(".o_data_row")[0], ".o_list_record_selector input");
+        await click(target.querySelectorAll(".o_data_row")[1], ".o_list_record_selector input");
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        const input = target.querySelector(".o_data_row .o_data_cell input");
+        assert.strictEqual(document.activeElement, input, "Input should be focused when activated");
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "ABC");
+        await click(target, ".o_field_widget[name=trululu] .o_m2o_dropdown_option_create_edit");
+
+        // At this point, if the focus is correctly registered by the m2o, there
+        // should be only one modal (the "Create" one) and none for saving changes.
+        assert.containsOnce(target, ".modal", "There should be only one modal");
+
+        await clickDiscard(target.querySelector(".modal"));
+
+        assert.strictEqual(
+            document.activeElement,
+            input,
+            "Input should be focused after dialog closes"
+        );
+        assert.strictEqual(input.value, "", "Input should be empty after discard");
+    });
+
+    QUnit.test('many2one fields with option "no_open"', async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" options="{'no_open': 1}" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name='trululu'] > span",
+            "should be displayed inside a span (sanity check)"
+        );
+        assert.containsNone(target, "span.o_form_uri", "should not have an anchor");
+
+        await click(target, ".o_form_button_edit");
+        assert.containsNone(
+            target,
+            ".o_field_widget[name='trululu'] .o_external_button",
+            "should not have the button to open the record"
+        );
+    });
+
+    QUnit.test("empty many2one field", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_field_many2one input");
+        assert.containsNone(
+            target,
+            ".dropdown-menu li.o_m2o_dropdown_option",
+            "autocomplete should not contains dropdown options"
+        );
+        assert.containsOnce(
+            target,
+            ".dropdown-menu li.o_m2o_start_typing",
+            "autocomplete should contains start typing option"
+        );
+
+        const input = target.querySelector(".o_field_many2one[name='trululu'] input");
+        input.value = "abc";
+        await triggerEvents(input, null, ["input", "change"]);
+
+        assert.containsN(
+            target,
+            ".dropdown-menu li.o_m2o_dropdown_option",
+            2,
+            "autocomplete should contains 2 dropdown options"
+        );
+        assert.containsNone(
+            target,
+            ".dropdown-menu li.o_m2o_start_typing",
+            "autocomplete should not contains start typing option"
+        );
+    });
+
+    QUnit.test("empty many2one field with node options", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" options="{'no_create_edit': 1}" />
+                            <field name="product_id" options="{'no_create_edit': 1, 'no_quick_create': 1}" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await click(target, ".o_field_many2one[name='trululu'] input");
+        assert.containsOnce(
+            target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu"),
+            "li.o_m2o_start_typing",
+            "autocomplete should contains start typing option"
+        );
+
+        await click(target, ".o_field_many2one[name='product_id'] input");
+        assert.containsNone(
+            target.querySelector(".o_field_many2one[name='product_id'] .dropdown-menu"),
+            "li.o_m2o_start_typing",
+            "autocomplete should contains start typing option"
+        );
+    });
+
+    QUnit.test(
+        "empty many2one should not be considered modified on onchange if still empty",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                foo: function () {},
+            };
+
+            assert.strictEqual(
+                serverData.models.partner.records[2].trululu,
+                undefined,
+                "no value must be provided for trululu to make sure the test works as expected"
+            );
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 4, // trululu m2o must be empty
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="trululu" />
+                                <field name="foo" /> <!-- onchange will be triggered on this field -->
+                            </group>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, { method, args }) {
+                    if (method === "onchange") {
+                        assert.step("onchange");
+                        return Promise.resolve({
+                            value: {
+                                trululu: false,
+                            },
+                        });
+                    } else if (method === "write") {
+                        assert.step("write");
+                        // non modified trululu should not be sent
+                        // as write value
+                        assert.deepEqual(args[1], { foo: "3" });
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            // trigger the onchange
+            await editInput(target, ".o_field_widget[name='foo'] input", "3");
+            assert.verifySteps(["onchange"]);
+
+            // save
+            await click(target, ".o_form_button_save");
+            assert.verifySteps(["write"]);
+        }
+    );
+
+    QUnit.test("many2one in edit mode", async function (assert) {
+        assert.expect(17);
+
+        // create 10 partners to have the 'Search More' option in the autocomplete dropdown
+        for (let i = 0; i < 10; i++) {
+            const id = 20 + i;
+            serverData.models.partner.records.push({ id, display_name: `Partner ${id}` });
+        }
+
+        serverData.views = {
+            "partner,false,list": `
+                <list>
+                    <field name="display_name" />
+                </list>`,
+            "partner,false,search": `
+                <search>
+                    <field name="display_name" string="Name" />
+                </search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(args[1].trululu, 20, "should write the correct id");
+                }
+            },
+        });
+
+        // the SelectCreateDialog requests the session, so intercept its custom
+        // event to specify a fake session to prevent it from crashing
+        patchWithCleanup(session.user_context, {});
+
+        await click(target, ".o_form_button_edit");
+        await clickDropdown(target, "trululu");
+
+        let dropdown = target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu");
+        assert.isVisible(
+            dropdown,
+            "clicking on the m2o input should open the dropdown if it is not open yet"
+        );
+        assert.containsN(
+            dropdown,
+            "li:not(.o_m2o_dropdown_option)",
+            8,
+            "autocomplete should contains 8 suggestions"
+        );
+        assert.containsOnce(
+            dropdown,
+            "li.o_m2o_dropdown_option",
+            'autocomplete should contain "Search More"'
+        );
+        assert.containsNone(
+            dropdown,
+            "li.o_m2o_start_typing",
+            "autocomplete should not contains start typing option if value is available"
+        );
+
+        await click(target.querySelector(".o_field_many2one[name='trululu'] input"));
+        assert.containsNone(
+            target,
+            ".o_field_many2one[name='trululu'] .dropdown-menu",
+            "clicking on the m2o input should close the dropdown if it is open"
+        );
+
+        // change the value of the m2o with a suggestion of the dropdown
+        await selectDropdownItem(target, "trululu", "first record");
+        dropdown = target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu");
+        assert.isNotVisible(dropdown, "clicking on a value should close the dropdown");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "first record",
+            "value of the m2o should have been correctly updated"
+        );
+
+        // change the value of the m2o with a record in the 'Search More' modal
+        await clickDropdown(target, "trululu");
+        // click on 'Search More' (mouseenter required by ui-autocomplete)
+        dropdown = target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu");
+        await click(dropdown.querySelector(".o_m2o_dropdown_option_search_more"));
+        assert.containsOnce(
+            target,
+            ".modal .o_list_view",
+            "should have opened a list view in a modal"
+        );
+        assert.containsNone(
+            target,
+            ".modal .o_list_view .o_list_record_selector",
+            "there should be no record selector in the list view"
+        );
+        assert.containsNone(
+            target,
+            ".modal .modal-footer .o_select_button",
+            "there should be no 'Select' button in the footer"
+        );
+        assert.ok(
+            target.querySelectorAll(".modal tbody tr").length > 10,
+            "list should contain more than 10 records"
+        );
+        const modal = target.querySelector(".modal");
+        await editInput(modal, ".o_searchview_input", "P");
+        await triggerEvent(modal, ".o_searchview_input", "keydown", { key: "Enter" });
+        assert.containsN(
+            target,
+            ".modal tbody tr",
+            10,
+            "list should be restricted to records containing a P (10 records)"
+        );
+        // choose a record
+        await click(modal.querySelector(".o_data_cell[data-tooltip='Partner 20']"));
+        assert.containsNone(target, ".modal", "should have closed the modal");
+        dropdown = target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu");
+        assert.isNotVisible(dropdown, "should have closed the dropdown");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "Partner 20",
+            "value of the m2o should have been correctly updated"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector("a.o_form_uri").textContent,
+            "Partner 20",
+            "should display correct value after save"
+        );
+    });
+
+    QUnit.test("many2one in non edit mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu" />
+                </form>`,
+        });
+
+        assert.containsOnce(target, "a.o_form_uri", "should display 1 m2o link in form");
+        assert.hasAttrValue(
+            target.querySelector("a.o_form_uri"),
+            "href",
+            "#id=4&model=partner",
+            "href should contain id and model"
+        );
+
+        // Remove value from many2one and then save, there should not have href with id and model on m2o anchor
+        await click(target, ".o_form_button_edit");
+        await editInput(target, ".o_field_many2one input", "");
+
+        await click(target, ".o_form_button_save");
+        assert.hasAttrValue(
+            target.querySelector("a.o_form_uri"),
+            "href",
+            "#",
+            "href should have #"
+        );
+    });
+
+    QUnit.test("many2one with co-model whose name field is a many2one", async function (assert) {
+        serverData.models.product.fields.name = {
+            string: "User Name",
+            type: "many2one",
+            relation: "user",
+        };
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="name" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_id" />
+                </form>`,
+        });
+
+        await editInput(target, "div[name=product_id] input", "ABC");
+        await click(target, "div[name=product_id] .o_m2o_dropdown_option_create_edit");
+        assert.containsOnce(target, ".modal .o_form_view");
+
+        // quick create 'new value'
+        await editInput(target, ".modal div[name=name] input", "new value");
+        await click(target.querySelector(".modal div[name=name] .o_m2o_dropdown_option"));
+        assert.strictEqual(target.querySelector(".modal div[name=name] input").value, "new value");
+
+        await clickSave(target.querySelector(".modal"));
+        assert.containsNone(target, ".modal .o_form_view");
+        assert.strictEqual(target.querySelector("div[name=product_id] input").value, "new value");
+    });
+
+    QUnit.test("many2one searches with correct value", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="trululu" />
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "name_search") {
+                    assert.step(`search: ${kwargs.name}`);
+                }
+            },
+        });
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "aaa",
+            "should be initially set to 'aaa'"
+        );
+
+        const input = target.querySelector(".o_field_many2one input");
+        await click(input);
+
+        // unset the many2one -> should search again with ''
+        input.value = "";
+        await triggerEvents(input, null, ["input", "change"]);
+
+        input.value = "p";
+        await triggerEvents(input, null, ["input", "change"]);
+
+        // close and re-open the dropdown -> should search with 'p' again
+        await click(input);
+        await click(input);
+
+        assert.verifySteps(["search: ", "search: ", "search: p", "search: p"]);
+    });
+
+    QUnit.test("many2one search with trailing and leading spaces", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu" />
+                </form>`,
+            mockRPC(route, { kwargs, method }) {
+                if (method === "name_search") {
+                    assert.step("search: " + kwargs.name);
+                }
+            },
+        });
+
+        const input = target.querySelector(".o_field_many2one[name='trululu'] input");
+        await click(input);
+
+        const dropdown = target.querySelector(".o_field_many2one[name='trululu'] .dropdown-menu");
+
+        assert.isVisible(dropdown);
+        assert.containsN(
+            dropdown,
+            "li:not(.o_m2o_dropdown_option)",
+            4,
+            "autocomplete should contains 4 suggestions"
+        );
+
+        // search with leading spaces
+        input.value = "   first";
+        await triggerEvents(input, null, ["input", "change"]);
+        assert.containsOnce(
+            dropdown,
+            "li:not(.o_m2o_dropdown_option)",
+            "autocomplete should contains 1 suggestion"
+        );
+
+        // search with trailing spaces
+        input.value = "first  ";
+        await triggerEvents(input, null, ["input", "change"]);
+        assert.containsOnce(
+            dropdown,
+            "li:not(.o_m2o_dropdown_option)",
+            "autocomplete should contains 1 suggestion"
+        );
+
+        // search with leading and trailing spaces
+        input.value = "   first   ";
+        await triggerEvents(input, null, ["input", "change"]);
+        assert.containsOnce(
+            dropdown,
+            "li:not(.o_m2o_dropdown_option)",
+            "autocomplete should contains 1 suggestion"
+        );
+
+        assert.verifySteps(["search: ", "search: first", "search: first", "search: first"]);
+    });
+
+    QUnit.test("many2one field with option always_reload", async function (assert) {
+        let count = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 2,
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu" options="{'always_reload': 1}" />
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "name_get") {
+                    count++;
+                    return Promise.resolve([[1, "first record\nand some address"]]);
+                }
+            },
+        });
+
+        assert.strictEqual(count, 1, "an extra name_get should have been done");
+        assert.ok(
+            target.querySelector("a.o_form_uri").textContent.includes("and some address"),
+            "should display additional result"
+        );
+
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='trululu'] input").value,
+            "first record",
+            "actual field value should be displayed to be edited"
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.ok(
+            target.querySelector("a.o_form_uri").textContent.includes("and some address"),
+            "should still display additional result"
+        );
+    });
+
+    QUnit.test("many2one field and list navigation", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="trululu"/>
+                </tree>`,
+        });
+
+        // edit first input, to trigger autocomplete
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_data_cell input", "");
+
+        // press keydown, to select first choice
+        const input = target.querySelector(".o_data_cell input");
+        await triggerEvent(input, null, "keydown", { key: "arrowdown" });
+
+        // we now check that the dropdown is open (and that the focus did not go
+        // to the next line)
+        assert.containsOnce(
+            target.querySelector(".o_field_many2one"),
+            ".o-autocomplete.dropdown",
+            "autocomplete dropdown should be visible"
+        );
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "first data row should still be selected"
+        );
+        assert.doesNotHaveClass(
+            target.querySelectorAll(".o_data_row")[1],
+            "o_selected_row",
+            "second data row should not be selected"
+        );
+    });
+
+    QUnit.test("standalone many2one field", async function (assert) {
+        class Comp extends owl.Component {
+            setup() {
+                this.fields = {
+                    partner_id: {
+                        name: "partner_id",
+                        type: "many2one",
+                        relation: "partner",
+                    },
+                };
+                this.values = {
+                    partner_id: [1, "first partner"],
+                };
+            }
+        }
+        Comp.components = { Record, Field };
+        Comp.template = owl.xml`
+            <Record resModel="'coucou'" fields="fields" fieldNames="['partner_id']" initialValues="values" mode="'edit'" t-slot-scope="scope">
+                <Field name="'partner_id'" record="scope.record" canOpen="false" />
+            </Record>
+        `;
+
+        await mount(Comp, target, {
+            env: await makeTestEnv({
+                serverData,
+                mockRPC(route, { method }) {
+                    assert.step(method);
+                },
+            }),
+        });
+
+        await editInput(target, ".o_field_widget input", "xyzzrot");
+        await click(target.querySelector(".o_field_widget .ui-menu-item"));
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_external_button",
+            "should not have the button to open the record"
+        );
+        assert.verifySteps(["name_search", "name_create"]);
+    });
+
+    QUnit.test("form: quick create then save directly", async function (assert) {
+        assert.expect(5);
+
+        const def = makeDeferred();
+        const newRecordId = 5; // with the current records, the created record will be assigned id 5
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+            async mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    assert.step("name_create");
+                    await def;
+                }
+                if (method === "create") {
+                    assert.step("create");
+                    assert.strictEqual(
+                        args[0].trululu,
+                        newRecordId,
+                        "should create with the correct m2o id"
+                    );
+                }
+            },
+        });
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "b");
+        await click(target.querySelector(".ui-menu-item"));
+        await click(target, ".o_form_button_save");
+
+        assert.verifySteps(
+            ["name_create"],
+            "should wait for the name_create before creating the record"
+        );
+
+        def.resolve();
+        await nextTick();
+
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test(
+        "form: quick create for field that returns false after name_create call",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="trululu" /></form>',
+                mockRPC(route, { method }) {
+                    if (method === "name_create") {
+                        assert.step("name_create");
+                        // Resolve the name_create call to false. This is possible if
+                        // _rec_name for the model of the field is unassigned.
+                        return Promise.resolve(false);
+                    }
+                },
+            });
+
+            await editInput(target, ".o_field_widget[name=trululu] input", "beam");
+            await click(target.querySelector(".ui-menu-item"));
+            assert.verifySteps(["name_create"], "attempt to name_create");
+            assert.strictEqual(
+                target.querySelector(".o_input_dropdown input").value,
+                "",
+                "the input should contain no text after search and click"
+            );
+        }
+    );
+
+    QUnit.test("list: quick create then save directly", async function (assert) {
+        const def = makeDeferred();
+        const newRecordId = 5;
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="trululu" />
+                </tree>`,
+            async mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    assert.step("name_create");
+                    await def;
+                }
+                if (method === "create") {
+                    assert.step("create");
+                    assert.strictEqual(args[0].trululu, newRecordId);
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_data_row", 3);
+
+        await click(target, ".o_list_button_add");
+
+        assert.containsN(target, ".o_data_row", 4);
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "b");
+        await click(target.querySelector(".ui-menu-item"));
+
+        await clickSave(target);
+
+        assert.verifySteps(
+            ["name_create"],
+            "should wait for the name_create before creating the record"
+        );
+        assert.containsN(target, ".o_data_row", 4);
+
+        def.resolve();
+        await nextTick();
+
+        assert.verifySteps(["create"]);
+        assert.containsN(target, ".o_data_row", 4);
+        assert.strictEqual(target.querySelector(".o_data_row .o_data_cell").textContent, "b");
+    });
+
+    QUnit.test("list in form: quick create then save directly", async function (assert) {
+        assert.expect(6);
+
+        const def = makeDeferred();
+        const newRecordId = 5; // with the current records, the created record will be assigned id 5
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="trululu" />
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            async mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    assert.step("name_create");
+                    await def;
+                }
+                if (method === "create") {
+                    assert.step("create");
+                    assert.strictEqual(
+                        args[0].p[0][2].trululu,
+                        newRecordId,
+                        "should create with the correct m2o id"
+                    );
+                }
+            },
+        });
+
+        await click(target, ".o_field_x2many_list_row_add a");
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "b");
+        await click(target.querySelector(".ui-menu-item"));
+
+        await click(target, ".o_form_button_save");
+
+        assert.verifySteps(
+            ["name_create"],
+            "should wait for the name_create before creating the record"
+        );
+
+        await def.resolve();
+        await nextTick();
+
+        assert.verifySteps(["create"]);
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell").textContent,
+            "b",
+            "first row should have the correct m2o value"
+        );
+    });
+
+    QUnit.test("name_create in form dialog", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <group>
+                        <field name="p">
+                            <tree>
+                                <field name="bar"/>
+                            </tree>
+                            <form>
+                                <field name="product_id"/>
+                            </form>
+                        </field>
+                    </group>
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "name_create") {
+                    assert.step("name_create");
+                }
+            },
+        });
+
+        await click(target, ".o_field_x2many_list_row_add a");
+
+        await editInput(target, ".modal .o_field_widget[name=product_id] input", "new record");
+        await click(target.querySelector(".modal .o_field_widget[name=product_id] .ui-menu-item"));
+
+        assert.verifySteps(["name_create"]);
+    });
+
+    QUnit.test("list in form: quick create then add a new line directly", async function (assert) {
+        // required many2one inside a one2many list: directly after quick creating
+        // a new many2one value (before the name_create returns), click on add an item:
+        // at this moment, the many2one has still no value, and as it is required,
+        // the row is discarded if a saveLine is requested. However, it should
+        // wait for the name_create to return before trying to save the line.
+        assert.expect(8);
+
+        serverData.models.partner.onchanges = {
+            trululu() {},
+        };
+
+        const def = makeDeferred();
+        const newRecordId = 5; // with the current records, the created record will be assigned id 5
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="trululu" required="1" />
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            async mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    await def;
+                }
+                if (method === "create") {
+                    assert.deepEqual(args[0].p[0][2].trululu, newRecordId);
+                }
+            },
+        });
+
+        await click(target, ".o_field_x2many_list_row_add a");
+
+        await editInput(target, ".o_field_widget[name=trululu] input", "b");
+        await click(target.querySelector(".ui-menu-item"));
+
+        await click(target, ".o_field_x2many_list_row_add a");
+
+        assert.containsOnce(target, ".o_data_row", "there should still be only one row");
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "the row should still be in edition"
+        );
+
+        await def.resolve();
+        await nextTick();
+
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell").textContent,
+            "b",
+            "first row should have the correct m2o value"
+        );
+        assert.containsN(target, ".o_data_row", 2, "there should now be 2 rows");
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[1],
+            "o_selected_row",
+            "the second row should be in edition"
+        );
+
+        await clickSave(target);
+
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "there should be 1 row saved (the second one was empty and invalid)"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell").textContent,
+            "b",
+            "should have the correct m2o value"
+        );
+    });
+
+    QUnit.test("list in form: create with one2many with many2one", async function (assert) {
+        serverData.models.partner.fields.p.default = [
+            [0, 0, { display_name: "new record", p: [] }],
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                                <field name="trululu" />
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "name_get") {
+                    throw new Error("Nameget should not be called");
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector("td.o_data_cell").textContent,
+            "new record",
+            "should have created the new record in the o2m with the correct name"
+        );
+    });
+
+    QUnit.test(
+        "list in form: create with one2many with many2one (version 2)",
+        async function (assert) {
+            // This test simulates the exact same scenario as the previous one,
+            // except that the value for the many2one is explicitely set to false,
+            // which is stupid, but this happens, so we have to handle it
+            serverData.models.partner.fields.p.default = [
+                [0, 0, { display_name: "new record", trululu: false, p: [] }],
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="p">
+                                <tree editable="bottom">
+                                    <field name="display_name" />
+                                    <field name="trululu" />
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, { method }) {
+                    if (method === "name_get") {
+                        throw new Error("Nameget should not be called");
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell").textContent,
+                "new record",
+                "should have created the new record in the o2m with the correct name"
+            );
+        }
+    );
+
+    QUnit.test(
+        "item not dropped on discard with empty required field (default_get)",
+        async function (assert) {
+            // This test simulates discarding a record that has been created with
+            // one of its required field that is empty. When we discard the changes
+            // on this empty field, it should not assume that this record should be
+            // abandonned, since it has been added (even though it is a new record).
+            serverData.models.partner.fields.p.default = [
+                [0, 0, { display_name: "new record", trululu: false, p: [] }],
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="p">
+                                <tree editable="bottom">
+                                    <field name="display_name" />
+                                    <field name="trululu" required="1" />
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+
+            assert.containsOnce(
+                target,
+                "tr.o_data_row",
+                "should have created the new record in the o2m"
+            );
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell").textContent,
+                "new record",
+                "should have the correct displayed name"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[1].textContent,
+                "",
+                "should have empty string in the required field on this record"
+            );
+            // FIXME: I added the await here and 6 lines below
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            assert.hasClass(
+                target.querySelectorAll(".o_selected_row .o_data_cell")[1],
+                "o_required_modifier",
+                "should have a required field on this record"
+            );
+
+            // discard by clicking on body
+            await click(target);
+
+            assert.containsOnce(target, "tr.o_data_row", "should still have the record in the o2m");
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell").textContent,
+                "new record",
+                "should still have the correct displayed name"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[1].textContent,
+                "",
+                "should still have empty string in the required field on this record"
+            );
+
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            assert.hasClass(
+                target.querySelectorAll(".o_selected_row .o_data_cell")[1],
+                "o_required_modifier",
+                "should still have the required field on this record"
+            );
+        }
+    );
+
+    QUnit.test("list in form: name_get with unique ids (default_get)", async function (assert) {
+        serverData.models.partner.records[0].display_name = "MyTrululu";
+        serverData.models.partner.fields.p.default = [
+            [0, 0, { trululu: 1, p: [] }],
+            [0, 0, { trululu: 1, p: [] }],
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="trululu" />
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "name_get") {
+                    throw new Error("should not call name_get");
+                }
+            },
+        });
+
+        assert.strictEqual(
+            [...target.querySelectorAll("td.o_data_cell")].map((cell) => cell.textContent).join(""),
+            "MyTrululuMyTrululu",
+            "both records should have the correct display_name for trululu field"
+        );
+    });
+
+    QUnit.test(
+        "list in form: show name of many2one fields in multi-page (default_get)",
+        async function (assert) {
+            serverData.models.partner.fields.p.default = [
+                [0, 0, { display_name: "record1", trululu: 1, p: [] }],
+                [0, 0, { display_name: "record2", trululu: 2, p: [] }],
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="p">
+                                <tree editable="bottom" limit="1">
+                                    <field name="display_name" />
+                                    <field name="trululu" />
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+            });
+
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[0].textContent,
+                "record1",
+                "should show display_name of 1st record"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[1].textContent,
+                "first record",
+                "should show display_name of trululu of 1st record"
+            );
+
+            await click(target, "button.o_pager_next");
+
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[0].textContent,
+                "record2",
+                "should show display_name of 2nd record"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("td.o_data_cell")[1].textContent,
+                "second record",
+                "should show display_name of trululu of 2nd record"
+            );
+        }
+    );
+
+    QUnit.test(
+        "list in form: item not dropped on discard with empty required field (onchange in default_get)",
+        async function (assert) {
+            // variant of the test "list in form: discard newly added element with
+            // empty required field (default_get)", in which the `default_get`
+            // performs an `onchange` at the same time. This `onchange` may create
+            // some records, which should not be abandoned on discard, similarly
+            // to records created directly by `default_get`
+            serverData.models.partner.fields.product_id.default = 37;
+            serverData.models.partner.onchanges = {
+                product_id(obj) {
+                    if (obj.product_id === 37) {
+                        obj.p = [[0, 0, { display_name: "entry", trululu: false }]];
+                    }
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="product_id" />
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                                <field name="trululu" required="1" />
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            // check that there is a record in the editable list with empty string as required field
+            assert.containsOnce(target, ".o_data_row", "should have a row in the editable list");
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell").textContent,
+                "entry",
+                "should have the correct displayed name"
+            );
+            assert.containsOnce(
+                target,
+                "td.o_data_cell.o_required_modifier",
+                "should have a required field on this record"
+            );
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell.o_required_modifier").textContent,
+                "",
+                "should have empty string in the required field on this record"
+            );
+
+            // FIXME: shouldn't we wait for the clicks here??
+            // click on empty required field in editable list record
+            click(target.querySelector("td.o_data_cell.o_required_modifier"));
+            // click off so that the required field still stay empty
+            click(target);
+
+            // record should not be dropped
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "should not have dropped record in the editable list"
+            );
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell").textContent,
+                "entry",
+                "should still have the correct displayed name"
+            );
+            assert.strictEqual(
+                target.querySelector("td.o_data_cell.o_required_modifier").textContent,
+                "",
+                "should still have empty string in the required field"
+            );
+        }
+    );
+
+    QUnit.test(
+        "list in form: item not dropped on discard with empty required field (onchange on list after default_get)",
+        async function (assert) {
+            // discarding a record from an `onchange` in a `default_get` should not
+            // abandon the record. This should not be the case for following
+            // `onchange`, except if an onchange make some changes on the list:
+            // in particular, if an onchange make changes on the list such that
+            // a record is added, this record should not be dropped on discard
+            serverData.models.partner.onchanges = {
+                product_id(obj) {
+                    if (obj.product_id === 37) {
+                        obj.p = [[0, 0, { display_name: "entry", trululu: false }]];
+                    }
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="product_id" />
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                                <field name="trululu" required="1" />
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            // check no record in list
+            assert.containsNone(target, ".o_data_row", "should have no row in the editable list");
+
+            // select product_id to force on_change in editable list
+            await click(target, "div[name=product_id] input");
+            await click(target.querySelector(".ui-menu-item"));
+
+            // check that there is a record in the editable list with empty string as required field
+            assert.containsOnce(target, ".o_data_row");
+
+            assert.strictEqual(target.querySelector("td.o_data_cell").textContent, "entry");
+            assert.containsOnce(target, "td.o_required_modifier");
+            const requiredField = target.querySelector("td.o_required_modifier");
+            assert.strictEqual(requiredField.textContent, "");
+
+            // click on empty required field in editable list record
+            await click(requiredField);
+            // click off so that the required field still stay empty
+            await click(target);
+
+            // record should not be dropped
+            assert.containsOnce(target, ".o_data_row");
+            assert.deepEqual(
+                [...target.querySelectorAll("td.o_data_cell")].map((el) => el.innerText),
+                ["entry", ""]
+            );
+        }
+    );
+
+    QUnit.test(
+        'item dropped on discard with empty required field with "Add an item" (invalid on "ADD")',
+        async function (assert) {
+            // when a record in a list is added with "Add an item", it should
+            // always be dropped on discard if some required field are empty
+            // at the record creation.
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                                <field name="trululu" required="1" />
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            // Click on "Add an item"
+            await click(target, ".o_field_x2many_list_row_add a");
+            target.querySelector(".o_field_widget.o_field_char[name=display_name] input").value =
+                "some text";
+            assert.containsOnce(
+                target,
+                ".o_field_widget.o_field_char[name=display_name]",
+                "should have a char field 'display_name' on this record"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_widget.o_field_char[name=display_name]"),
+                "o_required_modifier",
+                "the char field should not be required on this record"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget.o_field_char[name=display_name] input").value,
+                "some text",
+                "should have entered text in the char field on this record"
+            );
+            assert.containsOnce(
+                target,
+                ".o_field_widget.o_required_modifier[name=trululu]",
+                "should have a required field 'trululu' on this record"
+            );
+            const requiredField = target.querySelector(
+                ".o_field_widget.o_required_modifier[name=trululu] input"
+            );
+            assert.strictEqual(
+                requiredField.value.trim(),
+                "",
+                "should have empty string in the required field on this record"
+            );
+
+            // click on empty required field in editable list record
+            await click(requiredField);
+            // click off so that the required field still stay empty
+            await click(target);
+
+            // record should be dropped
+            assert.containsNone(
+                target,
+                ".o_data_row",
+                "should have dropped record in the editable list"
+            );
+        }
+    );
+
+    QUnit.test(
+        'item not dropped on discard with empty required field with "Add an item" (invalid on "UPDATE")',
+        async function (assert) {
+            // when a record in a list is added with "Add an item", it should
+            // be temporarily added to the list when it is valid (e.g. required
+            // fields are non-empty). If the record is updated so that the required
+            // field is empty, and it is discarded, then the record should not be
+            // dropped.
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                                <field name="trululu" required="1" />
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsNone(
+                target,
+                ".o_data_row",
+                "should initially not have any record in the list"
+            );
+
+            // Click on "Add an item"
+            await click(target, ".o_field_x2many_list_row_add a");
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "should have a temporary record in the list"
+            );
+
+            assert.containsOnce(
+                target,
+                ".o_field_widget.o_required_modifier[name=trululu] input",
+                "should have a required field 'trululu' on this record"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget.o_required_modifier[name=trululu] input")
+                    .value,
+                "",
+                "should have empty string in the required field on this record"
+            );
+
+            // add something to required field and leave edit mode of the record
+            await click(target, ".o_field_widget.o_required_modifier[name=trululu] input");
+            await click(target.querySelector("li.ui-menu-item"));
+            await click(target);
+
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "should not have dropped valid record when leaving edit mode"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[1].textContent,
+                "first record",
+                "should have put some content in the required field on this record"
+            );
+
+            // leave edit mode of the record
+            await click(target);
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "should not have dropped record in the list on discard (invalid on UPDATE)"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[1].textContent,
+                "first record",
+                "should keep previous valid required field content on this record"
+            );
+        }
+    );
+
+    // WARNING: this does not seem to be a many2one field test
+    QUnit.test("list in form: default_get with x2many create", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.fields.timmy.default = [
+            [0, 0, { display_name: "brandon is the new timmy", name: "brandon" }],
+        ];
+        serverData.models.partner.onchanges.timmy = (obj) => {
+            obj.int_field = obj.timmy.length;
+        };
+        let displayName = "brandon is the new timmy";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="timmy">
+                            <tree editable="bottom">
+                                <field name="display_name" />
+                            </tree>
+                        </field>
+                        <field name="int_field" />
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(
+                        args[0],
+                        {
+                            int_field: 2,
+                            timmy: [
+                                [6, false, []],
+                                // LPE TODO 1 taskid-2261084: remove this entire comment including code snippet
+                                // when the change in behavior has been thoroughly tested.
+                                // We can't distinguish a value coming from a default_get
+                                // from one coming from the onchange, and so we can either store and
+                                // send it all the time, or never.
+                                // [0, args[0].timmy[1][1], { display_name: displayName, name: 'brandon' }],
+                                [0, args[0].timmy[1][1], { display_name: displayName }],
+                            ],
+                        },
+                        "should send the correct values to create"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector("td.o_data_cell").textContent,
+            "brandon is the new timmy",
+            "should have created the new record in the m2m with the correct name"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_integer input").value,
+            "1",
+            "should have called and executed the onchange properly"
+        );
+
+        // edit the subrecord and save
+        displayName = "new value";
+        await click(target, ".o_data_cell");
+        await editInput(target, ".o_data_cell input", displayName);
+        await clickSave(target);
+    });
+
+    // WARNING: this does not seem to be a many2one field test
+    QUnit.test(
+        "list in form: default_get with x2many create and onchange",
+        async function (assert) {
+            assert.expect(1);
+
+            serverData.models.partner.fields.turtles.default = [[6, 0, [2, 3]]];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="turtles">
+                                <tree editable="bottom">
+                                    <field name="turtle_foo" />
+                                </tree>
+                            </field>
+                            <field name="int_field" />
+                        </sheet>
+                    </form>`,
+                mockRPC(route, { args, method }) {
+                    if (method === "create") {
+                        assert.deepEqual(
+                            args[0].turtles,
+                            [
+                                [4, 2, false],
+                                [4, 3, false],
+                            ],
+                            "should send proper commands to create method"
+                        );
+                    }
+                },
+            });
+
+            await clickSave(target);
+        }
+    );
+
+    QUnit.test("list in form: call button in sub view", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <header>
+                        <button name="action" type="action" string="Just do it !" />
+                        <button name="object" type="object" string="Just don't do it !" />
+                        <field name="display_name" />
+                    </header>
+                </form>`,
+        };
+
+        const def = makeDeferred();
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        const { name, resModel, resId, resIds } = params;
+                        assert.step(name);
+                        assert.strictEqual(resModel, "product");
+                        assert.strictEqual(resId, 37);
+                        assert.deepEqual(resIds, [37]);
+                        return def.then(() => {
+                            params.onClose();
+                        });
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="product_id" />
+                        </tree>
+                    </field>
+                </form>`,
+            async mockRPC(route, args) {
+                if (args.method === "get_formview_id") {
+                    return false;
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await click(target.querySelector("td.o_data_cell"));
+        await click(target, ".o_external_button");
+        assert.containsOnce(target, ".modal");
+
+        let buttons = target.querySelectorAll(".modal .o_form_statusbar button");
+
+        await click(buttons[0]);
+        assert.verifySteps(["action"]);
+
+        await click(buttons[1]);
+        assert.verifySteps([]); // the second button is disabled, it can't be clicked
+
+        def.resolve();
+        await nextTick();
+
+        await clickDiscard(target.querySelector(".modal"));
+        assert.containsNone(target, ".modal");
+
+        await click(target, ".o_external_button");
+        assert.containsOnce(target, ".modal");
+
+        buttons = target.querySelectorAll(".modal .o_form_statusbar button");
+
+        await click(buttons[1]);
+        assert.verifySteps(["object"]);
+    });
+
+    QUnit.test("X2Many sequence list in modal", async function (assert) {
+        serverData.models.partner.fields.sequence = { string: "Sequence", type: "integer" };
+        serverData.models.partner.records[0].sequence = 1;
+        serverData.models.partner.records[1].sequence = 2;
+        serverData.models.partner.onchanges = {
+            sequence(obj) {
+                if (obj.id === 2) {
+                    obj.sequence = 1;
+                    assert.step("onchange sequence");
+                }
+            },
+        };
+
+        serverData.models.product.fields.turtle_ids = {
+            string: "Turtles",
+            type: "one2many",
+            relation: "turtle",
+        };
+        serverData.models.product.records[0].turtle_ids = [1];
+
+        serverData.models.turtle.fields.partner_types_ids = {
+            string: "Partner",
+            type: "one2many",
+            relation: "partner",
+        };
+        serverData.models.turtle.fields.type_id = {
+            string: "Partner Type",
+            type: "many2one",
+            relation: "partner_type",
+        };
+
+        serverData.models.partner_type.fields.partner_ids = {
+            string: "Partner",
+            type: "one2many",
+            relation: "partner",
+        };
+        serverData.models.partner_type.records[0].partner_ids = [1, 2];
+
+        serverData.views = {
+            "partner_type,false,form": `
+                <form>
+                    <field name="partner_ids" />
+                </form>`,
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name" />
+                    <field name="sequence" widget="handle" />
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "product",
+            resId: 37,
+            serverData,
+            arch: `
+                <form>
+                    <field name="name" />
+                    <field name="turtle_ids" widget="one2many">
+                        <tree editable="bottom">
+                            <field name="type_id" />
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/product/read") {
+                    return Promise.resolve([
+                        { id: 37, name: "xphone", display_name: "leonardo", turtle_ids: [1] },
+                    ]);
+                }
+                if (route === "/web/dataset/call_kw/turtle/read") {
+                    return Promise.resolve([{ id: 1, type_id: [12, "gold"] }]);
+                }
+                if (route === "/web/dataset/call_kw/partner_type/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+                if (route === "/web/dataset/call_kw/partner_type/read") {
+                    return Promise.resolve([{ id: 12, partner_ids: [1, 2], display_name: "gold" }]);
+                }
+                if (route === "/web/dataset/call_kw/partner_type/write") {
+                    assert.step("partner_type write");
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+        await click(target, ".o_data_cell");
+        await click(target, ".o_external_button");
+
+        assert.containsOnce(target, ".modal", "There should be 1 modal opened");
+        assert.containsN(
+            target,
+            ".modal .ui-sortable-handle",
+            2,
+            "There should be 2 sequence handlers"
+        );
+
+        await dragAndDrop(
+            ".modal .o_data_row:nth-child(2) .ui-sortable-handle",
+            ".modal tbody tr",
+            "top"
+        );
+
+        // Saving the modal and then the original model
+        await clickSave(target.querySelector(".modal"));
+        await clickSave(target);
+
+        assert.verifySteps(["onchange sequence", "partner_type write"]);
+    });
+
+    QUnit.test("autocompletion in a many2one, in form view with a domain", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            domain: [["trululu", "=", 4]],
+            arch: '<form><field name="product_id" /></form>',
+            mockRPC(route, { kwargs, method }) {
+                if (method === "name_search") {
+                    assert.deepEqual(kwargs.args, [], "should not have a domain");
+                }
+            },
+        });
+        await click(target, ".o_form_button_edit");
+
+        click(target, ".o_field_widget[name=product_id] input");
+    });
+
+    QUnit.test(
+        "autocompletion in a many2one, in form view with a date field",
+        async function (assert) {
+            assert.expect(1);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 2,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="bar" />
+                        <field name="date" />
+                        <field name="trululu" domain="[('bar', '=', True)]" />
+                    </form>`,
+                mockRPC(route, { kwargs, method }) {
+                    if (method === "name_search") {
+                        assert.deepEqual(kwargs.args, [["bar", "=", true]], "should have a domain");
+                    }
+                },
+            });
+            await click(target, ".o_form_button_edit");
+
+            click(target, ".o_field_widget[name='trululu'] input");
+        }
+    );
+
+    QUnit.test("creating record with many2one with option always_reload", async function (assert) {
+        serverData.models.partner.fields.trululu.default = 1;
+        serverData.models.partner.onchanges = {
+            trululu(obj) {
+                obj.trululu = 2; //[2, "second record"];
+            },
+        };
+
+        let count = 0;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu" options="{'always_reload': 1}" />
+                </form>`,
+            mockRPC(route, { args, method }) {
+                count++;
+                if (method === "name_get" && args[0] === 2) {
+                    // LPE: any call_kw route can take either [ids] or id as the first
+                    // argument as model.browse() in python supports both
+                    // With the basic_model, name_get is passed only an id, not an array
+                    return Promise.resolve([[2, "hello world\nso much noise"]]);
+                }
+            },
+        });
+
+        assert.strictEqual(count, 3, "should have done 3 rpcs (get_views, onchange and name_get)");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='trululu'] input").value,
+            "hello world",
+            "should have taken the correct display name"
+        );
+    });
+
+    QUnit.test("selecting a many2one, then discarding", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="product_id" /></form>',
+        });
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id']").textContent,
+            "",
+            "the tag a should be empty"
+        );
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_field_widget[name='product_id'] input");
+        await click(target.querySelector(".o_field_widget[name='product_id'] .dropdown-item"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id'] input").value,
+            "xphone",
+            "should have selected xphone"
+        );
+
+        await click(target, ".o_form_button_cancel");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id']").textContent,
+            "",
+            "the tag a should be empty"
+        );
+    });
+
+    QUnit.test(
+        "domain and context are correctly used when doing a name_search in a m2o",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.records[0].timmy = [12];
+            const DEFAULT_USER_CTX = { ...session.user_context };
+
+            patchWithCleanup(session.user_context, { hey: "ho" });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="product_id" domain="[('foo', '=', 'bar'), ('foo', '=', foo)]" context="{'hello': 'world', 'test': foo}" />
+                        <field name="foo" />
+                        <field name="trululu" context="{'timmy': timmy}" domain="[('id', 'in', timmy)]" />
+                        <field name="timmy" widget="many2many_tags" invisible="1" />
+                    </form>`,
+                mockRPC(route, { kwargs, method, model }) {
+                    if (method === "name_search" && model === "product") {
+                        assert.deepEqual(
+                            kwargs.args,
+                            ["&", ["foo", "=", "bar"], ["foo", "=", "yop"]],
+                            "the field attr domain should have been used for the RPC (and evaluated)"
+                        );
+                        assert.deepEqual(
+                            kwargs.context,
+                            { ...DEFAULT_USER_CTX, hey: "ho", hello: "world", test: "yop" },
+                            "the field attr context should have been used for the RPC (evaluated and merged with the session one)"
+                        );
+                        return Promise.resolve([]);
+                    }
+                    if (method === "name_search" && model === "partner") {
+                        assert.deepEqual(
+                            kwargs.args,
+                            [["id", "in", [12]]],
+                            "the field attr domain should have been used for the RPC (and evaluated)"
+                        );
+                        assert.deepEqual(
+                            kwargs.context,
+                            { ...DEFAULT_USER_CTX, hey: "ho", timmy: [[6, false, [12]]] },
+                            "the field attr context should have been used for the RPC (and evaluated)"
+                        );
+                        return Promise.resolve([]);
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+            click(target, ".o_field_widget[name='product_id'] input");
+            click(target, ".o_field_widget[name='trululu'] input");
+        }
+    );
+
+    QUnit.test("quick create on a many2one", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id" />
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args }) {
+                if (route === "/web/dataset/call_kw/product/name_create") {
+                    assert.strictEqual(args[0], "new partner", "should name create a new product");
+                }
+            },
+        });
+
+        await triggerEvent(target, ".o_field_many2one input", "focus");
+        await editInput(target, ".o_field_many2one input", "new partner");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.strictEqual(
+            target.querySelector(".modal .modal-body").textContent.trim(),
+            "Create new partner as a new Product?"
+        );
+        await click(target, ".modal .modal-footer .btn-primary");
+    });
+
+    QUnit.test("failing quick create on a many2one", async function (assert) {
+        assert.expect(4);
+
+        serverData.views = {
+            "product,false,form": '<form><field name="name" /></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="product_id" /></form>',
+            mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    return Promise.reject();
+                }
+                if (method === "create") {
+                    assert.deepEqual(args[0], { name: "xyz" });
+                }
+            },
+        });
+
+        await editInput(target, ".o_field_widget[name='product_id'] input", "abcd");
+        await click(target.querySelector(".o_field_widget[name='product_id'] .dropdown-item"));
+
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name='name'] input").value,
+            "abcd"
+        );
+
+        await editInput(target, ".modal .o_field_widget[name='name'] input", "xyz");
+        await click(target, ".modal .o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id'] input").value,
+            "xyz"
+        );
+    });
+
+    QUnit.test("failing quick create on a many2one inside a one2many", async function (assert) {
+        assert.expect(4);
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree editable="bottom">
+                    <field name="product_id" />
+                </tree>`,
+            "product,false,form": '<form><field name="name" /></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="p" /></form>',
+            mockRPC(route, { args, method }) {
+                if (method === "name_create") {
+                    return Promise.reject();
+                }
+                if (method === "create") {
+                    assert.deepEqual(args[0], { name: "xyz" });
+                }
+            },
+        });
+
+        await click(target, ".o_field_x2many_list_row_add a");
+        await editInput(target, ".o_field_widget[name='product_id'] input", "abcd");
+        await click(target.querySelector(".o_field_widget[name='product_id'] .dropdown-item"));
+
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name='name'] input").value,
+            "abcd"
+        );
+
+        await editInput(target, ".modal .o_field_widget[name='name'] input", "xyz");
+        await click(target, ".modal .o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id'] input").value,
+            "xyz"
+        );
+    });
+
+    QUnit.test("slow create on a many2one", async function (assert) {
+        serverData.views = {
+            "product,false,form": '<form><field name="name" /></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id" options="{'no_quick_create': 1}" />
+                    </sheet>
+                </form>`,
+        });
+
+        // cancel the many2one creation with Discard button
+        await editInput(target, ".o_field_many2one input", "new product");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.containsOnce(target, ".modal", "there should be one opened modal");
+
+        await click(target, ".modal .modal-footer .btn:not(.btn-primary)");
+        assert.containsNone(target, ".modal", "the modal should be closed");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "",
+            "the many2one should not set a value as its creation has been cancelled (with Cancel button)"
+        );
+
+        // cancel the many2one creation with Close button
+        await editInput(target, ".o_field_many2one input", "new product");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.containsOnce(target, ".modal", "there should be one opened modal");
+        await click(target, ".modal .modal-header button");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "",
+            "the many2one should not set a value as its creation has been cancelled (with Close button)"
+        );
+        assert.containsNone(target, ".modal", "the modal should be closed");
+
+        // select a new value then cancel the creation of the new one --> restore the previous
+        await click(target, ".o_field_widget[name=product_id] input");
+        await click(target.querySelector(".ui-menu-item"));
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "xphone",
+            "should have selected xphone"
+        );
+
+        await editInput(target, ".o_field_many2one input", "new product");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+        assert.containsOnce(target, ".modal", "there should be one opened modal");
+
+        await click(target, ".modal .modal-footer .btn:not(.btn-primary)");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "",
+            "should have reset the many2one"
+        );
+
+        // confirm the many2one creation
+        await editInput(target, ".o_field_many2one input", "new product");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.containsOnce(
+            target,
+            ".modal .o_form_view",
+            "a new modal should be opened and contain a form view"
+        );
+
+        await click(target, ".modal .o_form_button_cancel");
+    });
+
+    QUnit.test("select a many2one value by focusing out", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="product_id" /></form>',
+        });
+
+        await editInput(target, ".o_field_many2one input", "xph");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.containsNone(target, ".modal");
+        assert.strictEqual(target.querySelector(".o_field_many2one input").value, "xphone");
+        assert.containsOnce(target, ".o_external_button");
+    });
+
+    QUnit.test("no_create option on a many2one", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id" options="{'no_create': 1}" />
+                    </sheet>
+                </form>`,
+        });
+
+        await editInput(target, ".o_field_many2one input", "new partner");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+
+        assert.containsNone(target, ".modal", "should not display the create modal");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "",
+            "many2one value should cleared on focusout if many2one is no_create"
+        );
+    });
+
+    QUnit.test("can_create and can_write option on a many2one", async function (assert) {
+        serverData.models.product.options = {
+            can_create: "false",
+            can_write: "false",
+        };
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="display_name" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id" can_create="false" can_write="false" />
+                    </sheet>
+                </form>`,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/product/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        await click(target, ".o_field_many2one input");
+        assert.containsNone(
+            target,
+            ".o_m2o_dropdown_option.o_m2o_dropdown_option_create",
+            "there shouldn't be any option to search and create"
+        );
+
+        await click(target.querySelectorAll(".ui-menu-item")[1]);
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "xpad",
+            "the correct record should be selected"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_many2one .o_external_button",
+            "there should be an external button displayed"
+        );
+
+        await click(target, ".o_field_many2one .o_external_button");
+        assert.containsOnce(
+            target,
+            ".modal .o_form_view .o_form_readonly",
+            "there should be a readonly form view opened"
+        );
+
+        await click(target, ".modal .modal-footer .btn-primary");
+
+        await editInput(target, ".o_field_many2one input", "new product");
+        await triggerEvent(target, ".o_field_many2one input", "blur");
+        assert.containsNone(target, ".modal", "should not display the create modal");
+    });
+
+    QUnit.test("propagate can_create onto the search popup", async function (assert) {
+        serverData.models.product.records = [
+            { id: 1, name: "Tromblon1" },
+            { id: 2, name: "Tromblon2" },
+            { id: 3, name: "Tromblon3" },
+            { id: 4, name: "Tromblon4" },
+            { id: 5, name: "Tromblon5" },
+            { id: 6, name: "Tromblon6" },
+            { id: 7, name: "Tromblon7" },
+            { id: 8, name: "Tromblon8" },
+        ];
+        serverData.views = {
+            "product,false,list": `
+                    <tree>
+                        <field name="name"/>
+                    </tree>`,
+            "product,false,search": `
+                    <search>
+                        <field name="name"/>
+                    </search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="name"/>
+                    <field name="product_id" can_create="false"/>
+                </form>`,
+            mockRPC: function (route, args) {
+                if (args.method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+        await click(target.querySelector(".o_field_widget[name=product_id] input"));
+
+        assert.containsNone(target, ".o-autocomplete a:contains(Start typing...)");
+
+        await editInput(target, ".o_field_widget[name=product_id] input", "a");
+
+        assert.containsNone(target, ".ui-autocomplete a:contains(Create and Edit)");
+
+        await editInput(target, ".o_field_many2one[name=product_id] input", "");
+        await clickOpenedDropdownItem(target, "product_id", "Search More...");
+
+        assert.containsOnce(target, ".modal-dialog.modal-lg");
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".modal-footer button")),
+            ["Cancel"],
+            "Only the cancel button is present in modal"
+        );
+    });
+
+    QUnit.test(
+        "many2one with can_create=false shows no result item when searched something that doesn't exist",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="product_id" can_create="false" can_write="false" />
+                        </sheet>
+                    </form>`,
+            });
+
+            await click(target, ".o_field_many2one input");
+            await editInput(target, ".o_field_many2one[name=product_id] input", "abc");
+            assert.containsNone(
+                target,
+                ".o_field_many2one[name=product_id] .o_m2o_dropdown_option_create",
+                "there shouldn't be any option to search and create"
+            );
+            assert.containsOnce(
+                target,
+                ".o_field_many2one[name=product_id] .o_m2o_no_result",
+                "there should be option for 'No records'"
+            );
+        }
+    );
+
+    QUnit.test("pressing enter in a m2o in an editable list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="product_id" />
+                </tree>`,
+        });
+
+        await click(target.querySelector("td.o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        // we now write 'a' and press enter to check that the selection is
+        // working, and prevent the navigation
+        let input = target.querySelector("[name=product_id] input");
+        await editInput(input, null, "a");
+        assert.containsOnce(
+            target.querySelector("[name=product_id]"),
+            ".o-autocomplete--dropdown-menu"
+        );
+
+        // we now trigger ENTER to select first choice
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.strictEqual(input, document.activeElement);
+        assert.containsNone(
+            target.querySelector("[name=product_id]"),
+            ".o-autocomplete--dropdown-menu"
+        );
+
+        // we now trigger again ENTER to make sure we can move to next line
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.containsNone(target, "tr.o_data_row:nth-child(1) [name=product_id] input");
+        assert.hasClass(target.querySelector("tr.o_data_row:nth-child(2)"), "o_selected_row");
+
+        // we now write again 'a' in the cell to select xpad. We will now
+        // test with the tab key
+        input = target.querySelector("[name=product_id] input");
+        await editInput(input, null, "a");
+        assert.containsOnce(
+            target.querySelector("tr.o_data_row:nth-child(2) [name=product_id]"),
+            ".o-autocomplete--dropdown-menu"
+        );
+
+        triggerHotkey("Tab");
+        await nextTick();
+
+        assert.containsNone(target, "tr.o_data_row:nth-child(2) [name=product_id] input");
+
+        assert.hasClass(target.querySelector("tr.o_data_row:nth-child(3)"), "o_selected_row");
+    });
+
+    QUnit.test(
+        "pressing ENTER on a 'no_quick_create' many2one should open a M2ODialog",
+        async function (assert) {
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <field name="display_name" />
+                    </form>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="trululu" options="{'no_quick_create': 1}" />
+                        <field name="foo" />
+                    </form>`,
+            });
+
+            const input = target.querySelector(".o_field_many2one input");
+            await editInput(input, null, "Something that does not exist");
+            target.querySelector(".o_field_many2one .dropdown-menu li").focus();
+            await triggerEvent(input, null, "keydown", { key: "Enter" });
+            assert.containsOnce(target, ".modal", "should have one modal in body");
+            // Check that discarding clears $input
+            await click(target.querySelector(".modal .o_form_button_cancel"));
+            assert.strictEqual(input.value, "", "the field should be empty");
+        }
+    );
+
+    QUnit.test(
+        "select a value by pressing TAB on a many2one with onchange",
+        async function (assert) {
+            serverData.models.partner.onchanges.trululu = () => {};
+
+            const def = makeDeferred();
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="trululu" />
+                        <field name="display_name" />
+                    </form>`,
+                async mockRPC(route, { method }) {
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_many2one input");
+
+            await editInput(input, null, "first");
+            await triggerEvent(input, null, "keydown", { key: "tab" });
+            await triggerEvent(input, null, "keypress", { key: "tab" });
+            await triggerEvent(input, null, "keyup", { key: "tab" });
+
+            // simulate a focusout (e.g. because the user clicks outside)
+            // before the onchange returns
+            target.querySelector(".o_field_char").focus();
+
+            assert.containsNone(target, ".modal", "there shouldn't be any modal in body");
+
+            // unlock the onchange
+            def.resolve();
+            await nextTick();
+
+            assert.strictEqual(
+                input.value,
+                "first record",
+                "first record should have been selected"
+            );
+            assert.containsNone(target, ".modal", "there shouldn't be any modal in body");
+        }
+    );
+
+    QUnit.test("leaving a many2one by pressing tab", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu"/>
+                    <field name="display_name"/>
+                </form>`,
+        });
+
+        const input = target.querySelector(".o_field_many2one input");
+        await click(input);
+        await triggerEvent(input, null, "keydown", { key: "tab" });
+        assert.strictEqual(input.value, "", "no record should have been selected");
+
+        // open autocomplete dropdown and manually select item by UP/DOWN key and press TAB
+        await click(input);
+        await triggerEvent(input, null, "keydown", { key: "arrowdown" });
+        await triggerEvent(input, null, "keydown", { key: "tab" });
+        assert.strictEqual(input.value, "second record", "second record should have been selected");
+
+        // clear many2one and then open autocomplete, write something and press TAB
+        await editInput(input, null, "");
+        input.focus();
+        await editInput(input, null, "se");
+        await triggerEvent(input, null, "keydown", { key: "tab" });
+        assert.strictEqual(input.value, "second record", "first record should have been selected");
+    });
+
+    QUnit.test(
+        "leaving an empty many2one by pressing tab (after backspace or delete)",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="trululu"/>
+                        <field name="display_name"/>
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            const input = target.querySelector(".o_field_many2one input");
+            assert.ok(input.value, "many2one should have value");
+
+            // simulate backspace to remove values and press TAB
+            await editInput(input, null, "");
+            await triggerEvent(input, null, "keypress", { key: "backspace" });
+            await triggerEvent(input, null, "keydown", { key: "tab" });
+            assert.strictEqual(input.value, "", "no record should have been selected");
+
+            // reset a value
+            await selectDropdownItem(target, "trululu", "first record");
+            assert.ok(input.value, "many2one should have value");
+
+            // simulate delete to remove values and press TAB
+            await editInput(input, null, "");
+            await triggerEvent(input, null, "keypress", { key: "delete" });
+            await triggerEvent(input, null, "keydown", { key: "tab" });
+            assert.strictEqual(input.value, "", "no record should have been selected");
+        }
+    );
+
+    QUnit.test(
+        "many2one in editable list + onchange, with enter [REQUIRE FOCUS]",
+        async function (assert) {
+            serverData.models.partner.onchanges.product_id = (obj) => {
+                obj.int_field = obj.product_id || 0;
+            };
+
+            const def = makeDeferred();
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="product_id" />
+                        <field name="int_field" />
+                    </tree>`,
+                async mockRPC(route, { method }) {
+                    if (method) {
+                        assert.step(method);
+                    }
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target.querySelector("td.o_data_cell"));
+            const input = target.querySelector("td.o_data_cell input");
+            await editInput(input, null, "a");
+            await triggerEvent(input, null, "keydown", { key: "enter" });
+            await triggerEvent(input, null, "keyup", { key: "enter" });
+            def.resolve();
+            await nextTick();
+            await triggerEvent(input, null, "keydown", { key: "enter" });
+            assert.containsNone(target, ".modal", "should not have any modal in DOM");
+            assert.verifySteps([
+                "get_views",
+                "web_search_read", // to display results in the dialog
+                "name_search",
+                "onchange",
+                "write",
+                "read",
+            ]);
+        }
+    );
+
+    QUnit.test(
+        "many2one in editable list + onchange, with enter, part 2 [REQUIRE FOCUS]",
+        async function (assert) {
+            // this is the same test as the previous one, but the onchange is just
+            // resolved slightly later
+            serverData.models.partner.onchanges.product_id = (obj) => {
+                obj.int_field = obj.product_id || 0;
+            };
+
+            const def = makeDeferred();
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="product_id" />
+                        <field name="int_field" />
+                    </tree>`,
+                async mockRPC(route, { method }) {
+                    if (method) {
+                        assert.step(method);
+                    }
+                    if (method === "onchange") {
+                        await def;
+                    }
+                },
+            });
+
+            await click(target.querySelector("td.o_data_cell"));
+            const input = target.querySelector("td.o_data_cell input");
+            await editInput(input, null, "a");
+            await triggerEvent(input, null, "keydown", { key: "enter" });
+            await triggerEvent(input, null, "keyup", { key: "enter" });
+            await triggerEvent(input, null, "keydown", { key: "enter" });
+            def.resolve();
+            await nextTick();
+            assert.containsNone(target, ".modal", "should not have any modal in DOM");
+            assert.verifySteps([
+                "get_views",
+                "web_search_read", // to display results in the dialog
+                "name_search",
+                "onchange",
+                "write",
+                "read",
+            ]);
+        }
+    );
+
+    QUnit.test("many2one: domain updated by an onchange", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.partner.onchanges = {
+            int_field() {},
+        };
+
+        let domain = [];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field" />
+                    <field name="trululu" />
+                </form>`,
+            mockRPC(route, { kwargs, method }) {
+                if (method === "onchange") {
+                    domain = [["id", "in", [10]]];
+                    return Promise.resolve({
+                        domain: {
+                            trululu: domain,
+                            unexisting_field: domain,
+                        },
+                    });
+                }
+                if (method === "name_search") {
+                    assert.deepEqual(kwargs.args, domain, "sent domain should be correct");
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        // trigger a name_search (domain should be [])
+        await click(target, ".o_field_widget[name=trululu] input");
+        // close the dropdown
+        await click(target, ".o_field_widget[name=trululu] input");
+        // trigger an onchange that will update the domain
+        await triggerEvent(target, ".o_field_widget[name='int_field']", "onchange");
+
+        // trigger a name_search (domain should be [['id', 'in', [10]]])
+        await click(target, ".o_field_widget[name='trululu'] input");
+    });
+
+    QUnit.test("many2one in one2many: domain updated by an onchange", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.onchanges = {
+            trululu() {},
+        };
+
+        let domain = [];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="foo" />
+                            <field name="trululu" />
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, { kwargs, method }) {
+                if (method === "onchange") {
+                    return Promise.resolve({
+                        domain: {
+                            trululu: domain,
+                        },
+                    });
+                }
+                if (method === "name_search") {
+                    assert.deepEqual(kwargs.args, domain, "sent domain should be correct");
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        // add a first row with a specific domain for the m2o
+        domain = [["id", "in", [10]]]; // domain for subrecord 1
+        await click(target, ".o_field_x2many_list_row_add a");
+        await click(target, ".o_field_widget[name=trululu] input");
+        // add some value to foo field to make record dirty
+        await editInput(target, "tr.o_selected_row .o_field_widget[name='foo'] input", "new value");
+
+        // add a second row with another domain for the m2o
+        domain = [["id", "in", [5]]]; // domain for subrecord 2
+        await click(target, ".o_field_x2many_list_row_add a");
+        await click(target, ".o_field_widget[name=trululu] input");
+
+        // check again the first row to ensure that the domain hasn't change
+        domain = [["id", "in", [10]]]; // domain for subrecord 1 should have been kept
+        await click(target.querySelectorAll(".o_data_row .o_data_cell")[1]);
+        await click(target, ".o_field_widget[name=trululu] input");
+    });
+
+    QUnit.test("search more in many2one: no text in input", async function (assert) {
+        // when the user clicks on 'Search More...' in a many2one dropdown, and there is no text
+        // in the input (i.e. no value to search on), we bypass the name_search that is meant to
+        // return a list of preselected ids to filter on in the list view (opened in a dialog)
+        assert.expect(7);
+
+        for (let i = 0; i < 8; i++) {
+            serverData.models.partner.records.push({ id: 100 + i, display_name: `test_${i}` });
+        }
+        serverData.views = {
+            "partner,false,list": `
+                <list>
+                    <field name="display_name" />
+                </list>`,
+            "partner,false,search": `<search />`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+            mockRPC(route, { kwargs, method }) {
+                assert.step(method);
+                if (method === "web_search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [],
+                        "should not preselect ids as there as nothing in the m2o input"
+                    );
+                }
+            },
+        });
+
+        const field = target.querySelector(`.o_field_widget[name="trululu"] input`);
+        field.value = "";
+        await triggerEvent(field, null, "change");
+
+        await click(target, `.o_field_widget[name="trululu"] input`);
+        await click(target, `.o_field_widget[name="trululu"] .o_m2o_dropdown_option_search_more`);
+
+        assert.verifySteps([
+            "get_views", // main form view
+            "onchange",
+            "name_search", // to display results in the dropdown
+            "get_views", // list view in dialog
+            "web_search_read", // to display results in the dialog
+        ]);
+    });
+
+    QUnit.test("search more in many2one: text in input", async function (assert) {
+        // when the user clicks on 'Search More...' in a many2one dropdown, and there is some
+        // text in the input, we perform a name_search to get a (limited) list of preselected
+        // ids and we add a dynamic filter (with those ids) to the search view in the dialog, so
+        // that the user can remove this filter to bypass the limit
+        assert.expect(13);
+
+        for (let i = 0; i < 8; i++) {
+            serverData.models.partner.records.push({ id: 100 + i, display_name: `test_${i}` });
+        }
+        serverData.views = {
+            "partner,false,list": `
+                <list>
+                    <field name="display_name" />
+                </list>`,
+            "partner,false,search": `<search />`,
+        };
+
+        let expectedDomain;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+            mockRPC(route, { kwargs, method }) {
+                assert.step(method || route);
+                if (method === "web_search_read") {
+                    assert.deepEqual(kwargs.domain, expectedDomain);
+                }
+            },
+        });
+
+        expectedDomain = [["id", "in", [100, 101, 102, 103, 104, 105, 106, 107]]];
+        await click(target, `.o_field_widget[name="trululu"] input`);
+
+        await editInput(target, ".o_field_widget[name='trululu'] input", "test");
+        await click(target, `.o_field_widget[name="trululu"] .o_m2o_dropdown_option_search_more`);
+
+        assert.containsOnce(target, ".modal .o_list_view");
+        assert.containsOnce(
+            target,
+            ".modal .o_cp_searchview .o_facet_values",
+            "should have a special facet for the pre-selected ids"
+        );
+
+        // remove the filter on ids
+        expectedDomain = [];
+        await click(target.querySelector(".modal .o_cp_searchview .o_facet_remove"));
+
+        assert.verifySteps([
+            "get_views", // main form view
+            "onchange",
+            "name_search", // empty search, triggered when the user clicks in the input
+            "name_search", // to display results in the dropdown
+            "name_search", // to get preselected ids matching the search
+            "get_views", // list view in dialog
+            "web_search_read", // to display results in the dialog
+            "web_search_read", // after removal of dynamic filter
+        ]);
+    });
+
+    QUnit.test("search more in many2one: dropdown click", async function (assert) {
+        for (let i = 0; i < 8; i++) {
+            serverData.models.partner.records.push({ id: 100 + i, display_name: `test_${i}` });
+        }
+        serverData.views = {
+            "partner,false,list": `
+                <list>
+                    <field name="display_name" />
+                </list>`,
+            "partner,false,search": `<search />`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+        });
+
+        await click(target, `.o_field_widget[name="trululu"] input`);
+
+        await editInput(target, ".o_field_widget[name='trululu'] input", "test");
+        await click(target, `.o_field_widget[name="trululu"] .o_m2o_dropdown_option_search_more`);
+
+        // dropdown selector
+        const filterMenuCss = ".o_search_options > .o_filter_menu";
+        const groupByMenuCss = ".o_search_options > .o_group_by_menu";
+
+        await click(document.querySelector(`${filterMenuCss} > .dropdown-toggle`));
+
+        assert.hasClass(document.querySelector(filterMenuCss), "show");
+        assert.isVisible(
+            document.querySelector(`${filterMenuCss} > .dropdown-menu`),
+            "the filter dropdown menu should be visible"
+        );
+        assert.doesNotHaveClass(document.querySelector(groupByMenuCss), "show");
+        assert.isNotVisible(
+            document.querySelector(`${groupByMenuCss} > .dropdown-menu`),
+            "the Group by dropdown menu should be not visible"
+        );
+
+        await click(document.querySelector(`${groupByMenuCss} > .dropdown-toggle`));
+        assert.hasClass(document.querySelector(groupByMenuCss), "show");
+        assert.isVisible(
+            document.querySelector(`${groupByMenuCss} > .dropdown-menu`),
+            "the group by dropdown menu should be visible"
+        );
+        assert.doesNotHaveClass(document.querySelector(filterMenuCss), "show");
+        assert.isNotVisible(
+            document.querySelector(`${filterMenuCss} > .dropdown-menu`),
+            "the filter dropdown menu should be not visible"
+        );
+    });
+
+    QUnit.test("updating a many2one from a many2many", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.turtle.records[1].turtle_trululu = 1;
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="display_name" />
+                            <field name="turtle_trululu" />
+                        </tree>
+                    </field>
+                </form>`,
+            async mockRPC(route, { args, method }) {
+                if (method === "get_formview_id") {
+                    assert.deepEqual(args[0], [1], "should call get_formview_id with correct id");
+                    return false;
+                }
+            },
+        });
+
+        // Opening the modal
+        await clickEdit(target);
+        await click(target.querySelectorAll(".o_data_row td")[1]);
+        await click(target, ".o_external_button");
+        assert.containsOnce(target, ".modal");
+
+        // Changing the 'trululu' value
+        await editInput(target, ".modal div[name=display_name] input", "test");
+        await clickSave(target.querySelector(".modal"));
+
+        // Test whether the value has changed
+        assert.containsNone(target, ".modal");
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_cell")[1].textContent,
+            "test",
+            "the partner name should have been updated to 'test'"
+        );
+    });
+
+    QUnit.test("search more in many2one: resequence inside dialog", async function (assert) {
+        // when the user clicks on 'Search More...' in a many2one dropdown, resequencing inside
+        // the dialog works
+        serverData.models.partner.fields.sequence = { string: "Sequence", type: "integer" };
+        for (let i = 0; i < 8; i++) {
+            serverData.models.partner.records.push({ id: 100 + i, display_name: `test_${i}` });
+        }
+        serverData.views = {
+            "partner,false,list": `
+                <list>
+                    <field name="sequence" widget="handle" />
+                    <field name="display_name" />
+                </list>`,
+            "partner,false,search": `<search />`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+            mockRPC(route, { kwargs, method }) {
+                assert.step(method || route);
+                if (method === "web_search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        [],
+                        "should not preselect ids as there as nothing in the m2o input"
+                    );
+                }
+            },
+        });
+
+        await editInput(target, ".o_field_widget[name='trululu'] input", "");
+        await click(target, `.o_field_widget[name="trululu"] .o_m2o_dropdown_option_search_more`);
+
+        assert.containsOnce(target, ".modal");
+        assert.containsN(target, ".modal .ui-sortable-handle", 11);
+
+        await dragAndDrop(
+            ".modal .o_data_row:nth-child(2) .ui-sortable-handle",
+            ".modal tbody tr",
+            "top"
+        );
+
+        assert.verifySteps([
+            "get_views",
+            "onchange",
+            "name_search", // to display results in the dropdown
+            "get_views", // list view in dialog
+            "web_search_read", // to display results in the dialog
+            "/web/dataset/resequence", // resequencing lines
+            "read",
+        ]);
+    });
+
+    QUnit.test("many2one dropdown disappears on scroll", async function (assert) {
+        serverData.models.partner.records[0].display_name =
+            "Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery Loooooooooooooooooooooooooooooooooooooooooooong Naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <div style="height: 2000px;">
+                        <field name="trululu" />
+                    </div>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        await click(target, ".o_field_many2one input");
+        assert.containsOnce(target, ".o_field_many2one .dropdown-menu");
+
+        const dropdown = document.querySelector(".o_field_many2one .dropdown-menu");
+        await triggerScroll(dropdown, { left: 50 }, false);
+        assert.strictEqual(dropdown.scrollLeft, 50, "a scroll happened");
+        assert.containsOnce(target, ".o_field_many2one .dropdown-menu");
+
+        await triggerScroll(target, { top: 50 });
+        assert.containsNone(target, ".o_field_many2one .dropdown-menu");
+    });
+
+    QUnit.test("search more in many2one: group and use the pager", async function (assert) {
+        serverData.models.partner.records.push(
+            {
+                id: 5,
+                display_name: "Partner 4",
+            },
+            {
+                id: 6,
+                display_name: "Partner 5",
+            },
+            {
+                id: 7,
+                display_name: "Partner 6",
+            },
+            {
+                id: 8,
+                display_name: "Partner 7",
+            },
+            {
+                id: 9,
+                display_name: "Partner 8",
+            },
+            {
+                id: 10,
+                display_name: "Partner 9",
+            }
+        );
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree limit="7">
+                    <field name="display_name" />
+                </tree>`,
+            "partner,false,search": `
+                <search><group>
+                    <filter name="bar" string="Bar" context="{'group_by': 'bar'}" />
+                </group></search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="trululu" /></form>',
+        });
+
+        await clickEdit(target);
+
+        await selectDropdownItem(target, "trululu", "Search More...");
+        const modal = target.querySelector(".modal");
+        await toggleGroupByMenu(modal);
+        await toggleMenuItem(modal, "Bar");
+
+        await click(modal.querySelectorAll(".o_group_header")[1]);
+
+        assert.containsN(modal, ".o_data_row", 7, "should display 7 records in the first page");
+        await click(modal.querySelector(".o_group_header .o_pager_next"));
+        assert.containsOnce(modal, ".o_data_row", "should display 1 record in the second page");
+    });
+
+    QUnit.test("focus when closing many2one modal in many2one modal", async function (assert) {
+        serverData.views = {
+            "partner,false,form": '<form><field name="trululu" /></form>',
+        };
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: '<form><field name="trululu" /></form>',
+            mockRPC(route, { method }) {
+                if (method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        // Open many2one modal
+        await clickEdit(target);
+        await click(target, ".o_external_button");
+
+        const originalModal = target.querySelector(".modal");
+
+        assert.containsOnce(target, ".modal");
+        assert.doesNotHaveClass(originalModal, "o_inactive_modal");
+        assert.hasClass(document.body, "modal-open");
+
+        // Open many2one modal of field in many2one modal
+        await click(originalModal, ".o_external_button");
+
+        let nextModal = target.querySelectorAll(".modal")[1];
+
+        assert.containsN(target, ".modal", 2);
+        assert.doesNotHaveClass(nextModal, "o_inactive_modal");
+        assert.hasClass(document.body, "modal-open");
+
+        // Close second modal
+        await click(nextModal, "button[class='close']");
+
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(
+            originalModal,
+            target.querySelector(".modal"),
+            "First modal is still opened"
+        );
+        assert.doesNotHaveClass(originalModal, "o_inactive_modal");
+        assert.hasClass(document.body, "modal-open");
+
+        // Close first modal
+        await click(originalModal, "button[class='close']");
+        assert.containsNone(target, ".modal");
+        assert.doesNotHaveClass(document.body, "modal-open");
+    });
+
+    QUnit.test("search more pager is reset when doing a new search", async function (assert) {
+        serverData.models.partner.fields.datetime.searchable = true;
+        serverData.models.partner.records.push(
+            ...new Array(170).fill().map((_, i) => ({ id: i + 10, name: "Partner " + i }))
+        );
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>`,
+            "partner,false,search": `
+                <search>
+                    <field name="datetime"/>
+                    <field name="display_name"/>
+                </search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="trululu"/>
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        await clickEdit(target);
+
+        await selectDropdownItem(target, "trululu", "Search More...");
+
+        const modal = target.querySelector(".modal");
+        await click(modal, ".o_pager_next");
+
+        assert.strictEqual(
+            modal.querySelector(".o_pager_limit").textContent,
+            "173",
+            "there should be 173 records"
+        );
+        assert.strictEqual(
+            modal.querySelector(".o_pager_value").textContent,
+            "81-160",
+            "should display the second page"
+        );
+        assert.containsN(modal, "tr.o_data_row", 80, "should display 80 record");
+
+        await editSearch(modal, "first");
+        await validateSearch(modal);
+
+        assert.strictEqual(
+            modal.querySelector(".o_pager_limit").textContent,
+            "1",
+            "there should be 1 record"
+        );
+        assert.strictEqual(
+            modal.querySelector(".o_pager_value").textContent,
+            "1-1",
+            "should display the first page"
+        );
+        assert.containsOnce(modal, "tr.o_data_row", "should display 1 record");
+    });
+
+    QUnit.test("click on many2one link in list view", async function (assert) {
+        serverData.models["turtle"].records[1].product_id = 37;
+        serverData.views = {
+            "partner,false,form": '<form> <field name="turtles"/> </form>',
+            "partner,false,search": "<search></search>",
+            "turtle,false,list": `
+                <tree readonly="1">
+                    <field name="product_id" widget="many2one"/>
+                </tree>`,
+            "product,false,search": "<search></search>",
+            "product,false,form": "<form></form>",
+        };
+        serverData.actions = {
+            1: {
+                name: "Partner",
+                res_model: "partner",
+                res_id: 1,
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+            },
+        };
+        const webClient = await createWebClient({
+            serverData,
+            legacyParams: { withLegacyMockServer: true },
+            mockRPC: function (route, args) {
+                if (args.method === "get_formview_action") {
+                    assert.step("get_formview_action");
+                    return {
+                        type: "ir.actions.act_window",
+                        res_model: "product",
+                        view_type: "form",
+                        view_mode: "form",
+                        views: [[false, "form"]],
+                        target: "current",
+                        res_id: args[0],
+                    };
+                }
+            },
+        });
+        const target = getFixture();
+        await doAction(webClient, 1);
+        assert.containsOnce(target, "a.o_form_uri", "should display 1 m2o link in form");
+        assert.containsN(
+            target,
+            ".breadcrumb-item",
+            1,
+            "Should only contain one breadcrumb at the start"
+        );
+
+        await click(target.querySelector("a.o_form_uri"));
+        assert.verifySteps(["get_formview_action"]);
+        assert.containsN(
+            target,
+            ".breadcrumb-item",
+            2,
+            "Should contain 2 breadcrumbs after the clicking on the link"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/monetary_field_tests.js b/addons/web/static/tests/views/fields/monetary_field_tests.js
new file mode 100644
index 00000000000..626fa70e415
--- /dev/null
+++ b/addons/web/static/tests/views/fields/monetary_field_tests.js
@@ -0,0 +1,1115 @@
+/** @odoo-module **/
+
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import {
+    addRow,
+    click,
+    clickEdit,
+    clickSave,
+    editInput,
+    getFixture,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
+import { session } from "@web/session";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        float_field: {
+                            string: "float_field",
+                            type: "float",
+                            digits: [16, 1],
+                            searchable: true,
+                        },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        currency_id: {
+                            string: "Currency",
+                            type: "many2one",
+                            relation: "currency",
+                            searchable: true,
+                        },
+                        monetary_field: {
+                            string: "Monetary Field",
+                            type: "monetary",
+                        },
+                    },
+                    records: [
+                        { id: 1, int_field: 10, float_field: 0.44444 },
+                        { id: 2, int_field: 0, float_field: 0, currency_id: 2 },
+                        { id: 3, int_field: 80, float_field: -3.89859 },
+                        { id: 4, int_field: false, float_field: false },
+                        { id: 5, int_field: -4, float_field: 9.1, currency_id: 1 },
+                        { id: 6, float_field: 3.9, monetary_field: 4.2, currency_id: 1 },
+                    ],
+                },
+                currency: {
+                    fields: {
+                        digits: { string: "Digits" },
+                        symbol: { string: "Currency Sumbol", type: "char", searchable: true },
+                        position: { string: "Currency Position", type: "char", searchable: true },
+                    },
+                    records: [
+                        { id: 1, display_name: "$", symbol: "$", position: "before" },
+                        { id: 2, display_name: "€", symbol: "€", position: "after" },
+                        {
+                            id: 3,
+                            display_name: "VEF",
+                            symbol: "Bs.F",
+                            position: "after",
+                            digits: [0, 4],
+                        },
+                    ],
+                },
+            },
+        };
+        target = getFixture();
+        setupViewRegistries();
+    });
+
+    QUnit.module("MonetaryField");
+
+    QUnit.test("basic flow in form view - float field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a09.10",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "9.10",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.childNodes[0].textContent,
+            "$",
+            "The input should be preceded by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_monetary input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "108.25",
+            "The new value should be rounded properly after the blur"
+        );
+
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a0108.25",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("basic flow in form view - monetary field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="monetary_field"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a09.10",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "9.10",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.childNodes[0].textContent,
+            "$",
+            "The input should be preceded by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_monetary input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "108.25",
+            "The new value should be rounded properly after the blur"
+        );
+
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a0108.25",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("rounding using formula in form view - float field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Test computation and rounding
+        await clickEdit(target);
+        await editInput(target, ".o_field_monetary input", "=100/3");
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a033.33",
+            "The new value should be calculated and rounded properly."
+        );
+    });
+
+    QUnit.test("rounding using formula in form view - monetary field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="monetary_field"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Test computation and rounding
+        await clickEdit(target);
+        await editInput(target, ".o_field_monetary input", "=100/3");
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a033.33",
+            "The new value should be calculated and rounded properly."
+        );
+    });
+
+    QUnit.test("with currency symbol after - float field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 0,
+                monetary_field: 0,
+                currency_id: 2,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0.00\u00a0€",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "0.00",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.children[1].textContent,
+            "€",
+            "The input should be followed by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "108.25",
+            "The value should be formatted on blur."
+        );
+
+        await clickSave(target);
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "108.25\u00a0€",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("with currency symbol after - monetary field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 0,
+                monetary_field: 0,
+                currency_id: 2,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="monetary_field"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "0.00\u00a0€",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "0.00",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.children[1].textContent,
+            "€",
+            "The input should be followed by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "108.25",
+            "The value should be formatted on blur."
+        );
+
+        await clickSave(target);
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "108.25\u00a0€",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("with currency digits != 2 - float field", async function (assert) {
+        // need to also add it to the session (as currencies are loaded there)
+        patchWithCleanup(session, {
+            currencies: {
+                ...session.currencies,
+                3: {
+                    name: "VEF",
+                    symbol: "Bs.F",
+                    position: "after",
+                    digits: [0, 4],
+                },
+            },
+        });
+
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 99.1234,
+                monetary_field: 99.1234,
+                currency_id: 3,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "99.1234\u00a0Bs.F",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "99.1234",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.children[1].textContent,
+            "Bs.F",
+            "The input should be followed by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "99.111111111");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "99.1111",
+            "The value should should be formatted on blur."
+        );
+
+        await clickSave(target);
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "99.1111\u00a0Bs.F",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("with currency digits != 2 - monetary field", async function (assert) {
+        // need to also add it to the session (as currencies are loaded there)
+        patchWithCleanup(session, {
+            currencies: {
+                ...session.currencies,
+                3: {
+                    name: "VEF",
+                    symbol: "Bs.F",
+                    position: "after",
+                    digits: [0, 4],
+                },
+            },
+        });
+
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 99.1234,
+                monetary_field: 99.1234,
+                currency_id: 3,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="monetary_field"/>
+                    <field name="currency_id" invisible="1"/>
+                </form>`,
+        });
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "99.1234\u00a0Bs.F",
+            "The value should be displayed properly."
+        );
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "99.1234",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.children[1].textContent,
+            "Bs.F",
+            "The input should be followed by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "99.111111111");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "99.1111",
+            "The value should should be formatted on blur."
+        );
+
+        await clickSave(target);
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "99.1111\u00a0Bs.F",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("basic flow in editable list view - float field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+            {
+                id: 2,
+                float_field: 15.3,
+                monetary_field: 15.3,
+                currency_id: 2,
+            },
+            {
+                id: 3,
+                float_field: false,
+                monetary_field: false,
+                currency_id: 1,
+            },
+            {
+                id: 4,
+                float_field: 5.0,
+                monetary_field: 5.0,
+            },
+        ];
+
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <tree editable="bottom">
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        });
+
+        const dollarValues = Array.from(target.querySelectorAll("td")).filter((x) =>
+            x.textContent.includes("$")
+        );
+        assert.strictEqual(dollarValues.length, 2, "Only 2 line has dollar as a currency.");
+
+        const euroValues = Array.from(target.querySelectorAll("td")).filter((x) =>
+            x.textContent.includes("€")
+        );
+        assert.strictEqual(euroValues.length, 1, "Only 1 line has euro as a currency.");
+
+        const noCurrencyValues = Array.from(target.querySelectorAll("td.o_data_cell")).filter(
+            (x) => !(x.textContent.includes("€") || x.textContent.includes("$"))
+        );
+        assert.strictEqual(noCurrencyValues.length, 1, "Only 1 line has no currency.");
+
+        // switch to edit mode
+        const dollarCell = target.querySelectorAll("td.o_field_cell")[0];
+        await click(dollarCell);
+
+        assert.strictEqual(
+            dollarCell.children.length,
+            1,
+            "The cell td should only contain the special div of monetary widget."
+        );
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget input",
+            "The view should have 1 input for editable monetary float."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "9.10",
+            "The input should be rendered without the currency symbol."
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.childNodes[0].textContent,
+            "$",
+            "The input should be preceded by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget  input").value,
+            "108.25",
+            "The typed value should be correctly displayed and formatted on blur"
+        );
+
+        await clickSave(target);
+        assert.strictEqual(
+            dollarCell.textContent,
+            "$\u00a0108.25",
+            "The new value should be correct"
+        );
+    });
+
+    QUnit.test("basic flow in editable list view - monetary field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 9.1,
+                monetary_field: 9.1,
+                currency_id: 1,
+            },
+            {
+                id: 2,
+                float_field: 15.3,
+                monetary_field: 15.3,
+                currency_id: 2,
+            },
+            {
+                id: 3,
+                float_field: false,
+                monetary_field: false,
+                currency_id: 1,
+            },
+            {
+                id: 4,
+                float_field: 5.0,
+                monetary_field: 5.0,
+            },
+        ];
+
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <tree editable="bottom">
+                    <field name="monetary_field"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        });
+
+        const dollarValues = Array.from(target.querySelectorAll("td")).filter((x) =>
+            x.textContent.includes("$")
+        );
+        assert.strictEqual(dollarValues.length, 2, "Only 2 line has dollar as a currency.");
+
+        const euroValues = Array.from(target.querySelectorAll("td")).filter((x) =>
+            x.textContent.includes("€")
+        );
+        assert.strictEqual(euroValues.length, 1, "Only 1 line has euro as a currency.");
+
+        const noCurrencyValues = Array.from(target.querySelectorAll("td.o_data_cell")).filter(
+            (x) => !(x.textContent.includes("€") || x.textContent.includes("$"))
+        );
+        assert.strictEqual(noCurrencyValues.length, 1, "Only 1 line has no currency.");
+
+        // switch to edit mode
+        const dollarCell = target.querySelectorAll("td.o_field_cell")[0];
+        await click(dollarCell);
+
+        assert.strictEqual(
+            dollarCell.children.length,
+            1,
+            "The cell td should only contain the special div of monetary widget."
+        );
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget input",
+            "The view should have 1 input for editable monetary float."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "9.10",
+            "The input should be rendered without the currency symbol."
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").parentNode.childNodes[0].textContent,
+            "$",
+            "The input should be preceded by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_widget input", "108.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget  input").value,
+            "108.25",
+            "The typed value should be correctly displayed and formatted on blur"
+        );
+
+        await clickSave(target);
+        assert.strictEqual(
+            dollarCell.textContent,
+            "$\u00a0108.25",
+            "The new value should be correct"
+        );
+    });
+
+    QUnit.test("changing currency updates the field - float field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 4.2,
+                monetary_field: 4.2,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary").textContent,
+            "$\u00a04.20",
+            "readonly value should contain the currency"
+        );
+
+        await clickEdit(target);
+
+        // replace bottom with new helpers when they exist
+        await click(target, ".o_field_many2one_selection input");
+        const euroM2OListItem = Array.from(
+            target.querySelectorAll(".o_field_many2one_selection li")
+        ).filter((li) => li.textContent === "€")[0];
+        await click(euroM2OListItem);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary div :first-child").value +
+                target.querySelector(".o_field_monetary div :last-child").textContent,
+            "4.20€",
+            "The value should be formatted with new currency on blur."
+        );
+
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary").textContent,
+            "4.20\u00a0€",
+            "The new value should still be correct."
+        );
+    });
+
+    QUnit.test("changing currency updates the field - monetary field", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: 4.2,
+                monetary_field: 4.2,
+                currency_id: 1,
+            },
+        ];
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="monetary_field"/>
+                    <field name="currency_id"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary").textContent,
+            "$\u00a04.20",
+            "readonly value should contain the currency"
+        );
+
+        await clickEdit(target);
+
+        // replace bottom with new helpers when they exist
+        await click(target, ".o_field_many2one_selection input");
+        const euroM2OListItem = Array.from(
+            target.querySelectorAll(".o_field_many2one_selection li")
+        ).filter((li) => li.textContent === "€")[0];
+        await click(euroM2OListItem);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary div :first-child").value +
+                target.querySelector(".o_field_monetary div :last-child").textContent,
+            "4.20€",
+            "The value should be formatted with new currency on blur."
+        );
+
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary").textContent,
+            "4.20\u00a0€",
+            "The new value should still be correct."
+        );
+    });
+
+    QUnit.test("MonetaryField with monetary field given in options", async function (assert) {
+        serverData.models.partner.fields.float_field.type = "monetary";
+        serverData.models.partner.fields.company_currency_id = {
+            string: "Company Currency",
+            type: "many2one",
+            relation: "currency",
+        };
+        serverData.models.partner.records[4].company_currency_id = 2;
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="float_field" options="{'currency_field': 'company_currency_id'}"/>
+                        <field name="company_currency_id"/>
+                    </sheet>
+                </form>`,
+            resId: 5,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_monetary").textContent,
+            "9.10\u00a0€",
+            "field monetary should be formatted with correct currency"
+        );
+    });
+
+    QUnit.test("should keep the focus when being edited in x2many lists", async function (assert) {
+        serverData.models.partner.fields.currency_id.default = 1;
+        serverData.models.partner.fields.m2m = {
+            string: "m2m",
+            type: "many2many",
+            relation: "partner",
+            default: [[6, false, [2]]],
+        };
+        serverData.views = {
+            "partner,false,list": `
+                <tree editable="bottom">
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p"/>
+                        <field name="m2m"/>
+                    </sheet>
+                </form>`,
+        });
+
+        // test the monetary field inside the one2many
+        await addRow(target.querySelector(".o_field_widget[name=p]"));
+        await editInput(target, ".o_field_widget[name=float_field] input", "22");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=float_field] input"),
+            "the focus should still be on the input"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "22.00",
+            "the value should have been formatted on field change"
+        );
+
+        await click(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=p] .o_field_widget[name=float_field] span")
+                .innerHTML,
+            "$&nbsp;22.00"
+        );
+
+        // test the monetary field inside the many2many
+        await click(target.querySelector(".o_field_widget[name=m2m] .o_data_cell"));
+        await editInput(target, ".o_field_widget[name=float_field] input", "22");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=float_field] input"),
+            "the focus should still be on the input"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "22.00",
+            "the value should have been formatted on field change"
+        );
+
+        await click(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=m2m] .o_field_widget[name=float_field] span")
+                .innerHTML,
+            "22.00&nbsp;€"
+        );
+    });
+
+    QUnit.test("MonetaryField with currency set by an onchange", async function (assert) {
+        // this test ensures that the monetary field can be re-rendered with and
+        // without currency (which can happen as the currency can be set by an
+        // onchange)
+        serverData.models.partner.onchanges = {
+            int_field: function (obj) {
+                obj.currency_id = obj.int_field ? 2 : null;
+            },
+        };
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="int_field"/>
+                    <field name="float_field" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(
+            target,
+            ".o_selected_row .o_field_widget[name=float_field] input",
+            "monetary field should have been rendered correctly (without currency)"
+        );
+        assert.containsNone(
+            target,
+            ".o_selected_row .o_field_widget[name=float_field] span",
+            "monetary field should have been rendered correctly (without currency)"
+        );
+
+        // set a value for int_field -> should set the currency and re-render float_field
+        await editInput(target, ".o_field_widget[name=int_field] input", "7");
+        assert.containsOnce(
+            target,
+            ".o_selected_row .o_field_widget[name=float_field] input",
+            "monetary field should have been re-rendered correctly (with currency)"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_selected_row .o_field_widget[name=float_field] span")
+                .innerText,
+            "€",
+            "monetary field should have been re-rendered correctly (with currency)"
+        );
+        await click(target.querySelector(".o_field_widget[name=float_field] input"));
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=float_field] input"),
+            "focus should be on the float_field field's input"
+        );
+
+        // unset the value of int_field -> should unset the currency and re-render float_field
+        await click(target.querySelector(".o_field_widget[name=int_field]"));
+        await editInput(target, ".o_field_widget[name=int_field] input", "0");
+        assert.containsOnce(
+            target,
+            ".o_selected_row .o_field_widget[name=float_field] input",
+            "monetary field should have been re-rendered correctly (without currency)"
+        );
+        assert.containsNone(
+            target,
+            ".o_selected_row .o_field_widget[name=float_field] span",
+            "monetary field should have been re-rendered correctly (without currency)"
+        );
+        await click(target.querySelector(".o_field_widget[name=float_field] input"));
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=float_field] input"),
+            "focus should be on the float_field field's input"
+        );
+    });
+
+    QUnit.test("float widget on monetary field", async function (assert) {
+        serverData.models.partner.fields.monetary = { string: "Monetary", type: "monetary" };
+        serverData.models.partner.records[0].monetary = 9.99;
+        serverData.models.partner.records[0].currency_id = 1;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="monetary" widget="float"/>
+                        <field name="currency_id" invisible="1"/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=monetary]").textContent,
+            "9.99",
+            "value should be correctly formatted (with the float formatter)"
+        );
+    });
+
+    QUnit.test("float field with monetary widget and decimal precision", async function (assert) {
+        serverData.models.partner.records = [
+            {
+                id: 1,
+                float_field: -8.89859,
+                currency_id: 1,
+            },
+        ];
+
+        patchWithCleanup(session, {
+            currencies: {
+                ...session.currencies,
+                1: {
+                    name: "USD",
+                    symbol: "$",
+                    position: "before",
+                    digits: [0, 1],
+                },
+            },
+        });
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="float_field" widget="monetary" options="{'field_digits': True}"/>
+                        <field name="currency_id" invisible="1"/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a0-8.9",
+            "The value should be displayed properly."
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "-8.9",
+            "The input should be rendered without the currency symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").parentElement.firstChild
+                .textContent,
+            "$",
+            "The input should be preceded by a span containing the currency symbol."
+        );
+
+        await editInput(target, ".o_field_monetary input", "109.2458938598598");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "109.2",
+            "The value should should be formatted on blur."
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "$\u00a0109.2",
+            "The new value should be rounded properly."
+        );
+    });
+
+    QUnit.test("MonetaryField without currency symbol", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 5,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="float_field" widget="monetary" options="{'no_symbol': True}" />
+                        <field name="currency_id" invisible="1" />
+                    </sheet>
+                </form>`,
+        });
+
+        await clickEdit(target);
+
+        // Non-breaking space between the currency and the amount
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "9.10",
+            "The currency symbol is not displayed"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/numeric_fields_tests.js b/addons/web/static/tests/views/fields/numeric_fields_tests.js
new file mode 100644
index 00000000000..212eb128a62
--- /dev/null
+++ b/addons/web/static/tests/views/fields/numeric_fields_tests.js
@@ -0,0 +1,185 @@
+/** @odoo-module **/
+
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import { registry } from "@web/core/registry";
+import { click, getFixture, nextTick } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        qux: { string: "Qux", type: "float", digits: [16, 1], searchable: true },
+                        currency_id: {
+                            string: "Currency",
+                            type: "many2one",
+                            relation: "currency",
+                            searchable: true,
+                        },
+                        float_factor_field: {
+                            string: "Float Factor",
+                            type: "float_factor",
+                        },
+                        percentage: {
+                            string: "Percentage",
+                            type: "percentage",
+                        },
+                        monetary: { string: "Monetary", type: "monetary" },
+                        progressbar: {
+                            type: "integer",
+                        },
+                        progressmax: {
+                            type: "float",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            int_field: 10,
+                            qux: 0.44444,
+                            float_factor_field: 9.99,
+                            percentage: 0.99,
+                            monetary: 9.99,
+                            currency_id: 1,
+                            progressbar: 69,
+                            progressmax: 5.41,
+                        },
+                    ],
+                },
+                currency: {
+                    fields: {
+                        digits: { string: "Digits" },
+                        symbol: { string: "Currency Sumbol", type: "char", searchable: true },
+                        position: { string: "Currency Position", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "$",
+                            symbol: "$",
+                            position: "before",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("Numeric fields");
+
+    QUnit.test(
+        "Numeric fields: fields with keydown on numpad decimal key",
+        async function (assert) {
+            registry.category("services").remove("localization");
+            registry
+                .category("services")
+                .add("localization", makeFakeLocalizationService({ decimalPoint: "🇧🇪" }));
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_factor_field" options="{'factor': 0.5}"/>
+                        <field name="qux"/>
+                        <field name="int_field"/>
+                        <field name="monetary"/>
+                        <field name="currency_id" invisible="1"/>
+                        <field name="percentage"/>
+                        <field name="progressbar" widget="progressbar" options="{'editable': true, 'max_value': 'qux', 'edit_max_value': true, 'edit_current_value': true}"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            // Record edit mode
+            await click(target.querySelector(".o_form_button_edit"));
+
+            // Get all inputs
+            const floatFactorField = target.querySelector(".o_field_float_factor input");
+            const floatInput = target.querySelector(".o_field_float input");
+            const integerInput = target.querySelector(".o_field_integer input");
+            const monetaryInput = target.querySelector(".o_field_monetary input");
+            const percentageInput = target.querySelector(".o_field_percentage input");
+            const progressbarInputs = target.querySelectorAll(".o_field_progressbar input");
+
+            // Dispatch numpad "dot" and numpad "comma" keydown events to all inputs and check
+            // Numpad "comma" is specific to some countries (Brazil...)
+            floatFactorField.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            floatFactorField.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(floatFactorField.value, "5🇧🇪00🇧🇪🇧🇪");
+
+            floatInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            floatInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(floatInput.value, "0🇧🇪4🇧🇪🇧🇪");
+
+            integerInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            integerInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(integerInput.value, "10🇧🇪🇧🇪");
+
+            monetaryInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            monetaryInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(monetaryInput.value, "9🇧🇪99🇧🇪🇧🇪");
+
+            percentageInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            percentageInput.dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(percentageInput.value, "99🇧🇪🇧🇪");
+
+            progressbarInputs[0].dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            progressbarInputs[0].dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(progressbarInputs[0].value, "69🇧🇪🇧🇪");
+
+            progressbarInputs[1].dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "." })
+            );
+            progressbarInputs[1].dispatchEvent(
+                new KeyboardEvent("keydown", { code: "NumpadDecimal", key: "," })
+            );
+            await nextTick();
+            assert.strictEqual(progressbarInputs[1].value, "0🇧🇪44🇧🇪🇧🇪");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/one2many_field_tests.js b/addons/web/static/tests/views/fields/one2many_field_tests.js
new file mode 100644
index 00000000000..e18cde4e83c
--- /dev/null
+++ b/addons/web/static/tests/views/fields/one2many_field_tests.js
@@ -0,0 +1,11915 @@
+/** @odoo-module **/
+
+import AbstractField from "web.AbstractField";
+import {
+    addRow,
+    click,
+    clickCreate,
+    clickDiscard,
+    clickEdit,
+    clickSave,
+    clickM2OHighlightedItem,
+    clickOpenedDropdownItem,
+    clickOpenM2ODropdown,
+    dragAndDrop,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+    removeRow,
+    selectDropdownItem,
+    triggerEvent,
+    triggerEvents,
+    triggerHotkey,
+} from "@web/../tests/helpers/utils";
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import BasicModel from "web.BasicModel";
+import { browser } from "@web/core/browser/browser";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { FieldOne2Many } from "web.relational_fields";
+import { getNextTabableElement } from "@web/core/utils/ui";
+import fieldRegistry from "web.field_registry";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+
+let serverData;
+let target;
+
+function patchSetTimeout() {
+    patchWithCleanup(browser, {
+        setTimeout(fn) {
+            window.setTimeout(fn, 0);
+        },
+    });
+}
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        qux: { string: "Qux", type: "float", digits: [16, 1] },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        turtles: {
+                            string: "one2many turtle field",
+                            type: "one2many",
+                            relation: "turtle",
+                            relation_field: "turtle_trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                        date: { string: "Some Date", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        user_id: { string: "User", type: "many2one", relation: "user" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44,
+                            p: [],
+                            turtles: [2],
+                            timmy: [],
+                            trululu: 4,
+                            user_id: 17,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            p: [],
+                            timmy: [],
+                            trululu: 1,
+                            product_id: 37,
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                            user_id: 17,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            bar: false,
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        turtle_foo: { string: "Foo", type: "char" },
+                        turtle_bar: { string: "Bar", type: "boolean", default: true },
+                        turtle_int: { string: "int", type: "integer", sortable: true },
+                        turtle_qux: {
+                            string: "Qux",
+                            type: "float",
+                            digits: [16, 1],
+                            required: true,
+                            default: 1.5,
+                        },
+                        turtle_description: { string: "Description", type: "text" },
+                        turtle_trululu: {
+                            string: "Trululu",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        turtle_ref: {
+                            string: "Reference",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            required: true,
+                        },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "leonardo",
+                            turtle_bar: true,
+                            turtle_foo: "yop",
+                            partner_ids: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "donatello",
+                            turtle_bar: true,
+                            turtle_foo: "blip",
+                            turtle_int: 9,
+                            partner_ids: [2, 4],
+                        },
+                        {
+                            id: 3,
+                            display_name: "raphael",
+                            product_id: 37,
+                            turtle_bar: false,
+                            turtle_foo: "kawa",
+                            turtle_int: 21,
+                            turtle_qux: 9.8,
+                            partner_ids: [],
+                            turtle_ref: "product,37",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            string: "one2many partners field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                            partner_ids: [1, 2],
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("One2ManyField");
+
+    QUnit.test(
+        "New record with a o2m also with 2 new records, ordered, and resequenced",
+        async function (assert) {
+            // Needed to have two new records in a single stroke
+            serverData.models.partner.onchanges = {
+                foo: function (obj) {
+                    obj.p = [[5], [0, 0, { trululu: false }], [0, 0, { trululu: false }]];
+                },
+            };
+
+            let startAssert = false;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p">
+                            <tree editable="bottom" default_order="int_field">
+                                <field name="int_field" widget="handle"/>
+                                <field name="trululu"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (startAssert) {
+                        assert.step(args.method + " " + args.model);
+                    }
+                },
+                resId: 1,
+            });
+
+            startAssert = true;
+
+            await clickCreate(target);
+
+            // change the int_field through drag and drop
+            // that way, we'll trigger the sorting and the name_get
+            // of the lines of "p"
+            await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr", "top");
+
+            assert.verifySteps(["onchange partner"]);
+        }
+    );
+
+    QUnit.test(
+        "O2M List with pager, decoration and default_order: add and cancel adding",
+        async function (assert) {
+            // The decoration on the list implies that its condition will be evaluated
+            // against the data of the field (actual records *displayed*)
+            // If one data is wrongly formed, it will crash
+            // This test adds then cancels a record in a paged, ordered, and decorated list
+            // That implies prefetching of records for sorting
+            // and evaluation of the decoration against *visible records*
+
+            serverData.models.partner.records[0].p = [2, 4];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom" limit="1" decoration-muted="foo != False" default_order="display_name">
+                                <field name="foo" invisible="1"/>
+                                <field name="display_name" />
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await click(target, ".o_form_button_edit");
+
+            await addRow(target, ".o_field_x2many_list");
+
+            assert.containsN(
+                target,
+                ".o_field_x2many_list .o_data_row",
+                2,
+                "There should be 2 rows"
+            );
+
+            const expectedSelectedRow = target.querySelectorAll(
+                ".o_field_x2many_list .o_data_row"
+            )[1];
+            const actualSelectedRow = target.querySelector(".o_selected_row");
+            assert.equal(
+                actualSelectedRow[0],
+                expectedSelectedRow[0],
+                "The selected row should be the new one"
+            );
+
+            // Cancel Creation
+            triggerEvent(actualSelectedRow, "input", "keydown", { key: "Escape" });
+            await nextTick();
+            assert.containsOnce(
+                target,
+                ".o_field_x2many_list .o_data_row",
+                "There should be 1 row"
+            );
+        }
+    );
+
+    QUnit.test("O2M with parented m2o and domain on parent.m2o", async function (assert) {
+        assert.expect(4);
+
+        // Records in an o2m can have a m2o pointing to themselves.
+        // In that case, a domain evaluation on that field followed by name_search
+        // shouldn't send virtual_ids to the server.
+
+        patchWithCleanup(AutoComplete, {
+            delay: 0,
+        });
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+
+        serverData.models.turtle.fields.parent_id = {
+            string: "Parent",
+            type: "many2one",
+            relation: "turtle",
+        };
+        serverData.views = {
+            "turtle,false,form": `
+                <form>
+                    <field name="parent_id" domain="[('id', 'in', parent.turtles)]"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="parent_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, { kwargs }) {
+                if (route === "/web/dataset/call_kw/turtle/name_search") {
+                    assert.deepEqual(kwargs.args, [["id", "in", []]]);
+                }
+            },
+        });
+
+        await addRow(target);
+
+        await clickOpenM2ODropdown(target, "parent_id");
+        await editInput(target, ".o_field_widget[name=parent_id] input", "ABC");
+        await clickOpenedDropdownItem(target, "parent_id", "Create and edit...");
+
+        await click(target, ".modal:not(.o_inactive_modal) .modal-footer .o_form_button_save");
+        await click(target, ".modal:not(.o_inactive_modal) .o_form_button_save_new");
+
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "The main record should have the new record in its o2m"
+        );
+
+        await click(target, ".o_field_many2one input");
+    });
+
+    QUnit.test("one2many list editable with cell readonly modifier", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].turtles = [1, 2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="turtles" invisible="1"/>
+                            <field name="foo" attrs="{&quot;readonly&quot; : [(&quot;turtles&quot;, &quot;!=&quot;, [])] }"/>
+                            <field name="qux" attrs="{&quot;readonly&quot; : [(&quot;turtles&quot;, &quot;!=&quot;, [])] }"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.deepEqual(
+                        args.args[1].p[1][2],
+                        { foo: "ff", qux: 99 },
+                        "The right values should be written"
+                    );
+                }
+            },
+        });
+        await clickEdit(target);
+        await addRow(target);
+
+        const targetInput = target.querySelector(".o_selected_row [name=foo] input");
+        assert.equal(
+            targetInput,
+            document.activeElement,
+            "The first input of the line should have the focus"
+        );
+
+        // Simulating hitting the 'f' key twice
+        await editInput(targetInput, null, "f");
+        await editInput(targetInput, null, targetInput.value + "f");
+
+        assert.equal(
+            targetInput,
+            document.activeElement,
+            "The first input of the line should still have the focus"
+        );
+
+        // Simulating a TAB key
+        triggerHotkey("Tab");
+        await nextTick();
+        const secondTarget = target.querySelector(".o_selected_row [name=qux] input");
+        await editInput(secondTarget, null, 9);
+        await editInput(secondTarget, null, secondTarget.value + 9);
+
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many basic properties", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="Partner page">
+                                <field name="p">
+                                    <tree>
+                                        <field name="foo"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.verifySteps(["get_views", "read", "read"]);
+        assert.containsNone(target, "td.o_list_record_selector");
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+        assert.containsNone(target, "td.o_list_record_remove", 1);
+
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_field_x2many_list_row_add");
+        assert.hasAttrValue(target.querySelector(".o_field_x2many_list_row_add"), "colspan", "2");
+        assert.containsOnce(target, "td.o_list_record_remove", 1);
+    });
+
+    QUnit.test("transferring class attributes in one2many sub fields", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_foo" class="hey"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        assert.containsOnce(target, "td.hey");
+
+        await clickEdit(target);
+        assert.containsOnce(target, "td.hey");
+
+        await click(target.querySelector("td.o_data_cell"));
+        assert.containsOnce(target, 'td.hey div[name="turtle_foo"] input'); // WOWL to check! hey on input?
+    });
+
+    QUnit.test("one2many with date and datetime", async function (assert) {
+        const originalZone = luxon.Settings.defaultZone;
+        luxon.Settings.defaultZone = new luxon.FixedOffsetZone.instance(120);
+        registerCleanup(() => {
+            luxon.Settings.defaultZone = originalZone;
+        });
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="Partner page">
+                                <field name="p">
+                                    <tree>
+                                        <field name="date"/>
+                                        <field name="datetime"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        assert.strictEqual(target.querySelector("td").textContent, "01/25/2017");
+        assert.strictEqual(target.querySelectorAll("td")[1].textContent, "12/12/2016 12:55:05");
+    });
+
+    QUnit.test("rendering with embedded one2many", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="P page">
+                                <field name="p">
+                                    <tree>
+                                        <field name="foo"/>
+                                        <field name="bar"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        const firstHeader = target.querySelector("thead th");
+        assert.strictEqual(firstHeader.textContent, "Foo");
+        const firstValue = target.querySelector("tbody td");
+        assert.strictEqual(firstValue.textContent, "blip");
+    });
+
+    QUnit.test(
+        "use the limit attribute in arch (in field o2m inline tree view)",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="2">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.model === "turtle") {
+                        assert.deepEqual(args.args[0], [1, 2]);
+                    }
+                },
+            });
+            assert.containsN(target, ".o_data_row", 2);
+        }
+    );
+
+    QUnit.test(
+        "use the limit attribute in arch (in field o2m non inline tree view)",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+            serverData.views = {
+                "turtle,false,list": `<tree limit="2"><field name="turtle_foo"/></tree>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="turtles" widget="one2many"/></form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.model === "turtle" && args.method === "read") {
+                        assert.deepEqual(args.args[0], [1, 2]);
+                    }
+                },
+            });
+            assert.containsN(target, ".o_data_row", 2);
+        }
+    );
+
+    QUnit.test("one2many with default_order on view not inline", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        serverData.views = {
+            "turtle,false,list": `
+                <tree default_order="turtle_foo">
+                    <field name="turtle_int"/>
+                    <field name="turtle_foo"/>
+                </tree>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="Turtles">
+                                <field name="turtles" widget="one2many"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_one2many .o_data_cell")].map(
+                (el) => el.textContent
+            ),
+            ["9", "blip", "21", "kawa", "0", "yop"]
+        );
+    });
+
+    QUnit.test("embedded one2many with widget", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="P page">
+                                <field name="p">
+                                    <tree>
+                                        <field name="int_field" widget="handle"/>
+                                        <field name="foo"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "span.o_row_handle");
+    });
+
+    QUnit.test("embedded one2many with handle widget", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        serverData.models.partner.onchanges = {
+            turtles: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree default_order="turtle_int">
+                            <field name="turtle_int" widget="handle"/>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            async mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step("onchange");
+                }
+            },
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.o_list_char")].map((el) => el.innerText),
+            ["yop", "blip", "kawa"]
+        );
+
+        await clickEdit(target);
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.o_list_char")].map((el) => el.innerText),
+            ["yop", "blip", "kawa"]
+        );
+
+        // Drag and drop the second line in first position
+        await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr", "top");
+
+        assert.verifySteps(["onchange"]);
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.o_list_char")].map((el) => el.innerText),
+            ["blip", "yop", "kawa"]
+        );
+
+        await clickSave(target);
+
+        assert.deepEqual(
+            serverData.models.turtle.records.map((r) => {
+                return {
+                    id: r.id,
+                    turtle_foo: r.turtle_foo,
+                    turtle_int: r.turtle_int,
+                };
+            }),
+            [
+                { id: 1, turtle_foo: "yop", turtle_int: 1 },
+                { id: 2, turtle_foo: "blip", turtle_int: 0 },
+                { id: 3, turtle_foo: "kawa", turtle_int: 21 },
+            ]
+        );
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.o_list_char")].map((el) => el.innerText),
+            ["blip", "yop", "kawa"]
+        );
+    });
+
+    QUnit.test("onchange for embedded one2many in a one2many", async function (assert) {
+        serverData.models.turtle.fields.partner_ids.type = "one2many";
+        serverData.models.turtle.records[0].partner_ids = [1];
+        serverData.models.partner.records[0].turtles = [1];
+
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.turtles = [
+                    [5, false, false],
+                    [
+                        1,
+                        1,
+                        {
+                            turtle_foo: "hop",
+                            partner_ids: [
+                                [5, false, false],
+                                [4, 1, false],
+                            ],
+                        },
+                    ],
+                ];
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    const expectedResultTurtles = [[1, 1, { turtle_foo: "hop" }]];
+                    assert.deepEqual(args.args[1].turtles, expectedResultTurtles);
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await click(target.querySelectorAll(".o_data_cell")[1]);
+        await editInput(target, ".o_selected_row .o_field_widget[name=turtle_foo] input", "hop");
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "onchange for embedded one2many in a one2many with a second page",
+        async function (assert) {
+            serverData.models.turtle.fields.partner_ids.type = "one2many";
+            serverData.models.turtle.records[0].partner_ids = [1];
+            // we need a second page, so we set two records and only display one per page
+            serverData.models.partner.records[0].turtles = [1, 2];
+
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.turtles = [
+                        [5, false, false],
+                        [
+                            1,
+                            1,
+                            {
+                                turtle_foo: "hop",
+                                partner_ids: [
+                                    [5, false, false],
+                                    [4, 1, false],
+                                ],
+                            },
+                        ],
+                        [
+                            1,
+                            2,
+                            {
+                                turtle_foo: "blip",
+                                partner_ids: [
+                                    [5, false, false],
+                                    [4, 2, false],
+                                    [4, 4, false],
+                                ],
+                            },
+                        ],
+                    ];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom" limit="1">
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        const expectedResultTurtles = [
+                            [1, 1, { turtle_foo: "hop" }],
+                            [
+                                1,
+                                2,
+                                {
+                                    partner_ids: [
+                                        [4, 2, false],
+                                        [4, 4, false],
+                                    ],
+                                    turtle_foo: "blip",
+                                },
+                            ],
+                        ];
+                        assert.deepEqual(args.args[1].turtles, expectedResultTurtles);
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            await click(target.querySelectorAll(".o_data_cell")[1]);
+            await editInput(
+                target,
+                ".o_selected_row .o_field_widget[name=turtle_foo] input",
+                "hop"
+            );
+            await clickSave(target);
+        }
+    );
+
+    QUnit.test(
+        "onchange for embedded one2many in a one2many updated by server",
+        async function (assert) {
+            // here we test that after an onchange, the embedded one2many field has
+            // been updated by a new list of ids by the server response, to this new
+            // list should be correctly sent back at save time
+            assert.expect(3);
+
+            serverData.models.turtle.fields.partner_ids.type = "one2many";
+            serverData.models.partner.records[0].turtles = [2];
+            serverData.models.turtle.records[1].partner_ids = [2];
+
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.turtles = [
+                        [5],
+                        [
+                            1,
+                            2,
+                            {
+                                turtle_foo: "hop",
+                                partner_ids: [[5], [4, 2], [4, 4]],
+                            },
+                        ],
+                    ];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (route === "/web/dataset/call_kw/partner/write") {
+                        var expectedResultTurtles = [
+                            [
+                                1,
+                                2,
+                                {
+                                    partner_ids: [
+                                        [4, 2, false],
+                                        [4, 4, false],
+                                    ],
+                                    turtle_foo: "hop",
+                                },
+                            ],
+                        ];
+                        assert.deepEqual(
+                            args.args[1].turtles,
+                            expectedResultTurtles,
+                            "The right values should be written"
+                        );
+                    }
+                },
+            });
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        ".o_data_cell.o_many2many_tags_cell .o_tag_badge_text"
+                    ),
+                ].map((el) => el.textContent),
+                ["second record"]
+            );
+
+            await clickEdit(target);
+            await click(target.querySelectorAll(".o_data_cell")[1]);
+            await editInput(target, ".o_selected_row [name=turtle_foo] input", "hop");
+            await clickSave(target);
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        ".o_data_cell.o_many2many_tags_cell .o_tag_badge_text"
+                    ),
+                ].map((el) => el.textContent),
+                ["second record", "aaa"]
+            );
+        }
+    );
+
+    QUnit.test("onchange for embedded one2many with handle widget", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        let partnerOnchange = 0;
+        serverData.models.partner.onchanges = {
+            turtles: function () {
+                partnerOnchange++;
+            },
+        };
+        let turtleOnchange = 0;
+        serverData.models.turtle.onchanges = {
+            turtle_int: function () {
+                turtleOnchange++;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree default_order="turtle_int">
+                            <field name="turtle_int" widget="handle"/>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "yop",
+            "blip",
+            "kawa",
+        ]);
+        // Drag and drop the second line in first position
+        await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr", "top");
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "blip",
+            "yop",
+            "kawa",
+        ]);
+        assert.strictEqual(turtleOnchange, 2, "should trigger one onchange per line updated");
+        assert.strictEqual(partnerOnchange, 1, "should trigger only one onchange on the parent");
+    });
+
+    QUnit.test(
+        "onchange for embedded one2many with handle widget using same sequence",
+        async function (assert) {
+            serverData.models.turtle.records[0].turtle_int = 1;
+            serverData.models.turtle.records[1].turtle_int = 1;
+            serverData.models.turtle.records[2].turtle_int = 1;
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+            var turtleOnchange = 0;
+            serverData.models.turtle.onchanges = {
+                turtle_int: function () {
+                    turtleOnchange++;
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree default_order="turtle_int">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(
+                            args.args[1].turtles,
+                            [
+                                [1, 2, { turtle_int: 1 }],
+                                [1, 1, { turtle_int: 2 }],
+                                [1, 3, { turtle_int: 3 }],
+                            ],
+                            "should change all lines that have changed (the first one doesn't change because it has the same sequence)"
+                        );
+                    }
+                },
+            });
+
+            await clickEdit(target);
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["yop", "blip", "kawa"]
+            );
+
+            // Drag and drop the second line in first position
+            await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr", "top");
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["blip", "yop", "kawa"]
+            );
+            assert.strictEqual(turtleOnchange, 3, "should update all lines");
+
+            await clickSave(target);
+        }
+    );
+
+    QUnit.test(
+        "onchange (with command 5) for embedded one2many with handle widget",
+        async function (assert) {
+            const ids = [];
+            for (let i = 10; i < 50; i++) {
+                const id = 10 + i;
+                ids.push(id);
+                serverData.models.turtle.records.push({
+                    id: id,
+                    turtle_int: 0,
+                    turtle_foo: "#" + id,
+                });
+            }
+            ids.push(1, 2, 3);
+            serverData.models.partner.records[0].turtles = ids;
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.turtles = [[5]].concat(obj.turtles);
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom" default_order="turtle_int">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target, "div[name=turtles] .o_pager_next");
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["yop", "blip", "kawa"]
+            );
+
+            await clickEdit(target);
+
+            await click(target.querySelector(".o_data_cell.o_list_char"));
+            await editInput(target, '.o_list_renderer div[name="turtle_foo"] input', "blurp");
+
+            // Drag and drop the third line in second position
+            await dragAndDrop("tbody tr:nth-child(3) .o_handle_cell", "tbody tr:nth-child(2)");
+
+            // need to unselect row...
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["blurp", "kawa", "blip"]
+            );
+
+            await clickSave(target);
+            await click(target, 'div[name="turtles"] .o_pager_next');
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["blurp", "kawa", "blip"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "onchange with modifiers for embedded one2many on the second page",
+        async function (assert) {
+            const ids = [];
+            for (let i = 10; i < 60; i++) {
+                const id = 10 + i;
+                ids.push(id);
+                serverData.models.turtle.records.push({
+                    id: id,
+                    turtle_int: 0,
+                    turtle_foo: "#" + id,
+                });
+            }
+            ids.push(1, 2, 3);
+            serverData.models.partner.records[0].turtles = ids;
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    // TODO: make this test more 'difficult'
+                    // For now, the server only returns UPDATE commands (no LINK TO)
+                    // even though it should do it (for performance reasons)
+                    // var turtles = obj.turtles.splice(0, 20);
+
+                    const turtles = [[5]];
+                    // create UPDATE commands for each records (this is the server
+                    // usual answer for onchange)
+                    for (const k in obj.turtles) {
+                        const change = obj.turtles[k];
+                        const record = serverData.models.turtle.records.find(
+                            (r) => r.id === change[1]
+                        );
+                        if (change[0] === 1) {
+                            Object.assign(record, change[2]);
+                        }
+                        turtles.push([1, record.id, record]);
+                    }
+                    obj.turtles = turtles;
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom" default_order="turtle_int" limit="10">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                                <field name="turtle_qux" attrs="{'readonly': [('turtle_foo', '=', False)]}"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            const getTurtleFooValues = () => {
+                return getNodesTextContent(
+                    target.querySelectorAll(".o_data_cell.o_list_char")
+                ).join("");
+            };
+
+            await clickEdit(target);
+            assert.strictEqual(getTurtleFooValues(), "#20#21#22#23#24#25#26#27#28#29");
+
+            await click(target.querySelector(".o_data_cell.o_list_char"));
+            await editInput(target, "div[name=turtle_foo] input", "blurp");
+            // click outside of the one2many to unselect the row
+            await click(target, ".o_cp_bottom_left");
+            assert.strictEqual(getTurtleFooValues(), "blurp#21#22#23#24#25#26#27#28#29");
+
+            // the domain fail if the widget does not use the already loaded data.
+            await clickDiscard(target);
+            assert.containsNone(target, ".modal");
+            assert.strictEqual(getTurtleFooValues(), "#20#21#22#23#24#25#26#27#28#29");
+
+            await clickEdit(target);
+            // Drag and drop the third line in second position
+            await dragAndDrop("tbody tr:nth-child(3) .o_handle_cell", "tbody tr:nth-child(2)");
+            assert.strictEqual(getTurtleFooValues(), "#20#30#31#32#33#34#35#36#37#38");
+
+            // Drag and drop the third line in second position
+            await dragAndDrop("tbody tr:nth-child(3) .o_handle_cell", "tbody tr:nth-child(2)");
+            assert.strictEqual(getTurtleFooValues(), "#20#39#40#41#42#43#44#45#46#47");
+
+            await click(target, ".o_cp_bottom_left");
+            assert.strictEqual(getTurtleFooValues(), "#20#39#40#41#42#43#44#45#46#47");
+
+            await clickDiscard(target);
+            assert.containsNone(target, ".modal");
+            assert.strictEqual(getTurtleFooValues(), "#20#21#22#23#24#25#26#27#28#29");
+        }
+    );
+
+    QUnit.test("onchange followed by edition on the second page", async function (assert) {
+        const ids = [];
+        for (let i = 1; i < 85; i++) {
+            const id = 10 + i;
+            ids.push(id);
+            serverData.models.turtle.records.push({
+                id: id,
+                turtle_int: (id / 3) | 0,
+                turtle_foo: "#" + i,
+            });
+        }
+        ids.splice(41, 0, 1, 2, 3);
+        serverData.models.partner.records[0].turtles = ids;
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.turtles = [[5]].concat(obj.turtles);
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="turtles">
+                                <tree editable="top" default_order="turtle_int">
+                                    <field name="turtle_int" widget="handle"/>
+                                    <field name="turtle_foo"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+
+        await click(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody tr td.o_handle_cell"
+            )[1]
+        );
+        await editInput(
+            target,
+            '.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"] input',
+            "value 1"
+        );
+        await click(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody tr td.o_handle_cell"
+            )[2]
+        );
+        await editInput(
+            target,
+            '.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"] input',
+            "value 2"
+        );
+
+        assert.containsN(target, ".o_data_row", 40, "should display 40 records");
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many .o_list_renderer .o_data_cell.o_list_char")
+                .innerText,
+            "#39",
+            "should display '#39' at the first line"
+        );
+
+        await addRow(target);
+
+        assert.containsN(
+            target,
+            ".o_data_row",
+            40,
+            "should display 39 records and the create line"
+        );
+
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "should display the create line in first position"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"]')
+                .innerText,
+            "",
+            "should be an empty input"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer .o_data_cell.o_list_char"
+            )[1].innerText,
+            "#39",
+            "should display '#39' at the second line"
+        );
+
+        await editInput(target, ".o_data_row input", "value 3");
+
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "should display the create line in first position"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer .o_data_cell.o_list_char"
+            )[1].innerText,
+            "#39",
+            "should display '#39' at the second line after onchange"
+        );
+
+        await addRow(target);
+
+        assert.containsN(
+            target,
+            ".o_data_row",
+            40,
+            "should display 39 records and the create line"
+        );
+        assert.deepEqual(
+            [
+                ...target.querySelectorAll(
+                    ".o_field_one2many .o_list_renderer .o_data_cell.o_list_char"
+                ),
+            ]
+                .slice(0, 3)
+                .map((el) => el.innerText),
+            ["", "value 3", "#39"]
+        );
+    });
+
+    QUnit.test("onchange followed by edition on the second page (part 2)", async function (assert) {
+        const ids = [];
+        for (let i = 1; i < 85; i++) {
+            const id = 10 + i;
+            ids.push(id);
+            serverData.models.turtle.records.push({
+                id: id,
+                turtle_int: (id / 3) | 0,
+                turtle_foo: "#" + i,
+            });
+        }
+        ids.splice(41, 0, 1, 2, 3);
+        serverData.models.partner.records[0].turtles = ids;
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.turtles = [[5]].concat(obj.turtles);
+            },
+        };
+
+        // bottom order
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="turtles">
+                                    <tree editable="bottom" default_order="turtle_int">
+                                        <field name="turtle_int" widget="handle"/>
+                                        <field name="turtle_foo"/>
+                                    </tree>
+                                </field>
+                            </group>
+                        </sheet>
+                    </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+
+        await click(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody tr td.o_handle_cell"
+            )[1]
+        );
+        await editInput(
+            target,
+            '.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"] input',
+            "value 1"
+        );
+        await click(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody tr td.o_handle_cell"
+            )[2]
+        );
+        await editInput(
+            target,
+            '.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"] input',
+            "value 2"
+        );
+
+        assert.containsN(target, ".o_data_row", 40, "should display 40 records");
+        assert.strictEqual(
+            target.querySelector(
+                ".o_field_one2many .o_list_renderer tbody .o_data_cell.o_list_char"
+            ).innerText,
+            "#39",
+            "should display '#39' at the first line"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody .o_data_cell.o_list_char"
+            )[39].innerText,
+            "#77",
+            "should display '#77' at the last line"
+        );
+
+        await addRow(target);
+
+        assert.containsN(
+            target,
+            ".o_data_row",
+            41,
+            "should display 41 records and the create line"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(
+                ".o_field_one2many .o_list_renderer tbody .o_data_cell.o_list_char"
+            )[39].innerText,
+            "#77",
+            "should display '#77' at the penultimate line"
+        );
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[40],
+            "o_selected_row",
+            "should display the create line in first position"
+        );
+
+        await editInput(
+            target,
+            '.o_field_one2many .o_list_renderer tbody div[name="turtle_foo"] input',
+            "value 3"
+        );
+        await addRow(target);
+
+        assert.containsN(
+            target,
+            ".o_data_row",
+            42,
+            "should display 42 records and the create line"
+        );
+        assert.deepEqual(
+            [
+                ...target.querySelectorAll(
+                    ".o_field_one2many .o_list_renderer tbody .o_data_cell.o_list_char"
+                ),
+            ]
+                .slice(39)
+                .map((el) => el.innerText),
+            ["#77", "value 3", ""]
+        );
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[41],
+            "o_selected_row",
+            "should display the create line in first position"
+        );
+    });
+
+    QUnit.test("onchange returning a command 6 for an x2many", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo(obj) {
+                obj.turtles = [[6, false, [1, 2, 3]]];
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="turtles">
+                        <tree>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.containsOnce(target, ".o_data_row");
+
+        // change the value of foo to trigger the onchange
+        await editInput(target, ".o_field_widget[name=foo] input", "some value");
+        assert.containsN(target, ".o_data_row", 3);
+    });
+
+    QUnit.test(
+        "x2many fields inside x2manys are fetched after an onchange",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.turtle.records[0].partner_ids = [1];
+            serverData.models.partner.onchanges = {
+                foo: function (obj) {
+                    obj.turtles = [[5], [4, 1], [4, 2], [4, 3]];
+                },
+            };
+
+            let checkRPC = false;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="foo"/>
+                                <field name="turtles">
+                                    <tree>
+                                        <field name="turtle_foo"/>
+                                        <field name="partner_ids" widget="many2many_tags"/>
+                                    </tree>
+                                </field>
+                            </group>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (checkRPC && args.method === "read" && args.model === "partner") {
+                        assert.deepEqual(
+                            args.args[1],
+                            ["display_name"],
+                            "should only read the display_name for the m2m tags"
+                        );
+                        assert.deepEqual(
+                            args.args[0],
+                            [1],
+                            "should only read the display_name of the unknown record"
+                        );
+                    }
+                },
+                resId: 1,
+            });
+
+            await clickEdit(target);
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "there should be one record in the relation"
+            );
+            assert.strictEqual(
+                target
+                    .querySelector(".o_data_row .o_field_widget[name=partner_ids]")
+                    .textContent.replace(/\s/g, ""),
+                "secondrecordaaa",
+                "many2many_tags should be correctly displayed"
+            );
+
+            // change the value of foo to trigger the onchange
+            checkRPC = true; // enable flag to check read RPC for the m2m field
+            await editInput(target, ".o_field_widget[name=foo] input", "some value");
+
+            assert.containsN(
+                target,
+                ".o_data_row",
+                3,
+                "there should be three records in the relation"
+            );
+            assert.strictEqual(
+                target
+                    .querySelector(".o_data_row .o_field_widget[name=partner_ids]")
+                    .textContent.trim(),
+                "first record",
+                "many2many_tags should be correctly displayed"
+            );
+        }
+    );
+
+    QUnit.test(
+        "reference fields inside x2manys are fetched after an onchange",
+        async function (assert) {
+            assert.expect(5);
+
+            serverData.models.turtle.records[1].turtle_ref = "product,41";
+            serverData.models.partner.onchanges = {
+                foo: function (obj) {
+                    obj.turtles = [[5], [4, 1], [4, 2], [4, 3]];
+                },
+            };
+
+            var checkRPC = false;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="foo"/>
+                                <field name="turtles">
+                                    <tree>
+                                        <field name="turtle_foo"/>
+                                        <field name="turtle_ref" class="ref_field"/>
+                                        </tree>
+                                </field>
+                            </group>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (checkRPC && args.method === "name_get") {
+                        assert.deepEqual(
+                            args.args[0],
+                            [37],
+                            "should only fetch the name_get of the unknown record"
+                        );
+                    }
+                },
+                resId: 1,
+            });
+            await clickEdit(target);
+
+            assert.containsOnce(target, ".o_data_row");
+            assert.deepEqual(
+                [...target.querySelectorAll(".ref_field")].map((el) => el.textContent),
+                ["xpad"]
+            );
+
+            // change the value of foo to trigger the onchange
+            checkRPC = true; // enable flag to check read RPC for reference field
+            await editInput(target, ".o_field_widget[name=foo] input", "some value");
+
+            assert.containsN(target, ".o_data_row", 3);
+            assert.deepEqual(
+                [...target.querySelectorAll(".ref_field")].map((el) => el.textContent),
+                ["", "xpad", "xphone"]
+            );
+        }
+    );
+
+    QUnit.test("onchange on one2many containing x2many in form view", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.turtles = [[0, false, { turtle_foo: "new record" }]];
+            },
+        };
+        serverData.views = {
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+            "partner,false,search": "<search></search>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="turtles">
+                        <tree>
+                            <field name="turtle_foo"/>
+                        </tree>
+                        <form>
+                            <field name="partner_ids">
+                                <tree editable="top">
+                                    <field name="foo"/>
+                                </tree>
+                            </field>
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "the onchange should have created one record in the relation"
+        );
+
+        // open the created o2m record in a form view, and add a m2m subrecord
+        // in its relation
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        assert.containsOnce(target, ".modal");
+        assert.containsNone(target, ".modal .o_data_row");
+
+        // add a many2many subrecord
+        await addRow(target.querySelector(".modal"));
+
+        assert.containsN(target, ".modal", 2, "should have opened a second dialog");
+
+        // select a many2many subrecord
+        let secondDialog = target.querySelectorAll(".modal")[1];
+        await click(secondDialog.querySelector(".o_list_view .o_data_cell"));
+
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(target, ".modal .o_data_row");
+        assert.containsNone(
+            target,
+            ".modal .o_x2m_control_panel .o_pager",
+            "m2m pager should be hidden"
+        );
+
+        // click on 'Save & Close'
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        assert.containsNone(target, ".modal", "dialog should be closed");
+
+        // reopen o2m record, and another m2m subrecord in its relation, but
+        // discard the changes
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        assert.containsOnce(target, ".modal", "should have opened a dialog");
+        assert.containsOnce(
+            target,
+            ".modal .o_data_row",
+            "there should be one record in the one2many in the dialog"
+        );
+
+        // add another m2m subrecord
+        await addRow(target, ".modal");
+
+        assert.containsN(target, ".modal", 2, "should have opened a second dialog");
+
+        secondDialog = target.querySelectorAll(".modal")[1];
+        await click(secondDialog.querySelector(".o_list_view .o_data_cell"));
+
+        assert.containsOnce(target, ".modal", "second dialog should be closed");
+        assert.containsN(
+            target,
+            ".modal .o_data_row",
+            2,
+            "there should be two records in the one2many in the dialog"
+        );
+
+        // click on 'Discard'
+        await click(target.querySelector(".modal-footer .btn-secondary"));
+
+        assert.containsNone(target, ".modal", "dialog should be closed");
+
+        // reopen o2m record to check that second changes have properly been discarded
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        assert.containsOnce(target, ".modal", "should have opened a dialog");
+        assert.containsOnce(
+            target,
+            ".modal .o_data_row",
+            "there should be one record in the one2many in the dialog"
+        );
+    });
+
+    QUnit.test(
+        "onchange on one2many with x2many in list (no widget) and form view (list)",
+        async function (assert) {
+            serverData.models.turtle.fields.turtle_foo.default = "a default value";
+            serverData.models.partner.onchanges = {
+                foo: function (obj) {
+                    obj.p = [[0, false, { turtles: [[0, false, { turtle_foo: "hello" }]] }]];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree editable="top">
+                                        <field name="turtle_foo"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "the onchange should have created one record in the relation"
+            );
+
+            // open the created o2m record in a form view
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+
+            assert.containsOnce(document.body, ".modal", "should have opened a dialog");
+            assert.containsOnce(document.body, ".modal .o_data_row");
+            assert.strictEqual(
+                document.querySelector(".modal .o_data_row").textContent.trim(),
+                "hello"
+            );
+
+            // add a one2many subrecord and check if the default value is correctly applied
+            await addRow(target, ".modal");
+
+            assert.containsN(document.body, ".modal .o_data_row", 2);
+            assert.strictEqual(
+                document.querySelector(".modal .o_data_row .o_field_widget[name=turtle_foo] input")
+                    .value,
+                "a default value"
+            );
+        }
+    );
+
+    QUnit.test(
+        "onchange on one2many with x2many in list (many2many_tags) and form view (list)",
+        async function (assert) {
+            serverData.models.turtle.fields.turtle_foo.default = "a default value";
+            serverData.models.partner.onchanges = {
+                foo: function (obj) {
+                    obj.p = [[0, false, { turtles: [[0, false, { turtle_foo: "hello" }]] }]];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles" widget="many2many_tags"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree editable="top">
+                                        <field name="turtle_foo"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_data_row",
+                "the onchange should have created one record in the relation"
+            );
+
+            // open the created o2m record in a form view
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+
+            assert.containsOnce(document.body, ".modal", "should have opened a dialog");
+            assert.containsOnce(document.body, ".modal .o_data_row");
+            assert.strictEqual(
+                document.querySelector(".modal .o_data_row").textContent.trim(),
+                "hello"
+            );
+
+            // add a one2many subrecord and check if the default value is correctly applied
+            await addRow(target, ".modal");
+
+            assert.containsN(document.body, ".modal .o_data_row", 2);
+            assert.strictEqual(
+                document.querySelector(".modal .o_data_row .o_field_widget[name=turtle_foo] input")
+                    .value,
+                "a default value"
+            );
+        }
+    );
+
+    QUnit.test(
+        "embedded one2many with handle widget with minimum setValue calls",
+        async function (assert) {
+            serverData.models.turtle.records[0].turtle_int = 6;
+            serverData.models.turtle.records.push(
+                {
+                    id: 4,
+                    turtle_int: 20,
+                    turtle_foo: "a1",
+                },
+                {
+                    id: 5,
+                    turtle_int: 9,
+                    turtle_foo: "a2",
+                },
+                {
+                    id: 6,
+                    turtle_int: 2,
+                    turtle_foo: "a3",
+                },
+                {
+                    id: 7,
+                    turtle_int: 11,
+                    turtle_foo: "a4",
+                }
+            );
+            serverData.models.partner.records[0].turtles = [1, 2, 3, 4, 5, 6, 7];
+
+            let model;
+            patchWithCleanup(BasicModel.prototype, {
+                init() {
+                    this._super(...arguments);
+                    model = this;
+                },
+                notifyChanges() {
+                    const changes = arguments[1];
+                    assert.step(String(this.get(changes.turtles.id).res_id));
+                    return this._super(...arguments);
+                },
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree default_order="turtle_int">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            const formHandle = Object.keys(model.localData).find((k) => /partner/.test(k));
+
+            await clickEdit(target);
+
+            assert.deepEqual(
+                Object.values(model.get(formHandle).data.turtles.data).map((r) => {
+                    return r.data;
+                }),
+                [
+                    { id: 6, turtle_foo: "a3", turtle_int: 2 },
+                    { id: 1, turtle_foo: "yop", turtle_int: 6 },
+                    { id: 2, turtle_foo: "blip", turtle_int: 9 },
+                    { id: 5, turtle_foo: "a2", turtle_int: 9 },
+                    { id: 7, turtle_foo: "a4", turtle_int: 11 },
+                    { id: 4, turtle_foo: "a1", turtle_int: 20 },
+                    { id: 3, turtle_foo: "kawa", turtle_int: 21 },
+                ]
+            );
+
+            const positions = [
+                [7, 1, ["3", "6", "1", "2", "5", "7", "4"]], // move the last to the first line
+                [6, 2, ["7", "6", "1", "2", "5"]], // move the penultimate to the second line
+                [3, 6, ["1", "2", "5", "6"]], // move the third to the penultimate line
+            ];
+            for (const [sourceIndex, targetIndex, steps] of positions) {
+                await dragAndDrop(
+                    `tbody tr:nth-child(${sourceIndex}) .o_handle_cell`,
+                    `tbody tr:nth-child(${targetIndex})`
+                );
+                assert.verifySteps(steps);
+            }
+
+            assert.deepEqual(
+                Object.values(model.get(formHandle).data.turtles.data).map((r) => {
+                    return r.data;
+                }),
+                [
+                    { id: 3, turtle_foo: "kawa", turtle_int: 2 },
+                    { id: 7, turtle_foo: "a4", turtle_int: 3 },
+                    { id: 1, turtle_foo: "yop", turtle_int: 4 },
+                    { id: 2, turtle_foo: "blip", turtle_int: 5 },
+                    { id: 5, turtle_foo: "a2", turtle_int: 6 },
+                    { id: 6, turtle_foo: "a3", turtle_int: 7 },
+                    { id: 4, turtle_foo: "a1", turtle_int: 8 },
+                ]
+            );
+        }
+    );
+
+    QUnit.test("embedded one2many (editable list) with handle widget", async function (assert) {
+        serverData.models.partner.records[0].p = [1, 2, 4];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="int_field" widget="handle"/>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step(args.method);
+                    assert.deepEqual(args.args[1].p, [
+                        [1, 2, { int_field: 0 }],
+                        [1, 4, { int_field: 1 }],
+                        [4, 1, false],
+                    ]);
+                }
+            },
+        });
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "My little Foo Value",
+            "blip",
+            "yop",
+        ]);
+
+        await clickEdit(target);
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "My little Foo Value",
+            "blip",
+            "yop",
+        ]);
+
+        assert.verifySteps([]);
+
+        // Drag and drop the second line in first position
+        await dragAndDrop(
+            "tbody tr:nth-child(2) .o_handle_cell",
+            ".o_field_one2many tbody tr:nth-child(1)"
+        );
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "blip",
+            "My little Foo Value",
+            "yop",
+        ]);
+
+        await click(target.querySelector(".o_data_cell.o_list_char"));
+
+        assert.strictEqual(target.querySelector(".o_field_widget[name=foo] input").value, "blip");
+
+        assert.verifySteps([]);
+
+        await clickSave(target);
+
+        assert.verifySteps(["write"]);
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")), [
+            "blip",
+            "My little Foo Value",
+            "yop",
+        ]);
+    });
+
+    QUnit.test("one2many field when using the pager", async function (assert) {
+        const ids = [];
+        for (let i = 0; i < 45; i++) {
+            const id = 10 + i;
+            ids.push(id);
+            serverData.models.partner.records.push({
+                id,
+                display_name: `relational record ${id}`,
+            });
+        }
+        serverData.models.partner.records[0].p = ids.slice(0, 42);
+        serverData.models.partner.records[1].p = ids.slice(42);
+
+        let count = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div><t t-esc="record.display_name"/></div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    count++;
+                }
+            },
+            resId: 1,
+            resIds: [1, 2],
+        });
+
+        // we are on record 1, which has 90 related record (first 40 should be
+        // displayed), 2 RPCs (read) should have been done, one on the main record
+        // and one for the O2M
+        assert.strictEqual(count, 2);
+        assert.containsN(target, '.o_kanban_record:not(".o_kanban_ghost")', 40);
+
+        // move to record 2, which has 3 related records (and shouldn't contain the
+        // related records of record 1 anymore). Two additional RPCs should have
+        // been done
+        await click(target.querySelector(".o_form_view .o_control_panel .o_pager_next"));
+        assert.strictEqual(count, 4);
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            3,
+            "one2many kanban should contain 3 cards for record 2"
+        );
+
+        // move back to record 1, which should contain again its first 40 related
+        // records
+        await click(target.querySelector(".o_form_view .o_control_panel .o_pager_previous"));
+        assert.strictEqual(count, 6);
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            40,
+            "one2many kanban should contain 40 cards for record 1"
+        );
+
+        // move to the second page of the o2m: 1 RPC should have been done to fetch
+        // the 2 subrecords of page 2, and those records should now be displayed
+        await click(target.querySelector(".o_x2m_control_panel .o_pager_next"));
+        assert.strictEqual(count, 7, "one RPC should have been done");
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            2,
+            "one2many kanban should contain 2 cards for record 1 at page 2"
+        );
+
+        // move to record 2 again and check that everything is correctly updated
+        await click(target.querySelector(".o_form_view .o_control_panel .o_pager_next"));
+        assert.strictEqual(count, 9);
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            3,
+            "one2many kanban should contain 3 cards for record 2"
+        );
+
+        // move back to record 1 and move to page 2 again: all data should have
+        // been correctly reloaded
+        await click(target.querySelector(".o_form_view .o_control_panel .o_pager_previous"));
+        assert.strictEqual(count, 11);
+        await click(target.querySelector(".o_x2m_control_panel .o_pager_next"));
+        assert.strictEqual(count, 12, "one RPC should have been done");
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            2,
+            "one2many kanban should contain 2 cards for record 1 at page 2"
+        );
+    });
+
+    QUnit.test("edition of one2many field with pager", async function (assert) {
+        assert.expect(30);
+
+        const ids = [];
+        for (let i = 0; i < 45; i++) {
+            const id = 10 + i;
+            ids.push(id);
+            serverData.models.partner.records.push({
+                id: id,
+                display_name: "relational record " + id,
+            });
+        }
+        serverData.models.partner.records[0].p = ids;
+        serverData.views = {
+            "partner,false,form": '<form><field name="display_name"/></form>',
+        };
+
+        let saveCount = 0;
+        let checkRead = false;
+        let readIDs;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "read" && checkRead) {
+                    readIDs = args.args[0];
+                    checkRead = false;
+                }
+                if (args.method === "write") {
+                    saveCount++;
+                    const nbCommands = args.args[1].p.length;
+                    const nbLinkCommands = _.filter(args.args[1].p, function (command) {
+                        return command[0] === 4;
+                    }).length;
+                    switch (saveCount) {
+                        case 1:
+                            assert.strictEqual(
+                                nbCommands,
+                                46,
+                                "should send 46 commands (one for each record)"
+                            );
+                            assert.strictEqual(
+                                nbLinkCommands,
+                                45,
+                                "should send a LINK_TO command for each existing record"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[45],
+                                [
+                                    0,
+                                    args.args[1].p[45][1],
+                                    {
+                                        display_name: "new record",
+                                    },
+                                ],
+                                "should sent a CREATE command for the new record"
+                            );
+                            break;
+                        case 2:
+                            assert.strictEqual(nbCommands, 46, "should send 46 commands");
+                            assert.strictEqual(
+                                nbLinkCommands,
+                                45,
+                                "should send a LINK_TO command for each existing record"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[45],
+                                [2, 10, false],
+                                "should sent a DELETE command for the deleted record"
+                            );
+                            break;
+                        case 3:
+                            assert.strictEqual(nbCommands, 47, "should send 47 commands");
+                            assert.strictEqual(
+                                nbLinkCommands,
+                                43,
+                                "should send a LINK_TO command for each existing record"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[43],
+                                [0, args.args[1].p[43][1], { display_name: "new record page 1" }],
+                                "should sent correct CREATE command"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[44],
+                                [0, args.args[1].p[44][1], { display_name: "new record page 2" }],
+                                "should sent correct CREATE command"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[45],
+                                [2, 11, false],
+                                "should sent correct DELETE command"
+                            );
+                            assert.deepEqual(
+                                args.args[1].p[46],
+                                [2, 52, false],
+                                "should sent correct DELETE command"
+                            );
+                            break;
+                    }
+                }
+            },
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            40,
+            "there should be 40 records on page 1"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_x2m_control_panel .o_pager_counter").innerText,
+            "1-40 / 45",
+            "pager range should be correct"
+        );
+
+        // add a record on page one
+        checkRead = true;
+        await clickEdit(target);
+        await click(target.querySelector(".o-kanban-button-new"));
+        await editInput(target, ".modal input", "new record");
+
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+
+        // checks
+        assert.strictEqual(readIDs, undefined, "should not have read any record");
+        assert.notOk(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].some(
+                (el) => el.innerText === "new record"
+            )
+        );
+
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            40,
+            "there should be 40 records on page 1"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_x2m_control_panel .o_pager_counter").innerText,
+            "1-40 / 46",
+            "pager range should be correct"
+        );
+
+        // save
+        await clickSave(target);
+
+        // delete a record on page one
+        checkRead = true;
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record:not(.o_kanban_ghost)").innerText,
+            "relational record 10"
+        );
+
+        await click(target.querySelector(".delete_icon")); // should remove record!!!
+
+        // checks
+        assert.deepEqual(
+            readIDs,
+            [50],
+            "should have read a record (to display 40 records on page 1)"
+        );
+        assert.containsN(
+            target,
+            '.o_kanban_record:not(".o_kanban_ghost")',
+            40,
+            "there should be 40 records on page 1"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_x2m_control_panel .o_pager_counter").innerText,
+            "1-40 / 45",
+            "pager range should be correct"
+        );
+        // save
+        await clickSave(target);
+
+        // add and delete records in both pages
+        await clickEdit(target);
+        checkRead = true;
+        readIDs = undefined;
+        // add and delete a record in page 1
+        await click(target.querySelector(".o-kanban-button-new"));
+        await editInput(target, ".modal input", "new record page 1");
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record:not(.o_kanban_ghost)").innerText,
+            "relational record 11",
+            "first record should be the one with id 11 (next checks rely on that)"
+        );
+
+        await click(target.querySelector(".delete_icon")); // should remove record!!!
+        assert.deepEqual(
+            readIDs,
+            [51],
+            "should have read a record (to display 40 records on page 1)"
+        );
+        // add and delete a record in page 2
+        await click(target.querySelector(".o_x2m_control_panel .o_pager_next"));
+
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record:not(.o_kanban_ghost)").innerText,
+            "relational record 52",
+            "first record should be the one with id 52 (next checks rely on that)"
+        );
+
+        checkRead = true;
+        readIDs = undefined;
+        await click(target.querySelector(".delete_icon")); // should remove record!!!
+        await click(target.querySelector(".o-kanban-button-new"));
+
+        await editInput(target, ".modal input", "new record page 2");
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+
+        assert.strictEqual(readIDs, undefined, "should not have read any record");
+        // checks
+        assert.containsN(
+            target,
+            ".o_kanban_record:not(.o_kanban_ghost)",
+            5,
+            "there should be 5 records on page 2"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_x2m_control_panel .o_pager_counter").innerText,
+            "41-45 / 45",
+            "pager range should be correct"
+        );
+        assert.ok(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].some(
+                (el) => el.innerText === "new record page 1"
+            ),
+            "new records should be on page 2"
+        );
+        assert.ok(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].some(
+                (el) => el.innerText === "new record page 2"
+            ),
+            "new records should be on page 2"
+        );
+        // save
+        await clickSave(target);
+    });
+
+    QUnit.test("open a record in a one2many kanban (mode 'readonly')", async function (assert) {
+        serverData.views = {
+            "turtle,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div t-att-class="'oe_kanban_global_click'">
+                                        <t t-esc="record.display_name.value"/>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(target.querySelector(".o_kanban_record").innerText, "donatello");
+
+        await click(target.querySelector(".o_kanban_record"));
+
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(
+            target.querySelector(".modal div[name=display_name] span").innerText,
+            "donatello"
+        );
+    });
+
+    QUnit.test("open a record in a one2many kanban (mode 'edit')", async function (assert) {
+        serverData.views = {
+            "turtle,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <t t-esc="record.display_name.value"/>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.strictEqual(target.querySelector(".o_kanban_record ").innerText, "donatello");
+
+        await click(target.querySelector(".o_kanban_record"));
+
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(
+            target.querySelector(".modal div[name=display_name] input").value,
+            "donatello"
+        );
+    });
+
+    QUnit.test(
+        "edition of one2many field, with onchange and not inline sub view",
+        async function (assert) {
+            serverData.models.turtle.onchanges.turtle_int = function (obj) {
+                obj.turtle_foo = String(obj.turtle_int);
+            };
+            serverData.models.partner.onchanges.turtles = function () {};
+            serverData.views = {
+                "turtle,false,list": `
+                    <tree>
+                        <field name="turtle_foo"/>
+                    </tree>`,
+                "turtle,false,form": `
+                    <form>
+                        <group>
+                            <field name="turtle_foo"/>
+                            <field name="turtle_int"/>
+                        </group>
+                    </form>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles" widget="one2many"/>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+            await addRow(target);
+            await editInput(target, 'div[name="turtle_int"] input', "5");
+            await click(target.querySelector(".modal-footer button.btn-primary"));
+            let firstCellOfSecondRow = target.querySelectorAll(".o_data_cell.o_list_char")[1];
+            assert.strictEqual(firstCellOfSecondRow.innerText, "5");
+            await click(firstCellOfSecondRow);
+
+            await editInput(target, 'div[name="turtle_int"] input', "3");
+            await click(target.querySelector(".modal-footer button.btn-primary"));
+            firstCellOfSecondRow = target.querySelectorAll(".o_data_cell.o_list_char")[1];
+            assert.strictEqual(firstCellOfSecondRow.innerText, "3");
+        }
+    );
+
+    QUnit.test("sorting one2many fields", async function (assert) {
+        serverData.models.partner.fields.foo.sortable = true;
+        serverData.models.partner.records.push({ id: 23, foo: "abc" });
+        serverData.models.partner.records.push({ id: 24, foo: "xyz" });
+        serverData.models.partner.records.push({ id: 25, foo: "def" });
+        serverData.models.partner.records[0].p = [23, 24, 25];
+
+        let rpcCount = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC() {
+                rpcCount++;
+            },
+        });
+
+        rpcCount = 0;
+        assert.strictEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((c) => c.textContent).join(" "),
+            "abc xyz def"
+        );
+
+        await click(target.querySelector("table thead .o_column_sortable"));
+        assert.strictEqual(rpcCount, 0, "in memory sort, no RPC should have been done");
+        assert.strictEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((c) => c.textContent).join(" "),
+            "abc def xyz"
+        );
+
+        await click(target.querySelector("table thead .o_column_sortable"));
+        assert.strictEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((c) => c.textContent).join(" "),
+            "xyz def abc"
+        );
+    });
+
+    QUnit.test("one2many list field edition", async function (assert) {
+        serverData.models.partner.records.push({
+            id: 3,
+            display_name: "relational record 1",
+        });
+        serverData.models.partner.records[1].p = [3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many tbody td").textContent,
+            "relational record 1"
+        );
+
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_one2many tbody td"));
+        assert.hasClass(
+            target.querySelector(".o_field_one2many tbody .o_data_row"),
+            "o_selected_row"
+        );
+
+        await editInput(target, ".o_field_one2many tbody td input", "new value");
+        assert.hasClass(
+            target.querySelector(".o_field_one2many tbody .o_data_row"),
+            "o_selected_row"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many tbody td input").value,
+            "new value"
+        );
+
+        // leave o2m edition
+        await click(target.querySelector(".o_form_view"));
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_one2many tbody .o_data_row"),
+            "o_selected_row"
+        );
+
+        // discard changes
+        await clickDiscard(target);
+        assert.containsNone(target, ".modal");
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many tbody td").textContent,
+            "relational record 1"
+        );
+
+        // edit again and save
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_one2many tbody td"));
+        await editInput(target, ".o_field_one2many tbody td input", "new value");
+        await click(target.querySelector(".o_form_view"));
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many tbody td").textContent,
+            "new value",
+            "display name of first record in o2m list should be 'new value'"
+        );
+    });
+
+    QUnit.test("one2many list: create action disabled", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree create="0">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+
+        await clickEdit(target);
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+    });
+
+    QUnit.test("one2many list: conditional create/delete actions", async function (assert) {
+        serverData.models.partner.records[0].p = [2, 4];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="p" options="{'create': [('bar', '=', True)], 'delete': [('bar', '=', True)]}">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        // bar is true -> create and delete action are available
+        assert.containsOnce(target, ".o_field_x2many_list_row_add");
+        assert.containsN(target, "td.o_list_record_remove button", 2);
+
+        // set bar to false -> create and delete action are no longer available
+        await click(target, '.o_field_widget[name="bar"] input');
+
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+        assert.containsNone(target, "td.o_list_record_remove button");
+    });
+
+    QUnit.test("many2many list: unlink two records", async function (assert) {
+        assert.expect(7);
+        serverData.models.partner.records[0].p = [1, 2, 4];
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" widget="many2many">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    const commands = args.args[1].p;
+                    assert.strictEqual(commands.length, 3, "should have generated three commands");
+                    assert.ok(
+                        commands[0][0] === 4 && commands[0][1] === 2,
+                        "should have generated the command 4 (LINK_TO) with id 4"
+                    );
+                    assert.ok(
+                        commands[1][0] === 4 && commands[1][1] === 4,
+                        "should have generated the command 4 (LINK_TO) with id 4"
+                    );
+                    assert.ok(
+                        commands[2][0] === 3 && commands[2][1] === 1,
+                        "should have generated the command 3 (UNLINK) with id 1"
+                    );
+                }
+            },
+        });
+        await clickEdit(target);
+        assert.containsN(target, "td.o_list_record_remove button", 3);
+
+        await click(target.querySelector("td.o_list_record_remove button"));
+        assert.containsN(target, "td.o_list_record_remove button", 2);
+
+        await click(target.querySelector("tr.o_data_row td"));
+        assert.containsNone(target, ".modal .modal-footer .o_btn_remove");
+
+        await click(target.querySelector(".modal .btn-secondary"));
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many list: deleting one records", async function (assert) {
+        assert.expect(3);
+        serverData.models.partner.records[0].p = [1, 2, 4];
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    const commands = args.args[1].p;
+                    assert.deepEqual(commands, [
+                        [4, 2, false],
+                        [4, 4, false],
+                        [2, 1, false],
+                    ]);
+                }
+            },
+        });
+        await clickEdit(target);
+        assert.containsN(target, "td.o_list_record_remove button", 3);
+
+        await click(target.querySelector("td.o_list_record_remove button"));
+        assert.containsN(target, "td.o_list_record_remove button", 2);
+
+        // save and check that the correct command has been generated
+        await clickSave(target);
+
+        // FIXME: it would be nice to test that the view is re-rendered correctly,
+        // but as the relational data isn't re-fetched, the rendering is ok even
+        // if the changes haven't been saved
+    });
+
+    QUnit.test("one2many kanban: edition", async function (assert) {
+        assert.expect(22);
+
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            // color will be in the kanban but not in the form
+            // foo will be in the form but not in the kanban
+            arch: `
+                <form>
+                    <field name="p">
+                        <kanban>
+                            <field name="color"/>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                        <span><t t-esc="record.color.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="display_name"/>
+                            <field name="foo"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    const commands = args.args[1].p;
+                    assert.strictEqual(commands.length, 2);
+
+                    assert.strictEqual(commands[0][0], 0);
+                    assert.deepEqual(commands[0][2], {
+                        color: "red",
+                        display_name: "new subrecord 3",
+                        foo: "My little Foo Value",
+                    });
+
+                    assert.deepEqual(commands[1], [2, 2, false]);
+                }
+            },
+        });
+
+        assert.containsNone(target, ".delete_icon");
+        assert.containsNone(target, ".o_field_one2many .o-kanban-button-new");
+
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_record span").textContent,
+            "second record"
+        );
+        assert.strictEqual(target.querySelectorAll(".o_kanban_record span")[1].textContent, "Red");
+        assert.containsOnce(target, ".delete_icon");
+        assert.containsOnce(target, ".o_field_one2many .o-kanban-button-new");
+        assert.hasClass(
+            target.querySelector(".o_field_one2many .o-kanban-button-new"),
+            "btn-secondary"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many .o-kanban-button-new").textContent,
+            "Add"
+        );
+
+        // edit existing subrecord
+        await click($(target).find(".oe_kanban_global_click")[0]);
+
+        await editInput(
+            target,
+            ".modal .o_form_view .o_field_widget:nth-child(1) input",
+            "new name"
+        );
+        await click($(".modal .modal-footer .btn-primary")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record span:first").text(),
+            "new name",
+            "value of subrecord should have been updated"
+        );
+
+        // create a new subrecord
+        await click($(target).find(".o-kanban-button-new")[0]);
+        await editInput(
+            target,
+            ".modal .o_form_view .o_field_widget:nth-child(1) input",
+            "new subrecord 1"
+        );
+        await click($(target).find(".modal .modal-footer .btn-primary")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            2,
+            "should contain 2 records"
+        );
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:nth(1) span").text(),
+            "new subrecord 1Red",
+            'value of newly created subrecord should be "new subrecord 1"'
+        );
+
+        // create two new subrecords
+        await click($(target).find(".o-kanban-button-new")[0]);
+        await editInput(
+            target,
+            ".modal .o_form_view .o_field_widget:nth-child(1) input",
+            "new subrecord 2"
+        );
+        await click($(".modal .modal-footer .btn-primary:nth(1)")[0]);
+        await editInput(
+            target,
+            ".modal .o_form_view .o_field_widget:nth-child(1) input",
+            "new subrecord 3"
+        );
+        await click($(target).find(".modal .modal-footer .btn-primary")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            4,
+            "should contain 4 records"
+        );
+
+        // delete subrecords
+        await click($(target).find(".oe_kanban_global_click").first()[0]);
+        assert.strictEqual(
+            $(".modal .modal-footer .o_btn_remove").length,
+            1,
+            "There should be a modal having Remove Button"
+        );
+        await click($(".modal .modal-footer .o_btn_remove")[0]);
+        assert.containsNone($(".o_modal"), "modal should have been closed");
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            3,
+            "should contain 3 records"
+        );
+        await click($(target).find(".o_kanban_renderer .delete_icon:first()")[0]);
+        await click($(target).find(".o_kanban_renderer .delete_icon:first()")[0]);
+        assert.strictEqual(
+            $(target).find(".o_kanban_record:not(.o_kanban_ghost)").length,
+            1,
+            "should contain 1 records"
+        );
+        assert.strictEqual(
+            $(target).find(".o_kanban_record span:first").text(),
+            "new subrecord 3",
+            'the remaining subrecord should be "new subrecord 3"'
+        );
+
+        // save and check that the correct command has been generated
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "one2many kanban (editable): properly handle add-label node attribute",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles" add-label="Add turtle" mode="kanban">
+                            <kanban>
+                                <templates>
+                                    <t t-name="kanban-box">
+                                        <div class="oe_kanban_details">
+                                            <field name="display_name"/>
+                                        </div>
+                                    </t>
+                                </templates>
+                            </kanban>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        '.o_field_one2many[name="turtles"] .o-kanban-button-new'
+                    ),
+                ].map((el) => el.textContent),
+                ["Add turtle"],
+                "In O2M Kanban, Add button should have 'Add turtle' label"
+            );
+        }
+    );
+
+    QUnit.test("one2many kanban: create action disabled", async function (assert) {
+        serverData.models.partner.records[0].p = [4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <kanban create="0">
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <a t-if="!read_only_mode" type="delete" class="fa fa-times float-right delete_icon"/>
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        assert.containsNone(target, ".o-kanban-button-new");
+
+        await clickEdit(target);
+
+        assert.containsNone(target, ".o-kanban-button-new");
+        assert.containsOnce(target, ".o_field_x2many_kanban .delete_icon");
+    });
+
+    QUnit.test("one2many kanban: conditional create/delete actions", async function (assert) {
+        serverData.models.partner.records[0].p = [2, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="p" options="{'create': [('bar', '=', True)], 'delete': [('bar', '=', True)]}">
+                        <kanban>
+                            <field name="display_name"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div class="oe_kanban_global_click">
+                                        <span><t t-esc="record.display_name.value"/></span>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="display_name"/>
+                            <field name="foo"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+        // bar is initially true -> create and delete actions are available
+        assert.containsOnce(target, ".o-kanban-button-new", '"Add" button should be available');
+
+        await click(target.querySelector(".oe_kanban_global_click"));
+        assert.containsOnce(
+            target,
+            ".modal .modal-footer .o_btn_remove",
+            "There should be a Remove Button inside modal"
+        );
+
+        await clickDiscard(target.querySelector(".modal"));
+        // set bar false -> create and delete actions are no longer available
+        await click(target.querySelector('.o_field_widget[name="bar"] input'));
+        assert.containsNone(
+            target,
+            ".o-kanban-button-new",
+            '"Add" button should not be available as bar is False'
+        );
+
+        await click(target.querySelector(".oe_kanban_global_click"));
+        assert.containsNone(
+            target,
+            ".modal .modal-footer .o_btn_remove",
+            "There should not be a Remove Button as bar field is False"
+        );
+    });
+
+    QUnit.test("editable one2many list, pager is updated", async function (assert) {
+        serverData.models.turtle.records.push({ id: 4, turtle_foo: "stephen hawking" });
+        serverData.models.partner.records[0].turtles = [1, 2, 3, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // add a record, add value to turtle_foo then click in form view to confirm it
+        await clickEdit(target);
+        await addRow(target);
+
+        await editInput(target, 'div[name="turtle_foo"] input', "nora");
+
+        await click(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=turtles] .o_pager").textContent.trim(),
+            "1-4 / 5"
+        );
+    });
+
+    QUnit.test("one2many list (non editable): edition", async function (assert) {
+        assert.expect(12);
+
+        let nbWrite = 0;
+        serverData.models.partner.records[0].p = [2, 4];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                            <field name="qux"/>
+                        </tree>
+                        <form string="Partners">
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC: function (route, args) {
+                if (args.method === "write") {
+                    nbWrite++;
+                    assert.deepEqual(args.args[1], {
+                        p: [
+                            [1, 2, { display_name: "new name" }],
+                            [2, 4, false],
+                        ],
+                    });
+                }
+            },
+        });
+
+        assert.containsNone(target, ".o_list_record_remove");
+        assert.containsNone(target, ".o_field_x2many_list_row_add");
+
+        await clickEdit(target);
+
+        assert.containsN(target, "td.o_list_number", 2);
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").textContent,
+            "second record"
+        );
+        assert.containsN(target, ".o_list_record_remove", 2);
+        assert.containsOnce(target, ".o_field_x2many_list_row_add");
+
+        // edit existing subrecord
+        await click(target.querySelectorAll(".o_list_renderer tbody tr td")[1]); // ?
+
+        await editInput(target, ".modal .o_form_editable input", "new name");
+
+        await click(target, ".modal .modal-footer .btn-primary");
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").textContent,
+            "new name"
+        );
+        assert.strictEqual(nbWrite, 0, "should not have write anything in DB");
+
+        // remove subrecords
+        await click(target.querySelectorAll(".o_list_record_remove")[1]);
+        assert.containsOnce(target, "td.o_list_number");
+        assert.strictEqual(
+            target.querySelector(".o_list_renderer tbody td").textContent,
+            "new name"
+        );
+
+        await clickSave(target); // save the record
+        assert.strictEqual(nbWrite, 1, "should have write the changes in DB");
+    });
+
+    QUnit.test("one2many list (editable): edition, part 2", async function (assert) {
+        assert.expect(11);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    // WOWL: could be nice to assert this way, but with the basic model, we don't
+                    // control the virtual ids index
+                    // assert.deepEqual(args.args[1].p, [
+                    //     [0, "virtual_2", { foo: "gemuse" }],
+                    //     [0, "virtual_1", { foo: "kartoffel" }],
+                    // ]);
+                    assert.strictEqual(args.args[1].p[0][0], 0);
+                    assert.strictEqual(args.args[1].p[1][0], 0);
+                    assert.deepEqual(args.args[1].p[0][2], { foo: "gemuse" });
+                    assert.deepEqual(args.args[1].p[1][2], { foo: "kartoffel" });
+                }
+            },
+        });
+
+        // edit mode, then click on Add an item and enter a value
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, ".o_selected_row > td input", "kartoffel");
+        assert.strictEqual(target.querySelector("td .o_field_char input").value, "kartoffel");
+
+        // click again on Add an item
+        await addRow(target);
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[1].textContent, "kartoffel");
+        assert.containsOnce(target, ".o_selected_row > td input");
+        assert.containsN(target, "tr.o_data_row", 2);
+
+        // enter another value and save
+        await editInput(target, ".o_selected_row > td input", "gemuse");
+        await clickSave(target);
+        assert.containsN(target, "tr.o_data_row", 2);
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "gemuse",
+            "kartoffel",
+        ]);
+    });
+
+    QUnit.test("one2many list (editable): edition, part 3", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        // edit mode, then click on Add an item, enter value in turtle_foo and Add an item again
+        assert.containsOnce(target, "tr.o_data_row");
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, 'div[name="turtle_foo"] input', "nora");
+        await addRow(target);
+        assert.containsN(target, "tr.o_data_row", 3);
+
+        // cancel the edition
+        await clickDiscard(target);
+
+        assert.containsNone(target, ".modal");
+        assert.containsOnce(target, "tr.o_data_row");
+    });
+
+    QUnit.test("one2many list (editable): edition, part 4", async function (assert) {
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
+        let i = 0;
+        serverData.models.turtle.onchanges = {
+            turtle_trululu: function (obj) {
+                if (i) {
+                    obj.turtle_description = "Some Description";
+                }
+                i++;
+            },
+        };
+        serverData["partner,false,"];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_trululu"/>
+                                <field name="turtle_description"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 2,
+        });
+
+        // edit mode, then click on Add an item
+        assert.containsNone(target, "tr.o_data_row");
+        await clickEdit(target);
+        await addRow(target);
+        assert.strictEqual(target.querySelector(".o_data_row textarea").value, "");
+
+        // add a value in the turtle_trululu field to trigger an onchange
+        await clickOpenM2ODropdown(target, "turtle_trululu");
+        await clickM2OHighlightedItem(target, "turtle_trululu");
+        assert.strictEqual(target.querySelector(".o_data_row textarea").value, "Some Description");
+    });
+
+    QUnit.test("one2many list (editable): edition, part 5", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        // edit mode, then click on Add an item, enter value in turtle_foo and Add an item again
+        assert.containsOnce(target, "tr.o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "blip");
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=turtle_foo] input", "aaa");
+        assert.containsN(target, "tr.o_data_row", 2);
+        await removeRow(target, 1);
+        assert.containsOnce(target, "tr.o_data_row");
+
+        // cancel the edition
+        await clickDiscard(target);
+        assert.containsOnce(target, "tr.o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "blip");
+    });
+
+    QUnit.test("one2many list (editable): discarding required empty data", async function (assert) {
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        delete serverData.models.turtle.fields.turtle_foo.default;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        // edit mode, then click on Add an item, then click elsewhere
+        assert.containsNone(target, "tr.o_data_row");
+        await clickEdit(target);
+        await addRow(target);
+        await click(target);
+        assert.containsNone(target, "tr.o_data_row");
+
+        // click on Add an item again, then click on save
+        await addRow(target);
+        await clickSave(target);
+        assert.containsNone(target, "tr.o_data_row");
+
+        assert.verifySteps(["get_views", "read", "onchange", "onchange"]);
+    });
+
+    QUnit.test("editable one2many list, adding line when only one page", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // add a record, to reach the page size limit
+        await clickEdit(target);
+        await addRow(target);
+        // the record currently being added should not count in the pager
+        assert.containsNone(target, ".o_field_widget[name=turtles] .o_pager");
+
+        // enter value in turtle_foo field and click outside to unselect the row
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "nora");
+        await click(target);
+        assert.containsNone(target, ".o_selected_row");
+        assert.containsNone(target, ".o_field_widget[name=turtles] .o_pager");
+
+        await clickSave(target);
+        assert.containsOnce(target, ".o_field_widget[name=turtles] .o_pager");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=turtles] .o_pager").textContent,
+            "1-3 / 4"
+        );
+    });
+
+    QUnit.test("editable one2many list, adding line, then discarding", async function (assert) {
+        serverData.models.turtle.records.push({ id: 4, turtle_foo: "stephen hawking" });
+        serverData.models.partner.records[0].turtles = [1, 2, 3, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // add a record, then discard
+        await clickEdit(target);
+        await addRow(target);
+
+        await clickDiscard(target);
+        assert.containsNone(target, ".modal");
+
+        assert.isVisible(target.querySelector(".o_field_widget[name=turtles] .o_pager"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=turtles] .o_pager").textContent.trim(),
+            "1-3 / 4"
+        );
+    });
+
+    QUnit.test("editable one2many list, required field and pager", async function (assert) {
+        serverData.models.turtle.records.push({ id: 4, turtle_foo: "stephen hawking" });
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        serverData.models.partner.records[0].turtles = [1, 2, 3, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // add a (empty) record
+        await clickEdit(target);
+        await addRow(target);
+
+        // go on next page. The new record is not valid and should be discarded
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+        assert.containsOnce(target, "tr.o_data_row");
+    });
+
+    QUnit.test(
+        "editable one2many list, required field, pager and confirm discard",
+        async function (assert) {
+            serverData.models.turtle.records.push({ id: 4, turtle_foo: "stephen hawking" });
+            serverData.models.turtle.fields.turtle_foo.required = true;
+            serverData.models.partner.records[0].turtles = [1, 2, 3, 4];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom" limit="3">
+                                <field name="turtle_foo"/>
+                                <field name="turtle_int"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            // add a record with a dirty state, but not valid
+            await clickEdit(target);
+            await addRow(target);
+            await editInput(target, '.o_field_widget[name="turtle_int"] input', 4321);
+
+            // try to go to next page. The new record is not valid, but dirty so we should
+            // stay on the current page, and the record should be marked as invalid
+            await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=turtles] .o_pager").textContent,
+                "1-4 / 5"
+            );
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=turtles] .o_pager").textContent,
+                "1-4 / 5"
+            );
+            assert.containsOnce(target, ".o_field_widget[name=turtle_foo].o_field_invalid");
+        }
+    );
+
+    QUnit.test("editable one2many list, adding, discarding, and pager", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // add 4 records (to have more records than the limit)
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "nora");
+        await addRow(target);
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "nora");
+        await addRow(target);
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "nora");
+        await addRow(target);
+
+        assert.containsN(target, "tr.o_data_row", 5);
+        assert.containsNone(target, ".o_field_widget[name=turtles] .o_pager");
+
+        // discard
+        await clickDiscard(target);
+        assert.containsNone(target, ".modal");
+
+        assert.containsOnce(target, "tr.o_data_row");
+        assert.containsNone(target, ".o_field_widget[name=turtles] .o_pager");
+    });
+
+    QUnit.test("unselecting a line with missing required data", async function (assert) {
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        delete serverData.models.turtle.fields.turtle_foo.default;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="top">
+                            <field name="turtle_foo"/>
+                            <field name="turtle_int"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+        });
+
+        // edit mode, then click on Add an item, then click elsewhere
+        assert.containsNone(target, "tr.o_data_row");
+        await clickEdit(target);
+        await addRow(target);
+        assert.containsOnce(target, "tr.o_data_row");
+
+        // adding a value in the non required field, so it is dirty, but with
+        // a missing required field
+        await editInput(target, '.o_field_widget[name="turtle_int"] input', "12345");
+
+        // click elsewhere
+        await click(target);
+        assert.containsNone(target, ".modal");
+
+        // the line should still be selected
+        assert.containsOnce(target, "tr.o_data_row.o_selected_row");
+
+        // click discard
+        await clickDiscard(target);
+        assert.containsNone(target, ".modal");
+        assert.containsNone(target, "tr.o_data_row");
+    });
+
+    QUnit.test("pressing enter in a o2m with a required empty field", async function (assert) {
+        serverData.models.turtle.fields.turtle_foo.required = true;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        // edit mode, then click on Add an item, then press enter
+        await clickEdit(target);
+        await addRow(target);
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.hasClass(target.querySelector('div[name="turtle_foo"]'), "o_field_invalid");
+        assert.verifySteps(["get_views", "read", "onchange"]);
+    });
+
+    QUnit.test("editing a o2m, with required field and onchange", async function (assert) {
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        delete serverData.models.turtle.fields.turtle_foo.default;
+        serverData.models.turtle.onchanges = {
+            turtle_foo: function (obj) {
+                obj.turtle_int = obj.turtle_foo.length;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                                <field name="turtle_int"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method) {
+                    assert.step(args.method);
+                }
+            },
+        });
+
+        // edit mode, then click on Add an item
+        assert.containsNone(target, "tr.o_data_row");
+        await clickEdit(target);
+        await addRow(target);
+
+        // input some text in required turtle_foo field
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "aubergine");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="turtle_int"] input').value,
+            "9"
+        );
+
+        // save and check everything is fine
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell.o_list_char").textContent,
+            "aubergine"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell.o_list_number").textContent,
+            "9"
+        );
+
+        assert.verifySteps(["get_views", "read", "onchange", "onchange", "write", "read", "read"]);
+    });
+
+    QUnit.test("editable o2m, pressing ESC discard current changes", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="top">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+        assert.containsOnce(target, "tr.o_data_row");
+
+        await triggerEvent(target, '[name="turtle_foo"] input', "keydown", { key: "Escape" });
+        assert.containsNone(target, "tr.o_data_row");
+        assert.verifySteps(["get_views", "read", "onchange"]);
+    });
+
+    QUnit.test(
+        "editable o2m with required field, pressing ESC discard current changes",
+        async function (assert) {
+            serverData.models.turtle.fields.turtle_foo.required = true;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 2,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            await clickEdit(target);
+            await addRow(target);
+            assert.containsOnce(target, "tr.o_data_row");
+
+            await triggerEvent(target, '[name="turtle_foo"] input', "keydown", { key: "Escape" });
+
+            assert.containsNone(target, "tr.o_data_row");
+            assert.verifySteps(["get_views", "read", "onchange"]);
+        }
+    );
+
+    QUnit.test("pressing escape in editable o2m list in dialog", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        await addRow(target);
+        await addRow(target, ".modal");
+
+        assert.containsOnce(target, ".modal .o_data_row.o_selected_row");
+
+        await triggerEvent(target, '[name="display_name"] input', "keydown", { key: "Escape" });
+
+        assert.containsOnce(target, ".modal");
+        assert.containsNone(target, ".modal .o_data_row");
+    });
+
+    QUnit.test(
+        "editable o2m with onchange and required field: delete an invalid line",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                turtles: function () {},
+            };
+            serverData.models.partner.records[0].turtles = [1];
+            serverData.models.turtle.records[0].product_id = 37;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="product_id"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            assert.verifySteps(["get_views", "read", "read"]);
+            await clickEdit(target);
+            await click(target.querySelector(".o_data_cell"));
+            await editInput(target, ".o_field_widget[name=product_id] input", "");
+            assert.verifySteps([], "no onchange should be done as line is invalid");
+            await click(target.querySelector(".o_list_record_remove"));
+            assert.verifySteps(["onchange"], "onchange should have been done");
+        }
+    );
+
+    QUnit.test("onchange in a one2many", async function (assert) {
+        serverData.models.partner.records.push({
+            id: 3,
+            foo: "relational record 1",
+        });
+        serverData.models.partner.records[1].p = [3];
+        serverData.models.partner.onchanges = { p: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: {
+                            p: [
+                                [5], // delete all
+                                [0, 0, { foo: "from onchange" }], // create new
+                            ],
+                        },
+                    });
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await click(target.querySelector(".o_field_one2many tbody td"));
+        await editInput(
+            target.querySelector(".o_field_one2many tbody td input"),
+            null,
+            "new value"
+        );
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many tbody td").textContent,
+            "from onchange"
+        );
+    });
+
+    QUnit.test("one2many, default_get and onchange (basic)", async function (assert) {
+        serverData.models.partner.fields.p.default = [
+            [6, 0, []], // replace with zero ids
+        ];
+        serverData.models.partner.onchanges = { p: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return {
+                        value: {
+                            p: [
+                                [5], // delete all
+                                [0, 0, { foo: "from onchange" }], // create new
+                            ],
+                        },
+                    };
+                }
+            },
+        });
+
+        assert.strictEqual(target.querySelector("td").textContent, "from onchange");
+    });
+
+    QUnit.test("one2many and default_get (with date)", async function (assert) {
+        serverData.models.partner.fields.p.default = [[0, false, { date: "2017-10-08", p: [] }]];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="date"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_data_cell").textContent,
+            "10/08/2017",
+            "should correctly display the date"
+        );
+    });
+
+    QUnit.test("one2many and onchange (with integer)", async function (assert) {
+        serverData.models.turtle.onchanges = {
+            turtle_int: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_int"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        await clickEdit(target);
+        const td = target.querySelector("td");
+        assert.strictEqual(td.textContent, "9");
+        await click(td);
+        await editInput(target, 'td [name="turtle_int"] input', "3");
+        assert.verifySteps(["get_views", "read", "read", "onchange"]);
+    });
+
+    QUnit.test("one2many and onchange (with date)", async function (assert) {
+        serverData.models.partner.onchanges = {
+            date: function () {},
+        };
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="date"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        await clickEdit(target);
+        const td = target.querySelector("td");
+        assert.strictEqual(td.textContent, "01/25/2017");
+
+        await click(td);
+        await click(target.querySelector(".o_datepicker_input"));
+        await nextTick();
+        await click(document.body.querySelector(".bootstrap-datetimepicker-widget .picker-switch"));
+        await click(
+            document.body.querySelectorAll(".bootstrap-datetimepicker-widget .picker-switch")[1]
+        );
+        await click(
+            [...document.body.querySelectorAll(".bootstrap-datetimepicker-widget .year")].filter(
+                (el) => el.textContent === "2017"
+            )[0]
+        );
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .month")[1]);
+        await click(document.body.querySelectorAll(".bootstrap-datetimepicker-widget .day")[22]);
+        await clickSave(target);
+
+        assert.verifySteps(["get_views", "read", "read", "onchange", "write", "read", "read"]);
+    });
+
+    QUnit.test("one2many and onchange (with command DELETE_ALL)", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.p = [[5]];
+            },
+            p: function () {}, // dummy onchange on the o2m to execute _isX2ManyValid()
+        };
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC: function (method, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].p, [
+                        [0, args.args[1].p[0][1], { display_name: "z" }],
+                        [2, 2, false],
+                    ]);
+                }
+            },
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.containsOnce(target, ".o_data_row");
+
+        // empty o2m by triggering the onchange
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger onchange");
+        assert.containsNone(target, ".o_data_row", "rows of the o2m should have been deleted");
+
+        // add two new subrecords
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=display_name] input", "x");
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=display_name] input", "y");
+        assert.containsN(target, ".o_data_row", 2);
+
+        // empty o2m by triggering the onchange
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger onchange again");
+        assert.containsNone(target, ".o_data_row", "rows of the o2m should have been deleted");
+
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=display_name] input", "z");
+
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many and onchange only write modified field", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.turtles = [
+                    [5], // delete all
+                    [
+                        1,
+                        3,
+                        {
+                            // the server returns all fields
+                            display_name: "coucou",
+                            product_id: [37, "xphone"],
+                            turtle_bar: false,
+                            turtle_foo: "has changed",
+                            turtle_int: 42,
+                            turtle_qux: 9.8,
+                            partner_ids: [],
+                            turtle_ref: "product,37",
+                        },
+                    ],
+                ];
+            },
+        };
+
+        serverData.models.partner.records[0].turtles = [3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                            <field name="product_id"/>
+                            <field name="turtle_bar"/>
+                            <field name="turtle_foo"/>
+                            <field name="turtle_int"/>
+                            <field name="turtle_qux"/>
+                            <field name="turtle_ref"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC: function (method, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].turtles,
+                        [
+                            [
+                                1,
+                                3,
+                                {
+                                    display_name: "coucou",
+                                    turtle_foo: "has changed",
+                                    turtle_int: 42,
+                                },
+                            ],
+                        ],
+                        "correct commands should be sent (only send changed values)"
+                    );
+                }
+            },
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.containsOnce(target, ".o_data_row");
+        await click(target.querySelector(".o_field_one2many td"));
+        await editInput(target, ".o_field_widget[name=display_name] input", "blurp");
+
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many with CREATE onchanges correctly refreshed", async function (assert) {
+        let delta = 0;
+        const fieldRegistry = registry.category("fields");
+        for (const [name, Field] of fieldRegistry.getEntries()) {
+            class DeltaField extends Field {
+                setup() {
+                    super.setup();
+                    owl.onWillStart(() => {
+                        delta++;
+                    });
+                    owl.onWillDestroy(() => {
+                        delta--;
+                    });
+                }
+            }
+            fieldRegistry.add(name, DeltaField, { force: true });
+        }
+        let deactiveOnchange = true;
+
+        serverData.models.partner.records[0].turtles = [];
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                if (deactiveOnchange) {
+                    return;
+                }
+                // the onchange will either:
+                //  - create a second line if there is only one line
+                //  - edit the second line if there are two lines
+                if (obj.turtles.length === 1) {
+                    obj.turtles = [
+                        [5], // delete all
+                        [
+                            0,
+                            obj.turtles[0][1],
+                            {
+                                display_name: "first",
+                                turtle_int: obj.turtles[0][2].turtle_int,
+                            },
+                        ],
+                        [
+                            0,
+                            0,
+                            {
+                                display_name: "second",
+                                turtle_int: -obj.turtles[0][2].turtle_int,
+                            },
+                        ],
+                    ];
+                } else if (obj.turtles.length === 2) {
+                    obj.turtles = [
+                        [5], // delete all
+                        [
+                            0,
+                            obj.turtles[0][1],
+                            {
+                                display_name: "first",
+                                turtle_int: obj.turtles[0][2].turtle_int,
+                            },
+                        ],
+                        [
+                            0,
+                            obj.turtles[1][1],
+                            {
+                                display_name: "second",
+                                turtle_int: -obj.turtles[0][2].turtle_int,
+                            },
+                        ],
+                    ];
+                }
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="display_name" widget="char"/>
+                            <field name="turtle_int"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.containsNone(target, ".o_data_row");
+
+        await addRow(target);
+        // trigger the first onchange
+        deactiveOnchange = false;
+        await editInput(target, '[name="turtle_int"] input', "10");
+        // put the list back in non edit mode
+        await click(target, '[name="foo"] input');
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+            ["first10", "second-10"]
+        );
+
+        // trigger the second onchange
+        await click(target.querySelector(".o_field_x2many_list tbody tr td"));
+        await editInput(target, '[name="turtle_int"] input', "20");
+        await click(target, '[name="foo"] input');
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+            ["first20", "second-20"]
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget",
+            delta,
+            "all (non visible) field widgets should have been destroyed"
+        );
+
+        await clickSave(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+            ["first20", "second-20"]
+        );
+    });
+
+    QUnit.test(
+        "editable one2many with sub widgets are rendered in readonly",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo" widget="char" attrs="{'readonly': [('turtle_int', '==', 11111)]}"/>
+                                <field name="turtle_int"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+            assert.containsOnce(target, ".o_form_view .o_field_x2many_list_row_add ");
+            assert.containsNone(target, ".o_form_view input");
+
+            await addRow(target);
+            assert.containsOnce(target, ".o_form_view .o_field_x2many_list_row_add ");
+            assert.containsN(target, ".o_form_view input", 2);
+        }
+    );
+
+    QUnit.test("one2many editable list with onchange keeps the order", async function (assert) {
+        serverData.models.partner.records[0].p = [1, 2, 4];
+        serverData.models.partner.onchanges = {
+            p: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["first record", "second record", "aaa"]
+        );
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_selected_row .o_field_widget[name=display_name] input", "new");
+        await click(target, ".o_form_view");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["new", "second record", "aaa"]
+        );
+    });
+
+    QUnit.test("one2many list (editable): readonly domain is evaluated", async function (assert) {
+        serverData.models.partner.records[0].p = [2, 4];
+        serverData.models.partner.records[1].product_id = false;
+        serverData.models.partner.records[2].product_id = 37;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="display_name" attrs='{"readonly": [["product_id", "=", false]]}'/>
+                                <field name="product_id"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        // switch the first row in edition
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_widget"),
+            "o_readonly_modifier",
+            "first record should have display_name in readonly mode"
+        );
+        // switch the second row in edition
+        await click(target.querySelector(".o_data_row:not(.o_selected_row) .o_data_cell"));
+        assert.doesNotHaveClass(
+            target.querySelector(".o_selected_row .o_field_widget"),
+            "o_readonly_modifier",
+            "second record should not have display_name in readonly mode"
+        );
+    });
+
+    QUnit.test("pager of one2many field in new record", async function (assert) {
+        serverData.models.partner.records[0].p = [];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+        assert.containsNone(target, ".o_x2m_control_panel .o_pager", "o2m pager should be hidden");
+
+        // click to create a subrecord
+        await addRow(target);
+        assert.containsOnce(target, "tr.o_data_row");
+        assert.containsNone(target, ".o_x2m_control_panel .o_pager", "o2m pager should be hidden");
+    });
+
+    QUnit.test("one2many list with a many2one", async function (assert) {
+        assert.expect(5);
+
+        let checkOnchange = false;
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].product_id = 37;
+        serverData.models.partner.onchanges.p = function (obj) {
+            obj.p = [
+                [5], // delete all
+                [1, 2, { product_id: [37, "xphone"] }], // update existing record
+                [0, 0, { product_id: [41, "xpad"] }],
+            ];
+        };
+        serverData.views = {};
+        serverData.views["partner,false,form"] = '<form><field name="product_id"/></form>';
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange" && checkOnchange) {
+                    assert.deepEqual(
+                        args.args[1].p,
+                        [
+                            [4, 2, false],
+                            [0, args.args[1].p[1][1], { product_id: 41 }],
+                        ],
+                        "should trigger onchange with correct parameters"
+                    );
+                }
+            },
+        });
+        assert.containsOnce(target, ".o_data_cell[data-tooltip='xphone']");
+        assert.containsNone(target, ".o_data_cell[data-tooltip='xpad']");
+
+        await clickEdit(target);
+        await addRow(target);
+
+        checkOnchange = true;
+        await clickOpenM2ODropdown(target, "product_id");
+        await click(target.querySelectorAll('div[name="product_id"] .o_input_dropdown li')[1]);
+
+        await click(target.querySelector(".modal .modal-footer button"));
+        assert.containsOnce(target, ".o_data_cell[data-tooltip='xphone']");
+        assert.containsOnce(target, ".o_data_cell[data-tooltip='xpad']");
+    });
+
+    QUnit.test("one2many list with inline form view", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.partner.records[0].p = [];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            // don't remove foo field in sub tree view, it is useful to make sure
+            // the foo fieldwidget does not crash because the foo field is not in the form view
+            arch: `
+                <form>
+                    <field name="p">
+                        <form>
+                            <field name="product_id"/>
+                            <field name="int_field"/>
+                        </form>
+                        <tree>
+                            <field name="product_id"/>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].p, [
+                        [
+                            0,
+                            args.args[1].p[0][1],
+                            {
+                                foo: "My little Foo Value",
+                                int_field: 123,
+                                product_id: 41,
+                            },
+                        ],
+                    ]);
+                }
+            },
+        });
+        await clickEdit(target);
+        await addRow(target);
+
+        // write in the many2one field, value = 37 (xphone)
+        await clickOpenM2ODropdown(target, "product_id");
+        await clickM2OHighlightedItem(target, "product_id");
+
+        // write in the integer field
+        await editInput(target, '.modal .modal-body div[name="int_field"] input', "123");
+
+        // save and close
+        await clickSave(target.querySelector(".modal"));
+
+        assert.containsOnce(target, ".o_data_cell[data-tooltip='xphone']");
+
+        // reopen the record in form view
+        await click(target, ".o_data_cell[data-tooltip='xphone']");
+        assert.strictEqual(target.querySelector(".modal .modal-body input").value, "xphone");
+
+        await editInput(target, '.modal .modal-body div[name="int_field"] input', "456");
+
+        // discard
+        await clickDiscard(target.querySelector(".modal"));
+
+        // reopen the record in form view
+        await click(target, ".o_data_cell[data-tooltip='xphone']");
+
+        assert.strictEqual(
+            target.querySelector('.modal .modal-body div[name="int_field"] input').value,
+            "123",
+            "should display 123 (previous change has been discarded)"
+        );
+
+        // write in the many2one field, value = 41 (xpad)
+        await clickOpenM2ODropdown(target, "product_id");
+        await click(target.querySelectorAll('div[name="product_id"] .o_input_dropdown li')[1]);
+
+        // save and close
+        await clickSave(target.querySelector(".modal"));
+
+        assert.containsOnce(target, ".o_data_cell[data-tooltip='xpad']");
+
+        // save the record
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "one2many list with inline form view with context with parent key",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.records[0].p = [2];
+            serverData.models.partner.records[0].product_id = 41;
+            serverData.models.partner.records[1].product_id = 37;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="product_id"/>
+                        <field name="p">
+                            <form>
+                                <field name="product_id" context="{'partner_foo':parent.foo, 'lalala': parent.product_id}"/>
+                            </form>
+                            <tree>
+                                <field name="product_id"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "name_search") {
+                        assert.strictEqual(
+                            args.kwargs.context.partner_foo,
+                            "yop",
+                            "should have correctly evaluated parent foo field"
+                        );
+                        assert.strictEqual(
+                            args.kwargs.context.lalala,
+                            41,
+                            "should have correctly evaluated parent product_id field"
+                        );
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            // open a modal
+            await click(target.querySelector("tr.o_data_row td[data-tooltip='xphone']"));
+
+            // write in the many2one field
+            await click(target, ".modal .o_field_many2one input");
+        }
+    );
+
+    QUnit.test(
+        "value of invisible x2many fields is correctly evaluated in context",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.records[0].timmy = [12];
+            serverData.models.partner.records[0].p = [2, 3];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="product_id" context="{'p': p, 'timmy': timmy}"/>
+                        <field name="p" invisible="1"/>
+                        <field name="timmy" invisible="1"/>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "name_search") {
+                        const { p, timmy } = args.kwargs.context;
+                        assert.deepEqual(p, [
+                            [4, 2, false],
+                            [4, 3, false],
+                        ]);
+                        assert.deepEqual(timmy, [[6, false, [12]]]);
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            await click(target, ".o_field_widget[name=product_id] input");
+        }
+    );
+
+    QUnit.test(
+        "one2many list, editable, with many2one and with context with parent key",
+        async function (assert) {
+            assert.expect(1);
+
+            serverData.models.partner.records[0].p = [2];
+            serverData.models.partner.records[1].product_id = 37;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="product_id" context="{'partner_foo':parent.foo}"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "name_search") {
+                        assert.strictEqual(
+                            args.kwargs.context.partner_foo,
+                            "yop",
+                            "should have correctly evaluated parent foo field"
+                        );
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            await click(target.querySelector("tr.o_data_row td[data-tooltip='xphone']"));
+
+            // trigger a name search
+            await click(target, "table td input");
+        }
+    );
+
+    QUnit.test("one2many list, editable, with a date in the context", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].product_id = 37;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="date"/>
+                        <field name="p" context="{'date':date}">
+                            <tree editable="top">
+                                <field name="date"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.strictEqual(
+                        args.kwargs.context.date,
+                        "2017-01-25",
+                        "should have properly evaluated date key in context"
+                    );
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+    });
+
+    QUnit.test("one2many field with context", async function (assert) {
+        assert.expect(2);
+
+        let counter = 0;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles" context="{'turtles':turtles}">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    const expected =
+                        counter === 0
+                            ? [[4, 2, false]]
+                            : [
+                                  [4, 2, false],
+                                  [0, args.kwargs.context.turtles[1][1], { turtle_foo: "hammer" }],
+                              ];
+                    assert.deepEqual(
+                        args.kwargs.context.turtles,
+                        expected,
+                        "should have properly evaluated turtles key in context"
+                    );
+                    counter++;
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, '[name="turtle_foo"] input', "hammer");
+        await addRow(target);
+    });
+
+    QUnit.test("one2many list edition, some basic functionality", async function (assert) {
+        serverData.models.partner.fields.foo.default = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+        await addRow(target);
+        assert.containsOnce(
+            target,
+            "td .o_field_widget input",
+            "should have created a row in edit mode"
+        );
+
+        await editInput(target, "td .o_field_widget input", "a");
+        assert.containsOnce(
+            target,
+            "td .o_field_widget input",
+            "should not have unselected the row after edition"
+        );
+
+        await editInput(target, "td .o_field_widget input", "abc");
+        await clickSave(target);
+        assert.strictEqual(
+            [...target.querySelectorAll("td")].filter((el) => el.textContent === "abc").length,
+            1,
+            "should have a row with the correct value"
+        );
+    });
+
+    QUnit.test(
+        "one2many list, the context is properly evaluated and sent",
+        async function (assert) {
+            assert.expect(2);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field"/>
+                        <field name="p" context="{'hello': 'world', 'abc': int_field}">
+                            <tree editable="top">
+                                <field name="foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        var context = args.kwargs.context;
+                        assert.strictEqual(context.hello, "world");
+                        assert.strictEqual(context.abc, 10);
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            await addRow(target);
+        }
+    );
+
+    QUnit.test("one2many with many2many widget: create", async function (assert) {
+        assert.expect(10);
+
+        serverData.views = {
+            "turtle,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                    <field name="turtle_foo"/>
+                    <field name="turtle_bar"/>
+                    <field name="product_id"/>
+                </tree>`,
+            "turtle,false,search": `
+                <search>
+                    <field name="turtle_foo"/>
+                    <field name="turtle_bar"/>
+                    <field name="product_id"/>
+                </search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles" widget="many2many">
+                        <tree>
+                            <field name="turtle_foo"/>
+                            <field name="turtle_qux"/>
+                            <field name="turtle_int"/>
+                            <field name="product_id"/>
+                        </tree>
+                        <form>
+                            <group>
+                                <field name="turtle_foo"/>
+                                <field name="turtle_bar"/>
+                                <field name="turtle_int"/>
+                                <field name="product_id"/>
+                            </group>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/turtle/create") {
+                    assert.ok(args.args, "should write on the turtle record");
+                }
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(args.args[0][0], 1, "should write on the partner record 1");
+                    assert.strictEqual(
+                        args.args[1].turtles[0][0],
+                        6,
+                        "should send only a 'replace with' command"
+                    );
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+
+        assert.strictEqual(
+            $(".modal .o_data_row").length,
+            2,
+            "should have 2 records in the select view (the last one is not displayed because it is already selected)"
+        );
+
+        await click($(".modal .o_data_row:first .o_list_record_selector input")[0]);
+        await nextTick(); // additional render due to the change of selection (done in owl, not pure js)
+        await click($(".modal .o_select_button")[0]);
+        await click($(".o_form_button_save")[0]);
+        await clickEdit(target);
+        await addRow(target);
+
+        assert.strictEqual(
+            $(".modal .o_data_row").length,
+            1,
+            "should have 1 record in the select view"
+        );
+
+        await click($(".modal-footer button:eq(1)")[0]);
+        await editInput(target, '.modal .o_field_widget[name="turtle_foo"] input', "tototo");
+        await editInput(target, '.modal .o_field_widget[name="turtle_int"] input', 50);
+        await clickOpenM2ODropdown(target, "product_id");
+        await clickM2OHighlightedItem(target, "product_id");
+
+        await click($(".modal-footer button:contains(&):first")[0]);
+
+        assert.strictEqual($(".modal").length, 0, "should close the modals");
+
+        assert.containsN(target, ".o_data_row", 3, "should have 3 records in one2many list");
+        assert.strictEqual(
+            $(target.querySelectorAll(".o_data_row")).text(),
+            "blip1.59yop1.50tototo1.550xphone",
+            "should display the record values in one2many list"
+        );
+
+        await click($(".o_form_button_save")[0]);
+    });
+
+    QUnit.test("one2many with many2many widget: edition", async function (assert) {
+        assert.expect(7);
+
+        serverData.views = {
+            "turtle,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                    <field name="turtle_foo"/>
+                    <field name="turtle_bar"/>
+                    <field name="product_id"/>
+                </tree>`,
+            "turtle,false,search": `
+                <search>
+                    <field name="turtle_foo"/>
+                    <field name="turtle_bar"/>
+                    <field name="product_id"/>
+                </search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles" widget="many2many">
+                        <tree>
+                            <field name="turtle_foo"/>
+                            <field name="turtle_qux"/>
+                            <field name="turtle_int"/>
+                            <field name="product_id"/>
+                        </tree>
+                        <form>
+                            <group>
+                                <field name="turtle_foo"/>
+                                <field name="turtle_bar"/>
+                                <field name="turtle_int"/>
+                                <field name="turtle_trululu"/>
+                                <field name="product_id"/>
+                            </group>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/turtle/write") {
+                    assert.strictEqual(args.args[0].length, 1, "should write on the turtle record");
+                    assert.deepEqual(
+                        args.args[1],
+                        { product_id: 37 },
+                        "should write only the product_id on the turtle record"
+                    );
+                }
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    assert.strictEqual(args.args[0][0], 1, "should write on the partner record 1");
+                    assert.strictEqual(
+                        args.args[1].turtles[0][0],
+                        6,
+                        "should send only a 'replace with' command"
+                    );
+                }
+            },
+        });
+        //await new Promise(() => {})
+        await clickEdit(target);
+        await click($(target).find(".o_data_cell:first")[0]);
+        assert.strictEqual(
+            $(".modal .modal-title").first().text().trim(),
+            "Open: one2many turtle field",
+            "modal should use the python field string as title"
+        );
+        await clickDiscard(target.querySelector(".modal"));
+
+        // edit the first one2many record
+        await click($(target).find(".o_data_cell:first")[0]);
+        await clickOpenM2ODropdown(target, "product_id");
+        await clickM2OHighlightedItem(target, "product_id");
+        await click($(".modal-footer button:first")[0]);
+
+        await click($(".o_form_button_save")[0]);
+
+        // add a one2many record
+        await clickEdit(target);
+        await addRow(target);
+        await click($(".modal .o_data_row:first .o_list_record_selector input")[0]);
+        await nextTick(); // wait for re-rendering because of the change of selection
+        await click($(".modal .o_select_button")[0]);
+
+        // edit the second one2many record
+        await click($(target).find(".o_data_row:eq(1) .o_data_cell")[0]);
+        await clickOpenM2ODropdown(target, "product_id");
+        await clickM2OHighlightedItem(target, "product_id");
+        await click($(".modal .modal-footer button:first")[0]);
+
+        await click($(".o_form_button_save")[0]);
+    });
+
+    QUnit.test("new record, the context is properly evaluated and sent", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.partner.fields.int_field.default = 17;
+        let n = 0;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="int_field"/>
+                        <field name="p" context="{'hello': 'world', 'abc': int_field}">
+                            <tree editable="top">
+                                <field name="foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    n++;
+                    if (n === 2) {
+                        var context = args.kwargs.context;
+                        assert.strictEqual(context.hello, "world");
+                        assert.strictEqual(context.abc, 17);
+                    }
+                }
+            },
+        });
+
+        await addRow(target);
+    });
+
+    QUnit.test("parent data is properly sent on an onchange rpc", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="bar"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    const fieldValues = args.args[1];
+                    assert.strictEqual(
+                        fieldValues.trululu.foo,
+                        "yop",
+                        "should have properly sent the parent foo value"
+                    );
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+    });
+
+    QUnit.test(
+        "parent data is properly sent on an onchange rpc (existing x2many record)",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.onchanges = {
+                display_name: function () {},
+            };
+            serverData.models.partner.records[0].p = [1];
+            serverData.models.partner.records[0].turtles = [2];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                            <field name="turtles" widget="many2many_tags"/>
+                        </tree>
+                    </field>
+                </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        const fieldValues = args.args[1];
+                        assert.strictEqual(fieldValues.trululu.foo, "yop");
+                        // we only send fields that changed inside the reverse many2one
+                        assert.deepEqual(fieldValues.trululu.p, [
+                            [1, 1, { display_name: "new val" }],
+                        ]);
+                    }
+                },
+            });
+            await clickEdit(target);
+            assert.containsOnce(target, ".o_data_row");
+
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            assert.containsOnce(target, ".o_data_row.o_selected_row");
+
+            await editInput(
+                target,
+                ".o_selected_row .o_field_widget[name=display_name] input",
+                "new val"
+            );
+        }
+    );
+
+    QUnit.test(
+        "parent data is properly sent on an onchange rpc, new record",
+        async function (assert) {
+            assert.expect(5);
+
+            serverData.models.turtle.onchanges = { turtle_bar: function () {} };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_bar"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                    if (args.method === "onchange" && args.model === "turtle") {
+                        var fieldValues = args.args[1];
+                        assert.strictEqual(
+                            fieldValues.turtle_trululu.foo,
+                            "My little Foo Value",
+                            "should have properly sent the parent foo value"
+                        );
+                    }
+                },
+            });
+            await addRow(target);
+            assert.verifySteps(["get_views", "onchange", "onchange"]);
+        }
+    );
+
+    QUnit.test("id in one2many obtained in onchange is properly set", async function (assert) {
+        serverData.models.partner.onchanges.turtles = function (obj) {
+            obj.turtles = [[5], [1, 3, { turtle_foo: "kawa" }]];
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="id"/>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll("tr.o_data_row .o_data_cell")].map((el) => el.textContent),
+            ["3", "kawa"],
+            "should have properly displayed id and foo field"
+        );
+    });
+
+    QUnit.test("id field in one2many in a new record", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="id" invisible="1"/>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    var virtualID = args.args[0].turtles[0][1];
+                    assert.deepEqual(
+                        args.args[0].turtles,
+                        [[0, virtualID, { turtle_foo: "cat" }]],
+                        "should send proper commands"
+                    );
+                }
+            },
+        });
+        await addRow(target);
+        await editInput(target, 'td [name="turtle_foo"] input', "cat");
+        await clickSave(target);
+    });
+
+    QUnit.test("sub form view with a required field", async function (assert) {
+        serverData.models.partner.fields.foo.required = true;
+        serverData.models.partner.fields.foo.default = null;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <form>
+                            <group><field name="foo"/></group>
+                        </form>
+                        <tree>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+        await click(target.querySelector(".modal-footer button.btn-primary"));
+
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(target, ".modal tbody label.o_field_invalid");
+    });
+
+    QUnit.test("one2many list with action button", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.records[0].p = [2];
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field"/>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <button name="method_name" type="object" icon="fa-plus"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        patchWithCleanup(form.env.services.action, {
+            doActionButton: (params) => {
+                assert.deepEqual(params.resId, 2);
+                assert.strictEqual(params.resModel, "partner");
+                assert.strictEqual(params.name, "method_name");
+                assert.strictEqual(params.type, "object");
+            },
+        });
+
+        await click(target, ".o_list_button button");
+    });
+
+    QUnit.test("one2many kanban with action button", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.records[0].p = [2];
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <kanban>
+                            <field name="foo"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div>
+                                        <span><t t-esc="record.foo.value"/></span>
+                                        <button name="method_name" type="object" class="fa fa-plus"/>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        patchWithCleanup(form.env.services.action, {
+            doActionButton: (params) => {
+                assert.deepEqual(params.resId, 2);
+                assert.strictEqual(params.resModel, "partner");
+                assert.strictEqual(params.name, "method_name");
+                assert.strictEqual(params.type, "object");
+            },
+        });
+
+        await click(target, ".oe_kanban_action_button");
+    });
+
+    QUnit.test(
+        "one2many kanban with edit type action and widget with specialData",
+        async function (assert) {
+            assert.expect(3);
+
+            patchWithCleanup(BasicModel.prototype, {
+                _fetchSpecialDataForMyWidget() {
+                    assert.step("_fetchSpecialDataForMyWidget");
+                    return Promise.resolve();
+                },
+            });
+            const MyWidget = AbstractField.extend({
+                specialData: "_fetchSpecialDataForMyWidget",
+                className: "my_widget",
+            });
+            fieldRegistry.add("specialWidget", MyWidget);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                // turtle_int is displayed without widget in the kanban, and with
+                // widget required specialData in the form
+                arch: `
+                    <form>
+                        <group>
+                            <field name="turtles" mode="kanban">
+                                <kanban>
+                                    <templates>
+                                        <t t-name="kanban-box">
+                                            <div>
+                                                <field name="display_name"/>
+                                                <field name="turtle_foo"/>
+                                                <field name="turtle_int"/>
+                                                <a type="edit"> Edit </a>
+                                            </div>
+                                        </t>
+                                    </templates>
+                                </kanban>
+                                <form>
+                                    <field name="product_id" widget="statusbar"/>
+                                    <field name="turtle_int" widget="specialWidget"/>
+                                </form>
+                            </field>
+                        </group>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target.querySelector(".oe_kanban_action"));
+            assert.containsOnce(target, ".modal .my_widget");
+            assert.verifySteps(["_fetchSpecialDataForMyWidget"]);
+        }
+    );
+
+    QUnit.test("one2many list with onchange and widget using SpecialData", async function (assert) {
+        patchWithCleanup(BasicModel.prototype, {
+            _fetchSpecialDataForMyWidget() {
+                assert.step("_fetchSpecialDataForMyWidget");
+                return Promise.resolve();
+            },
+        });
+        const MyWidget = AbstractField.extend({
+            specialData: "_fetchSpecialDataForMyWidget",
+            className: "my_widget",
+        });
+        fieldRegistry.add("specialWidget", MyWidget);
+
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                var virtualID = obj.turtles[1][1];
+                obj.turtles = [
+                    [5], // delete all
+                    [
+                        0,
+                        virtualID,
+                        {
+                            display_name: "coucou",
+                            product_id: [37, "xphone"],
+                            turtle_bar: false,
+                            turtle_foo: "has changed",
+                            turtle_int: 42,
+                            turtle_qux: 9.8,
+                            partner_ids: [],
+                            turtle_ref: "product,37",
+                        },
+                    ],
+                ];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            // turtle_int is displayed without widget in the list, and with
+            // widget required specialData in the form
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles" mode="tree">
+                            <tree>
+                                <field name="display_name"/>
+                                <field name="turtle_foo"/>
+                                <field name="turtle_int"/>
+                            </tree>
+                            <form>
+                                <field name="turtle_int" widget="specialWidget"/>
+                            </form>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        await addRow(target, ".o_field_one2many");
+        assert.containsOnce(target, ".modal");
+        await click(target.querySelector(".modal-footer button"));
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_one2many tbody tr .o_data_cell")].map(
+                (el) => el.innerText
+            ),
+            ["coucou", "has changed", "42"],
+            "the onchange should create one new record and remove the existing"
+        );
+
+        await click(target.querySelector(".o_field_one2many .o_list_renderer tbody tr td"));
+
+        await clickSave(target.querySelector(".modal"));
+        assert.verifySteps(["_fetchSpecialDataForMyWidget"], "should only fetch special data once");
+    });
+
+    QUnit.test("one2many without inline tree arch", async function (assert) {
+        serverData.models.partner.records[0].turtles = [2, 3];
+        serverData.views = {
+            "turtle,false,list": `
+                <tree>
+                    <field name="turtle_bar"/>
+                    <field name="display_name"/>
+                    <field name="partner_ids"/>
+                </tree>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            // should not call loadViews for the field with many2many_tags widget,
+            // nor for the invisible field
+            arch: `
+                <form>
+                    <group>
+                        <field name="p" widget="many2many_tags"/>
+                        <field name="turtles"/>
+                        <field name="timmy" invisible="1"/>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="turtles"] .o_list_renderer',
+            "should display one2many list view in the modal"
+        );
+
+        assert.containsN(target, ".o_data_row", 2, "should display the 2 turtles");
+    });
+
+    QUnit.test("many2one and many2many in one2many", async function (assert) {
+        assert.expect(13);
+
+        serverData.models.turtle.records[1].product_id = 37;
+        serverData.models.partner.records[0].turtles = [2, 3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="int_field"/>
+                        <field name="turtles">
+                            <form>
+                                <group>
+                                    <field name="product_id"/>
+                                </group>
+                            </form>
+                            <tree editable="top">
+                                <field name="display_name"/>
+                                <field name="product_id"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    const commands = args.args[1].turtles;
+                    assert.strictEqual(commands.length, 2, "should have generated 2 commands");
+                    assert.deepEqual(
+                        commands[0],
+                        [
+                            1,
+                            2,
+                            {
+                                partner_ids: [[6, false, [2, 1]]],
+                                product_id: 41,
+                            },
+                        ],
+                        "generated commands should be correct"
+                    );
+                    assert.deepEqual(
+                        commands[1],
+                        [4, 3, false],
+                        "generated commands should be correct"
+                    );
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_data_row", 2);
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_list_many2one").innerText,
+            "xphone",
+            "should correctly display the m2o"
+        );
+        assert.containsN(
+            target,
+            '.o_data_row td div[name="partner_ids"] .badge',
+            2,
+            "m2m should contain two tags"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_data_row td div[name="partner_ids"] .badge .o_tag_badge_text')
+                .innerText,
+            "second record",
+            "m2m values should have been correctly fetched"
+        );
+
+        await click(target.querySelector(".o_data_row td"));
+
+        assert.strictEqual(target.querySelector(".modal .o_field_widget").innerText, "xphone");
+
+        await click(target.querySelector(".modal-footer button"));
+
+        await clickEdit(target);
+
+        assert.containsOnce(
+            target,
+            ".o_form_view .o_form_editable",
+            "should toggle form mode to edit"
+        );
+
+        // edit the m2m of first row
+        await click(target.querySelector(".o_list_renderer tbody td"));
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_selected_row .o_field_many2many_tags .badge")].map(
+                (el) => el.innerText
+            ),
+            ["second record", "aaa"]
+        );
+
+        // remove a tag
+        await click(
+            target.querySelectorAll(".o_selected_row .o_field_many2many_tags .badge .o_delete")[1]
+        );
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_selected_row .o_field_many2many_tags .badge")].map(
+                (el) => el.innerText
+            ),
+            ["second record"]
+        );
+        // add a tag
+        await click(target.querySelector('div[name="partner_ids"] input'));
+        await click(target.querySelector('div[name="partner_ids"] .o_input_dropdown li')); // xpad
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_selected_row .o_field_many2many_tags .badge")].map(
+                (el) => el.innerText
+            ),
+            ["second record", "first record"]
+        );
+
+        // edit the m2o of first row
+        await clickOpenM2ODropdown(target, "product_id");
+        await click(target.querySelectorAll('div[name="product_id"] .o_input_dropdown li')[1]); // xpad
+
+        assert.strictEqual(
+            target.querySelector(".o_selected_row .o_field_many2one input").value,
+            "xpad",
+            "m2o value should have been updated"
+        );
+
+        // save (should correctly generate the commands)
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "many2manytag in one2many, onchange, some modifiers, and more than one page",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+            serverData.models.partner.onchanges.turtles = function () {};
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top" limit="2">
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" widget="many2many_tags" attrs="{'readonly': [('turtle_foo', '=', 'a')]}"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+            await clickEdit(target);
+            assert.containsN(target, ".o_data_row", 2);
+
+            await click(target.querySelector(".o_list_record_remove"));
+            assert.containsN(target, ".o_data_row", 2);
+
+            await click(target.querySelector(".o_list_record_remove"));
+            assert.containsOnce(target, ".o_data_row");
+
+            assert.verifySteps([
+                "get_views", // main form view
+                "read", // initial read on partner
+                "read", // initial read on turtle
+                "read", // batched read on partner (field partner_ids)
+                "read", // after first delete, read on turtle (to fetch 3rd record)
+                "onchange", // after first delete, onchange on field turtles
+                "onchange", // onchange after second delete
+            ]);
+        }
+    );
+
+    QUnit.test("onchange many2many in one2many list editable", async function (assert) {
+        serverData.models.product.records.push({
+            id: 1,
+            display_name: "xenomorphe",
+        });
+
+        serverData.models.turtle.onchanges = {
+            product_id: function (rec) {
+                if (rec.product_id) {
+                    rec.partner_ids = [[5], [4, rec.product_id === 41 ? 1 : 2]];
+                }
+            },
+        };
+        const partnerOnchange = function (rec) {
+            if (!rec.int_field || !rec.turtles.length) {
+                return;
+            }
+            rec.turtles = [
+                [5],
+                [
+                    0,
+                    0,
+                    {
+                        display_name: "new line",
+                        product_id: [37, "xphone"],
+                        partner_ids: [[5], [4, 1]],
+                    },
+                ],
+                [
+                    0,
+                    rec.turtles[0][1],
+                    {
+                        display_name: rec.turtles[0][2].display_name,
+                        product_id: [1, "xenomorphe"],
+                        partner_ids: [[5], [4, 2]],
+                    },
+                ],
+            ];
+        };
+
+        serverData.models.partner.onchanges = {
+            int_field: partnerOnchange,
+            turtles: partnerOnchange,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="int_field"/>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                                <field name="product_id"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+        });
+
+        // add new line (first, xpad)
+        await addRow(target);
+        await editInput(target, 'div[name="display_name"] input', "first");
+        await clickOpenM2ODropdown(target, "product_id");
+        await click(target.querySelectorAll('div[name="product_id"] .o_input_dropdown li')[1]); // xpad
+
+        assert.containsOnce(
+            target,
+            ".o_field_many2many_tags .o_input",
+            "should display the line in editable mode"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "xpad",
+            "should display the product xpad"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .o_tag_badge_text").innerText,
+            "first record",
+            "should display the tag from the onchange"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_data_cell .o_required_modifier input").value,
+            "xpad",
+            "should display the product xpad"
+        );
+
+        await click(target, 'div[name="int_field"] input');
+
+        assert.containsNone(
+            target,
+            ".o_field_many2many_tags input.o_input",
+            "should display the tag in readonly"
+        );
+
+        // enable the many2many onchange and generate it
+        await editInput(target, 'div[name="int_field"] input', "10");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["first", "xenomorphe", "second record", "new line", "xphone", "first record"]
+        );
+
+        // disable the many2many onchange
+        await editInput(target, 'div[name="int_field"] input', "0");
+
+        // remove and start over
+        await click(target.querySelector(".o_list_record_remove button"));
+        await click(target.querySelector(".o_list_record_remove button"));
+
+        // enable the many2many onchange
+        await editInput(target, 'div[name="int_field"] input', "10");
+
+        // add new line (first, xenomorphe)
+        await addRow(target);
+        await editInput(target, 'div[name="display_name"] input', "first");
+        await clickOpenM2ODropdown(target, "product_id");
+        await click(target.querySelectorAll('div[name="product_id"] .o_input_dropdown li')[2]); // xenomorphe
+
+        assert.containsOnce(
+            target,
+            ".o_field_many2many_tags .o_input",
+            "should display the line in editable mode"
+        );
+        assert.strictEqual(
+            target.querySelector('div[name="product_id"] input').value,
+            "xenomorphe",
+            "should display the product xenomorphe"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .o_tag_badge_text").innerText,
+            "second record",
+            "should display the tag from the onchange"
+        );
+
+        // put list in readonly mode
+        await click(target, 'div[name="int_field"] input');
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["first", "xenomorphe", "second record", "new line", "xphone", "first record"]
+        );
+
+        assert.containsNone(
+            target,
+            ".o_field_many2many_tags input.o_input",
+            "should display the tag in readonly"
+        );
+
+        await editInput(target, 'div[name="int_field"] input', "10");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["first", "xenomorphe", "second record", "new line", "xphone", "first record"]
+        );
+
+        await clickSave(target);
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["first", "xenomorphe", "second record", "new line", "xphone", "first record"]
+        );
+    });
+
+    QUnit.test("load view for x2many in one2many", async function (assert) {
+        serverData.models.turtle.records[1].product_id = 37;
+        serverData.models.partner.records[0].turtles = [2, 3];
+        serverData.models.partner.records[2].turtles = [1, 3];
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="int_field"/>
+                        <field name="turtles">
+                            <form>
+                                <group>
+                                    <field name="product_id"/>
+                                    <field name="partner_ids"/>
+                                </group>
+                            </form>
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(target, ".o_data_row", 2);
+
+        await click(target.querySelector(".o_data_row td"));
+
+        assert.containsOnce(target, '.modal div[name="partner_ids"] .o_list_renderer');
+    });
+
+    QUnit.test(
+        "one2many (who contains a one2many) with tree view and without form view",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="turtles">
+                                <tree>
+                                    <field name="partner_ids"/>
+                                </tree>
+                                <form>
+                                    <field name="turtle_foo"/>
+                                </form>
+                            </field>
+                        </group>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target.querySelector(".o_data_row td"));
+
+            assert.strictEqual(
+                target.querySelector('.modal div[name="turtle_foo"]').innerText,
+                "blip"
+            );
+        }
+    );
+
+    QUnit.test("one2many with x2many in form view (but not in list view)", async function (assert) {
+        assert.expect(1);
+
+        // avoid error when saving the edited related record (because the
+        // related x2m field is unknown in the inline list view)
+        // also ensure that the changes are correctly saved
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree>
+                                <field name="turtle_foo"/>
+                            </tree>
+                            <form>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </form>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].turtles, [
+                        [
+                            1,
+                            2,
+                            {
+                                partner_ids: [[6, false, [2, 4, 1]]],
+                            },
+                        ],
+                    ]);
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        await click(target.querySelector(".o_data_row td")); // edit first record
+
+        await click(target.querySelector('div[name="partner_ids"] input'));
+        await click(target.querySelector('div[name="partner_ids"] .o_input_dropdown li'));
+
+        // add a many2many tag and save
+        await editInput(target, ".modal .o_field_many2many_tags input", "test");
+
+        await click(target, ".modal .modal-footer .btn-primary"); // save
+
+        await clickSave(target);
+    });
+
+    QUnit.test("many2many list in a one2many opened by a many2one", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.turtle.records[1].turtle_trululu = 2;
+        serverData.views = {
+            "partner,false,form": '<form><field name="timmy"/></form>',
+            "partner_type,false,list":
+                '<tree editable="bottom"><field name="display_name"/></tree>',
+            "partner_type,false,search": "<search></search>",
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_trululu"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].timmy,
+                        [[6, false, [12]]],
+                        "should properly write ids"
+                    );
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        // edit the first partner in the one2many partner form view
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        // open form view for many2one
+        await click(target.querySelector(".o_external_button"));
+
+        // click on add, to add a new partner in the m2m
+        await addRow(target, ".modal");
+
+        // select the partner_type 'gold' (this closes the 2nd modal)
+        await click(target.querySelector("div:not(o_inactive_modal) .modal td.o_data_cell")); // select gold
+
+        // confirm the changes in the modal
+        await clickSave(target.querySelector(".modal"));
+
+        await clickSave(target);
+    });
+
+    QUnit.test("nested x2many default values", async function (assert) {
+        serverData.models.partner.fields.turtles.default = [
+            [0, 0, { partner_ids: [[6, 0, [4]]] }],
+            [0, 0, { partner_ids: [[6, 0, [1]]] }],
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="top">
+                            <field name="partner_ids" widget="many2many_tags"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsN(target, ".o_field_x2many_list .o_data_row", 2);
+        assert.containsN(
+            target,
+            '.o_field_x2many_list .o_field_many2many_tags[name="partner_ids"] .badge',
+            2
+        );
+        assert.deepEqual(
+            [
+                ...target.querySelectorAll(
+                    '.o_field_x2many_list .o_field_many2many_tags[name="partner_ids"] .o_tag_badge_text'
+                ),
+            ].map((el) => el.textContent),
+            ["aaa", "first record"]
+        );
+    });
+
+    QUnit.test("nested x2many (inline form view) and onchanges", async function (assert) {
+        serverData.models.partner.onchanges.bar = function (obj) {
+            if (!obj.bar) {
+                obj.p = [
+                    [5],
+                    [
+                        0,
+                        0,
+                        {
+                            turtles: [
+                                [
+                                    0,
+                                    0,
+                                    {
+                                        turtle_foo: "new turtle",
+                                    },
+                                ],
+                            ],
+                        },
+                    ],
+                ];
+            }
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="p">
+                        <tree>
+                            <field name="turtles"/>
+                        </tree>
+                        <form>
+                            <field name="turtles">
+                                <tree>
+                                    <field name="turtle_foo"/>
+                                </tree>
+                            </field>
+                        </form>
+                    </field>
+                </form>`,
+        });
+        assert.containsNone(target, ".o_data_row");
+
+        await click(target, ".o_field_widget[name=bar] input");
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_row").textContent, "1 record");
+
+        await click(target.querySelector(".o_data_row td"));
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.containsOnce(target, ".modal .o_form_view .o_data_row");
+        assert.strictEqual(
+            target.querySelector(".modal .o_form_view .o_data_row").textContent,
+            "new turtle"
+        );
+    });
+
+    QUnit.test("nested x2many (non inline form view) and onchanges", async function (assert) {
+        serverData.models.partner.onchanges.bar = function (obj) {
+            if (!obj.bar) {
+                obj.p = [
+                    [5],
+                    [
+                        0,
+                        0,
+                        {
+                            turtles: [
+                                [
+                                    0,
+                                    0,
+                                    {
+                                        turtle_foo: "new turtle",
+                                    },
+                                ],
+                            ],
+                        },
+                    ],
+                ];
+            }
+        };
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="p" widget="one2many">
+                        <tree>
+                            <field name="turtles"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsNone(target, ".o_data_row");
+
+        await click(target, 'div[name="bar"] input');
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_row").innerText.trim(), "1 record");
+
+        await click(target.querySelector(".o_data_row td"));
+
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.containsOnce(target, ".modal .o_form_view .o_data_row");
+        assert.strictEqual(
+            target.querySelector(".modal .o_form_view .o_data_row").innerText.trim(),
+            "new turtle"
+        );
+    });
+
+    QUnit.test(
+        "nested x2many (non inline views and no widget on inner x2many in list)",
+        async function (assert) {
+            serverData.models.partner.records[0].p = [1];
+            serverData.views = {
+                "partner,false,list": `
+                    <tree>
+                        <field name="turtles"/>
+                    </tree>`,
+                "partner,false,form": `
+                    <form>
+                        <field name="turtles" widget="many2many_tags"/>
+                    </form>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="p"/></form>',
+                resId: 1,
+            });
+
+            assert.containsOnce(target, ".o_data_row");
+            assert.strictEqual(target.querySelector(".o_data_row").innerText.trim(), "1 record");
+
+            await click(target.querySelector(".o_data_row td"));
+
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.containsOnce(target, ".modal .o_form_view .o_field_many2many_tags .badge");
+            assert.strictEqual(
+                target.querySelector(".modal .o_field_many2many_tags").innerText.trim(),
+                "donatello"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many (who contains display_name) with tree view and without form view",
+        async function (assert) {
+            serverData.views = {
+                "turtle,false,form": '<form><field name="turtle_foo"/></form>',
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="turtles">
+                                <tree>
+                                    <field name="display_name"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target.querySelector(".o_data_row td"));
+
+            assert.strictEqual(
+                target.querySelector('.modal div[name="turtle_foo"]').innerText,
+                "blip",
+                "should open the modal and display the form field"
+            );
+        }
+    );
+
+    QUnit.test("one2many field with virtual ids", async function (assert) {
+        serverData.views = {
+            "partner,false,form": '<form><field name="foo"/></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <notebook>
+                                <page>
+                                    <field name="p" mode="kanban">
+                                        <kanban>
+                                            <templates>
+                                                <t t-name="kanban-box">
+                                                    <div class="oe_kanban_details">
+                                                        <div class="o_test_id">
+                                                            <field name="id"/>
+                                                        </div>
+                                                        <div class="o_test_foo">
+                                                            <field name="foo"/>
+                                                        </div>
+                                                    </div>
+                                                </t>
+                                            </templates>
+                                        </kanban>
+                                    </field>
+                                </page>
+                            </notebook>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 4,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_kanban_renderer",
+            "should have one inner kanban view for the one2many field"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost)",
+            "should not have kanban records yet"
+        );
+
+        // // switch to edit mode and create a new kanban record
+        await clickEdit(target);
+        await click(target, ".o_field_widget .o-kanban-button-new");
+
+        // save & close the modal
+        assert.strictEqual(
+            target.querySelector(".modal-content .o_field_widget input").value,
+            "My little Foo Value",
+            "should already have the default value for field foo"
+        );
+        await clickSave(target.querySelector(".modal"));
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_kanban_renderer",
+            "should have one inner kanban view for the one2many field"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost)",
+            "should now have one kanban record"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost) .o_test_id"
+            ).innerText,
+            "",
+            "should not have a value for the id field"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost) .o_test_foo"
+            ).innerText,
+            "My little Foo Value",
+            "should have a value for the foo field"
+        );
+
+        // save the view to force a create of the new record in the one2many
+        await clickSave(target);
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_kanban_renderer",
+            "should have one inner kanban view for the one2many field"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost)",
+            "should now have one kanban record"
+        );
+        assert.notEqual(
+            target.querySelector(
+                ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost) .o_test_id"
+            ).innerText,
+            "",
+            "should now have a value for the id field"
+        );
+        assert.strictEqual(
+            target.querySelector(
+                ".o_field_widget .o_kanban_renderer .o_kanban_record:not(.o_kanban_ghost) .o_test_foo"
+            ).innerText,
+            "My little Foo Value",
+            "should still have a value for the foo field"
+        );
+    });
+
+    QUnit.test("one2many field with virtual ids with kanban button", async function (assert) {
+        assert.expect(36);
+
+        // this is a way to avoid the debounce of triggerAction
+        patchSetTimeout();
+
+        serverData.models.partner.records[0].p = [4];
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" mode="kanban">
+                        <kanban>
+                            <templates>
+                                <field name="foo"/>
+                                <t t-name="kanban-box">
+                                    <div>
+                                        <span><t t-esc="record.foo.value"/></span>
+                                        <button type="object" class="btn btn-link fa fa-shopping-cart" name="button_warn" string="button_warn" warn="warn" />
+                                        <button type="object" class="btn btn-link fa fa-shopping-cart" name="button_disabled" string="button_disabled" />
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                        <form>
+                            <field name="foo"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step(args.method);
+                    assert.strictEqual(args.args[1].p.length, 2);
+                    const command = args.args[1].p[1];
+                    assert.strictEqual(command[0], 0);
+                    assert.deepEqual(command[2], {
+                        foo: "My little Foo Value",
+                    });
+                }
+            },
+        });
+
+        patchWithCleanup(form.env.services.action, {
+            doActionButton: (params) => {
+                const { name, resModel, resId } = params;
+                assert.step(`${name}_${resModel}_${resId}`);
+                params.onClose();
+            },
+        });
+
+        // 1. Define all css selector
+        const oKanbanView = ".o_field_widget .o_kanban_renderer";
+        const oKanbanRecordActive = oKanbanView + " .o_kanban_record:not(.o_kanban_ghost)";
+        const oAllKanbanButton = oKanbanRecordActive + " button";
+        const btn1 = oKanbanRecordActive + ":nth-child(1) button";
+        const btn2 = oKanbanRecordActive + ":nth-child(2) button";
+        const btn1Warn = btn1 + '[name="button_warn"]';
+        const btn1Disabled = btn1 + '[name="button_disabled"]';
+        const btn2Warn = btn2 + '[name="button_warn"]';
+        const btn2Disabled = btn2 + '[name="button_disabled"]';
+
+        // check if we already have one kanban card
+        assert.containsOnce(
+            target,
+            oKanbanView,
+            "should have one inner kanban view for the one2many field"
+        );
+        assert.containsOnce(target, oKanbanRecordActive, "should have one kanban records yet");
+
+        // we have 2 buttons
+        assert.containsN(target, oAllKanbanButton, 2, "should have 2 buttons type object");
+
+        // disabled ?
+        assert.containsNone(
+            target,
+            oAllKanbanButton + "[disabled]",
+            "should not have button type object disabled"
+        );
+
+        // click on the button
+        await click(target, btn1Disabled);
+        assert.verifySteps(["button_disabled_partner_4"]);
+
+        await click(target, btn1Warn);
+        assert.verifySteps(["button_warn_partner_4"]);
+
+        // switch to edit mode
+        await clickEdit(target);
+
+        // click on existing buttons
+        await click(target, btn1Disabled);
+        assert.verifySteps(["button_disabled_partner_4"]);
+
+        await click(target, btn1Warn);
+        assert.verifySteps(["button_warn_partner_4"]);
+
+        // create new kanban record
+        await click(target, ".o_field_widget .o-kanban-button-new");
+
+        // save & close the modal
+        assert.strictEqual(
+            target.querySelector(".modal-content .o_field_widget input").value,
+            "My little Foo Value",
+            "should already have the default value for field foo"
+        );
+        await clickSave(target.querySelector(".modal"));
+
+        // check new item
+        assert.containsN(target, oAllKanbanButton, 4, "should have 4 buttons type object");
+        assert.containsN(target, btn1, 2, "should have 2 buttons type object in area 1");
+        assert.containsN(target, btn2, 2, "should have 2 buttons type object in area 2");
+        assert.containsNone(
+            target,
+            oAllKanbanButton + "[disabled]",
+            "should have 1 button type object disabled"
+        );
+
+        assert.notOk(target.querySelector(btn2Disabled).disabled);
+        assert.notOk(target.querySelector(btn2Warn).disabled);
+        assert.strictEqual(
+            target.querySelector(btn2Warn).getAttribute("warn"),
+            null,
+            "the warn attribute is not copied onto the button"
+        );
+
+        // click all buttons
+        await click(target, btn1Disabled);
+        assert.verifySteps(["write", "button_disabled_partner_4"]);
+        await click(target, btn1Warn);
+        await click(target, btn2Disabled);
+        await click(target, btn2Warn);
+        assert.verifySteps([
+            "button_warn_partner_4",
+            "button_disabled_partner_5",
+            "button_warn_partner_5",
+        ]);
+
+        // save the form
+        await clickSave(target);
+        assert.verifySteps([]); // the write has already been done
+
+        // click all buttons
+        await click(target, btn1Disabled);
+        await click(target, btn1Warn);
+        await click(target, btn2Disabled);
+        await click(target, btn2Warn);
+
+        assert.verifySteps(
+            [
+                "button_disabled_partner_4",
+                "button_warn_partner_4",
+                "button_disabled_partner_5",
+                "button_warn_partner_5",
+            ],
+            "should have clicked once on every button"
+        );
+    });
+
+    QUnit.test("focusing fields in one2many list", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                                <field name="turtle_int"/>
+                            </tree>
+                        </field>
+                    </group>
+                    <field name="foo"/>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        await click(target.querySelector(".o_data_row td"));
+        const turtleFooInput = target.querySelector('[name="turtle_foo"] input');
+        assert.strictEqual(turtleFooInput, document.activeElement);
+
+        triggerHotkey("Tab");
+        await nextTick();
+        const turtleIntInput = target.querySelector('[name="turtle_int"] input');
+        assert.strictEqual(turtleIntInput, document.activeElement);
+    });
+
+    QUnit.test("one2many list editable = top", async function (assert) {
+        assert.expect(6);
+
+        serverData.models.turtle.fields.turtle_foo.default = "default foo turtle";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    const commands = args.args[1].turtles;
+                    assert.strictEqual(commands[0][0], 0, "first command is a create");
+                    assert.strictEqual(commands[1][0], 4, "second command is a link to");
+                }
+            },
+        });
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_data_row", "should start with one data row");
+
+        await addRow(target);
+
+        assert.containsN(target, ".o_data_row", 2, "should have 2 data rows");
+        assert.strictEqual(
+            target.querySelector("tr.o_data_row input").value,
+            "default foo turtle",
+            "first row should be the new value"
+        );
+        assert.hasClass(
+            target.querySelector("tr.o_data_row"),
+            "o_selected_row",
+            "first row should be selected"
+        );
+
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many list editable = bottom", async function (assert) {
+        assert.expect(6);
+        serverData.models.turtle.fields.turtle_foo.default = "default foo turtle";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    const commands = args.args[1].turtles;
+                    assert.strictEqual(commands[0][0], 4, "first command is a link to");
+                    assert.strictEqual(commands[1][0], 0, "second command is a create");
+                }
+            },
+        });
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_data_row", "should start with one data row");
+
+        await addRow(target);
+
+        assert.containsN(target, ".o_data_row", 2, "should have 2 data rows");
+        assert.strictEqual(
+            target.querySelector("tr.o_data_row input").value,
+            "default foo turtle",
+            "second row should be the new value"
+        );
+        assert.hasClass(
+            target.querySelectorAll("tr.o_data_row")[1],
+            "o_selected_row",
+            "second row should be selected"
+        );
+
+        await clickSave(target);
+    });
+
+    QUnit.test('one2many list edition, no "Remove" button in modal', async function (assert) {
+        serverData.models.partner.fields.foo.default = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+        await addRow(target);
+        assert.containsOnce(target, ".modal");
+        assert.containsNone(target, ".modal .modal-footer .o_btn_remove");
+
+        // Discard a modal
+        await click(target.querySelector(".modal-footer .btn-secondary"));
+
+        await clickDiscard(target);
+    });
+
+    QUnit.test('x2many fields use their "mode" attribute', async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field mode="kanban" name="turtles">
+                            <tree>
+                                <field name="turtle_foo"/>
+                            </tree>
+                            <kanban>
+                                <templates>
+                                    <t t-name="kanban-box">
+                                        <div>
+                                            <field name="turtle_int"/>
+                                        </div>
+                                    </t>
+                                </templates>
+                            </kanban>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_one2many .o_field_x2many_kanban",
+            "should have rendered a kanban view"
+        );
+    });
+
+    QUnit.test("one2many list editable, onchange and required field", async function (assert) {
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.int_field = obj.turtles.length;
+            },
+        };
+        serverData.models.partner.records[0].int_field = 0;
+        serverData.models.partner.records[0].turtles = [];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field"/>
+                    <field name="turtles">
+                        <tree editable="top">
+                            <field name="turtle_int"/>
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="int_field"] input').value,
+            "0"
+        );
+
+        await addRow(target);
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="int_field"] input').value,
+            "0"
+        );
+        assert.verifySteps(["get_views", "read", "onchange"]);
+
+        await editInput(target, '.o_field_widget[name="turtle_foo"] input', "some text");
+        assert.verifySteps(["onchange"]);
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="int_field"] input').value,
+            "1"
+        );
+    });
+
+    QUnit.test(
+        "one2many list editable: trigger onchange when row is valid",
+        async function (assert) {
+            // should omit require fields that aren't in the view as they (obviously)
+            // have no value, when checking the validity of required fields
+            // shouldn't consider numerical fields with value 0 as unset
+            serverData.models.turtle.fields.turtle_foo.required = true;
+            serverData.models.turtle.fields.turtle_qux.required = true; // required field not in the view
+            serverData.models.turtle.fields.turtle_bar.required = true; // required boolean field with no default
+            delete serverData.models.turtle.fields.turtle_bar.default;
+            serverData.models.turtle.fields.turtle_int.required = true; // required int field (default 0)
+            serverData.models.turtle.fields.turtle_int.default = 0;
+            serverData.models.turtle.fields.partner_ids.required = true; // required many2many
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.int_field = obj.turtles.length;
+                },
+            };
+            serverData.models.partner.records[0].int_field = 0;
+            serverData.models.partner.records[0].turtles = [];
+
+            serverData.views = {
+                "turtle,false,list": `
+                    <tree editable="top">
+                        <field name="turtle_qux"/>
+                        <field name="turtle_bar"/>
+                        <field name="turtle_int"/>
+                        <field name="turtle_foo"/>
+                        <field name="partner_ids" widget="many2many_tags"/>
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field"/>
+                        <field name="turtles"/>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+                resId: 1,
+            });
+            await clickEdit(target);
+
+            assert.strictEqual(
+                $(target).find('.o_field_widget[name="int_field"] input').val(),
+                "0",
+                "int_field should start with value 0"
+            );
+
+            // add a new row (which is invalid at first)
+            await addRow(target);
+            assert.strictEqual(
+                $(target).find('.o_field_widget[name="int_field"] input').val(),
+                "0",
+                "int_field should still be 0 (no onchange should have been done yet)"
+            );
+            assert.verifySteps(["get_views", "read", "onchange"]);
+
+            // fill turtle_foo field
+            await editInput(target, '.o_field_widget[name="turtle_foo"] input', "some text");
+            assert.strictEqual(
+                $(target).find('.o_field_widget[name="int_field"] input').val(),
+                "0",
+                "int_field should still be 0 (no onchange should have been done yet)"
+            );
+            assert.verifySteps([], "no onchange should have been applied");
+
+            // fill partner_ids field with a tag (all required fields will then be set)
+            await selectDropdownItem(target, "partner_ids", "first record");
+
+            assert.strictEqual(
+                $(target).find('.o_field_widget[name="int_field"] input').val(),
+                "1",
+                "int_field should now be 1 (the onchange should have been done"
+            );
+            assert.verifySteps(["name_search", "read", "onchange"]);
+        }
+    );
+
+    QUnit.test(
+        "one2many list editable: 'required' modifiers is properly working",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.int_field = obj.turtles.length;
+                },
+            };
+
+            serverData.models.partner.records[0].turtles = [];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field"/>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "10"
+            );
+
+            await addRow(target);
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "10"
+            );
+
+            // fill turtle_foo field
+            await editInput(target, '.o_field_widget[name="turtle_foo"] input', "some text");
+
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "1"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many list editable: 'required' modifiers is properly working, part 2",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.int_field = obj.turtles.length;
+                },
+            };
+
+            serverData.models.partner.records[0].turtles = [];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field"/>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_int"/>
+                                <field name="turtle_foo" attrs='{"required": [["turtle_int", "=", 0]]}'/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "10"
+            );
+
+            await addRow(target);
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "10"
+            );
+
+            // fill turtle_int field
+            await editInput(target, '.o_field_widget[name="turtle_int"] input', "1");
+            assert.strictEqual(
+                target.querySelector('.o_field_widget[name="int_field"] input').value,
+                "1"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many list editable: add new line before onchange returns",
+        async function (assert) {
+            // If the user adds a new row (with a required field with onchange), selects
+            // a value for that field, then adds another row before the onchange returns,
+            // the editable list must wait for the onchange to return before trying to
+            // unselect the first row, otherwise it will be detected as invalid.
+            serverData.models.turtle.onchanges = {
+                turtle_trululu: function () {},
+            };
+
+            let def;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_trululu" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        await Promise.resolve(def);
+                    }
+                },
+            });
+
+            // add a first line but hold the onchange back
+            await addRow(target);
+            def = makeDeferred();
+            assert.containsOnce(target, ".o_data_row");
+            await clickOpenM2ODropdown(target, "turtle_trululu");
+            await clickM2OHighlightedItem(target, "turtle_trululu");
+
+            // try to add a second line and check that it is correctly waiting
+            // for the onchange to return
+            await addRow(target);
+            assert.containsNone(target, ".modal");
+            assert.containsNone(target, ".o_field_invalid");
+            assert.containsOnce(target, ".o_data_row");
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+            // resolve the onchange promise
+            def.resolve();
+            await nextTick();
+            assert.containsN(target, ".o_data_row", 2);
+            assert.doesNotHaveClass(target.querySelector(".o_data_row"), "o_selected_row");
+        }
+    );
+
+    QUnit.test(
+        "editable list: multiple clicks on Add an item do not create invalid rows",
+        async function (assert) {
+            serverData.models.turtle.onchanges = {
+                turtle_trululu: function () {},
+            };
+
+            let def;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_trululu" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        await Promise.resolve(def);
+                    }
+                },
+            });
+            def = makeDeferred();
+            // click twice to add a new line
+            await addRow(target);
+            await addRow(target);
+            assert.containsNone(target, ".o_data_row");
+
+            // resolve the onchange promise
+            def.resolve();
+            await nextTick();
+            assert.containsOnce(target, ".o_data_row");
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        }
+    );
+
+    QUnit.test("editable list: value reset by an onchange", async function (assert) {
+        // this test reproduces a subtle behavior that may occur in a form view:
+        // the user adds a record in a one2many field, and directly clicks on a
+        // datetime field of the form view which has an onchange, which totally
+        // overrides the value of the one2many (commands 5 and 0). The handler
+        // that switches the edited row to readonly is then called after the
+        // new value of the one2many field is applied (the one returned by the
+        // onchange), so the row that must go to readonly doesn't exist anymore.
+        serverData.models.partner.onchanges = {
+            datetime: function (obj) {
+                obj.turtles = [[5], [0, 0, { display_name: "new" }]];
+            },
+        };
+
+        let def;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="datetime"/>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            async mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    await Promise.resolve(def);
+                }
+            },
+        });
+
+        // trigger the two onchanges
+        await addRow(target);
+        await editInput(target, ".o_data_row .o_field_widget input", "a name");
+        def = makeDeferred();
+        await click(target, ".o_datepicker_input");
+        await editInput(target, ".o_datepicker_input", "04/27/2022 14:08:52");
+
+        // resolve the onchange promise
+        def.resolve();
+        await nextTick();
+
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_row .o_data_cell").innerText, "new");
+    });
+
+    QUnit.test("editable list: onchange that returns a warning", async function (assert) {
+        serverData.models.turtle.onchanges = {
+            display_name: function () {},
+        };
+
+        const warning = {
+            title: "Warning",
+            message: "You must first select a partner",
+        };
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step(args.method);
+                    return Promise.resolve({
+                        value: {},
+                        warning,
+                    });
+                }
+            },
+        });
+        await clickEdit(target);
+
+        patchWithCleanup(form.env.services.notification, {
+            add: (message, params) => {
+                assert.step(params.type);
+                assert.strictEqual(message, warning.message);
+                assert.strictEqual(params.title, warning.title);
+            },
+        });
+
+        // add a line (this should trigger an onchange and a warning)
+        await addRow(target);
+
+        // check if 'Add an item' still works (this should trigger an onchange
+        // and a warning again)
+        await addRow(target);
+
+        assert.verifySteps(["onchange", "warning", "onchange", "warning"]);
+    });
+
+    QUnit.test("editable list: contexts are correctly sent", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.partner.records[0].timmy = [12];
+
+        patchWithCleanup(session, { user_context: { someKey: "some value" } });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="timmy" context="{'key': parent.foo}">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "read" && args.model === "partner") {
+                    assert.deepEqual(
+                        args.kwargs.context,
+                        {
+                            active_field: 2,
+                            bin_size: true,
+                            someKey: "some value",
+                            uid: 7,
+                        },
+                        "read partner context"
+                    );
+                }
+                if (args.method === "read" && args.model === "partner_type") {
+                    assert.deepEqual(
+                        args.kwargs.context,
+                        {
+                            key: "yop",
+                            active_field: 2,
+                            someKey: "some value",
+                            uid: 7,
+                        },
+                        "read partner_type context"
+                    );
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.kwargs.context,
+                        {
+                            active_field: 2,
+                            someKey: "some value",
+                            uid: 7,
+                        },
+                        "write context"
+                    );
+                }
+            },
+            resId: 1,
+            context: { active_field: 2 },
+        });
+        await clickEdit(target);
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, ".o_field_widget[name=display_name] input", "abc");
+        await clickSave(target);
+    });
+
+    QUnit.test("resetting invisible one2manys", async function (assert) {
+        serverData.models.partner.records[0].turtles = [];
+        serverData.models.partner.onchanges.foo = function (obj) {
+            obj.turtles = [[5], [4, 1]];
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="turtles" invisible="1"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        await clickEdit(target);
+
+        await editInput(target, '[name="foo"] input', "abcd");
+        assert.verifySteps(["get_views", "read", "onchange"]);
+    });
+
+    QUnit.test(
+        "one2many: onchange that returns unknown field in list, but not in form",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                name: function () {},
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="name"/>
+                        <field name="p">
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="display_name"/>
+                                <field name="timmy" widget="many2many_tags"/>
+                            </form>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        return Promise.resolve({
+                            value: {
+                                p: [[5], [0, 0, { display_name: "new", timmy: [[5], [4, 12]] }]],
+                            },
+                        });
+                    }
+                },
+            });
+
+            assert.containsOnce(target, ".o_data_row");
+            assert.containsNone(target, '.o_field_widget[name="timmy"]');
+
+            await click(target.querySelector(".o_data_row td"));
+            assert.containsOnce(target, '.modal .o_field_many2many_tags[name="timmy"]');
+            assert.containsOnce(target, '.modal .o_field_many2many_tags[name="timmy"] .badge');
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        '.modal .o_field_many2many_tags[name="timmy"] .o_tag_badge_text'
+                    ),
+                ].map((el) => el.textContent),
+                ["gold"]
+            );
+        }
+    );
+
+    QUnit.test("multi level of nested x2manys, onchange and rawChanges", async function (assert) {
+        assert.expect(8);
+        serverData.models.partner.records[0].p = [1];
+        serverData.models.partner.onchanges = {
+            name: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="name"/>
+                        <field name="p" attrs="{'readonly': [['name', '=', 'readonly']]}">
+                            <tree><field name="display_name"/></tree>
+                            <form>
+                                <field name="display_name"/>
+                                <field name="p">
+                                    <tree><field name="display_name"/></tree>
+                                    <form><field name="display_name"/></form>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].p[0][2], {
+                        p: [[1, 1, { display_name: "new name" }]],
+                    });
+                }
+            },
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_data_row");
+
+        // open the o2m record in readonly first
+        await click(target.querySelector(".o_data_row td"));
+        assert.containsOnce(target, ".modal .o_form_readonly");
+
+        await clickDiscard(target.querySelector(".modal"));
+
+        // switch to edit mode and open it again
+        await clickEdit(target);
+        await click(target.querySelector(".o_data_row td"));
+        assert.containsOnce(target, ".modal .o_form_editable");
+        assert.containsOnce(target, ".modal .o_data_row");
+
+        // open the o2m again, in the dialog
+        await click(target.querySelector(".modal .o_data_row td"));
+
+        assert.containsN(target, ".modal .o_form_editable", 2);
+
+        // edit the name and click save modal that is on top
+        const dialogs = target.querySelectorAll(".modal");
+        await editInput(dialogs[1], ".o_field_widget[name=display_name] input", "new name");
+        await click(dialogs[1], ".modal-footer .btn-primary");
+
+        assert.containsOnce(target, ".modal .o_form_editable");
+
+        // click save on the other modal
+        await click(target, ".modal .modal-footer .btn-primary");
+
+        assert.containsNone(target, ".modal");
+
+        // save the main record
+        await clickSave(target);
+    });
+
+    QUnit.test("onchange and required fields with override in arch", async function (assert) {
+        serverData.models.partner.onchanges = {
+            turtles: function () {},
+        };
+        serverData.models.turtle.fields.turtle_foo.required = true;
+        serverData.models.partner.records[0].turtles = [];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_int"/>
+                            <field name="turtle_foo" required="0"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        await clickEdit(target);
+
+        // triggers an onchange on partner, because the new record is valid
+        await addRow(target);
+
+        assert.verifySteps(["get_views", "read", "onchange", "onchange"]);
+    });
+
+    QUnit.test("onchange on a one2many containing a one2many", async function (assert) {
+        // the purpose of this test is to ensure that the onchange specs are
+        // correctly and recursively computed
+        assert.expect(1);
+
+        serverData.models.partner.onchanges = {
+            p: function () {},
+        };
+        var checkOnchange = false;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                            <field name="p">
+                                <tree editable="bottom">
+                                    <field name="display_name"/>
+                                </tree>
+                            </field>
+                        </form>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange" && checkOnchange) {
+                    assert.strictEqual(
+                        args.args[3]["p.p.display_name"],
+                        "",
+                        "onchange specs should be computed recursively"
+                    );
+                }
+            },
+        });
+
+        await addRow(target);
+        await addRow(target, ".modal");
+        await editInput(target, ".modal .o_data_cell input", "new record");
+        checkOnchange = true;
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+    });
+
+    QUnit.test("editing tabbed one2many (editable=bottom)", async function (assert) {
+        assert.expect(13);
+
+        serverData.models.partner.records[0].turtles = [];
+        for (let i = 0; i < 42; i++) {
+            const id = 100 + i;
+            serverData.models.turtle.records.push({ id: id, turtle_foo: "turtle" + (id - 99) });
+            serverData.models.partner.records[0].turtles.push(id);
+        }
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "write") {
+                    assert.strictEqual(
+                        args.args[1].turtles[40][0],
+                        0,
+                        "should send a create command"
+                    );
+                    assert.deepEqual(args.args[1].turtles[40][2], { turtle_foo: "rainbow dash" });
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await addRow(target);
+        assert.containsN(target, "tr.o_data_row", 41);
+        assert.hasClass([...target.querySelectorAll("tr.o_data_row")].pop(), "o_selected_row");
+
+        await editInput(target, '.o_data_row [name="turtle_foo"] input', "rainbow dash");
+        await clickSave(target);
+        assert.containsN(target, "tr.o_data_row", 40);
+
+        assert.verifySteps(["get_views", "read", "read", "onchange", "write", "read", "read"]);
+    });
+
+    QUnit.test("editing tabbed one2many (editable=bottom), again...", async function (assert) {
+        serverData.models.partner.records[0].turtles = [];
+        for (let i = 0; i < 9; i++) {
+            const id = 100 + i;
+            serverData.models.turtle.records.push({ id: id, turtle_foo: "turtle" + (id - 99) });
+            serverData.models.partner.records[0].turtles.push(id);
+        }
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="3">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        // add a new record page 1 (this increases the limit to 4)
+        await addRow(target);
+        await editInput(target, '.o_data_row [name="turtle_foo"] input', "rainbow dash");
+        await click(target, ".o_x2m_control_panel .o_pager_next"); // page 2: 4 records
+        await click(target, ".o_x2m_control_panel .o_pager_next"); // page 3: 2 records
+        assert.containsN(target, "tr.o_data_row", 2);
+    });
+
+    QUnit.test("editing tabbed one2many (editable=top)", async function (assert) {
+        assert.expect(16);
+
+        serverData.models.partner.records[0].turtles = [];
+        serverData.models.turtle.fields.turtle_foo.default = "default foo";
+        for (let i = 0; i < 42; i++) {
+            const id = 100 + i;
+            serverData.models.turtle.records.push({ id: id, turtle_foo: "turtle" + (id - 99) });
+            serverData.models.partner.records[0].turtles.push(id);
+        }
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "write") {
+                    assert.strictEqual(args.args[1].turtles[40][0], 0);
+                    assert.deepEqual(args.args[1].turtles[40][2], { turtle_foo: "rainbow dash" });
+                }
+            },
+        });
+
+        await clickEdit(target);
+        await click(target, ".o_field_widget[name=turtles] .o_pager_next");
+        assert.containsN(target, "tr.o_data_row", 2);
+
+        await addRow(target);
+        assert.containsN(target, "tr.o_data_row", 3);
+        assert.hasClass(target.querySelector("tr.o_data_row"), "o_selected_row");
+        assert.strictEqual(target.querySelector("tr.o_data_row input").value, "default foo");
+
+        await editInput(target, '.o_data_row [name="turtle_foo"] input', "rainbow dash");
+        await clickSave(target);
+        assert.containsN(target, "tr.o_data_row", 40);
+
+        assert.verifySteps([
+            "get_views",
+            "read",
+            "read",
+            "read",
+            "onchange",
+            "write",
+            "read",
+            "read",
+        ]);
+    });
+
+    QUnit.test(
+        "one2many field: change value before pending onchange returns",
+        async function (assert) {
+            patchSetTimeout();
+
+            serverData.models.partner.onchanges = {
+                int_field: function () {},
+            };
+            let def;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="int_field"/>
+                                <field name="trululu"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        // delay the onchange RPC
+                        await Promise.resolve(def);
+                    }
+                },
+            });
+
+            await addRow(target);
+            def = makeDeferred();
+            await editInput(target, ".o_field_widget[name=int_field] input", "44");
+
+            // set trululu before onchange
+            await editInput(target, ".o_field_widget[name=trululu] input", "first");
+
+            // complete the onchange
+            def.resolve();
+            assert.strictEqual(target.querySelector(".o_field_many2one input").value, "first");
+            await nextTick();
+            // check name_search result
+            assert.strictEqual(target.querySelector(".o_field_many2one input").value, "first");
+            assert.containsOnce(
+                target,
+                ".o_field_many2one .dropdown-menu li:not(.o_m2o_dropdown_option)"
+            );
+        }
+    );
+
+    QUnit.test("focus is correctly reset after an onchange in an x2many", async function (assert) {
+        serverData.models.partner.onchanges = {
+            int_field: function () {},
+        };
+
+        let def;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="int_field"/>
+                                <button string="hello"/>
+                                <field name="qux"/>
+                                <field name="trululu"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            async mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    // delay the onchange RPC
+                    await Promise.resolve(def);
+                }
+            },
+        });
+
+        await addRow(target);
+
+        def = makeDeferred();
+
+        editInput(target, "[name=int_field] input", "44");
+
+        click(target, ".o_field_widget[name=qux]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=qux] input")
+        );
+
+        def.resolve();
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_field_widget[name=qux] input")
+        );
+
+        await clickOpenM2ODropdown(target, "trululu");
+        await clickM2OHighlightedItem(target, "trululu");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=trululu] input").value,
+            "first record"
+        );
+    });
+
+    QUnit.test("checkbox in an x2many that triggers an onchange", async function (assert) {
+        serverData.models.partner.onchanges = {
+            bar: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="bar"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        await addRow(target);
+        assert.ok(target.querySelector(".o_field_widget[name=bar] input").checked);
+
+        await click(target, ".o_field_widget[name=bar] input");
+        assert.notOk(target.querySelector(".o_field_widget[name=bar] input").checked);
+    });
+
+    QUnit.test(
+        "one2many with default value: edit line to make it invalid",
+        async function (assert) {
+            serverData.models.partner.fields.p.default = [
+                [0, false, { foo: "coucou", int_field: 5, p: [] }],
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="foo"/>
+                                <field name="int_field"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            // edit the line and enter an invalid value for int_field
+            await click(target.querySelectorAll(".o_data_row .o_data_cell")[1]);
+            await editInput(target, ".o_field_widget[name=int_field] input", "e");
+            await click(target, ".o_form_view");
+
+            assert.containsOnce(
+                target,
+                ".o_data_row.o_selected_row",
+                "line should not have been removed and should still be in edition"
+            );
+            assert.containsNone(target, ".modal", "a confirmation dialog should not be opened");
+            assert.hasClass(
+                target.querySelector(".o_field_widget[name=int_field]"),
+                "o_field_invalid"
+            );
+        }
+    );
+
+    QUnit.test(
+        "default value for nested one2manys (coming from onchange)",
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.models.partner.onchanges.p = function (obj) {
+                obj.p = [
+                    [5],
+                    [0, 0, { turtles: [[5], [4, 1, false]] }], // link record 1 by default
+                ];
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="p">
+                                <tree>
+                                    <field name="turtles"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "create") {
+                        assert.strictEqual(
+                            args.args[0].p[0][0],
+                            0,
+                            "should send a command 0 (CREATE) for p"
+                        );
+                        assert.deepEqual(
+                            args.args[0].p[0][2],
+                            { turtles: [[4, 1, false]] },
+                            "should send the correct values"
+                        );
+                    }
+                },
+            });
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+                ["1 record"]
+            );
+
+            await clickSave(target);
+        }
+    );
+
+    QUnit.test("display correct value after validation error", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.onchanges.turtles = function () {};
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    if (args.args[1].turtles[0][2].turtle_foo === "pinky") {
+                        // we simulate a validation error.  In the 'real' web client,
+                        // the server error will be used by the session to display
+                        // an error dialog.  From the point of view of the basic
+                        // model, the promise is just rejected.
+                        return Promise.reject();
+                    }
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].turtles[0],
+                        [1, 2, { turtle_foo: "foo" }],
+                        'should send the "good" value'
+                    );
+                }
+            },
+            resId: 1,
+        });
+        await clickEdit(target);
+        assert.strictEqual(target.querySelector(".o_data_row .o_data_cell").textContent, "blip");
+
+        // click and edit value to 'foo', which will trigger onchange
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_field_widget[name=turtle_foo] input", "foo");
+        await click(target, ".o_form_view");
+        assert.strictEqual(target.querySelector(".o_data_row .o_data_cell").textContent, "foo");
+
+        // click and edit value to 'pinky', which trigger a failed onchange
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_field_widget[name=turtle_foo] input", "pinky");
+        await click(target, ".o_form_view");
+        assert.strictEqual(target.querySelector(".o_data_row .o_data_cell").textContent, "foo");
+
+        // we make sure here that when we save, the values are the current
+        // values displayed in the field.
+        await clickSave(target);
+    });
+
+    QUnit.test("propagate context to sub views without default_* keys", async function (assert) {
+        assert.expect(8);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                assert.strictEqual(
+                    args.kwargs.context.flutter,
+                    "shy",
+                    "view context key should be used for every rpcs"
+                );
+                if (args.method === "onchange") {
+                    if (args.model === "partner") {
+                        assert.strictEqual(
+                            args.kwargs.context.default_flutter,
+                            "why",
+                            "should have default_* values in context for form view RPCs"
+                        );
+                    } else if (args.model === "turtle") {
+                        assert.notOk(
+                            args.kwargs.context.default_flutter,
+                            "should not have default_* values in context for subview RPCs"
+                        );
+                    }
+                }
+            },
+            context: {
+                flutter: "shy",
+                default_flutter: "why",
+            },
+        });
+        await addRow(target);
+        await editInput(target, '[name="turtle_foo"] input', "pinky pie");
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "nested one2manys with no widget in list and as invisible list in form",
+        async function (assert) {
+            serverData.models.partner.records[0].p = [1];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles"/>
+                            </tree>
+                            <form>
+                                <field name="turtles" invisible="1"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            assert.containsOnce(target, ".o_data_row");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row .o_data_cell")].map(
+                    (el) => el.textContent
+                ),
+                ["1 record"]
+            );
+
+            await click(target.querySelector(".o_data_row td"));
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.containsNone(target, ".modal .o_form_view .o_field_one2many");
+
+            // Test possible caching issues
+            await clickDiscard(target.querySelector(".modal"));
+            await click(target.querySelector(".o_data_row td"));
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.containsNone(target, ".modal .o_form_view .o_field_one2many");
+        }
+    );
+
+    QUnit.test("onchange on nested one2manys", async function (assert) {
+        assert.expect(6);
+
+        serverData.models.partner.onchanges.display_name = function (obj) {
+            if (obj.display_name) {
+                obj.p = [
+                    [5],
+                    [
+                        0,
+                        0,
+                        {
+                            display_name: "test",
+                            turtles: [[5], [0, 0, { display_name: "test nested" }]],
+                        },
+                    ],
+                ];
+            }
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="display_name"/>
+                        <field name="p">
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree>
+                                        <field name="display_name"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.strictEqual(
+                        args.args[0].p[0][0],
+                        0,
+                        "should send a command 0 (CREATE) for p"
+                    );
+                    assert.strictEqual(
+                        args.args[0].p[0][2].display_name,
+                        "test",
+                        "should send the correct values"
+                    );
+                    assert.strictEqual(
+                        args.args[0].p[0][2].turtles[0][0],
+                        0,
+                        "should send a command 0 (CREATE) for turtles"
+                    );
+                    assert.deepEqual(
+                        args.args[0].p[0][2].turtles[0][2],
+                        { display_name: "test nested" },
+                        "should send the correct values"
+                    );
+                }
+            },
+        });
+
+        await editInput(target, ".o_field_widget[name=display_name] input", "trigger onchange");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["test"]
+        );
+
+        // open the new subrecord to check the value of the nested o2m, and to
+        // ensure that it will be saved
+        await click(target.querySelector(".o_data_cell"));
+        assert.deepEqual(
+            [...target.querySelectorAll(".modal .o_data_cell")].map((el) => el.textContent),
+            ["test nested"]
+        );
+
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many with multiple pages and sequence field", async function (assert) {
+        serverData.models.partner.records[0].turtles = [3, 2, 1];
+        serverData.models.partner.onchanges.turtles = function () {};
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree limit="2">
+                            <field name="turtle_int" widget="handle"/>
+                            <field name="turtle_foo"/>
+                            <field name="partner_ids" invisible="1"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: {
+                            turtles: [
+                                [5],
+                                [1, 1, { turtle_foo: "from onchange", partner_ids: [[5]] }],
+                            ],
+                        },
+                    });
+                }
+            },
+        });
+        await clickEdit(target);
+        await click(target.querySelector(".o_list_record_remove button"));
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+            ["from onchange"]
+        );
+    });
+
+    QUnit.test("one2many with multiple pages and sequence field, part2", async function (assert) {
+        serverData.models.partner.records[0].turtles = [3, 2, 1];
+        serverData.models.partner.onchanges.turtles = function () {};
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="2">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" invisible="1"/>
+                            </tree>
+                            <form/>
+                        </field>
+                    </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: {
+                            turtles: [
+                                [5],
+                                [1, 1, { turtle_foo: "from onchange id2", partner_ids: [[5]] }],
+                                [1, 3, { turtle_foo: "from onchange id3", partner_ids: [[5]] }],
+                            ],
+                        },
+                    });
+                }
+            },
+        });
+        await clickEdit(target);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell.o_list_char")),
+            ["yop", "blip"]
+        );
+        await click(target.querySelector(".o_list_record_remove button"));
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell.o_list_char")),
+            ["from onchange id2", "from onchange id3"]
+        );
+    });
+
+    QUnit.test(
+        "one2many with sequence field, override default_get, bottom when inline",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [3, 2, 1];
+            serverData.models.turtle.fields.turtle_int.default = 10;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+
+            // starting condition
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa"]
+            );
+
+            // click add a new line
+            // save the record
+            // check line is at the correct place
+            const inputText = "ninja";
+            await addRow(target);
+            await editInput(target, '[name="turtle_foo"] input', inputText);
+            await clickSave(target);
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa", inputText]
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with sequence field, override default_get, top when inline",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [3, 2, 1];
+            serverData.models.turtle.fields.turtle_int.default = 10;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // starting condition
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa"]
+            );
+
+            // click add a new line
+            // save the record
+            // check line is at the correct place
+            const inputText = "ninja";
+            await addRow(target);
+            await editInput(target, '[name="turtle_foo"] input', inputText);
+            await clickSave(target);
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                [inputText, "blip", "yop", "kawa"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with sequence field, override default_get, bottom when popup",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [3, 2, 1];
+            serverData.models.turtle.fields.turtle_int.default = 10;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree>
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                            </tree>
+                            <form>
+                                <field name="turtle_int" invisible="1"/>
+                                <field name="turtle_foo"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // starting condition
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa"]
+            );
+
+            // click add a new line
+            // save the record
+            // check line is at the correct place
+            const inputText = "ninja";
+            await addRow(target);
+            await editInput(target, '.modal [name="turtle_foo"] input', inputText);
+            await clickSave(target.querySelector(".modal"));
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa", inputText]
+            );
+
+            await clickSave(target);
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map((el) => el.textContent),
+                ["blip", "yop", "kawa", inputText]
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with sequence field, override default_get, not last page",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [3, 2, 1];
+
+            serverData.models.turtle.fields.turtle_int.default = 10;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="2">
+                                <field name="turtle_int" widget="handle"/>
+                            </tree>
+                            <form>
+                                <field name="turtle_int"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+
+            // click add a new line
+            // check turtle_int for new is the current max of the page
+            await addRow(target);
+            assert.strictEqual(
+                target.querySelector('.modal [name="turtle_int"] input').value,
+                "10"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with sequence field, override default_get, last page",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [3, 2, 1];
+            serverData.models.turtle.fields.turtle_int.default = 10;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="4">
+                                <field name="turtle_int" widget="handle"/>
+                            </tree>
+                            <form>
+                                <field name="turtle_int"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // click add a new line
+            // check turtle_int for new is the current max of the page +1
+            await addRow(target);
+            assert.strictEqual(
+                target.querySelector('.modal [name="turtle_int"] input').value,
+                "22"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with sequence field, fetch name_get from empty list, field text",
+        async function (assert) {
+            // There was a bug where a RPC would fail because no route was set.
+            // The scenario is:
+            // - create a new parent model, which has a one2many
+            // - add at least 2 one2many lines which have:
+            //     - a handle field
+            //     - a many2one, which is not required, and we will leave it empty
+            // - reorder the lines with the handle
+            // -> This will call a resequence, which calls a name_get.
+            // -> With the bug that would fail, if it's ok the test will pass.
+
+            // This test will also make sure lists with
+            // FieldText (turtle_description) can be reordered with a handle.
+            // More specifically this will trigger a reset on a FieldText
+            // while the field is not in editable mode.
+            serverData.models.turtle.fields.turtle_int.default = 10;
+            serverData.models.turtle.fields.product_id.default = 37;
+            serverData.models.turtle.fields.not_required_product_id = {
+                string: "Product",
+                type: "many2one",
+                relation: "product",
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="turtle_foo"/>
+                                <field name="not_required_product_id"/>
+                                <field name="turtle_description" widget="text"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            // starting condition
+            assert.containsNone(target, ".o_data_cell");
+
+            const inputText1 = "relax";
+            const inputText2 = "max";
+            await addRow(target);
+            await editInput(target, 'div[name="turtle_foo"] input', inputText1);
+            await addRow(target);
+            await editInput(target, 'div[name="turtle_foo"] input', inputText2);
+            await addRow(target);
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                [inputText1, inputText2, ""]
+            );
+
+            assert.containsN(target, ".ui-sortable-handle", 3);
+
+            await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr:nth-child(1)");
+
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                [inputText2, inputText1] // empty line has been discarded on the drag and drop
+            );
+        }
+    );
+
+    QUnit.test("one2many with several pages, onchange and default order", async function (assert) {
+        // This test reproduces a specific scenario where a one2many is displayed
+        // over several pages, and has a default order such that a record that
+        // would normally be on page 1 is actually on another page. Moreover,
+        // there is an onchange on that one2many which converts all commands 4
+        // (LINK_TO) into commands 1 (UPDATE), which is standard in the ORM.
+        // This test ensures that the record displayed on page 2 is never fully
+        // read.
+
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        serverData.models.turtle.records[0].partner_ids = [1];
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                var res = _.map(obj.turtles, function (command) {
+                    if (command[0] === 1) {
+                        // already an UPDATE command: do nothing
+                        return command;
+                    }
+                    // convert LINK_TO commands to UPDATE commands
+                    var id = command[1];
+                    var record = _.findWhere(serverData.models.turtle.records, { id: id });
+                    return [1, id, _.pick(record, ["turtle_int", "turtle_foo", "partner_ids"])];
+                });
+                obj.turtles = [[5]].concat(res);
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="top" limit="2" default_order="turtle_foo">
+                            <field name="turtle_int"/>
+                            <field name="turtle_foo" class="foo"/>
+                            <field name="partner_ids" widget="many2many_tags"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                var ids = args.method === "read" ? " [" + args.args[0] + "]" : "";
+                assert.step(args.method + ids);
+            },
+            resId: 1,
+        });
+
+        await click(target, ".o_form_button_edit");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.foo")].map((el) => el.textContent),
+            ["blip", "kawa"]
+        );
+
+        // edit turtle_int field of first row
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(
+            target.querySelector(".o_data_row"),
+            ".o_field_widget[name=turtle_int] input",
+            3
+        );
+        await click(target, ".o_form_view");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell.foo")].map((el) => el.textContent),
+            ["blip", "kawa"]
+        );
+
+        assert.verifySteps([
+            "get_views",
+            "read [1]", // main record
+            "read [1,2,3]", // one2many (turtle_foo, all records)
+            "read [2,3]", // one2many (all fields in view, records of first page)
+            "read [2,4]", // many2many inside one2many (partner_ids), first page only
+            "onchange",
+            "read [1]", // AAB FIXME 4 (draft fixing taskid-2323491):
+            // this test's purpose is to assert that this rpc isn't
+            // done, but yet it is. Actually, it wasn't before because mockOnChange
+            // returned [1] as command list, instead of [[6, false, [1]]], so basically
+            // this value was ignored. Now that mockOnChange properly works, the value
+            // is taken into account but the basicmodel doesn't care it concerns a
+            // record of the second page, and does the read. I don't think we
+            // introduced a regression here, this test was simply wrong...
+        ]);
+    });
+
+    QUnit.test(
+        "new record, with one2many with more default values than limit",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="2">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                context: { default_turtles: [1, 2, 3] },
+            });
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map(
+                    (el) => el.querySelector(".o_data_cell").textContent
+                ),
+                ["yop", "blip"]
+            );
+
+            await clickSave(target);
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_row")].map(
+                    (el) => el.querySelector(".o_data_cell").textContent
+                ),
+                ["yop", "blip"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "add a new line after limit is reached should behave nicely",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.turtles = [
+                        [5],
+                        [1, 1, { turtle_foo: "yop" }],
+                        [1, 2, { turtle_foo: "blip" }],
+                        [1, 3, { turtle_foo: "kawa" }],
+                        [0, obj.turtles[3][2], { turtle_foo: "abc" }],
+                    ];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree limit="3" editable="bottom">
+                                <field name="turtle_foo" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await click(target, ".o_form_button_edit");
+            await addRow(target);
+            assert.containsN(target, ".o_data_row", 4);
+
+            await editInput(target, 'div[name="turtle_foo"] .o_input', "a");
+            assert.containsN(
+                target,
+                ".o_data_row",
+                4,
+                "should still have 4 data rows (the limit is increased to 4)"
+            );
+        }
+    );
+
+    QUnit.test(
+        "onchange in a one2many with non inline view on an existing record",
+        async function (assert) {
+            serverData.models.partner.fields.sequence = { string: "Sequence", type: "integer" };
+            serverData.models.partner.records[0].sequence = 1;
+            serverData.models.partner.records[1].sequence = 2;
+            serverData.models.partner.onchanges = { sequence: function () {} };
+
+            serverData.models.partner_type.fields.partner_ids = {
+                string: "Partner",
+                type: "one2many",
+                relation: "partner",
+            };
+            serverData.models.partner_type.records[0].partner_ids = [1, 2];
+            serverData.views = {
+                "partner,false,list": `
+                    <tree>
+                        <field name="sequence" widget="handle"/>
+                        <field name="display_name"/>
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner_type",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="partner_ids" widget="one2many"/>
+                    </form>`,
+                resId: 12,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            await clickEdit(target);
+
+            // swap 2 lines in the one2many
+            await dragAndDrop("tbody tr:nth-child(2) .o_handle_cell", "tbody tr", "top");
+
+            assert.verifySteps(["get_views", "get_views", "read", "read", "onchange", "onchange"]);
+        }
+    );
+
+    QUnit.test(
+        "onchange in a one2many with non inline view on a new record",
+        async function (assert) {
+            serverData.models.turtle.onchanges = {
+                display_name: function (obj) {
+                    if (obj.display_name) {
+                        obj.turtle_int = 44;
+                    }
+                },
+            };
+            serverData.views = {
+                "turtle,false,list": `
+                    <tree editable="bottom">
+                        <field name="display_name"/>
+                        <field name="turtle_int"/>
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles" widget="one2many"/>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method || route);
+                },
+            });
+
+            // add a row and trigger the onchange
+            await addRow(target);
+            await editInput(target, '.o_data_row div[name="display_name"] input', "a name");
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row div[name=turtle_int] input").value,
+                "44"
+            );
+
+            assert.verifySteps([
+                "get_views", // load main form
+                "get_views", // load sub list
+                "onchange", // main record
+                "onchange", // sub record
+                "onchange", // edition of display_name of sub record
+            ]);
+        }
+    );
+
+    QUnit.test('add a line, edit it and "Save & New"', async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        assert.containsNone(target, ".o_data_row");
+        // add a new record
+        await addRow(target);
+        await editInput(target, ".modal .o_field_widget input", "new record");
+
+        await clickSave(target.querySelector(".modal"));
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row .o_data_cell")].map((el) => el.textContent),
+            ["new record"]
+        );
+
+        // reopen freshly added record and edit it
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".modal .o_field_widget input", "new record edited");
+
+        // save it, and choose to directly create another record
+        await click(target.querySelectorAll(".modal .modal-footer .btn-primary")[1]);
+
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(target.querySelector(".modal .o_field_widget").textContent, "");
+
+        await editInput(target, ".modal .o_field_widget input", "another new record");
+        await clickSave(target.querySelector(".modal"));
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row .o_data_cell")].map((el) => el.textContent),
+            ["new record edited", "another new record"]
+        );
+    });
+
+    QUnit.test("o2m add a line custom control create editable", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <control>
+                                <create string="Add food" context="" />
+                                <create string="Add pizza" context="{'default_display_name': 'pizza'}"/>
+                            </control>
+                            <control>
+                                <create string="Add pasta" context="{'default_display_name': 'pasta'}"/>
+                            </control>
+                            <field name="display_name"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        // new controls correctly added
+        const rowAdd = target.querySelectorAll(".o_field_x2many_list_row_add");
+        assert.strictEqual(rowAdd.length, 1);
+        assert.strictEqual(rowAdd[0].closest("tr").querySelectorAll("td").length, 1);
+        assert.deepEqual(
+            [...rowAdd[0].querySelectorAll("a")].map((el) => el.textContent),
+            ["Add food", "Add pizza", "Add pasta"]
+        );
+
+        // click add food
+        // check it's empty
+        await addRow(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            [""]
+        );
+
+        // click add pizza
+        // press enter to save the record
+        // check it's pizza
+        await click(target, ".o_field_x2many_list_row_add a:nth-child(2)");
+        const input = target.querySelector(
+            '.o_field_widget[name="p"] .o_selected_row .o_field_widget[name="display_name"] input'
+        );
+
+        assert.strictEqual(document.activeElement, input);
+
+        await triggerEvent(input, null, "keydown", { key: "Enter" });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "pizza", ""]
+        );
+
+        // click add pasta
+        await click(target, ".o_field_x2many_list_row_add a:nth-child(3)");
+        await clickSave(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "pizza", "", "pasta"]
+        );
+    });
+
+    QUnit.test("o2m add a line custom control create non-editable", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                        <control>
+                            <create string="Add food" context="" />
+                            <create string="Add pizza" context="{'default_display_name': 'pizza'}" />
+                        </control>
+                        <control>
+                            <create string="Add pasta" context="{'default_display_name': 'pasta'}" />
+                        </control>
+                        <field name="display_name"/>
+                    </tree>
+                    <form>
+                        <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        // new controls correctly added
+        const rowAdd = target.querySelectorAll(".o_field_x2many_list_row_add");
+        assert.strictEqual(rowAdd.length, 1);
+        assert.containsN(rowAdd[0].closest("tr"), "td", 1);
+        assert.deepEqual(
+            [...rowAdd[0].querySelectorAll("a")].map((el) => el.textContent),
+            ["Add food", "Add pizza", "Add pasta"]
+        );
+
+        // click add food
+        // check it's empty
+        await addRow(target);
+        await clickSave(target.querySelector(".modal"));
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            [""]
+        );
+
+        // click add pizza
+        // save the modal
+        // check it's pizza
+        await click(target, ".o_field_x2many_list_row_add a:nth-child(2)");
+        await clickSave(target.querySelector(".modal"));
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "pizza"]
+        );
+
+        // click add pasta
+        // save the whole record
+        // check it's pizzapasta
+        await click(target, ".o_field_x2many_list_row_add a:nth-child(3)");
+        await clickSave(target.querySelector(".modal"));
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "pizza", "pasta"]
+        );
+    });
+
+    QUnit.test("o2m add a line custom control create align with handle", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="int_field" widget="handle"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        // controls correctly added, at one column offset when handle is present
+        const tr = target.querySelector(".o_field_x2many_list_row_add").closest("tr");
+        assert.containsN(tr, "td", 2);
+        const tds = tr.querySelectorAll("td");
+        assert.strictEqual(tds[0].textContent, "");
+        assert.strictEqual(tds[1].textContent, "Add a line");
+    });
+
+    QUnit.test("one2many form view with action button", async function (assert) {
+        // once the action button is clicked, the record is reloaded (via the
+        // onClose handler, executed because the python method does not return
+        // any action, or an ir.action.act_window_close) ; this test ensures that
+        // it reloads the fields of the opened view (i.e. the form in this case).
+        // See https://github.com/odoo/odoo/issues/24189
+
+        const actionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        serverData.models.partner.records[1].display_name = "new name";
+                        serverData.models.partner.records[1].timmy = [12];
+                        params.onClose();
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        serverData.models.partner.records[0].p = [2];
+        serverData.views = {
+            "partner_type,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                        <form>
+                            <button type="action" string="Set Timmy"/>
+                            <field name="timmy"/>
+                        </form>
+                    </field>
+                </form>`,
+        });
+
+        await clickEdit(target);
+
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(target.querySelector(".o_data_cell").textContent, "second record");
+
+        // open one2many record in form view
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".modal .o_form_view");
+        assert.containsNone(target, ".modal .o_form_view .o_data_row");
+
+        // click on the action button
+        await click(target.querySelector(".modal .o_form_view button"));
+        assert.containsOnce(target, ".modal .o_data_row");
+        assert.strictEqual(target.querySelector(".modal .o_data_cell").textContent, "gold");
+
+        // save the dialog
+        await click(target.querySelector(".modal .modal-footer .btn-primary"));
+
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "new name");
+    });
+
+    QUnit.test("onchange affecting inline unopened list view", async function (assert) {
+        // when we got onchange result for fields of record that were not
+        // already available because they were in a inline view not already
+        // opened, in a given configuration the change were applied ignoring
+        // existing data, thus a line of a one2many field inside a one2many
+        // field could be duplicated unexplectedly
+
+        let numUserOnchange = 0;
+        serverData.models.user.onchanges = {
+            partner_ids: function (obj) {
+                if (numUserOnchange === 0) {
+                    // simulate proper server onchange after save of modal with new record
+                    obj.partner_ids = [
+                        [5],
+                        [
+                            1,
+                            1,
+                            {
+                                display_name: "first record",
+                                turtles: [[5], [1, 2, { display_name: "donatello" }]],
+                            },
+                        ],
+                        [
+                            1,
+                            2,
+                            {
+                                display_name: "second record",
+                                turtles: [[5], obj.partner_ids[1][2].turtles[0]],
+                            },
+                        ],
+                    ];
+                }
+                numUserOnchange++;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "user",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="partner_ids">
+                                <form>
+                                    <field name="turtles">
+                                        <tree editable="bottom">
+                                            <field name="display_name"/>
+                                        </tree>
+                                    </field>
+                                </form>
+                                <tree>
+                                    <field name="display_name"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 17,
+        });
+
+        // add a turtle on second partner
+        await clickEdit(target);
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        await addRow(target.querySelector(".modal"));
+        await editInput(target, ".modal .o_field_widget[name=display_name] input", "michelangelo");
+        await click(target.querySelector(".modal .btn-primary"));
+        // open first partner so changes from previous action are applied
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await click(target.querySelector(".modal .btn-primary"));
+        await clickSave(target);
+
+        assert.strictEqual(
+            numUserOnchange,
+            2,
+            "there should 2 and only 2 onchange from closing the partner modal"
+        );
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsOnce(target, ".modal .o_data_row", "only 1 turtle for first partner");
+        assert.strictEqual(
+            target.querySelector(".modal .o_data_cell").innerText,
+            "donatello",
+            "first partner turtle is donatello"
+        );
+        await click(target.querySelector(".modal .modal-footer .btn-primary")); // Close
+
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".modal .o_data_row", "only 1 turtle for second partner");
+        assert.strictEqual(
+            target.querySelector(".modal .o_data_cell").innerText,
+            "michelangelo",
+            "second partner turtle is michelangelo"
+        );
+        await clickDiscard(target.querySelector(".modal"));
+    });
+
+    QUnit.test("click on URL should not open the record", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1];
+
+        // avoid to open a new tab or the mail app
+        const onClick = (ev) => {
+            assert.step("link clicked");
+            ev.preventDefault();
+        };
+        browser.addEventListener("click", onClick, { capture: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree>
+                            <field name="display_name" widget="email"/>
+                            <field name="turtle_foo" widget="url"/>
+                        </tree>
+                        <form/>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_email_cell a"));
+        assert.containsNone(target, ".modal");
+        assert.verifySteps(["link clicked"]);
+
+        await click(target.querySelector(".o_url_cell a"));
+        assert.containsNone(target, ".modal");
+        assert.verifySteps(["link clicked"]);
+    });
+
+    QUnit.test("create and edit on m2o in o2m, and press ESCAPE", async function (assert) {
+        patchSetTimeout();
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="top">
+                            <field name="turtle_trululu"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        await addRow(target);
+
+        assert.containsOnce(target, ".o_selected_row");
+
+        await clickOpenM2ODropdown(target, "turtle_trululu");
+        await editInput(target, "[name=turtle_trululu] input", "ABC");
+        await clickOpenedDropdownItem(target, "turtle_trululu", "Create and edit...");
+
+        assert.containsOnce(target, ".modal .o_form_view");
+
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.containsNone(target, ".modal .o_form_view");
+        assert.containsOnce(target, ".o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row [name=turtle_trululu] input")
+        );
+    });
+
+    QUnit.test(
+        "one2many add a line should not crash if orderedResIDs is not set",
+        async function (assert) {
+            // There is no assertion, the code will just crash before the bugfix.
+            assert.expect(0);
+
+            const actionService = {
+                start() {
+                    return {
+                        doActionButton(args) {
+                            return Promise.reject();
+                        },
+                    };
+                },
+            };
+            registry.category("services").add("action", actionService, { force: true });
+
+            serverData.models.partner.records[0].turtles = [];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button name="post" type="object" string="Validate" class="oe_highlight"/>
+                        </header>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            await click(target, 'button[name="post"]');
+            await addRow(target);
+        }
+    );
+
+    QUnit.test(
+        "one2many shortcut tab should not crash when there is no input widget",
+        async function (assert) {
+            // create a one2many view which has no input (only 1 textarea in this case)
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo" widget="text"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // add a row, fill it, then trigger the tab shortcut
+            await addRow(target);
+            await editInput(target, "[name=turtle_foo] textarea", "ninja");
+
+            assert.strictEqual(
+                target.querySelector("[name=turtle_foo] textarea"),
+                document.activeElement
+            );
+
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_field_text")].map((el) => el.textContent),
+                ["blip", "ninja", ""]
+            );
+            assert.containsOnce(target, ".o_field_text textarea");
+        }
+    );
+
+    QUnit.test("one2many with onchange, required field, shortcut enter", async function (assert) {
+        serverData.models.turtle.onchanges = {
+            turtle_foo: function () {},
+        };
+
+        let def;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            async mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "onchange") {
+                    await Promise.resolve(def);
+                }
+            },
+        });
+
+        assert.verifySteps(["get_views", "onchange"]);
+
+        const value = "hello";
+
+        // add a new line
+        await addRow(target);
+
+        assert.verifySteps(["onchange"]);
+
+        // we want to add a delay to simulate an onchange
+        def = makeDeferred();
+
+        // write something in the field
+        const input = target.querySelector("[name=turtle_foo] input");
+        input.value = value;
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+
+        // check that nothing changed before the onchange finished
+        assert.strictEqual(target.querySelector("[name=turtle_foo] input").value, value);
+        assert.containsOnce(target, ".o_data_row");
+
+        assert.verifySteps(["onchange"]);
+
+        // unlock onchange
+        def.resolve();
+        await nextTick();
+
+        // check the current line is added with the correct content and a new line is editable
+        assert.containsN(target, ".o_data_row", 2);
+        assert.strictEqual(
+            target.querySelector(".o_data_row:nth-child(1) [name=turtle_foo]").innerText,
+            value
+        );
+        assert.strictEqual(
+            target.querySelector(".o_data_row:nth-child(2) [name=turtle_foo] input").value,
+            ""
+        );
+
+        assert.verifySteps(["onchange"]);
+    });
+
+    QUnit.test(
+        "no deadlock when leaving a one2many line with uncommitted changes",
+        async function (assert) {
+            // Before unselecting a o2m line, field widgets are asked to commit their changes (new values
+            // that they wouldn't have sent to the model yet). This test is added alongside a bug fix
+            // ensuring that we don't end up in a deadlock when a widget actually has some changes to
+            // commit at that moment.
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+                // we set a fieldDebounce to precisely mock the behavior of the webclient: changes are
+                // not sent to the model at keystrokes, but when the input is left
+
+                // legacyParams: { fieldDebounce: 5000 }, // WOWL keep this in view API?
+            });
+
+            await addRow(target);
+
+            await editInput(target, ".o_field_widget[name=turtles] input", "some foo value");
+
+            // click to add a second row to unselect the current one, then save
+            await addRow(target);
+            await clickSave(target);
+
+            assert.containsOnce(target, ".o_form_readonly");
+            assert.strictEqual(
+                target.querySelector(".o_data_row").textContent.trim(),
+                "some foo value"
+            );
+            assert.verifySteps([
+                "get_views", // main form view
+                "onchange", // main record
+                "onchange", // line 1
+                "onchange", // line 2
+                "create",
+                "read", // main record
+                "read", // line 1
+            ]);
+        }
+    );
+
+    QUnit.test("one2many with extra field from server not in form", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="datetime"/>
+                            <field name="display_name"/>
+                        </tree>
+                        <form>
+                            <field name="display_name"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    args.args[1].p[0][2].datetime = "2018-04-05 12:00:00";
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        // Add a record in the list
+        await addRow(target);
+        await editInput(target, ".modal div[name=display_name] input", "michelangelo");
+
+        // Save the record in the modal (though it is still virtual)
+        await click(target.querySelector(".modal .btn-primary"));
+
+        assert.containsOnce(target, ".o_data_row");
+        let cells = target.querySelectorAll(".o_data_cell");
+        assert.strictEqual(cells[0].textContent, "");
+        assert.strictEqual(cells[1].textContent, "michelangelo");
+
+        // Save the whole thing
+        await clickSave(target);
+
+        // Redo asserts in RO mode after saving
+        assert.containsOnce(target, ".o_data_row");
+        cells = target.querySelectorAll(".o_data_cell");
+        assert.strictEqual(cells[0].textContent, "04/05/2018 13:00:00");
+        assert.strictEqual(cells[1].textContent, "michelangelo");
+    });
+
+    QUnit.test("one2many invisible depends on parent field", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="product_id"/>
+                        </group>
+                        <notebook>
+                            <page string="Partner page">
+                                <field name="bar"/>
+                                <field name="p">
+                                    <tree>
+                                        <field name="foo" attrs="{'column_invisible': [('parent.product_id', '!=', False)]}"/>
+                                        <field name="bar" attrs="{'column_invisible': [('parent.bar', '=', False)]}"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            2,
+            "should be 2 columns in the one2many"
+        );
+
+        await clickEdit(target);
+        await selectDropdownItem(target, "product_id", "xphone");
+
+        assert.containsOnce(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            "should be 1 column when the product_id is set"
+        );
+        await editInput(target, ".o_field_many2one[name=product_id] input", "");
+        assert.containsN(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            2,
+            "should be 2 columns in the one2many when product_id is not set"
+        );
+        await click(target.querySelector(".o_field_boolean[name=bar] input"));
+        assert.containsOnce(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            "should be 1 column after the value change"
+        );
+    });
+
+    QUnit.test("column_invisible attrs on a button in a one2many list", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_id"/>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <button name="abc" string="Do it" class="some_button" attrs="{'column_invisible': [('parent.product_id', '=', False)]}"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        await clickEdit(target);
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            ""
+        );
+        assert.containsN(target, ".o_list_table th", 2); // foo + trash bin
+        assert.containsNone(target, ".some_button");
+        await selectDropdownItem(target, "product_id", "xphone");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            "xphone"
+        );
+        assert.containsN(target, ".o_list_table th", 3); // foo + button + trash bin
+        assert.containsOnce(target, ".some_button");
+    });
+
+    QUnit.test("column_invisible attrs on adjacent buttons", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_id"/>
+                    <field name="trululu"/>
+                    <field name="p">
+                        <tree>
+                            <button name="abc1" string="Do it 1" class="some_button1"/>
+                            <button name="abc2" string="Do it 2" class="some_button2" attrs="{'column_invisible': [('parent.product_id', '!=', False)]}"/>
+                            <field name="foo"/>
+                            <button name="abc3" string="Do it 3" class="some_button3" attrs="{'column_invisible': [('parent.product_id', '!=', False)]}"/>
+                            <button name="abc4" string="Do it 4" class="some_button4" attrs="{'column_invisible': [('parent.trululu', '!=', False)]}"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            ""
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=trululu] input").value,
+            "aaa"
+        );
+        assert.containsN(target, ".o_list_table th", 4); // button group 1 + foo + button group 2 + trash bin
+        assert.containsOnce(target, ".some_button1");
+        assert.containsOnce(target, ".some_button2");
+        assert.containsOnce(target, ".some_button3");
+        assert.containsNone(target, ".some_button4");
+
+        await selectDropdownItem(target, "product_id", "xphone");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            "xphone"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=trululu] input").value,
+            "aaa"
+        );
+        assert.containsN(target, ".o_list_table th", 3); // button group 1 + foo + trash bin
+        assert.containsOnce(target, ".some_button1");
+        assert.containsNone(target, ".some_button2");
+        assert.containsNone(target, ".some_button3");
+        assert.containsNone(target, ".some_button4");
+    });
+
+    QUnit.test("field context is correctly passed to x2m subviews", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles" context="{'some_key': 1}">
+                        <kanban>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div>
+                                        <t t-if="context.some_key">
+                                            <field name="turtle_foo"/>
+                                        </t>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.strictEqual(
+            [...target.querySelectorAll(".o_kanban_record span")].filter(
+                (el) => el.textContent === "blip"
+            ).length,
+            1,
+            "condition in the kanban template should have been correctly evaluated"
+        );
+    });
+
+    QUnit.test("one2many kanban with widget handle", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <kanban>
+                            <field name="turtle_int" widget="handle"/>
+                            <templates>
+                                <t t-name="kanban-box">
+                                    <div>
+                                        <field name="turtle_foo"/>
+                                    </div>
+                                </t>
+                            </templates>
+                        </kanban>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1], {
+                        turtles: [
+                            [1, 2, { turtle_int: 0 }],
+                            [1, 3, { turtle_int: 1 }],
+                            [1, 1, { turtle_int: 2 }],
+                        ],
+                    });
+                }
+            },
+            resId: 1,
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
+                (el) => el.innerText
+            ),
+            ["yop", "blip", "kawa"]
+        );
+
+        // should not work (form in mode "readonly")
+        await dragAndDrop(".o_kanban_record:nth-child(1)", ".o_kanban_record:nth-child(3)");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
+                (el) => el.innerText
+            ),
+            ["yop", "blip", "kawa"]
+        );
+
+        await clickEdit(target);
+
+        await dragAndDrop(".o_kanban_record:nth-child(1)", ".o_kanban_record:nth-child(3)");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")].map(
+                (el) => el.innerText
+            ),
+            ["blip", "kawa", "yop"]
+        );
+
+        await clickSave(target);
+    });
+
+    QUnit.test("one2many editable list: edit and click on add a line", async function (assert) {
+        serverData.models.turtle.onchanges = {
+            turtle_int: function () {},
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom"><field name="turtle_int"/></tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step("onchange");
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_data_row");
+
+        // edit first row
+        await clickEdit(target);
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        target.querySelector(".o_selected_row .o_field_widget[name=turtle_int] input").value = "44";
+        await triggerEvent(
+            target,
+            ".o_selected_row .o_field_widget[name=turtle_int] input",
+            "input"
+        );
+        assert.verifySteps([]);
+
+        // simulate a long click on 'Add a line' (mousedown [delay] mouseup and click events)
+        triggerEvent(target, ".o_field_x2many_list_row_add a", "mousedown");
+        // mousedown is supposed to trigger the change event on the edited input, but it doesn't
+        // in the test environment, for an unknown reason, so we trigger it manually to reproduce
+        // what really happens
+        await triggerEvent(
+            target,
+            ".o_selected_row .o_field_widget[name=turtle_int] input",
+            "change"
+        );
+
+        // release the click
+        await triggerEvents(target, ".o_field_x2many_list_row_add a", ["mouseup", "click"]);
+        assert.verifySteps(["onchange", "onchange"]);
+
+        assert.containsN(target, ".o_data_row", 2);
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "44");
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+    });
+
+    QUnit.test(
+        "many2manys inside a one2many are fetched in batch after onchange",
+        async function (assert) {
+            assert.expect(7);
+
+            serverData.models.partner.onchanges = {
+                turtles: function (obj) {
+                    obj.turtles = [
+                        [5],
+                        [
+                            1,
+                            1,
+                            {
+                                turtle_foo: "leonardo",
+                                partner_ids: [[4, 2]],
+                            },
+                        ],
+                        [
+                            1,
+                            2,
+                            {
+                                turtle_foo: "donatello",
+                                partner_ids: [
+                                    [4, 2],
+                                    [4, 4],
+                                ],
+                            },
+                        ],
+                    ];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="bottom">
+                                <field name="turtle_foo"/>
+                                <field name="partner_ids" widget="many2many_tags"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method || route);
+                    if (args.method === "read") {
+                        assert.deepEqual(
+                            args.args[0],
+                            [2, 4],
+                            "should read the partner_ids once, batched"
+                        );
+                    }
+                },
+            });
+
+            assert.containsN(target, ".o_data_row", 2);
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll('.o_field_widget[name="partner_ids"]')),
+                ["second record", "second recordaaa"]
+            );
+
+            assert.verifySteps(["get_views", "onchange", "read"]);
+        }
+    );
+
+    QUnit.test("two one2many fields with same relation and onchanges", async function (assert) {
+        // this test simulates the presence of two one2many fields with onchanges, such that
+        // changes to the first o2m are repercuted on the second one
+        serverData.models.partner.fields.turtles2 = {
+            string: "Turtles 2",
+            type: "one2many",
+            relation: "turtle",
+            relation_field: "turtle_trululu",
+        };
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                // when we add a line to turtles, add same line to turtles2
+                if (obj.turtles.length) {
+                    obj.turtles = [[5]].concat(obj.turtles);
+                    obj.turtles2 = obj.turtles;
+                }
+            },
+            turtles2: function (obj) {
+                // simulate an onchange on turtles2 as well
+                if (obj.turtles2.length) {
+                    obj.turtles2 = [[5]].concat(obj.turtles2);
+                }
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom"><field name="name" required="1"/></tree>
+                    </field>
+                    <field name="turtles2">
+                        <tree editable="bottom"><field name="name" required="1"/></tree>
+                    </field>
+                </form>`,
+        });
+
+        // trigger first onchange by adding a line in turtles field (should add a line in turtles2)
+        await addRow(target, '.o_field_widget[name="turtles"]');
+        await editInput(
+            target,
+            '.o_field_widget[name="turtles"] .o_field_widget[name="name"] input',
+            "ABC"
+        );
+
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="turtles"] .o_data_row',
+            "line of first o2m should have been created"
+        );
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="turtles2"] .o_data_row',
+            "line of second o2m should have been created"
+        );
+
+        // add a line in turtles2
+        await addRow(target, '.o_field_widget[name="turtles2"]');
+        await editInput(
+            target,
+            '.o_field_widget[name="turtles2"] .o_field_widget[name="name"] input',
+            "DEF"
+        );
+
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="turtles"] .o_data_row',
+            "we should still have 1 line in turtles"
+        );
+        assert.containsN(
+            target,
+            '.o_field_widget[name="turtles2"] .o_data_row',
+            2,
+            "we should have 2 lines in turtles2"
+        );
+        assert.hasClass(
+            target.querySelectorAll('.o_field_widget[name="turtles2"] .o_data_row')[1],
+            "o_selected_row",
+            "second row should be in edition"
+        );
+
+        await clickSave(target);
+
+        assert.deepEqual(
+            getNodesTextContent(
+                target.querySelectorAll('.o_field_widget[name="turtles2"] .o_data_row')
+            ),
+            ["ABC", "DEF"]
+        );
+    });
+
+    QUnit.test("column widths are kept when adding first record in o2m", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="date"/>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        var width = target.querySelector('th[data-name="date"]').offsetWidth;
+
+        await addRow(target);
+
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+    });
+
+    QUnit.test("column widths are kept when editing a record in o2m", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="date"/>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mode: "edit",
+        });
+
+        const width = target.querySelector('th[data-name="date"]').offsetWidth;
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+
+        const longVal =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, " +
+            "justo nec tincidunt feugiat, mi justo suscipit libero, sit amet tempus ipsum " +
+            "purus bibendum est.";
+        await editInput(target, ".o_field_widget[name=foo] input", longVal);
+
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+    });
+
+    QUnit.test("column widths are kept when remove last record in o2m", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="date"/>
+                            <field name="foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mode: "edit",
+        });
+
+        const width = target.querySelector('th[data-name="date"]').offsetWidth;
+
+        await click(target, ".o_data_row .o_list_record_remove");
+
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+    });
+
+    QUnit.test("column widths are correct after toggling optional fields", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="date" required="1"/>
+                            <field name="foo"/>
+                            <field name="int_field" optional="1"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        // date fields have an hardcoded width, which apply when there is no
+        // record, and should be kept afterwards
+        const width = target.querySelector('th[data-name="date"]').offsetWidth;
+
+        // create a record to store the current widths, but discard it directly to keep
+        // the list empty (otherwise, the browser automatically computes the optimal widths)
+        await addRow(target);
+
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+
+        await click(target, ".o_optional_columns_dropdown_toggle");
+        await click(target, ".o_optional_columns_dropdown .dropdown-item input");
+
+        assert.strictEqual(target.querySelector('th[data-name="date"]').offsetWidth, width);
+    });
+
+    QUnit.test("editable one2many list with oe_read_only button", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="turtle_foo"/>
+                            <button name="do_it" type="object" class="oe_read_only"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        // should have two visible columns in readonly: foo + readonly button
+        assert.containsOnce(target, ".o_form_view .o_form_readonly");
+        assert.containsN(target, ".o_field_x2many_list thead th", 2);
+        assert.containsN(target, ".o_field_x2many_list tbody .o_data_row td", 2);
+        assert.containsN(target, ".o_field_x2many_list tfoot td", 2);
+        assert.containsNone(target, ".o_list_record_remove_header");
+
+        await clickEdit(target);
+
+        // should have two visible columns in edit: foo + trash
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
+        assert.containsN(target, ".o_field_x2many_list thead th", 2);
+        assert.containsN(target, ".o_field_x2many_list tbody .o_data_row td", 2);
+        assert.containsN(target, ".o_field_x2many_list tfoot td", 2);
+        assert.containsOnce(target, ".o_list_record_remove_header");
+    });
+
+    QUnit.test(
+        "one2many reset by onchange (of another field) while being edited",
+        async function (assert) {
+            // In this test, we have a many2one and a one2many. The many2one has an onchange that
+            // updates the value of the one2many. We set a new value to the many2one (name_create)
+            // such that the onchange is delayed. During the name_create, we click to add a new row
+            // to the one2many. After a while, we unlock the name_create, which triggers the onchange
+            // and resets the one2many. At the end, we want the row to be in edition.
+
+            // patch setTimeout s.t. the autocomplete drodown opens directly
+            patchWithCleanup(browser, {
+                setTimeout: (fn) => fn(),
+            });
+
+            const def = makeDeferred();
+            serverData.models.partner.onchanges = {
+                trululu: (obj) => {
+                    obj.p = [[5]].concat(obj.p);
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="trululu"/>
+                        <field name="p">
+                            <tree editable="top"><field name="product_id" required="1"/></tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "name_create") {
+                        await def;
+                    }
+                },
+            });
+
+            // set a new value for trululu (will delay the onchange)
+            await editInput(target, ".o_field_widget[name=trululu] input", "new value");
+            await clickOpenedDropdownItem(target, "trululu", `Create "new value"`);
+
+            // add a row in p
+            await addRow(target);
+            assert.containsNone(target, ".o_data_row");
+
+            // resolve the name_create to trigger the onchange, and the reset of p
+            def.resolve();
+            await nextTick();
+            assert.containsOnce(target, ".o_data_row");
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        }
+    );
+
+    QUnit.skip(
+        "one2many with many2many_tags in list and list in form with a limit",
+        async function (assert) {
+            // This test is skipped for now, as it doesn't work, and it can't be fixed in the current
+            // architecture (without large changes). However, this is unlikely to happen as the default
+            // limit is 80, and it would be useless to display so many records with a many2many_tags
+            // widget. So it would be nice if we could make it work in the future, but it's no big
+            // deal for now.
+            serverData.models.partner.records[0].p = [1];
+            serverData.models.partner.records[0].turtles = [1, 2, 3];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="bar"/>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles" widget="many2many_tags"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree limit="2">
+                                        <field name="display_name"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(target, ".o_field_widget[name=p] .o_data_row");
+            assert.containsN(target, ".o_data_row .o_field_many2manytags .badge", 3);
+
+            await click(target.querySelector(".o_data_row"));
+
+            assert.containsOnce(document.body, ".modal .o_form_view");
+            assert.containsN(document.body, ".modal .o_field_widget[name=turtles] .o_data_row", 2);
+            assert.isVisible(target.querySelector(".modal .o_field_x2many_list .o_pager"));
+            assert.strictEqual(
+                target.querySelector(".modal .o_field_x2many_list .o_pager").textContent.trim(),
+                "1-2 / 3"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with many2many_tags in list and list in form, and onchange",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                bar: function (obj) {
+                    obj.p = [
+                        [5],
+                        [
+                            0,
+                            0,
+                            {
+                                turtles: [
+                                    [5],
+                                    [
+                                        0,
+                                        0,
+                                        {
+                                            display_name: "new turtle",
+                                        },
+                                    ],
+                                ],
+                            },
+                        ],
+                    ];
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="bar"/>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles" widget="many2many_tags"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree editable="bottom">
+                                        <field name="display_name"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsOnce(target, ".o_field_widget[name=p] .o_data_row");
+            assert.containsOnce(target, ".o_data_row .o_field_many2many_tags .badge");
+
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+
+            assert.containsOnce(target, ".modal .o_form_view");
+            assert.containsOnce(target, ".modal .o_field_widget[name=turtles] .o_data_row");
+            assert.deepEqual(getNodesTextContent(target.querySelectorAll(".modal .o_data_cell")), [
+                "new turtle",
+            ]);
+
+            await addRow(target.querySelector(".modal"));
+            assert.containsN(target, ".modal .o_field_widget[name=turtles] .o_data_row", 2);
+            assert.deepEqual(getNodesTextContent(target.querySelectorAll(".modal .o_data_cell")), [
+                "new turtle",
+                "",
+            ]);
+            assert.hasClass(
+                target.querySelectorAll(".modal .o_field_widget[name=turtles] .o_data_row")[1],
+                "o_selected_row"
+            );
+        }
+    );
+
+    QUnit.test(
+        "one2many with many2many_tags in list and list in form, and onchange (2)",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                bar: function (obj) {
+                    obj.p = [
+                        [5],
+                        [
+                            0,
+                            0,
+                            {
+                                turtles: [
+                                    [5],
+                                    [
+                                        0,
+                                        0,
+                                        {
+                                            display_name: "new turtle",
+                                        },
+                                    ],
+                                ],
+                            },
+                        ],
+                    ];
+                },
+            };
+            serverData.models.turtle.onchanges = {
+                turtle_foo: function (obj) {
+                    obj.display_name = obj.turtle_foo;
+                },
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="bar"/>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles" widget="many2many_tags"/>
+                            </tree>
+                            <form>
+                                <field name="turtles">
+                                    <tree editable="bottom">
+                                        <field name="turtle_foo" required="1"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsOnce(target, ".o_field_widget[name=p] .o_data_row");
+
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+
+            assert.containsOnce(target, ".modal .o_form_view");
+
+            await addRow(target.querySelector(".modal"));
+            assert.containsN(target, ".modal .o_field_widget[name=turtles] .o_data_row", 2);
+
+            await editInput(target, ".modal .o_selected_row input", "another one");
+            await click(target.querySelector(".modal .modal-footer .btn-primary"));
+
+            assert.containsNone(target, ".modal");
+
+            assert.containsOnce(target, ".o_field_widget[name=p] .o_data_row");
+            assert.containsN(target, ".o_data_row .o_field_many2many_tags .badge", 2);
+            assert.deepEqual(
+                getNodesTextContent(
+                    target.querySelectorAll(".o_data_row .o_field_many2many_tags .o_tag_badge_text")
+                ),
+                ["new turtle", "another one"]
+            );
+        }
+    );
+
+    QUnit.test("one2many value returned by onchange with unknown fields", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.onchanges = {
+            bar: function (obj) {
+                obj.p = [
+                    [5],
+                    [
+                        0,
+                        0,
+                        {
+                            bar: true,
+                            display_name: "coucou",
+                            trululu: [2, "second record"],
+                            turtles: [[5], [0, 0, { turtle_int: 4 }]],
+                        },
+                    ],
+                ];
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="p" widget="many2many_tags"/>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.deepEqual(args.args[0].p[0][2], {
+                        bar: true,
+                        display_name: "coucou",
+                        trululu: 2,
+                        turtles: [[5], [0, 0, { turtle_int: 4 }]],
+                    });
+                }
+            },
+        });
+
+        assert.containsOnce(target.querySelector(".o_field_many2many_tags"), ".badge");
+        assert.strictEqual(
+            target.querySelector(".o_field_many2many_tags .o_tag_badge_text").innerText,
+            "coucou"
+        );
+
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "one2many: internal state is updated after another field changes",
+        async function (assert) {
+            // The FieldOne2Many is configured such that it is reset at any field change.
+            // The MatrixProductConfigurator feature relies on that, and requires that its
+            // internal state is correctly updated. This white-box test artificially checks that.
+            let o2m;
+            // keep using the legacy version considering the above comment
+            const MyFieldOne2Many = FieldOne2Many.extend({
+                init() {
+                    this._super(...arguments);
+                    o2m = this;
+                },
+            });
+            fieldRegistry.add("myone2many", MyFieldOne2Many);
+            registerCleanup(() => {
+                delete fieldRegistry.map.myone2many;
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="p" widget="myone2many">
+                            <tree><field name="display_name"/></tree>
+                        </field>
+                    </form>`,
+            });
+
+            assert.strictEqual(o2m.recordData.display_name, false);
+
+            await editInput(target, ".o_field_widget[name=display_name] input", "val");
+
+            assert.strictEqual(o2m.recordData.display_name, "val");
+        }
+    );
+
+    QUnit.test("nested one2many, onchange, no command value", async function (assert) {
+        // This test ensures that we always send all values to onchange rpcs for nested
+        // one2manys, even if some field hasn't changed. In this particular test case,
+        // a first onchange returns a value for the inner one2many, and a second onchange
+        // removes it, thus restoring the field to its initial empty value. From this point,
+        // the nested one2many value must still be sent to onchange rpcs (on the main record),
+        // as it might be used to compute other fields (so the fact that the nested o2m is empty
+        // must be explicit).
+        assert.expect(1);
+
+        serverData.models.turtle.fields.o2m = {
+            string: "o2m",
+            type: "one2many",
+            relation: "partner",
+            relation_field: "trululu",
+        };
+        serverData.models.turtle.fields.turtle_bar.default = true;
+        serverData.models.partner.onchanges.turtles = function (obj) {};
+        serverData.models.turtle.onchanges.turtle_bar = function (obj) {};
+
+        let step = 1;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom">
+                            <field name="o2m"/>
+                            <field name="turtle_bar"/>
+                        </tree>
+                    </field>
+                </form>`,
+            async mockRPC(route, args) {
+                if (step === 3 && args.method === "onchange" && args.model === "partner") {
+                    assert.deepEqual(args.args[1].turtles[0][2], {
+                        turtle_bar: false,
+                        o2m: [], // we must send a value for this field
+                    });
+                }
+                if (args.model === "turtle") {
+                    if (step === 2) {
+                        return {
+                            value: {
+                                o2m: [[5], [0, false, { display_name: "default" }]],
+                                turtle_bar: true,
+                            },
+                        };
+                    }
+                    if (step === 3) {
+                        return {
+                            value: { o2m: [[5]] },
+                        };
+                    }
+                }
+            },
+        });
+
+        step = 2;
+        await addRow(target);
+        step = 3;
+        await click(target.querySelector(".o_data_row .o_field_boolean input"));
+    });
+
+    QUnit.test("update a one2many from a custom field widget", async function (assert) {
+        // In this test, we define a custom field widget to render/update a one2many
+        // field. For the update part, we ensure that updating primitive fields of a sub
+        // record works. There is no guarantee that updating a relational field on the sub
+        // record would work. Deleting a sub record works as well. However, creating sub
+        // records isn't supported. There are obviously a lot of limitations, but the code
+        // hasn't been designed to support all this. This test simply encodes what can be
+        // done, and this comment explains what can't (and won't be implemented in stable
+        // versions).
+        serverData.models.partner.records[0].p = [1, 2];
+        const MyRelationalField = AbstractField.extend({
+            events: {
+                "click .update": "_onUpdate",
+                "click .delete": "_onDelete",
+            },
+            async _render() {
+                const records = await this._rpc({
+                    method: "read",
+                    model: "partner",
+                    args: [this.value.res_ids],
+                });
+                this.$el.text(records.map((r) => `${r.display_name}/${r.int_field}`).join(", "));
+                this.$el.append($('<button class="update fa fa-edit">'));
+                this.$el.append($('<button class="delete fa fa-trash">'));
+            },
+            _onUpdate() {
+                this._setValue({
+                    operation: "UPDATE",
+                    id: this.value.data[0].id,
+                    data: {
+                        display_name: "new name",
+                        int_field: 44,
+                    },
+                });
+            },
+            _onDelete() {
+                this._setValue({
+                    operation: "DELETE",
+                    ids: [this.value.data[0].id],
+                });
+            },
+        });
+        fieldRegistry.add("my_relational_field", MyRelationalField);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" widget="my_relational_field"/>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=p]").innerText,
+            "first record/10, second record/9"
+        );
+
+        await click(target.querySelector("button.update"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=p]").innerText,
+            "new name/44, second record/9"
+        );
+
+        await click(target.querySelector("button.delete"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=p]").innerText,
+            "second record/9"
+        );
+
+        delete fieldRegistry.map.my_relational_field;
+    });
+
+    QUnit.test("edition in list containing widget with decoration", async function (assert) {
+        // We use here a badge widget and check its decoration is properly managed
+        // in this scenario (we need a widget with specific decoration handling)
+        serverData.models.partner.records[0].p = [1, 2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="int_field"/>
+                            <field name="color" widget="badge" decoration-warning="int_field == 9"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        assert.containsN(target, ".o_data_row", 2);
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
+            "bg-warning-light"
+        );
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_selected_row .o_field_integer input", "44");
+
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[1].querySelector(".o_field_badge .badge"),
+            "bg-warning-light"
+        );
+    });
+
+    QUnit.test(
+        "reordering embedded one2many with handle widget starting with same sequence",
+        async function (assert) {
+            serverData.models.turtle = {
+                fields: { turtle_int: { string: "int", type: "integer", sortable: true } },
+                records: [
+                    { id: 1, turtle_int: 1 },
+                    { id: 2, turtle_int: 1 },
+                    { id: 3, turtle_int: 1 },
+                    { id: 4, turtle_int: 2 },
+                    { id: 5, turtle_int: 3 },
+                    { id: 6, turtle_int: 4 },
+                ],
+            };
+            serverData.models.partner.records[0].turtles = [1, 2, 3, 4, 5, 6];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree default_order="turtle_int">
+                                <field name="turtle_int" widget="handle"/>
+                                <field name="id"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_cell:not(.o_handle_cell)")].map(
+                    (el) => el.innerText
+                ),
+                ["1", "2", "3", "4", "5", "6"]
+            );
+
+            // Drag and drop the fourth line in first position
+            await dragAndDrop("tbody tr:nth-child(4) .o_handle_cell", "tbody tr", "top");
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_cell:not(.o_handle_cell)")].map(
+                    (el) => el.innerText
+                ),
+                ["4", "1", "2", "3", "5", "6"]
+            );
+
+            await clickSave(target);
+
+            assert.deepEqual(
+                Object.values(serverData.models.turtle.records).map((r) => {
+                    return { id: r.id, turtle_int: r.turtle_int };
+                }),
+                [
+                    { id: 1, turtle_int: 2 },
+                    { id: 2, turtle_int: 3 },
+                    { id: 3, turtle_int: 4 },
+                    { id: 4, turtle_int: 1 },
+                    { id: 5, turtle_int: 5 },
+                    { id: 6, turtle_int: 6 },
+                ]
+            );
+        }
+    );
+
+    QUnit.test("combine contexts on o2m field and create tags", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles" context="{'default_turtle_foo': 'hard', 'default_turtle_bar': True}">
+                            <tree editable="bottom">
+                                <control>
+                                    <create name="add_soft_shell_turtle" string="Add soft shell turtle" context="{'default_turtle_foo': 'soft', 'default_turtle_int': 2}"/>
+                                </control>
+                                <field name="turtle_foo"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    if (args.model === "turtle") {
+                        assert.deepEqual(
+                            args.kwargs.context,
+                            {
+                                default_turtle_foo: "soft",
+                                default_turtle_bar: true,
+                                default_turtle_int: 2,
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            "combined context should have the default_turtle_foo value from the <create>"
+                        );
+                    }
+                }
+            },
+        });
+
+        await addRow(target);
+    });
+
+    QUnit.test("do not call name_get if display_name already known", async function (assert) {
+        serverData.models.partner.fields.product_id.default = 37;
+        serverData.models.partner.onchanges = {
+            trululu: function (obj) {
+                obj.trululu = 1;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu"/>
+                    <field name="product_id"/>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method + " on " + args.model);
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=trululu] input").value,
+            "first record"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            "xphone"
+        );
+        assert.verifySteps(["get_views on partner", "onchange on partner"]);
+    });
+
+    QUnit.test("x2many default_order multiple fields", async function (assert) {
+        serverData.models.partner.records = [
+            { int_field: 10, id: 1, display_name: "record1" },
+            { int_field: 12, id: 2, display_name: "record2" },
+            { int_field: 11, id: 3, display_name: "record3" },
+            { int_field: 12, id: 4, display_name: "record4" },
+            { int_field: 10, id: 5, display_name: "record5" },
+            { int_field: 10, id: 6, display_name: "record6" },
+            { int_field: 11, id: 7, display_name: "record7" },
+        ];
+
+        serverData.models.partner.records[0].p = [1, 7, 4, 5, 2, 6, 3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" >
+                        <tree default_order="int_field,id">
+                            <field name="id"/>
+                            <field name="int_field"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        const recordIdList = [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+            (record) => record.querySelector(".o_data_cell").textContent
+        );
+        const expectedOrderId = ["1", "5", "6", "3", "7", "2", "4"];
+        assert.deepEqual(recordIdList, expectedOrderId);
+    });
+
+    QUnit.test("x2many default_order multiple fields with limit", async function (assert) {
+        serverData.models.partner.records = [
+            { int_field: 10, id: 1, display_name: "record1" },
+            { int_field: 12, id: 2, display_name: "record2" },
+            { int_field: 11, id: 3, display_name: "record3" },
+            { int_field: 12, id: 4, display_name: "record4" },
+            { int_field: 10, id: 5, display_name: "record5" },
+            { int_field: 10, id: 6, display_name: "record6" },
+            { int_field: 11, id: 7, display_name: "record7" },
+        ];
+
+        serverData.models.partner.records[0].p = [1, 7, 4, 5, 2, 6, 3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" >
+                        <tree default_order="int_field,id" limit="4">
+                            <field name="id"/>
+                            <field name="int_field"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+        const recordIdList = [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+            (record) => record.querySelector(".o_data_cell").textContent
+        );
+        const expectedOrderId = ["1", "5", "6", "3"];
+        assert.deepEqual(recordIdList, expectedOrderId);
+    });
+
+    QUnit.test("one2many from a model that has been sorted", async function (assert) {
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "test",
+                res_id: 1,
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+            },
+        };
+        serverData.views = {
+            "partner,false,list": `<tree><field name="int_field"/></tree>`,
+            "partner,false,search": `<search/>`,
+            "partner,false,form": `
+                <form>
+                    <field name="turtles">
+                        <tree><field name="turtle_foo"/></tree>
+                    </field>
+                </form>`,
+        };
+        serverData.models.partner.records[0].turtles = [3, 2];
+
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+        assert.containsOnce(target, ".o_list_view");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "10",
+            "9",
+            "0",
+        ]);
+
+        await click(target.querySelector("th.o_column_sortable"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "0",
+            "9",
+            "10",
+        ]);
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_form_view");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["kawa", "blip"],
+            "The o2m should not have been sorted."
+        );
+    });
+
+    QUnit.test(
+        "prevent the dialog in readonly x2many tree view with option no_open True",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="turtles">
+                                <tree editable="bottom" no_open="True">
+                                    <field name="turtle_foo"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+            assert.containsOnce(
+                target,
+                '.o_data_row:contains("blip")',
+                "There should be one record in x2many list view"
+            );
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            assert.containsNone(
+                target,
+                ".modal",
+                "There is should be no dialog open on click of readonly list row"
+            );
+        }
+    );
+
+    QUnit.test("delete a record while adding another one in a multipage", async function (assert) {
+        // in a one2many with at least 2 pages, add a new line. Delete the line above it.
+        // (the onchange makes it so that the virtualID is inserted in the middle of the currentResIDs.)
+        // it should load the next line to display it on the page.
+        serverData.models.partner.records[0].turtles = [2, 3];
+        serverData.models.partner.onchanges.turtles = function (obj) {
+            obj.turtles = [[5]].concat(obj.turtles);
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="turtles">
+                                    <tree editable="bottom" limit="1" decoration-muted="turtle_bar == False">
+                                        <field name="turtle_foo"/>
+                                        <field name="turtle_bar"/>
+                                    </tree>
+                                </field>
+                            </group>
+                        </sheet>
+                    </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        // add a line (virtual record)
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=turtle_foo] input", "pi");
+        // delete the line above it
+        await click(target.querySelector(".o_list_record_remove"));
+        // the next line should be displayed below the newly added one
+        assert.containsN(target, ".o_data_row", 2, "should have 2 records");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["pi", "", "kawa", ""],
+            "should display the correct records on page 1"
+        );
+    });
+
+    QUnit.test("one2many, onchange, edition and multipage...", async function (assert) {
+        serverData.models.partner.onchanges = {
+            turtles: function (obj) {
+                obj.turtles = [[5]].concat(obj.turtles);
+            },
+        };
+
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree editable="bottom" limit="2">
+                            <field name="turtle_foo"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method + " " + args.model);
+            },
+        });
+        await clickEdit(target);
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=turtle_foo] input", "nora");
+        await addRow(target);
+
+        assert.verifySteps([
+            "get_views partner",
+            "read partner",
+            "read turtle",
+            "onchange turtle",
+            "onchange partner",
+            "onchange partner",
+            "onchange turtle",
+            "onchange partner",
+        ]);
+    });
+
+    QUnit.test("onchange on unloaded record clearing posterious change", async function (assert) {
+        // when we got onchange result for fields of record that were not
+        // already available because they were in a inline view not already
+        // opened, in a given configuration the change were applied ignoring
+        // posteriously changed data, thus an added/removed/modified line could
+        // be reset to the original onchange data
+        let numUserOnchange = 0;
+
+        serverData.models.user.onchanges = {
+            partner_ids: function (obj) {
+                // simulate actual server onchange after save of modal with new record
+                if (numUserOnchange === 0) {
+                    obj.partner_ids = _.clone(obj.partner_ids);
+                    obj.partner_ids.unshift([5]);
+                    obj.partner_ids[1][2].turtles.unshift([5]);
+                    obj.partner_ids[2] = [
+                        1,
+                        2,
+                        {
+                            display_name: "second record",
+                            trululu: 1,
+                            turtles: [[5]],
+                        },
+                    ];
+                } else if (numUserOnchange === 1) {
+                    obj.partner_ids = _.clone(obj.partner_ids);
+                    obj.partner_ids.unshift([5]);
+                    obj.partner_ids[1][2].turtles.unshift([5]);
+                    obj.partner_ids[2][2].turtles.unshift([5]);
+                }
+                numUserOnchange++;
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "user",
+            serverData,
+            arch: `
+                <form>
+                    <field name="partner_ids">
+                        <form>
+                            <field name="trululu"/>
+                            <field name="turtles">
+                                <tree editable="bottom">
+                                    <field name="display_name"/>
+                                </tree>
+                            </field>
+                        </form>
+                        <tree>
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 17,
+        });
+
+        // open first partner and change turtle name
+        await clickEdit(target);
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await click(target.querySelector(".modal .o_data_row .o_data_cell"));
+        await editInput(target, ".modal .o_field_widget[name=display_name] input", "Donatello");
+        await click(target.querySelector(".modal .btn-primary"));
+
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        await addRow(target.querySelector(".modal"));
+        await editInput(target, ".modal .o_field_widget[name=display_name] input", "Michelangelo");
+        await click(target.querySelector(".modal .btn-primary"));
+
+        assert.strictEqual(
+            numUserOnchange,
+            2,
+            "there should 2 and only 2 onchange from closing the partner modal"
+        );
+
+        // check first record still has change
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsOnce(target, ".modal .o_data_row", "only 1 turtle for first partner");
+        assert.strictEqual(
+            target.querySelector(".modal .o_data_cell").innerText,
+            "Donatello",
+            "first partner turtle is Donatello"
+        );
+        await clickDiscard(target.querySelector(".modal"));
+
+        // check second record still has changes
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".modal .o_data_row", "only 1 turtle for second partner");
+        assert.strictEqual(
+            target.querySelector(".modal .o_data_cell").innerText,
+            "Michelangelo",
+            "second partner turtle is Michelangelo"
+        );
+        await clickDiscard(target.querySelector(".modal"));
+    });
+
+    QUnit.test("quickly switch between pages in one2many list", async function (assert) {
+        serverData.models.partner.records[0].turtles = [1, 2, 3];
+
+        const readDefs = [Promise.resolve(), makeDeferred(), Promise.resolve()];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="turtles">
+                        <tree limit="1">
+                            <field name="display_name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            async mockRPC(route, args) {
+                if (args.method === "read") {
+                    const recordID = args.args[0][0];
+                    await Promise.resolve(readDefs[recordID - 1]);
+                }
+            },
+            resId: 1,
+        });
+
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "leonardo");
+
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+        assert.ok(target.querySelector(".o_field_widget[name=turtles] .o_pager_next").disabled);
+
+        readDefs[1].resolve();
+        await nextTick();
+        assert.strictEqual(target.querySelector(".o_data_cell").innerText, "donatello");
+
+        await click(target.querySelector(".o_field_widget[name=turtles] .o_pager_next"));
+        assert.strictEqual(target.querySelector(" .o_data_cell").innerText, "raphael");
+    });
+
+    QUnit.test(
+        "one2many column visiblity depends on onchange of parent field",
+        async function (assert) {
+            serverData.models.partner.records[0].p = [2];
+            serverData.models.partner.records[0].bar = false;
+
+            serverData.models.partner.onchanges.p = function (obj) {
+                // set bar to true when line is added
+                if (obj.p.length > 1 && obj.p[1][2].foo === "New line") {
+                    obj.bar = true;
+                }
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="bar"/>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="foo"/>
+                                <field name="int_field" attrs="{'column_invisible': [('parent.bar', '=', False)]}"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            // bar is false so there should be 1 column
+            assert.containsOnce(target, ".o_list_renderer th:not(.o_list_record_remove_header)");
+            assert.containsOnce(target, ".o_list_renderer .o_data_row");
+
+            await clickEdit(target);
+
+            // add a new o2m record
+            await addRow(target);
+            target.querySelector(".o_field_one2many input").focus(); // useless?
+            await editInput(target, ".o_field_one2many input", "New line");
+            await click(target, ".o_form_view");
+
+            assert.containsN(target, ".o_list_renderer th:not(.o_list_record_remove_header)", 2);
+        }
+    );
+
+    QUnit.test("one2many column_invisible on view not inline", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="foo" attrs="{'column_invisible': [('parent.product_id', '!=', False)]}"/>
+                    <field name="bar" attrs="{'column_invisible': [('parent.bar', '=', False)]}"/>
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="product_id"/>
+                        </group>
+                        <notebook>
+                            <page string="Partner page">
+                                <field name="bar"/>
+                                <field name="p" widget="one2many"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            2,
+            "should be 2 columns in the one2many"
+        );
+        await clickEdit(target);
+        await selectDropdownItem(target, "product_id", "xphone");
+        assert.containsOnce(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            "should be 1 column when the product_id is set"
+        );
+        await editInput(target, ".o_field_many2one[name=product_id] input", "");
+        assert.containsN(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            2,
+            "should be 2 columns in the one2many when product_id is not set"
+        );
+        await click(target.querySelector(".o_field_boolean[name=bar] input"));
+        assert.containsOnce(
+            target,
+            "th:not(.o_list_record_remove_header)",
+            "should be 1 column after the value change"
+        );
+    });
+
+    QUnit.test(
+        "one2many field in edit mode with optional fields and trash icon",
+        async function (assert) {
+            serverData.models.partner.records[0].p = [2];
+            serverData.views = {
+                "partner,false,list": `
+                    <tree editable="top">
+                        <field name="foo" optional="show"/>
+                        <field name="bar" optional="hide"/>
+                    </tree>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="p"/></form>`,
+                resId: 1,
+            });
+
+            // should have 1 column
+            assert.containsOnce(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                "should be 1 th in the one2many in readonly mode"
+            );
+            assert.containsOnce(
+                target.querySelector(".o_field_one2many table"),
+                ".o_optional_columns_dropdown .dropdown-toggle",
+                "should have the optional columns dropdown toggle inside the table"
+            );
+
+            await clickEdit(target);
+            // should have 2 columns 1 for foo and 1 for trash icon, dropdown is displayed
+            // on trash icon cell, no separate cell created for trash icon and advanced field dropdown
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                2,
+                "should be 2 th in the one2many edit mode"
+            );
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                ".o_data_row:first > td",
+                2,
+                "should be 2 cells in the one2many in edit mode"
+            );
+
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-toggle"));
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                ".o_optional_columns_dropdown .dropdown-item",
+                2,
+                "dropdown have 2 advanced field foo with checked and bar with unchecked"
+            );
+            await click(target.querySelectorAll(".o_optional_columns_dropdown .dropdown-item")[1]);
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                3,
+                "should be 3 th in the one2many after enabling bar column from advanced dropdown"
+            );
+
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-item"));
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                2,
+                "should be 2 th in the one2many after disabling foo column from advanced dropdown"
+            );
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                ".o_optional_columns_dropdown .dropdown-item",
+                2,
+                "dropdown is still open"
+            );
+
+            await addRow(target);
+            assert.containsNone(
+                target.querySelector(".o_field_one2many"),
+                ".o_optional_columns_dropdown .dropdown-menu",
+                "dropdown is closed"
+            );
+            assert.containsOnce(
+                target.querySelector(".o_field_one2many"),
+                "tr.o_selected_row",
+                "should have selected row i.e. edition mode"
+            );
+
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-toggle"));
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-item"));
+            assert.containsNone(
+                target.querySelector(".o_field_one2many"),
+                "tr.o_selected_row",
+                "current edition mode discarded when selecting advanced field"
+            );
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                3,
+                "should be 3 th in the one2many after re-enabling foo column from advanced dropdown"
+            );
+
+            // optional columns must be preserved after save
+            await clickSave(target);
+            assert.containsN(
+                target.querySelector(".o_field_one2many"),
+                "th",
+                2,
+                "should still have 2 th in the one2many after reloading whole form view"
+            );
+        }
+    );
+
+    QUnit.test("x2many list sorted by many2one", async function (assert) {
+        serverData.models.partner.records[0].p = [1, 2, 4];
+        serverData.models.partner.fields.trululu.sortable = true;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="id"/>
+                            <field name="trululu"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_row .o_list_number")),
+            ["1", "2", "4"],
+            "should have correct order initially"
+        );
+
+        await click(target.querySelectorAll(".o_list_renderer thead th")[1]);
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_row .o_list_number")),
+            ["4", "1", "2"],
+            "should have correct order (ASC)"
+        );
+
+        await click(target.querySelectorAll(".o_list_renderer thead th")[1]);
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_row .o_list_number")),
+            ["2", "1", "4"],
+            "should have correct order (DESC)"
+        );
+    });
+
+    QUnit.test(
+        "one2many with extra field from server not in (inline) form",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="datetime"/>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="display_name"/>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            await clickEdit(target);
+
+            // Add a record in the list
+            await addRow(target);
+            await editInput(target, ".o_field_widget[name=display_name] input", "michelangelo");
+
+            // Save the record in the modal (though it is still virtual)
+            await click(target.querySelector(".modal .modal-footer .btn-primary"));
+            assert.containsOnce(target, ".o_data_row");
+        }
+    );
+
+    QUnit.test(
+        "one2many with extra X2many field from server not in inline form",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="turtles"/>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="display_name"/>
+                            </form>
+                        </field>
+                    </form>`,
+            });
+
+            await clickEdit(target);
+
+            // Add a first record in the list
+            await addRow(target);
+            await editInput(target, ".modal .o_field_widget[name=display_name] input", "first");
+
+            // Save & New
+            await click(target.querySelectorAll(".modal .btn-primary")[1]);
+            await editInput(target, ".modal .o_field_widget[name=display_name] input", "second");
+
+            // Save & Close
+            await click(target.querySelector(".modal .btn-primary"));
+
+            assert.containsN(target, ".o_data_row", 2);
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_cell.o_list_char")),
+                ["first", "second"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "when Navigating to a one2many with tabs, it receives the focus and adds a new line",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="qux"/>
+                            </group>
+                            <notebook>
+                                <page string="Partner page">
+                                    <field name="turtles">
+                                        <tree editable="bottom">
+                                            <field name="turtle_foo"/>
+                                        </tree>
+                                    </field>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            assert.strictEqual(target.querySelector("[name=qux] input"), document.activeElement);
+
+            getNextTabableElement(target).focus(); // go inside one2many
+            await nextTick();
+
+            assert.strictEqual(
+                target.querySelector("[name=turtle_foo] input"),
+                document.activeElement
+            );
+        }
+    );
+
+    QUnit.test(
+        "when Navigating to a one2many with tabs, not filling any field and hitting tab, we should not add a first line but navigate to the next control",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [];
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="qux"/>
+                            </group>
+                            <notebook>
+                                <page string="Partner page">
+                                    <field name="turtles">
+                                        <tree editable="bottom">
+                                            <field name="turtle_foo"/>
+                                            <field name="turtle_description"/>
+                                        </tree>
+                                    </field>
+                                </page>
+                            </notebook>
+                            <group>
+                                <field name="foo"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            assert.strictEqual(document.activeElement, target.querySelector("[name=qux] input"));
+
+            getNextTabableElement(target).focus(); // go inside one2many
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector("[name=turtle_foo] input")
+            );
+
+            triggerHotkey("Tab"); // go to turtle_description field
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector("[name=turtle_description] textarea")
+            );
+
+            const nextInput = target.querySelector("[name=foo] input");
+            // trigger Tab event and check that the default behavior can happen.
+            const event = triggerEvent(
+                document.activeElement,
+                null,
+                "keydown",
+                { key: "Tab" },
+                { fast: true }
+            );
+            assert.strictEqual(getNextTabableElement(target), nextInput);
+            assert.ok(!event.defaultPrevented);
+            nextInput.focus();
+            await nextTick();
+            assert.strictEqual(document.activeElement, nextInput);
+            // the default behavior happens but the list renderer makes the edited record
+            // pass in readonly mode.
+            assert.containsNone(target, "[name=turtles] .o_selected_row");
+        }
+    );
+
+    QUnit.test(
+        "when Navigating to a one2many with tabs, editing in a popup, the popup should receive the focus then give it back",
+        async function (assert) {
+            serverData.models.partner.records[0].turtles = [];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="qux"/>
+                            </group>
+                            <notebook>
+                                <page string="Partner page">
+                                    <field name="turtles">
+                                        <tree>
+                                            <field name="turtle_foo"/>
+                                            <field name="turtle_description"/>
+                                        </tree>
+                                        <form>
+                                            <group>
+                                                <field name="turtle_foo"/>
+                                                <field name="turtle_int"/>
+                                            </group>
+                                        </form>
+                                    </field>
+                                </page>
+                            </notebook>
+                            <group>
+                                <field name="foo"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            assert.strictEqual(target.querySelector("[name=qux] input"), document.activeElement);
+
+            getNextTabableElement(target).focus(); // go inside one2many
+            await nextTick();
+
+            assert.strictEqual(
+                target.querySelector(".modal [name=turtle_foo] input"),
+                document.activeElement
+            );
+
+            triggerHotkey("Escape");
+            await nextTick();
+
+            assert.containsNone(target, ".modal");
+            assert.strictEqual(
+                target.querySelector(".o_field_x2many_list_row_add a"),
+                document.activeElement
+            );
+        }
+    );
+
+    QUnit.test(
+        "when creating a new many2one on a x2many then discarding it immediately with ESCAPE, it should not crash",
+        async function (assert) {
+            patchSetTimeout();
+
+            serverData.models.partner.records[0].turtles = [];
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <field name="foo"/>
+                        <field name="bar"/>
+                    </form>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="turtles">
+                            <tree editable="top">
+                                <field name="turtle_foo"/>
+                                <field name="turtle_trululu"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await clickEdit(target);
+
+            // add a new line
+            await addRow(target);
+
+            assert.containsOnce(target, ".o_selected_row");
+
+            await clickOpenM2ODropdown(target, "turtle_trululu");
+            await editInput(target, ".o_field_widget[name=turtle_trululu] input", "ABC");
+            clickOpenedDropdownItem(target, "turtle_trululu", "Create and edit...");
+
+            triggerHotkey("Escape");
+            await nextTick();
+
+            assert.containsNone(document.body, ".modal");
+            assert.containsNone(target, ".o_selected_row");
+        }
+    );
+
+    QUnit.test(
+        "navigating through an editable list with custom controls [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <control>
+                                    <create string="Custom 1" context="{'default_foo': '1'}"/>
+                                    <create string="Custom 2" context="{'default_foo': '2'}"/>
+                                </control>
+                                <field name="foo"/>
+                            </tree>
+                        </field>
+                        <field name="int_field"/>
+                    </form>`,
+            });
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector("[name=display_name] input")
+            );
+
+            assert.containsNone(target, "[name=p] .o_selected_row");
+
+            // press tab to navigate to the list
+            const firstCreateActionLink = target.querySelector(".o_field_x2many_list_row_add a");
+            let event = triggerEvent(
+                document.activeElement,
+                null,
+                "keydown",
+                { key: "Tab" },
+                { fast: true }
+            );
+            assert.strictEqual(getNextTabableElement(target), firstCreateActionLink);
+            assert.ok(!event.defaultPrevented);
+            firstCreateActionLink.focus(); // goes inside one2many
+            await nextTick();
+
+            assert.containsOnce(target, "[name=p] .o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector("[name=p] .o_selected_row input")
+            );
+
+            // press ESC to cancel 1st control click (create)
+            triggerHotkey("Escape");
+            await nextTick();
+
+            assert.containsNone(target, "[name=p] .o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_field_x2many_list_row_add a")
+            );
+
+            // press right to focus the second control
+            triggerHotkey("ArrowRight");
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_field_x2many_list_row_add a:nth-child(2)")
+            );
+
+            // press left to come back to first control
+            triggerHotkey("ArrowLeft");
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_field_x2many_list_row_add a")
+            );
+
+            const secondCreateActionLink = target.querySelector(
+                ".o_field_x2many_list_row_add a:nth-child(2)"
+            );
+            event = triggerEvent(
+                document.activeElement,
+                null,
+                "keydown",
+                { key: "Tab" },
+                { fast: true }
+            );
+            assert.strictEqual(getNextTabableElement(target), secondCreateActionLink);
+            assert.ok(!event.defaultPrevented);
+            secondCreateActionLink.focus();
+            await nextTick();
+            assert.strictEqual(document.activeElement, secondCreateActionLink);
+
+            const nextInput = target.querySelector("[name=int_field] input");
+            event = triggerEvent(
+                secondCreateActionLink,
+                null,
+                "keydown",
+                { key: "Tab" },
+                { fast: true }
+            );
+            assert.strictEqual(getNextTabableElement(target), nextInput);
+            assert.ok(!event.defaultPrevented);
+            nextInput.focus();
+            await nextTick();
+            assert.strictEqual(document.activeElement, nextInput);
+        }
+    );
+
+    QUnit.test("Check onchange with two consecutive one2one", async function (assert) {
+        serverData.models.product.fields.product_partner_ids = {
+            string: "User",
+            type: "one2many",
+            relation: "partner",
+        };
+        serverData.models.product.records[0].product_partner_ids = [1];
+        serverData.models.product.records[1].product_partner_ids = [2];
+        serverData.models.turtle.fields.product_ids = {
+            string: "Product",
+            type: "one2many",
+            relation: "product",
+        };
+        serverData.models.turtle.fields.user_ids = {
+            string: "Product",
+            type: "one2many",
+            relation: "user",
+        };
+        serverData.models.turtle.onchanges = {
+            turtle_trululu: function (record) {
+                record.product_ids = [37];
+                record.user_ids = [17, 19];
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <form string="Turtles">
+                    <field string="Product" name="turtle_trululu"/>
+                    <field readonly="1" string="Related field" name="product_ids">
+                        <tree>
+                            <field widget="many2many_tags" name="product_partner_ids"/>
+                        </tree>
+                    </field>
+                    <field readonly="1" string="Second related field" name="user_ids">
+                        <tree>
+                            <field widget="many2many_tags" name="partner_ids"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+
+        await clickOpenM2ODropdown(target, "turtle_trululu");
+        await clickM2OHighlightedItem(target, "turtle_trululu");
+
+        const getElementTextContent = (name) =>
+            [
+                ...document.querySelectorAll(
+                    `.o_field_many2many_tags[name="${name}"] .badge.o_tag_color_0 > .o_tag_badge_text`
+                ),
+            ].map((x) => x.textContent);
+        assert.deepEqual(
+            getElementTextContent("product_partner_ids"),
+            ["first record"],
+            "should have the correct value in the many2many tag widget"
+        );
+        assert.deepEqual(
+            getElementTextContent("partner_ids"),
+            ["first record", "second record"],
+            "should have the correct values in the many2many tag widget"
+        );
+    });
+});
diff --git a/addons/web/static/tests/fields/parsers_tests.js b/addons/web/static/tests/views/fields/parsers_tests.js
similarity index 82%
rename from addons/web/static/tests/fields/parsers_tests.js
rename to addons/web/static/tests/views/fields/parsers_tests.js
index e1a77710a0e..530d1ec67d6 100644
--- a/addons/web/static/tests/fields/parsers_tests.js
+++ b/addons/web/static/tests/views/fields/parsers_tests.js
@@ -1,16 +1,16 @@
 /** @odoo-module **/
 
-import { defaultLocalization } from "../helpers/mock_services";
+import { localization } from "@web/core/l10n/localization";
 import {
     parseFloat,
     parseFloatTime,
     parseInteger,
     parsePercentage,
     parseMonetary,
-} from "@web/fields/parsers";
-import { localization } from "@web/core/l10n/localization";
-import { patchWithCleanup } from "../helpers/utils";
+} from "@web/views/fields/parsers";
 import { session } from "@web/session";
+import { defaultLocalization } from "@web/../tests/helpers/mock_services";
+import { patchWithCleanup } from "@web/../tests/helpers/utils";
 
 function expectInvalidNumberError(assert, func, value, options) {
     let message = `${func.name} fails on value: "${value}"`;
@@ -39,7 +39,6 @@ QUnit.module("Fields", (hooks) => {
 
         patchWithCleanup(localization, { decimalPoint: ",", thousandsSep: "." });
         assert.strictEqual(parseFloat("1.234,567"), 1234.567);
-        expectInvalidNumberError(assert, parseFloat, "1,000,000");
     });
 
     QUnit.test("parseFloatTime", function (assert) {
@@ -71,8 +70,9 @@ QUnit.module("Fields", (hooks) => {
         patchWithCleanup(localization, { decimalPoint: ",", thousandsSep: "." });
 
         assert.strictEqual(parseInteger("1.000.000"), 1000000);
-        expectInvalidNumberError(assert, parseInteger, "1,000,000");
         expectInvalidNumberError(assert, parseInteger, "1.234,567");
+        // fallback to en localization
+        assert.strictEqual(parseInteger("1,000,000"), 1000000);
     });
 
     QUnit.test("parsePercentage", function (assert) {
@@ -91,8 +91,6 @@ QUnit.module("Fields", (hooks) => {
     });
 
     QUnit.test("parseMonetary", function (assert) {
-        assert.expect(17);
-
         patchWithCleanup(session, {
             currencies: {
                 1: {
@@ -110,23 +108,23 @@ QUnit.module("Fields", (hooks) => {
 
         assert.strictEqual(parseMonetary(""), 0);
         assert.strictEqual(parseMonetary("0"), 0);
-        assert.strictEqual(parseMonetary("100.00&nbsp;€"), 100);
+        assert.strictEqual(parseMonetary("100.00\u00a0€"), 100);
         assert.strictEqual(parseMonetary("-100.00"), -100);
         assert.strictEqual(parseMonetary("1,000.00"), 1000);
         assert.strictEqual(parseMonetary("1,000,000.00"), 1000000);
-        assert.strictEqual(parseMonetary("$&nbsp;125.00", { currencyId: 3 }), 125);
-        assert.strictEqual(parseMonetary("1,000.00&nbsp;€", { currencyId: 1 }), 1000);
+        assert.strictEqual(parseMonetary("$\u00a0125.00", { currencyId: 3 }), 125);
+        assert.strictEqual(parseMonetary("1,000.00\u00a0€", { currencyId: 1 }), 1000);
 
-        assert.throws(() => parseMonetary("&nbsp;", { currencyId: 3 }));
-        assert.throws(() => parseMonetary("1&nbsp;", { currencyId: 3 }));
-        assert.throws(() => parseMonetary("&nbsp;1", { currencyId: 3 }));
+        assert.throws(() => parseMonetary("\u00a0", { currencyId: 3 }));
+        assert.throws(() => parseMonetary("1\u00a0", { currencyId: 3 }));
+        assert.throws(() => parseMonetary("\u00a01", { currencyId: 3 }));
 
         assert.throws(() => parseMonetary("12.00 €"));
         assert.throws(() => parseMonetary("$ 12.00", { currencyId: 3 }));
-        assert.throws(() => parseMonetary("1&nbsp;$", { currencyId: 1 }));
-        assert.throws(() => parseMonetary("$&nbsp;1")); // "€" is the default currency here
+        assert.throws(() => parseMonetary("1\u00a0$", { currencyId: 1 }));
+        assert.throws(() => parseMonetary("$\u00a01")); // "€" is the default currency here
 
-        assert.throws(() => parseMonetary("1$&nbsp;1", { currencyId: 1 }));
-        assert.throws(() => parseMonetary("$&nbsp;12.00&nbsp;34", { currencyId: 3 }));
+        assert.throws(() => parseMonetary("1$\u00a01", { currencyId: 1 }));
+        assert.throws(() => parseMonetary("$\u00a012.00\u00a034", { currencyId: 3 }));
     });
 });
diff --git a/addons/web/static/tests/views/fields/pdf_viewer_field_tests.js b/addons/web/static/tests/views/fields/pdf_viewer_field_tests.js
new file mode 100644
index 00000000000..4efd0aea4bf
--- /dev/null
+++ b/addons/web/static/tests/views/fields/pdf_viewer_field_tests.js
@@ -0,0 +1,105 @@
+/** @odoo-module **/
+
+import { getFixture, nextTick } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        document: { string: "Binary", type: "binary" },
+                    },
+                    records: [
+                        {
+                            document: "coucou==\n",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("PdfViewerField");
+
+    QUnit.test("PdfViewerField without data", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="document" widget="pdf_viewer"/></form>',
+        });
+
+        assert.hasClass(target.querySelector(".o_field_widget"), "o_field_pdf_viewer");
+        assert.containsOnce(
+            target,
+            ".o_select_file_button:not(.o_hidden)",
+            "there should be a visible 'Upload' button"
+        );
+        assert.containsNone(target, ".o_pdfview_iframe", "there should be no iframe");
+        assert.containsOnce(target, 'input[type="file"]', "there should be one input");
+    });
+
+    QUnit.test("PdfViewerField: basic rendering", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            arch: '<form><field name="document" widget="pdf_viewer"/></form>',
+            mockRPC: function (route) {
+                if (route.indexOf("/web/static/lib/pdfjs/web/viewer.html") !== -1) {
+                    return Promise.resolve();
+                }
+            },
+        });
+        assert.hasClass(target.querySelector(".o_field_widget"), "o_field_pdf_viewer");
+        assert.containsNone(target, ".o_select_file_button", "there should be no 'Upload' button");
+        assert.containsOnce(
+            target,
+            ".o_field_widget iframe.o_pdfview_iframe",
+            "there should be an iframe"
+        );
+        const iframeFile = target
+            .querySelector(".o_field_widget iframe.o_pdfview_iframe")
+            .dataset.src.split("%2Fweb%2Fcontent")[1];
+        assert.strictEqual(
+            iframeFile,
+            "%3Fmodel%3Dpartner%26id%3D1%26field%3Ddocument#page=1",
+            "the src attribute should be correctly set on the iframe"
+        );
+    });
+
+    QUnit.test("PdfViewerField: upload rendering", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="document" widget="pdf_viewer"/></form>',
+        });
+
+        assert.containsNone(target, ".o_pdfview_iframe", "there is no PDF Viewer");
+
+        // Set and trigger the change of a pdf file for the input
+        const fileInput = target.querySelector('input[type="file"]');
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(new File(["test"], "test.pdf", { type: "application/pdf" }));
+        fileInput.files = dataTransfer.files;
+        fileInput.dispatchEvent(new Event("change", { bubbles: true }));
+        await nextTick();
+        await nextTick();
+
+        assert.containsOnce(target, ".o_pdfview_iframe", "there is a PDF Viewer");
+        const iframeFile = target
+            .querySelector(".o_field_widget iframe.o_pdfview_iframe")
+            .dataset.src.split("?file=")[1];
+        assert.ok(/^blob%3/.test(iframeFile), "the file starts with 'blob:'");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/percent_pie_field_tests.js b/addons/web/static/tests/views/fields/percent_pie_field_tests.js
new file mode 100644
index 00000000000..93067f739a2
--- /dev/null
+++ b/addons/web/static/tests/views/fields/percent_pie_field_tests.js
@@ -0,0 +1,281 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        { id: 1, foo: "yop", int_field: 10 },
+                        { id: 2, foo: "gnap", int_field: 80 },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("PercentPieField");
+
+    QUnit.test("PercentPieField in form view with value < 50%", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="int_field" widget="percentpie"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "10%",
+            "should have 10% as pie value since int_field=10"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                .transform,
+            "rotate(180deg)",
+            "left mask should be covering the whole left side of the pie"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1].style
+                .transform,
+            "rotate(36deg)",
+            "right mask should be rotated from 360*(10/100) = 36 degrees"
+        );
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "10%",
+            "should have 10% as pie value since int_field=10"
+        );
+        assert.ok(
+            _.str.include(
+                target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                    .transform,
+                "rotate(180deg)"
+            ),
+            "left mask should be covering the whole left side of the pie"
+        );
+        assert.ok(
+            _.str.include(
+                target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1]
+                    .style.transform,
+                "rotate(36deg)"
+            ),
+            "right mask should be rotated from 360*(10/100) = 36 degrees"
+        );
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "10%",
+            "should have 10% as pie value since int_field=10"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                .transform,
+            "rotate(180deg)",
+            "left mask should be covering the whole left side of the pie"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1].style
+                .transform,
+            "rotate(36deg)",
+            "right mask should be rotated from 360*(10/100) = 36 degrees"
+        );
+    });
+
+    QUnit.test("PercentPieField in form view with value > 50%", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="int_field" widget="percentpie"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "80%",
+            "should have 80% as pie value since int_field=80"
+        );
+        assert.ok(
+            _.str.include(
+                target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                    .transform,
+                "rotate(288deg)"
+            ),
+            "left mask should be rotated from 360*(80/100) = 288 degrees"
+        );
+        assert.hasClass(
+            target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1],
+            "o_full",
+            "right mask should be hidden since the value > 50%"
+        );
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "80%",
+            "should have 80% as pie value since int_field=80"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                .transform,
+            "rotate(288deg)",
+            "left mask should be rotated from 360*(80/100) = 288 degrees"
+        );
+        assert.hasClass(
+            target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1],
+            "o_full",
+            "right mask should be hidden since the value > 50%"
+        );
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_pie_value")
+                .textContent,
+            "80%",
+            "should have 80% as pie value since int_field=80"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie .o_mask").style
+                .transform,
+            "rotate(288deg)",
+            "left mask should be rotated from 360*(80/100) = 288 degrees"
+        );
+        assert.hasClass(
+            target.querySelectorAll(".o_field_percent_pie.o_field_widget .o_pie .o_mask")[1],
+            "o_full",
+            "right mask should be hidden since the value > 50%"
+        );
+    });
+
+    // TODO: This test would pass without any issue since all the classes and
+    //       custom style attributes are correctly set on the widget in list
+    //       view, but since the scss itself for this widget currently only
+    //       applies inside the form view, the widget is unusable. This test can
+    //       be uncommented when we refactor the scss files so that this widget
+    //       stylesheet applies in both form and list view.
+    // QUnit.test('percentpie widget in editable list view', async function(assert) {
+    //     assert.expect(10);
+    //
+    //     var list = await createView({
+    //         View: ListView,
+    //         model: 'partner',
+    //         data: this.data,
+    //         arch: '<tree editable="bottom">' +
+    //                 '<field name="foo"/>' +
+    //                 '<field name="int_field" widget="percentpie"/>' +
+    //               '</tree>',
+    //     });
+    //
+    //     assert.containsN(list, '.o_field_percent_pie .o_pie', 5,
+    //         "should have five pie charts");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_pie_value').textContent,
+    //         '10%', "should have 10% as pie value since int_field=10");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').attr('style'),
+    //         'rotate(180deg)', "left mask should be covering the whole left side of the pie");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').last().attr('style'),
+    //         'rotate(36deg)', "right mask should be rotated from 360*(10/100) = 36 degrees");
+    //
+    //     // switch to edit mode and check the result
+    //    testUtils.dom.click(     target.querySelector('tbody td:not(.o_list_record_selector)'));
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_pie_value').textContent,
+    //         '10%', "should have 10% as pie value since int_field=10");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').attr('style'),
+    //         'rotate(180deg)', "left mask should be covering the whole right side of the pie");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').last().attr('style'),
+    //         'rotate(36deg)', "right mask should be rotated from 360*(10/100) = 36 degrees");
+    //
+    //     // save
+    //    testUtils.dom.click(     list.$buttons.find('.o_list_button_save'));
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_pie_value').textContent,
+    //         '10%', "should have 10% as pie value since int_field=10");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').attr('style'),
+    //         'rotate(180deg)', "left mask should be covering the whole right side of the pie");
+    //     assert.strictEqual(target.querySelector('.o_field_percent_pie:first .o_pie .o_mask').last().attr('style'),
+    //         'rotate(36deg)', "right mask should be rotated from 360*(10/100) = 36 degrees");
+    //
+    //     list.destroy();
+    // });
+});
diff --git a/addons/web/static/tests/views/fields/percentage_field_tests.js b/addons/web/static/tests/views/fields/percentage_field_tests.js
new file mode 100644
index 00000000000..15d8d3f5ede
--- /dev/null
+++ b/addons/web/static/tests/views/fields/percentage_field_tests.js
@@ -0,0 +1,80 @@
+/** @odoo-module **/
+
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        float_field: {
+                            string: "Float_field",
+                            type: "float",
+                            digits: [0, 1],
+                        },
+                    },
+                    records: [{ float_field: 0.44444 }],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("PercentageField");
+
+    QUnit.test("PercentageField in form view", async function (assert) {
+        assert.expect(6);
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="float_field" widget="percentage"/>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    assert.strictEqual(
+                        args[1].float_field,
+                        0.24,
+                        "the correct float value should be saved"
+                    );
+                }
+            },
+            resId: 1,
+        });
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "44.4%",
+            "The value should be displayed properly."
+        );
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] input").value,
+            "44.444",
+            "The input should be rendered without the percentage symbol."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=float_field] span").textContent,
+            "%",
+            "The input should be followed by a span containing the percentage symbol."
+        );
+        const field = target.querySelector("input");
+        await editInput(target, "input", "24");
+        assert.strictEqual(field.value, "24", "The value should not be formated yet.");
+        await click(target.querySelector(".o_form_button_save"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "24%",
+            "The new value should be formatted properly."
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/phone_field_tests.js b/addons/web/static/tests/views/fields/phone_field_tests.js
new file mode 100644
index 00000000000..a62de608ddc
--- /dev/null
+++ b/addons/web/static/tests/views/fields/phone_field_tests.js
@@ -0,0 +1,165 @@
+/** @odoo-module **/
+
+import { getNextTabableElement } from "@web/core/utils/ui";
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            trim: true,
+                        },
+                    },
+                    records: [{ foo: "yop" }, { foo: "blip" }],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("PhoneField");
+
+    QUnit.test("PhoneField in form view on normal screens", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="phone"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        const phone = target.querySelector(".o_field_phone a");
+        assert.containsOnce(
+            target,
+            phone,
+            "should have rendered the phone number as a link with correct classes"
+        );
+        assert.strictEqual(phone.textContent, "yop", "value should be displayed properly");
+        assert.hasAttrValue(phone, "href", "tel:yop", "should have proper tel prefix");
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(
+            target,
+            'input[type="phone"]',
+            "should have an input for the phone field"
+        );
+        assert.strictEqual(
+            target.querySelector('input[type="phone"]').value,
+            "yop",
+            "input should contain field value in edit mode"
+        );
+
+        // change value in edit mode
+        await editInput(target, "input[type='phone']", "new");
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.strictEqual(
+            target.querySelector(".o_field_phone a").textContent,
+            "new",
+            "new value should be displayed properly"
+        );
+    });
+
+    QUnit.test("PhoneField in editable list view on normal screens", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree editable="bottom"><field name="foo" widget="phone"/></tree>',
+        });
+
+        assert.containsN(target, "tbody td:not(.o_list_record_selector).o_data_cell", 2);
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector) a").textContent,
+            "yop",
+            "value should be displayed properly with a link to send SMS"
+        );
+
+        assert.containsN(
+            target,
+            ".o_field_widget a.o_form_uri.o_phone_link",
+            2,
+            "should have the correct classnames"
+        );
+
+        // Edit a line and check the result
+        let cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        await click(cell);
+        assert.hasClass(cell.parentElement, "o_selected_row", "should be set as edit mode");
+        assert.strictEqual(
+            cell.querySelector("input").value,
+            "yop",
+            "should have the corect value in internal input"
+        );
+        await editInput(cell, "input", "new");
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        assert.doesNotHaveClass(
+            cell.parentElement,
+            "o_selected_row",
+            "should not be in edit mode anymore"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector) a").textContent,
+            "new",
+            "value should be properly updated"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget a.o_form_uri.o_phone_link",
+            2,
+            "should still have links with correct classes"
+        );
+    });
+
+    QUnit.test("use TAB to navigate to a PhoneField", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="display_name"/>
+                            <field name="foo" widget="phone"/>
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+        target.querySelector(".o_field_widget[name=display_name] input").focus();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector('.o_field_widget[name="display_name"] input'),
+            "display_name should be focused"
+        );
+        assert.strictEqual(
+            getNextTabableElement(target),
+            target.querySelector('[name="foo"] input'),
+            "foo should be focused"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/priority_field_tests.js b/addons/web/static/tests/views/fields/priority_field_tests.js
new file mode 100644
index 00000000000..ccc6786b93e
--- /dev/null
+++ b/addons/web/static/tests/views/fields/priority_field_tests.js
@@ -0,0 +1,582 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { commandService } from "@web/core/commands/command_service";
+import {
+    click,
+    getFixture,
+    nextTick,
+    triggerEvent,
+    triggerHotkey,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+const serviceRegistry = registry.category("services");
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                        },
+                        sequence: { type: "integer", string: "Sequence", searchable: true },
+                        selection: {
+                            string: "Selection",
+                            type: "selection",
+                            selection: [
+                                ["normal", "Normal"],
+                                ["blocked", "Blocked"],
+                                ["done", "Done"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: "yop",
+                            selection: "blocked",
+                        },
+                        {
+                            id: 2,
+                            foo: "blip",
+                            selection: "normal",
+                        },
+                        {
+                            id: 4,
+                            foo: "abc",
+                            selection: "done",
+                        },
+                        { id: 3, foo: "gnap" },
+                        { id: 5, foo: "blop" },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("PriorityField");
+
+    QUnit.test("PriorityField when not set", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 2,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="selection" widget="priority" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority:not(.o_field_empty)",
+            "widget should be considered set, even though there is no value for this field"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should have no full star since there is no value"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            2,
+            "should have two empty stars since there is no value"
+        );
+    });
+
+    QUnit.test("PriorityField tooltip", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="selection" widget="priority"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        // check data-tooltip attribute (used by the tooltip service)
+        const stars = target.querySelectorAll(".o_field_widget .o_priority a.o_priority_star");
+        assert.strictEqual(
+            stars[0].dataset["tooltip"],
+            "Selection: Blocked",
+            "Should set field label and correct selection label as title attribute (tooltip)"
+        );
+        assert.strictEqual(
+            stars[1].dataset["tooltip"],
+            "Selection: Done",
+            "Should set field label and correct selection label as title attribute (tooltip)"
+        );
+    });
+
+    QUnit.test("PriorityField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="selection" widget="priority" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority:not(.o_field_empty)",
+            "widget should be considered set"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should have one empty star since the value is the second value"
+        );
+
+        // hover last star
+        let stars = target.querySelectorAll(
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o"
+        );
+        await triggerEvent(stars[stars.length - 1], null, "mouseenter");
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            2,
+            "should temporary have two full stars since we are hovering the third value"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should temporary have no empty star since we are hovering the third value"
+        );
+
+        await triggerEvent(stars[stars.length - 1], null, "mouseleave");
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should temporary have two full stars since we are hovering the third value"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should temporary have no empty star since we are hovering the third value"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should still have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should still have one empty star since the value is the second value"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should still have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should still have one empty star since the value is the second value"
+        );
+
+        // switch to edit mode to check that the new value was properly written
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should still have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should still have one empty star since the value is the second value"
+        );
+
+        // click on the second star in edit mode
+        stars = target.querySelectorAll(".o_field_widget .o_priority a.o_priority_star.fa-star-o");
+        await click(stars[stars.length - 1]);
+
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            2,
+            "should now have two full stars since the value is the third value"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should now have no empty star since the value is the third value"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsN(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            2,
+            "should now have two full stars since the value is the third value"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star-o",
+            "should now have no empty star since the value is the third value"
+        );
+    });
+
+    QUnit.test("PriorityField in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="selection" widget="priority" />
+                </tree>`,
+        });
+
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority:not(.o_field_empty)",
+            "widget should be considered set"
+        );
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star",
+            "should have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star-o",
+            "should have one empty star since the value is the second value"
+        );
+
+        // switch to edit mode and check the result
+        await click(target.querySelector("tbody td:not(.o_list_record_selector)"));
+
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star",
+            "should have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star-o",
+            "should have one empty star since the value is the second value"
+        );
+
+        // save
+        await click(target, ".o_list_button_save");
+
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star",
+            "should have one full star since the value is the second value"
+        );
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star-o",
+            "should have one empty star since the value is the second value"
+        );
+
+        // hover last star
+        await triggerEvent(
+            target.querySelector(".o_data_row"),
+            ".o_priority a.o_priority_star.fa-star-o",
+            "mouseenter"
+        );
+
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should have two stars for representing each possible value: no star, one star and two stars"
+        );
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            "a.o_priority_star.fa-star",
+            2,
+            "should temporary have two full stars since we are hovering the third value"
+        );
+        assert.containsNone(
+            target.querySelectorAll(".o_data_row")[0],
+            "a.o_priority_star.fa-star-o",
+            "should temporary have no empty star since we are hovering the third value"
+        );
+
+        // click on the first star in readonly mode
+        await click(target.querySelector(".o_priority a.o_priority_star.fa-star"));
+
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsNone(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star",
+            "should now have no full star since the value is the first value"
+        );
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star-o",
+            2,
+            "should now have two empty stars since the value is the first value"
+        );
+
+        // re-enter edit mode to force re-rendering the widget to check if the value was correctly saved
+        await click(target.querySelector("tbody td:not(.o_list_record_selector)"));
+
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsNone(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star",
+            "should now only have no full star since the value is the first value"
+        );
+        assert.containsN(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_priority a.o_priority_star.fa-star-o",
+            2,
+            "should now have two empty stars since the value is the first value"
+        );
+
+        // Click on second star in edit mode
+        let stars = target.querySelectorAll(".o_priority a.o_priority_star.fa-star-o");
+        await click(stars[stars.length - 1]);
+
+        let rows = target.querySelectorAll(".o_data_row");
+        assert.containsN(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsN(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star.fa-star",
+            2,
+            "should now have two full stars since the value is the third value"
+        );
+        assert.containsNone(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star.fa-star-o",
+            "should now have no empty star since the value is the third value"
+        );
+
+        // save
+        await click(target, ".o_list_button_save");
+        rows = target.querySelectorAll(".o_data_row");
+
+        assert.containsN(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star",
+            2,
+            "should still have two stars"
+        );
+        assert.containsN(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star.fa-star",
+            2,
+            "should now have two full stars since the value is the third value"
+        );
+        assert.containsNone(
+            rows[rows.length - 1],
+            ".o_priority a.o_priority_star.fa-star-o",
+            "should now have no empty star since the value is the third value"
+        );
+    });
+
+    QUnit.test("PriorityField with readonly attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 2,
+            serverData,
+            arch: '<form><field name="selection" widget="priority" readonly="1"/></form>',
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    throw new Error("should not save");
+                }
+            },
+        });
+
+        assert.containsN(
+            target,
+            "span.o_priority_star.fa.fa-star-o",
+            2,
+            "stars of priority widget should rendered with span tag if readonly"
+        );
+
+        await triggerEvent(
+            target.querySelectorAll(".o_priority_star.fa-star-o")[1],
+            null,
+            "mouseenter"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget .o_priority a.o_priority_star.fa-star",
+            "should have no full stars on hover since the field is readonly"
+        );
+
+        await click(target.querySelectorAll(".o_priority_star.fa-star-o")[1]);
+        assert.containsN(
+            target,
+            "span.o_priority_star.fa.fa-star-o",
+            2,
+            "should still have two stars"
+        );
+    });
+
+    QUnit.test(
+        'PriorityField edited by the smart action "Set priority..."',
+        async function (assert) {
+            serviceRegistry.add("command", commandService);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="selection" widget="priority"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(target, "a.fa-star");
+
+            triggerHotkey("control+k");
+            await nextTick();
+            const idx = [...target.querySelectorAll(".o_command")]
+                .map((el) => el.textContent)
+                .indexOf("Set priority...ALT + R");
+            assert.ok(idx >= 0);
+
+            await click([...target.querySelectorAll(".o_command")][idx]);
+            await nextTick();
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
+                ["Normal", "Blocked", "Done"]
+            );
+            await click(target, "#o_command_2");
+            await nextTick();
+            assert.containsN(target, "a.fa-star", 2);
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/progress_bar_field_tests.js b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
new file mode 100644
index 00000000000..800e4a4860e
--- /dev/null
+++ b/addons/web/static/tests/views/fields/progress_bar_field_tests.js
@@ -0,0 +1,466 @@
+/** @odoo-module **/
+
+import {
+    makeFakeNotificationService,
+    makeFakeLocalizationService,
+} from "@web/../tests/helpers/mock_services";
+import { registry } from "@web/core/registry";
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        float_field: {
+                            string: "Float_field",
+                            type: "float",
+                            digits: [16, 1],
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            int_field: 10,
+                            float_field: 0.44444,
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("ProgressBarField");
+
+    QUnit.test("ProgressBarField: max_value should update", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.records = serverData.models.partner.records.slice(0, 1);
+        serverData.models.partner.records[0].float_field = 2;
+
+        serverData.models.partner.onchanges = {
+            display_name(obj) {
+                obj.int_field = 999;
+                obj.float_field = 5;
+            },
+        };
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="display_name" />
+                    <field name="float_field" invisible="1" />
+                    <field name="int_field" widget="progressbar" options="{'current_value': 'int_field', 'max_value': 'float_field'}" />
+                </form>`,
+            resId: 1,
+            mockRPC(route, { method, args }) {
+                if (method === "write") {
+                    assert.deepEqual(
+                        args[1],
+                        { int_field: 999, float_field: 5, display_name: "new name" },
+                        "New value of progress bar saved"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_progressbar_value").textContent,
+            "10 / 2",
+            "The initial value of the progress bar should be correct"
+        );
+        // The view should be in edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+
+        await editInput(target, ".o_field_widget[name=display_name] input", "new name");
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.strictEqual(
+            target.querySelector(".o_progressbar_value").textContent,
+            "999 / 5",
+            "The value of the progress bar should be correct after the update"
+        );
+    });
+
+    QUnit.test(
+        "ProgressBarField: value should update in edit mode when typing in input",
+        async function (assert) {
+            assert.expect(5);
+            serverData.models.partner.records[0].int_field = 99;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="int_field" widget="progressbar" options="{'editable': true}"/>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method, args }) {
+                    if (method === "write") {
+                        assert.strictEqual(
+                            args[1].int_field,
+                            69,
+                            "New value of progress bar saved"
+                        );
+                    }
+                },
+            });
+
+            // The view should be in edit mode by default
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+
+            const input = target.querySelector(".o_progressbar_value.o_input");
+
+            assert.strictEqual(input.value, "99", "Initial value should be correct");
+
+            // Clicking on the progress bar should not change the value
+            await click(target.querySelector(".o_progress"));
+
+            assert.strictEqual(input.value, "99", "Initial value in input is still correct");
+
+            await editInput(target, ".o_progressbar_value.o_input", "69");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "69%",
+                "New value should be different than initial after click"
+            );
+        }
+    );
+
+    QUnit.test(
+        "ProgressBarField: value should update in edit mode when typing in input with field max value",
+        async function (assert) {
+            assert.expect(5);
+            serverData.models.partner.records[0].int_field = 99;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" invisible="1" />
+                        <field name="int_field" widget="progressbar" options="{'editable': true, 'max_value': 'float_field'}" />
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method, args }) {
+                    if (method === "write") {
+                        assert.strictEqual(
+                            args[1].int_field,
+                            69,
+                            "New value of progress bar saved"
+                        );
+                    }
+                },
+            });
+            // The view should be in edit mode by default
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+            assert.ok(
+                target.querySelector(".o_progressbar_value").value === "99" &&
+                    target.querySelectorAll(".o_progressbar_value")[1].textContent === "0.44444",
+                "Initial value should be correct"
+            );
+
+            await click(target.querySelector(".o_progress"));
+
+            const input = target.querySelector(".o_progressbar_value.o_input");
+            assert.strictEqual(input.value, "99", "Initial value in input is still correct");
+
+            await editInput(target, ".o_progressbar_value.o_input", "69");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "69 / 0",
+                "New value should be different than initial after click"
+            );
+        }
+    );
+
+    QUnit.test(
+        "ProgressBarField: max value should update in edit mode when typing in input with field max value",
+        async function (assert) {
+            assert.expect(5);
+            serverData.models.partner.records[0].int_field = 99;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" invisible="1" />
+                        <field name="int_field" widget="progressbar" options="{'editable': true, 'max_value': 'float_field', 'edit_max_value': true}" />
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method, args }) {
+                    if (method === "write") {
+                        assert.strictEqual(
+                            args[1].float_field,
+                            69,
+                            "New value of progress bar saved"
+                        );
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "99 / 0",
+                "Initial value should be correct"
+            );
+            // The view should be in edit mode by default
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+
+            await click(target.querySelector(".o_progress"));
+
+            const input = target.querySelector(".o_progressbar_value.o_input");
+            assert.strictEqual(input.value, "0.44", "Initial value in input is correct");
+
+            await editInput(target, ".o_progressbar_value.o_input", "69");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "99 / 69",
+                "New value should be different than initial after click"
+            );
+        }
+    );
+
+    QUnit.test(
+        "ProgressBarField: update both max value and current value in edit mode when both options are given",
+        async function (assert) {
+            assert.expect(7);
+            serverData.models.partner.records[0].int_field = 99;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="float_field" invisible="1" />
+                        <field name="int_field" widget="progressbar" options="{'editable': true, 'max_value': 'float_field', 'edit_max_value': true, 'edit_current_value': true}" />
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method, args }) {
+                    if (method === "write") {
+                        assert.strictEqual(
+                            args[1].int_field,
+                            2000,
+                            "New value of current value saved"
+                        );
+                        assert.strictEqual(args[1].float_field, 69, "New value of max value saved");
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "99 / 0",
+                "Initial value should be correct"
+            );
+            // The view should be in edit mode by default
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+
+            await click(target.querySelector(".o_progress"));
+
+            const currentVal = target.querySelectorAll(".o_progressbar_value.o_input")[0];
+            const maxVal = target.querySelectorAll(".o_progressbar_value.o_input")[1];
+            assert.strictEqual(currentVal.value, "99", "Initial value in input is correct");
+            assert.strictEqual(maxVal.value, "0.44", "Initial value in input is correct");
+
+            await editInput(target, ".o_progressbar input:nth-of-type(1)", "2000");
+            await editInput(target, ".o_progressbar input:nth-of-type(2)", "69");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "2k / 69",
+                "New value should be different than initial after click"
+            );
+        }
+    );
+
+    QUnit.test("ProgressBarField: Standard readonly mode is readonly", async function (assert) {
+        serverData.models.partner.records[0].int_field = 99;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="float_field" invisible="1"/>
+                    <field name="int_field" widget="progressbar" options="{'editable': true, 'max_value': 'float_field', 'edit_max_value': true}"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+
+        assert.ok(target.querySelector(".o_form_view .o_form_readonly"), "Form in readonly mode");
+
+        assert.strictEqual(
+            target.querySelector(".o_progressbar_value").textContent,
+            "99 / 0",
+            "Initial value should be correct"
+        );
+
+        await click(target.querySelector(".o_progress"));
+
+        assert.containsNone(target, ".o_progressbar_value.o_input", "no input in readonly mode");
+
+        assert.verifySteps([
+            "/web/dataset/call_kw/partner/get_views",
+            "/web/dataset/call_kw/partner/read",
+        ]);
+    });
+
+    QUnit.test(
+        "ProgressBarField: write float instead of int works, in locale",
+        async function (assert) {
+            assert.expect(5);
+            serverData.models.partner.records[0].int_field = 99;
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="int_field" widget="progressbar" options="{'editable': true}"/>
+                    </form>`,
+                resId: 1,
+                mockRPC: function (route, { method, args }) {
+                    if (method === "write") {
+                        assert.strictEqual(
+                            args[1].int_field,
+                            1037,
+                            "New value of progress bar saved"
+                        );
+                    }
+                },
+            });
+
+            registry.category("services").remove("localization");
+            registry
+                .category("services")
+                .add(
+                    "localization",
+                    makeFakeLocalizationService({ thousandsSep: "#", decimalPoint: ":" })
+                );
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "99%",
+                "Initial value should be correct"
+            );
+
+            await click(target.querySelector(".o_form_button_edit"));
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+
+            await click(target.querySelector(".o_progress"));
+
+            const input = target.querySelector(".o_progressbar_value.o_input");
+            assert.strictEqual(input.value, "99", "Initial value in input is correct");
+
+            await editInput(target, ".o_field_widget input", "1#037:9");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").textContent,
+                "1k%",
+                "New value should be different than initial after click"
+            );
+        }
+    );
+
+    QUnit.test(
+        "ProgressBarField: write gibbrish instead of int throws warning",
+        async function (assert) {
+            serverData.models.partner.records[0].int_field = 99;
+            const mock = () => {
+                assert.step("Show error message");
+                return () => {};
+            };
+            registry.category("services").add("notification", makeFakeNotificationService(mock), {
+                force: true,
+            });
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `
+                    <form>
+                        <field name="int_field" widget="progressbar" options="{'editable': true}"/>
+                    </form>`,
+                resId: 1,
+            });
+            // The view should be in edit mode by default
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.ok(target.querySelector(".o_form_view .o_form_editable"), "Form in edit mode");
+
+            assert.strictEqual(
+                target.querySelector(".o_progressbar_value").value,
+                "99",
+                "Initial value should be correct"
+            );
+
+            const input = target.querySelector(".o_progressbar_value.o_input");
+
+            assert.strictEqual(input.value, "99", "Initial value in input is correct");
+
+            await editInput(target, ".o_progressbar_value.o_input", "trente sept virgule neuf");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.containsOnce(target, ".o_form_button_save", "The form has not been saved");
+            assert.verifySteps(["Show error message"], "The error message was shown correctly");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/radio_field_tests.js b/addons/web/static/tests/views/fields/radio_field_tests.js
new file mode 100644
index 00000000000..c1ce0ff3cd9
--- /dev/null
+++ b/addons/web/static/tests/views/fields/radio_field_tests.js
@@ -0,0 +1,350 @@
+/** @odoo-module **/
+
+import { click, getFixture, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            int_field: 10,
+                            trululu: 4,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                        },
+                        {
+                            id: 3,
+                            display_name: "third record",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+            },
+        };
+        target = getFixture();
+        setupViewRegistries();
+    });
+
+    QUnit.module("RadioField");
+
+    QUnit.test("fieldradio widget on a many2one in a new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="product_id" widget="radio"/></form>',
+        });
+
+        assert.ok(
+            target.querySelectorAll("div.o_radio_item").length,
+            "should have rendered outer div"
+        );
+        assert.containsN(target, "input.o_radio_input", 2, "should have 2 possible choices");
+        assert.strictEqual(
+            target.querySelector(".o_field_radio").textContent.replace(/\s+/g, ""),
+            "xphonexpad"
+        );
+        assert.containsNone(target, "input:checked", "none of the input should be checked");
+
+        await click(target.querySelectorAll("input.o_radio_input")[0]);
+
+        assert.containsOnce(target, "input:checked", "one of the input should be checked");
+
+        await click(target, ".o_form_button_save");
+
+        assert.hasAttrValue(
+            target.querySelector("input.o_radio_input:checked"),
+            "data-value",
+            "37",
+            "should have saved record with correct value"
+        );
+    });
+
+    QUnit.test("required fieldradio widget on a many2one", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="product_id" widget="radio" required="1"/></form>',
+        });
+
+        assert.containsNone(
+            target,
+            ".o_field_radio input:checked",
+            "none of the input should be checked"
+        );
+
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(
+            target.querySelector(".o_notification_title").textContent,
+            "Invalid fields: "
+        );
+        assert.strictEqual(
+            target.querySelector(".o_notification_content").innerHTML,
+            "<ul><li>Product</li></ul>"
+        );
+        assert.hasClass(target.querySelector(".o_notification"), "border-danger");
+    });
+
+    QUnit.test("fieldradio change value by onchange", async function (assert) {
+        serverData.models.partner.onchanges = {
+            bar(obj) {
+                obj.product_id = obj.bar ? [41] : [37];
+                obj.color = obj.bar ? "red" : "black";
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar" />
+                    <field name="product_id" widget="radio" />
+                    <field name="color" widget="radio" />
+                </form>`,
+        });
+
+        await click(target, "input[type='checkbox']");
+
+        assert.containsOnce(
+            target,
+            "input.o_radio_input[data-value='37']:checked",
+            "one of the input should be checked"
+        );
+        assert.containsOnce(
+            target,
+            "input.o_radio_input[data-value='black']:checked",
+            "the other of the input should be checked"
+        );
+
+        await click(target, "input[type='checkbox']");
+        assert.containsOnce(
+            target,
+            "input.o_radio_input[data-value='41']:checked",
+            "the other of the input should be checked"
+        );
+        assert.containsOnce(
+            target,
+            "input.o_radio_input[data-value='red']:checked",
+            "one of the input should be checked"
+        );
+    });
+
+    QUnit.test("fieldradio widget on a selection in a new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="color" widget="radio"/></form>',
+        });
+
+        assert.ok(
+            target.querySelectorAll("div.o_radio_item").length,
+            "should have rendered outer div"
+        );
+        assert.containsN(target, "input.o_radio_input", 2, "should have 2 possible choices");
+        assert.strictEqual(
+            target.querySelector(".o_field_radio").textContent.replace(/\s+/g, ""),
+            "RedBlack"
+        );
+
+        // click on 2nd option
+        await click(target.querySelectorAll("input.o_radio_input")[1]);
+
+        await click(target, ".o_form_button_save");
+
+        assert.hasAttrValue(
+            target.querySelector("input.o_radio_input:checked"),
+            "data-value",
+            "black",
+            "should have saved record with correct value"
+        );
+    });
+
+    QUnit.test("fieldradio widget has o_horizontal or o_vertical class", async function (assert) {
+        serverData.models.partner.fields.color2 = serverData.models.partner.fields.color;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="color" widget="radio" />
+                        <field name="color2" widget="radio" options="{'horizontal': True}" />
+                    </group>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_radio > div.o_vertical",
+            "should have o_vertical class"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_radio div.o_horizontal",
+            "should have o_horizontal class"
+        );
+    });
+
+    QUnit.test("fieldradio widget with numerical keys encoded as strings", async function (assert) {
+        assert.expect(7);
+
+        serverData.models.partner.fields.selection = {
+            type: "selection",
+            selection: [
+                ["0", "Red"],
+                ["1", "Black"],
+            ],
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="selection" widget="radio"/></form>',
+            mockRPC: function (route, { args, method, model }) {
+                if (model === "partner" && method === "write") {
+                    assert.strictEqual(args[1].selection, "1", "should write correct value");
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent.replace(/\s+/g, ""),
+            "RedBlack"
+        );
+        assert.containsNone(target, ".o_radio_input:checked", "no value should be checked");
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsNone(target, ".o_radio_input:checked", "no value should be checked");
+
+        await click(target.querySelectorAll("input.o_radio_input")[1]);
+
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent.replace(/\s+/g, ""),
+            "RedBlack"
+        );
+        assert.containsOnce(
+            target,
+            ".o_radio_input[data-index='1']:checked",
+            "'Black' should be checked"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(
+            target,
+            ".o_radio_input[data-index='1']:checked",
+            "'Black' should be checked"
+        );
+    });
+
+    QUnit.test(
+        "widget radio on a many2one: domain updated by an onchange",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.onchanges = {
+                int_field() {},
+            };
+
+            let domain = [];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field" />
+                        <field name="trululu" widget="radio" />
+                    </form>`,
+                mockRPC(route, { kwargs, method }) {
+                    if (method === "onchange") {
+                        domain = [["id", "in", [10]]];
+                        return Promise.resolve({
+                            value: {
+                                trululu: false,
+                            },
+                            domain: {
+                                trululu: domain,
+                            },
+                        });
+                    }
+                    if (method === "search_read") {
+                        assert.deepEqual(kwargs.domain, domain, "sent domain should be correct");
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+            assert.containsN(
+                target,
+                ".o_field_widget[name='trululu'] .o_radio_item",
+                3,
+                "should be 3 radio buttons"
+            );
+
+            // trigger an onchange that will update the domain
+            const input = target.querySelector(".o_field_widget[name='int_field'] input");
+            input.value = "2";
+            await triggerEvent(input, null, "change");
+            assert.containsNone(
+                target,
+                ".o_field_widget[name='trululu'] .o_radio_item",
+                "should be no more radio button"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/reference_field_tests.js b/addons/web/static/tests/views/fields/reference_field_tests.js
new file mode 100644
index 00000000000..b5e7042ad47
--- /dev/null
+++ b/addons/web/static/tests/views/fields/reference_field_tests.js
@@ -0,0 +1,878 @@
+/** @odoo-module **/
+
+import { AutoComplete } from "@web/core/autocomplete/autocomplete";
+import { browser } from "@web/core/browser/browser";
+import { actionService } from "@web/webclient/actions/action_service";
+import {
+    click,
+    editInput,
+    getFixture,
+    patchWithCleanup,
+    triggerEvent,
+    editSelect,
+    clickSave,
+    clickEdit,
+    triggerHotkey,
+    nextTick,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let target;
+let serverData;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        qux: { string: "Qux", type: "float", digits: [16, 1] },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        turtles: {
+                            string: "one2many turtle field",
+                            type: "one2many",
+                            relation: "turtle",
+                            relation_field: "turtle_trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                        date: { string: "Some Date", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        reference: {
+                            string: "Reference Field",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner_type", "Partner Type"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                        model_id: { string: "Model", type: "many2one", relation: "ir.model" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44,
+                            p: [],
+                            turtles: [2],
+                            timmy: [],
+                            trululu: 4,
+                            reference: "product,37",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            p: [],
+                            timmy: [],
+                            trululu: 1,
+                            product_id: 37,
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            bar: false,
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                turtle: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        turtle_foo: { string: "Foo", type: "char" },
+                        turtle_bar: { string: "Bar", type: "boolean", default: true },
+                        turtle_int: { string: "int", type: "integer", sortable: true },
+                        turtle_description: { string: "Description", type: "text" },
+                        turtle_trululu: {
+                            string: "Trululu",
+                            type: "many2one",
+                            relation: "partner",
+                        },
+                        turtle_ref: {
+                            string: "Reference",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            required: true,
+                        },
+                        partner_ids: { string: "Partner", type: "many2many", relation: "partner" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "leonardo",
+                            turtle_bar: true,
+                            turtle_foo: "yop",
+                            partner_ids: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "donatello",
+                            turtle_bar: true,
+                            turtle_foo: "blip",
+                            turtle_int: 9,
+                            partner_ids: [2, 4],
+                        },
+                        {
+                            id: 3,
+                            display_name: "raphael",
+                            product_id: 37,
+                            turtle_bar: false,
+                            turtle_foo: "kawa",
+                            turtle_int: 21,
+                            partner_ids: [],
+                            turtle_ref: "product,37",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                "ir.model": {
+                    fields: {
+                        model: { string: "Model", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Partner",
+                            model: "partner",
+                        },
+                        {
+                            id: 20,
+                            name: "Product",
+                            model: "product",
+                        },
+                        {
+                            id: 21,
+                            name: "Partner Type",
+                            model: "partner_type",
+                        },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+
+        patchWithCleanup(AutoComplete, {
+            delay: 0,
+        });
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+    });
+
+    QUnit.module("ReferenceField");
+
+    QUnit.test("ReferenceField can quick create models", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="reference" /></form>',
+            mockRPC(route, { method }) {
+                assert.step(method || route);
+            },
+        });
+
+        await editSelect(target, "select", "partner");
+
+        await click(target, ".o_field_widget[name='reference'] input");
+        await editInput(target, ".o_field_widget[name='reference'] input", "new partner");
+        await click(target, ".o_field_widget[name='reference'] .o_m2o_dropdown_option_create");
+
+        await click(target, ".o_form_button_save");
+
+        assert.verifySteps(
+            [
+                "get_views",
+                "onchange",
+                "name_search", // for the select
+                "name_search", // for the spawned many2one
+                "name_create",
+                "create",
+                "read",
+                "name_get",
+            ],
+            "The name_create method should have been called"
+        );
+    });
+
+    QUnit.test("ReferenceField in modal readonly mode", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].trululu = 1;
+        serverData.models.partner.records[1].reference = "product,41";
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name" />
+                    <field name="reference" />
+                </form>`,
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                    <field name="reference" />
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="reference" />
+                    <field name="p" />
+                </form>`,
+        });
+
+        // Current Form
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=reference] .o_form_uri").textContent,
+            "xphone",
+            "the field reference of the form should have the right value"
+        );
+
+        const cell = target.querySelector(".o_data_cell");
+        assert.strictEqual(cell.textContent, "second record", "the list should have one record");
+        await click(cell);
+
+        // In modal
+        assert.containsOnce(document.body, ".modal-lg");
+        assert.strictEqual(
+            document.body.querySelector(".modal-lg .o_field_widget[name=reference] .o_form_uri")
+                .textContent,
+            "xpad",
+            "The field reference in the modal should have the right value"
+        );
+
+        await click(document.body, ".modal .o_form_button_cancel");
+    });
+
+    QUnit.test("ReferenceField in modal write mode", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].trululu = 1;
+        serverData.models.partner.records[1].reference = "product,41";
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="display_name" />
+                    <field name="reference" />
+                </form>`,
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                    <field name="reference" />
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="reference" />
+                    <field name="p" />
+                </form>`,
+        });
+
+        // current form
+        await click(target, ".o_form_button_edit");
+
+        let fieldRef = target.querySelector(".o_field_widget[name=reference]");
+        assert.strictEqual(
+            fieldRef.querySelector("option:checked").textContent,
+            "Product",
+            "The reference field's model should be Product"
+        );
+        assert.strictEqual(
+            fieldRef.querySelector(".o-autocomplete--input").value,
+            "xphone",
+            "The reference field's record should be xphone"
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+
+        // In modal
+        assert.containsOnce(document.body, ".modal-lg", "there should be one modal opened");
+
+        fieldRef = document.querySelector(".modal-lg .o_field_widget[name=reference]");
+
+        assert.strictEqual(
+            fieldRef.querySelector("option:checked").textContent,
+            "Product",
+            "The reference field's model should be Product"
+        );
+        assert.strictEqual(
+            fieldRef.querySelector(".o-autocomplete--input").value,
+            "xpad",
+            "The reference field's record should be xpad"
+        );
+    });
+
+    QUnit.test("reference in form view", async function (assert) {
+        assert.expect(14);
+
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="display_name" />
+                </form>`,
+        };
+
+        patchWithCleanup(actionService, {
+            start() {
+                const service = this._super(...arguments);
+                return {
+                    ...service,
+                    doAction(action) {
+                        assert.strictEqual(
+                            action.res_id,
+                            17,
+                            "should do a do_action with correct parameters"
+                        );
+                    },
+                };
+            },
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="reference" string="custom label" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method, model }) {
+                if (method === "get_formview_action") {
+                    assert.deepEqual(
+                        args[0],
+                        [37],
+                        "should call get_formview_action with correct id"
+                    );
+                    return Promise.resolve({
+                        res_id: 17,
+                        type: "ir.actions.act_window",
+                        target: "current",
+                        res_model: "res.partner",
+                    });
+                }
+                if (method === "get_formview_id") {
+                    assert.deepEqual(args[0], [37], "should call get_formview_id with correct id");
+                    return Promise.resolve(false);
+                }
+                if (method === "name_search") {
+                    assert.strictEqual(
+                        model,
+                        "partner_type",
+                        "the name_search should be done on the newly set model"
+                    );
+                }
+                if (method === "write") {
+                    assert.strictEqual(model, "partner", "should write on the current model");
+                    assert.deepEqual(
+                        args,
+                        [[1], { reference: "partner_type,12" }],
+                        "should write the correct value"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector("a.o_form_uri").textContent,
+            "xphone",
+            "should contain a link"
+        );
+        await click(target, "a.o_form_uri");
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(target, ".o_field_many2one_selection", "should contain one many2one");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget select").value,
+            "product",
+            "widget should contain one select with the model"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "xphone",
+            "widget should contain one input with the record"
+        );
+
+        const options = [...target.querySelectorAll(".o_field_widget select > option")].map(
+            (el) => el.value
+        );
+        assert.deepEqual(
+            options,
+            ["", "product", "partner_type", "partner"],
+            "the options should be correctly set"
+        );
+
+        await click(target, ".o_external_button");
+
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent.trim(),
+            "Open: custom label",
+            "dialog title should display the custom string label"
+        );
+        await click(target, ".modal .o_form_button_cancel");
+
+        await editSelect(target, ".o_field_widget select", "partner_type");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "",
+            "many2one value should be reset after model change"
+        );
+
+        await click(target, ".o_field_widget[name=reference] input");
+        await click(target.querySelector(".o_field_widget[name=reference] .ui-menu-item"));
+
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector("a.o_form_uri").textContent,
+            "gold",
+            "should contain a link with the new value"
+        );
+    });
+
+    QUnit.test("interact with reference field changed by onchange", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.partner.onchanges = {
+            bar(obj) {
+                if (!obj.bar) {
+                    obj.reference = "partner,1";
+                }
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="reference"/>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (method === "create") {
+                    assert.deepEqual(args[0], {
+                        bar: false,
+                        reference: "partner,4",
+                    });
+                }
+            },
+        });
+
+        // trigger the onchange to set a value for the reference field
+        await click(target, ".o_field_boolean input");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=reference] select").value,
+            "partner"
+        );
+
+        // manually update reference field
+        await editInput(target, ".o_field_widget[name=reference] input", "aaa");
+        await click(target.querySelector(".ui-autocomplete .ui-menu-item"));
+
+        // save
+        await click(target, ".o_form_button_save");
+    });
+
+    QUnit.test("default_get and onchange with a reference field", async function (assert) {
+        serverData.models.partner.fields.reference.default = "product,37";
+        serverData.models.partner.onchanges = {
+            int_field(obj) {
+                if (obj.int_field) {
+                    obj.reference = "partner_type," + obj.int_field;
+                }
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="int_field" />
+                            <field name="reference" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { method, model }) {
+                if (method === "name_get") {
+                    assert.step(model);
+                }
+            },
+        });
+
+        assert.verifySteps(["product"], "the first name_get should have been done");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] select").value,
+            "product",
+            "reference field model should be correctly set"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "xphone",
+            "reference field value should be correctly set"
+        );
+
+        // trigger onchange
+        await editInput(target, ".o_field_widget[name=int_field] input", 12);
+
+        assert.verifySteps(["partner_type"], "the second name_get should have been done");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] select").value,
+            "partner_type",
+            "reference field model should be correctly set"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "gold",
+            "reference field value should be correctly set"
+        );
+    });
+
+    QUnit.test("default_get a reference field in a x2m", async function (assert) {
+        serverData.models.partner.fields.turtles.default = [
+            [0, false, { turtle_ref: "product,37" }],
+        ];
+        serverData.views = {
+            "turtle,false,form": `
+                <form>
+                    <field name="display_name" />
+                    <field name="turtle_ref" />
+                </form>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="turtles">
+                            <tree>
+                                <field name="turtle_ref" />
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="turtles"] .o_data_row').textContent,
+            "xphone",
+            "the default value should be correctly handled"
+        );
+    });
+
+    QUnit.test("ReferenceField on char field, reset by onchange", async function (assert) {
+        serverData.models.partner.records[0].foo = "product,37";
+        serverData.models.partner.onchanges = {
+            int_field(obj) {
+                obj.foo = "product," + obj.int_field;
+            },
+        };
+
+        let nbNameGet = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="int_field" />
+                            <field name="foo" widget="reference" readonly="1" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { model, method }) {
+                if (model === "product" && method === "name_get") {
+                    nbNameGet++;
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(nbNameGet, 1, "the first name_get should have been done");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo]").textContent,
+            "xphone",
+            "foo field should be correctly set"
+        );
+
+        // trigger onchange
+        await editInput(target, ".o_field_widget[name=int_field] input", 41);
+
+        assert.strictEqual(nbNameGet, 2, "the second name_get should have been done");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo]").textContent,
+            "xpad",
+            "foo field should have been updated"
+        );
+    });
+
+    QUnit.test("reference and list navigation", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="reference" />
+                </tree>`,
+        });
+
+        // edit first row
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row [name='reference'] input")
+        );
+
+        triggerHotkey("Tab");
+        await nextTick();
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name='reference'] select")
+        );
+    });
+
+    QUnit.test("ReferenceField with model_field option", async function (assert) {
+        serverData.models.partner.records[0].reference = false;
+        serverData.models.partner.records[0].model_id = 20;
+        serverData.models.partner.records[1].display_name = "John Smith";
+        serverData.models.product.records[0].display_name = "Product 1";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="model_id" />
+                    <field name="reference" options="{'model_field': 'model_id'}" />
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsNone(
+            target,
+            "select",
+            "the selection list of the reference field should not exist."
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "",
+            "no record should be selected in the reference field"
+        );
+
+        await editInput(target, ".o_field_widget[name='reference'] input", "Product 1");
+        await click(target, ".ui-autocomplete .ui-menu-item:first-child");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "Product 1",
+            "the Product 1 record should be selected in the reference field"
+        );
+
+        await editInput(target, ".o_field_widget[name='model_id'] input", "Partner");
+        await click(target, ".ui-autocomplete .ui-menu-item:first-child");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "",
+            "no record should be selected in the reference field"
+        );
+
+        await editInput(target, ".o_field_widget[name='reference'] input", "John");
+        await click(target, ".ui-autocomplete .ui-menu-item:first-child");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='reference'] input").value,
+            "John Smith",
+            "the John Smith record should be selected in the reference field"
+        );
+    });
+
+    QUnit.test(
+        "ReferenceField with model_field option (model_field not synchronized with reference)",
+        async function (assert) {
+            // Checks that the data is not modified even though it is not synchronized.
+            // Not synchronized = model_id contains a different model than the one used in reference.
+            serverData.models.partner.records[0].reference = "partner,1";
+            serverData.models.partner.records[0].model_id = 20;
+            serverData.models.partner.records[0].display_name = "John Smith";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="model_id" />
+                        <field name="reference" options="{'model_field': 'model_id'}" />
+                   </form>`,
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='model_id'] span").textContent,
+                "Product",
+                "the value of model_id field should be Product"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='reference'] span").textContent,
+                "John Smith",
+                "the value of model_id field should be John Smith"
+            );
+
+            await click(target, ".o_form_button_edit");
+            assert.containsNone(
+                target,
+                "select",
+                "the selection list of the reference field should not exist."
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='model_id'] input").value,
+                "Product",
+                "the Product model should be selected in the model_id field"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name='reference'] input").value,
+                "John Smith",
+                "the John Smith record should be selected in the reference field"
+            );
+        }
+    );
+
+    QUnit.test(
+        "ReferenceField with model_field option (tree list in form view)",
+        async function (assert) {
+            serverData.models.turtle.records[0].partner_ids = [1];
+            serverData.models.partner.records[0].reference = "product,41";
+            serverData.models.partner.records[0].model_id = 20;
+
+            await makeView({
+                type: "form",
+                resModel: "turtle",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="partner_ids">
+                            <tree editable="bottom">
+                                <field name="name" />
+                                <field name="model_id" />
+                                <field name="reference" options="{'model_field': 'model_id'}" class="reference_field" />
+                            </tree>
+                        </field>
+                   </form>`,
+            });
+
+            await clickEdit(target);
+
+            assert.strictEqual(target.querySelector(".reference_field").textContent, "xpad");
+
+            // Select the second product without changing the model
+            await click(target, ".o_list_table .reference_field");
+            await click(target, ".o_list_table .reference_field input");
+
+            // Enter to select it
+            await triggerEvent(target, ".o_list_table .reference_field input", "keydown", {
+                key: "Enter",
+            });
+
+            assert.strictEqual(
+                target.querySelector(".reference_field input").value,
+                "xphone",
+                "should have selected the first product"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/remaining_days_field_tests.js b/addons/web/static/tests/views/fields/remaining_days_field_tests.js
new file mode 100644
index 00000000000..223c49f9b6d
--- /dev/null
+++ b/addons/web/static/tests/views/fields/remaining_days_field_tests.js
@@ -0,0 +1,477 @@
+/** @odoo-module **/
+
+import {
+    click,
+    editInput,
+    getFixture,
+    patchDate,
+    patchTimeZone,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        date: { string: "A date", type: "date", searchable: true },
+                        datetime: { string: "A datetime", type: "datetime", searchable: true },
+                    },
+                    records: [],
+                    onchanges: {},
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("RemainingDaysField");
+
+    QUnit.test("RemainingDaysField on a date field in list view", async function (assert) {
+        patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+        serverData.models.partner.records = [
+            { id: 1, date: "2017-10-08" }, // today
+            { id: 2, date: "2017-10-09" }, // tomorrow
+            { id: 3, date: "2017-10-07" }, // yesterday
+            { id: 4, date: "2017-10-10" }, // + 2 days
+            { id: 5, date: "2017-10-05" }, // - 3 days
+            { id: 6, date: "2018-02-08" }, // + 4 months (diff >= 100 days)
+            { id: 7, date: "2017-06-08" }, // - 4 months (diff >= 100 days)
+            { id: 8, date: false },
+        ];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="date" widget="remaining_days" />
+                </tree>`,
+        });
+
+        const cells = target.querySelectorAll(".o_data_cell");
+        assert.strictEqual(cells[0].textContent, "Today");
+        assert.strictEqual(cells[1].textContent, "Tomorrow");
+        assert.strictEqual(cells[2].textContent, "Yesterday");
+        assert.strictEqual(cells[3].textContent, "In 2 days");
+        assert.strictEqual(cells[4].textContent, "3 days ago");
+        assert.strictEqual(cells[5].textContent, "02/08/2018");
+        assert.strictEqual(cells[6].textContent, "06/08/2017");
+        assert.strictEqual(cells[7].textContent, "");
+
+        assert.hasAttrValue(cells[0].querySelector(".o_field_widget > div"), "title", "10/08/2017");
+        assert.hasClass(
+            cells[0].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-warning"
+        );
+        assert.doesNotHaveClass(
+            cells[1].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-warning text-danger"
+        );
+        assert.hasClass(
+            cells[2].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-danger"
+        );
+        assert.doesNotHaveClass(
+            cells[3].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-warning text-danger"
+        );
+        assert.hasClass(
+            cells[4].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-danger"
+        );
+        assert.doesNotHaveClass(
+            cells[5].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-warning text-danger"
+        );
+        assert.hasClass(
+            cells[6].querySelector(".o_field_widget > div"),
+            "font-weight-bold text-danger"
+        );
+    });
+
+    QUnit.test(
+        "RemainingDaysField on a date field in multi edit list view",
+        async function (assert) {
+            patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+            serverData.models.partner.records = [
+                { id: 1, date: "2017-10-08" }, // today
+                { id: 2, date: "2017-10-09" }, // tomorrow
+                { id: 8, date: false },
+            ];
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="date" widget="remaining_days" />
+                    </tree>`,
+            });
+
+            const cells = target.querySelectorAll(".o_data_cell");
+            const rows = target.querySelectorAll(".o_data_row");
+
+            assert.strictEqual(cells[0].textContent, "Today");
+            assert.strictEqual(cells[1].textContent, "Tomorrow");
+
+            // select two records and edit them
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+
+            await click(rows[0], ".o_data_cell");
+            assert.containsOnce(
+                target,
+                "input.o_datepicker_input",
+                "should have date picker input"
+            );
+
+            await editInput(target, ".o_datepicker_input", "10/10/2017");
+            await click(target);
+
+            assert.containsOnce(document.body, ".modal");
+            assert.strictEqual(
+                document.querySelector(".modal .o_field_widget").textContent,
+                "In 2 days",
+                "should have 'In 2 days' value to change"
+            );
+            await click(document.body, ".modal .modal-footer .btn-primary");
+
+            assert.strictEqual(
+                rows[0].querySelector(".o_data_cell").textContent,
+                "In 2 days",
+                "should have 'In 2 days' as date field value"
+            );
+            assert.strictEqual(
+                rows[1].querySelector(".o_data_cell").textContent,
+                "In 2 days",
+                "should have 'In 2 days' as date field value"
+            );
+        }
+    );
+
+    QUnit.test(
+        "RemainingDaysField, enter wrong value manually in multi edit list view",
+        async function (assert) {
+            patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+            serverData.models.partner.records = [
+                { id: 1, date: "2017-10-08" }, // today
+                { id: 2, date: "2017-10-09" }, // tomorrow
+                { id: 8, date: false },
+            ];
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="date" widget="remaining_days" />
+                    </tree>`,
+            });
+
+            const cells = target.querySelectorAll(".o_data_cell");
+            const rows = target.querySelectorAll(".o_data_row");
+
+            assert.strictEqual(cells[0].textContent, "Today");
+            assert.strictEqual(cells[1].textContent, "Tomorrow");
+
+            // select two records and edit them
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+
+            await click(rows[0], ".o_data_cell");
+            assert.containsOnce(
+                target,
+                "input.o_datepicker_input",
+                "should have date picker input"
+            );
+
+            await editInput(target, ".o_datepicker_input", "blabla");
+            await click(target);
+            assert.containsNone(document.body, ".modal");
+            assert.strictEqual(cells[0].textContent, "Today");
+            assert.strictEqual(cells[1].textContent, "Tomorrow");
+        }
+    );
+
+    QUnit.test("RemainingDaysField on a date field in form view", async function (assert) {
+        patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+        serverData.models.partner.records = [
+            { id: 1, date: "2017-10-08" }, // today
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="date" widget="remaining_days" />
+                </form>`,
+        });
+
+        assert.strictEqual(target.querySelector(".o_field_widget").textContent, "Today");
+        assert.hasClass(
+            target.querySelector(".o_field_widget > div "),
+            "font-weight-bold text-warning"
+        );
+
+        // in edit mode, this widget should be editable.
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(target, ".o_form_editable");
+        assert.containsOnce(target, "div.o_field_widget[name='date'] .o_datepicker");
+
+        await click(target.querySelector(".o_datepicker .o_datepicker_input"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+
+        await click(document.body, ".bootstrap-datetimepicker-widget .day[data-day='10/09/2017']");
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(target.querySelector(".o_field_widget").textContent, "Tomorrow");
+
+        await click(target, ".o_form_button_edit");
+        await click(target.querySelector(".o_datepicker .o_datepicker_input"));
+        await click(document.body, ".bootstrap-datetimepicker-widget .day[data-day='10/07/2017']");
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(target.querySelector(".o_field_widget").textContent, "Yesterday");
+        assert.hasClass(target.querySelector(".o_field_widget > div"), "text-danger");
+    });
+
+    QUnit.test("RemainingDaysField on a datetime field in form view", async function (assert) {
+        patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+        serverData.models.partner.records = [
+            { id: 1, datetime: "2017-10-08 10:00:00" }, // today
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="datetime" widget="remaining_days" />
+                </form>`,
+        });
+        assert.strictEqual(target.querySelector(".o_field_widget").textContent, "Today");
+        assert.hasClass(target.querySelector(".o_field_widget > div"), "text-warning");
+
+        // in edit mode, this widget should be editable.
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(target, ".o_form_editable");
+        assert.containsOnce(target, "div.o_field_widget[name='datetime'] .o_datepicker");
+
+        await click(target.querySelector(".o_datepicker .o_datepicker_input"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+
+        await click(document.body, ".bootstrap-datetimepicker-widget .day[data-day='10/09/2017']");
+        await click(document.body, "a[data-action='close']");
+        await click(target, ".o_form_button_save");
+        assert.strictEqual(target.querySelector(".o_field_widget > div").textContent, "Tomorrow");
+    });
+
+    QUnit.test(
+        "RemainingDaysField on a datetime field in list view in UTC",
+        async function (assert) {
+            patchTimeZone(0);
+            patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+            serverData.models.partner.records = [
+                { id: 1, datetime: "2017-10-08 20:00:00" }, // today
+                { id: 2, datetime: "2017-10-09 08:00:00" }, // tomorrow
+                { id: 3, datetime: "2017-10-07 18:00:00" }, // yesterday
+                { id: 4, datetime: "2017-10-10 22:00:00" }, // + 2 days
+                { id: 5, datetime: "2017-10-05 04:00:00" }, // - 3 days
+                { id: 6, datetime: "2018-02-08 04:00:00" }, // + 4 months (diff >= 100 days)
+                { id: 7, datetime: "2017-06-08 04:00:00" }, // - 4 months (diff >= 100 days)
+                { id: 8, datetime: false },
+            ];
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="datetime" widget="remaining_days" />
+                    </tree>`,
+            });
+
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[0].textContent, "Today");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[1].textContent, "Tomorrow");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[2].textContent, "Yesterday");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[3].textContent, "In 2 days");
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[4].textContent,
+                "3 days ago"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[5].textContent,
+                "02/08/2018"
+            );
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[6].textContent,
+                "06/08/2017"
+            );
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[7].textContent, "");
+
+            assert.hasAttrValue(
+                target.querySelector(".o_data_cell .o_field_widget div"),
+                "title",
+                "10/08/2017"
+            );
+
+            assert.hasClass(
+                target.querySelectorAll(".o_data_cell div div")[0],
+                "font-weight-bold text-warning"
+            );
+            assert.doesNotHaveClass(
+                target.querySelectorAll(".o_data_cell div div")[1],
+                "font-weight-bold text-warning text-danger"
+            );
+            assert.hasClass(
+                target.querySelectorAll(".o_data_cell div div")[2],
+                "font-weight-bold text-danger"
+            );
+            assert.doesNotHaveClass(
+                target.querySelectorAll(".o_data_cell div div")[3],
+                "font-weight-bold text-warning text-danger"
+            );
+            assert.hasClass(
+                target.querySelectorAll(".o_data_cell div div")[4],
+                "font-weight-bold text-danger"
+            );
+            assert.doesNotHaveClass(
+                target.querySelectorAll(".o_data_cell div div")[5],
+                "font-weight-bold text-warning text-danger"
+            );
+            assert.hasClass(
+                target.querySelectorAll(".o_data_cell div div")[6],
+                "font-weight-bold text-danger"
+            );
+        }
+    );
+
+    QUnit.test(
+        "RemainingDaysField on a datetime field in list view in UTC+6",
+        async function (assert) {
+            patchTimeZone(360);
+            patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11, UTC+6
+            serverData.models.partner.records = [
+                { id: 1, datetime: "2017-10-08 20:00:00" }, // tomorrow
+                { id: 2, datetime: "2017-10-09 08:00:00" }, // tomorrow
+                { id: 3, datetime: "2017-10-07 18:30:00" }, // today
+                { id: 4, datetime: "2017-10-07 12:00:00" }, // yesterday
+                { id: 5, datetime: "2017-10-09 20:00:00" }, // + 2 days
+            ];
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="datetime" widget="remaining_days" />
+                    </tree>`,
+            });
+
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[0].textContent, "Tomorrow");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[1].textContent, "Tomorrow");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[2].textContent, "Today");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[3].textContent, "Yesterday");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[4].textContent, "In 2 days");
+
+            assert.hasAttrValue(
+                target.querySelector(".o_data_cell .o_field_widget div"),
+                "title",
+                "10/09/2017"
+            );
+        }
+    );
+
+    QUnit.test("RemainingDaysField on a date field in list view in UTC-6", async function (assert) {
+        patchTimeZone(-360);
+        patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11
+        serverData.models.partner.records = [
+            { id: 1, date: "2017-10-08" }, // today
+            { id: 2, date: "2017-10-09" }, // tomorrow
+            { id: 3, date: "2017-10-07" }, // yesterday
+            { id: 4, date: "2017-10-10" }, // + 2 days
+            { id: 5, date: "2017-10-05" }, // - 3 days
+        ];
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="date" widget="remaining_days" />
+                </tree>`,
+        });
+
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[0].textContent, "Today");
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[1].textContent, "Tomorrow");
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[2].textContent, "Yesterday");
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[3].textContent, "In 2 days");
+        assert.strictEqual(target.querySelectorAll(".o_data_cell")[4].textContent, "3 days ago");
+
+        assert.hasAttrValue(
+            target.querySelector(".o_data_cell .o_field_widget div"),
+            "title",
+            "10/08/2017"
+        );
+    });
+
+    QUnit.test(
+        "RemainingDaysField on a datetime field in list view in UTC-8",
+        async function (assert) {
+            patchTimeZone(-560);
+            patchDate(2017, 9, 8, 15, 35, 11); // October 8 2017, 15:35:11, UTC-8
+            serverData.models.partner.records = [
+                { id: 1, datetime: "2017-10-08 20:00:00" }, // today
+                { id: 2, datetime: "2017-10-09 07:00:00" }, // today
+                { id: 3, datetime: "2017-10-09 10:00:00" }, // tomorrow
+                { id: 4, datetime: "2017-10-08 06:00:00" }, // yesterday
+                { id: 5, datetime: "2017-10-07 02:00:00" }, // - 2 days
+            ];
+
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="datetime" widget="remaining_days" />
+                    </tree>`,
+            });
+
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[0].textContent, "Today");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[1].textContent, "Today");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[2].textContent, "Tomorrow");
+            assert.strictEqual(target.querySelectorAll(".o_data_cell")[3].textContent, "Yesterday");
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_cell")[4].textContent,
+                "2 days ago"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/selection_field_tests.js b/addons/web/static/tests/views/fields/selection_field_tests.js
new file mode 100644
index 00000000000..7ee429a9330
--- /dev/null
+++ b/addons/web/static/tests/views/fields/selection_field_tests.js
@@ -0,0 +1,398 @@
+/** @odoo-module **/
+
+import { click, editSelect, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            int_field: 10,
+                            trululu: 4,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            int_field: 9,
+                            trululu: 1,
+                            product_id: 37,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("SelectionField");
+
+    QUnit.test("SelectionField in a list view", async function (assert) {
+        serverData.models.partner.records.forEach(function (r) {
+            r.color = "red";
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: '<tree string="Colors" editable="top"><field name="color"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 3);
+        await click(target.querySelector(".o_data_cell"));
+
+        const td = target.querySelector("tbody tr.o_selected_row td:not(.o_list_record_selector)");
+        assert.containsOnce(td, "select", "td should have a child 'select'");
+        assert.strictEqual(td.children.length, 1, "select tag should be only child of td");
+    });
+
+    QUnit.test("SelectionField, edition and on many2one field", async function (assert) {
+        serverData.models.partner.onchanges = { product_id: function () {} };
+        serverData.models.partner.records[0].product_id = 37;
+        serverData.models.partner.records[0].trululu = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_id" widget="selection" />
+                    <field name="trululu" widget="selection" />
+                    <field name="color" widget="selection" />
+                </form>`,
+            mockRPC(route, { method }) {
+                assert.step(method);
+            },
+        });
+
+        assert.containsNone(target, "select");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id']").textContent,
+            "xphone",
+            "should have rendered the many2one field correctly"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name='product_id'] span"),
+            "raw-value",
+            "37",
+            "should have set the raw-value attr for many2one field correctly"
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='trululu']").textContent,
+            "",
+            "should have rendered the unset many2one field correctly"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='color']").textContent,
+            "Red",
+            "should have rendered the selection field correctly"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name='color'] span"),
+            "raw-value",
+            "red",
+            "should have set the raw-value attr for selection field correctly"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(target, "select", 3);
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name='product_id'] select option[value='37']",
+            "should have fetched xphone option"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name='product_id'] select option[value='41']",
+            "should have fetched xpad option"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id'] select").value,
+            "37",
+            "should have correct product_id value"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='trululu'] select").value,
+            "false",
+            "should not have any value in trululu field"
+        );
+
+        await editSelect(target, ".o_field_widget[name='product_id'] select", "41");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='product_id'] select").value,
+            "41",
+            "should have a value of xphone"
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name='color'] select").value,
+            `"red"`,
+            "should have correct value in color field"
+        );
+
+        assert.verifySteps(["get_views", "read", "name_search", "name_search", "onchange"]);
+    });
+
+    QUnit.test("unset selection field with 0 as key", async function (assert) {
+        // The server doesn't make a distinction between false value (the field
+        // is unset), and selection 0, as in that case the value it returns is
+        // false. So the client must convert false to value 0 if it exists.
+        serverData.models.partner.fields.selection = {
+            type: "selection",
+            selection: [
+                [0, "Value O"],
+                [1, "Value 1"],
+            ],
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="selection" /></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "Value O",
+            "the displayed value should be 'Value O'"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_empty",
+            "should not have class o_field_empty"
+        );
+    });
+
+    QUnit.test("unset selection field with string keys", async function (assert) {
+        // The server doesn't make a distinction between false value (the field
+        // is unset), and selection 0, as in that case the value it returns is
+        // false. So the client must convert false to value 0 if it exists. In
+        // this test, it doesn't exist as keys are strings.
+        serverData.models.partner.fields.selection = {
+            type: "selection",
+            selection: [
+                ["0", "Value O"],
+                ["1", "Value 1"],
+            ],
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="selection" /></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "",
+            "there should be no displayed value"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget"),
+            "o_field_empty",
+            "should have class o_field_empty"
+        );
+    });
+
+    QUnit.test("unset selection on a many2one field", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="trululu" widget="selection" /></form>',
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    assert.strictEqual(
+                        args[1].trululu,
+                        false,
+                        "should send 'false' as trululu value"
+                    );
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+        await editSelect(target, ".o_form_view select", "false");
+        await click(target, ".o_form_button_save");
+    });
+
+    QUnit.test("field selection with many2ones and special characters", async function (assert) {
+        // edit the partner with id=4
+        serverData.models.partner.records[2].display_name = "<span>hey</span>";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="trululu" widget="selection" /></form>',
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            target.querySelector("select option[value='4']").textContent,
+            "<span>hey</span>"
+        );
+    });
+
+    QUnit.test(
+        "SelectionField on a many2one: domain updated by an onchange",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.onchanges = {
+                int_field() {},
+            };
+
+            let domain = [];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <field name="int_field" />
+                        <field name="trululu" widget="selection" />
+                    </form>`,
+                mockRPC(route, { args, method }) {
+                    if (method === "onchange") {
+                        domain = [["id", "in", [10]]];
+                        return Promise.resolve({
+                            domain: {
+                                trululu: domain,
+                            },
+                        });
+                    }
+                    if (method === "name_search") {
+                        assert.deepEqual(args[1], domain, "sent domain should be correct");
+                    }
+                },
+            });
+
+            await click(target, ".o_form_button_edit");
+
+            assert.containsN(
+                target,
+                ".o_field_widget[name='trululu'] option",
+                4,
+                "should be 4 options in the selection"
+            );
+
+            // trigger an onchange that will update the domain
+            await editInput(target, ".o_field_widget[name='int_field'] input", 2);
+
+            assert.containsOnce(
+                target,
+                ".o_field_widget[name='trululu'] option",
+                "should be 1 option in the selection"
+            );
+        }
+    );
+
+    QUnit.test("required selection widget should not have blank option", async function (assert) {
+        serverData.models.partner.fields.feedback_value = {
+            type: "selection",
+            required: true,
+            selection: [
+                ["good", "Good"],
+                ["bad", "Bad"],
+            ],
+            default: "good",
+            string: "Good",
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="feedback_value" />
+                    <field name="color" attrs="{'required': [('feedback_value', '=', 'bad')]}" />
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(
+            target.querySelector(".o_field_widget[name='color']"),
+            "option",
+            3,
+            "Three options in non required field"
+        );
+        assert.containsN(
+            target.querySelector(".o_field_widget[name='feedback_value']"),
+            "option",
+            2,
+            "Two options in required field"
+        );
+
+        // change value to update widget modifier values
+        await editSelect(target, ".o_field_widget[name='feedback_value'] select", '"bad"');
+
+        assert.containsN(
+            target.querySelector(".o_field_widget[name='color']"),
+            "option",
+            2,
+            "Two options in second selection as it is now required"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/stat_info_field_tests.js b/addons/web/static/tests/views/fields/stat_info_field_tests.js
new file mode 100644
index 00000000000..aaf7202e7de
--- /dev/null
+++ b/addons/web/static/tests/views/fields/stat_info_field_tests.js
@@ -0,0 +1,295 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        qux: { string: "Qux", type: "float", digits: [16, 1], searchable: true },
+                        monetary: { string: "Monetary", type: "monetary" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44444,
+                            monetary: 9.999999,
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("StatInfoField");
+
+    QUnit.test("StatInfoField formats decimal precision", async function (assert) {
+        // sometimes the round method can return numbers such as 14.000001
+        // when asked to round a number to 2 decimals, as such is the behaviour of floats.
+        // we check that even in that eventuality, only two decimals are displayed
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <button class="oe_stat_button" name="items" icon="fa-gear">
+                        <field name="qux" widget="statinfo" />
+                    </button>
+                    <button class="oe_stat_button" name="money" icon="fa-money">
+                        <field name="monetary" widget="statinfo" />
+                    </button>
+                </form>`,
+        });
+
+        // formatFloat renders according to this.field.digits
+        assert.strictEqual(
+            target.querySelectorAll(".oe_stat_button .o_field_widget .o_stat_value")[0].textContent,
+            "0.4",
+            "Default precision should be [16,1]"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".oe_stat_button .o_field_widget .o_stat_value")[1].textContent,
+            "10.00",
+            "Currency decimal precision should be 2"
+        );
+    });
+
+    QUnit.test("StatInfoField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <div class="oe_button_box" name="button_box">
+                        <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                            <field name="int_field" widget="statinfo" />
+                        </button>
+                    </div>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "int_field",
+            "should have 'int_field' as text"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should still have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should still have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "int_field",
+            "should have 'int_field' as text"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "int_field",
+            "should have 'int_field' as text"
+        );
+    });
+
+    QUnit.test("StatInfoField in form view with specific label_field", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                                <field string="Useful stat button" name="int_field" widget="statinfo" options="{'label_field': 'foo'}" />
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo" invisible="1" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "yop",
+            "should have 'yop' as text, since it is the value of field foo"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should still have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should still have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "yop",
+            "should have 'yop' as text, since it is the value of field foo"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_text").textContent,
+            "yop",
+            "should have 'yop' as text, since it is the value of field foo"
+        );
+    });
+
+    QUnit.test("StatInfoField in form view with no label", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <button class="oe_stat_button" name="items" type="object" icon="fa-gear">
+                                <field string="Useful stat button" name="int_field" widget="statinfo" nolabel="1" />
+                            </button>
+                        </div>
+                    </sheet>
+                </form>`,
+        });
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.containsNone(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_text",
+            "should not have any label"
+        );
+
+        // switch to edit mode and check the result
+        await click(target, ".o_form_button_edit");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should still have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should still have 10 as value"
+        );
+        assert.containsNone(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_text",
+            "should not have any label"
+        );
+
+        // save
+        await click(target, ".o_form_button_save");
+        assert.containsOnce(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_info",
+            "should have one stat button"
+        );
+        assert.strictEqual(
+            target.querySelector(".oe_stat_button .o_field_widget .o_stat_value").textContent,
+            "10",
+            "should have 10 as value"
+        );
+        assert.containsNone(
+            target,
+            ".oe_stat_button .o_field_widget .o_stat_text",
+            "should not have any label"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/state_selection_field_tests.js b/addons/web/static/tests/views/fields/state_selection_field_tests.js
new file mode 100644
index 00000000000..ce71d056717
--- /dev/null
+++ b/addons/web/static/tests/views/fields/state_selection_field_tests.js
@@ -0,0 +1,471 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { commandService } from "@web/core/commands/command_service";
+import { click, getFixture, nextTick, triggerHotkey } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+const serviceRegistry = registry.category("services");
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                        },
+                        sequence: { type: "integer", string: "Sequence", searchable: true },
+                        selection: {
+                            string: "Selection",
+                            type: "selection",
+                            selection: [
+                                ["normal", "Normal"],
+                                ["blocked", "Blocked"],
+                                ["done", "Done"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: "yop",
+                            selection: "blocked",
+                        },
+                        {
+                            id: 2,
+                            foo: "blip",
+                            selection: "normal",
+                        },
+                        {
+                            id: 4,
+                            foo: "abc",
+                            selection: "done",
+                        },
+                        { id: 3, foo: "gnap" },
+                        { id: 5, foo: "blop" },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("StateSelectionField");
+
+    QUnit.test("StateSelectionField in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="selection" widget="state_selection"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_red",
+            "should have one red status since selection is the second, blocked state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_green",
+            "should not have one green status since selection is the second, blocked state"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+
+        // Click on the status button to make the dropdown appear
+        await click(target, ".o_field_widget.o_field_state_selection .o_status");
+        assert.containsOnce(document.body, ".dropdown-menu", "there should be a dropdown");
+        assert.containsN(
+            target,
+            ".dropdown-menu .dropdown-item",
+            2,
+            "there should be two options in the dropdown"
+        );
+
+        // Click on the first option, "Normal"
+        await click(target.querySelector(".dropdown-menu .dropdown-item"));
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown anymore");
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_red",
+            "should not have one red status since selection is the first, normal state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_green",
+            "should not have one green status since selection is the first, normal state"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status",
+            "should have one grey status since selection is the first, normal state"
+        );
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsNone(target, ".dropdown-menu", "there should still not be a dropdown");
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_red",
+            "should still not have one red status since selection is the first, normal state"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_green",
+            "should still not have one green status since selection is the first, normal state"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status",
+            "should still have one grey status since selection is the first, normal state"
+        );
+
+        // Click on the status button to make the dropdown appear
+        await click(target, ".o_field_widget.o_field_state_selection .o_status");
+        assert.containsOnce(target, ".dropdown-menu", "there should be a dropdown");
+        assert.containsN(
+            target,
+            ".dropdown-menu .dropdown-item",
+            2,
+            "there should be two options in the dropdown"
+        );
+
+        // Click on the last option, "Done"
+        await click(target, ".dropdown-menu .dropdown-item:last-child");
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown anymore");
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_red",
+            "should not have one red status since selection is the third, done state"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_green",
+            "should have one green status since selection is the third, done state"
+        );
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsNone(
+            target,
+            ".dropdown-menu",
+            "there should still not be a dropdown anymore"
+        );
+        assert.containsNone(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_red",
+            "should still not have one red status since selection is the third, done state"
+        );
+        assert.containsOnce(
+            target,
+            ".o_field_widget.o_field_state_selection span.o_status.o_status_green",
+            "should still have one green status since selection is the third, done state"
+        );
+    });
+
+    QUnit.test("StateSelectionField with readonly modifier", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="selection" widget="state_selection" readonly="1"/></form>',
+            resId: 1,
+        });
+
+        assert.hasClass(target.querySelector(".o_field_state_selection"), "o_readonly_modifier");
+        assert.hasClass(target.querySelector(".o_field_state_selection button"), "disabled");
+        assert.isNotVisible(target.querySelector(".dropdown-menu"));
+        await click(target, ".o_field_state_selection span.o_status");
+        assert.isNotVisible(target.querySelector(".dropdown-menu"));
+    });
+
+    QUnit.test("StateSelectionField for list view with hide_label option", async function (assert) {
+        Object.assign(serverData.models.partner.fields, {
+            graph_type: {
+                string: "Graph Type",
+                type: "selection",
+                selection: [
+                    ["line", "Line"],
+                    ["bar", "Bar"],
+                ],
+            },
+        });
+        serverData.models.partner.records[0].graph_type = "bar";
+        serverData.models.partner.records[1].graph_type = "line";
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="graph_type" widget="state_selection" options="{'hide_label': True}"/>
+                    <field name="selection" widget="state_selection"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            10,
+            "should have ten status selection widgets"
+        );
+        const selection = Array.from(
+            target.querySelectorAll(
+                ".o_state_selection_cell .o_field_state_selection[name=selection] span.o_status_label"
+            )
+        );
+        assert.strictEqual(selection.length, 5, "should have five label on selection widgets");
+        assert.strictEqual(
+            selection.filter((el) => el.textContent === "Done").length,
+            1,
+            "should have one Done status label"
+        );
+        assert.strictEqual(
+            selection.filter((el) => el.textContent === "Normal").length,
+            3,
+            "should have three Normal status label"
+        );
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection[name=graph_type] span.o_status",
+            5,
+            "should have five status selection widgets"
+        );
+        assert.containsNone(
+            target,
+            ".o_state_selection_cell .o_field_state_selection[name=graph_type] span.o_status_label",
+            "should not have status label in selection widgets"
+        );
+    });
+
+    QUnit.test("StateSelectionField in editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="selection" widget="state_selection"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            5,
+            "should have five status selection widgets"
+        );
+        assert.containsOnce(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_red",
+            "should have one red status"
+        );
+        assert.containsOnce(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_green",
+            "should have one green status"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+
+        // Click on the status button to make the dropdown appear
+        let cell = target.querySelector("tbody td.o_state_selection_cell");
+        await click(
+            target.querySelector(".o_state_selection_cell .o_field_state_selection span.o_status")
+        );
+        assert.doesNotHaveClass(
+            cell.parentElement,
+            "o_selected_row",
+            "should not be in edit mode since we clicked on the state selection widget"
+        );
+        assert.containsOnce(target, ".dropdown-menu", "there should be a dropdown");
+        assert.containsN(
+            target,
+            ".dropdown-menu .dropdown-item",
+            2,
+            "there should be two options in the dropdown"
+        );
+
+        // Click on the first option, "Normal"
+        await click(target.querySelector(".dropdown-menu .dropdown-item"));
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            5,
+            "should still have five status selection widgets"
+        );
+        assert.containsNone(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_red",
+            "should now have no red status"
+        );
+        assert.containsOnce(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_green",
+            "should still have one green status"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+        assert.containsNone(target, "tr.o_selected_row", "should not be in edit mode");
+
+        // switch to edit mode and check the result
+        cell = target.querySelector("tbody td.o_state_selection_cell");
+        await click(cell);
+        assert.hasClass(cell.parentElement, "o_selected_row", "should now be in edit mode");
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            5,
+            "should still have five status selection widgets"
+        );
+        assert.containsNone(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_red",
+            "should now have no red status"
+        );
+        assert.containsOnce(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_green",
+            "should still have one green status"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+
+        // Click on the status button to make the dropdown appear
+        await click(
+            target.querySelector(".o_state_selection_cell .o_field_state_selection span.o_status")
+        );
+        assert.containsOnce(target, ".dropdown-menu", "there should be a dropdown");
+        assert.containsN(
+            target,
+            ".dropdown-menu .dropdown-item",
+            2,
+            "there should be two options in the dropdown"
+        );
+
+        // Click on another row
+        const lastCell = target.querySelectorAll("tbody td.o_state_selection_cell")[4];
+        await click(lastCell);
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown anymore");
+        const firstCell = target.querySelector("tbody td.o_state_selection_cell");
+        assert.doesNotHaveClass(
+            firstCell.parentElement,
+            "o_selected_row",
+            "first row should not be in edit mode anymore"
+        );
+        assert.hasClass(
+            lastCell.parentElement,
+            "o_selected_row",
+            "last row should be in edit mode"
+        );
+
+        // Click on the fourth status button to make the dropdown appear
+        await click(
+            target.querySelectorAll(
+                ".o_state_selection_cell .o_field_state_selection span.o_status"
+            )[3]
+        );
+        assert.containsOnce(target, ".dropdown-menu", "there should be a dropdown");
+        assert.containsN(
+            target,
+            ".dropdown-menu .dropdown-item",
+            2,
+            "there should be two options in the dropdown"
+        );
+
+        // Click on the last option, "Done"
+        await click(target, ".dropdown-menu .dropdown-item:last-child");
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown anymore");
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            5,
+            "should still have five status selection widgets"
+        );
+        assert.containsNone(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_red",
+            "should still have no red status"
+        );
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_green",
+            2,
+            "should now have two green status"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status",
+            5,
+            "should have five status selection widgets"
+        );
+        assert.containsNone(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_red",
+            "should have no red status"
+        );
+        assert.containsN(
+            target,
+            ".o_state_selection_cell .o_field_state_selection span.o_status.o_status_green",
+            2,
+            "should have two green status"
+        );
+        assert.containsNone(target, ".dropdown-menu", "there should not be a dropdown");
+    });
+
+    QUnit.test(
+        'StateSelectionField edited by the smart action "Set kanban state..."',
+        async function (assert) {
+            serviceRegistry.add("command", commandService);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="selection" widget="state_selection"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(target, ".o_status_red");
+
+            triggerHotkey("control+k");
+            await nextTick();
+            const idx = [...target.querySelectorAll(".o_command")]
+                .map((el) => el.textContent)
+                .indexOf("Set kanban state...ALT + SHIFT + R");
+            assert.ok(idx >= 0);
+
+            await click([...target.querySelectorAll(".o_command")][idx]);
+            await nextTick();
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
+                ["Normal", "Blocked", "Done"]
+            );
+            await click(target, "#o_command_2");
+            await nextTick();
+            assert.containsOnce(target, ".o_status_green");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/fields/statusbar_field_tests.js b/addons/web/static/tests/views/fields/statusbar_field_tests.js
new file mode 100644
index 00000000000..0c267c9127a
--- /dev/null
+++ b/addons/web/static/tests/views/fields/statusbar_field_tests.js
@@ -0,0 +1,525 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { commandService } from "@web/core/commands/command_service";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+import { makeFakeNotificationService } from "@web/../tests/helpers/mock_services";
+import {
+    click,
+    editInput,
+    getFixture,
+    nextTick,
+    patchWithCleanup,
+    triggerHotkey,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+const serviceRegistry = registry.category("services");
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean", default: true },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        qux: { string: "Qux", type: "float", digits: [16, 1] },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "trululu",
+                        },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        color: {
+                            type: "selection",
+                            selection: [
+                                ["red", "Red"],
+                                ["black", "Black"],
+                            ],
+                            default: "red",
+                            string: "Color",
+                        },
+                        user_id: { string: "User", type: "many2one", relation: "user" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44,
+                            p: [],
+                            trululu: 4,
+                            user_id: 17,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            p: [],
+                            trululu: 1,
+                            product_id: 37,
+                            user_id: 17,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            bar: false,
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            string: "one2many partners field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                            partner_ids: [1, 2],
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("StatusBarField");
+
+    QUnit.test("static statusbar widget on many2one field", async function (assert) {
+        serverData.models.partner.fields.trululu.domain = "[('bar', '=', True)]";
+        serverData.models.partner.records[1].bar = false;
+
+        let count = 0;
+        let fetchFieldCount = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" />
+                    </header>
+                </form>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "search_read") {
+                    count++;
+                    fetchFieldCount = kwargs.fields.length;
+                }
+            },
+        });
+
+        assert.strictEqual(
+            count,
+            1,
+            "once search_read should have been done to fetch the relational values"
+        );
+        assert.strictEqual(fetchFieldCount, 1, "search_read should only fetch field id");
+        assert.containsN(target, ".o_statusbar_status button:not(.dropdown-toggle)", 2);
+        assert.containsN(target, ".o_statusbar_status button:disabled", 2);
+        assert.hasClass(
+            target.querySelector('.o_statusbar_status button[data-value="4"]'),
+            "btn-primary"
+        );
+    });
+
+    QUnit.test("static statusbar widget on many2one field with domain", async function (assert) {
+        assert.expect(1);
+
+        patchWithCleanup(session, { uid: 17 });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" domain="[('user_id', '=', uid)]" />
+                    </header>
+                </form>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "search_read") {
+                    assert.deepEqual(
+                        kwargs.domain,
+                        ["|", ["id", "=", 4], ["user_id", "=", 17]],
+                        "search_read should sent the correct domain"
+                    );
+                }
+            },
+        });
+    });
+
+    QUnit.test("clickable statusbar widget on many2one field", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" options="{'clickable': 1}" />
+                    </header>
+                </form>`,
+        });
+
+        assert.hasClass(
+            target.querySelector(".o_statusbar_status button[data-value='4']"),
+            "btn-primary"
+        );
+        assert.hasClass(
+            target.querySelector(".o_statusbar_status button[data-value='4']"),
+            "disabled"
+        );
+
+        const clickableButtons = target.querySelectorAll(
+            ".o_statusbar_status button.btn-secondary:not(.dropdown-toggle):not(:disabled)"
+        );
+        assert.strictEqual(clickableButtons.length, 2);
+
+        await click(clickableButtons[clickableButtons.length - 1]); // (last is visually the first here (css))
+
+        assert.hasClass(
+            target.querySelector(".o_statusbar_status button[data-value='1']"),
+            "btn-primary"
+        );
+        assert.hasClass(
+            target.querySelector(".o_statusbar_status button[data-value='1']"),
+            "disabled"
+        );
+    });
+
+    QUnit.test("statusbar with no status", async function (assert) {
+        serverData.models.product.records = [];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="product_id" widget="statusbar" />
+                    </header>
+                </form>`,
+        });
+
+        assert.doesNotHaveClass(target.querySelector(".o_statusbar_status"), "o_field_empty");
+        assert.strictEqual(
+            target.querySelector(".o_statusbar_status").children.length,
+            0,
+            "statusbar widget should be empty"
+        );
+    });
+
+    QUnit.test("statusbar with tooltip for help text", async function (assert) {
+        serverData.models.partner.fields.product_id.help = "some info about the field";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="product_id" widget="statusbar" />
+                    </header>
+                </form>`,
+        });
+
+        assert.doesNotHaveClass(target.querySelector(".o_statusbar_status"), "o_field_empty");
+        const tooltipInfo = target.querySelector(".o_field_statusbar").attributes[
+            "data-tooltip-info"
+        ];
+        assert.strictEqual(
+            JSON.parse(tooltipInfo.value).field.help,
+            "some info about the field",
+            "tooltip text is present on the field"
+        );
+    });
+
+    QUnit.test("statusbar with required modifier", async function (assert) {
+        const mock = () => {
+            assert.step("Show error message");
+            return () => {};
+        };
+        registry.category("services").add("notification", makeFakeNotificationService(mock), {
+            force: true,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="product_id" widget="statusbar" required="1"/>
+                    </header>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_save");
+
+        assert.containsOnce(target, ".o_form_editable", "view should still be in edit");
+        assert.verifySteps(
+            ["Show error message"],
+            "should display an 'invalid fields' notification"
+        );
+    });
+
+    QUnit.test("statusbar with no value in readonly", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="product_id" widget="statusbar" />
+                    </header>
+                </form>`,
+        });
+
+        assert.doesNotHaveClass(target.querySelector(".o_statusbar_status"), "o_field_empty");
+        assert.containsN(target, ".o_statusbar_status button:visible", 2);
+    });
+
+    QUnit.test("statusbar with domain but no value (create mode)", async function (assert) {
+        serverData.models.partner.fields.trululu.domain = "[('bar', '=', True)]";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" />
+                    </header>
+                </form>`,
+        });
+
+        assert.containsN(target, ".o_statusbar_status button:disabled", 2);
+    });
+
+    QUnit.test(
+        "clickable statusbar should change m2o fetching domain in edit mode",
+        async function (assert) {
+            serverData.models.partner.fields.trululu.domain = "[('bar', '=', True)]";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <field name="trululu" widget="statusbar" options="{'clickable': 1}" />
+                        </header>
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+            assert.containsN(target, ".o_statusbar_status button:not(.dropdown-toggle)", 3);
+            const buttons = target.querySelectorAll(
+                ".o_statusbar_status button:not(.dropdown-toggle)"
+            );
+            await click(buttons[buttons.length - 1]);
+            assert.containsN(target, ".o_statusbar_status button:not(.dropdown-toggle)", 2);
+        }
+    );
+
+    QUnit.test(
+        "statusbar fold_field option and statusbar_visible attribute",
+        async function (assert) {
+            patchWithCleanup(browser, {
+                setTimeout: (fn) => fn(),
+            });
+
+            serverData.models.partner.records[0].bar = false;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <field name="trululu" widget="statusbar" options="{'fold_field': 'bar'}" />
+                            <field name="color" widget="statusbar" statusbar_visible="red" />
+                        </header>
+                    </form>`,
+            });
+
+            await click(target, ".o_form_button_edit");
+            await click(target, ".o_statusbar_status .dropdown-toggle");
+
+            const status = target.querySelectorAll(".o_statusbar_status");
+            assert.containsOnce(status[0], ".dropdown-item.disabled");
+            assert.containsOnce(status[status.length - 1], "button.disabled");
+        }
+    );
+
+    QUnit.test("statusbar: choose an item from the 'More' menu", async function (assert) {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+
+        serverData.models.partner.records[0].bar = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" options="{'clickable': '1', 'fold_field': 'bar'}" />
+                    </header>
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+        assert.strictEqual(
+            target.querySelector("[aria-label='Current state']").textContent,
+            "aaa",
+            "default status is 'aaa'"
+        );
+        assert.strictEqual(
+            document
+                .querySelector(".o_statusbar_status .dropdown-toggle.o_arrow_button")
+                .textContent.trim(),
+            "More",
+            "button has the correct text"
+        );
+
+        await click(target, ".o_statusbar_status .dropdown-toggle");
+        await click(target, ".o-dropdown .dropdown-item");
+        assert.strictEqual(
+            target.querySelector("[aria-label='Current state']").textContent,
+            "second record",
+            "status has changed to the selected dropdown item"
+        );
+    });
+
+    QUnit.test("statusbar with dynamic domain", async function (assert) {
+        serverData.models.partner.fields.trululu.domain = "[('int_field', '>', qux)]";
+        serverData.models.partner.records[2].int_field = 0;
+
+        let rpcCount = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" />
+                    </header>
+                    <field name="qux" />
+                    <field name="foo" />
+                </form>`,
+            mockRPC(route, { method }) {
+                if (method === "search_read") {
+                    rpcCount++;
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsN(target, ".o_statusbar_status button.disabled", 3);
+        assert.strictEqual(rpcCount, 1, "should have done 1 search_read rpc");
+        await editInput(target, ".o_field_widget[name='qux'] input", 9.5);
+        assert.containsN(target, ".o_statusbar_status button.disabled", 2);
+        assert.strictEqual(rpcCount, 2, "should have done 1 more search_read rpc");
+        await editInput(target, ".o_field_widget[name='qux'] input", "hey");
+        assert.strictEqual(rpcCount, 2, "should not have done 1 more search_read rpc");
+    });
+
+    QUnit.test('statusbar edited by the smart action "Move to stage..."', async function (assert) {
+        serviceRegistry.add("command", commandService);
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" options="{'clickable': '1'}"/>
+                    </header>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_field_widget");
+
+        triggerHotkey("control+k");
+        await nextTick();
+        const movestage = target.querySelectorAll(".o_command");
+        const idx = [...movestage]
+            .map((el) => el.textContent)
+            .indexOf("Move to Trululu...ALT + SHIFT + X");
+        assert.ok(idx >= 0);
+
+        await click(movestage[idx]);
+        await nextTick();
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
+            ["first record", "second record", "aaa"]
+        );
+        await click(target, "#o_command_2");
+    });
+});
diff --git a/addons/web/static/tests/views/fields/text_field_tests.js b/addons/web/static/tests/views/fields/text_field_tests.js
new file mode 100644
index 00000000000..4ab2837575f
--- /dev/null
+++ b/addons/web/static/tests/views/fields/text_field_tests.js
@@ -0,0 +1,554 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+import { click, getFixture, triggerEvent } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        bar: { string: "Bar", type: "boolean", default: true, searchable: true },
+                        txt: {
+                            string: "txt",
+                            type: "text",
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        qux: { string: "Qux", type: "float", digits: [16, 1], searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44444,
+                            txt: "some text",
+                        },
+                    ],
+                },
+                "ir.translation": {
+                    fields: {
+                        lang: { type: "char" },
+                        value: { type: "char" },
+                        res_id: { type: "integer" },
+                    },
+                    records: [
+                        {
+                            id: 99,
+                            res_id: 37,
+                            value: "",
+                            lang: "en_US",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("TextField");
+
+    QUnit.test("text fields are correctly rendered", async function (assert) {
+        serverData.models.partner.fields.foo.type = "text";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+        });
+
+        assert.containsOnce(target, ".o_field_text", "should have a text area");
+        assert.strictEqual(
+            target.querySelector(".o_field_text").textContent,
+            "yop",
+            "should be 'yop' in readonly"
+        );
+
+        await click(target, ".o_form_button_edit");
+        const textarea = target.querySelector(".o_field_text textarea");
+        assert.ok(textarea, "should have a text area");
+        assert.strictEqual(textarea.value, "yop", "should still be 'yop' in edit");
+
+        textarea.value = "hello";
+        await triggerEvent(textarea, null, "change");
+        assert.strictEqual(textarea.value, "hello", "should be 'hello' after first edition");
+
+        textarea.value = "hello world";
+        await triggerEvent(textarea, null, "change");
+
+        assert.strictEqual(
+            textarea.value,
+            "hello world",
+            "should be 'hello world' after second edition"
+        );
+
+        await click(target, ".o_form_button_save");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_text").textContent,
+            "hello world",
+            "should be 'hello world' after save"
+        );
+    });
+
+    QUnit.test("text fields in edit mode have correct height", async function (assert) {
+        serverData.models.partner.fields.foo.type = "text";
+        serverData.models.partner.records[0].foo = "f\nu\nc\nk\nm\ni\nl\ng\nr\no\nm";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+        });
+
+        const field = target.querySelector(".o_field_text");
+        assert.strictEqual(
+            field.offsetHeight,
+            field.scrollHeight,
+            "text field should not have a scroll bar"
+        );
+
+        await click(target, ".o_form_button_edit");
+
+        const textarea = target.querySelector(".o_field_text textarea");
+        assert.strictEqual(
+            textarea.clientHeight,
+            textarea.scrollHeight - Math.abs(textarea.scrollTop),
+            "textarea should not have a scroll bar"
+        );
+    });
+
+    QUnit.test("text fields in edit mode, no vertical resize", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: '<form><field name="txt"/></form>',
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.strictEqual(
+            window.getComputedStyle(target.querySelector("textarea")).resize,
+            "none",
+            "should not have vertical resize"
+        );
+    });
+
+    QUnit.test("text fields should have correct height after onchange", async function (assert) {
+        const damnLongText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Donec est massa, gravida eget dapibus ac, eleifend eget libero.
+            Suspendisse feugiat sed massa eleifend vestibulum. Sed tincidunt
+            velit sed lacinia lacinia. Nunc in fermentum nunc. Vestibulum ante
+            ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+            Curae; Nullam ut nisi a est ornare molestie non vulputate orci.
+            Nunc pharetra porta semper. Mauris dictum eu nulla a pulvinar. Duis
+            eleifend odio id ligula congue sollicitudin. Curabitur quis aliquet
+            nunc, ut aliquet enim. Suspendisse malesuada felis non metus
+            efficitur aliquet.`;
+
+        serverData.models.partner.records[0].txt = damnLongText;
+        serverData.models.partner.records[0].bar = false;
+        serverData.models.partner.onchanges = {
+            bar(obj) {
+                obj.txt = damnLongText;
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar" />
+                    <field name="txt" attrs="{'invisible': [('bar', '=', True)]}" />
+                </form>`,
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        let textarea = target.querySelector(".o_field_widget[name='txt'] textarea");
+        const initialHeight = textarea.offsetHeight;
+
+        textarea.value = "Short value";
+        await triggerEvent(textarea, null, "change");
+
+        assert.ok(textarea.offsetHeight < initialHeight, "Textarea height should have shrank");
+
+        await click(target, ".o_field_boolean[name='bar'] input");
+        await click(target, ".o_field_boolean[name='bar'] input");
+
+        textarea = target.querySelector(".o_field_widget[name='txt'] textarea");
+        assert.strictEqual(textarea.offsetHeight, initialHeight, "Textarea height should be reset");
+    });
+
+    QUnit.test("text fields in editable list have correct height", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.partner.records[0].txt = "a\nb\nc\nd\ne\nf";
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: '<list editable="top"><field name="foo"/><field name="txt"/></list>',
+        });
+
+        // Click to enter edit: in this test we specifically do not set
+        // the focus on the textarea by clicking on another column.
+        // The main goal is to test the resize is actually triggered in this
+        // particular case.
+        await click(target.querySelectorAll(".o_data_cell")[1]);
+        const textarea = target.querySelector("textarea:first-child");
+
+        // make sure the correct data is there
+        assert.strictEqual(textarea.value, serverData.models.partner.records[0].txt);
+
+        // make sure there is no scroll bar
+        assert.strictEqual(
+            textarea.clientHeight,
+            textarea.scrollHeight,
+            "textarea should not have a scroll bar"
+        );
+    });
+
+    QUnit.test("text fields in edit mode should resize on reset", async function (assert) {
+        serverData.models.partner.fields.foo.type = "text";
+
+        serverData.models.partner.onchanges = {
+            bar(obj) {
+                obj.foo = "a\nb\nc\nd\ne\nf";
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar" />
+                    <field name="foo" />
+                </form>`,
+        });
+
+        // edit the form
+        // trigger a textarea reset (through onchange) by clicking the box
+        // then check there is no scroll bar
+        await click(target, ".o_form_button_edit");
+        await click(target, "div[name='bar'] input");
+
+        const textarea = target.querySelector("textarea");
+        assert.strictEqual(
+            textarea.clientHeight,
+            textarea.scrollHeight,
+            "textarea should not have a scroll bar"
+        );
+    });
+
+    QUnit.test(
+        "autoresize of text fields is done when switching to edit mode",
+        async function (assert) {
+            serverData.models.partner.fields.text_field = { string: "Text field", type: "text" };
+            serverData.models.partner.fields.text_field.default = "some\n\nmulti\n\nline\n\ntext\n";
+            serverData.models.partner.records[0].text_field = "a\nb\nc\nd\ne\nf";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="text_field"/>
+                    </form>`,
+                resId: 1,
+            });
+
+            // switch to edit mode to ensure that autoresize is correctly done
+            await click(target.querySelector(".o_form_button_edit"));
+            let height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+            // focus the field to manually trigger autoresize
+            await triggerEvent(target, ".o_field_widget[name=text_field] textarea", "focus");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=text_field]").offsetHeight,
+                height,
+                "autoresize should have been done automatically at rendering"
+            );
+            // next assert simply tries to ensure that the textarea isn't stucked to
+            // its minimal size, even after being focused
+            assert.ok(height > 80, "textarea should have an height of at least 80px");
+
+            // save and create a new record to ensure that autoresize is correctly done
+            await click(target.querySelector(".o_form_button_save"));
+            await click(target.querySelector(".o_form_button_create"));
+            height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+            // focus the field to manually trigger autoresize
+            await triggerEvent(target, ".o_field_widget[name=text_field] textarea", "focus");
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=text_field]").offsetHeight,
+                height,
+                "autoresize should have been done automatically at rendering"
+            );
+            assert.ok(height > 80, "textarea should have an height of at least 80px");
+        }
+    );
+
+    QUnit.test("autoresize of text fields is done on notebook page show", async function (assert) {
+        serverData.models.partner.fields.text_field = { string: "Text field", type: "text" };
+        serverData.models.partner.fields.text_field.default = "some\n\nmulti\n\nline\n\ntext\n";
+        serverData.models.partner.records[0].text_field = "a\nb\nc\nd\ne\nf";
+        serverData.models.partner.fields.text_field_empty = {
+            string: "Text field",
+            type: "text",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="First Page">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Second Page">
+                                <field name="text_field"/>
+                            </page>
+                            <page string="Third Page">
+                                <field name="text_field_empty"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav .nav-link")[0], "active");
+
+        await click(target.querySelectorAll(".o_notebook .nav .nav-link")[1]);
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav .nav-link")[1], "active");
+
+        let height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+        assert.ok(height > 80, "textarea should have an height of at least 80px");
+
+        await click(target.querySelectorAll(".o_notebook .nav .nav-link")[2]);
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav .nav-link")[2], "active");
+
+        height = target.querySelector(".o_field_widget[name=text_field_empty]").offsetHeight;
+        assert.strictEqual(height, 50, "empty textarea should have height of 50px");
+    });
+
+    QUnit.test("text field translatable", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.partner.fields.txt.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="txt" />
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, { args, method }) {
+                if (route === "/web/dataset/call_button" && method === "translate_fields") {
+                    assert.deepEqual(
+                        args,
+                        ["partner", 1, "txt"],
+                        `should call "call_button" route`
+                    );
+                    return Promise.resolve({
+                        domain: [],
+                        context: { search_default_name: "partnes,foo" },
+                    });
+                }
+                if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                    return Promise.resolve([["en_US"], ["fr_BE"]]);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+
+        assert.containsOnce(
+            target,
+            ".o_field_text .o_field_translate",
+            "should have a translate button"
+        );
+        await click(target, ".o_field_text .o_field_translate");
+
+        assert.containsOnce(target, ".modal", "there should be a translation modal");
+    });
+
+    QUnit.test("text field translatable in create mode", async function (assert) {
+        serverData.models.partner.fields.txt.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="txt" />
+                        </group>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_text .o_field_translate",
+            "should have a translate button in create mode"
+        );
+    });
+
+    QUnit.test(
+        "go to next line (and not the next row) when pressing enter",
+        async function (assert) {
+            serverData.models.partner.fields.foo.type = "text";
+            await makeView({
+                type: "list",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <list editable="top">
+                        <field name="int_field" />
+                        <field name="foo" />
+                        <field name="qux" />
+                    </list>`,
+            });
+
+            await click(target.querySelector("tbody tr:first-child .o_list_text"));
+            const textarea = target.querySelector("textarea.o_input");
+            assert.containsOnce(target, textarea, "should have a text area");
+            assert.strictEqual(textarea.value, "yop", 'should still be "yop" in edit');
+
+            assert.strictEqual(
+                target.querySelector("textarea"),
+                document.activeElement,
+                "text area should have the focus"
+            );
+
+            // click on enter
+            await triggerEvent(textarea, null, "keydown", { key: "Enter" });
+            await triggerEvent(textarea, null, "keyup", { key: "Enter" });
+
+            assert.strictEqual(
+                target.querySelector("textarea"),
+                document.activeElement,
+                "text area should still have the focus"
+            );
+        }
+    );
+
+    // Firefox-specific
+    // Copying from <div style="white-space:pre-wrap"> does not keep line breaks
+    // See https://bugzilla.mozilla.org/show_bug.cgi?id=1390115
+    QUnit.test(
+        "copying text fields in RO mode should preserve line breaks",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="txt"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            // Copying from a div tag with white-space:pre-wrap doesn't work in Firefox
+            assert.strictEqual(
+                target.querySelector('[name="txt"]').firstElementChild.tagName.toLowerCase(),
+                "span",
+                "the field contents should be surrounded by a span tag"
+            );
+        }
+    );
+
+    QUnit.test("text field rendering in list view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree><field name="txt"/></tree>',
+        });
+
+        assert.containsOnce(
+            target,
+            "tbody td.o_list_text",
+            "should have a td with the .o_list_text class"
+        );
+    });
+
+    QUnit.test("field text in editable list view", async function (assert) {
+        serverData.models.partner.fields.foo.type = "text";
+
+        await makeView({
+            type: "list",
+            resModel: "partner",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/></tree>',
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+
+        assert.strictEqual(
+            target.querySelector("textarea"),
+            document.activeElement,
+            "text area should have the focus"
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/fields/url_field_tests.js b/addons/web/static/tests/views/fields/url_field_tests.js
new file mode 100644
index 00000000000..94593192269
--- /dev/null
+++ b/addons/web/static/tests/views/fields/url_field_tests.js
@@ -0,0 +1,299 @@
+/** @odoo-module **/
+
+import { click, editInput, getFixture } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+
+let serverData;
+let target;
+
+QUnit.module("Fields", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            trim: true,
+                        },
+                    },
+                    records: [
+                        {
+                            foo: "yop",
+                        },
+                        {
+                            foo: "blip",
+                        },
+                    ],
+                    onchanges: {},
+                },
+            },
+        };
+        target = getFixture();
+        setupViewRegistries();
+    });
+
+    QUnit.module("UrlField");
+
+    QUnit.test("UrlField in form view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="url"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        const matchingEl = target.querySelector("a.o_field_widget.o_form_uri");
+        assert.containsOnce(target, matchingEl, "should have a anchor with correct classes");
+        assert.hasAttrValue(matchingEl, "href", "http://yop", "should have proper href link");
+        assert.hasAttrValue(
+            matchingEl,
+            "target",
+            "_blank",
+            "should have target attribute set to _blank"
+        );
+        assert.strictEqual(matchingEl.textContent, "yop", "the value should be displayed properly");
+
+        // switch to edit mode and check the result
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(
+            target,
+            '.o_field_widget input[type="text"]',
+            "should have an input for the char field"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget input[type="text"]').value,
+            "yop",
+            "input should contain field value in edit mode"
+        );
+
+        await editInput(target, ".o_field_widget input[type='text']", "limbo");
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        const editedElement = target.querySelector("a.o_field_widget.o_form_uri");
+        assert.containsOnce(
+            target,
+            editedElement,
+            "should still have a anchor with correct classes"
+        );
+        assert.hasAttrValue(
+            editedElement,
+            "href",
+            "http://limbo",
+            "should have proper new href link"
+        );
+        assert.strictEqual(editedElement.textContent, "limbo", "the new value should be displayed");
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget input[type='text']", "/web/limbo");
+
+        await click(target.querySelector(".o_form_button_save"));
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name='foo'] a"),
+            "href",
+            "/web/limbo",
+            "shouldn't have change link"
+        );
+    });
+
+    QUnit.test("UrlField takes text from proper attribute", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="foo" widget="url" text="kebeclibre"/></form>',
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] a').textContent,
+            "kebeclibre",
+            "url text should come from the text attribute"
+        );
+    });
+
+    QUnit.test("UrlField: href attribute and website_path option", async function (assert) {
+        serverData.models.partner.fields.url1 = {
+            string: "Url 1",
+            type: "char",
+            default: "www.url1.com",
+        };
+        serverData.models.partner.fields.url2 = {
+            string: "Url 2",
+            type: "char",
+            default: "www.url2.com",
+        };
+        serverData.models.partner.fields.url3 = {
+            string: "Url 3",
+            type: "char",
+            default: "http://www.url3.com",
+        };
+        serverData.models.partner.fields.url4 = {
+            string: "Url 4",
+            type: "char",
+            default: "https://url4.com",
+        };
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="url1" widget="url"/>
+                    <field name="url2" widget="url" options="{'website_path': True}"/>
+                    <field name="url3" widget="url"/>
+                    <field name="url4" widget="url"/>
+                </form>`,
+            resId: 1,
+        });
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="url1"] a').getAttribute("href"),
+            "http://www.url1.com"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="url2"] a').getAttribute("href"),
+            "www.url2.com"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="url3"] a').getAttribute("href"),
+            "http://www.url3.com"
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="url4"] a').getAttribute("href"),
+            "https://url4.com"
+        );
+    });
+
+    QUnit.test("UrlField in editable list view", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree editable="bottom"><field name="foo" widget="url"/></tree>',
+        });
+        assert.strictEqual(
+            target.querySelectorAll("tbody td:not(.o_list_record_selector) a").length,
+            2,
+            "should have 2 cells with a link"
+        );
+        assert.containsN(
+            target,
+            ".o_field_url.o_field_widget[name='foo'] a",
+            2,
+            "should have 2 anchors with correct classes"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name='foo'] a"),
+            "href",
+            "http://yop",
+            "should have proper href link"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody td:not(.o_list_record_selector)").textContent,
+            "yop",
+            "value should be displayed properly as text"
+        );
+
+        // Edit a line and check the result
+        let cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        await click(cell);
+        assert.hasClass(cell.parentElement, "o_selected_row", "should be set as edit mode");
+        assert.strictEqual(
+            cell.querySelector("input").value,
+            "yop",
+            "should have the correct value in internal input"
+        );
+        await editInput(cell, "input", "brolo");
+
+        // save
+        await click(target.querySelector(".o_list_button_save"));
+        cell = target.querySelector("tbody td:not(.o_list_record_selector)");
+        assert.doesNotHaveClass(
+            cell.parentElement,
+            "o_selected_row",
+            "should not be in edit mode anymore"
+        );
+        const resultEl = target.querySelector(".o_field_widget[name='foo'] a");
+        assert.containsN(
+            target,
+            ".o_field_widget[name='foo'] a",
+            2,
+            "should still have anchors with correct classes"
+        );
+        assert.hasAttrValue(resultEl, "href", "http://brolo", "should have proper new href link");
+        assert.strictEqual(resultEl.textContent, "brolo", "value should be properly updated");
+    });
+
+    QUnit.test("UrlField with falsy value", async function (assert) {
+        serverData.models.partner.records[0].foo = false;
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: '<form><field name="foo" widget="url"/></form>',
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "[name=foo]");
+        assert.strictEqual(target.querySelector("[name=foo]").textContent, "");
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(target, ".o_field_widget[name=foo] input");
+        assert.strictEqual(target.querySelector("[name=foo] input").value, "");
+    });
+
+    QUnit.test("UrlField: url old content is cleaned on render edit", async function (assert) {
+        serverData.models.partner.fields.foo2 = { string: "Foo2", type: "char", default: "foo2" };
+        serverData.models.partner.onchanges.foo2 = function (record) {
+            record.foo = record.foo2;
+        };
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="url" attrs="{'readonly': True}" />
+                            <field name="foo2" />
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo]").textContent,
+            "yop",
+            "the starting value should be displayed properly"
+        );
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo2] input").value,
+            "foo2",
+            "input should contain field value in edit mode"
+        );
+        await editInput(target, ".o_field_widget[name=foo2] input", "bonjour");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo]").textContent,
+            "bonjour",
+            "Url widget should show the new value and not " +
+                target.querySelector(".o_field_widget[name=foo]").textContent
+        );
+    });
+});
diff --git a/addons/web/static/tests/views/form/form_compiler_tests.js b/addons/web/static/tests/views/form/form_compiler_tests.js
new file mode 100644
index 00000000000..5e5a3287cfc
--- /dev/null
+++ b/addons/web/static/tests/views/form/form_compiler_tests.js
@@ -0,0 +1,235 @@
+/** @odoo-module **/
+import { makeView } from "../helpers";
+import { setupViewRegistries } from "@web/../tests/views/helpers";
+import { FormCompiler } from "@web/views/form/form_compiler";
+import { registry } from "@web/core/registry";
+
+function compileTemplate(arch) {
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(arch, "text/xml");
+    const compiler = new FormCompiler();
+    return compiler.compile(xml.documentElement).outerHTML;
+}
+
+QUnit.assert.areEquivalent = function (template1, template2) {
+    if (template1.replace(/\s/g, "") === template2.replace(/\s/g, "")) {
+        QUnit.assert.ok(true);
+    } else {
+        QUnit.assert.strictEqual(template1, template2);
+    }
+};
+
+QUnit.assert.areContentEquivalent = function (template, content) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(template, "text/xml");
+    const templateContent = doc.documentElement.firstChild.innerHTML;
+    QUnit.assert.areEquivalent(templateContent, content);
+};
+
+QUnit.module("Form Compiler", () => {
+    QUnit.test("properly compile simple div", async (assert) => {
+        const arch = /*xml*/ `<form><div>lol</div></form>`;
+        const expected = /*xml*/ `
+            <t>
+                <div t-att-class="props.class" t-attf-class="{{props.record.isInEdition ? 'o_form_editable' : 'o_form_readonly'}}" class="o_form_nosheet" t-ref="compiled_view_root">
+                    <div>lol</div>
+                </div>
+            </t>`;
+
+        assert.areEquivalent(compileTemplate(arch), expected);
+    });
+
+    QUnit.test("properly compile simple div with field", async (assert) => {
+        const arch = /*xml*/ `<form><div class="someClass">lol<field name="display_name"/></div></form>`;
+        const expected = /*xml*/ `
+            <t>
+                <div t-att-class="props.class" t-attf-class="{{props.record.isInEdition ? 'o_form_editable' : 'o_form_readonly'}}" class="o_form_nosheet" t-ref="compiled_view_root">
+                    <div class="someClass">
+                        lol
+                        <Field id="'display_name'" name="'display_name'" record="props.record" fieldInfo="props.archInfo.fieldNodes['display_name']"/>
+                    </div>
+                </div>
+            </t>`;
+
+        assert.areEquivalent(compileTemplate(arch), expected);
+    });
+
+    QUnit.test("properly compile inner groups", async (assert) => {
+        const arch = /*xml*/ `
+            <form>
+                <group>
+                    <group><field name="display_name"/></group>
+                    <group><field name="charfield"/></group>
+                </group>
+            </form>`;
+        const expected = /*xml*/ `
+            <OuterGroup>
+               <t t-set-slot="item_0" type="'item'" sequence="0" t-slot-scope="scope" itemSpan="1">
+                  <InnerGroup class="scope &amp;&amp; scope.className">
+                     <t t-set-slot="item_0" type="'item'" sequence="0" t-slot-scope="scope" props="{id:'display_name',fieldName:'display_name',record:props.record,string:props.record.fields.display_name.string,fieldInfo:props.archInfo.fieldNodes['display_name']}" Component="constructor.components.FormLabel" subType="'item_component'" itemSpan="2">
+                        <Field id="'display_name'" name="'display_name'" record="props.record" fieldInfo="props.archInfo.fieldNodes['display_name']" class="scope &amp;&amp; scope.className" />
+                     </t>
+                  </InnerGroup>
+               </t>
+               <t t-set-slot="item_1" type="'item'" sequence="1" t-slot-scope="scope" itemSpan="1">
+                  <InnerGroup class="scope &amp;&amp; scope.className">
+                     <t t-set-slot="item_0" type="'item'" sequence="0" t-slot-scope="scope" props="{id:'charfield',fieldName:'charfield',record:props.record,string:props.record.fields.charfield.string,fieldInfo:props.archInfo.fieldNodes['charfield']}" Component="constructor.components.FormLabel" subType="'item_component'" itemSpan="2">
+                        <Field id="'charfield'" name="'charfield'" record="props.record" fieldInfo="props.archInfo.fieldNodes['charfield']" class="scope &amp;&amp; scope.className" />
+                     </t>
+                  </InnerGroup>
+               </t>
+            </OuterGroup>`;
+
+        assert.areContentEquivalent(compileTemplate(arch), expected);
+    });
+
+    QUnit.test("properly compile notebook", async (assert) => {
+        const arch = /*xml*/ `
+                <form>
+                    <notebook>
+                        <page name="p1" string="Page1"><field name="charfield"/></page>
+                        <page name="p2" string="Page2"><field name="display_name"/></page>
+                    </notebook>
+                </form>`;
+
+        const expected = /*xml*/ `
+            <Notebook>
+                <t t-set-slot="page_1" title="\`Page1\`" name="\`p1\`" isVisible="true">
+                    <Field id="'charfield'" name="'charfield'" record="props.record" fieldInfo="props.archInfo.fieldNodes['charfield']"/>
+                </t>
+                <t t-set-slot="page_2" title="\`Page2\`" name="\`p2\`" isVisible="true">
+                    <Field id="'display_name'" name="'display_name'" record="props.record" fieldInfo="props.archInfo.fieldNodes['display_name']"/>
+               </t>
+           </Notebook>`;
+
+        assert.areContentEquivalent(compileTemplate(arch), expected);
+    });
+
+    QUnit.test("properly compile field with placeholder", async (assert) => {
+        const arch = /*xml*/ `
+            <form>
+                <field name="display_name" placeholder="e.g. Contact's Name or //someinfo..."/>
+            </form>`;
+
+        const expected = /*xml*/ `
+            <Field id="'display_name'" name="'display_name'" record="props.record" fieldInfo="props.archInfo.fieldNodes['display_name']" placeholder="\`e.g. Contact's Name or //someinfo...\`"/>
+        `;
+
+        assert.areContentEquivalent(compileTemplate(arch), expected);
+    });
+
+    QUnit.test("properly compile invisible", async (assert) => {
+        // cf python side: def transfer_node_to_modifiers
+        // modifiers' string are evaluated to their boolean or array form
+        // So the following arch may actually be written as:
+        // ```<form>
+        //      <field name="display_name" invisible="1" />
+        //      <div class="visible3" invisible="0"/>
+        //      <div modifiers="{'invisible': [['display_name', '=', 'take']]}"/>
+        //    </form>````
+        const arch = /*xml*/ `
+            <form>
+                <field name="display_name" modifiers="{&quot;invisible&quot;: true}" />
+                <div class="visible3" modifiers="{&quot;invisible&quot;: false}"/>
+                <div modifiers="{&quot;invisible&quot;: [[&quot;display_name&quot;, &quot;=&quot;, &quot;take&quot;]]}"/>
+            </form>`;
+
+        const expected = /*xml*/ `
+            <div class="visible3" />
+            <div t-if="!evalDomainFromRecord(props.record,[[&quot;display_name&quot;,&quot;=&quot;,&quot;take&quot;]])" />
+        `;
+
+        assert.areContentEquivalent(compileTemplate(arch), expected);
+    });
+});
+
+QUnit.module("Form Renderer", (hooks) => {
+    let serverData;
+
+    hooks.beforeEach(() => {
+        setupViewRegistries();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { type: "char" },
+                        charfield: { type: "char" },
+                    },
+                    records: [
+                        { id: 1, display_name: "firstRecord", charfield: "content of charfield" },
+                    ],
+                },
+            },
+        };
+    });
+
+    QUnit.test("compile notebook with modifiers", async (assert) => {
+        assert.expect(0);
+
+        serverData.views = {
+            "partner,1,form": /*xml*/ `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page name="p1" attrs="{'invisible': [['display_name', '=', 'lol']]}"><field name="charfield"/></page>
+                            <page name="p2"><field name="display_name"/></page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+        };
+
+        await makeView({
+            serverData,
+            resModel: "partner",
+            type: "form",
+            resId: 1,
+        });
+    });
+
+    QUnit.test("compile header and buttons", async (assert) => {
+        assert.expect(0);
+
+        serverData.views = {
+            "partner,1,form": /*xml*/ `
+                <form>
+                    <header>
+                         <button string="ActionButton" class="oe_highlight" name="action_button" type="object"/>
+                     </header>
+                </form>`,
+        };
+
+        await makeView({
+            serverData,
+            resModel: "partner",
+            type: "form",
+            resId: 1,
+        });
+    });
+
+    QUnit.test("render field with placeholder", async (assert) => {
+        assert.expect(1);
+
+        class CharField extends owl.Component {
+            setup() {
+                assert.strictEqual(this.props.placeholder, "e.g. Contact's Name or //someinfo...");
+            }
+        }
+        CharField.template = owl.xml`<div/>`;
+
+        registry.category("fields").add("char", CharField, { force: true });
+
+        serverData.views = {
+            "partner,1,form": /*xml*/ `
+                <form>
+                    <field name="display_name" placeholder="e.g. Contact's Name or //someinfo..." />
+                </form>`,
+        };
+
+        await makeView({
+            serverData,
+            resModel: "partner",
+            type: "form",
+            resId: 1,
+        });
+    });
+});
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
new file mode 100644
index 00000000000..6734abecd58
--- /dev/null
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -0,0 +1,10805 @@
+/** @odoo-module **/
+
+import { makeFakeNotificationService } from "@web/../tests/helpers/mock_services";
+import {
+    click,
+    clickEdit,
+    clickSave,
+    dragAndDrop,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    makeDeferred,
+    mouseEnter,
+    nextTick,
+    patchTimeZone,
+    patchWithCleanup,
+    selectDropdownItem,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
+import { toggleActionMenu, toggleGroupByMenu, toggleMenuItem } from "@web/../tests/search/helpers";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import { tooltipService } from "@web/core/tooltip/tooltip_service";
+import { CharField } from "@web/views/fields/char/char_field";
+import { FormController } from "@web/views/form/form_controller";
+import { session } from "@web/session";
+import legacySession from "web.session";
+import { scrollerService } from "@web/core/scroller_service";
+import BasicModel from "web.BasicModel";
+import { localization } from "@web/core/l10n/localization";
+
+const fieldRegistry = registry.category("fields");
+const serviceRegistry = registry.category("services");
+const widgetRegistry = registry.category("view_widgets");
+
+let target;
+let serverData;
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char", default: "My little Foo Value" },
+                        bar: { string: "Bar", type: "boolean" },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        qux: { string: "Qux", type: "float", digits: [16, 1] },
+                        p: { string: "one2many field", type: "one2many", relation: "partner" },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                        timmy: { string: "pokemon", type: "many2many", relation: "partner_type" },
+                        product_id: { string: "Product", type: "many2one", relation: "product" },
+                        priority: {
+                            string: "Priority",
+                            type: "selection",
+                            selection: [
+                                [1, "Low"],
+                                [2, "Medium"],
+                                [3, "High"],
+                            ],
+                            default: 1,
+                        },
+                        state: {
+                            string: "State",
+                            type: "selection",
+                            selection: [
+                                ["ab", "AB"],
+                                ["cd", "CD"],
+                                ["ef", "EF"],
+                            ],
+                        },
+                        date: { string: "Some Date", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        product_ids: {
+                            string: "one2many product",
+                            type: "one2many",
+                            relation: "product",
+                        },
+                        reference: {
+                            string: "Reference Field",
+                            type: "reference",
+                            selection: [
+                                ["product", "Product"],
+                                ["partner_type", "Partner Type"],
+                                ["partner", "Partner"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.44,
+                            p: [],
+                            timmy: [],
+                            trululu: 4,
+                            state: "ab",
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            p: [],
+                            timmy: [],
+                            trululu: 1,
+                            state: "cd",
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            state: "ef",
+                        },
+                        {
+                            id: 5,
+                            display_name: "aaa",
+                            foo: "",
+                            bar: false,
+                            state: "ef",
+                        },
+                    ],
+                    onchanges: {},
+                },
+                product: {
+                    fields: {
+                        display_name: { string: "Product Name", type: "char" },
+                        name: { string: "Product Name", type: "char" },
+                        partner_type_id: {
+                            string: "Partner type",
+                            type: "many2one",
+                            relation: "partner_type",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                partner_type: {
+                    fields: {
+                        name: { string: "Partner Type", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 12, display_name: "gold", color: 2 },
+                        { id: 14, display_name: "silver", color: 5 },
+                    ],
+                },
+                "ir.translation": {
+                    fields: {
+                        lang_code: { type: "char" },
+                        value: { type: "char" },
+                        res_id: { type: "integer" },
+                    },
+                    records: [
+                        {
+                            id: 99,
+                            res_id: 12,
+                            value: "",
+                            lang_code: "en_US",
+                        },
+                    ],
+                },
+                user: {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        partner_ids: {
+                            string: "one2many partners field",
+                            type: "one2many",
+                            relation: "partner",
+                            relation_field: "user_id",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 17,
+                            name: "Aline",
+                            partner_ids: [1],
+                        },
+                        {
+                            id: 19,
+                            name: "Christine",
+                        },
+                    ],
+                },
+                "res.company": {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                    },
+                },
+            },
+
+            actions: {
+                1: {
+                    id: 1,
+                    name: "Partners Action 1",
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [
+                        [false, "kanban"],
+                        [false, "form"],
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+        serviceRegistry.add("tooltip", tooltipService);
+    });
+
+    QUnit.module("FormView");
+
+    QUnit.test("simple form rendering", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div class="test" style="opacity: 0.5;">some html<span>aa</span></div>
+                    <sheet>
+                        <group>
+                            <group style="background-color: red">
+                                <field name="foo" style="color: blue;"/>
+                                <field name="bar"/>
+                                <field name="int_field" string="f3_description"/>
+                                <field name="qux"/>
+                            </group>
+                            <group>
+                                <div class="hello"></div>
+                            </group>
+                        </group>
+                        <notebook>
+                            <page string="Partner Yo">
+                                <field name="p">
+                                    <tree>
+                                        <field name="foo"/>
+                                        <field name="bar"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(target, "div.test");
+        assert.hasAttrValue(
+            target.querySelector("div.test"),
+            "style",
+            "opacity: 0.5;",
+            "should keep the inline style on html elements"
+        );
+        assert.containsOnce(target, "label:contains(Foo)");
+        assert.containsOnce(target, "span:contains(blip)");
+        assert.hasAttrValue(
+            target.querySelector(".o_group .o_group"),
+            "style",
+            "background-color: red",
+            "should apply style attribute on groups"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name=foo]"),
+            "style",
+            "color: blue;",
+            "should apply style attribute on fields"
+        );
+        assert.containsNone(target, "label:contains(something_id)");
+        assert.containsOnce(target, "label:contains(f3_description)");
+        assert.containsOnce(target, "div.o_field_one2many table");
+        assert.containsOnce(
+            target,
+            "tbody td:not(.o_list_record_selector) .custom-checkbox input:checked"
+        );
+        assert.containsNone(target, "label.o_form_label_empty:contains(timmy)");
+    });
+
+    QUnit.test("duplicate fields rendered properly", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <group>
+                            <field name="foo" class="foo_1" attrs="{'invisible': [('bar','=',False)]}"/>
+                            <field name="foo" class="foo_2" attrs="{'invisible': [('bar','=',True)]}"/>
+                            <field name="foo" class="foo_3"/>
+                            <field name="int_field" class="int_field_1" attrs="{'readonly': [('bar','=',True)]}"/>
+                            <field name="int_field" class="int_field_2" attrs="{'readonly': [('bar','=',False)]}"/>
+                            <field name="bar"/>
+                        </group>
+                    </group>
+                </form>`,
+        });
+
+        assert.containsNone(target, ".o_field_widget[name=foo].foo_1");
+        assert.containsOnce(target, ".o_field_widget[name=foo].foo_2");
+        assert.containsOnce(target, ".o_field_widget[name=foo].foo_3");
+
+        await editInput(target, ".o_field_widget[name=foo].foo_3 input", "hello");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo].foo_2 input").value,
+            "hello"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget[name=int_field].int_field_1"),
+            "o_readonly_modifier"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=int_field].int_field_2"),
+            "o_readonly_modifier"
+        );
+        assert.containsOnce(target, ".int_field_1 input");
+        assert.containsOnce(target, ".int_field_2 span");
+
+        await click(target.querySelector(".o_field_widget[name=bar] input"));
+
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=int_field].int_field_1"),
+            "o_readonly_modifier"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget[name=int_field].int_field_2"),
+            "o_readonly_modifier"
+        );
+        assert.containsOnce(target, ".int_field_1 span");
+        assert.containsOnce(target, ".int_field_2 input");
+    });
+
+    QUnit.test("duplicate fields rendered properly (one2many)", async function (assert) {
+        serverData.models.partner.records.push({ id: 6, p: [1] });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="bottom">
+                            <field name="foo"/>
+                        </tree>
+                        <form/>
+                    </field>
+                    <field name="p" readonly="True">
+                        <tree editable="bottom">
+                            <field name="foo"/>
+                        </tree>
+                        <form/>
+                    </field>
+                </form>`,
+            resId: 6,
+        });
+
+        await clickEdit(target);
+
+        assert.containsN(target, ".o_field_one2many", 2);
+        assert.doesNotHaveClass(
+            target.querySelectorAll(".o_field_one2many")[0],
+            "o_readonly_modifier"
+        );
+        assert.hasClass(target.querySelectorAll(".o_field_one2many")[1], "o_readonly_modifier");
+
+        await click(target.querySelector(".o_field_one2many .o_data_cell"));
+        assert.containsOnce(target.querySelector(".o_field_one2many"), ".o_selected_row");
+        assert.strictEqual(
+            target.querySelector(
+                ".o_field_one2many .o_selected_row .o_field_widget[name=foo] input"
+            ).value,
+            "yop"
+        );
+        assert.strictEqual(
+            target
+                .querySelectorAll(".o_field_one2many")[1]
+                .querySelector(".o_data_row .o_field_widget[name=foo] input").value, // FIXME: ideally, this row should not be in edition
+            "yop"
+        );
+        await editInput(
+            target.querySelector(".o_field_one2many"),
+            ".o_selected_row .o_field_widget[name=foo] input",
+            "hello"
+        );
+        assert.strictEqual(
+            target
+                .querySelectorAll(".o_field_one2many")[1]
+                .querySelector(".o_data_row .o_field_widget[name=foo] input").value, // FIXME: ideally, this row should not be in edition
+            "hello"
+        );
+        await click(target.querySelector(".o_field_one2many .o_field_x2many_list_row_add a"));
+        assert.strictEqual(
+            target.querySelector(
+                '.o_field_one2many .o_selected_row .o_field_widget[name="foo"] input'
+            ).value,
+            "My little Foo Value"
+        );
+        assert.strictEqual(
+            target
+                .querySelectorAll(".o_field_one2many")[1]
+                .querySelector(".o_data_row .o_field_widget[name=foo] input").value, // FIXME: ideally, this row should not be in edition
+            "My little Foo Value"
+        );
+    });
+
+    QUnit.test("attributes are transferred on async widgets", async function (assert) {
+        const def = makeDeferred();
+        class AsyncField extends CharField {
+            willStart() {
+                return def;
+            }
+        }
+        fieldRegistry.add("asyncwidget", AsyncField);
+
+        const viewProm = makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo" style="color: blue;" widget="asyncwidget"/></form>`,
+            resId: 2,
+        });
+        await nextTick();
+        def.resolve();
+        await viewProm;
+        assert.hasAttrValue(
+            target.querySelector(".o_field_widget[name=foo]"),
+            "style",
+            "color: blue;",
+            "should apply style attribute on fields"
+        );
+    });
+
+    QUnit.test("placeholder attribute on input", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><input placeholder="chimay"/></form>',
+            resId: 2,
+        });
+
+        assert.containsOnce(target, 'input[placeholder="chimay"]');
+    });
+
+    QUnit.test("decoration works on widgets", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field"/>
+                    <field name="display_name" decoration-danger="int_field &lt; 5"/>
+                    <field name="foo" decoration-danger="int_field &gt; 5"/>
+                </form>`,
+            resId: 2,
+        });
+        assert.doesNotHaveClass(
+            target.querySelector('.o_field_widget[name="display_name"]'),
+            "text-danger"
+        );
+        assert.hasClass(target.querySelector('.o_field_widget[name="foo"]'), "text-danger");
+    });
+
+    QUnit.test("decoration on widgets are reevaluated if necessary", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="int_field"/>
+                    <field name="display_name" decoration-danger="int_field &lt; 5"/>
+                </form>`,
+            resId: 2,
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.doesNotHaveClass(
+            target.querySelector('.o_field_widget[name="display_name"]'),
+            "text-danger"
+        );
+        await editInput(target, ".o_field_widget[name=int_field] input", 3);
+        assert.hasClass(
+            target.querySelector('.o_field_widget[name="display_name"]'),
+            "text-danger"
+        );
+    });
+
+    QUnit.test("decoration on widgets works on same widget", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="int_field" decoration-danger="int_field &lt; 5"/></form>`,
+            resId: 2,
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.doesNotHaveClass(
+            target.querySelector('.o_field_widget[name="int_field"]'),
+            "text-danger"
+        );
+        await editInput(target, ".o_field_widget[name=int_field] input", 3);
+        assert.hasClass(target.querySelector('.o_field_widget[name="int_field"]'), "text-danger");
+    });
+
+    QUnit.test("only necessary fields are fetched with correct context", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "read") {
+                    assert.deepEqual(
+                        args.args[1],
+                        ["foo", "display_name"],
+                        "should only fetch requested fields"
+                    );
+                    assert.strictEqual(
+                        args.kwargs.context.bin_size,
+                        true,
+                        "bin_size should always be in the context"
+                    );
+                }
+            },
+        });
+    });
+
+    QUnit.test("group rendering", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "table.o_inner_group");
+    });
+
+    QUnit.test("group containing both a field and a group", async function (assert) {
+        // The purpose of this test is to check that classnames defined in a
+        // field widget and those added by the form renderer are correctly
+        // combined. For instance, the renderer adds className 'o_group_col_x'
+        // on outer group's children (an outer group being a group that contains
+        // at least a group).
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="foo"/>
+                        <group>
+                            <field name="int_field"/>
+                        </group>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_group .o_field_widget[name=foo]");
+        assert.containsOnce(target, ".o_group .o_inner_group .o_field_widget[name=int_field]");
+
+        assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_field_char");
+        assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_group_col_6");
+    });
+
+    QUnit.test("Form and subview with _view_ref contexts", async function (assert) {
+        assert.expect(3);
+
+        serverData.models.product.fields.partner_type_ids = {
+            string: "one2many field",
+            type: "one2many",
+            relation: "partner_type",
+        };
+        serverData.models.product.records = [
+            { id: 1, name: "Tromblon", partner_type_ids: [12, 14] },
+        ];
+        serverData.models.partner.records[0].product_id = 1;
+
+        // This is an old test, written before "get_views" (formerly "load_views") automatically
+        // inlines x2many subviews. As the purpose of this test is to assert that the js fetches
+        // the correct sub view when it is not inline (which can still happen in nested form views),
+        // we bypass the inline mecanism of "get_views" by setting widget="one2many" on the field.
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="name"/>
+                    <field name="partner_type_ids" widget="one2many" context="{'tree_view_ref': 'some_other_tree_view'}"/>
+                </form>`,
+
+            "partner_type,false,list": `<tree><field name="color"/></tree>`,
+            "product,false,search": "<search></search>",
+            "partner,false,form": `
+                <form>
+                    <field name="name"/>
+                    <field name="product_id" context="{'tree_view_ref': 'some_tree_view'}"/>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "get_views") {
+                const context = args.kwargs.context;
+                if (args.model === "product") {
+                    assert.strictEqual(
+                        context.tree_view_ref,
+                        "some_tree_view",
+                        "The correct _view_ref should have been sent to the server, first time"
+                    );
+                }
+                if (args.model === "partner_type") {
+                    assert.strictEqual(
+                        context.base_model_name,
+                        "product",
+                        "The correct base_model_name should have been sent to the server for the subview"
+                    );
+                    assert.strictEqual(
+                        context.tree_view_ref,
+                        "some_other_tree_view",
+                        "The correct _view_ref should have been sent to the server for the subview"
+                    );
+                }
+            }
+            if (args.method === "get_formview_action") {
+                return Promise.resolve({
+                    res_id: 1,
+                    type: "ir.actions.act_window",
+                    target: "current",
+                    res_model: args.model,
+                    context: args.kwargs.context,
+                    view_mode: "form",
+                    views: [[false, "form"]],
+                });
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, {
+            res_id: 1,
+            type: "ir.actions.act_window",
+            target: "current",
+            res_model: "partner",
+            view_mode: "form",
+            views: [[false, "form"]],
+        });
+
+        await click(target.querySelector('.o_field_widget[name="product_id"] a'));
+    });
+
+    QUnit.test("invisible fields are properly hidden", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            // the arch contains an x2many field without inline view: as it is always invisible,
+            // the view should not be fetched. we don't specify any view in this test, so if it
+            // ever tries to fetch it, it will crash, indicating that this is wrong.
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" invisible="1"/>
+                            <field name="bar"/>
+                        </group>
+                        <field name="qux" invisible="1"/>
+                        <field name="p" invisible="True"/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(target, "label:contains(Foo)");
+        assert.containsNone(target, ".o_field_widget[name=foo]");
+        assert.containsNone(target, ".o_field_widget[name=qux]");
+        assert.containsNone(target, ".o_field_widget[name=p]");
+    });
+
+    QUnit.test("invisible elements are properly hidden", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header invisible="1">
+                        <button name="myaction" string="coucou"/>
+                    </header>
+                    <sheet>
+                    <group>
+                        <group string="invgroup" invisible="1">
+                            <field name="foo"/>
+                        </group>
+                        <group string="visgroup">
+                            <field name="bar"/>
+                        </group>
+                    </group>
+                    <notebook>
+                        <page string="visible"/>
+                        <page string="invisible" invisible="1"/>
+                    </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+        assert.containsNone(target, ".o_form_statusbar button:contains(coucou)");
+        assert.containsOnce(target, ".o_notebook li a:contains(visible)");
+        assert.containsNone(target, ".o_notebook li a:contains(invisible)");
+        assert.containsOnce(target, "table.o_inner_group td:contains(visgroup)");
+        assert.containsNone(target, "table.o_inner_group td:contains(invgroup)");
+    });
+
+    QUnit.test(
+        "invisible attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            // we set the value bar to simulate a falsy boolean value.
+            serverData.models.partner.records[0].bar = false;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="int_field"/>
+                                <field name="timmy" invisible="1"/>
+                                <field name="foo" attrs='{"invisible": [("int_field", "=", 10)]}'/>
+                                <field name="bar" attrs='{"invisible": [("bar", "=", False), ("timmy", "=", [])]}'/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(target, ".o_field_widget[name=int_field]");
+            assert.containsNone(target, ".o_field_widget[name=timmy]");
+            assert.containsNone(target, ".o_field_widget[name=foo]");
+            assert.containsNone(target, ".o_field_widget[name=bar]");
+
+            await editInput(target, ".o_field_widget[name=int_field] input", 44);
+            assert.containsOnce(target, ".o_field_widget[name=int_field]");
+            assert.containsNone(target, ".o_field_widget[name=timmy]");
+            assert.containsOnce(target, ".o_field_widget[name=foo]");
+            assert.containsNone(target, ".o_field_widget[name=bar]");
+        }
+    );
+
+    QUnit.test(
+        "properly handle modifiers and attributes on notebook tags",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="int_field"/>
+                            <notebook class="new_class" attrs='{"invisible": [["int_field", "=", 10]]}'>
+                                <page string="Foo">
+                                    <field name="foo"/>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsNone(target, ".o_notebook");
+
+            await click(target.querySelector(".o_form_button_edit"));
+            await editInput(target, ".o_field_widget[name=int_field] input", 44);
+
+            assert.containsOnce(target, ".o_notebook");
+            assert.hasClass(target.querySelector(".o_notebook"), "new_class");
+        }
+    );
+
+    QUnit.test("empty notebook", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        // Does not change when switching state
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsNone(target, ":scope .o_notebook .nav");
+
+        // Does not change when coming back to initial state
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsNone(target, ":scope .o_notebook .nav");
+    });
+
+    QUnit.test("notebook name transferred to DOM", async function (assert) {
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 1,
+            arch: `<form>
+                        <sheet>
+                            <notebook>
+                                <page name="choucroute" string="Choucroute">
+                                    <field name="foo"/>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+        });
+        assert.hasClass(
+            target.querySelector(".o_notebook .nav .nav-link[name='choucroute']"),
+            "active"
+        );
+    });
+
+    QUnit.test("no visible page", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <notebook>
+                            <page string="Foo" invisible="1">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Bar" invisible="1">
+                                <field name="bar"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(target, ".o_notebook_headers .nav-item");
+        assert.containsNone(target, ".tab-content .tab-pane");
+
+        // Does not change when switching state
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsNone(target, ".o_notebook_headers .nav-item");
+        assert.containsNone(target, ".tab-content .tab-pane");
+
+        // Does not change when coming back to initial state
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsNone(target, ".o_notebook_headers .nav-item");
+        assert.containsNone(target, ".tab-content .tab-pane");
+    });
+
+    QUnit.test("notebook: pages with invisible modifiers", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="bar"/>
+                        <notebook>
+                            <page string="A" attrs='{"invisible": [["bar", "=", false]]}'>
+                                <field name="foo"/>
+                            </page>
+                            <page string="B" attrs='{"invisible": [["bar", "=", true]]}'>
+                                <field name="int_field"/>
+                            </page>
+                            <page string="C">
+                                <field name="qux"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsN(target, ".o_notebook .nav-link", 2);
+        assert.containsOnce(target, ".o_notebook .nav .nav-link.active");
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+        assert.strictEqual(target.querySelector(".o_notebook .nav-link.active").textContent, "A");
+
+        await click(target.querySelector(".o_field_widget[name=bar] input"));
+
+        assert.containsN(target, ".o_notebook .nav-link", 2);
+        assert.containsOnce(target, ".o_notebook .nav .nav-link.active");
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+        assert.strictEqual(target.querySelector(".o_notebook .nav-link.active").textContent, "B");
+    });
+
+    QUnit.test("invisible attrs on first notebook page", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="int_field"/>
+                        <notebook>
+                            <page string="Foo" attrs='{"invisible": [["int_field", "=", 44]]}'>
+                                <field name="foo"/>
+                            </page>
+                            <page string="Bar">
+                                <field name="bar"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsN(target, ".o_notebook .nav .nav-link", 2);
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+        assert.hasClass(target.querySelector(".o_notebook .tab-content .tab-pane"), "active");
+
+        await editInput(target, ".o_field_widget[name=int_field] input", 44);
+        assert.containsOnce(target, ".o_notebook .nav .nav-link");
+        assert.containsOnce(target, ".o_notebook .tab-content .tab-pane");
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+        assert.hasClass(target.querySelector(".o_notebook .tab-content .tab-pane"), "active");
+    });
+
+    QUnit.test("invisible attrs on notebook page which has only one page", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="bar"/>
+                        <notebook>
+                            <page string="Foo" attrs='{"invisible": [["bar", "!=", false]]}'>
+                                <field name="foo"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsNone(target, ".o_notebook");
+
+        // enable checkbox
+        await click(target.querySelector(".o_field_boolean input"));
+        assert.containsOnce(target, ".o_notebook .nav .nav-link");
+        assert.containsOnce(target, ".o_notebook .tab-content .tab-pane");
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+        assert.hasClass(target.querySelector(".o_notebook .tab-content .tab-pane"), "active");
+    });
+
+    QUnit.test("first notebook page invisible", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id"/>
+                        <notebook>
+                            <page string="Foo" invisible="1">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Bar">
+                                <field name="bar"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_notebook .nav .nav-link");
+        assert.hasClass(target.querySelector(".o_notebook .nav .nav-link"), "active");
+    });
+
+    QUnit.test("hide notebook element if all pages hidden", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="bar"/>
+                        <notebook class="new_class">
+                            <page string="Foo" attrs="{'invisible': [['bar', '=', true]]}">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Qux" invisible="1">
+                                <field name="qux"/>
+                            </page>
+                            <page string="IntField" attrs="{'invisible': [['bar', '=', true]]}">
+                                <field name="int_field"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+        });
+
+        assert.containsN(target, ".o_notebook .nav .nav-link", 2);
+
+        await click(target.querySelector(".o_field_boolean input"));
+        assert.containsNone(target, ".o_notebook");
+    });
+
+    QUnit.test("autofocus on second notebook page", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id"/>
+                        <notebook>
+                            <page string="Choucroute">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Cassoulet" autofocus="autofocus">
+                                <field name="bar"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_notebook .nav .nav-item:first-child .nav-link"),
+            "active"
+        );
+        assert.hasClass(
+            target.querySelector(".o_notebook .nav .nav-item:nth-child(2) .nav-link"),
+            "active"
+        );
+    });
+
+    QUnit.test(
+        "notebook page is changing when an anchor is clicked from another page",
+        async (assert) => {
+            serviceRegistry.add("scroller", scrollerService);
+
+            const scrollableParent = document.createElement("div");
+            scrollableParent.style.overflow = "auto";
+            target.append(scrollableParent);
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "partner",
+                arch: `<form>
+                        <a class="outerLink2" href="#anchor2">TO ANCHOR 2 FROM OUTSIDE THE NOTEPAD</a>
+                        <sheet>
+                            <notebook>
+                                <page string="Non scrollable page">
+                                    <div id="anchor1">No scrollbar!</div>
+                                    <a href="#anchor2" class="link2">TO ANCHOR 2</a>
+                                </page>
+                                <page string="Other scrollable page">
+                                    <p style="font-size: large">
+                                        Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis,
+                                        ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem
+                                        at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo
+                                        placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum
+                                        augue.
+                                    </p>
+                                    <p style="font-size: large">
+                                        Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis,
+                                        ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem
+                                        at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo
+                                        placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum
+                                        augue.
+                                    </p>
+                                    <h2 id="anchor2">There is a scroll bar</h2>
+                                    <a href="#anchor1" class="link1">TO ANCHOR 1</a>
+                                    <p style="font-size: large">
+                                        Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis,
+                                        ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem
+                                        at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo
+                                        placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum
+                                        augue.
+                                    </p>
+                                </page>
+                            </notebook>
+                        </sheet>
+                </form>`,
+                resId: 1,
+            });
+
+            scrollableParent.append(target.querySelector(".o_form_view"));
+
+            // We set the height of the parent to the height of the second pane
+            // We are then sure there will be no scrollable on this pane but a
+            // only for the first pane
+            scrollableParent.style.maxHeight = "400px";
+
+            // The element must be contained in the scrollable parent (top and bottom)
+            const isVisible = (el) => {
+                return (
+                    el.getBoundingClientRect().bottom <=
+                        scrollableParent.getBoundingClientRect().bottom &&
+                    el.getBoundingClientRect().top >= scrollableParent.getBoundingClientRect().top
+                );
+            };
+
+            assert.ok(
+                scrollableParent
+                    .querySelector(".tab-pane.active")
+                    .contains(scrollableParent.querySelector("#anchor1")),
+                "the first pane is visible"
+            );
+            assert.containsNone(target, "#anchor2", "the second anchor is not visible");
+
+            await click(scrollableParent.querySelector(".link2"));
+            assert.ok(
+                scrollableParent
+                    .querySelector(".tab-pane.active")
+                    .contains(scrollableParent.querySelector("#anchor2")),
+                "the second pane is visible"
+            );
+            assert.ok(
+                isVisible(scrollableParent.querySelector("#anchor2")),
+                "the second anchor is visible"
+            );
+
+            await click(scrollableParent.querySelector(".link1"));
+            assert.ok(
+                scrollableParent
+                    .querySelector(".tab-pane.active")
+                    .contains(scrollableParent.querySelector("#anchor1")),
+                "the first pane is visible"
+            );
+            assert.ok(
+                isVisible(scrollableParent.querySelector("#anchor1")),
+                "the first anchor is visible"
+            );
+
+            await click(target.querySelector(".outerLink2"));
+            assert.ok(
+                scrollableParent
+                    .querySelector(".tab-pane.active")
+                    .contains(scrollableParent.querySelector("#anchor2")),
+                "the second pane is visible"
+            );
+            assert.ok(
+                isVisible(scrollableParent.querySelector("#anchor2")),
+                "the second anchor is visible"
+            );
+        }
+    );
+
+    QUnit.test(
+        "invisible attrs on group are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="bar"/>
+                            <group attrs='{"invisible": [["bar", "!=", true]]}'>
+                                <group>
+                                    <field name="foo"/>
+                                </group>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(target, "div.o_group");
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsNone(target, "div.o_group");
+        }
+    );
+
+    QUnit.test(
+        "invisible attrs with zero value in domain and unset value in data",
+        async function (assert) {
+            serverData.models.partner.fields.int_field.type = "monetary";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="foo"/>
+                            <group attrs='{"invisible": [["int_field", "=", 0.0]]}'>
+                                <div class="hello">this should be invisible</div>
+                                <field name="int_field"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+            });
+
+            assert.containsNone(target, "div.hello");
+        }
+    );
+
+    QUnit.test("reset local state when switching to another view", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <sheet>
+                        <field name="product_id"/>
+                        <notebook>
+                            <page string="Foo">
+                                <field name="foo"/>
+                            </page>
+                            <page string="Bar">
+                                <field name="bar"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+            "partner,false,search": "<search></search>",
+        };
+
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+            },
+        };
+
+        const target = getFixture();
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(target, ".o_form_view");
+        // sanity check: notebook active page is first page
+        assert.hasClass(target.querySelector(".o_notebook .nav-link"), "active");
+
+        // click on second page tab
+        await click(target.querySelectorAll(".o_notebook .nav-link")[1]);
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav-link")[1], "active");
+
+        await click(target.querySelector(".o_control_panel .o_form_button_cancel"));
+        assert.containsNone(target, ".o_form_view");
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(target, ".o_form_view");
+        // check notebook active page is first page again
+        assert.hasClass(target.querySelector(".o_notebook .nav-link"), "active");
+    });
+
+    QUnit.test("rendering stat buttons with action", async function (assert) {
+        assert.expect(3);
+
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.strictEqual(params.name, "someaction");
+                        assert.strictEqual(params.type, "action");
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div name="button_box" class="oe_button_box">
+                            <button class="oe_stat_button" type="action" name="someaction">
+                                <field name="int_field"/>
+                            </button>
+                            <button class="oe_stat_button" name="some_action" type="action" attrs='{"invisible": [["bar", "=", true]]}'>
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(target, "button.oe_stat_button");
+        await click(target.querySelector(".oe_stat_button")); // should not call doActionButton
+    });
+
+    QUnit.test("rendering stat buttons without action", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div name="button_box" class="oe_button_box">
+                            <button class="oe_stat_button">
+                                <field name="int_field"/>
+                            </button>
+                            <button class="oe_stat_button" name="some_action" type="action" attrs='{"invisible": [["bar", "=", true]]}'>
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(
+            target,
+            "button.oe_stat_button[disabled]",
+            "stat button should be disabled"
+        );
+    });
+
+    QUnit.test("readonly stat buttons stays disabled", async function (assert) {
+        assert.expect(4);
+
+        const fakeActionService = {
+            start() {
+                return {
+                    async doActionButton(params) {
+                        if (params.name == "action_to_perform") {
+                            assert.containsN(
+                                target,
+                                "button.oe_stat_button[disabled]",
+                                2,
+                                "While performing the action, both buttons should be disabled."
+                            );
+                        }
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div name="button_box" class="oe_button_box">
+                            <button class="oe_stat_button">
+                                <field name="int_field"/>
+                            </button>
+                            <button class="oe_stat_button" type="action" name="some_action">
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <button type="action" name="action_to_perform">Run an action</button>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsN(target, "button.oe_stat_button", 2);
+        assert.containsN(target, "button.oe_stat_button[disabled]", 1);
+        await click(target.querySelector("button[name=action_to_perform]"));
+        assert.containsOnce(
+            target,
+            "button.oe_stat_button[disabled]",
+            "After performing the action, only one button should be disabled."
+        );
+    });
+
+    QUnit.test("label uses the string attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <label for="bar" string="customstring"/>
+                            <div>
+                                <field name="bar"/>
+                            </div>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(target, "label.o_form_label");
+        assert.strictEqual(target.querySelector("label.o_form_label").textContent, "customstring");
+    });
+
+    QUnit.test(
+        "input ids for multiple occurrences of fields in form view",
+        async function (assert) {
+            // A same field can occur several times in the view, but its id must be
+            // unique by occurrence, otherwise there is a warning in the console (in
+            // edit mode) as we get several inputs with the same "id" attribute, and
+            // several labels the same "for" attribute.
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="foo"/>
+                            <label for="qux"/>
+                            <div><field name="qux"/></div>
+                        </group>
+                        <group>
+                            <field name="foo"/>
+                            <label for="qux2"/>
+                            <div><field name="qux" id="qux2"/></div>
+                        </group>
+                    </form>`,
+            });
+
+            const fieldIdAttrs = [...target.querySelectorAll(".o_field_widget input")].map((n) =>
+                n.getAttribute("id")
+            );
+            const labelForAttrs = [...target.querySelectorAll(".o_form_label")].map((n) =>
+                n.getAttribute("for")
+            );
+
+            assert.strictEqual(
+                [...new Set(fieldIdAttrs)].length,
+                4,
+                "should have generated a unique id for each field occurrence"
+            );
+            assert.deepEqual(
+                fieldIdAttrs,
+                labelForAttrs,
+                "the for attribute of labels must coincide with field ids"
+            );
+        }
+    );
+
+    QUnit.test(
+        "input ids for multiple occurrences of fields in sub form view (inline)",
+        async function (assert) {
+            // A same field can occur several times in the view, but its id must be
+            // unique by occurrence, otherwise there is a warning in the console (in
+            // edit mode) as we get several inputs with the same "id" attribute, and
+            // several labels the same "for" attribute.
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <form>
+                    <field name="p">
+                        <tree><field name="foo"/></tree>
+                        <form>
+                            <group>
+                                <field name="foo"/>
+                                <label for="qux"/>
+                                <div><field name="qux"/></div>
+                            </group>
+                            <group>
+                                <field name="foo"/>
+                                <label for="qux2"/>
+                                <div><field name="qux" id="qux2"/></div>
+                            </group>
+                        </form>
+                    </field>
+                </form>`,
+            });
+
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+
+            assert.containsOnce(document.body, ".modal .o_form_view");
+
+            const fieldIdAttrs = [...$(".modal .o_form_view .o_field_widget input")].map((n) =>
+                n.getAttribute("id")
+            );
+            const labelForAttrs = [...$(".modal .o_form_view .o_form_label")].map((n) =>
+                n.getAttribute("for")
+            );
+
+            assert.strictEqual(
+                [...new Set(fieldIdAttrs)].length,
+                4,
+                "should have generated a unique id for each field occurrence"
+            );
+            assert.deepEqual(
+                fieldIdAttrs,
+                labelForAttrs,
+                "the for attribute of labels must coincide with field ids"
+            );
+        }
+    );
+
+    QUnit.test(
+        "input ids for multiple occurrences of fields in sub form view (not inline)",
+        async function (assert) {
+            // A same field can occur several times in the view, but its id must be
+            // unique by occurrence, otherwise there is a warning in the console (in
+            // edit mode) as we get several inputs with the same "id" attribute, and
+            // several labels the same "for" attribute.
+            serverData.views = {
+                "partner,false,list": '<tree><field name="foo"/></tree>',
+                "partner,false,form": `
+                    <form>
+                        <group>
+                            <field name="foo"/>
+                            <label for="qux"/>
+                            <div><field name="qux"/></div>
+                        </group>
+                        <group>
+                            <field name="foo"/>
+                            <label for="qux2"/>
+                            <div><field name="qux" id="qux2"/></div>
+                        </group>
+                    </form>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="p" widget="one2many"/></form>',
+            });
+
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+
+            assert.containsOnce(document.body, ".modal .o_form_view");
+
+            const fieldIdAttrs = [...$(".modal .o_form_view .o_field_widget input")].map((n) =>
+                n.getAttribute("id")
+            );
+            const labelForAttrs = [...$(".modal .o_form_view .o_form_label")].map((n) =>
+                n.getAttribute("for")
+            );
+
+            assert.strictEqual(
+                [...new Set(fieldIdAttrs)].length,
+                4,
+                "should have generated a unique id for each field occurrence"
+            );
+            assert.deepEqual(
+                fieldIdAttrs,
+                labelForAttrs,
+                "the for attribute of labels must coincide with field ids"
+            );
+        }
+    );
+
+    QUnit.test("two occurrences of invalid field in form view", async function (assert) {
+        serverData.models.partner.fields.trululu.required = true;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="trululu"/>
+                        <field name="trululu"/>
+                    </group>
+                </form>`,
+        });
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsN(target, ".o_form_label.o_field_invalid", 2);
+        assert.containsN(target, ".o_field_many2one.o_field_invalid", 2);
+    });
+
+    QUnit.test("tooltips on multiple occurrences of fields and labels", async function (assert) {
+        serverData.models.partner.fields.foo.help = "foo tooltip";
+        serverData.models.partner.fields.bar.help = "bar tooltip";
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="foo"/>
+                        <label for="bar"/>
+                        <div><field name="bar"/></div>
+                    </group>
+                    <group>
+                        <field name="foo"/>
+                        <label for="bar2"/>
+                        <div><field name="bar" id="bar2"/></div>
+                    </group>
+                </form>`,
+        });
+
+        await mouseEnter(target.querySelector(".o_form_label[for=foo]"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+            "foo tooltip"
+        );
+
+        await mouseEnter(target.querySelector(".o_form_label[for=bar]"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+            "bar tooltip"
+        );
+
+        await mouseEnter(target.querySelector(".o_form_label[for=foo_1]"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+            "foo tooltip"
+        );
+
+        await mouseEnter(target.querySelector(".o_form_label[for=bar_1]"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+            "bar tooltip"
+        );
+    });
+
+    QUnit.test(
+        "readonly attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="foo" attrs="{'readonly': [['bar', '=', True]]}"/>
+                                <field name="bar"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"]',
+                "the foo field widget should be readonly"
+            );
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"]',
+                "the foo field widget should have been rerendered to now be editable"
+            );
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"]',
+                "the foo field widget should have been rerendered to now be readonly again"
+            );
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"]',
+                "the foo field widget should have been rerendered to now be editable again"
+            );
+        }
+    );
+
+    QUnit.test(
+        "readonly attrs on lines are re-evaluated on field change 2",
+        async function (assert) {
+            serverData.models.partner.records[0].product_ids = [37];
+            serverData.models.partner.records[0].trululu = false;
+            serverData.models.partner.onchanges = {
+                trululu(record) {
+                    // when trululu changes, push another record in product_ids.
+                    // only push a second record once.
+
+                    if (record.product_ids.map((command) => command[1]).includes(41)) {
+                        return;
+                    }
+                    // copy the list to force it as different from the original
+                    record.product_ids = record.product_ids.slice();
+                    record.product_ids.unshift([5]);
+                    record.product_ids.push([4, 41, false]);
+                },
+            };
+
+            serverData.models.product.records[0].name = "test";
+            // This one is necessary to have a valid, rendered widget
+            serverData.models.product.fields.int_field = { type: "integer", string: "intField" };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="trululu"/>
+                        <field name="product_ids" attrs="{'readonly': [['trululu', '=', False]]}">
+                            <tree editable="top"><field name="int_field" widget="handle" /><field name="name"/></tree>
+                        </field>
+                    </form>
+                    `,
+                resId: 1,
+            });
+            await click(target.querySelector(".o_form_button_edit"));
+
+            let m2oName = "first record";
+            for (const value of [true, false, true, false]) {
+                if (value) {
+                    await selectDropdownItem(target, "trululu", m2oName);
+                    assert.notOk(
+                        $('.o_field_one2many[name="product_ids"]').hasClass("o_readonly_modifier"),
+                        "lines should not be readonly"
+                    );
+                    m2oName = "second record";
+                } else {
+                    await editInput(target, '.o_field_many2one[name="trululu"] input', "");
+                    assert.ok(
+                        $('.o_field_one2many[name="product_ids"]').hasClass("o_readonly_modifier"),
+                        "lines should be readonly"
+                    );
+                }
+            }
+        }
+    );
+
+    QUnit.test("empty fields have o_form_empty class in readonly mode", async function (assert) {
+        serverData.models.partner.fields.foo.default = false; // no default value for this test
+        serverData.models.partner.records[1].foo = false; // 1 is record with id=2
+        serverData.models.partner.records[1].trululu = false; // 1 is record with id=2
+        serverData.models.partner.fields.int_field.readonly = true;
+        serverData.models.partner.onchanges.foo = function (obj) {
+            if (obj.foo === "hello") {
+                obj.int_field = false;
+            }
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo"/>
+                            <field name="trululu" attrs="{'readonly': [['foo', '=', False]]}"/>
+                            <field name="int_field"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsN(
+            target,
+            ".o_field_widget.o_field_empty",
+            2,
+            "should have 2 empty fields with correct class"
+        );
+        assert.containsN(
+            target,
+            ".o_form_label_empty",
+            2,
+            "should have 2 muted labels (for the empty fieds) in readonly"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(
+            target,
+            ".o_field_empty",
+            "in edit mode, only empty readonly fields should have the o_field_empty class"
+        );
+        assert.containsOnce(
+            target,
+            ".o_form_label_empty",
+            "in edit mode, only labels associated to empty readonly fields should have the o_form_label_empty class"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "test");
+
+        assert.containsNone(
+            target,
+            ".o_field_empty",
+            "after readonly modifier change, the o_field_empty class should have been removed"
+        );
+        assert.containsNone(
+            target,
+            ".o_form_label_empty",
+            "after readonly modifier change, the o_form_label_empty class should have been removed"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "hello");
+
+        assert.containsOnce(
+            target,
+            ".o_field_empty",
+            "after value changed to false for a readonly field, the o_field_empty class should have been added"
+        );
+        assert.containsOnce(
+            target,
+            ".o_form_label_empty",
+            "after value changed to false for a readonly field, the o_form_label_empty class should have been added"
+        );
+    });
+
+    QUnit.test(
+        "empty fields' labels still get the empty class after widget rerender",
+        async function (assert) {
+            serverData.models.partner.fields.foo.default = false; // no default value for this test
+            serverData.models.partner.records[1].foo = false; // 1 is record with id=2
+            serverData.models.partner.records[1].display_name = false; // 1 is record with id=2
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="foo"/>
+                            <field name="display_name" attrs="{'readonly': [['foo', '=', 'readonly']]}"/>
+                        </group>
+                    </form>`,
+                resId: 2,
+            });
+
+            assert.containsN(target, ".o_field_widget.o_field_empty", 2);
+            assert.containsN(
+                target,
+                ".o_form_label_empty",
+                2,
+                "should have 1 muted label (for the empty fied) in readonly"
+            );
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsNone(
+                target,
+                ".o_field_empty",
+                "in edit mode, only empty readonly fields should have the o_field_empty class"
+            );
+            assert.containsNone(
+                target,
+                ".o_form_label_empty",
+                "in edit mode, only labels associated to empty readonly fields should have the o_form_label_empty class"
+            );
+
+            await editInput(target, ".o_field_widget[name=foo] input", "readonly");
+            await editInput(target, ".o_field_widget[name=foo] input", "edit");
+            await editInput(target, ".o_field_widget[name=display_name] input", "some name");
+            await editInput(target, ".o_field_widget[name=foo] input", "readonly");
+
+            assert.containsNone(
+                target,
+                ".o_field_empty",
+                "there still should not be any empty class on fields as the readonly one is now set"
+            );
+            assert.containsNone(
+                target,
+                ".o_form_label_empty",
+                "there still should not be any empty class on labels as the associated readonly field is now set"
+            );
+        }
+    );
+
+    QUnit.test(
+        'empty inner readonly fields don\'t have o_form_empty class in "create" mode',
+        async function (assert) {
+            serverData.models.partner.fields.product_id.readonly = true;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <group>
+                                    <field name="product_id"/>
+                                </group>
+                            </group>
+                        </sheet>
+                    </form>`,
+            });
+            assert.containsNone(target, ".o_form_label_empty");
+            assert.containsNone(target, ".o_field_empty");
+        }
+    );
+
+    QUnit.test(
+        "label tag added for fields have o_form_empty class in readonly mode if field is empty",
+        async function (assert) {
+            serverData.models.partner.fields.foo.default = false; // no default value for this test
+            serverData.models.partner.records[1].foo = false; // 1 is record with id=2
+            serverData.models.partner.records[1].trululu = false; // 1 is record with id=2
+            serverData.models.partner.fields.int_field.readonly = true;
+            serverData.models.partner.onchanges.foo = function (obj) {
+                if (obj.foo === "hello") {
+                    obj.int_field = false;
+                }
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <label for="foo" string="Foo"/>
+                            <field name="foo"/>
+                            <label for="trululu" string="Trululu" attrs="{'readonly': [['foo', '=', False]]}"/>
+                            <field name="trululu" attrs="{'readonly': [['foo', '=', False]]}"/>
+                            <label for="int_field" string="IntField" attrs="{'readonly': [['int_field', '=', False]]}"/>
+                            <field name="int_field"/>
+                        </sheet>
+                    </form>`,
+                resId: 2,
+            });
+
+            assert.containsN(target, ".o_field_widget.o_field_empty", 2);
+            assert.containsN(target, ".o_form_label_empty", 2);
+
+            await clickEdit(target);
+
+            assert.containsOnce(target, ".o_field_empty");
+            assert.containsOnce(target, ".o_form_label_empty");
+
+            await editInput(target, "div[name=foo] input", "test");
+
+            assert.containsNone(target, ".o_field_empty");
+            assert.containsNone(target, ".o_form_label_empty");
+
+            await editInput(target, "div[name=foo] input", "hello");
+
+            assert.containsOnce(target, ".o_field_empty");
+            assert.containsOnce(target, ".o_form_label_empty");
+        }
+    );
+
+    QUnit.test("form view can switch to edit mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.isVisible(target.querySelector(".o_form_buttons_view"));
+        assert.isNotVisible(target.querySelector(".o_form_buttons_edit"));
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(target, ".o_form_editable");
+        assert.containsNone(target, ".o_form_readonly");
+        assert.isNotVisible(target.querySelector(".o_form_buttons_view"));
+        assert.isVisible(target.querySelector(".o_form_buttons_edit"));
+    });
+
+    QUnit.test(
+        "required attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="foo" attrs="{'required': [['bar', '=', True]]}"/>
+                                <field name="bar"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"].o_required_modifier',
+                "the foo field widget should be required"
+            );
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"]:not(.o_required_modifier)',
+                "the foo field widget should now have been marked as non-required"
+            );
+            await click(target.querySelector(".o_field_boolean input"));
+            assert.containsOnce(
+                target,
+                '.o_field_widget[name="foo"].o_required_modifier',
+                "the foo field widget should now have been marked as required again"
+            );
+        }
+    );
+
+    QUnit.test("required fields should have o_required_modifier", async function (assert) {
+        serverData.models.partner.fields.foo.required = true;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_field_widget.o_required_modifier");
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(target, ".o_field_widget.o_required_modifier");
+    });
+
+    QUnit.test("required float fields works as expected", async function (assert) {
+        serverData.models.partner.fields.qux.required = true;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="qux"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.hasClass(target.querySelector('.o_field_widget[name="qux"]'), "o_required_modifier");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="qux"] input').value,
+            "0.0",
+            "qux input is 0 by default (float field)"
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsNone(
+            target,
+            '.o_field_widget[name="qux"] input',
+            "should have switched to readonly"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        await editInput(target, ".o_field_widget[name=qux] input", "1");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="qux"] input').value,
+            "1.0",
+            "qux input is properly formatted"
+        );
+
+        assert.verifySteps(["get_views", "onchange", "create", "read", "write", "read"]);
+    });
+
+    QUnit.test("separators", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                    <group>
+                        <separator string="Geolocation"/>
+                        <field name="foo"/>
+                    </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, "div.o_horizontal_separator");
+    });
+
+    QUnit.test("invisible attrs on separators", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <separator string="Geolocation" attrs='{"invisible": [["bar", "=", True]]}'/>
+                            <field name="bar"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(target, "div.o_horizontal_separator");
+    });
+
+    QUnit.test("buttons in form view", async function (assert) {
+        assert.expect(11);
+
+        const mockedActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.step(params.name);
+                        if (params.name === "post") {
+                            assert.strictEqual(params.resId, 2);
+                            params.onClose();
+                        } else {
+                            return Promise.reject();
+                        }
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", mockedActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="state" invisible="1"/>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                        <button name="some_method" class="s" string="Do it" type="object"/>
+                        <button name="some_other_method" states="ab,ef" string="Do not" type="object"/>
+                    </header>
+                    <sheet>
+                        <group>
+                            <button string="Geolocate" name="geo_localize" icon="fa-check" type="object"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        assert.containsOnce(target, "button.btn i.fa.fa-check");
+        assert.containsN(target, ".o_form_statusbar button", 2);
+        assert.containsOnce(target, 'button.p[name="post"]:contains(Confirm)');
+
+        // click on p (will succeed and reload)
+        await click(target.querySelector(".o_form_statusbar button.p"));
+
+        // click on s (will fail and reload)
+        await click(target.querySelector(".o_form_statusbar button.s"));
+
+        assert.verifySteps([
+            "get_views",
+            "read", // initial read
+            "post",
+            "read", // reload (successfully clicked on p)
+            "some_method",
+            "read", // reload (unsuccessfully clicked on s)
+        ]);
+    });
+
+    QUnit.test("buttons classes in form view", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="0"/>
+                        <button name="1" class="btn-primary"/>
+                        <button name="2" class="oe_highlight"/>
+                        <button name="3" class="btn-secondary"/>
+                        <button name="4" class="btn-link"/>
+                        <button name="5" class="oe_link"/>
+                        <button name="6" class="btn-success"/>
+                        <button name="7" class="o_this_is_a_button"/>
+                    </header>
+                    <sheet>
+                        <button name="8"/>
+                        <button name="9" class="btn-primary"/>
+                        <button name="10" class="oe_highlight"/>
+                        <button name="11" class="btn-secondary"/>
+                        <button name="12" class="btn-link"/>
+                        <button name="13" class="oe_link"/>
+                        <button name="14" class="btn-success"/>
+                        <button name="15" class="o_this_is_a_button"/>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.hasClass(target.querySelector('button[name="0"]'), "btn btn-secondary");
+        assert.hasClass(target.querySelector('button[name="1"]'), "btn btn-primary");
+        assert.hasClass(target.querySelector('button[name="2"]'), "btn btn-primary");
+        assert.hasClass(target.querySelector('button[name="3"]'), "btn btn-secondary");
+        assert.hasClass(target.querySelector('button[name="4"]'), "btn btn-link");
+        assert.hasClass(target.querySelector('button[name="5"]'), "btn btn-link");
+        assert.hasClass(target.querySelector('button[name="6"]'), "btn btn-success");
+        assert.hasClass(
+            target.querySelector('button[name="7"]'),
+            "btn o_this_is_a_button btn-secondary"
+        );
+        assert.hasClass(target.querySelector('button[name="8"]'), "btn btn-secondary");
+        assert.hasClass(target.querySelector('button[name="9"]'), "btn btn-primary");
+        assert.hasClass(target.querySelector('button[name="10"]'), "btn btn-primary");
+        assert.hasClass(target.querySelector('button[name="11"]'), "btn btn-secondary");
+        assert.hasClass(target.querySelector('button[name="12"]'), "btn btn-link");
+        assert.hasClass(target.querySelector('button[name="13"]'), "btn btn-link");
+        assert.hasClass(target.querySelector('button[name="14"]'), "btn btn-success");
+        assert.hasClass(target.querySelector('button[name="15"]'), "btn o_this_is_a_button");
+    });
+
+    QUnit.test("button in form view and long willStart", async function (assert) {
+        const mockedActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        params.onClose();
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", mockedActionService, { force: true });
+
+        let rpcCount = 0;
+        class AsyncField extends CharField {
+            setup() {
+                owl.onWillStart(async () => {
+                    assert.step("willStart");
+                });
+                owl.onWillUpdateProps(async () => {
+                    assert.step("willUpdateProps");
+                    if (rpcCount === 2) {
+                        return new Promise(() => {});
+                    }
+                });
+            }
+        }
+        fieldRegistry.add("asyncwidget", AsyncField);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="state" invisible="1"/>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                    </header>
+                    <sheet>
+                        <group>
+                            <field name="foo" widget="asyncwidget"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method !== "get_views") {
+                    rpcCount++;
+                    assert.step(args.method + rpcCount);
+                }
+            },
+        });
+        assert.verifySteps(["read1", "willStart"]);
+
+        await click(target.querySelector(".o_form_statusbar button.p"));
+        assert.verifySteps(["willUpdateProps", "read2", "willUpdateProps"]);
+
+        await click(target.querySelector(".o_form_statusbar button.p"));
+        assert.verifySteps(["willUpdateProps", "read3", "willUpdateProps"]);
+    });
+
+    QUnit.test("buttons in form view, new record", async function (assert) {
+        // this test simulates a situation similar to the settings forms.
+        assert.expect(9);
+
+        serverData.models.partner.records = []; // such that we know the created record will be id 1
+        const mockedActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.step("execute_action");
+                        assert.deepEqual(
+                            params.resId,
+                            1,
+                            "execute action should be done on correct record id"
+                        );
+                        params.onClose();
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", mockedActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                        <button name="some_method" class="s" string="Do it" type="object"/>
+                    </header>
+                    <sheet>
+                        <group>
+                            <button string="Geolocate" name="geo_localize" icon="fa-check" type="object"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.verifySteps(["get_views", "onchange"]);
+
+        await click(target.querySelector(".o_form_statusbar button.p"));
+
+        assert.verifySteps(["create", "read", "execute_action", "read"]);
+    });
+
+    QUnit.test("buttons in form view, new record, with field id in view", async function (assert) {
+        assert.expect(8);
+        // buttons in form view are one of the rare example of situation when we
+        // save a record without reloading it immediately, because we only care
+        // about its id for the next step.  But at some point, if the field id
+        // is in the view, it was registered in the changes, and caused invalid
+        // values in the record (data.id was set to null)
+
+        serverData.models.partner.records = []; // such that we know the created record will be id 1
+        const mockedActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.step("execute_action");
+                        assert.deepEqual(
+                            params.resId,
+                            1,
+                            "execute action should be done on correct record id"
+                        );
+                        params.onClose();
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", mockedActionService, { force: true });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                    </header>
+                    <sheet>
+                        <group>
+                            <field name="id" invisible="1"/>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_form_statusbar button.p"));
+
+        assert.verifySteps(["get_views", "onchange", "create", "read", "execute_action", "read"]);
+    });
+
+    QUnit.test("change and save char", async function (assert) {
+        assert.expect(6);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><group><field name="foo"/></group></form>',
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.ok(true, "should call the /write route");
+                }
+            },
+            resId: 2,
+        });
+
+        assert.containsOnce(target, ".o_form_readonly", "form view should be in readonly mode");
+        assert.containsOnce(target, "span:contains(blip)", "should contain span with field value");
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(target, ".o_form_editable", "form view should be in edit mode");
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_form_readonly", "form view should be in readonly mode");
+        assert.containsOnce(
+            target,
+            "span:contains(tralala)",
+            "should contain span with field value"
+        );
+    });
+
+    QUnit.test("properly reload data from server", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><group><field name="foo"/></group></form>',
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    args.args[1].foo = "apple";
+                }
+            },
+            resId: 2,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(target, "span:contains(apple)", "should contain span with field value");
+    });
+
+    QUnit.test("disable buttons until reload data from server", async function (assert) {
+        let def;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><group><field name="foo"/></group></form>',
+            async mockRPC(route, args) {
+                if (args.method === "write") {
+                    args.args[1].foo = "apple";
+                } else if (args.method === "read") {
+                    // Block the 'read' call
+                    await Promise.resolve(def);
+                }
+            },
+            resId: 2,
+        });
+
+        def = makeDeferred();
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_form_button_save"));
+
+        // Save button should be disabled
+        assert.hasAttrValue(target.querySelector(".o_form_button_save"), "disabled", "disabled");
+        // Release the 'read' call
+        def.resolve();
+        await nextTick();
+
+        // Edit button should be enabled after the reload
+        assert.hasAttrValue(target.querySelector(".o_form_button_edit"), "disabled", undefined);
+    });
+
+    QUnit.test("properly apply onchange in simple case", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.int_field = obj.foo.length + 1000;
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/><field name="int_field"/></form>',
+            resId: 2,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "9",
+            "should contain input with initial value"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "1007",
+            "should contain input with onchange applied"
+        );
+    });
+
+    QUnit.test(
+        "properly apply onchange when changed field is active field",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                int_field: function (obj) {
+                    obj.int_field = 14;
+                },
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="int_field"/></form>',
+                resId: 2,
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=int_field] input").value,
+                "9",
+                "should contain input with initial value"
+            );
+
+            await editInput(target, ".o_field_widget[name=int_field] input", "666");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=int_field] input").value,
+                "14",
+                "value should have been set to 14 by onchange"
+            );
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=int_field]").textContent,
+                "14",
+                "value should still be 14"
+            );
+        }
+    );
+
+    QUnit.test("onchange send only the present fields to the server", async function (assert) {
+        assert.expect(1);
+        serverData.models.partner.records[0].product_id = false;
+        serverData.models.partner.onchanges.foo = (obj) => {
+            obj.foo = obj.foo + " alligator";
+        };
+        serverData.views = {
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="p" widget="one2many">
+                        <tree>
+                            <field name="bar"/>
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                    <field name="timmy"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.deepEqual(
+                        args.args[3],
+                        {
+                            foo: "1",
+                            p: "",
+                            "p.bar": "",
+                            "p.product_id": "",
+                            timmy: "",
+                            "timmy.name": "",
+                        },
+                        "should send only the fields used in the views"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+    });
+
+    QUnit.test("onchange only send present fields value", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.onchanges.foo = () => {};
+
+        let checkOnchange = false;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="display_name"/>
+                    <field name="foo"/>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                            <field name="qux"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "onchange" && checkOnchange) {
+                    assert.deepEqual(
+                        args.args[1],
+                        {
+                            display_name: "first record",
+                            foo: "tralala",
+                            id: 1,
+                            p: [
+                                [
+                                    0,
+                                    args.args[1].p[0][1],
+                                    { display_name: "valid line", qux: 12.4 },
+                                ],
+                            ],
+                        },
+                        "should send the values for the present fields"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // add a o2m row
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await editInput(
+            target,
+            ".o_field_one2many .o_field_widget[name=display_name] input",
+            "valid line"
+        );
+        await editInput(target, ".o_field_one2many .o_field_widget[name=qux] input", "12.4");
+
+        // trigger an onchange by modifying foo
+        checkOnchange = true;
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+    });
+
+    QUnit.test("evaluate in python field options", async function (assert) {
+        assert.expect(3);
+
+        class MyField extends owl.Component {
+            setup() {
+                assert.strictEqual(this.props.horizontal, true);
+            }
+        }
+        MyField.extractProps = function (fieldName, record, attrs) {
+            assert.deepEqual(attrs.options, { horizontal: true });
+            return { horizontal: attrs.options.horizontal };
+        };
+        MyField.template = owl.xml`<div>ok</div>`;
+        fieldRegistry.add("my_field", MyField);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" widget="my_field" options="{'horizontal': True}"/>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.strictEqual(target.querySelector(".o_field_widget").textContent, "ok");
+    });
+
+    QUnit.test("can create a record with default values", async function (assert) {
+        assert.expect(5);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </form>`,
+            resId: 1,
+            context: { active_field: 2 },
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.strictEqual(
+                        args.kwargs.context.active_field,
+                        2,
+                        "should have send the correct context"
+                    );
+                }
+            },
+        });
+
+        const n = serverData.models.partner.records.length;
+
+        await click(target.querySelector(".o_form_button_create"));
+        assert.containsOnce(target, ".o_form_editable");
+        assert.strictEqual(target.querySelector("input").value, "My little Foo Value");
+
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.strictEqual(serverData.models.partner.records.length, n + 1);
+    });
+
+    QUnit.test(
+        "default record with a one2many and an onchange on sub field",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.partner.onchanges.foo = function () {};
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p" widget="one2many">
+                            <tree><field name="foo"/></tree>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                    if (args.method === "onchange") {
+                        assert.deepEqual(
+                            args.args[3],
+                            {
+                                p: "",
+                                "p.foo": "1",
+                            },
+                            "onchangeSpec should be correct (with sub fields)"
+                        );
+                    }
+                },
+            });
+            assert.verifySteps(["get_views", "onchange"]);
+        }
+    );
+
+    QUnit.test("remove default value in subviews", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.product.onchanges = {};
+        serverData.models.product.onchanges.name = function () {};
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            context: { default_state: "ab" },
+            arch: `
+                <form>
+                    <field name="product_ids" context="{'default_product_uom_qty': 68}">
+                        <tree editable="top">
+                            <field name="name"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC: function (route, args) {
+                if (route === "/web/dataset/call_kw/partner/onchange") {
+                    assert.deepEqual(args.kwargs.context, {
+                        default_state: "ab",
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                } else if (route === "/web/dataset/call_kw/product/onchange") {
+                    assert.deepEqual(args.kwargs.context, {
+                        default_product_uom_qty: 68,
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                }
+            },
+        });
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+    });
+
+    QUnit.test("reference field in one2many list", async function (assert) {
+        serverData.models.partner.records[0].reference = "partner,2";
+        serverData.views = {
+            "partner,false,form": '<form><field name="display_name"/></form>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "user",
+            serverData,
+            arch: `
+                <form>
+                    <field name="name"/>
+                    <field name="partner_ids">
+                        <tree editable="bottom">
+                            <field name="display_name"/>
+                            <field name="reference"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+            resId: 17,
+        });
+        // current form
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // open the modal form view of the record pointed by the reference field
+        await click(target.querySelector('table td[data-tooltip="first record"]'));
+        await click(target.querySelector("table td button.o_external_button"));
+
+        // edit the record in the modal
+        await editInput(
+            target,
+            '.modal-body .o_field_widget[name="display_name"] input',
+            "New name"
+        );
+        await click(target.querySelector(".modal-dialog footer .o_form_button_save"));
+
+        assert.containsOnce(
+            target,
+            '.o_field_cell[data-tooltip="New name"]',
+            "should not crash and value must be edited"
+        );
+    });
+
+    QUnit.test("there is no Actions menu when creating a new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            actionMenus: {},
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_cp_action_menus");
+
+        await click(target.querySelector(".o_form_button_create"));
+
+        assert.containsNone(target, ".o_cp_action_menus");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_cp_action_menus");
+    });
+
+    QUnit.test("basic default record", async function (assert) {
+        serverData.models.partner.fields.foo.default = "default foo value";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.strictEqual(target.querySelector("input").value, "default foo value");
+        assert.verifySteps(["get_views", "onchange"]);
+    });
+
+    QUnit.test("make default record with non empty one2many", async function (assert) {
+        serverData.models.partner.fields.p.default = [
+            [6, 0, []], // replace with zero ids
+            [0, 0, { foo: "new foo1", product_id: 41, p: [] }], // create a new value
+            [0, 0, { foo: "new foo2", product_id: 37, p: [] }], // create a new value
+        ];
+
+        let nameGetCount = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "name_get") {
+                    nameGetCount++;
+                }
+            },
+        });
+        assert.containsOnce(
+            target,
+            "td:contains(new foo1)",
+            "should have new foo1 value in one2many"
+        );
+        assert.containsOnce(
+            target,
+            "td:contains(new foo2)",
+            "should have new foo2 value in one2many"
+        );
+        assert.containsOnce(
+            target,
+            "td:contains(xphone)",
+            "should have a cell with the name field 'product_id', set to xphone"
+        );
+        assert.strictEqual(nameGetCount, 0, "should have done no nameget");
+    });
+
+    QUnit.test("make default record with non empty many2one", async function (assert) {
+        serverData.models.partner.fields.trululu.default = 4;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="trululu"/></form>',
+            mockRPC(route, args) {
+                if (args.method === "name_get") {
+                    throw new Error("Should not call name_get");
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=trululu] input").value,
+            "aaa",
+            "default value should be correctly displayed"
+        );
+    });
+
+    QUnit.test("form view properly change its title", async function (assert) {
+        serverData.views = {
+            "partner,false,form": '<form><field name="foo"/></form>',
+            "partner,false,search": "<search/>",
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+                res_id: 1,
+            },
+        };
+
+        const target = getFixture();
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "first record",
+            "should have the display name of the record as  title"
+        );
+        await click(target.querySelector(".o_form_button_create"));
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "New",
+            "should have the display name of the record as title"
+        );
+    });
+
+    QUnit.test("archive/unarchive a record", async function (assert) {
+        // add active field on partner model to have archive option
+        serverData.models.partner.fields.active = { string: "Active", type: "char", default: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            actionMenus: {},
+            arch: '<form><field name="active"/><field name="foo"/></form>',
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.containsOnce(target, ".o_cp_action_menus");
+
+        await toggleActionMenu(target);
+        assert.containsOnce(target, ".o_cp_action_menus span:contains(Archive)");
+
+        await toggleMenuItem(target, "Archive");
+        assert.containsOnce(document.body, ".modal");
+
+        await click(document.body.querySelector(".modal-footer .btn-primary"));
+
+        await toggleActionMenu(target);
+        assert.containsOnce(target, ".o_cp_action_menus span:contains(Unarchive)");
+
+        await toggleMenuItem(target, "UnArchive");
+
+        await toggleActionMenu(target);
+        assert.containsOnce(target, ".o_cp_action_menus span:contains(Archive)");
+
+        assert.verifySteps([
+            "get_views",
+            "read",
+            "action_archive",
+            "read",
+            "action_unarchive",
+            "read",
+        ]);
+    });
+
+    QUnit.test("archive action with active field not in view", async function (assert) {
+        // add active field on partner model, but do not put it in the view
+        serverData.models.partner.fields.active = { string: "Active", type: "char", default: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            actionMenus: {},
+            arch: '<form><field name="foo"/></form>',
+        });
+
+        assert.containsOnce(target, ".o_cp_action_menus");
+
+        await toggleActionMenu(target);
+        assert.containsNone(target, ".o_cp_action_menus span:contains(Archive)");
+        assert.containsNone(target, ".o_cp_action_menus span:contains(Unarchive)");
+    });
+
+    QUnit.test("can duplicate a record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+            actionMenus: {},
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "first record",
+            "should have the display name of the record as  title"
+        );
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Duplicate");
+
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "first record (copy)",
+            "should have duplicated the record"
+        );
+        assert.containsOnce(target, ".o_form_editable");
+    });
+
+    QUnit.test("duplicating a record preserves the context", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+            actionMenus: {},
+            context: { hey: "hoy" },
+            mockRPC(route, args) {
+                if (args.method === "read") {
+                    assert.step(args.kwargs.context.hey);
+                }
+            },
+        });
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Duplicate");
+
+        // should have 2 read, one for initial load, second for read after duplicating
+        assert.verifySteps(["hoy", "hoy"]);
+    });
+
+    QUnit.test("cannot duplicate a record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form duplicate="false"><field name="foo"/></form>',
+            resId: 1,
+            actionMenus: {},
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "first record",
+            "should have the display name of the record as  title"
+        );
+        assert.containsOnce(target, ".o_cp_action_menus");
+        await toggleActionMenu(target);
+        assert.containsNone(
+            target,
+            ".o_cp_action_menus span:contains(Duplicate)",
+            "should not contains a 'Duplicate' action"
+        );
+    });
+
+    QUnit.test("clicking on stat buttons in edit mode", async function (assert) {
+        let count = 0;
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton() {
+                        count++;
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div name="button_box">
+                            <button class="oe_stat_button" name="some_action" type="action">
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.strictEqual(
+                        args.args[1].foo,
+                        "tralala",
+                        "should have saved the changes"
+                    );
+                }
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        await click(target.querySelector(".oe_stat_button"));
+        assert.strictEqual(count, 1, "should have triggered a execute action");
+        assert.containsOnce(target, ".o_form_editable", "form view should be in edit mode");
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".oe_stat_button"));
+
+        assert.containsOnce(target, ".o_form_editable", "form view should be in edit mode");
+        assert.strictEqual(count, 2, "should have triggered a execute action");
+        assert.verifySteps(["get_views", "read", "write", "read"]);
+    });
+
+    QUnit.test("clicking on stat buttons save and reload in edit mode", async function (assert) {
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton() {},
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div name="button_box">
+                            <button class="oe_stat_button" type="action">
+                                <field name="int_field" widget="statinfo" string="Some number"/>
+                            </button>
+                        </div>
+                    <group>
+                        <field name="name"/>
+                    </group>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    // simulate an override of the model...
+                    args.args[1].display_name = "GOLDORAK";
+                    args.args[1].name = "GOLDORAK";
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "second record",
+            "should have correct display_name"
+        );
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=name] input", "some other name");
+
+        await click(target.querySelector(".oe_stat_button"));
+        assert.strictEqual(
+            target.querySelector(".o_control_panel .breadcrumb").textContent,
+            "GOLDORAK",
+            "should have correct display_name"
+        );
+    });
+
+    QUnit.test('buttons with attr "special" do not trigger a save', async function (assert) {
+        let writeCount = 0;
+        let doActionButtonCount = 0;
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton() {
+                        doActionButtonCount++;
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <button string="Do something" class="btn-primary" name="abc" type="object"/>
+                    <button string="Or discard" class="btn-secondary" special="cancel"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    writeCount++;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // make the record dirty
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_content button.btn-primary"));
+
+        assert.strictEqual(writeCount, 1, "should have triggered a write");
+        assert.strictEqual(doActionButtonCount, 1, "should have triggered a execute action");
+
+        await editInput(target, ".o_field_widget[name=foo] input", "abcdef");
+
+        await click(target.querySelector(".o_content button.btn-secondary"));
+        assert.strictEqual(writeCount, 1, "should not have triggered a write");
+        assert.strictEqual(doActionButtonCount, 2, "should have triggered a execute action");
+    });
+
+    QUnit.test('buttons with attr "special=save" save', async function (assert) {
+        const fakeActionService = {
+            start() {
+                return {
+                    doActionButton() {
+                        assert.step("execute_action");
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <button string="Save" class="btn-primary" special="save"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_content button.btn-primary"));
+        assert.verifySteps(["get_views", "read", "write", "read", "execute_action"]);
+    });
+
+    QUnit.test("missing widgets do not crash", async function (assert) {
+        serverData.models.partner.fields.foo.type = "new field type without widget";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+        });
+        assert.containsOnce(target, ".o_field_widget");
+    });
+
+    QUnit.test("nolabel", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <group class="firstgroup">
+                                <field name="foo" nolabel="1"/>
+                            </group>
+                            <group class="secondgroup">
+                                <field name="product_id"/>
+                                <field name="int_field" nolabel="1"/><field name="qux" nolabel="1"/>
+                            </group>
+                            <group>
+                                <field name="bar"/>
+                            </group>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(target, "label.o_form_label", 2);
+        assert.strictEqual(
+            target.querySelectorAll("label.o_form_label")[0].textContent,
+            "Product",
+            "one should be the one for the product field"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("label.o_form_label")[1].textContent,
+            "Bar",
+            "one should be the one for the bar field"
+        );
+
+        assert.hasAttrValue(
+            target.querySelector(".firstgroup td"),
+            "colspan",
+            undefined,
+            "foo td should have a default colspan (1)"
+        );
+        assert.containsN(target, ".secondgroup tr", 2, "int_field and qux should have same tr");
+
+        assert.containsN(
+            target,
+            ".secondgroup tr:first td",
+            2,
+            "product_id field should be on its own tr"
+        );
+    });
+
+    QUnit.test("many2one in a one2many", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        serverData.models.partner.records[1].product_id = 37;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            "td:contains(xphone)",
+            "should display the name of the many2one"
+        );
+    });
+
+    QUnit.test("circular many2many's", async function (assert) {
+        serverData.models.partner_type.fields.partner_ids = {
+            string: "partners",
+            type: "many2many",
+            relation: "partner",
+        };
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner_type.records[0].partner_ids = [1];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy">
+                        <tree><field name="display_name"/></tree>
+                        <form>
+                            <field name="partner_ids">
+                                <tree><field name="display_name"/></tree>
+                                <form><field name="display_name"/></form>
+                            </field>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            "td:contains(gold)",
+            "should display the name of the many2many on the original form"
+        );
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(
+            target,
+            ".modal td:contains(first record)",
+            "should display the name of the many2many on the modal form"
+        );
+
+        await click(target.querySelector(".modal .o_data_cell"));
+        assert.containsN(
+            target,
+            ".modal",
+            2,
+            "there should be 2 modals (partner on top of partner_type) opened"
+        );
+    });
+
+    QUnit.test("discard changes on a non dirty form view", async function (assert) {
+        let nbWrite = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resId: 1,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    nbWrite++;
+                }
+            },
+        });
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "yop",
+            "input should contain yop"
+        );
+
+        // click on discard
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "yop",
+            "field in readonly should display yop"
+        );
+
+        assert.strictEqual(nbWrite, 0, "no write RPC should have been done");
+    });
+
+    QUnit.test("discard changes on a dirty form view", async function (assert) {
+        let nbWrite = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resId: 1,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    nbWrite++;
+                }
+            },
+        });
+
+        // switch to edit mode and edit the foo field
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "yop",
+            "input should contain yop"
+        );
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "new value",
+            "input should contain new value"
+        );
+
+        // click on discard
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "yop",
+            "field in readonly should display yop"
+        );
+
+        assert.strictEqual(nbWrite, 0, "no write RPC should have been done");
+    });
+
+    QUnit.test("discard changes on a dirty form view (for date field)", async function (assert) {
+        // this test checks that the basic model properly handles date object
+        // when they are discarded and saved.  This may be an issue because
+        // dates are saved as luxon instances, and were at one point stringified,
+        // then parsed into string, which is wrong.
+
+        serverData.models.partner.fields.date.default = "2017-01-25";
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="date"></field></form>',
+        });
+
+        // focus the buttons before clicking on them to precisely reproduce what
+        // really happens (mostly because the datepicker lib need that focus
+        // event to properly focusout the input, otherwise it crashes later on
+        // when the 'blur' event is triggered by the re-rendering)
+        target.querySelector(".o_form_button_cancel").focus();
+        await click(target.querySelector(".o_form_button_cancel"));
+
+        target.querySelector(".o_form_button_save").focus();
+        await click(target.querySelector(".o_form_button_save"));
+        assert.containsOnce(target, "span:contains(2017)");
+    });
+
+    QUnit.test("discard changes on relational data on new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+        });
+
+        // edit the p field
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await selectDropdownItem(target, "product_id", "xphone");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            "xphone",
+            "input should contain xphone"
+        );
+
+        // click on discard
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.containsNone(target, ".modal", "modal should not be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=product_id] input").value,
+            "",
+            "the string xphone should not be present after discarding"
+        );
+    });
+
+    QUnit.test(
+        "discard changes on a new (non dirty, except for defaults) form view",
+        async function (assert) {
+            serverData.models.partner.fields.foo.default = "ABC";
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form><field name="foo"></field></form>',
+                config: {
+                    historyBack() {
+                        assert.step("history-back");
+                    },
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=foo] input").value,
+                "ABC",
+                "input should contain ABC"
+            );
+
+            await click(target.querySelector(".o_form_button_cancel"));
+
+            assert.containsNone(document.body, ".modal", "there should not be a confirm modal");
+            assert.verifySteps(["history-back"]);
+        }
+    );
+
+    QUnit.test("discard changes on a new (dirty) form view", async function (assert) {
+        serverData.models.partner.fields.foo.default = "ABC";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                </form>
+            `,
+            config: {
+                historyBack() {
+                    assert.step("history-back");
+                },
+            },
+        });
+
+        // edit the foo field
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "ABC",
+            "input should contain ABC"
+        );
+        await editInput(target, ".o_field_widget[name=foo] input", "DEF");
+
+        // discard the changes and check it has properly been discarded
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "DEF",
+            "input should be DEF"
+        );
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "ABC",
+            "input should now be ABC"
+        );
+        assert.verifySteps(["history-back"]);
+
+        // redirty and discard the field foo (to make sure initial changes haven't been lost)
+        await editInput(target, ".o_field_widget[name=foo] input", "GHI");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "GHI",
+            "input should be GHI"
+        );
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "ABC",
+            "input should now be ABC"
+        );
+        assert.verifySteps(["history-back"]);
+    });
+
+    QUnit.test("discard changes on a duplicated record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resId: 1,
+            actionMenus: {},
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        await click(target.querySelector(".o_form_button_save"));
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Duplicate");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "tralala",
+            "input should contain tralala"
+        );
+
+        await click(target.querySelector(".o_form_button_cancel"));
+
+        assert.containsNone(document.body, ".modal", "there should not be a confirm modal");
+    });
+
+    QUnit.test("switching to another record from a dirty one", async function (assert) {
+        let nbWrite = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resIds: [1, 2],
+            resId: 1,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    nbWrite++;
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "1",
+            "pager value should be 1"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_limit").textContent,
+            "2",
+            "pager limit should be 2"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "yop",
+            "input should contain yop"
+        );
+
+        // edit the foo field
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        assert.strictEqual(
+            target.querySelector("input").value,
+            "new value",
+            "input should contain new value"
+        );
+
+        // click on the pager to switch to the next record (will save record)
+        await click(target.querySelector(".o_pager_next"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "2",
+            "pager value should be 2"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "blip",
+            "input should contain blip"
+        );
+
+        await click(target.querySelector(".o_pager_previous"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "1",
+            "pager value should be 1"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "new value",
+            "input should contain new value"
+        );
+
+        assert.strictEqual(nbWrite, 1, "one write RPC should have been done");
+    });
+
+    QUnit.test("handling dirty state: switching to another record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"></field>
+                    <field name="priority" widget="priority"></field>
+                </form>`,
+            resIds: [1, 2],
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "1",
+            "pager value should be 1"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "yop",
+            "input should contain yop"
+        );
+
+        // edit the foo field
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "new value",
+            "input should contain new value"
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        // click on the pager to switch to the next record and cancel the confirm request
+        await click(target.querySelector(".o_pager_next"));
+        assert.containsNone(
+            document.body,
+            ".modal:visible",
+            "no confirm modal should be displayed"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "2",
+            "pager value should be 2"
+        );
+
+        assert.containsN(
+            target,
+            ".o_priority .fa-star-o",
+            2,
+            "priority widget should have been rendered with correct value"
+        );
+
+        // edit the value in readonly
+        await click(target.querySelector(".o_priority .fa-star-o")); // click on the first star
+        assert.containsOnce(
+            target,
+            ".o_priority .fa-star",
+            "priority widget should have been updated"
+        );
+
+        await click(target.querySelector(".o_pager_next"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "1",
+            "pager value should be 1"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "new value",
+            "input should contain yop"
+        );
+
+        // edit the foo field
+        await editInput(target, ".o_field_widget[name=foo] input", "wrong value");
+
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+        await click(target.querySelector(".o_pager_next"));
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "2",
+            "pager value should be 2"
+        );
+    });
+
+    QUnit.test("restore local state when switching to another record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <notebook>
+                        <page string="First Page" name="first">
+                            <field name="foo"/>
+                        </page>
+                        <page string="Second page" name="second">
+                            <field name="bar"/>
+                        </page>
+                    </notebook>
+                </form>`,
+            resIds: [1, 2],
+            resId: 1,
+        });
+
+        // click on second page tab
+        await click(target.querySelectorAll(".o_notebook .nav-link")[1]);
+
+        assert.doesNotHaveClass(target.querySelector(".o_notebook .nav-link"), "active");
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav-link")[1], "active");
+
+        // click on the pager to switch to the next record
+        await click(target.querySelector(".o_pager_next"));
+
+        assert.doesNotHaveClass(target.querySelector(".o_notebook .nav-link"), "active");
+        assert.hasClass(target.querySelectorAll(".o_notebook .nav-link")[1], "active");
+    });
+
+    QUnit.test("pager is hidden in create mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+            resIds: [1, 2],
+        });
+
+        assert.containsOnce(target, ".o_pager");
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
+        assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "2");
+
+        await click(target.querySelector(".o_form_button_create"));
+
+        assert.containsNone(target, ".o_pager");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_pager");
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "3");
+        assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "3");
+    });
+
+    QUnit.test("switching to another record, in readonly mode", async function (assert) {
+        patchWithCleanup(browser, {
+            setTimeout(fn) {
+                return fn(); // update the router hash directly
+            },
+        });
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resId: 1,
+            resIds: [1, 2],
+        });
+
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
+        assert.strictEqual(form.env.services.router.current.hash.id, 1);
+
+        await click(target.querySelector(".o_pager_next"));
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "2");
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.strictEqual(form.env.services.router.current.hash.id, 2);
+    });
+
+    QUnit.test("modifiers are reevaluated when creating new record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo" class="foo_field" attrs='{"invisible": [["bar", "=", True]]}'/>
+                            <field name="bar"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsNone(target, ".foo_field");
+        await click(target.querySelector(".o_form_button_create"));
+        assert.containsOnce(target, ".foo_field");
+    });
+
+    QUnit.test("empty readonly fields are visible on new records", async function (assert) {
+        serverData.models.partner.fields.foo.readonly = true;
+        serverData.models.partner.fields.foo.default = undefined;
+        serverData.models.partner.records[0].foo = undefined;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(target, ".o_field_empty");
+        await click(target.querySelector(".o_form_button_create"));
+        assert.containsNone(target, ".o_field_empty");
+    });
+
+    QUnit.test("all group children have correct layout classname", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <group class="inner_group">
+                                <field name="name"/>
+                            </group>
+                            <div class="inner_div">
+                                <field name="foo"/>
+                            </div>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.hasClass(target.querySelector(".inner_group"), "o_group_col_6");
+        assert.hasClass(target.querySelector(".inner_div"), "o_group_col_6");
+    });
+
+    QUnit.test("deleting a record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            actionMenus: {},
+            resIds: [1, 2, 4],
+            resId: 1,
+        });
+
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
+        assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "3");
+
+        // open action menu and delete
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+
+        assert.containsOnce(document.body, ".modal", "a confirm modal should be displayed");
+        await click(document.body.querySelector(".modal-footer button.btn-primary"));
+
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1");
+        assert.strictEqual(target.querySelector(".o_pager_limit").textContent, "2");
+        assert.containsOnce(
+            target,
+            ".o_field_widget[name=foo]:contains(blip)",
+            "should have a field with foo value for record 2"
+        );
+    });
+
+    QUnit.test("deleting the last record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"></field></form>',
+            resIds: [1],
+            resId: 1,
+            actionMenus: {},
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+            config: {
+                historyBack() {
+                    assert.step("history-back");
+                },
+            },
+        });
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+
+        assert.containsOnce(document.body, ".modal", "a confirm modal should be displayed");
+        await click(document.body.querySelector(".modal-footer button.btn-primary"));
+        assert.containsNone(document.body, ".modal", "no confirm modal should be displayed");
+
+        assert.verifySteps(["get_views", "read", "unlink", "history-back"]);
+    });
+
+    QUnit.test("empty required fields cannot be saved", async function (assert) {
+        serverData.models.partner.fields.foo.required = true;
+        delete serverData.models.partner.fields.foo.default;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: "<form>" + '<group><field name="foo"/></group>' + "</form>",
+        });
+
+        await click(target.querySelector(".o_form_button_save"));
+        assert.hasClass(target.querySelector("label.o_form_label"), "o_field_invalid");
+        assert.hasClass(target.querySelector(".o_field_widget[name=foo]"), "o_field_invalid");
+        assert.containsOnce(target, ".o_notification");
+        assert.strictEqual(
+            target.querySelector(".o_notification_title").textContent,
+            "Invalid fields: "
+        );
+        assert.strictEqual(
+            target.querySelector(".o_notification_content").innerHTML,
+            "<ul><li>Foo</li></ul>"
+        );
+        assert.hasClass(target.querySelector(".o_notification"), "border-danger");
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+        assert.containsNone(target, ".o_field_invalid");
+    });
+
+    QUnit.test("changes in a readonly form view are saved directly", async function (assert) {
+        let nbWrite = 0;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                    <field name="foo"/>
+                    <field name="priority" widget="priority"/>
+                    </group>
+                </form>`,
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/partner/write") {
+                    nbWrite++;
+                }
+            },
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            ".o_priority .o_priority_star",
+            2,
+            "priority widget should have been rendered"
+        );
+        assert.containsN(
+            target,
+            ".o_priority .fa-star-o",
+            2,
+            "priority widget should have been rendered with correct value"
+        );
+
+        // edit the value in readonly
+        await click(target.querySelector(".o_priority .fa-star-o"));
+        assert.strictEqual(nbWrite, 1, "should have saved directly");
+        assert.containsOnce(
+            target,
+            ".o_priority .fa-star",
+            "priority widget should have been updated"
+        );
+
+        // switch to edit mode and edit the value again
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsN(
+            target,
+            ".o_priority .o_priority_star",
+            2,
+            "priority widget should have been correctly rendered"
+        );
+        assert.containsOnce(
+            target,
+            ".o_priority .fa-star",
+            "priority widget should have correct value"
+        );
+        await click(target.querySelector(".o_priority .fa-star-o"));
+        assert.strictEqual(nbWrite, 1, "should not have saved directly");
+        assert.containsN(
+            target,
+            ".o_priority .fa-star",
+            2,
+            "priority widget should have been updated"
+        );
+
+        // save
+        await click(target.querySelector(".o_form_button_save"));
+        assert.strictEqual(nbWrite, 2, "should not have saved directly");
+        assert.containsN(
+            target,
+            ".o_priority .fa-star",
+            2,
+            "priority widget should have correct value"
+        );
+    });
+
+    QUnit.test("display a dialog if onchange result is a warning", async function (assert) {
+        serverData.models.partner.onchanges = { foo: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><field name="int_field"/></form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: { int_field: 10 },
+                        warning: {
+                            title: "Warning",
+                            message: "You must first select a partner",
+                            type: "dialog",
+                        },
+                    });
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "9"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "10"
+        );
+        assert.containsOnce(document.body, ".modal");
+        assert.strictEqual(document.body.querySelector(".modal-title").textContent, "Warning");
+        assert.strictEqual(
+            document.body.querySelector(".modal-body").textContent,
+            "You must first select a partner"
+        );
+    });
+
+    QUnit.test(
+        "display a notificaton if onchange result is a warning with type notification",
+        async function (assert) {
+            serverData.models.partner.onchanges = { foo: true };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="foo"/><field name="int_field"/></form>`,
+                resId: 2,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        return Promise.resolve({
+                            value: { int_field: 10 },
+                            warning: {
+                                title: "Warning",
+                                message: "You must first select a partner",
+                                type: "notification",
+                                className: "abc",
+                                sticky: true,
+                            },
+                        });
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=int_field] input").value,
+                "9"
+            );
+
+            await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=int_field] input").value,
+                "10"
+            );
+
+            assert.containsOnce(document.body, ".o_notification");
+            assert.hasClass(document.body.querySelector(".o_notification"), "abc");
+            assert.strictEqual(
+                document.body.querySelector(".o_notification_title").textContent,
+                "Warning"
+            );
+            assert.strictEqual(
+                document.body.querySelector(".o_notification_content").textContent,
+                "You must first select a partner"
+            );
+        }
+    );
+
+    QUnit.test("can create record even if onchange returns a warning", async function (assert) {
+        serverData.models.partner.onchanges = { foo: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><field name="int_field"/></form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: { int_field: 10 },
+                        warning: {
+                            title: "Warning",
+                            message: "You must first select a partner",
+                        },
+                    });
+                }
+            },
+        });
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="int_field"] input').value,
+            "10",
+            "record should have been created and rendered"
+        );
+        assert.containsOnce(document.body, ".o_notification");
+    });
+
+    QUnit.test(
+        "do nothing if add a line in one2many result in a onchange with a warning",
+        async function (assert) {
+            serverData.models.partner.onchanges = { foo: true };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="foo"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 2,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        return Promise.resolve({
+                            value: {},
+                            warning: {
+                                title: "Warning",
+                                message: "You must first select a partner",
+                            },
+                        });
+                    }
+                },
+            });
+
+            // go to edit mode, click to add a record in the o2m
+            await click(target.querySelector(".o_form_button_edit"));
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            assert.containsNone(target, "tr.o_data_row", "should not have added a line");
+            assert.containsOnce(target, ".o_notification .text-warning");
+        }
+    );
+
+    QUnit.test("button box is rendered in create mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div name="button_box" class="oe_button_box">
+                        <button type="object" class="oe_stat_button" icon="fa-check-square">
+                            <field name="bar"/>
+                        </button>
+                    </div>
+                </form>`,
+            resId: 2,
+        });
+
+        // readonly mode
+        assert.containsOnce(
+            target,
+            ".oe_stat_button",
+            "button box should be displayed in readonly"
+        );
+
+        // edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(
+            target,
+            ".oe_stat_button",
+            "button box should be displayed in edit on an existing record"
+        );
+
+        // create mode (leave edition first!)
+        await click(target.querySelector(".o_form_button_cancel"));
+        await click(target.querySelector(".o_form_button_create"));
+        assert.containsOnce(
+            target,
+            ".oe_stat_button",
+            "button box should be displayed when creating a new record as well"
+        );
+    });
+
+    QUnit.test("properly apply onchange on one2many fields", async function (assert) {
+        serverData.models.partner.records[0].p = [4];
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.p = [
+                    [5],
+                    [1, 4, { display_name: "updated record" }],
+                    [0, null, { display_name: "created record" }],
+                ];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group><field name="foo"/></group>
+                    <field name="p">
+                        <tree><field name="display_name"/></tree>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_one2many .o_data_row",
+            "there should be one one2many record linked at first"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many .o_data_row td").textContent,
+            "aaa",
+            "the 'display_name' of the one2many record should be correct"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "let us trigger an onchange");
+        assert.containsN(target, ".o_data_row", 2, "there should be two linked record");
+        assert.strictEqual(
+            target.querySelector(".o_data_row .o_data_cell").textContent,
+            "updated record",
+            "the 'display_name' of the first one2many record should have been updated"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell").textContent,
+            "created record",
+            "the 'display_name' of the second one2many record should be correct"
+        );
+    });
+
+    QUnit.test("properly apply onchange on one2many fields direct click", async function (assert) {
+        const def = makeDeferred();
+
+        serverData.views = {
+            "partner,false,form": `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="int_field"/>
+                    </form>`,
+        };
+        serverData.models.partner.records[0].p = [2, 4];
+        serverData.models.partner.onchanges = {
+            int_field: function (obj) {
+                obj.p = [
+                    [5],
+                    [1, 2, { display_name: "updated record 1", int_field: obj.int_field }],
+                    [1, 4, { display_name: "updated record 2", int_field: obj.int_field * 2 }],
+                ];
+            },
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                    <field name="p">
+                        <tree>
+                            <field name="display_name"/>
+                            <field name="int_field"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            async mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    await def;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        // Trigger the onchange
+        await editInput(target, ".o_field_widget[name=int_field] input", "2");
+        // Open first record in one2many
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsNone(target, ".modal");
+
+        def.resolve();
+        await nextTick();
+
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=int_field] input").value,
+            "2"
+        );
+    });
+
+    QUnit.test("update many2many value in one2many after onchange", async function (assert) {
+        serverData.models.partner.records[1].p = [4];
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.p = [
+                    [5],
+                    [
+                        1,
+                        4,
+                        {
+                            display_name: "gold",
+                            timmy: [[5]],
+                        },
+                    ],
+                ];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="display_name" attrs="{'readonly': [('timmy', '=', false)]}"/>
+                            <field name="timmy"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+        });
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["aaa", "No records"],
+            "should have proper initial content"
+        );
+        await click(target.querySelector(".o_form_button_edit"));
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_data_cell")),
+            ["gold", "No records"],
+            "should have proper initial content"
+        );
+    });
+
+    QUnit.test("delete a line in a one2many while editing another line", async function (assert) {
+        serverData.models.partner.records[0].p = [1, 2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="bottom">
+                                <field name="display_name" required="True"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, ".o_field_widget[name=display_name] input", "");
+        await click(target.querySelectorAll(".fa-trash-o")[1]);
+
+        assert.hasClass(
+            target.querySelector(".o_data_cell"),
+            "o_invalid_cell",
+            "Cell should be invalidated."
+        );
+        assert.containsN(target, ".o_data_row", 2, "The other line should not have been deleted.");
+    });
+
+    QUnit.test("properly apply onchange on many2many fields", async function (assert) {
+        assert.expect(15);
+
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.timmy = [[5], [4, 12], [4, 14]];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="timmy">
+                        <tree><field name="display_name"/></tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "read" && args.model === "partner_type") {
+                    assert.deepEqual(args.args[0], [12, 14], "should read both m2m with one RPC");
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].timmy,
+                        [[6, false, [12, 14]]],
+                        "should correctly save the changed m2m values"
+                    );
+                }
+            },
+            resId: 2,
+        });
+
+        assert.containsNone(
+            target,
+            ".o_field_many2many .o_data_row",
+            "there should be no many2many record linked at first"
+        );
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "let us trigger an onchange");
+        assert.containsN(target, ".o_data_row", 2, "there should be two linked records");
+        assert.strictEqual(
+            target.querySelector(".o_data_row td").textContent,
+            "gold",
+            "the 'display_name' of the first m2m record should be correctly displayed"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row")[1].querySelector("td").textContent,
+            "silver",
+            "the 'display_name' of the second m2m record should be correctly displayed"
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.verifySteps(["get_views", "read", "onchange", "read", "write", "read", "read"]);
+    });
+
+    QUnit.test(
+        "form with domain widget: opening a many2many form and save should not crash",
+        async function (assert) {
+            assert.expect(0);
+
+            // We just test that there is no crash in this situation
+            serverData.models.partner.records[0].timmy = [12];
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="foo" widget="domain"/>
+                        </group>
+                        <field name="timmy">
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="name"/>
+                                <field name="color"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            // switch to edit mode
+            await click(target.querySelector(".o_form_button_edit"));
+
+            // open a form view and save many2many record
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            await click(target.querySelector(".modal-dialog footer .btn-primary"));
+        }
+    );
+
+    QUnit.test("display_name not sent for onchanges if not in view", async function (assert) {
+        assert.expect(7);
+
+        serverData.models.partner.records[0].timmy = [12];
+        serverData.models.partner.onchanges = {
+            foo: function () {},
+        };
+        serverData.models.partner_type.onchanges = {
+            name: function () {},
+        };
+        let readInModal = false;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="foo"/>
+                        <field name="timmy">
+                            <tree><field name="name"/></tree>
+                            <form>
+                                <field name="name"/>
+                                <field name="color"/>
+                            </form>
+                        </field>
+                    </group>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "read" && args.model === "partner") {
+                    assert.deepEqual(
+                        args.args[1],
+                        ["foo", "timmy", "display_name"],
+                        "should read display_name even if not in the view"
+                    );
+                }
+                if (args.method === "read" && args.model === "partner_type") {
+                    if (!readInModal) {
+                        assert.deepEqual(
+                            args.args[1],
+                            ["name"],
+                            "should not read display_name for records in the list"
+                        );
+                    } else {
+                        assert.deepEqual(
+                            args.args[1],
+                            ["color", "display_name"],
+                            "should read display_name when opening the subrecord"
+                        );
+                    }
+                }
+                if (args.method === "onchange" && args.model === "partner") {
+                    assert.deepEqual(
+                        args.args[1],
+                        {
+                            id: 1,
+                            foo: "coucou",
+                            timmy: [[6, false, [12]]],
+                        },
+                        "should only send the value of fields in the view (+ id)"
+                    );
+                    assert.deepEqual(
+                        args.args[3],
+                        {
+                            foo: "1",
+                            timmy: "",
+                            "timmy.name": "1",
+                            "timmy.color": "",
+                        },
+                        "only the fields in the view should be in the onchange spec"
+                    );
+                }
+                if (args.method === "onchange" && args.model === "partner_type") {
+                    assert.deepEqual(
+                        args.args[1],
+                        {
+                            id: 12,
+                            name: "new name",
+                            color: 2,
+                        },
+                        "should only send the value of fields in the view (+ id)"
+                    );
+                    assert.deepEqual(
+                        args.args[3],
+                        {
+                            name: "1",
+                            color: "",
+                        },
+                        "only the fields in the view should be in the onchange spec"
+                    );
+                }
+            },
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // trigger the onchange
+        await editInput(target, ".o_field_widget[name=foo] input", "coucou");
+
+        // open a subrecord and trigger an onchange
+        readInModal = true;
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".modal .o_field_widget[name=name] input", "new name");
+    });
+
+    QUnit.test("onchanges on date(time) fields", async function (assert) {
+        patchTimeZone(120);
+
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.date = "2021-12-12";
+                obj.datetime = "2021-12-12 10:55:05";
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="date"/>
+                    <field name="datetime"/>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=date]").textContent,
+            "01/25/2017"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=datetime]").textContent,
+            "12/12/2016 12:55:05"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=date] input").value,
+            "01/25/2017"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=datetime] input").value,
+            "12/12/2016 12:55:05"
+        );
+
+        // trigger the onchange
+        await editInput(target, '.o_field_widget[name="foo"] input', "coucou");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=date] input").value,
+            "12/12/2021"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=datetime] input").value,
+            "12/12/2021 12:55:05"
+        );
+    });
+
+    QUnit.test("onchanges are not sent for invalid values", async function (assert) {
+        serverData.models.partner.onchanges = {
+            int_field: function (obj) {
+                obj.foo = String(obj.int_field);
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><field name="int_field"/></form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // edit int_field, and check that an onchange has been applied
+        await editInput(target, '.o_field_widget[name="int_field"] input', "123");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').value,
+            "123",
+            "the onchange has been applied"
+        );
+
+        // enter an invalid value in a float, and check that no onchange has
+        // been applied
+        await editInput(target, '.o_field_widget[name="int_field"] input', "123a");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').value,
+            "123",
+            "the onchange has not been applied"
+        );
+
+        // save, and check that the int_field input is marked as invalid
+        await click(target.querySelector(".o_form_button_save"));
+        assert.hasClass(
+            target.querySelector('.o_field_widget[name="int_field"]'),
+            "o_field_invalid",
+            "input int_field is marked as invalid"
+        );
+
+        assert.verifySteps(["get_views", "read", "onchange"]);
+    });
+
+    QUnit.test("rpc complete after destroying parent", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <button name="update_module" type="object" class="o_form_button_update"/>
+                </form>`,
+            "partner,false,list": `<tree><field name="display_name"/></tree>`,
+            "partner,false,search": "<search></search>",
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                res_id: 1,
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+                target: "new",
+            },
+            2: {
+                id: 2,
+                name: "Partner 2",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "list"]],
+            },
+        };
+        const def = makeDeferred();
+        const mockRPC = async (route, args) => {
+            if (args.method === "update_module") {
+                await def;
+                return { type: "ir.actions.act_window_close" };
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 1);
+        assert.containsOnce(target, ".o_form_view");
+
+        // should not crash when the call to "update_module" returns, as we should not
+        // try to reload the form view, which will no longer be in the DOM
+        await click(target.querySelector(".o_form_button_update"));
+
+        // simulate that we executed another action before update_module returns
+        await doAction(webClient, 2);
+        assert.containsOnce(target, ".o_list_view");
+
+        def.resolve(); // call to update_module finally returns
+        await nextTick();
+        assert.containsOnce(target, ".o_list_view");
+    });
+
+    QUnit.test("onchanges that complete after discarding", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.int_field = obj.foo.length + 1000;
+            },
+        };
+
+        const def = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><field name="int_field"/></form>`,
+            resId: 2,
+            async mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step("onchange is done");
+                    await def;
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"]').textContent,
+            "blip",
+            "field foo should be displayed to initial value"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // edit a field and discard
+        await editInput(target, ".o_field_widget[name=foo] input", "1234");
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.containsNone(target, ".modal");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"]').textContent,
+            "blip",
+            "field foo should still be displayed to initial value"
+        );
+
+        // complete the onchange
+        def.resolve();
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"]').textContent,
+            "blip",
+            "field foo should still be displayed to initial value"
+        );
+        assert.verifySteps(["onchange is done"]);
+    });
+
+    QUnit.test("discarding before save returns", async function (assert) {
+        const def = makeDeferred();
+        let form;
+        patchWithCleanup(FormController.prototype, {
+            setup() {
+                this._super(...arguments);
+                form = this;
+            },
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/></form>`,
+            resId: 2,
+            async mockRPC(route, args) {
+                if (args.method === "write") {
+                    await def;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
+
+        await editInput(target, ".o_field_widget[name=foo] input", "1234");
+
+        // save the value and discard directly
+        await click(target.querySelector(".o_form_button_save"));
+        assert.ok(target.querySelector(".o_form_button_cancel").disabled);
+        // with form view extensions, it may happen that someone tries to discard
+        // while there is a pending save, so we simulate this here
+        form.discard();
+        await nextTick();
+
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').value,
+            "1234",
+            "field foo should still contain new value"
+        );
+        assert.containsNone(target, ".modal", "Confirm dialog should not be displayed");
+
+        // complete the write
+        def.resolve();
+        await nextTick();
+        assert.containsNone(target, ".modal", "Confirm dialog should not be displayed");
+        assert.containsOnce(target, ".o_form_view .o_form_readonly");
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"]').textContent,
+            "1234",
+            "value should have been saved and rerendered in readonly"
+        );
+    });
+
+    QUnit.test("unchanged relational data is sent for onchanges", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.records[1].p = [4];
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.int_field = obj.foo.length + 1000;
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <field name="bar"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.deepEqual(
+                        args.args[1].p,
+                        [[4, 4, false]],
+                        "should send a command for field p even if it hasn't changed"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger an onchange");
+    });
+
+    QUnit.test("onchanges on unknown fields of o2m are ignored", async function (assert) {
+        // many2one fields need to be postprocessed (the onchange returns [id,
+        // display_name]), but if we don't know the field, we can't know it's a
+        // many2one, so it isn't ignored, its value is an array instead of a
+        // dataPoint id, which may cause errors later (e.g. when saving).
+        assert.expect(2);
+
+        serverData.models.partner.records[1].p = [4];
+        serverData.models.partner.onchanges = {
+            foo: function () {},
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <field name="bar"/>
+                        </tree>
+                        <form>
+                            <field name="foo"/>
+                            <field name="product_id"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: {
+                            p: [
+                                [5],
+                                [
+                                    1,
+                                    4,
+                                    {
+                                        foo: "foo changed",
+                                        product_id: [37, "xphone"],
+                                    },
+                                ],
+                            ],
+                        },
+                    });
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].p,
+                        [
+                            [
+                                1,
+                                4,
+                                {
+                                    foo: "foo changed",
+                                },
+                            ],
+                        ],
+                        "should only write value of known fields"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger an onchange");
+
+        assert.strictEqual(
+            target.querySelector(".o_data_row td").textContent,
+            "foo changed",
+            "onchange should have been correctly applied on field in o2m list"
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("onchange value are not discarded on o2m edition", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.records[1].p = [4];
+        serverData.models.partner.onchanges = {
+            foo: function () {},
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <field name="bar"/>
+                        </tree>
+                        <form>
+                            <field name="foo"/>
+                            <field name="product_id"/>
+                        </form>
+                    </field>
+                </form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        value: {
+                            p: [[5], [1, 4, { foo: "foo changed" }]],
+                        },
+                    });
+                }
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1].p,
+                        [
+                            [
+                                1,
+                                4,
+                                {
+                                    foo: "foo changed",
+                                },
+                            ],
+                        ],
+                        "should only write value of known fields"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_data_row td").textContent,
+            "My little Foo Value",
+            "the initial value should be the default one"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger an onchange");
+
+        assert.strictEqual(
+            target.querySelector(".o_data_row td").textContent,
+            "foo changed",
+            "onchange should have been correctly applied on field in o2m list"
+        );
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent.trim(),
+            "Open: one2many field",
+            "the field string is displayed in the modal title"
+        );
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget input").value,
+            "foo changed",
+            "the onchange value hasn't been discarded when opening the o2m"
+        );
+    });
+
+    QUnit.test(
+        "args of onchanges in o2m fields are correct (inline edition)",
+        async function (assert) {
+            serverData.models.partner.records[1].p = [4];
+            serverData.models.partner.fields.p.relation_field = "rel_field";
+            serverData.models.partner.fields.int_field.default = 14;
+            serverData.models.partner.onchanges = {
+                int_field: function (obj) {
+                    obj.foo = "[" + obj.rel_field.foo + "] " + obj.int_field;
+                },
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="foo"/>
+                                <field name="int_field"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 2,
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row td").textContent,
+                "My little Foo Value",
+                "the initial value should be the default one"
+            );
+
+            await click(target.querySelectorAll(".o_data_row td")[1]);
+            await editInput(target, ".o_field_widget[name=int_field] input", 77);
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row input").value,
+                "[blip] 77",
+                "onchange should have been correctly applied"
+            );
+
+            // create a new o2m record
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            assert.strictEqual(
+                target.querySelector(".o_data_row input").value,
+                "[blip] 14",
+                "onchange should have been correctly applied after default get"
+            );
+        }
+    );
+
+    QUnit.test(
+        "args of onchanges in o2m fields are correct (dialog edition)",
+        async function (assert) {
+            serverData.models.partner.records[1].p = [4];
+            serverData.models.partner.fields.p.relation_field = "rel_field";
+            serverData.models.partner.fields.int_field.default = 14;
+            serverData.models.partner.onchanges = {
+                int_field: function (obj) {
+                    obj.foo = "[" + obj.rel_field.foo + "] " + obj.int_field;
+                },
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="p" string="custom label">
+                            <tree>
+                                <field name="foo"/>
+                            </tree>
+                            <form>
+                                <field name="foo"/>
+                                <field name="int_field"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 2,
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row td").textContent,
+                "My little Foo Value",
+                "the initial value should be the default one"
+            );
+
+            await click(target.querySelector(".o_data_row td"));
+            await editInput(target, ".modal .o_field_widget[name=int_field] input", 77);
+            assert.strictEqual(
+                target.querySelector(".modal .o_field_widget[name=foo] input").value,
+                "[blip] 77",
+                "onchange should have been correctly applied"
+            );
+            await click(target.querySelector(".modal-footer .btn-primary"));
+            assert.strictEqual(
+                target.querySelector(".o_data_row td").textContent,
+                "[blip] 77",
+                "onchange should have been correctly applied"
+            );
+
+            // create a new o2m record
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            assert.strictEqual(
+                target.querySelector(".modal .modal-title").textContent.trim(),
+                "Create custom label",
+                "the custom field label is applied in the modal title"
+            );
+            assert.strictEqual(
+                target.querySelector(".modal .o_field_widget[name=foo] input").value,
+                "[blip] 14",
+                "onchange should have been correctly applied after default get"
+            );
+            await click(target.querySelector(".modal-footer .btn-primary"));
+            assert.strictEqual(
+                target.querySelectorAll(".o_data_row")[1].querySelector("td").textContent,
+                "[blip] 14",
+                "onchange should have been correctly applied after default get"
+            );
+        }
+    );
+
+    QUnit.test(
+        "context of onchanges contains the context of changed fields",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.onchanges = {
+                foo: function () {},
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo" context="{'test': 1}"/>
+                        <field name="int_field" context="{'int_ctx': 1}"/>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        assert.strictEqual(
+                            args.kwargs.context.test,
+                            1,
+                            "the context of the field triggering the onchange should be given"
+                        );
+                        assert.strictEqual(
+                            args.kwargs.context.int_ctx,
+                            undefined,
+                            "the context of other fields should not be given"
+                        );
+                    }
+                },
+                resId: 2,
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+            await editInput(target, ".o_field_widget[name=foo] input", "coucou");
+        }
+    );
+
+    QUnit.test("clicking on a stat button with a context", async function (assert) {
+        assert.expect(1);
+
+        const actionService = {
+            start() {
+                return {
+                    doActionButton(args) {
+                        // button context should have been evaluated and given to the
+                        // action, with magic keys but without previous context
+                        assert.deepEqual(args.buttonContext, { test: 2 });
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <button class="oe_stat_button" type="action" name="1" context="{'test': active_id}">
+                                <field name="qux" widget="statinfo"/>
+                            </button>
+                        </div>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            context: { some_context: true },
+        });
+
+        await click(target.querySelector(".oe_stat_button"));
+    });
+
+    QUnit.test("clicking on a stat button with no context", async function (assert) {
+        assert.expect(1);
+
+        const actionService = {
+            start() {
+                return {
+                    doActionButton(args) {
+                        // button context should have been evaluated and given to the
+                        // action, with magic keys but without previous context
+                        assert.deepEqual(args.buttonContext, {});
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <button class="oe_stat_button" type="action" name="1">
+                                <field name="qux" widget="statinfo"/>
+                            </button>
+                        </div>
+                    </sheet>
+                </form>`,
+            resId: 2,
+            context: { some_context: true },
+        });
+
+        await click(target.querySelector(".oe_stat_button"));
+    });
+
+    QUnit.test("diplay a stat button outside a buttonbox", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <button class="oe_stat_button" type="action" name="1">
+                            <field name="int_field" widget="statinfo"/>
+                        </button>
+                    </sheet>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.containsOnce(
+            target,
+            "button .o_field_widget",
+            "a field widget should be display inside the button"
+        );
+        assert.strictEqual(
+            target.querySelector("button .o_field_widget").children.length,
+            2,
+            "the field widget should have 2 children, the text and the value"
+        );
+        assert.strictEqual(
+            parseInt(target.querySelector("button .o_field_widget .o_stat_value").textContent),
+            9,
+            "the value rendered should be the same as the field value"
+        );
+    });
+
+    QUnit.test("diplay something else than a button in a buttonbox", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div name="button_box" class="oe_button_box">
+                        <button type="object" class="oe_stat_button" icon="fa-check-square">
+                            <field name="bar"/>
+                        </button>
+                        <label/>
+                    </div>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".oe_button_box").children.length,
+            2,
+            "button box should contain two children"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box > .oe_stat_button",
+            "button box should only contain one button"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box > label",
+            "button box should only contain one label"
+        );
+    });
+
+    QUnit.test(
+        "invisible fields are not considered as visible in a buttonbox",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <div name="button_box" class="oe_button_box">
+                            <field name="foo" invisible="1"/>
+                            <field name="bar" invisible="1"/>
+                            <field name="int_field" invisible="1"/>
+                            <field name="qux" invisible="1"/>
+                            <field name="display_name" invisible="1"/>
+                            <field name="state" invisible="1"/>
+                            <field name="date" invisible="1"/>
+                            <field name="datetime" invisible="1"/>
+                            <button type="object" class="oe_stat_button" icon="fa-check-square"/>
+                        </div>
+                    </form>`,
+                resId: 2,
+            });
+
+            assert.strictEqual(
+                target.querySelector(".oe_button_box").children.length,
+                1,
+                "button box should contain only one child"
+            );
+            assert.hasClass(
+                target.querySelector(".oe_button_box"),
+                "o_not_full",
+                "the buttonbox should not be full"
+            );
+        }
+    );
+
+    QUnit.test("display correctly buttonbox, in large size class", async function (assert) {
+        const uiService = {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    get() {
+                        return false;
+                    },
+                });
+                return {
+                    get size() {
+                        return 6;
+                    },
+                    isSmall: false,
+                };
+            },
+        };
+        registry.category("services").add("ui", uiService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div name="button_box" class="oe_button_box">
+                        <button type="object" class="oe_stat_button" icon="fa-check-square">
+                            <field name="bar"/>
+                        </button>
+                        <button type="object" class="oe_stat_button" icon="fa-check-square">
+                            <field name="foo"/>
+                        </button>
+                    </div>
+                </form>`,
+            resId: 2,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".oe_button_box").children.length,
+            2,
+            "button box should contain two children"
+        );
+    });
+
+    QUnit.test("one2many default value creation", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.records[0].product_ids = [37];
+        serverData.models.partner.fields.product_ids.default = [
+            [0, 0, { name: "xdroid", partner_type_id: 12 }],
+        ];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_ids" nolabel="1">
+                        <tree editable="top" create="0">
+                            <field name="name" readonly="1"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    const command = args.args[0].product_ids[0];
+                    assert.strictEqual(
+                        command[2].partner_type_id,
+                        12,
+                        "the default partner_type_id should be equal to 12"
+                    );
+                }
+            },
+        });
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("many2manys inside one2manys are saved correctly", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="timmy" widget="many2many_tags"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    const command = args.args[0].p;
+                    assert.deepEqual(
+                        command,
+                        [
+                            [
+                                0,
+                                command[0][1],
+                                {
+                                    timmy: [[6, false, [12]]],
+                                },
+                            ],
+                        ],
+                        "the default partner_type_id should be equal to 12"
+                    );
+                }
+            },
+        });
+
+        // add a o2m subrecord with a m2m tag
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await selectDropdownItem(target, "timmy", "gold");
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test(
+        "one2manys (list editable) inside one2manys are saved correctly",
+        async function (assert) {
+            assert.expect(3);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree><field name="p"/></tree>
+                            <form>
+                                <field name="p">
+                                    <tree editable="top">
+                                        <field name="display_name"/>
+                                    </tree>
+                                </field>
+                            </form>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "create") {
+                        assert.deepEqual(
+                            args.args[0].p,
+                            [
+                                [
+                                    0,
+                                    args.args[0].p[0][1],
+                                    {
+                                        p: [
+                                            [
+                                                0,
+                                                args.args[0].p[0][2].p[0][1],
+                                                { display_name: "xtv" },
+                                            ],
+                                        ],
+                                    },
+                                ],
+                            ],
+                            "create should be called with the correct arguments"
+                        );
+                    }
+                },
+            });
+
+            // add a o2m subrecord
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            await click(target.querySelector(".modal .o_field_x2many_list_row_add a"));
+            await editInput(target, ".modal .o_field_widget[name=display_name] input", "xtv");
+            await click(target.querySelector(".modal-footer .btn-primary"));
+            assert.containsNone(target, ".modal", "dialog should be closed");
+            assert.strictEqual(
+                target.querySelector(".o_data_cell").textContent,
+                "1 record",
+                "the cell should contains the number of record: 1"
+            );
+
+            await click(target.querySelector(".o_form_button_save"));
+        }
+    );
+
+    QUnit.test(
+        "oe_read_only and oe_edit_only classNames on fields inside groups",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="foo" class="oe_read_only"/>
+                            <field name="bar" class="oe_edit_only"/>
+                        </group>
+                    </form>`,
+                resId: 1,
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_form_view .o_form_readonly",
+                "form should be in readonly mode"
+            );
+            assert.isVisible(target.querySelector(".o_field_widget[name=foo]"));
+            assert.isVisible(target.querySelector(".o_form_label"));
+            // WOWL-KANBAN: relies on o_form_view scss rules which do not apply for now
+            // assert.isNotVisible(target.querySelector(".o_field_widget[name=bar]"));
+            // assert.isNotVisible(target.querySelectorAll(".o_form_label")[1]);
+
+            await click(target.querySelector(".o_form_button_edit"));
+            assert.containsOnce(
+                target,
+                ".o_form_view .o_form_editable",
+                "form should be in readonly mode"
+            );
+            // WOWL-KANBAN: relies on o_form_view scss rules which do not apply for now
+            // assert.isNotVisible(target.querySelector(".o_field_widget[name=foo]"));
+            // assert.isNotVisible(target.querySelector(".o_form_label"));
+            assert.isVisible(target.querySelector(".o_field_widget[name=bar]"));
+            assert.isVisible(target.querySelectorAll(".o_form_label")[1]);
+        }
+    );
+
+    QUnit.test("oe_read_only className is handled in list views", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="foo"/>
+                                <field name="display_name" class="oe_read_only"/>
+                                <field name="bar"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_form_view .o_form_readonly",
+            "form should be in readonly mode"
+        );
+        assert.isVisible(
+            target.querySelector('.o_field_one2many thead th[data-name="display_name"]'),
+            "display_name cell should be visible in readonly mode"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector('th[data-name="foo"]').style.width,
+            "100%",
+            'As the only visible char field, "foo" should take 100% of the remaining space'
+        );
+
+        assert.containsNone(
+            target,
+            "th.oe_read_only",
+            'the column with "oe_read_only" should not be visible in edit mode'
+        );
+        assert.containsOnce(target, ".o_form_view .o_form_editable", "form should be in edit mode");
+        assert.isNotVisible(
+            target.querySelector('th[data-name="display_name"]'),
+            "display_name cell should not be visible in edit mode"
+        );
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+
+        assert.containsNone(
+            target,
+            "th.oe_read_only",
+            'the column with "oe_read_only" should not be visible in edit mode'
+        );
+
+        await clickSave(target);
+
+        assert.hasClass(
+            target.querySelector('[name="display_name"]'),
+            "oe_read_only",
+            "display_name input should have oe_read_only class"
+        );
+    });
+
+    QUnit.test("oe_edit_only className is handled in list views", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="foo"/>
+                                <field name="display_name" class="oe_edit_only"/>
+                                <field name="bar"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_form_view .o_form_readonly",
+            "form should be in readonly mode"
+        );
+        assert.isNotVisible(
+            target.querySelector('.o_field_one2many thead th[data-name="display_name"]'),
+            "display_name cell should not be visible in readonly mode"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(target, ".o_form_view .o_form_editable", "form should be in edit mode");
+        assert.isVisible(
+            target.querySelector('.o_field_one2many thead th[data-name="display_name"]'),
+            "display_name cell should be visible in edit mode"
+        );
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.isVisible(
+            target.querySelector(".o_selected_row .o_data_cell.oe_edit_only"),
+            "display_name cell should be visible in edit mode"
+        );
+    });
+
+    QUnit.test("*_view_ref in context are passed correctly", async function (assert) {
+        serverData.views = {
+            "partner_type,module.tree_view_ref,list": "<tree/>",
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="timmy" widget="one2many" context="{'tree_view_ref':'module.tree_view_ref'}"/>
+                </form>`,
+            resId: 1,
+            resIds: [1, 2],
+            mockRPC(route, args) {
+                assert.step(`${args.kwargs.context.some_context}`);
+                if (args.method === "get_views" && args.model === "partner_type") {
+                    // get_views for the x2many field
+                    assert.step(args.kwargs.context.tree_view_ref);
+                }
+            },
+            context: { some_context: 354 },
+        });
+
+        assert.verifySteps([
+            "354", // main get_views
+            "354", // x2many get_views
+            "module.tree_view_ref", // x2many get_views
+            "354", // read
+        ]);
+
+        // reload to check that the record's context hasn't been modified
+        await click(target.querySelector(".o_pager_next"));
+        assert.verifySteps(["354"]);
+    });
+
+    QUnit.test("non inline subview and create=0 in action context", async function (assert) {
+        // the create=0 should apply on the main view (form), but not on subviews
+        // this works because we pass the "base_model" in the context for the "get_views" call
+        serverData.views = {
+            "product,false,kanban": `
+                <kanban>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="name"/></div>
+                    </t></templates>
+                </kanban>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="product_ids" mode="kanban" widget="one2many"/></form>',
+            resId: 1,
+            context: { create: false },
+        });
+
+        assert.containsNone(target, ".o_form_button_create");
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsOnce(target, ".o-kanban-button-new");
+    });
+
+    QUnit.test("readonly fields with modifiers may be saved", async function (assert) {
+        // the readonly property on the field description only applies on view,
+        // this is not a DB constraint. It should be seen as a default value,
+        // that may be overridden in views, for example with modifiers. So
+        // basically, a field defined as readonly may be edited.
+        assert.expect(3);
+
+        serverData.models.partner.fields.foo.readonly = true;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" attrs="{'readonly': [('bar','=',False)]}"/>
+                    <field name="bar"/>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1], { foo: "New foo value" });
+                }
+            },
+        });
+
+        // bar being set to true, foo shouldn't be readonly and thus its value
+        // could be saved, even if in its field description it is readonly
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.containsOnce(
+            target,
+            '.o_field_widget[name="foo"] input',
+            "foo field should be editable"
+        );
+        await editInput(target, '.o_field_widget[name="foo"] input', "New foo value");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo]").textContent,
+            "New foo value",
+            "new value for foo field should have been saved"
+        );
+    });
+
+    QUnit.test("readonly set by modifier do not break many2many_tags", async function (assert) {
+        serverData.models.partner.onchanges = {
+            bar: function (obj) {
+                obj.timmy = [[6, false, [12]]];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="bar"/>
+                    <field name="timmy" widget="many2many_tags" attrs="{'readonly': [('bar','=',True)]}"/>
+                </form>`,
+            resId: 5,
+        });
+
+        assert.containsNone(target, ".o_field_widget[name=timmy] .o_tag");
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_field_widget[name=bar] input"));
+        assert.containsOnce(target, ".o_field_widget[name=timmy] .o_tag");
+    });
+
+    QUnit.test("check if id and active_id are defined", async function (assert) {
+        assert.expect(2);
+
+        let checkOnchange = false;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" context="{'default_trululu': active_id, 'current_id': id}">
+                        <tree><field name="trululu"/></tree>
+                        <form><field name="trululu"/></form>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange" && checkOnchange) {
+                    assert.strictEqual(
+                        args.kwargs.context.current_id,
+                        false,
+                        "current_id should be false"
+                    );
+                    assert.strictEqual(
+                        args.kwargs.context.default_trululu,
+                        false,
+                        "default_trululu should be false"
+                    );
+                }
+            },
+        });
+
+        checkOnchange = true;
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+    });
+
+    QUnit.test("modifiers are considered on multiple <footer/> tags", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="bar"/>
+                    <footer attrs="{'invisible': [('bar','=',False)]}">
+                        <button>Hello</button>
+                        <button>World</button>
+                    </footer>
+                    <footer attrs="{'invisible': [('bar','!=',False)]}">
+                        <button>Foo</button>
+                    </footer>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                res_id: 1,
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+                target: "new",
+            },
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+
+        assert.deepEqual(
+            getVisibleButtonTexts(),
+            ["Hello", "World"],
+            "only the first button section should be visible"
+        );
+
+        await click(target.querySelector(".o_field_boolean input"));
+
+        assert.deepEqual(
+            getVisibleButtonTexts(),
+            ["Foo"],
+            "only the second button section should be visible"
+        );
+
+        function getVisibleButtonTexts() {
+            return [...target.querySelectorAll(".modal-footer button:not(.d-none)")].map((x) =>
+                x.innerHTML.trim()
+            );
+        }
+    });
+
+    QUnit.test("buttons in footer are moved to $buttons if necessary", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="foo"/>
+                    <footer>
+                        <button string="Create" type="object" class="infooter"/>
+                    </footer>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+                target: "new",
+            },
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+        await nextTick();
+
+        assert.containsOnce(target.querySelector(".modal-footer"), "button.infooter");
+        assert.containsNone(target.querySelector(".o_form_view"), "button.infooter");
+    });
+
+    QUnit.test("open new record even with warning message", async function (assert) {
+        serverData.models.partner.onchanges = { foo: true };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><group><field name="foo"/></group></form>`,
+            resId: 2,
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    return Promise.resolve({
+                        warning: {
+                            title: "Warning",
+                            message: "Any warning.",
+                        },
+                    });
+                }
+            },
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "blip",
+            "input should contain record value"
+        );
+        await editInput(target, '.o_field_widget[name="foo"] input', "tralala");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "tralala",
+            "input should contain new value"
+        );
+
+        await click(target.querySelector(".o_form_button_cancel"));
+        await click(target.querySelector(".o_form_button_create"));
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "",
+            "input should have no value after reload"
+        );
+    });
+
+    QUnit.test("render stat button with string inline", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <div class="oe_button_box" name="button_box">
+                            <button string="Inventory Moves" class="oe_stat_button" icon="fa-arrows-v"/>
+                        </div>
+                    </sheet>
+                </form>`,
+        });
+        var $button = target.querySelector(
+            ".o_form_view .o_form_sheet .oe_button_box .oe_stat_button"
+        );
+        assert.strictEqual(
+            $button.textContent,
+            "Inventory Moves",
+            "the stat button should contain a span with the string attribute value"
+        );
+    });
+
+    QUnit.test("open one2many form containing one2many", async function (assert) {
+        serverData.models.partner.records[0].product_ids = [37];
+        serverData.models.product.fields.partner_type_ids = {
+            string: "one2many partner",
+            type: "one2many",
+            relation: "partner_type",
+        };
+        serverData.models.product.records[0].partner_type_ids = [12];
+
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="partner_type_ids">
+                        <tree create="0">
+                            <field name="display_name"/>
+                            <field name="color"/>
+                        </tree>
+                    </field>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_ids" widget="one2many">
+                        <tree create="0">
+                            <field name="display_name"/>
+                            <field name="partner_type_ids"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row .o_data_cell")[1].textContent,
+            "1 record",
+            "the cell should contains the number of record: 1"
+        );
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsN(
+            target,
+            ".modal .o_data_row .o_data_cell",
+            2,
+            "the row should contains the 2 fields defined in the form view"
+        );
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".modal .o_data_cell")),
+            ["gold", "2"],
+            "the value of the fields should be fetched and displayed"
+        );
+        assert.verifySteps(
+            ["get_views", "read", "read", "get_views", "read", "read"],
+            "there should be 4 read rpcs"
+        );
+    });
+
+    QUnit.test("in edit mode, first field is focused", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/><field name="bar"/></form>',
+            resId: 1,
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector('.o_field_widget[name="foo"] input')
+        );
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="foo"] input').selectionStart,
+            3,
+            "cursor should be at the end"
+        );
+    });
+
+    QUnit.test("autofocus fields are focused", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="int_field"/><field name="foo" default_focus="1"/></form>',
+            resId: 1,
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector('.o_field_widget[name="foo"] input')
+        );
+    });
+
+    QUnit.test("in create mode, autofocus fields are focused", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="int_field"/><field name="foo" default_focus="1"/></form>',
+        });
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector('.o_field_widget[name="foo"] input')
+        );
+    });
+
+    QUnit.test("autofocus first visible field", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="int_field" invisible="1"/><field name="foo"/></form>',
+        });
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector('.o_field_widget[name="foo"] input')
+        );
+    });
+
+    QUnit.test(
+        "no autofocus with disable_autofocus option [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: '<form disable_autofocus="1"><field name="int_field"/></form>',
+            });
+
+            assert.notStrictEqual(
+                document.activeElement,
+                target.querySelector('.o_field_widget[name="int_field"] input')
+            );
+            await click(target.querySelector(".o_form_button_save"));
+            await click(target.querySelector(".o_form_button_edit"));
+            assert.notStrictEqual(
+                document.activeElement,
+                target.querySelector('.o_field_widget[name="int_field"] input')
+            );
+        }
+    );
+
+    QUnit.test("In READ mode, focus the first primary button of the form", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="state" invisible="1"/>
+                        <header>
+                            <button name="post" class="btn-primary firstButton" string="Confirm" type="object"/>
+                            <button name="post" class="btn-primary secondButton" string="Confirm2" type="object"/>
+                        </header>
+                        <sheet>
+                            <group>
+                                <div class="oe_title">
+                                    <field name="display_name"/>
+                                </div>
+                            </group>
+                        </sheet>
+                    </form>`,
+            resId: 2,
+        });
+        assert.strictEqual(target.querySelector("button.firstButton"), document.activeElement);
+    });
+
+    QUnit.test(
+        "In READ mode, focus EDIT button no primary button on the form",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="state" invisible="1"/>
+                        <header>
+                            <button name="post" class="not-primary" string="Confirm" type="object"/>
+                            <button name="post" class="not-primary" string="Confirm2" type="object"/>
+                        </header>
+                        <sheet>
+                            <group>
+                                <div class="oe_title">
+                                    <field name="display_name"/>
+                                </div>
+                            </group>
+                        </sheet>
+                    </form>`,
+                resId: 2,
+            });
+            assert.strictEqual(target.querySelector(".o_form_button_edit"), document.activeElement);
+        }
+    );
+
+    QUnit.test("check scroll on small height screens", async function (assert) {
+        serverData.views = {
+            "partner,false,list": '<tree><field name="display_name"/></tree>',
+            "partner_type,false,list": '<tree><field name="name"/></tree>',
+            "product,false,list": '<tree><field name="name"/></tree>',
+            "partner,false,form": '<form><field name="trululu"/></form>',
+        };
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            resId: 2,
+            arch: `
+                <form>
+                    <sheet><group>
+                    <field name="display_name"/>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="p"/>
+                    <field name="timmy"/>
+                    <field name="product_ids"/>
+                    <field name="trululu"/>
+                    </group></sheet>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "get_formview_id") {
+                    return false;
+                }
+            },
+        });
+
+        // we make the content height very small so we can test scrolling.
+        $(".o_content").css({ overflow: "auto", "max-height": "300px" });
+
+        // Open many2one modal, lastActivatedFieldIndex will not set as we directly click on external button
+        await clickEdit(target);
+        assert.strictEqual($(".o_content").scrollTop(), 0, "scroll position should be 0");
+        // simply triggerEvent focus doesn't do the trick (doesn't scroll).
+        target.querySelector("[name='trululu'] input").focus();
+        assert.notStrictEqual($(".o_content").scrollTop(), 0, "scroll position should not be 0");
+
+        await click(target.querySelector(".o_external_button"));
+
+        // Close modal
+        await click(target, '.modal-dialog button[class="close"]');
+        assert.notStrictEqual(
+            $(".o_content").scrollTop(),
+            0,
+            "scroll position should not be 0 after closing modal"
+        );
+
+        assert.containsNone(target, ".modal-dialog", "There should be no modal");
+        assert.doesNotHaveClass(target, "modal-open", "Modal is not said opened");
+    });
+
+    QUnit.test("correct amount of buttons", async function (assert) {
+        let screenSize = 7;
+        const uiService = {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    get() {
+                        return false;
+                    },
+                });
+                return {
+                    get size() {
+                        return screenSize;
+                    },
+                    isSmall: false,
+                };
+            },
+        };
+        registry.category("services").add("ui", uiService, { force: true });
+
+        const buttons = Array(8).join(`
+            <button type="object" class="oe_stat_button" icon="fa-check-square">
+                <field name="bar"/>
+            </button>`);
+
+        // legacySelector = ".oe_stat_button:not(.dropdown-item, .dropdown-toggle)";
+        const statButtonSelector = ".o-form-buttonbox .oe_stat_button:not(.o_dropdown_more)";
+
+        const formView = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div name="button_box" class="oe_button_box">
+                        ${buttons}
+                    </div>
+                </form>`,
+            resId: 2,
+        });
+
+        const assertFormContainsNButtonsWithSizeClass = async function (size_class, n) {
+            screenSize = size_class;
+            formView.render(true); // deep rendering
+            await nextTick();
+            assert.containsN(
+                target,
+                statButtonSelector,
+                n,
+                "The form has the expected amount of buttons"
+            );
+        };
+
+        await assertFormContainsNButtonsWithSizeClass(0, 2);
+        await assertFormContainsNButtonsWithSizeClass(1, 2);
+        await assertFormContainsNButtonsWithSizeClass(2, 2);
+        await assertFormContainsNButtonsWithSizeClass(3, 4);
+        await assertFormContainsNButtonsWithSizeClass(4, 7);
+        await assertFormContainsNButtonsWithSizeClass(5, 7);
+        await assertFormContainsNButtonsWithSizeClass(6, 7);
+    });
+
+    QUnit.test("can set bin_size to false in context", async function (assert) {
+        assert.expect(1);
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resId: 1,
+            context: {
+                bin_size: false,
+            },
+            mockRPC(route, args) {
+                if (args.method === "read") {
+                    assert.strictEqual(
+                        args.kwargs.context.bin_size,
+                        false,
+                        "bin_size should always be in the context and should be false"
+                    );
+                }
+            },
+        });
+    });
+
+    QUnit.test("create with false values", async function (assert) {
+        assert.expect(1);
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="bar"/></form>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.strictEqual(args.args[0].bar, false);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("open one2many form containing many2many_tags", async function (assert) {
+        serverData.models.partner.records[0].product_ids = [37];
+        serverData.models.product.fields.partner_type_ids = {
+            string: "many2many partner_type",
+            type: "many2many",
+            relation: "partner_type",
+        };
+        serverData.models.product.records[0].partner_type_ids = [12, 14];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="product_ids">
+                        <tree create="0">
+                            <field name="display_name"/>
+                            <field name="partner_type_ids" widget="many2many_tags"/>
+                        </tree>
+                        <form>
+                            <group>
+                                <label for="partner_type_ids"/>
+                                <div>
+                                    <field name="partner_type_ids" widget="many2many_tags"/>
+                                </div>
+                            </group>
+                        </form>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.verifySteps(["get_views", "read", "read", "read"]);
+    });
+
+    QUnit.test("onchanges are applied before checking if it can be saved", async function (assert) {
+        serverData.models.partner.onchanges.foo = function (obj) {};
+        serverData.models.partner.fields.foo.required = true;
+
+        const notificationService = makeFakeNotificationService((msg, options) => {
+            assert.step(options.type);
+        });
+        registry.category("services").add("notification", notificationService, { force: true });
+
+        const def = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: "<form><field name='foo'/></form>",
+            resId: 2,
+            async mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "onchange") {
+                    await def;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "");
+        await click(target.querySelector(".o_form_button_save"));
+
+        def.resolve();
+        await nextTick();
+
+        assert.verifySteps(["get_views", "read", "onchange", "danger"]);
+    });
+
+    QUnit.test("display toolbar", async function (assert) {
+        assert.expect(7);
+
+        const actionService = {
+            start() {
+                return {
+                    doAction(action, options) {
+                        assert.strictEqual(action, 29);
+                        assert.strictEqual(options.additionalContext.active_id, 1);
+                        assert.deepEqual(options.additionalContext.active_ids, [1]);
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            resId: 1,
+            arch: `<form><field name="bar"/></form>`,
+            info: {
+                actionMenus: {
+                    action: [
+                        {
+                            id: 29,
+                            name: "Action partner",
+                        },
+                    ],
+                },
+            },
+        });
+
+        assert.containsNone(target, ".o_cp_action_menus .dropdown-toggle:contains(Print)");
+        assert.containsOnce(target, ".o_cp_action_menus .dropdown-toggle:contains(Action)");
+
+        await toggleActionMenu(target);
+        assert.containsN(
+            target,
+            ".o_cp_action_menus .dropdown-item",
+            3,
+            "there should be 3 actions"
+        );
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_cp_action_menus .dropdown-item")),
+            ["Duplicate", "Delete", "Action partner"]
+        );
+
+        await toggleMenuItem(target, "Action partner");
+    });
+
+    QUnit.test("control panel is not present in FormViewDialogs", async function (assert) {
+        serverData.models.partner.records[0].product_id = 37;
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="display_name"/>
+                </form>`,
+            "product,false,list": '<tree><field name="display_name"/></tree>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form><field name="product_id"/></form>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/product/get_formview_id") {
+                    return false;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_external_button"));
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(
+            target,
+            ".o_control_panel",
+            "control panel is present in the main form view"
+        );
+        assert.containsNone(
+            target,
+            ".modal .o_control_panel",
+            "control panel is not present in dialogs"
+        );
+    });
+
+    QUnit.test("check interactions between multiple FormViewDialogs", async function (assert) {
+        assert.expect(8);
+
+        serverData.models.product.fields.product_ids = {
+            string: "one2many product",
+            type: "one2many",
+            relation: "product",
+        };
+
+        serverData.models.partner.records[0].product_id = 37;
+        serverData.views = {
+            "product,false,form": `
+                <form>
+                    <field name="display_name"/>
+                    <field name="product_ids"/>
+                </form>`,
+            "product,false,list": '<tree><field name="display_name"/></tree>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form><field name="product_id"/></form>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/product/get_formview_id") {
+                    return false;
+                } else if (args.method === "write") {
+                    assert.strictEqual(args.model, "product");
+                    assert.strictEqual(args.args[1].product_ids[0][2].display_name, "xtv");
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        // Open first dialog
+        await click(target.querySelector(".o_external_button"));
+        assert.containsOnce(target, ".modal");
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent.trim(),
+            "Open: Product"
+        );
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=display_name] input").value,
+            "xphone"
+        );
+
+        // Open second dialog
+        await click(target.querySelector(".modal .o_field_x2many_list_row_add a"));
+        assert.containsN(target, ".modal", 2);
+        // Add new value
+        const secondModal = target.querySelectorAll(".modal")[1];
+        await editInput(secondModal, ".o_field_widget[name=display_name] input", "xtv");
+        await click(secondModal.querySelector(".modal-footer .btn-primary"));
+        assert.containsOnce(target, ".modal");
+
+        // Check that data in first dialog is correctly updated
+        assert.strictEqual(
+            target.querySelector(".modal .o_data_row .o_data_cell").textContent,
+            "xtv"
+        );
+        await click(target.querySelector(".modal .modal-footer .btn-primary:not(.d-none"));
+    });
+
+    QUnit.test("fields and record contexts are not mixed", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="trululu" context="{'test': 1}"/></form>`,
+            mockRPC(route, args) {
+                if (args.method === "name_search") {
+                    assert.strictEqual(args.kwargs.context.test, 1);
+                    assert.notOk("mainContext" in args.kwargs.context);
+                }
+            },
+            resId: 2,
+            context: { mainContext: 3 },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_field_widget[name=trululu] input"));
+    });
+
+    QUnit.test(
+        "do not activate an hidden tab when switching between records",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <notebook>
+                                <page string="Foo" attrs='{"invisible": [["id", "=", 2]]}'>
+                                    <field name="foo"/>
+                                </page>
+                                <page string="Bar">
+                                    <field name="bar"/>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+                resIds: [1, 2],
+                resId: 1,
+            });
+
+            assert.containsN(target, ".o_notebook .nav-item", 2, "both tabs should be visible");
+            assert.hasClass(
+                target.querySelector(".o_notebook .nav-link"),
+                "active",
+                "first tab should be active"
+            );
+
+            // click on the pager to switch to the next record
+            await click(target.querySelector(".o_pager_next"));
+
+            assert.containsOnce(target, ".o_notebook .nav-item");
+            assert.hasClass(
+                target.querySelector(".o_notebook .nav-link"),
+                "active",
+                "the visible tab should be active"
+            );
+
+            // click on the pager to switch back to the previous record
+            await click(target.querySelector(".o_pager_previous"));
+
+            assert.containsN(target, ".o_notebook .nav-item", 2, "both tabs should be visible");
+            assert.hasClass(
+                target.querySelectorAll(".o_notebook .nav-link")[1],
+                "active",
+                "second tab should be active"
+            );
+        }
+    );
+
+    QUnit.test("support anchor tags with action type", async function (assert) {
+        assert.expect(2);
+
+        const actionService = {
+            start() {
+                return { doActionButton: (action) => assert.strictEqual(action.name, "42") };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <a type="action" name="42" class="btn-primary"><i class="fa fa-arrow-right"/> Click me !</a>
+                </form>`,
+            resId: 1,
+        });
+        await click(target.querySelector("a[type='action']"));
+        assert.hasClass(
+            target.querySelector("a[type='action']"),
+            "btn-primary",
+            "classname is given if set on the <a> element"
+        );
+    });
+
+    QUnit.test(
+        "do not perform extra RPC to read invisible many2one fields",
+        async function (assert) {
+            // This test isn't really meaningful anymore, since default_get and (first) onchange rpcs
+            // have been merged in a single onchange rpc, returning nameget for many2one fields. But it
+            // isn't really costly, and it still checks rpcs done when creating a new record with a m2o.
+            serverData.models.partner.fields.trululu.default = 2;
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="trululu" invisible="1"/></form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+            assert.verifySteps(["get_views", "onchange"]);
+        }
+    );
+
+    QUnit.test("do not perform extra RPC to read invisible x2many fields", async function (assert) {
+        serverData.models.partner.records[0].p = [2]; // one2many
+        serverData.models.partner.records[0].product_ids = [37]; // one2many
+        serverData.models.partner.records[0].timmy = [12]; // many2many
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <form>
+                        <field name="p" widget="one2many" invisible="1"/>
+                        <field name="product_ids" widget="one2many" invisible="1">
+                            <tree><field name="display_name"/></tree>
+                        </field>
+                        <field name="timmy" invisible="1" widget="many2many_tags"/>
+                    </form>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+            resId: 1,
+        });
+
+        assert.verifySteps(["get_views", "read"]);
+    });
+
+    QUnit.test("default_order on x2many embedded view", async function (assert) {
+        serverData.models.partner.fields.display_name.sortable = true;
+        serverData.models.partner.records[0].p = [1, 4];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree default_order="foo desc">
+                            <field name="display_name"/>
+                            <field name="foo"/>
+                        </tree>
+                        <form><field name="foo"/></form>,
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        function getFooValues(row) {
+            const rows = target.querySelectorAll(".o_data_row");
+            return [...rows].map((r) => r.querySelectorAll(".o_data_cell")[1].textContent);
+        }
+
+        assert.deepEqual(getFooValues(), ["yop", "My little Foo Value"]);
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.containsOnce(target, ".modal");
+        await editInput(target, ".modal .o_field_widget[name=foo] input", "xop");
+        await click(target.querySelector(".modal-footer .o_form_button_save_new"));
+        await editInput(target, ".modal .o_field_widget[name=foo] input", "zop");
+        await click(target.querySelector(".modal-footer .o_form_button_save"));
+
+        // client-side sort
+        assert.deepEqual(getFooValues(), ["zop", "yop", "xop", "My little Foo Value"]);
+
+        // server-side sort
+        await click(target.querySelector(".o_form_button_save"));
+        assert.deepEqual(getFooValues(), ["zop", "yop", "xop", "My little Foo Value"]);
+
+        // client-side sort on edit
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        await editInput(target, ".modal .o_field_widget[name=foo] input", "zzz");
+        await click(target.querySelector(".modal-footer .o_form_button_save"));
+        assert.deepEqual(getFooValues(), ["zzz", "zop", "xop", "My little Foo Value"]);
+    });
+
+    QUnit.test("action context is used when evaluating domains", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="trululu" domain="[('id', 'in', context.get('product_ids', []))]"/>
+                </form>`,
+            resId: 1,
+            context: { product_ids: [45, 46, 47] },
+            mockRPC(route, args) {
+                if (args.method === "name_search") {
+                    assert.deepEqual(
+                        args.kwargs.args[0],
+                        ["id", "in", [45, 46, 47]],
+                        "domain should be properly evaluated"
+                    );
+                }
+            },
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector('.o_field_widget[name="trululu"] input'));
+    });
+
+    QUnit.test("form rendering with groups with col/colspan", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group col="6" class="parent_group">
+                            <group col="4" colspan="3" class="group_4">
+                                <div colspan="3"/>
+                                <div colspan="2"/>
+                                <div/>
+                                <div colspan="4"/>
+                            </group>
+                            <group col="3" colspan="4" class="group_3">
+                                <group col="1" class="group_1">
+                                    <div/>
+                                    <div/>
+                                    <div/>
+                                </group>
+                                <div/>
+                                <group col="3" class="field_group">
+                                    <field name="foo" colspan="3"/>
+                                    <div/>
+                                    <field name="bar" nolabel="1"/>
+                                    <field name="qux"/>
+                                    <field name="int_field" colspan="3" nolabel="1"/>
+                                    <span/>
+                                    <field name="product_id"/>
+                                </group>
+                            </group>
+                        </group>
+                        <group>
+                            <field name="p">
+                                <tree>
+                                    <field name="display_name"/>
+                                    <field name="foo"/>
+                                    <field name="int_field"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        var $parentGroup = $(target.querySelector(".parent_group"));
+        var $group4 = $(target.querySelector(".group_4"));
+        var $group3 = $(target.querySelector(".group_3"));
+        var $group1 = $(target.querySelector(".group_1"));
+        var $fieldGroup = $(target.querySelector(".field_group"));
+
+        // Verify outergroup/innergroup
+        assert.strictEqual($parentGroup[0].tagName, "DIV", ".parent_group should be an outergroup");
+        assert.strictEqual($group4[0].tagName, "TABLE", ".group_4 should be an innergroup");
+        assert.strictEqual($group3[0].tagName, "DIV", ".group_3 should be an outergroup");
+        assert.strictEqual($group1[0].tagName, "TABLE", ".group_1 should be an innergroup");
+        assert.strictEqual($fieldGroup[0].tagName, "TABLE", ".field_group should be an innergroup");
+
+        // Verify .parent_group content
+        var $parentGroupChildren = $parentGroup.children();
+        assert.strictEqual(
+            $parentGroupChildren.length,
+            2,
+            "there should be 2 groups in .parent_group"
+        );
+        assert.ok(
+            $parentGroupChildren.eq(0).is(".o_group_col_6"),
+            "first .parent_group group should be 1/2 parent width"
+        );
+        assert.ok(
+            $parentGroupChildren.eq(1).is(".o_group_col_8"),
+            "second .parent_group group should be 2/3 parent width"
+        );
+
+        // Verify .group_4 content
+        var $group4rows = $group4.find("> tbody > tr");
+        assert.strictEqual($group4rows.length, 3, "there should be 3 rows in .group_4");
+        var $group4firstRowTd = $group4rows.eq(0).children("td");
+        assert.strictEqual($group4firstRowTd.length, 1, "there should be 1 td in first row");
+        assert.hasAttrValue($group4firstRowTd, "colspan", "3", "the first td colspan should be 3");
+        assert.strictEqual(
+            $group4firstRowTd.attr("style").substr(0, 9),
+            "width: 75",
+            "the first td should be 75% width"
+        );
+        assert.strictEqual(
+            $group4firstRowTd.children()[0].tagName,
+            "DIV",
+            "the first td should contain a div"
+        );
+        var $group4secondRowTds = $group4rows.eq(1).children("td");
+        assert.strictEqual($group4secondRowTds.length, 2, "there should be 2 tds in second row");
+        assert.hasAttrValue(
+            $group4secondRowTds.eq(0),
+            "colspan",
+            "2",
+            "the first td colspan should be 2"
+        );
+        assert.strictEqual(
+            $group4secondRowTds.eq(0).attr("style").substr(0, 9),
+            "width: 50",
+            "the first td be 50% width"
+        );
+        assert.hasAttrValue(
+            $group4secondRowTds.eq(1),
+            "colspan",
+            undefined,
+            "the second td colspan should be default one (1)"
+        );
+        assert.strictEqual(
+            $group4secondRowTds.eq(1).attr("style").substr(0, 9),
+            "width: 25",
+            "the second td be 75% width"
+        );
+        var $group4thirdRowTd = $group4rows.eq(2).children("td");
+        assert.strictEqual($group4thirdRowTd.length, 1, "there should be 1 td in third row");
+        assert.hasAttrValue($group4thirdRowTd, "colspan", "4", "the first td colspan should be 4");
+        assert.strictEqual(
+            $group4thirdRowTd.attr("style").substr(0, 10),
+            "width: 100",
+            "the first td should be 100% width"
+        );
+
+        // Verify .group_3 content
+        assert.strictEqual($group3.children().length, 3, ".group_3 should have 3 children");
+        assert.strictEqual(
+            $group3.children(".o_group_col_4").length,
+            3,
+            ".group_3 should have 3 children of 1/3 width"
+        );
+
+        // Verify .group_1 content
+        assert.strictEqual(
+            $group1.find("> tbody > tr").length,
+            3,
+            "there should be 3 rows in .group_1"
+        );
+
+        // Verify .field_group content
+        var $fieldGroupRows = $fieldGroup.find("> tbody > tr");
+        assert.strictEqual($fieldGroupRows.length, 5, "there should be 5 rows in .field_group");
+        var $fieldGroupFirstRowTds = $fieldGroupRows.eq(0).children("td");
+        assert.strictEqual($fieldGroupFirstRowTds.length, 2, "there should be 2 tds in first row");
+        assert.hasClass(
+            $fieldGroupFirstRowTds.eq(0),
+            "o_td_label",
+            "first td should be a label td"
+        );
+        assert.hasAttrValue(
+            $fieldGroupFirstRowTds.eq(1),
+            "colspan",
+            "2",
+            "second td colspan should be given colspan (3) - 1 (label)"
+        );
+        assert.strictEqual(
+            $fieldGroupFirstRowTds.eq(1).attr("style").substr(0, 10),
+            "width: 100",
+            "second td width should be 100%"
+        );
+        var $fieldGroupSecondRowTds = $fieldGroupRows.eq(1).children("td");
+        assert.strictEqual(
+            $fieldGroupSecondRowTds.length,
+            2,
+            "there should be 2 tds in second row"
+        );
+        assert.hasAttrValue(
+            $fieldGroupSecondRowTds.eq(0),
+            "colspan",
+            undefined,
+            "first td colspan should be default one (1)"
+        );
+        assert.strictEqual(
+            $fieldGroupSecondRowTds.eq(0).attr("style").substr(0, 9),
+            "width: 33",
+            "first td width should be 33.3333%"
+        );
+        assert.hasAttrValue(
+            $fieldGroupSecondRowTds.eq(1),
+            "colspan",
+            undefined,
+            "second td colspan should be default one (1)"
+        );
+        assert.strictEqual(
+            $fieldGroupSecondRowTds.eq(1).attr("style").substr(0, 9),
+            "width: 33",
+            "second td width should be 33.3333%"
+        );
+        var $fieldGroupThirdRowTds = $fieldGroupRows.eq(2).children("td"); // new row as label/field pair colspan is greater than remaining space
+        assert.strictEqual($fieldGroupThirdRowTds.length, 2, "there should be 2 tds in third row");
+        assert.hasClass(
+            $fieldGroupThirdRowTds.eq(0),
+            "o_td_label",
+            "first td should be a label td"
+        );
+        assert.hasAttrValue(
+            $fieldGroupThirdRowTds.eq(1),
+            "colspan",
+            undefined,
+            "second td colspan should be default one (1)"
+        );
+        assert.strictEqual(
+            $fieldGroupThirdRowTds.eq(1).attr("style").substr(0, 9),
+            "width: 50",
+            "second td should be 50% width"
+        );
+        var $fieldGroupFourthRowTds = $fieldGroupRows.eq(3).children("td");
+        assert.strictEqual($fieldGroupFourthRowTds.length, 1, "there should be 1 td in fourth row");
+        assert.hasAttrValue(
+            $fieldGroupFourthRowTds,
+            "colspan",
+            "3",
+            "the td should have a colspan equal to 3"
+        );
+        assert.strictEqual(
+            $fieldGroupFourthRowTds.attr("style").substr(0, 10),
+            "width: 100",
+            "the td should have 100% width"
+        );
+        var $fieldGroupFifthRowTds = $fieldGroupRows.eq(4).children("td"); // label/field pair can be put after the 1-colspan span
+        assert.strictEqual($fieldGroupFifthRowTds.length, 3, "there should be 3 tds in fourth row");
+        assert.strictEqual(
+            $fieldGroupFifthRowTds.eq(0).attr("style").substr(0, 9),
+            "width: 50",
+            "the first td should 50% width"
+        );
+        assert.hasClass(
+            $fieldGroupFifthRowTds.eq(1),
+            "o_td_label",
+            "the second td should be a label td"
+        );
+        assert.strictEqual(
+            $fieldGroupFifthRowTds.eq(2).attr("style").substr(0, 9),
+            "width: 50",
+            "the third td should 50% width"
+        );
+    });
+
+    QUnit.test("outer and inner groups string attribute", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group string="parent group" class="parent_group">
+                            <group string="child group 1" class="group_1">
+                                <field name="bar"/>
+                            </group>
+                            <group string="child group 2" class="group_2">
+                                <field name="bar"/>
+                            </group>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        var $parentGroup = $(target.querySelector(".parent_group"));
+        var $group1 = $(target.querySelector(".group_1"));
+        var $group2 = $(target.querySelector(".group_2"));
+        assert.containsN(target, "table.o_inner_group", 2, "should contain two inner groups");
+        assert.strictEqual(
+            $group1.find(".o_horizontal_separator").length,
+            1,
+            "inner group should contain one string separator"
+        );
+        assert.strictEqual(
+            $group1.find(".o_horizontal_separator:contains(child group 1)").length,
+            1,
+            "first inner group should contain 'child group 1' string"
+        );
+        assert.strictEqual(
+            $group2.find(".o_horizontal_separator:contains(child group 2)").length,
+            1,
+            "second inner group should contain 'child group 2' string"
+        );
+        assert.strictEqual(
+            $parentGroup.find("> div.o_horizontal_separator:contains(parent group)").length,
+            1,
+            "outer group should contain 'parent group' string"
+        );
+    });
+
+    QUnit.test("form group with newline tag inside", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group col="5" class="main_inner_group">
+                            <!-- col=5 otherwise the test is ok even without the
+                            newline code as this will render a <newline/> DOM
+                            element in the third column, leaving no place for
+                            the next field and its label on the same line. -->
+                            <field name="foo"/>
+                            <newline/>
+                            <field name="bar"/>
+                            <field name="qux"/>
+                        </group>
+                        <group col="3">
+                            <!-- col=3 otherwise the test is ok even without the
+                            newline code as this will render a <newline/> DOM
+                            element with the o_group_col_6 class, leaving no
+                            place for the next group on the same line. -->
+                            <group class="top_group">
+                                <div style="height: 200px;"/>
+                            </group>
+                            <newline/>
+                            <group class="bottom_group">
+                                <div/>
+                            </group>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        // Inner group
+        assert.containsN(
+            target,
+            ".main_inner_group > tbody > tr",
+            2,
+            "there should be 2 rows in the group"
+        );
+        assert.containsOnce(
+            target,
+            ".main_inner_group > tbody > tr:first > .o_td_label",
+            "there should be only one label in the first row"
+        );
+        assert.containsOnce(
+            target,
+            ".main_inner_group > tbody > tr:first .o_field_widget",
+            "there should be only one widget in the first row"
+        );
+        assert.containsN(
+            target,
+            ".main_inner_group > tbody > tr:last > .o_td_label",
+            2,
+            "there should be two labels in the second row"
+        );
+        assert.containsN(
+            target,
+            ".main_inner_group > tbody > tr:last .o_field_widget",
+            2,
+            "there should be two widgets in the second row"
+        );
+
+        // Outer group
+        const bottomGroupRect = target.querySelector(".bottom_group").getBoundingClientRect();
+        const topGroupRect = target.querySelector(".top_group").getBoundingClientRect();
+
+        assert.ok(
+            bottomGroupRect.top - topGroupRect.top >= 200,
+            "outergroup children should not be on the same line"
+        );
+    });
+
+    QUnit.test("custom open record dialog title", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p" widget="many2many" string="custom label">
+                        <tree><field name="display_name"/></tree>
+                        <form><field name="display_name"/></form>
+                    </field>
+                </form>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.strictEqual(
+            target.querySelector(".modal .modal-title").textContent,
+            "Open: custom label"
+        );
+    });
+
+    QUnit.test("display translation alert", async function (assert) {
+        serverData.models.partner.fields.foo.translate = true;
+        serverData.models.partner.fields.display_name.translate = true;
+
+        patchWithCleanup(localization, {
+            multiLang: true,
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="foo"/>
+                            <field name="display_name"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        await editInput(target, '[name="foo"] input', "test");
+        await clickSave(target);
+        assert.containsOnce(
+            target,
+            ".alert .o_field_translate",
+            "should have single translation alert"
+        );
+
+        await clickEdit(target);
+        await editInput(target, '[name="display_name"] input', "test2");
+        await clickSave(target);
+        assert.containsN(
+            target,
+            ".alert .o_field_translate",
+            2,
+            "should have two translate fields in translation alert"
+        );
+    });
+
+    QUnit.test("translation alerts are preserved on pager change", async function (assert) {
+        serverData.models.partner.fields.foo.translate = true;
+
+        patchWithCleanup(localization, {
+            multiLang: true,
+        });
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            arch: `<form><sheet><field name="foo"/></sheet></form>`,
+            resIds: [1, 2],
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        await editInput(target, '[name="foo"] input', "test");
+        await clickSave(target);
+
+        assert.containsOnce(target, ".alert .o_field_translate", "should have a translation alert");
+
+        // click on the pager to switch to the next record
+        await click(target.querySelector(".o_pager_next"));
+        assert.containsNone(
+            target,
+            ".alert .o_field_translate",
+            "should not have a translation alert"
+        );
+        // click on the pager to switch back to the previous record
+        await click(target.querySelector(".o_pager_previous"));
+        assert.containsOnce(target, ".alert .o_field_translate", "should have a translation alert");
+        // remove translation alert by click X and check alert even after form reload
+        await click(target.querySelector(".alert .close"));
+        assert.containsNone(
+            target,
+            ".alert .o_field_translate",
+            "should not have a translation alert"
+        );
+
+        await click(target.querySelector(".o_pager_next"));
+        await click(target.querySelector(".o_pager_previous"));
+
+        assert.containsNone(
+            target,
+            ".alert .o_field_translate",
+            "should not have a translation alert after reload"
+        );
+    });
+
+    QUnit.test("translation alerts preserved on reverse breadcrumb", async function (assert) {
+        serverData.models["ir.translation"] = {
+            fields: {
+                name: { string: "name", type: "char" },
+                source: { string: "Source", type: "char" },
+                value: { string: "Value", type: "char" },
+            },
+            records: [],
+        };
+
+        serverData.models.partner.fields.foo.translate = true;
+
+        serverData.views = {
+            "partner,false,form": `<form><sheet><field name="foo"/></sheet></form>`,
+            "partner,false,search": "<search></search>",
+            "ir.translation,false,list": `<tree><field name="name"/><field name="source"/><field name="value"/></tree>`,
+            "ir.translation,false,search": "<search></search>",
+        };
+
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+            },
+            2: {
+                id: 2,
+                name: "Translate",
+                res_model: "ir.translation",
+                type: "ir.actions.act_window",
+                views: [[false, "list"]],
+                target: "current",
+                flags: { search_view: true, action_buttons: true },
+            },
+        };
+
+        const webClient = await createWebClient({ serverData });
+        patchWithCleanup(localization, {
+            multiLang: true,
+        });
+
+        await doAction(webClient, 1);
+        await editInput(target, `[name="foo"] input`, "test");
+
+        await clickSave(target);
+
+        assert.containsOnce(target, ".alert .o_field_translate", "should have a translation alert");
+
+        await doAction(webClient, 2);
+
+        await click(target.querySelector(".o_control_panel .breadcrumb a:nth-child(1)"));
+        assert.containsOnce(target, ".alert .o_field_translate", "should have a translation alert");
+    });
+
+    QUnit.test(
+        "translate event correctly handled with multiple controllers",
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.models.product.fields.name.translate = true;
+            serverData.models.partner.records[0].product_id = 37;
+            let nbTranslateCalls = 0;
+
+            patchWithCleanup(localization, {
+                multiLang: true,
+            });
+
+            serverData.views = {
+                "product,false,form": `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="name"/>
+                                <field name="partner_type_id"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+            };
+
+            await makeView({
+                type: "form",
+                serverData,
+                resModel: "partner",
+                resId: 1,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <field name="product_id"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+
+                mockRPC(route, args) {
+                    if (route === "/web/dataset/call_kw/product/get_formview_id") {
+                        return false;
+                    }
+                    if (
+                        route === "/web/dataset/call_button" &&
+                        args.method === "translate_fields"
+                    ) {
+                        assert.deepEqual(
+                            args.args,
+                            ["product", 37, "name"],
+                            'should call "call_button" route'
+                        );
+                        nbTranslateCalls++;
+                        return {
+                            domain: [],
+                            context: { search_default_name: "partnes,foo" },
+                        };
+                    }
+                    if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                        return [["en_US"], ["fr_BE"]];
+                    }
+                },
+            });
+
+            await clickEdit(target);
+            await click(target.querySelector('[name="product_id"] .o_external_button'));
+            assert.containsOnce(
+                target.querySelector(".modal-body"),
+                "span.o_field_translate",
+                "there should be a translate button in the modal"
+            );
+
+            await click(target.querySelector(".modal-body span.o_field_translate"));
+            assert.strictEqual(nbTranslateCalls, 1, "should call_button translate once");
+        }
+    );
+
+    QUnit.test("buttons are disabled until status bar action is resolved", async function (assert) {
+        const def = makeDeferred();
+        const actionService = {
+            start() {
+                return {
+                    async doActionButton(args) {
+                        await def;
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                        <button name="some_method" class="s" string="Do it" type="object"/>
+                    </header>
+                    <sheet>
+                        <div name="button_box" class="oe_button_box">
+                            <button class="oe_stat_button" name="some_action" type="action">
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:not(:disabled)",
+            2,
+            "control panel buttons should be enabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:not(:disabled)",
+            2,
+            "status bar buttons should be enabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:not(:disabled)",
+            "stat buttons should be enabled"
+        );
+
+        await click(target.querySelector(".o_form_statusbar button"));
+
+        // The unresolved promise lets us check the state of the buttons
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:disabled",
+            2,
+            "control panel buttons should be disabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:disabled",
+            2,
+            "status bar buttons should be disabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:disabled",
+            "stat buttons should be disabled"
+        );
+
+        def.resolve();
+        await nextTick();
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:not(:disabled)",
+            2,
+            "control panel buttons should be enabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:not(:disabled)",
+            2,
+            "status bar buttons should be enabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:not(:disabled)",
+            "stat buttons should be enabled"
+        );
+    });
+
+    QUnit.test("buttons are disabled until button box action is resolved", async function (assert) {
+        const def = makeDeferred();
+        const actionService = {
+            start() {
+                return {
+                    async doActionButton(args) {
+                        await def;
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="post" class="p" string="Confirm" type="object"/>
+                        <button name="some_method" class="s" string="Do it" type="object"/>
+                    </header>
+                    <sheet>
+                        <div name="button_box" class="oe_button_box">
+                            <button class="oe_stat_button" name="some_action" type="action">
+                                <field name="bar"/>
+                            </button>
+                        </div>
+                        <group>
+                            <field name="foo"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:not(:disabled)",
+            2,
+            "control panel buttons should be enabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:not(:disabled)",
+            2,
+            "status bar buttons should be enabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:not(:disabled)",
+            "stat buttons should be enabled"
+        );
+
+        await click(target.querySelector(".oe_button_box button"));
+
+        // The unresolved promise lets us check the state of the buttons
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:disabled",
+            2,
+            "control panel buttons should be disabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:disabled",
+            2,
+            "status bar buttons should be disabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:disabled",
+            "stat buttons should be disabled"
+        );
+
+        def.resolve();
+        await nextTick();
+        assert.containsN(
+            target,
+            ".o_form_buttons_view button:not(:disabled)",
+            2,
+            "control panel buttons should be enabled"
+        );
+        assert.containsN(
+            target,
+            ".o_form_statusbar button:not(:disabled)",
+            2,
+            "status bar buttons should be enabled"
+        );
+        assert.containsOnce(
+            target,
+            ".oe_button_box button:not(:disabled)",
+            "stat buttons should be enabled"
+        );
+    });
+
+    QUnit.test(
+        'buttons with "confirm" attribute save before calling the method',
+        async function (assert) {
+            const actionService = {
+                start() {
+                    return {
+                        async doActionButton(args) {
+                            assert.step("execute_action");
+                        },
+                    };
+                },
+            };
+            registry.category("services").add("action", actionService, { force: true });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button name="post" class="p" string="Confirm" type="object" confirm="Very dangerous. U sure?"/>
+                        </header>
+                        <sheet>
+                            <field name="foo"/>
+                        </sheet>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            // click on button, and cancel in confirm dialog
+            await click(target.querySelector(".o_statusbar_buttons button"));
+            assert.ok(
+                target.querySelector(".o_statusbar_buttons button").disabled,
+                "button should be disabled"
+            );
+            await click(target.querySelector(".modal-footer button.btn-secondary"));
+            assert.notOk(
+                target.querySelector(".o_statusbar_buttons button").disabled,
+                "button should no longer be disabled"
+            );
+
+            assert.verifySteps(["get_views", "onchange"]);
+
+            // click on button, and click on ok in confirm dialog
+            await click(target.querySelector(".o_statusbar_buttons button"));
+            assert.verifySteps([]);
+            await click(target.querySelector(".modal-footer button.btn-primary"));
+            assert.verifySteps(["create", "read", "execute_action"]);
+        }
+    );
+
+    QUnit.test(
+        "buttons are disabled until action is resolved (in dialogs)",
+        async function (assert) {
+            const def = makeDeferred();
+            const actionService = {
+                start() {
+                    return {
+                        doActionButton(args) {
+                            return def;
+                        },
+                    };
+                },
+            };
+            registry.category("services").add("action", actionService, { force: true });
+
+            serverData.views = {
+                "partner,false,form": `
+                    <form>
+                        <sheet>
+                            <div name="button_box" class="oe_button_box">
+                                <button class="oe_stat_button" name="some_action" type="action">
+                                    <field name="bar"/>
+                                </button>
+                            </div>
+                            <group>
+                                <field name="foo"/>
+                            </group>
+                        </sheet>
+                    </form>`,
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="trululu"/></form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "get_formview_id") {
+                        return Promise.resolve(false);
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+            await click(target.querySelector(".o_external_button"));
+            assert.notOk(target.querySelector(".modal .oe_button_box button").disabled);
+
+            await click(target.querySelector(".modal .oe_button_box button"));
+            assert.ok(target.querySelector(".modal .oe_button_box button").disabled);
+
+            def.resolve();
+            await nextTick();
+            assert.notOk(target.querySelector(".modal .oe_button_box button").disabled);
+        }
+    );
+
+    QUnit.test("multiple clicks on save should reload only once", async function (assert) {
+        const def = makeDeferred();
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/></form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "write") {
+                    return def;
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, '.o_field_widget[name="foo"] input', "test");
+        await click(target.querySelector(".o_form_button_save"));
+        await click(target.querySelector(".o_form_button_save"));
+
+        def.resolve();
+        await nextTick();
+        assert.verifySteps([
+            "get_views",
+            "read", // initial read to render the view
+            "write", // write on save
+            "read", // read on reload
+        ]);
+    });
+
+    QUnit.test("form view is not broken if save operation fails", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/></form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "write" && args.args[1].foo === "incorrect value") {
+                    return Promise.reject();
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=foo] input", "incorrect value");
+        await click(target.querySelector(".o_form_button_save"));
+        await editInput(target, ".o_field_widget[name=foo] input", "correct value");
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.verifySteps([
+            "get_views",
+            "read", // initial read to render the view
+            "write", // write on save (it fails, does not trigger a read)
+            "write", // write on save (it works)
+            "read", // read on reload
+        ]);
+    });
+
+    QUnit.test(
+        "form view is not broken if save failed in readonly mode on field changed",
+        async function (assert) {
+            let failFlag = false;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <field name="trululu" widget="statusbar" options="{'clickable': '1'}"/>
+                        </header>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.step("write");
+                        if (failFlag) {
+                            return Promise.reject();
+                        }
+                    } else if (args.method === "read") {
+                        assert.step("read");
+                    }
+                },
+            });
+
+            assert.hasClass(target.querySelector('button[data-value="4"]'), "btn-primary");
+            assert.hasClass(target.querySelector('button[data-value="4"]'), "disabled");
+
+            failFlag = true;
+            await click(target.querySelector('button[data-value="1"]'));
+            assert.hasClass(
+                target.querySelector('button[data-value="4"]'),
+                "btn-primary",
+                "initial status should still be active as save failed"
+            );
+
+            failFlag = false;
+            await click(target.querySelector('button[data-value="1"]'));
+            assert.hasClass(
+                target.querySelector('button[data-value="1"]'),
+                "btn-primary",
+                "last clicked status should be active"
+            );
+
+            assert.verifySteps([
+                "read",
+                "write", // fails
+                "read", // must reload when saving fails
+                "write", // works
+                "read", // must reload when saving works
+            ]);
+        }
+    );
+
+    QUnit.test(
+        "context is correctly passed after save & new in FormViewDialog",
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.views = {
+                "product,false,form": `
+                    <form>
+                        <field name="partner_type_id" context="{'color': parent.id}"/>
+                    </form>`,
+                "product,false,list": '<tree><field name="display_name"/></tree>',
+            };
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 4,
+                serverData,
+                arch: `<form><field name="product_ids"/></form>`,
+                mockRPC(route, args) {
+                    if (args.method === "name_search") {
+                        assert.strictEqual(args.kwargs.context.color, 4);
+                    }
+                },
+            });
+            await click(target.querySelector(".o_form_button_edit"));
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            assert.containsOnce(target, ".modal");
+
+            // set a value on the m2o and click save & new
+            await selectDropdownItem(target, "partner_type_id", "gold");
+            await click(target.querySelector(".modal-footer .o_form_button_save_new"));
+
+            // set a value on the m2o
+            await selectDropdownItem(target, "partner_type_id", "silver");
+            await click(target.querySelector(".modal-footer .o_form_button_save"));
+        }
+    );
+
+    QUnit.test("readonly fields are not sent when saving", async function (assert) {
+        assert.expect(6);
+
+        // define an onchange on display_name to check that the value of readonly
+        // fields is correctly sent for onchanges
+        serverData.models.partner.onchanges = {
+            display_name: function () {},
+            p: function () {},
+        };
+        let checkOnchange = false;
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree><field name="display_name"/></tree>
+                        <form>
+                            <field name="display_name"/>
+                            <field name="foo" attrs="{'readonly': [['display_name', '=', 'readonly']]}"/>
+                        </form>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (checkOnchange && args.method === "onchange") {
+                    if (args.args[2] === "display_name") {
+                        // onchange on field display_name
+                        assert.strictEqual(
+                            args.args[1].foo,
+                            "foo value",
+                            "readonly fields value should be sent for onchanges"
+                        );
+                    } else {
+                        // onchange on field p
+                        assert.deepEqual(
+                            args.args[1].p,
+                            [
+                                [
+                                    0,
+                                    args.args[1].p[0][1],
+                                    { display_name: "readonly", foo: "foo value" },
+                                ],
+                            ],
+                            "readonly fields value should be sent for onchanges"
+                        );
+                    }
+                }
+                if (args.method === "create") {
+                    assert.deepEqual(
+                        args.args[0],
+                        {
+                            p: [[0, args.args[0].p[0][1], { display_name: "readonly" }]],
+                        },
+                        "should not have sent the value of the readonly field"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        assert.containsOnce(
+            target,
+            ".modal .o_field_widget[name=foo] input",
+            "foo should be editable"
+        );
+        checkOnchange = true;
+        await editInput(target, ".modal .o_field_widget[name=foo] input", "foo value");
+        await editInput(target, ".modal .o_field_widget[name=display_name] input", "readonly");
+        assert.containsNone(
+            target,
+            ".modal .o_field_widget[name=foo] input",
+            "foo should be readonly"
+        );
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        checkOnchange = false;
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=foo]").textContent,
+            "foo value",
+            "the edited value should have been kept"
+        );
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("id is False in evalContext for new records", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="id"/>
+                    <field name="foo" attrs="{'readonly': [['id', '=', False]]}"/>
+                </form>`,
+        });
+
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=foo]"),
+            "o_readonly_modifier",
+            "foo should be readonly in 'Create' mode"
+        );
+
+        await click(target.querySelector(".o_form_button_save"));
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget[name=foo]"),
+            "o_readonly_modifier",
+            "foo should not be readonly anymore"
+        );
+    });
+
+    QUnit.test("delete a duplicated record", async function (assert) {
+        assert.expect(5);
+
+        const newRecordID = 6; // ids from 1 to 5 are already taken so the new record will have id 6
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="display_name"/></form>`,
+            resId: 1,
+            actionMenus: {},
+            mockRPC(route, args) {
+                if (args.method === "unlink") {
+                    assert.deepEqual(args.args[0], [newRecordID]);
+                }
+            },
+        });
+
+        // duplicate record 1
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Duplicate");
+
+        assert.containsOnce(target, ".o_form_editable", "form should be in edit mode");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget input").value,
+            "first record (copy)",
+            "duplicated record should have correct name"
+        );
+        await click(target.querySelector(".o_form_button_save")); // save duplicated record
+
+        // delete duplicated record
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+
+        assert.containsOnce(target, ".modal", "should have opened a confirm dialog");
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget").textContent,
+            "first record",
+            "should have come back to previous record"
+        );
+    });
+
+    QUnit.test("display tooltips for buttons (debug = false)", async function (assert) {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="some_method" class="oe_highlight" string="Button" type="object" title="This is title"/>
+                        <button name="empty_method" string="Empty Button" type="object"/>
+                    </header>
+                    <button name="other_method" class="oe_highlight" string="Button2" type="object" help="help Button2"/>
+                </form>`,
+        });
+
+        await mouseEnter(target.querySelector("button[name='empty_method']"));
+        await nextTick();
+        assert.containsNone(target, ".o-tooltip", "not help, or not title, not tooltip");
+
+        await mouseEnter(target.querySelector("button[name='some_method']"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").textContent,
+            "This is title",
+            "title on default tooltip"
+        );
+
+        await mouseEnter(target.querySelector("button[name='other_method']"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").textContent,
+            "Button2help Button2",
+            "help create veiw button tooltip with the name of the button as title and the help as description"
+        );
+    });
+
+    QUnit.test("display tooltips for buttons (debug = true)", async function (assert) {
+        patchWithCleanup(odoo, {
+            debug: true,
+        });
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button name="some_method" class="oe_highlight" string="Button" type="object" title="This is title" attrs="{'readonly': [['display_name', '=', 'readonly']]}"/>
+                        <button name="empty_method" string="Empty Button" type="object"/>
+                    </header>
+                    <button name="other_method" class="oe_highlight" string="Button2" type="object" help="help Button2"/>
+                </form>`,
+        });
+
+        await mouseEnter(target.querySelector("button[name='empty_method']"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").textContent,
+            ` Button : Empty ButtonObject:partnerButton Type:objectMethod:empty_method`
+        );
+
+        await mouseEnter(target.querySelector("button[name='some_method']"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").textContent,
+            ` Button : ButtonThis is titleObject:partnerModifiers:{"readonly":[["display_name","=","readonly"]]}Button Type:objectMethod:some_method`
+        );
+
+        await mouseEnter(target.querySelector("button[name='other_method']"));
+        await nextTick();
+        assert.strictEqual(
+            target.querySelector(".o-tooltip").textContent,
+            ` Button : Button2help Button2Object:partnerButton Type:objectMethod:other_method`
+        );
+    });
+
+    QUnit.test("reload event is handled only once", async function (assert) {
+        // In this test, several form controllers are nested (two of them are
+        // opened in dialogs). When the users clicks on save in the last
+        // opened dialog, a 'reload' event is triggered up to reload the (direct)
+        // parent view. If this event isn't stopPropagated by the first controller
+        // catching it, it will crash when the other one will try to handle it,
+        // as this one doesn't know at all the dataPointID to reload.
+        const arch = `<form><field name="display_name"/><field name="trululu"/></form>`;
+        serverData.views = {
+            "partner,false,form": arch,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: arch,
+            resId: 2,
+            mockRPC(route, args) {
+                assert.step(args.method);
+                if (args.method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_external_button"));
+        await click(target.querySelector(".modal .o_external_button"));
+
+        await editInput(
+            target.querySelectorAll(".modal")[1],
+            ".o_field_widget[name=display_name] input",
+            "new name"
+        );
+        await click(
+            target.querySelectorAll(".modal")[1].querySelector("footer .o_form_button_save")
+        );
+
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=trululu] input").value,
+            "new name",
+            "record should have been reloaded"
+        );
+        assert.verifySteps([
+            "get_views",
+            "read", // main record
+            "get_formview_id", // id of first form view opened in a dialog
+            "get_views", // arch of first form view opened in a dialog
+            "read", // first dialog
+            "get_formview_id", // id of second form view opened in a dialog
+            "read", // second dialog
+            "write", // save second dialog
+            "read", // reload first dialog
+        ]);
+    });
+
+    QUnit.test("process the context for inline subview", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="p">
+                        <tree>
+                            <field name="foo"/>
+                            <field name="bar" invisible="context.get('hide_bar', False)"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            context: { hide_bar: true },
+        });
+        assert.containsOnce(
+            target,
+            ".o_list_renderer thead tr th:not(.o_list_record_remove_header)",
+            "there should be only one column"
+        );
+    });
+
+    QUnit.test("process the context for subview not inline", async function (assert) {
+        serverData.models.partner.records[0].p = [2];
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar" invisible="context.get('hide_bar', False)"/>
+                </tree>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="p" widget="one2many"/></form>`,
+            resId: 1,
+            context: { hide_bar: true },
+        });
+        assert.containsOnce(
+            target,
+            ".o_list_renderer thead tr th:not(.o_list_record_remove_header)",
+            "there should be only one column"
+        );
+    });
+
+    QUnit.test("can toggle column in x2many in sub form view", async function (assert) {
+        serverData.models.partner.records[2].p = [1, 2];
+        serverData.models.partner.fields.foo.sortable = true;
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="p">
+                        <tree><field name="foo"/></tree>
+                    </field>
+                </form>`,
+        };
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="trululu"/></form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/partner/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+            },
+        });
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_external_button"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".modal-body .o_data_cell")), [
+            "yop",
+            "blip",
+        ]);
+
+        await click(target.querySelector(".modal-body th.o_column_sortable"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".modal-body .o_data_cell")), [
+            "blip",
+            "yop",
+        ]);
+    });
+
+    QUnit.test("rainbowman attributes correctly passed on button click", async function (assert) {
+        assert.expect(1);
+        const actionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.strictEqual(params.effect, "{'message': 'Congrats!'}");
+                    },
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                    <button name="action_won" string="Won" type="object" effect="{'message': 'Congrats!'}"/>
+                    </header>
+                </form>`,
+        });
+
+        await click(target.querySelector(".o_form_statusbar .btn-secondary"));
+    });
+
+    QUnit.test("basic support for widgets", async function (assert) {
+        class MyComponent extends owl.Component {
+            get value() {
+                return JSON.stringify(this.props.record.data);
+            }
+        }
+        MyComponent.template = owl.xml`<div t-esc="value"/>`;
+        widgetRegistry.add("test_widget", MyComponent);
+
+        await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <widget name="test_widget"/>
+                </form>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_widget").textContent,
+            '{"foo":"My little Foo Value","bar":false}'
+        );
+
+        widgetRegistry.remove("test_widget");
+    });
+
+    QUnit.test("attach document widget calls action with attachment ids", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            mockRPC(route, args) {
+                if (args.method === "my_action") {
+                    assert.deepEqual(args.kwargs.attachment_ids, [5, 2]);
+                    return true;
+                }
+            },
+            arch: `<form><widget name="attach_document" action="my_action"/></form>`,
+        });
+
+        var onFileLoadedEventName = target.querySelector(".o_form_binary_form").target;
+        // trigger _onFileLoaded function
+        // TODO wowl remove line below when implem don't require jquery
+        $(window).trigger(onFileLoadedEventName, [{ id: 5 }, { id: 2 }]);
+        // await triggerEvent(window, null, onFileLoadedEventName, {
+        //     attachment_ids: [{ id: 5 }, { id: 2 }],
+        // });
+    });
+
+    QUnit.test("support header button as widgets on form statusbar", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><header><widget name="attach_document" string="Attach document"/></header></form>`,
+        });
+
+        assert.containsOnce(target, "button.o_attachment_button");
+        assert.strictEqual(
+            target.querySelector("span.o_attach_document").textContent,
+            "Attach document"
+        );
+    });
+
+    QUnit.test("basic support for widgets: onchange update", async function (assert) {
+        class MyWidget extends owl.Component {
+            setup() {
+                this.state = owl.useState({
+                    dataToDisplay: this.props.record.data.foo,
+                });
+                owl.useEffect(() => {
+                    this.state.dataToDisplay = this.props.record.data.foo + "!";
+                });
+            }
+        }
+        MyWidget.template = owl.xml`<t t-esc="state.dataToDisplay" />`;
+
+        widgetRegistry.add("test_widget", MyWidget);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><widget name="test_widget"/></form>`,
+        });
+
+        await editInput(target, '.o_field_widget[name="foo"] input', "I am alive");
+        await nextTick();
+
+        assert.strictEqual(
+            target.querySelector(".o_widget").textContent,
+            "I am alive!",
+            "widget should have been updated"
+        );
+
+        widgetRegistry.remove("test_widget");
+    });
+
+    QUnit.test("bounce edit button in readonly mode", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <div class="oe_title">
+                        <field name="display_name"/>
+                    </div>
+                </form>`,
+            resId: 1,
+        });
+
+        // in readonly
+        await click(target.querySelector("div.oe_title"));
+        assert.hasClass(target.querySelector(".o_form_button_edit"), "o_catch_attention");
+
+        // in edit
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector('[name="display_name"]'));
+        assert.containsNone(target, ".o_catch_attention");
+    });
+
+    QUnit.test("proper stringification in debug mode tooltip", async function (assert) {
+        patchWithCleanup(odoo, { debug: true });
+
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="product_id" context="{'lang': 'en_US'}" attrs='{"invisible": [["product_id", "=", 33]]}' widget="many2one"/>
+                    </sheet>
+                </form>`,
+        });
+
+        await mouseEnter(target.querySelector("[name='product_id']"));
+        await nextTick();
+        assert.containsOnce(
+            target,
+            ".o-tooltip--technical > li[data-item='context']",
+            "context should be present for this field"
+        );
+        assert.strictEqual(
+            target.querySelector('.o-tooltip--technical > li[data-item="context"]').lastChild
+                .textContent,
+            "{'lang': 'en_US'}",
+            "context should be properly stringified"
+        );
+        assert.containsOnce(
+            target,
+            ".o-tooltip--technical > li[data-item='modifiers']",
+            "modifiers should be present for this field"
+        );
+        assert.strictEqual(
+            target.querySelector('.o-tooltip--technical > li[data-item="modifiers"]').lastChild
+                .textContent,
+            '{"invisible":[["product_id","=",33]]}',
+            "modifiers should be properly stringified"
+        );
+
+        assert.containsOnce(
+            target,
+            ".o-tooltip--technical > li[data-item='widget']",
+            "widget should be present for this field"
+        );
+        assert.strictEqual(
+            target.querySelector('.o-tooltip--technical > li[data-item="widget"]').textContent,
+            "Widget:many2one",
+            "widget description should be correct"
+        );
+    });
+
+    QUnit.test("do not change pager when discarding current record", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            resIds: [1, 2],
+            resId: 2,
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "2",
+            "pager should indicate that we are on second record"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_limit").textContent,
+            "2",
+            "pager should indicate that we are on second record"
+        );
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await click(target.querySelector(".o_form_button_cancel"));
+
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").textContent,
+            "2",
+            "pager value should not have changed"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_limit").textContent,
+            "2",
+            "pager limit should not have changed"
+        );
+    });
+
+    QUnit.test("coming to a form view from a grouped and sorted list", async function (assert) {
+        assert.expect(21);
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "test",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+            },
+        };
+        serverData.views = {
+            "partner,false,list": `<tree><field name="foo"/></tree>`,
+            "partner,false,search": `
+                <search>
+                    <filter string="bar" name="Bar" context="{'group_by': 'bar'}"/>
+                </search>`,
+            "partner,false,form": `
+                <form>
+                    <field name="foo"/>
+                    <field name="timmy"/>
+                </form>`,
+            "partner_type,false,list": `<tree><field name="display_name"/></tree>`,
+        };
+        serverData.models.partner.fields.foo.sortable = true;
+        serverData.models.partner.records[0].timmy = [12, 14];
+
+        const mockRPC = (route, args) => {
+            assert.step(args.model ? args.model + ":" + args.method : route);
+            if (args.method === "read") {
+                if (args.model === "partner") {
+                    assert.deepEqual(args.kwargs.context, {
+                        bin_size: true,
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                } else if (args.model === "partner_type") {
+                    assert.deepEqual(args.kwargs.context, {
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                }
+            }
+        };
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 1);
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsN(target, ".o_data_row", 4);
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "yop",
+            "blip",
+            "My little Foo Value",
+            "",
+        ]);
+        await click(target.querySelector("th.o_column_sortable"));
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "",
+            "My little Foo Value",
+            "blip",
+            "yop",
+        ]);
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "bar");
+        assert.containsN(target, ".o_group_header", 2);
+
+        await click(target.querySelectorAll(".o_group_header")[1]);
+        assert.containsN(target, ".o_group_header", 2);
+        assert.containsN(target, ".o_data_row", 2);
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_form_view");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "gold",
+            "silver",
+        ]);
+        assert.verifySteps([
+            "/web/webclient/load_menus",
+            "/web/action/load",
+            "partner:get_views",
+            "partner:web_search_read",
+            "partner:web_search_read",
+            "partner:web_read_group",
+            "partner:web_search_read",
+            "partner:read",
+            "partner_type:read",
+        ]);
+    });
+
+    QUnit.test('edition in form view on a "noCache" model', async function (assert) {
+        patchWithCleanup(BasicModel.prototype, {
+            noCacheModels: BasicModel.prototype.noCacheModels.concat(["partner"]),
+        });
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><field name="display_name"/></sheet></form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step("write");
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        form.env.bus.on("CLEAR-CACHES", target, assert.step.bind(assert, "clear_cache"));
+
+        await editInput(target, "[name=display_name] input", "new value");
+        await clickSave(target);
+
+        assert.verifySteps(["write", "clear_cache"]);
+    });
+
+    QUnit.test('creation in form view on a "noCache" model', async function (assert) {
+        patchWithCleanup(BasicModel.prototype, {
+            noCacheModels: BasicModel.prototype.noCacheModels.concat(["partner"]),
+        });
+
+        const form = await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><field name="display_name"/></sheet></form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step("write");
+                }
+            },
+        });
+
+        await clickEdit(target);
+
+        form.env.bus.on("CLEAR-CACHES", target, assert.step.bind(assert, "clear_cache"));
+
+        await editInput(target, "[name=display_name] input", "new value");
+        await clickSave(target);
+
+        assert.verifySteps(["write", "clear_cache"]);
+    });
+
+    QUnit.test('deletion in form view on a "noCache" model', async function (assert) {
+        patchWithCleanup(BasicModel.prototype, {
+            noCacheModels: BasicModel.prototype.noCacheModels.concat(["partner"]),
+        });
+
+        const form = await makeView({
+            type: "form",
+            serverData,
+            resModel: "partner",
+            arch: `<form><sheet><field name="display_name"/></sheet></form>`,
+            mockRPC(route, args) {
+                if (args.method === "unlink") {
+                    assert.step("unlink");
+                }
+            },
+            resId: 1,
+            actionMenus: {},
+        });
+        form.env.bus.on("CLEAR-CACHES", target, assert.step.bind(assert, "clear_cache"));
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        assert.verifySteps(["unlink", "clear_cache"]);
+    });
+
+    QUnit.test(
+        "reload currencies when writing on records of model res.currency",
+        async function (assert) {
+            serverData.models["res.currency"] = {
+                fields: {},
+                records: [{ id: 1, display_name: "some currency" }],
+            };
+
+            patchWithCleanup(legacySession, {
+                reloadCurrencies: function () {
+                    assert.step("reload currencies");
+                },
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "res.currency",
+                serverData,
+                arch: '<form><field name="display_name"/></form>',
+                resId: 1,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            await clickEdit(target);
+
+            await editInput(target.querySelector("[name=display_name]"), "input", "new value");
+            await clickSave(target);
+            assert.verifySteps(["get_views", "read", "write", "reload currencies", "read"]);
+        }
+    );
+
+    QUnit.test("keep editing after call_button fail", async function (assert) {
+        assert.expect(4);
+
+        let values;
+
+        const mockedActionService = {
+            start() {
+                return {
+                    doActionButton(params) {
+                        assert.deepEqual(
+                            [params.name, params.type],
+                            ["post", "object"],
+                            "the action should be correctly executed"
+                        );
+                        return Promise.reject();
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", mockedActionService, { force: true });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <button name="post" class="p" string="Raise Error" type="object"/>
+                    <field name="p">
+                        <tree editable="top">
+                            <field name="display_name"/>
+                            <field name="product_id"/>
+                        </tree>
+                    </field>
+                </form>`,
+            resId: 1,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1].p[0][2], values);
+                }
+            },
+        });
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // add a row and partially fill it
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await editInput(target, ".o_field_widget[name=display_name] input", "abc");
+
+        // click button which will trigger_up 'execute_action' (this will save)
+        values = {
+            display_name: "abc",
+            product_id: false,
+        };
+        await click(target.querySelector("button.p"));
+        // edit the new row again and set a many2one value
+        await click(
+            target.querySelectorAll(".o_form_view .o_field_one2many .o_data_row .o_data_cell")[1]
+        );
+        await nextTick();
+        await selectDropdownItem(target, "product_id", "xphone");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_many2one input").value,
+            "xphone",
+            "value of the m2o should have been correctly updated"
+        );
+
+        values = {
+            product_id: 37,
+        };
+        await click(target.querySelector(".o_form_button_save"));
+    });
+
+    QUnit.test("no deadlock when saving with uncommitted changes", async function (assert) {
+        // Before saving a record, all field widgets are asked to commit their changes (new values
+        // that they wouldn't have sent to the model yet). This test is added alongside a bug fix
+        // ensuring that we don't end up in a deadlock when a widget actually has some changes to
+        // commit at that moment. By chance, this situation isn't reached when the user clicks on
+        // 'Save' (which is the natural way to save a record), because by clicking outside the
+        // widget, the 'change' event (this is mainly for InputFields) is triggered, and the widget
+        // notifies the model of its new value on its own initiative, before being requested to.
+        // In this test, we try to reproduce the deadlock situation by forcing the field widget to
+        // commit changes before the save. We thus manually call 'saveRecord', instead of clicking
+        // on 'Save'.
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/></form>',
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        const input = target.querySelector(".o_field_widget[name=foo] input");
+        input.value = "some foo value";
+        await triggerEvent(input, null, "input");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_form_readonly", "form view should be in readonly");
+        assert.strictEqual(
+            target.querySelector(".o_form_view .o_form_readonly").textContent.trim(),
+            "some foo value",
+            "foo field should have correct value"
+        );
+        assert.verifySteps(["get_views", "onchange", "create", "read"]);
+    });
+
+    QUnit.test("saving with invalid uncommitted changes", async function (assert) {
+        patchWithCleanup(browser, { setTimeout: () => 1 });
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="qux"/></form>',
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        await editInput(target, ".o_field_widget[name=qux] input", "some qux value");
+
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_form_editable", "form view should stay in edit mode");
+        assert.strictEqual(
+            target.querySelector(".o_form_view .o_form_editable input").value,
+            "some qux value",
+            "qux field should have the invalid value"
+        );
+        assert.containsOnce(target, ".o_notification .text-danger");
+        assert.containsOnce(target, ".o_form_editable .o_field_invalid[name=qux]");
+        assert.verifySteps(["get_views", "onchange"]);
+    });
+
+    QUnit.test(
+        "save record with onchange on one2many with required field",
+        async function (assert) {
+            // in this test, we have a one2many with a required field, whose value is
+            // set by an onchange on another field ; we manually set the value of that
+            // first field, and directly click on Save (before the onchange RPC returns
+            // and sets the value of the required field)
+            assert.expect(6);
+
+            serverData.models.partner.fields.foo.default = undefined;
+            serverData.models.partner.onchanges = {
+                display_name: function (obj) {
+                    obj.foo = obj.display_name ? "foo value" : undefined;
+                },
+            };
+
+            let onchangeDef;
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree editable="top">
+                                <field name="display_name"/>
+                                <field name="foo" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        await onchangeDef;
+                    }
+                    if (args.method === "create") {
+                        assert.step("create");
+                        assert.strictEqual(
+                            args.args[0].p[0][2].foo,
+                            "foo value",
+                            "should have wait for the onchange to return before saving"
+                        );
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=display_name] input").value,
+                "",
+                "display_name should be the empty string by default"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_field_widget[name=foo] input").value,
+                "",
+                "foo should be the empty string by default"
+            );
+
+            onchangeDef = makeDeferred(); // delay the onchange
+
+            await editInput(target, ".o_field_widget[name=display_name] input", "some value");
+
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.step("resolve");
+            onchangeDef.resolve();
+            await nextTick();
+
+            assert.verifySteps(["resolve", "create"]);
+        }
+    );
+
+    QUnit.test("leave the form view while saving", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo: function (obj) {
+                obj.display_name = obj.foo === "trigger onchange" ? "changed" : "default";
+            },
+        };
+
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "test",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+            },
+        };
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>`,
+            "partner,false,form": `
+                <form>
+                    <field name="display_name"/>
+                    <field name="foo"/>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        let onchangeDef;
+        const createDef = makeDeferred();
+
+        const mockRPC = async (route, args) => {
+            if (args.method === "onchange") {
+                await onchangeDef;
+            }
+            if (args.method === "create") {
+                await createDef;
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 1);
+
+        await click(target, ".o_list_button_add");
+
+        // edit foo to trigger a delayed onchange
+        onchangeDef = makeDeferred();
+        await editInput(target, ".o_field_widget[name=foo] input", "trigger onchange");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=display_name] input").value,
+            "default"
+        );
+
+        // save (will wait for the onchange to return), and will be delayed as well
+        await click(target.querySelector(".o_form_button_save"));
+
+        assert.containsOnce(target, ".o_form_editable");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=display_name] input").value,
+            "default"
+        );
+
+        // click on the breadcrumbs to leave the form view
+        await click(target, ".breadcrumb-item.o_back_button a");
+        await nextTick();
+
+        assert.containsOnce(target, ".o_form_editable");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=display_name] input").value,
+            "default"
+        );
+
+        // unlock the onchange
+        onchangeDef.resolve();
+        await nextTick();
+        assert.containsOnce(target, ".o_form_editable");
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=display_name] input").value,
+            "changed"
+        );
+
+        // unlock the create
+        createDef.resolve();
+        await nextTick();
+
+        assert.containsOnce(target, ".o_list_view");
+        assert.strictEqual(
+            target.querySelector(".o_list_table .o_data_row:last-child td.o_data_cell").textContent,
+            "changed"
+        );
+        assert.containsNone(
+            document.body,
+            ".modal",
+            "should not display the 'Changes will be discarded' dialog"
+        );
+    });
+
+    QUnit.test(
+        "leave the form twice (clicking on the breadcrumb) should save only once",
+        async function (assert) {
+            let writeCalls = 0;
+            serverData.actions = {
+                1: {
+                    id: 1,
+                    name: "test",
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [
+                        [false, "list"],
+                        [false, "form"],
+                    ],
+                },
+            };
+            serverData.views = {
+                "partner,false,list": `<tree><field name="foo"/></tree>`,
+                "partner,false,search": `<search></search>`,
+                "partner,false,form": `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="foo"/>
+                    </form>`,
+            };
+
+            const writeDef = makeDeferred();
+
+            const mockRPC = async (route, args) => {
+                if (args.method === "write") {
+                    writeCalls += 1;
+                    await writeDef;
+                }
+            };
+
+            const webClient = await createWebClient({ serverData, mockRPC });
+            await doAction(webClient, 1);
+
+            // switch to form view
+            await click(target.querySelector(".o_list_table .o_data_row .o_data_cell"));
+
+            // switch to edit mode
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(target, ".o_form_editable");
+            await editInput(target, ".o_field_widget[name=foo] input", "some value");
+
+            await click(target, ".breadcrumb-item.o_back_button a");
+            assert.containsNone(document.body, ".modal");
+
+            await click(target, ".breadcrumb-item.o_back_button a");
+            assert.containsNone(document.body, ".modal");
+
+            // unlock the create
+            writeDef.resolve();
+            await nextTick();
+
+            assert.strictEqual(writeCalls, 1, "should save once");
+        }
+    );
+
+    QUnit.test("domain returned by onchange is cleared on discard", async function (assert) {
+        serverData.models.partner.onchanges = {
+            foo: function () {},
+        };
+
+        const domain = [["id", "=", 1]];
+        let expectedDomain = domain;
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo"/>
+                    <field name="trululu"/>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "onchange" && args.args[0][0] === 1) {
+                    // onchange returns a domain only on record 1
+                    return Promise.resolve({
+                        domain: {
+                            trululu: domain,
+                        },
+                    });
+                }
+                if (args.method === "name_search") {
+                    assert.deepEqual(args.kwargs.args, expectedDomain);
+                }
+            },
+            resId: 1,
+            resIds: [1, 2],
+        });
+
+        // switch to edit mode
+        await click(target.querySelector(".o_form_button_edit"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "yop",
+            "should be on record 1"
+        );
+
+        // change foo to trigger the onchange
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+
+        // open many2one dropdown to check if the domain is applied
+        target.querySelector(".o-autocomplete.dropdown input").focus(); // autocomplete closes with the blur, so it must have the focus
+        await click(target.querySelector(".o-autocomplete.dropdown input"));
+
+        // switch to another record (should ask to discard changes, and reset the domain)
+        target.querySelector(".o_pager_next").focus(); // change the focus before click, this will close the autocomplete
+        await click(target.querySelector(".o_pager_next"));
+
+        assert.containsNone(document.body, ".modal", "should not open modal");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "blip",
+            "should be on record 2"
+        );
+
+        // open many2one dropdown to check if the domain is applied
+        expectedDomain = [];
+        await click(target.querySelector(".o-autocomplete.dropdown input"));
+    });
+
+    QUnit.test("discard after a failed save (and close notifications)", async function (assert) {
+        patchWithCleanup(browser, { setTimeout: () => 1 });
+
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="date" required="true"/>
+                    <field name="foo" required="true"/>
+                </form>`,
+            "partner,false,kanban": `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+
+        await click(target.querySelector(".o_control_panel .o-kanban-button-new"));
+
+        //cannot save because there is a required field
+        await click(target.querySelector(".o_control_panel .o_form_button_save"));
+        assert.containsOnce(target, ".o_notification");
+        await click(target.querySelector(".o_control_panel .o_form_button_cancel"));
+        assert.containsNone(target, ".o_form_view");
+        assert.containsOnce(target, ".o_kanban_view");
+        assert.containsNone(target, ".o_notification");
+    });
+
+    QUnit.test(
+        "one2many create record dialog shouldn't have a 'remove' button",
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <kanban>
+                                <templates>
+                                    <t t-name="kanban-box">
+                                        <field name="foo"/>
+                                    </t>
+                                </templates>
+                            </kanban>
+                            <form>
+                                <field name="foo"/>
+                            </form>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+
+            await click(target.querySelector(".o_form_button_create"));
+            await click(target.querySelector(".o-kanban-button-new"));
+
+            assert.containsOnce(target, ".modal");
+            assert.containsNone(target, ".modal .modal-footer .o_btn_remove");
+        }
+    );
+
+    QUnit.test(
+        "edit a record in readonly and switch to edit before it is actually saved",
+        async function (assert) {
+            assert.expect(3);
+
+            const def = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="foo"/>
+                        <field name="bar" widget="toggle_button"/>
+                    </form>`,
+                async mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(args.args[1], { bar: false });
+                        await def;
+                    }
+                },
+                resId: 1,
+            });
+
+            // edit the record (in readonly) with toogle_button widget (and delay the write RPC)
+            await click(target.querySelector(".o_field_widget[name=bar] button"));
+
+            // switch to edit mode
+            await click(target.querySelector(".o_form_button_edit"));
+
+            assert.containsOnce(target, ".o_form_readonly"); // should wait for the RPC to return
+
+            // make write RPC return
+            def.resolve();
+            await nextTick();
+
+            assert.containsOnce(target, ".o_form_editable");
+        }
+    );
+
+    QUnit.test(
+        '"bare" buttons in template should not trigger button click',
+        async function (assert) {
+            assert.expect(4);
+
+            const actionService = {
+                start() {
+                    return {
+                        doActionButton(args) {
+                            assert.step("doActionButton");
+                            delete args.onClose;
+                            assert.deepEqual(args, {
+                                buttonContext: {},
+                                context: {
+                                    lang: "en",
+                                    tz: "taht",
+                                    uid: 7,
+                                },
+                                resId: 2,
+                                resIds: [2],
+                                resModel: "partner",
+                                special: "save",
+                            });
+                        },
+                    };
+                },
+            };
+
+            registry.category("services").add("action", actionService, { force: true });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<form>" +
+                    '<button string="Save" class="btn-primary" special="save"/>' +
+                    '<button class="mybutton">westvleteren</button>' +
+                    "</form>",
+                resId: 2,
+            });
+
+            await click(target.querySelector(".o_form_view .o_content button.btn-primary"));
+            assert.verifySteps(["doActionButton"]);
+            await click(target.querySelector(".o_form_view button.mybutton"));
+            assert.verifySteps([]);
+        }
+    );
+
+    QUnit.test(
+        "form view with inline tree view with optional fields and local storage mock",
+        async function (assert) {
+            patchWithCleanup(browser.localStorage, {
+                getItem: function (key) {
+                    assert.step("getItem " + key);
+                    return this._super(key);
+                },
+                setItem: function (key, value) {
+                    assert.step("setItem " + key + " to " + value);
+                    return this._super(key, value);
+                },
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="qux"/>
+                        <field name="p">
+                            <tree>
+                                <field name="foo"/>
+                                <field name="bar" optional="hide"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            const localStorageKey = "optional_fields,partner,form,100000001,p,list,bar,foo";
+
+            assert.containsN(
+                target,
+                ".o_list_table th",
+                2,
+                "should have 2 th, 1 for selector, 1 for foo column"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="foo"]`),
+                "should have a visible foo field"
+            );
+
+            assert.notOk(
+                target.querySelector(`th[data-name="bar"]`),
+                "should not have a visible bar field"
+            );
+
+            // optional fields
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-toggle"));
+            assert.containsN(
+                target,
+                ".o_optional_columns_dropdown .dropdown-item",
+                1,
+                "dropdown have 1 optional field"
+            );
+
+            // enable optional field
+            await click(target.querySelector(`.o_optional_columns_dropdown input[name="bar"]`));
+            assert.verifySteps([
+                "getItem " + localStorageKey,
+                "setItem " + localStorageKey + " to bar",
+            ]);
+
+            assert.containsN(
+                target,
+                ".o_list_table th",
+                3,
+                "should have 3 th, 1 for selector, 2 for columns"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="foo"]`),
+                "should have a visible foo field"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="bar"]`),
+                "should have a visible bar field"
+            );
+        }
+    );
+
+    QUnit.test(
+        "form view with tree_view_ref with optional fields and local storage mock",
+        async function (assert) {
+            patchWithCleanup(browser.localStorage, {
+                getItem: function (key) {
+                    assert.step("getItem " + key);
+                    return this._super(key);
+                },
+                setItem: function (key, value) {
+                    assert.step("setItem " + key + " to " + value);
+                    return this._super(key, value);
+                },
+            });
+
+            serverData.views = {
+                "partner,nope_not_this_one,list":
+                    '<tree><field name="foo"/><field name="bar"/></tree>',
+                "partner,34,list": `
+                    <tree>
+                        <field name="foo" optional="hide"/>
+                        <field name="bar"/>
+                    </tree>`,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                // we add a widget= as a bit of a hack. Without widget, the views are inlined by the server.
+                // the mock server doesn't replicate fully this behavior.
+                // Putting a widget prevent the inlining.
+                arch: `
+                    <form>
+                        <field name="qux"/>
+                        <field name="p" widget="one2many" context="{'tree_view_ref': '34'}"/>
+                    </form>`,
+            });
+
+            const localStorageKey = "optional_fields,partner,form,100000001,p,list,bar,foo";
+
+            assert.containsN(
+                target,
+                ".o_list_table th",
+                2,
+                "should have 2 th, 1 bar selector, 1 for foo column"
+            );
+
+            assert.notOk(
+                target.querySelector(`th[data-name="foo"]`),
+                "should not have a visible foo field"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="bar"]`),
+                "should have a visible bar field"
+            );
+
+            // optional fields
+            await click(target.querySelector(".o_optional_columns_dropdown .dropdown-toggle"));
+            assert.containsN(
+                target,
+                ".o_optional_columns_dropdown .dropdown-item",
+                1,
+                "dropdown have 1 optional field"
+            );
+
+            // enable optional field
+            await click(target.querySelector(`.o_optional_columns_dropdown input[name="foo"]`));
+            assert.verifySteps([
+                "getItem " + localStorageKey,
+                "setItem " + localStorageKey + " to foo",
+            ]);
+
+            assert.containsN(
+                target,
+                ".o_list_table th",
+                3,
+                "should have 3 th, 1 for selector, 2 for columns"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="foo"]`),
+                "should have a visible foo field"
+            );
+
+            assert.ok(
+                target.querySelector(`th[data-name="bar"]`),
+                "should have a visible bar field"
+            );
+        }
+    );
+
+    QUnit.test("display tooltips for save and discard buttons", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/></form>`,
+        });
+        assert.hasAttrValue(
+            target.querySelector(".o_form_button_save"),
+            "data-tooltip",
+            "Save record"
+        );
+        assert.hasAttrValue(
+            target.querySelector(".o_form_button_cancel"),
+            "data-tooltip",
+            "Discard changes"
+        );
+    });
+
+    QUnit.test("resequence list lines when discardable lines are present", async function (assert) {
+        var onchangeNum = 0;
+        serverData.models.partner.onchanges = {
+            p: function (obj) {
+                onchangeNum++;
+                obj.foo = obj.p ? obj.p.length.toString() : "0";
+            },
+        };
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree editable="bottom">
+                    <field name="int_field" widget="handle"/>
+                    <field name="display_name" required="1"/>
+                </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/><field name="p"/></form>`,
+        });
+
+        assert.strictEqual(onchangeNum, 1, "one onchange happens when form is opened");
+        assert.strictEqual(
+            target.querySelector('[name="foo"] input').value,
+            "0",
+            "onchange worked there is 0 line"
+        );
+
+        // Add one line
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await editInput(target, `.o_field_cell [name="display_name"] input`, "first line");
+        assert.strictEqual(onchangeNum, 2, "one onchange happens when a line is added");
+        assert.strictEqual(
+            target.querySelector('[name="foo"] input').value,
+            "1",
+            "onchange worked there is 1 line"
+        );
+
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await nextTick();
+        // Drag and drop second line before first one (with 1 draft and invalid line)
+        await dragAndDrop(
+            "tbody.ui-sortable tr:nth-child(1) .o_handle_cell",
+            "tbody.ui-sortable tr:nth-child(2)"
+        );
+        assert.strictEqual(onchangeNum, 3, "one onchange happens when lines are resequenced");
+        assert.strictEqual(
+            target.querySelector('[name="foo"] input').value,
+            "1",
+            "onchange worked there is 1 line"
+        );
+        // Add a second line
+        await click(target.querySelector(".o_field_x2many_list_row_add a"));
+        await editInput(target, ".o_selected_row input", "second line");
+
+        assert.strictEqual(onchangeNum, 4, "one onchange happens when a line is added");
+        assert.strictEqual(
+            target.querySelector('[name="foo"] input').value,
+            "2",
+            "onchange worked there is 2 lines"
+        );
+    });
+
+    QUnit.test(
+        "reload company when creating records of model res.company",
+        async function (assert) {
+            const fakeActionService = {
+                start(env, { actionMain }) {
+                    return Object.assign({}, actionMain, {
+                        doAction: (actionRequest) => {
+                            if (actionRequest === "reload_context") {
+                                assert.step("reload company");
+                                return Promise.resolve();
+                            }
+                        },
+                    });
+                },
+            };
+            serviceRegistry.add("action", fakeActionService, { force: true });
+
+            await makeView({
+                type: "form",
+                resModel: "res.company",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="name"/>
+                    </form>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            await editInput(target, '.o_field_widget[name="name"] input', "Test Company");
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.verifySteps(["get_views", "onchange", "create", "reload company", "read"]);
+        }
+    );
+
+    QUnit.test(
+        "reload company when writing on records of model res.company",
+        async function (assert) {
+            const fakeActionService = {
+                start(env, { actionMain }) {
+                    return Object.assign({}, actionMain, {
+                        doAction: (actionRequest) => {
+                            if (actionRequest === "reload_context") {
+                                assert.step("reload company");
+                                return Promise.resolve();
+                            }
+                        },
+                    });
+                },
+            };
+            serviceRegistry.add("action", fakeActionService, { force: true });
+
+            serverData.models["res.company"].records = [
+                {
+                    id: 1,
+                    name: "Test Company",
+                },
+            ];
+
+            await makeView({
+                type: "form",
+                resModel: "res.company",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="name"/>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+            await editInput(target, '.o_field_widget[name="name"] input', "Test Company2");
+            await click(target.querySelector(".o_form_button_save"));
+
+            assert.verifySteps(["get_views", "read", "write", "reload company", "read"]);
+        }
+    );
+
+    QUnit.test(
+        "company_dependent field in form view, in multi company group",
+        async function (assert) {
+            serverData.models.partner.fields.product_id.company_dependent = true;
+            serverData.models.partner.fields.product_id.help = "this is a tooltip";
+            serverData.models.partner.fields.foo.company_dependent = true;
+
+            patchWithCleanup(browser, {
+                setTimeout: (fn) => fn(),
+                clearTimeout: () => {},
+            });
+
+            patchWithCleanup(session, {
+                display_switch_company_menu: true,
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="foo"/>
+                            <field name="product_id"/>
+                        </group>
+                    </form>`,
+            });
+
+            await mouseEnter(target.querySelector(".o_form_label[for=product_id]"));
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+                "this is a tooltip\n\nValues set here are company-specific."
+            );
+
+            await mouseEnter(target.querySelector(".o_form_label[for=foo]"));
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+                "Values set here are company-specific."
+            );
+        }
+    );
+
+    QUnit.test(
+        "company_dependent field in form view, not in multi company group",
+        async function (assert) {
+            serverData.models.partner.fields.product_id.company_dependent = true;
+            serverData.models.partner.fields.product_id.help = "this is a tooltip";
+
+            patchWithCleanup(browser, {
+                setTimeout: (fn) => fn(),
+                clearTimeout: () => {},
+            });
+
+            patchWithCleanup(session, {
+                display_switch_company_menu: false,
+            });
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="product_id"/>
+                        </group>
+                    </form>`,
+            });
+
+            await mouseEnter(target.querySelector(".o_form_label"));
+            await nextTick();
+            assert.strictEqual(
+                target.querySelector(".o-tooltip .o-tooltip--help").textContent,
+                "this is a tooltip"
+            );
+        }
+    );
+
+    QUnit.test("reload a form view with a pie chart does not crash", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <widget name="pie_chart" title="qux by product" attrs="{'measure': 'qux', 'groupby': 'product_id'}"/>
+                </form>`,
+            resIds: [1, 2],
+            resId: 1,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_widget .o_pie_chart .o_graph_canvas_container .chartjs-render-monitor"
+        );
+
+        await click(target.querySelector(".o_pager_next"));
+
+        assert.containsOnce(
+            target,
+            ".o_widget .o_pie_chart .o_graph_canvas_container .chartjs-render-monitor"
+        );
+    });
+
+    QUnit.test("Auto save: save when page changed", async function (assert) {
+        assert.expect(10);
+
+        serverData.actions[1] = {
+            id: 1,
+            name: "Partner",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        };
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="name"/>
+                </tree>`,
+            "partner,false,form": `
+                <form>
+                    <group>
+                        <field name="name"/>
+                    </group>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "write") {
+                assert.deepEqual(args.args, [[1], { name: "aaa" }]);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 1);
+
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name='name'] input", "aaa");
+
+        await click(target.querySelector(`.o_pager button.o_pager_next`));
+        assert.containsOnce(target, ".o_form_editable");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "second record",
+        ]);
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="name"] input').value,
+            "name"
+        );
+
+        await click(target.querySelector(".o_form_button_cancel"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "second record",
+        ]);
+        assert.strictEqual(
+            target.querySelector('.o_field_widget[name="name"]').textContent,
+            "name"
+        );
+
+        await click(target.querySelector(`.o_pager button.o_pager_previous`));
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+        assert.strictEqual(target.querySelector('.o_field_widget[name="name"]').textContent, "aaa");
+    });
+
+    QUnit.test("Auto save: save when breadcrumb clicked", async function (assert) {
+        assert.expect(7);
+
+        serverData.actions[1] = {
+            id: 1,
+            name: "Partner",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        };
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="name"/>
+                </tree>`,
+            "partner,false,form": `
+                <form>
+                    <group>
+                        <field name="name"/>
+                    </group>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "write") {
+                assert.deepEqual(args.args, [[1], { name: "aaa" }]);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 1);
+
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name='name'] input", "aaa");
+
+        await click(target.querySelector(".breadcrumb-item.o_back_button"));
+
+        assert.strictEqual(target.querySelector(".breadcrumb").textContent, "Partner");
+        assert.strictEqual(target.querySelector(".o_field_cell").textContent, "aaa");
+
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+        assert.strictEqual(target.querySelector('.o_field_widget[name="name"]').textContent, "aaa");
+    });
+
+    QUnit.test("Auto save: save when action changed", async function (assert) {
+        assert.expect(6);
+
+        serverData.actions[1] = {
+            id: 1,
+            name: "Partner",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        };
+
+        serverData.actions[2] = {
+            id: 2,
+            name: "Other action",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "kanban"]],
+        };
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="name"/>
+                </tree>`,
+            "partner,false,form": `
+                <form>
+                    <group>
+                        <field name="name"/>
+                    </group>
+                </form>`,
+            "partner,false,search": "<search></search>",
+            "partner,false,kanban": `
+                <kanban>
+                    <field name="name"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "write") {
+                assert.deepEqual(args.args, [[1], { name: "aaa" }]);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 1);
+
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name='name'] input", "aaa");
+
+        await doAction(webClient, 2, { clearBreadcrumbs: true });
+
+        assert.strictEqual(target.querySelector(".breadcrumb").textContent, "Other action");
+
+        await doAction(webClient, 1, { clearBreadcrumbs: true });
+
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.containsOnce(target, ".o_form_readonly");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+        assert.strictEqual(target.querySelector('.o_field_widget[name="name"]').textContent, "aaa");
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="display_name"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, { args, method, model }) {
+                if (method === "write" && model === "partner") {
+                    assert.deepEqual(args, [[1], { display_name: "test" }]);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.notStrictEqual(
+            target.querySelector('.o_field_widget[name="display_name"]').value,
+            "test"
+        );
+
+        await editInput(target, '.o_field_widget[name="display_name"] input', "test");
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (invalid field)", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="display_name" required="1"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, { args, method, model }) {
+                if (method === "write" && model === "partner") {
+                    assert.step("save"); // should not be called
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, '.o_field_widget[name="display_name"] input', "");
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+
+        assert.verifySteps([], "should not save because of invalid field");
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (not dirty)", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="display_name"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, { args, method, model }) {
+                if (method === "write" && model === "partner") {
+                    assert.step("save"); // should not be called
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+
+        assert.verifySteps([], "should not save because we do not change anything");
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (detached form)", async function (assert) {
+        serverData.actions[1] = {
+            id: 1,
+            name: "Partner",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+        };
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>`,
+            "partner,false,form": `
+                <form>
+                    <group>
+                        <field name="display_name"/>
+                    </group>
+                </form>`,
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "write") {
+                assert.step("save");
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 1);
+
+        // Click on a row to open a record
+        await click(target.querySelector(".o_data_row td.o_data_cell"));
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".breadcrumb li")), [
+            "Partner",
+            "first record",
+        ]);
+
+        // Return in the list view to detach the form view
+        await click(target.querySelector(".o_back_button"));
+        assert.strictEqual(target.querySelector(".breadcrumb").textContent, "Partner");
+
+        // Simulate tab/browser close in the list
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+
+        // write rpc should not trigger because form view has been detached
+        // and list has nothing to save
+        assert.verifySteps([]);
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (onchanges)", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.onchanges = {
+            display_name: function (obj) {
+                obj.name = `copy: ${obj.display_name}`;
+            },
+        };
+
+        const def = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="display_name"/>
+                        <field name="name"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, { args, method, model }) {
+                if (method === "onchange" && model === "partner") {
+                    return def;
+                }
+                if (method === "write" && model === "partner") {
+                    assert.deepEqual(args, [[1], { display_name: "test" }]);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, '.o_field_widget[name="display_name"] input', "test");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (onchanges 2)", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.onchanges = {
+            display_name: function () {},
+        };
+
+        const def = makeDeferred();
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="display_name"/>
+                        <field name="name"/>
+                    </group>
+                </form>`,
+            resId: 1,
+            mockRPC(route, { args, method }) {
+                if (method === "onchange") {
+                    return def;
+                }
+                if (method === "write") {
+                    assert.deepEqual(args, [[1], { display_name: "test1", name: "test2" }]);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        await editInput(target, '.o_field_widget[name="display_name"] input', "test1");
+        await editInput(target, '.o_field_widget[name="name"] input', "test2");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (pending change)", async function (assert) {
+        assert.expect(5);
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><field name="foo"/></form>`,
+            resId: 1,
+            mockRPC(route, { args, method }) {
+                assert.step(method);
+                if (method === "write") {
+                    assert.deepEqual(args, [[1], { foo: "test" }]);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+
+        // edit 'foo' but do not focusout -> the model isn't aware of the change
+        // until the 'beforeunload' event is triggered
+        const input = target.querySelector(".o_field_widget[name='foo'] input");
+        input.value = "test";
+        await triggerEvent(input, null, "input");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+
+        assert.verifySteps(["get_views", "read", "write"]);
+    });
+
+    QUnit.test(
+        "Auto save: save on closing tab/browser (onchanges + pending change)",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.partner.onchanges = {
+                display_name: function (obj) {
+                    obj.name = `copy: ${obj.display_name}`;
+                },
+            };
+
+            const def = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="name"/>
+                        <field name="foo"/>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { args, method }) {
+                    assert.step(method);
+                    if (method === "onchange") {
+                        return def;
+                    }
+                    if (method === "write") {
+                        assert.deepEqual(args, [
+                            [1],
+                            { display_name: "test", name: "test", foo: "test" },
+                        ]);
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+            // edit 'display_name' and simulate a focusout (trigger the 'change' event)
+            await editInput(target, '.o_field_widget[name="display_name"] input', "test");
+
+            // edit 'name' and simulate a focusout (trigger the 'change' event)
+            await editInput(target, '.o_field_widget[name="name"] input', "test");
+
+            // edit 'foo' but do not focusout -> the model isn't aware of the change
+            // until the 'beforeunload' event is triggered
+            const input = target.querySelector('.o_field_widget[name="foo"] input');
+            input.value = "test";
+            await triggerEvent(input, null, "input");
+
+            // trigger the 'beforeunload' event -> notifies the model directly and saves
+            window.dispatchEvent(new Event("beforeunload"));
+            await nextTick();
+
+            assert.verifySteps(["get_views", "read", "onchange", "write"]);
+        }
+    );
+
+    QUnit.test(
+        "Auto save: save on closing tab/browser (invalid pending change)",
+        async function (assert) {
+            assert.expect(3);
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `<form><field name="qux"/></form>`,
+                resId: 1,
+                mockRPC(route, { method }) {
+                    assert.step(method);
+                    if (method === "write") {
+                        assert.notOk(true, "should not call the /write route");
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+
+            // edit 'foo' but do not focusout -> the model isn't aware of the change
+            // until the 'beforeunload' event is triggered
+            const input = target.querySelector(".o_field_widget[name='qux'] input");
+            input.value = "test";
+            await triggerEvent(input, null, "input");
+
+            window.dispatchEvent(new Event("beforeunload"));
+            await nextTick();
+
+            assert.verifySteps(["get_views", "read"]);
+        }
+    );
+
+    QUnit.test(
+        "Auto save: save on closing tab/browser (onchanges + invalid field)",
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                display_name: function (obj) {
+                    obj.name = `copy: ${obj.display_name}`;
+                },
+            };
+
+            const def = makeDeferred();
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="display_name"/>
+                            <field name="name" required="1"/>
+                        </group>
+                    </form>`,
+                resId: 1,
+                mockRPC(route, { method }) {
+                    assert.step(method);
+                    if (method === "onchange") {
+                        return def;
+                    }
+                    if (method === "write") {
+                        throw new Error("Should not save the record");
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_form_button_edit"));
+            await editInput(target, '.o_field_widget[name="display_name"] input', "test");
+            await editInput(target, '.o_field_widget[name="name"] input', "");
+
+            window.dispatchEvent(new Event("beforeunload"));
+            await nextTick();
+
+            assert.verifySteps(["get_views", "read", "onchange"]);
+        }
+    );
+
+    QUnit.test('field "length" with value 0: can apply onchange', async function (assert) {
+        serverData.models.partner.fields.length = { string: "Length", type: "float", default: 0 };
+        serverData.models.partner.fields.foo.default = "foo default";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="foo"/><field name="length"/></form>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=foo] input").value,
+            "foo default",
+            "should contain input with initial value"
+        );
+    });
+
+    QUnit.test(
+        'field "length" with value 0: readonly fields are not sent when saving',
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.models.partner.fields.length = {
+                string: "Length",
+                type: "float",
+                default: 0,
+            };
+            serverData.models.partner.fields.foo.default = "foo default";
+
+            // define an onchange on display_name to check that the value of readonly
+            // fields is correctly sent for onchanges
+            serverData.models.partner.onchanges = {
+                display_name: function () {},
+                p: function () {},
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="p">
+                            <tree>
+                                <field name="display_name"/>
+                            </tree>
+                            <form>
+                                <field name="length"/>
+                                <field name="display_name"/>
+                                <field name="foo" attrs="{'readonly': [['display_name', '=', 'readonly']]}"/>
+                            </form>
+                        </field>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "create") {
+                        assert.deepEqual(
+                            args.args[0],
+                            {
+                                p: [
+                                    [
+                                        0,
+                                        args.args[0].p[0][1],
+                                        { length: 0, display_name: "readonly" },
+                                    ],
+                                ],
+                            },
+                            "should not have sent the value of the readonly field"
+                        );
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_field_x2many_list_row_add a"));
+            assert.containsOnce(
+                target,
+                ".modal .o_field_widget[name=foo] input",
+                "foo should be editable"
+            );
+            await editInput(target, ".modal .o_field_widget[name=foo] input", "foo value");
+            await editInput(target, ".modal .o_field_widget[name=display_name] input", "readonly");
+            assert.containsOnce(
+                target,
+                ".modal .o_field_widget[name=foo] span",
+                "foo should be readonly"
+            );
+            await click(target.querySelector(".modal-footer .btn-primary.o_form_button_save"));
+
+            await click(target.querySelector(".o_form_button_save")); // save the record
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index 3abb4243196..a472dd8cf64 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
 import {
     click,
     getFixture,
@@ -13,8 +12,6 @@ import {
 import {
     editFavoriteName,
     saveFavorite,
-    setupControlPanelFavoriteMenuRegistry,
-    setupControlPanelServiceRegistry,
     switchView,
     toggleComparisonMenu,
     toggleFavoriteMenu,
@@ -25,13 +22,12 @@ import {
     toggleMenuItemOption,
     toggleSaveFavorite,
 } from "@web/../tests/search/helpers";
-import { makeView } from "@web/../tests/views/helpers";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
-import { dialogService } from "@web/core/dialog/dialog_service";
+import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { BORDER_WHITE, DEFAULT_BG } from "@web/views/graph/colors";
 import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
-import { browser } from "@web/core/browser/browser";
 import { patchWithCleanup } from "../helpers/utils";
 
 const serviceRegistry = registry.category("services");
@@ -297,9 +293,7 @@ QUnit.module("Views", (hooks) => {
                 `,
             },
         };
-        setupControlPanelServiceRegistry();
-        setupControlPanelFavoriteMenuRegistry();
-        serviceRegistry.add("dialog", dialogService);
+        setupViewRegistries();
         patchWithCleanup(browser, { setTimeout: (fn) => fn() });
 
         target = getFixture();
@@ -2945,7 +2939,6 @@ QUnit.module("Views", (hooks) => {
     QUnit.test('graph view with attribute disable_linking="1"', async function (assert) {
         assert.expect(4);
 
-        serviceRegistry.add("localization", makeFakeLocalizationService());
         serviceRegistry.add(
             "action",
             {
diff --git a/addons/web/static/tests/views/helpers.js b/addons/web/static/tests/views/helpers.js
index 6df3df10074..0b9495260f5 100644
--- a/addons/web/static/tests/views/helpers.js
+++ b/addons/web/static/tests/views/helpers.js
@@ -1,9 +1,25 @@
 /** @odoo-module **/
 
+import { registry } from "@web/core/registry";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { getFixture, mount } from "@web/../tests/helpers/utils";
 import { getDefaultConfig, View } from "@web/views/view";
+import { MainComponentsContainer } from "@web/core/main_components_container";
+import {
+    setupControlPanelFavoriteMenuRegistry,
+    setupControlPanelServiceRegistry,
+} from "../search/helpers";
 import { addLegacyMockEnvironment } from "../webclient/helpers";
+import {
+    makeFakeLocalizationService,
+    makeFakeRouterService,
+    makeFakeUserService,
+} from "../helpers/mock_services";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { popoverService } from "@web/core/popover/popover_service";
+import { createDebugContext } from "@web/core/debug/debug_context";
+
+const serviceRegistry = registry.category("services");
 
 /**
  * @typedef {{
@@ -19,7 +35,7 @@ import { addLegacyMockEnvironment } from "../webclient/helpers";
  * @param {MakeViewParams} params
  * @returns {Component}
  */
-export const makeView = async (params) => {
+export async function makeView(params) {
     const props = { ...params };
     const serverData = props.serverData;
     const mockRPC = props.mockRPC;
@@ -36,7 +52,7 @@ export const makeView = async (params) => {
 
     if (props.arch) {
         serverData.views = serverData.views || {};
-        props.viewId = 100000001; // hopefully will not conflict with an id already in views
+        props.viewId = params.viewId || 100000001; // hopefully will not conflict with an id already in views
         serverData.views[`${props.resModel},${props.viewId},${props.type}`] = props.arch;
         delete props.arch;
         props.searchViewId = 100000002; // hopefully will not conflict with an id already in views
@@ -46,6 +62,7 @@ export const makeView = async (params) => {
     }
 
     const env = await makeTestEnv({ serverData, mockRPC, config });
+    Object.assign(env, createDebugContext(env)); // This is needed if the views are in debug mode
 
     /** Legacy Environment, for compatibility sakes
      *  Remove this as soon as we drop the legacy support
@@ -63,11 +80,28 @@ export const makeView = async (params) => {
     }
     await addLegacyMockEnvironment(env, legacyParams);
 
-    const view = await mount(View, getFixture(), { env, props });
+    const target = getFixture();
+    const view = await mount(View, target, { env, props });
+    await mount(MainComponentsContainer, target, { env, props });
+
     const viewNode = view.__owl__;
     const withSearchNode = Object.values(viewNode.children)[0];
     const concreteViewNode = Object.values(withSearchNode.children)[0];
     const concreteView = concreteViewNode.component;
 
     return concreteView;
-};
+}
+
+export function setupViewRegistries() {
+    setupControlPanelFavoriteMenuRegistry();
+    setupControlPanelServiceRegistry();
+    serviceRegistry.add(
+        "user",
+        makeFakeUserService((group) => group === "base.group_allow_export"),
+        { force: true }
+    );
+    serviceRegistry.add("router", makeFakeRouterService(), { force: true });
+    serviceRegistry.add("localization", makeFakeLocalizationService()), { force: true };
+    serviceRegistry.add("dialog", dialogService), { force: true };
+    serviceRegistry.add("popover", popoverService), { force: true };
+}
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
new file mode 100644
index 00000000000..c4fb0de1dca
--- /dev/null
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -0,0 +1,9528 @@
+/** @odoo-module **/
+
+import { makeFakeDialogService } from "@web/../tests/helpers/mock_services";
+import {
+    click,
+    dragAndDrop,
+    editInput,
+    getFixture,
+    getNodesTextContent,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+    triggerEvent,
+    triggerHotkey,
+} from "@web/../tests/helpers/utils";
+import {
+    getFacetTexts,
+    getPagerLimit,
+    getPagerValue,
+    pagerNext,
+    validateSearch,
+} from "@web/../tests/search/helpers";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { browser } from "@web/core/browser/browser";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { makeErrorFromResponse } from "@web/core/network/rpc_service";
+import { registry } from "@web/core/registry";
+import { nbsp } from "@web/core/utils/strings";
+import { getNextTabableElement } from "@web/core/utils/ui";
+import { session } from "@web/session";
+import { KanbanAnimatedNumber } from "@web/views/kanban/kanban_animated_number";
+import { kanbanView } from "@web/views/kanban/kanban_view";
+import AbstractField from "web.AbstractField";
+import legacyFieldRegistry from "web.field_registry";
+import Widget from "web.Widget";
+import widgetRegistry from "web.widget_registry";
+
+const { Component, xml } = owl;
+
+const serviceRegistry = registry.category("services");
+const viewWidgetRegistry = registry.category("view_widgets");
+
+// ----------------------------------------------------------------------------
+// Helpers
+// ----------------------------------------------------------------------------
+
+function patchDialog(addDialog) {
+    serviceRegistry.add("dialog", makeFakeDialogService(addDialog), { force: true });
+}
+
+// Kanban
+// WOWL remove this helper and use the control panel instead
+async function reload(kanban, params = {}) {
+    kanban.env.searchModel.reload(params);
+    kanban.env.searchModel.search();
+    await nextTick();
+}
+
+function getCard(cardIndex = 0) {
+    return target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")[cardIndex];
+}
+
+function getColumn(groupIndex = 0, ignoreFolded = false) {
+    let selector = ".o_kanban_group";
+    if (ignoreFolded) {
+        selector += ":not(.o_column_folded)";
+    }
+    return target.querySelectorAll(selector)[groupIndex];
+}
+
+function getCardTexts(groupIndex) {
+    const root = groupIndex >= 0 ? getColumn(groupIndex) : target;
+    return [...root.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")]
+        .map((card) => card.innerText.trim())
+        .filter(Boolean);
+}
+
+function getCounters() {
+    return [...target.querySelectorAll(".o_kanban_counter_side")].map(
+        (counter) => counter.innerText
+    );
+}
+
+function getTooltips(groupIndex) {
+    const root = groupIndex >= 0 ? getColumn(groupIndex) : target;
+    return [...root.querySelectorAll(".o_kanban_counter_progress .progress-bar")]
+        .map((card) => card.dataset.tooltip)
+        .filter(Boolean);
+}
+
+// Record
+async function createRecord() {
+    await click(target, "button.o-kanban-button-new");
+}
+
+async function quickCreateRecord(groupIndex) {
+    await click(getColumn(groupIndex), ".o_kanban_quick_add");
+}
+
+async function editQuickCreateInput(field, value) {
+    await editInput(target, `.o_kanban_quick_create .o_field_widget[name=${field}] input`, value);
+}
+
+async function validateRecord() {
+    await click(target, ".o_kanban_quick_create .o_kanban_add");
+}
+
+async function editRecord() {
+    await click(target, ".o_kanban_quick_create .o_kanban_edit");
+}
+
+async function discardRecord() {
+    await click(target, ".o_kanban_quick_create .o_kanban_cancel");
+}
+
+async function toggleRecordDropdown(recordIndex) {
+    const group = target.querySelectorAll(`.o_kanban_record`)[recordIndex];
+    await click(group, ".o_dropdown_kanban .dropdown-toggle");
+}
+
+// Column
+async function createColumn() {
+    await click(target, ".o_column_quick_create > .o_quick_create_folded");
+}
+
+async function editColumnName(value) {
+    await editInput(target, ".o_column_quick_create input", value);
+}
+
+async function validateColumn() {
+    await click(target, ".o_column_quick_create .o_kanban_add");
+}
+
+async function toggleColumnActions(columnIndex) {
+    const group = getColumn(columnIndex);
+    await click(group, ".o_kanban_config .dropdown-toggle");
+    const buttons = group.querySelectorAll(".o_kanban_config .dropdown-menu .dropdown-item");
+    return (buttonText) => {
+        const re = new RegExp(`\\b${buttonText}\\b`, "i");
+        const button = [...buttons].find((b) => re.test(b.innerText));
+        return click(button);
+    };
+}
+
+async function loadMore(columnIndex) {
+    await click(getColumn(columnIndex), ".o_kanban_load_more button");
+}
+
+let serverData;
+let target;
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        patchWithCleanup(KanbanAnimatedNumber, { enableAnimations: false });
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        int_field: { string: "int_field", type: "integer", sortable: true },
+                        qux: { string: "my float", type: "float" },
+                        product_id: {
+                            string: "something_id",
+                            type: "many2one",
+                            relation: "product",
+                        },
+                        category_ids: {
+                            string: "categories",
+                            type: "many2many",
+                            relation: "category",
+                        },
+                        sequence: { type: "integer" },
+                        state: {
+                            string: "State",
+                            type: "selection",
+                            selection: [
+                                ["abc", "ABC"],
+                                ["def", "DEF"],
+                                ["ghi", "GHI"],
+                            ],
+                        },
+                        date: { string: "Date Field", type: "date" },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        image: { string: "Image", type: "binary" },
+                        displayed_image_id: {
+                            string: "cover",
+                            type: "many2one",
+                            relation: "ir.attachment",
+                        },
+                        currency_id: {
+                            string: "Currency",
+                            type: "many2one",
+                            relation: "currency",
+                            default: 1,
+                        },
+                        salary: { string: "Monetary field", type: "monetary" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.4,
+                            product_id: 3,
+                            state: "abc",
+                            category_ids: [],
+                            image: "R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==",
+                            salary: 1750,
+                            currency_id: 1,
+                        },
+                        {
+                            id: 2,
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            product_id: 5,
+                            state: "def",
+                            category_ids: [6],
+                            salary: 1500,
+                            currency_id: 1,
+                        },
+                        {
+                            id: 3,
+                            bar: true,
+                            foo: "gnap",
+                            int_field: 17,
+                            qux: -3,
+                            product_id: 3,
+                            state: "ghi",
+                            category_ids: [7],
+                            salary: 2000,
+                            currency_id: 2,
+                        },
+                        {
+                            id: 4,
+                            bar: false,
+                            foo: "blip",
+                            int_field: -4,
+                            qux: 9,
+                            product_id: 5,
+                            state: "ghi",
+                            category_ids: [],
+                            salary: 2222,
+                            currency_id: 1,
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        name: { string: "Display Name", type: "char" },
+                    },
+                    records: [
+                        { id: 3, name: "hello" },
+                        { id: 5, name: "xmo" },
+                    ],
+                },
+                category: {
+                    fields: {
+                        name: { string: "Category Name", type: "char" },
+                        color: { string: "Color index", type: "integer" },
+                    },
+                    records: [
+                        { id: 6, name: "gold", color: 2 },
+                        { id: 7, name: "silver", color: 5 },
+                    ],
+                },
+                "ir.attachment": {
+                    fields: {
+                        mimetype: { type: "char" },
+                        name: { type: "char" },
+                        res_model: { type: "char" },
+                        res_id: { type: "integer" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            name: "1.png",
+                            mimetype: "image/png",
+                            res_model: "partner",
+                            res_id: 1,
+                        },
+                        {
+                            id: 2,
+                            name: "2.png",
+                            mimetype: "image/png",
+                            res_model: "partner",
+                            res_id: 2,
+                        },
+                    ],
+                },
+                currency: {
+                    fields: {
+                        symbol: { string: "Symbol", type: "char" },
+                        position: {
+                            string: "Position",
+                            type: "selection",
+                            selection: [
+                                ["after", "A"],
+                                ["before", "B"],
+                            ],
+                        },
+                    },
+                    records: [
+                        { id: 1, display_name: "USD", symbol: "$", position: "before" },
+                        { id: 2, display_name: "EUR", symbol: "€", position: "after" },
+                    ],
+                },
+            },
+            views: {},
+        };
+        target = getFixture();
+
+        setupViewRegistries();
+    });
+
+    QUnit.module("KanbanView");
+
+    QUnit.test("basic ungrouped rendering", async (assert) => {
+        assert.expect(6);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban class="o_kanban_test">
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <t t-esc="record.foo.value"/>
+                            <field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            mockRPC(route, args) {
+                if (args.method === "web_search_read") {
+                    assert.ok(
+                        args.kwargs.context.bin_size,
+                        "should not request direct binary payload"
+                    );
+                }
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_ungrouped");
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_test");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+        assert.containsN(target, ".o_kanban_ghost", 6);
+        assert.containsOnce(target, ".o_kanban_record:contains(gnap)");
+    });
+
+    QUnit.test("basic grouped rendering", async (assert) => {
+        assert.expect(13);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban class="o_kanban_test">
+                    <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 === "web_read_group") {
+                    // the lazy option is important, so the server can fill in
+                    // the empty groups
+                    assert.ok(args.kwargs.lazy, "should use lazy read_group");
+                }
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_test");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
+
+        await toggleColumnActions(0);
+
+        // check available actions in kanban header's config dropdown
+        assert.containsOnce(
+            target,
+            ".o_kanban_header:first-child .o_kanban_config .o_kanban_toggle_fold"
+        );
+        assert.containsNone(target, ".o_kanban_header:first-child .o_kanban_config .o_column_edit");
+        assert.containsNone(
+            target,
+            ".o_kanban_header:first-child .o_kanban_config .o_column_delete"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_header:first-child .o_kanban_config .o_column_archive_records"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_header:first-child .o_kanban_config .o_column_unarchive_records"
+        );
+
+        // the next line makes sure that reload works properly.  It looks useless,
+        // but it actually test that a grouped local record can be reloaded without
+        // changing its result.
+        await validateSearch(target);
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
+    });
+
+    QUnit.test(
+        "basic grouped rendering with active field (archivable by default)",
+        async (assert) => {
+            // add active field on partner model and make all records active
+            serverData.models.partner.fields.active = {
+                string: "Active",
+                type: "char",
+                default: true,
+            };
+
+            patchDialog((_cls, props) => {
+                assert.step("open-dialog");
+                props.confirm();
+            });
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="active"/>' +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["bar"],
+            });
+
+            const clickColumnAction = await toggleColumnActions(1);
+
+            // check archive/restore all actions in kanban header's config dropdown
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:last-child .o_kanban_header .o_kanban_config .o_column_archive_records"
+            );
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:last-child .o_kanban_header .o_kanban_config .o_column_unarchive_records"
+            );
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+            assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+            assert.verifySteps([]);
+
+            await clickColumnAction("Archive All");
+
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsOnce(getColumn(0), ".o_kanban_record");
+            assert.containsNone(getColumn(1), ".o_kanban_record");
+            assert.verifySteps(["open-dialog"]);
+        }
+    );
+
+    QUnit.test(
+        "basic grouped rendering with active field and archive enabled (archivable true)",
+        async (assert) => {
+            // add active field on partner model and make all records active
+            serverData.models.partner.fields.active = {
+                string: "Active",
+                type: "char",
+                default: true,
+            };
+
+            patchDialog((_cls, props) => {
+                assert.step("open-dialog");
+                props.confirm();
+            });
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban archivable="true">' +
+                    '<field name="active"/>' +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["bar"],
+            });
+
+            const clickColumnAction = await toggleColumnActions(0);
+
+            // check archive/restore all actions in kanban header's config dropdown
+            assert.containsOnce(
+                target,
+                ".o_kanban_header:first-child .o_kanban_config .o_column_archive_records"
+            );
+            assert.containsOnce(
+                target,
+                ".o_kanban_header:first-child .o_kanban_config .o_column_unarchive_records"
+            );
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+            assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+            assert.verifySteps([]);
+
+            await clickColumnAction("Archive All");
+
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(getColumn(0), ".o_kanban_record");
+            assert.containsN(getColumn(1), ".o_kanban_record", 3);
+            assert.verifySteps(["open-dialog"]);
+        }
+    );
+
+    QUnit.test(
+        "basic grouped rendering with active field and hidden archive buttons (archivable false)",
+        async (assert) => {
+            // add active field on partner model and make all records active
+            serverData.models.partner.fields.active = {
+                string: "Active",
+                type: "char",
+                default: true,
+            };
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban archivable="false">' +
+                    '<field name="active"/>' +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["bar"],
+            });
+
+            await toggleColumnActions(0);
+
+            // check archive/restore all actions in kanban header's config dropdown
+            assert.containsNone(
+                target,
+                ".o_kanban_header:first-child .o_kanban_config .o_column_archive_records"
+            );
+            assert.containsNone(
+                target,
+                ".o_kanban_header:first-child .o_kanban_config .o_column_unarchive_records"
+            );
+        }
+    );
+
+    QUnit.test(
+        "m2m grouped rendering with active field and archive enabled (archivable true)",
+        async (assert) => {
+            // add active field on partner model and make all records active
+            serverData.models.partner.fields.active = {
+                string: "Active",
+                type: "char",
+                default: true,
+            };
+
+            // more many2many data
+            serverData.models.partner.records[0].category_ids = [6, 7];
+            serverData.models.partner.records[3].foo = "blork";
+            serverData.models.partner.records[3].category_ids = [];
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <kanban archivable="true">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+                groupBy: ["category_ids"],
+            });
+
+            assert.containsN(target, ".o_kanban_group", 3);
+            assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+            assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_kanban_group")].map((el) =>
+                    el.innerText.replace(/\s/g, " ")
+                ),
+                ["None (1)", "gold yopblip", "silver yopgnap"]
+            );
+
+            await click(getColumn(0));
+            await toggleColumnActions(0);
+
+            // check archive/restore all actions in kanban header's config dropdown
+            // despite the fact that the kanban view is configured to be archivable,
+            // the actions should not be there as it is grouped by an m2m field.
+            assert.containsNone(
+                target,
+                ".o_kanban_header .o_kanban_config .o_column_archive_records",
+                "should not be able to archive all the records"
+            );
+            assert.containsNone(
+                target,
+                ".o_kanban_header .o_kanban_config .o_column_unarchive_records",
+                "should not be able to unarchive all the records"
+            );
+        }
+    );
+
+    QUnit.test("context can be used in kanban template", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <t t-if="context.some_key">
+                                <field name="foo"/>
+                            </t>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            context: { some_key: 1 },
+            domain: [["id", "=", 1]],
+        });
+
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.containsOnce(
+            target,
+            ".o_kanban_record span:contains(yop)",
+            "condition in the kanban template should have been correctly evaluated"
+        );
+    });
+
+    QUnit.test("user context can be used in kanban template", async (assert) => {
+        const fakeUserService = {
+            start() {
+                return { context: { some_key: true } };
+            },
+        };
+        serviceRegistry.add("user", fakeUserService, { force: true });
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field t-if="user_context.some_key" name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            domain: [["id", "=", 1]],
+        });
+
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.containsOnce(
+            target,
+            ".o_kanban_record span:contains(yop)",
+            "condition in the kanban template should have been correctly evaluated"
+        );
+    });
+
+    QUnit.test("kanban with sub-template", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <t t-call="another-template"/>
+                            </div>
+                        </t>
+                        <t t-name="another-template">
+                            <span><field name="foo"/></span>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")),
+            ["yop", "blip", "gnap", "blip"]
+        );
+    });
+
+    QUnit.test("kanban with t-if/t-else on field", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field t-if="record.int_field.value > -1" name="int_field"/>
+                                <t t-else="">Negative value</t>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")),
+            ["10", "9", "17", "Negative value"]
+        );
+    });
+
+    QUnit.test("kanban with t-if/t-else on field with widget", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field t-if="record.int_field.value > -1" name="int_field" widget="integer"/>
+                                <t t-else="">Negative value</t>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")),
+            ["10", "9", "17", "Negative value"]
+        );
+    });
+
+    QUnit.test("field with widget and attributes in kanban", async (assert) => {
+        assert.expect(1);
+
+        class MyField extends Component {}
+        MyField.template = xml`<span/>`;
+        MyField.extractProps = (fieldName, record, attrs) => {
+            if (record.resId === 1) {
+                assert.deepEqual(attrs, {
+                    field_id: "int_field",
+                    name: "int_field",
+                    widget: "my_field",
+                    str: "some string",
+                    bool: "true",
+                    num: "4.5",
+                    options: {},
+                });
+            }
+        };
+        registry.category("fields").add("my_field", MyField);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="foo"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="int_field" widget="my_field"
+                                    str="some string"
+                                    bool="true"
+                                    num="4.5"
+                                />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+    });
+
+    QUnit.test("field with widget and dynamic attributes in kanban", async (assert) => {
+        class MyField extends Component {}
+        MyField.template = xml`<span/>`;
+        MyField.extractProps = (fieldName, record, attrs) => {
+            assert.step(
+                `${attrs["dyn-bool"]}/${attrs["interp-str"]}/${attrs["interp-str2"]}/${attrs["interp-str3"]}`
+            );
+        };
+        registry.category("fields").add("my_field", MyField);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="foo"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="int_field" widget="my_field"
+                                    t-att-dyn-bool="record.foo.value.length > 3"
+                                    t-attf-interp-str="hello {{record.foo.value}}"
+                                    t-attf-interp-str2="hello #{record.foo.value} !"
+                                    t-attf-interp-str3="hello {{record.foo.value}} }}"
+                                />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+        assert.verifySteps([
+            "false/hello yop/hello yop !/hello yop }}",
+            "true/hello blip/hello blip !/hello blip }}",
+            "true/hello gnap/hello gnap !/hello gnap }}",
+            "true/hello blip/hello blip !/hello blip }}",
+        ]);
+    });
+
+    QUnit.test("pager should be hidden in grouped mode", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsNone(target, ".o_pager");
+    });
+
+    QUnit.test("pager, ungrouped, with default limit", async (assert) => {
+        assert.expect(3);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "web_search_read") {
+                    assert.strictEqual(kwargs.limit, 40, "default limit should be 40 in Kanban");
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_pager");
+        assert.deepEqual(getPagerValue(target), [1, 4]);
+    });
+
+    QUnit.test("pager, ungrouped, with limit given in options", async (assert) => {
+        assert.expect(3);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "web_search_read") {
+                    assert.strictEqual(kwargs.limit, 2);
+                }
+            },
+            limit: 2,
+        });
+
+        assert.deepEqual(getPagerValue(target), [1, 2]);
+        assert.strictEqual(getPagerLimit(target), 4);
+    });
+
+    QUnit.test("pager, ungrouped, with limit set on arch and given in options", async (assert) => {
+        assert.expect(3);
+
+        // the limit given in the arch should take the priority over the one given in options
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban limit="3">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "web_search_read") {
+                    assert.strictEqual(kwargs.limit, 3);
+                }
+            },
+            limit: 2,
+        });
+
+        assert.deepEqual(getPagerValue(target), [1, 3]);
+        assert.strictEqual(getPagerLimit(target), 4);
+    });
+
+    QUnit.test(
+        "pager, ungrouped, deleting all records from last page should move to previous page",
+        async (assert) => {
+            patchDialog((_cls, props) => {
+                assert.step("open-dialog");
+                props.confirm();
+            });
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `<kanban limit="3">
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <div><a role="menuitem" type="delete" class="dropdown-item">Delete</a></div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            });
+
+            assert.deepEqual(getPagerValue(target), [1, 3]);
+            assert.strictEqual(getPagerLimit(target), 4);
+
+            // move to next page
+            await pagerNext(target);
+
+            assert.deepEqual(getPagerValue(target), [4, 4]);
+
+            // delete a record
+            await click(target, ".o_kanban_record a");
+
+            assert.verifySteps(["open-dialog"]);
+            assert.deepEqual(getPagerValue(target), [1, 3]);
+            assert.strictEqual(getPagerLimit(target), 3);
+        }
+    );
+
+    QUnit.test("create in grouped on m2o", 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><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        assert.containsN(target, ".o_kanban_group.o_group_draggable", 2);
+        assert.containsOnce(target, ".btn-primary.o-kanban-button-new");
+        assert.containsOnce(target, ".o_column_quick_create");
+
+        await createRecord();
+
+        assert.containsOnce(target, ".o_kanban_group:first-child > .o_kanban_quick_create");
+        assert.strictEqual(target.querySelector(".o_column_title").innerText, "hello");
+    });
+
+    QUnit.test("create in grouped on char", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["foo"],
+        });
+
+        assert.containsNone(target, ".o_kanban_group.o_group_draggable");
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.strictEqual(target.querySelector(".o_column_title").innerText, "blip");
+        assert.containsNone(target, ".o_kanban_group:first-child > .o_kanban_quick_create");
+    });
+
+    QUnit.test("prevent deletion when grouped by many2many field", async (assert) => {
+        serverData.models.partner.records[0].category_ids = [6, 7];
+        serverData.models.partner.records[3].category_ids = [7];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="foo"/>
+                                <t t-if="widget.deletable"><span class="thisisdeletable">delete</span></t>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["category_ids"],
+        });
+
+        assert.containsNone(target, ".thisisdeletable", "records should not be deletable");
+
+        await reload(kanban, { groupBy: ["foo"] });
+
+        assert.containsN(target, ".thisisdeletable", 4, "records should be deletable");
+    });
+
+    QUnit.test("quick create record without quick_create_view", async (assert) => {
+        assert.expect(16);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+            async mockRPC(route, { args, method }) {
+                assert.step(method || route);
+                if (method === "name_create") {
+                    assert.strictEqual(args[0], "new partner");
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+
+        // click on 'Create' -> should open the quick create in the first column
+        await createRecord();
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
+
+        const quickCreate = target.querySelector(
+            ".o_kanban_group:first-child .o_kanban_quick_create"
+        );
+
+        assert.containsOnce(quickCreate, ".o_form_view.o_xxs_form_view");
+        assert.containsOnce(quickCreate, "input");
+        assert.containsOnce(
+            quickCreate,
+            ".o_field_widget.o_required_modifier input[placeholder=Title]"
+        );
+
+        // fill the quick create and validate
+        await editQuickCreateInput("display_name", "new partner");
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+            "onchange", // quick create
+            "name_create", // should perform a name_create to create the record
+            "read", // read the created record
+            "onchange", // reopen the quick create automatically
+        ]);
+    });
+
+    QUnit.test("quick create record with quick_create_view", async (assert) => {
+        assert.expect(19);
+
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" +
+            '<field name="foo"/>' +
+            '<field name="int_field"/>' +
+            '<field name="state" widget="priority"/>' +
+            "</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) {
+                assert.step(args.method || route);
+                if (args.method === "create") {
+                    assert.deepEqual(
+                        args.args[0],
+                        {
+                            foo: "new partner",
+                            int_field: 4,
+                            state: "def",
+                        },
+                        "should send the correct values"
+                    );
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_control_panel", "should have one control panel");
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+
+        // click on 'Create' -> should open the quick create in the first column
+        await createRecord();
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
+        const quickCreate = target.querySelector(
+            ".o_kanban_group:first-child .o_kanban_quick_create"
+        );
+
+        assert.containsOnce(quickCreate, ".o_form_view.o_xxs_form_view");
+        assert.containsOnce(
+            target,
+            ".o_control_panel",
+            "should not have instantiated an extra control panel"
+        );
+        assert.containsN(quickCreate, "input", 2);
+        assert.containsN(quickCreate, ".o_field_widget", 3, "should have rendered three widgets");
+
+        // fill the quick create and validate
+        await editQuickCreateInput("foo", "new partner");
+        await editQuickCreateInput("int_field", 4);
+        await click(quickCreate, ".o_field_widget[name=state] .o_priority_star:first-child");
+        await validateRecord();
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+            "get_views", // form view in quick create
+            "onchange", // quick create
+            "create", // should perform a create to create the record
+            "read", // read the created record
+            "onchange", // new quick create
+        ]);
+    });
+
+    QUnit.test("quick_create_view without quick_create option", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] = `
+            <form>
+                <field name="display_name"/>
+            </form>`;
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban 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"],
+            createRecord() {
+                assert.step("create record");
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(target, ".o_kanban_group .o_kanban_quick_add", 2);
+
+        // click on 'Create' in control panel -> should not open the quick create
+        await createRecord();
+        assert.containsNone(target, ".o_kanban_quick_create");
+        assert.verifySteps(["create record"]);
+
+        // click "+" icon in first column -> should open the quick create
+        await click(target.querySelector(".o_kanban_quick_add"));
+        assert.containsOnce(target.querySelector(".o_kanban_group"), ".o_kanban_quick_create");
+        assert.verifySteps([]);
+    });
+
+    QUnit.test("quick create record in grouped on m2o (no quick_create_view)", async (assert) => {
+        assert.expect(14);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method, args, kwargs }) {
+                assert.step(method || route);
+                if (method === "name_create") {
+                    assert.strictEqual(args[0], "new partner");
+                    const { default_product_id, default_qux } = kwargs.context;
+                    assert.strictEqual(default_product_id, 3);
+                    assert.strictEqual(default_qux, 2.5);
+                }
+            },
+            context: { default_qux: 2.5 },
+        });
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "first column should contain two records"
+        );
+
+        // click on 'Create', fill the quick create and validate
+        await createRecord();
+        await editQuickCreateInput("display_name", "new partner");
+        await validateRecord();
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            3,
+            "first column should contain three records"
+        );
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+            "onchange", // quick create
+            "name_create", // should perform a name_create to create the record
+            "read", // read the created record
+            "onchange", // reopen the quick create automatically
+        ]);
+    });
+
+    QUnit.test("quick create record in grouped on m2o (with quick_create_view)", async (assert) => {
+        assert.expect(15);
+
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" +
+            '<field name="foo"/>' +
+            '<field name="int_field"/>' +
+            '<field name="state" widget="priority"/>' +
+            "</form>";
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create" quick_create_view="some_view_ref">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method, args, kwargs }) {
+                assert.step(method || route);
+                if (method === "create") {
+                    assert.deepEqual(
+                        args[0],
+                        {
+                            foo: "new partner",
+                            int_field: 4,
+                            state: "def",
+                        },
+                        "should send the correct values"
+                    );
+                    const { default_product_id, default_qux } = kwargs.context;
+                    assert.strictEqual(default_product_id, 3);
+                    assert.strictEqual(default_qux, 2.5);
+                }
+            },
+            context: { default_qux: 2.5 },
+        });
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+        // click on 'Create', fill the quick create and validate
+        await createRecord();
+        const quickCreate = target.querySelector(
+            ".o_kanban_group:first-child .o_kanban_quick_create"
+        );
+        await editQuickCreateInput("foo", "new partner");
+        await editQuickCreateInput("int_field", 4);
+        await click(quickCreate, ".o_field_widget[name=state] .o_priority_star:first-child");
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+            "get_views", // form view in quick create
+            "onchange", // quick create
+            "create", // should perform a create to create the record
+            "read", // read the created record
+            "onchange", // reopen the quick create automatically
+        ]);
+    });
+
+    QUnit.test("quick create record with default values and onchanges", async (assert) => {
+        serverData.models.partner.fields.int_field.default = 4;
+        serverData.models.partner.onchanges = {
+            foo(obj) {
+                if (obj.foo) {
+                    obj.int_field = 8;
+                }
+            },
+        };
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</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, { method }) {
+                assert.step(method || route);
+            },
+        });
+
+        // click on 'Create' -> should open the quick create in the first column
+        await createRecord();
+        const quickCreate = target.querySelector(
+            ".o_kanban_group:first-child .o_kanban_quick_create"
+        );
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
+        assert.strictEqual(
+            quickCreate.querySelector(".o_field_widget[name=int_field] input").value,
+            "4",
+            "default value should be set"
+        );
+
+        // fill the 'foo' field -> should trigger the onchange
+        await editQuickCreateInput("foo", "new partner");
+
+        assert.strictEqual(
+            quickCreate.querySelector(".o_field_widget[name=int_field] input").value,
+            "8",
+            "onchange should have been triggered"
+        );
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+            "get_views", // form view in quick create
+            "onchange", // quick create
+            "onchange", // onchange due to 'foo' field change
+        ]);
+    });
+
+    QUnit.test("quick create record with quick_create_view: modifiers", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" +
+            '<field name="foo" required="1"/>' +
+            '<field name="int_field" attrs=\'{"invisible": [["foo", "=", false]]}\'/>' +
+            "</form>";
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban 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"],
+        });
+
+        // create a new record
+        await quickCreateRecord();
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo]"),
+            "o_required_modifier",
+            "foo field should be required"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create .o_field_widget[name=int_field]",
+            "int_field should be invisible"
+        );
+
+        // fill 'foo' field
+        await editQuickCreateInput("foo", "new partner");
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create .o_field_widget[name=int_field]",
+            "int_field should now be visible"
+        );
+    });
+
+    QUnit.test("quick create record with onchange of field marked readonly", async (assert) => {
+        assert.expect(15);
+
+        serverData.models.partner.onchanges = {
+            foo(obj) {
+                obj.int_field = 8;
+            },
+        };
+        serverData.views["partner,some_view_ref,form"] = `<form>
+            <field name="foo"/>
+            <field name="int_field" readonly="true"/>
+        </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, { method, args }) {
+                if (method === "create") {
+                    assert.notOk(
+                        "int_field" in args[0],
+                        "readonly field shouldn't be sent in create"
+                    );
+                }
+                assert.step(method || route);
+            },
+        });
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // initial read_group
+            "web_search_read", // initial search_read (first column)
+            "web_search_read", // initial search_read (second column)
+        ]);
+
+        // click on 'Create' -> should open the quick create in the first column
+        await quickCreateRecord();
+        assert.verifySteps(["get_views", "onchange"]);
+
+        // fill the 'foo' field -> should trigger the onchange
+        await editQuickCreateInput("foo", "new partner");
+        assert.verifySteps(["onchange"]);
+        await validateRecord();
+        assert.verifySteps(["create", "read", "onchange"]);
+    });
+
+    QUnit.test("quick create record and change state in grouped mode", async (assert) => {
+        serverData.models.partner.fields.kanban_state = {
+            string: "Kanban State",
+            type: "selection",
+            selection: [
+                ["normal", "Grey"],
+                ["done", "Green"],
+                ["blocked", "Red"],
+            ],
+        };
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                            <div class="oe_kanban_bottom_right">
+                                <field name="kanban_state" widget="state_selection"/>
+                            </div>
+                        </div>
+                    </templates>
+                </kanban>
+            `,
+            groupBy: ["foo"],
+        });
+
+        // Quick create kanban record
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "Test");
+        await validateRecord();
+
+        // Select state in kanban
+        await click(getCard(0), ".o_status");
+        await click(getCard(0), ".o_field_state_selection .dropdown-item:first-child");
+
+        assert.hasClass(
+            target.querySelector(".o_status"),
+            "o_status_green",
+            "Kanban state should be done (Green)"
+        );
+    });
+
+    QUnit.test("window resize should not change quick create form size", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            groupBy: ["bar"],
+            arch: `
+                <kanban on_create="quick_create">
+                    <field name="bar"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+        });
+
+        await quickCreateRecord();
+        assert.hasClass(
+            target.querySelector(".o_kanban_quick_create .o_form_view"),
+            "o_xxs_form_view"
+        );
+
+        await triggerEvent(window, "", "resize");
+        assert.hasClass(
+            target.querySelector(".o_kanban_quick_create .o_form_view"),
+            "o_xxs_form_view"
+        );
+    });
+
+    QUnit.test(
+        "quick create record: cancel and validate without using the buttons",
+        async (assert) => {
+            serverData.views["partner,some_view_ref,form"] = `<form><field name="foo" /></form>`;
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban quick_create_view="some_view_ref" on_create="quick_create">' +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["bar"],
+            });
+
+            assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+            // click to add an element and cancel the quick creation by pressing ESC
+            await quickCreateRecord();
+
+            assert.containsOnce(target, ".o_kanban_quick_create");
+
+            await triggerEvent(target, ".o_kanban_quick_create input", "keydown", {
+                key: "Escape",
+            });
+
+            assert.containsNone(
+                target,
+                ".o_kanban_quick_create",
+                "should have destroyed the quick create element"
+            );
+
+            // click to add and element and click outside, should cancel the quick creation
+            await quickCreateRecord();
+            await click(target, ".o_kanban_group:first-child .o_kanban_record:last-child");
+            assert.containsNone(
+                target,
+                ".o_kanban_quick_create",
+                "the quick create should be destroyed when the user clicks outside"
+            );
+
+            // click to input and drag the mouse outside, should not cancel the quick creation
+            await quickCreateRecord();
+            await triggerEvent(target, ".o_kanban_quick_create input", "mousedown");
+            await click(target, ".o_kanban_group:first-child .o_kanban_record:last-child");
+            assert.containsOnce(
+                target,
+                ".o_kanban_quick_create",
+                "the quick create should not have been destroyed after clicking outside"
+            );
+
+            // click to really add an element
+            await quickCreateRecord();
+            await editQuickCreateInput("foo", "new partner");
+
+            // clicking outside should no longer destroy the quick create as it is dirty
+            await click(target, ".o_kanban_group:first-child .o_kanban_record:last-child");
+            assert.containsOnce(
+                target,
+                ".o_kanban_quick_create",
+                "the quick create should not have been destroyed"
+            );
+
+            // confirm by pressing ENTER
+            await triggerEvent(target, ".o_kanban_quick_create input", "keydown", {
+                key: "Enter",
+            });
+
+            assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 5);
+            assert.deepEqual(getCardTexts(0), ["blip", "new partner"]);
+        }
+    );
+
+    QUnit.test("quick create record: validate with ENTER", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</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"],
+        });
+
+        assert.containsN(target, ".o_kanban_record", 4, "should have 4 records at the beginning");
+
+        // add an element and confirm by pressing ENTER
+        await quickCreateRecord();
+        await editQuickCreateInput("foo", "new partner");
+        await validateRecord();
+        // triggers a navigation event, leading to the 'commitChanges' and record creation
+
+        assert.containsN(target, ".o_kanban_record", 5, "should have created a new record");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input").value,
+            "",
+            "quick create should now be empty"
+        );
+    });
+
+    QUnit.test("quick create record: prevent multiple adds with ENTER", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</form>";
+
+        const prom = makeDeferred();
+
+        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 === "create") {
+                    assert.step("create");
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_record", 4, "should have 4 records at the beginning");
+
+        // add an element and press ENTER twice
+        await quickCreateRecord();
+        await editQuickCreateInput("foo", "new partner");
+        await triggerEvent(
+            target,
+            ".o_kanban_quick_create .o_field_widget[name=foo] input",
+            "keydown",
+            {
+                key: "Enter",
+            }
+        );
+
+        assert.containsN(target, ".o_kanban_record", 4, "should not have created the record yet");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input").value,
+            "new partner",
+            "quick create should not be empty yet"
+        );
+        assert.hasClass(
+            target.querySelector(".o_kanban_quick_create"),
+            "o_disabled",
+            "quick create should be disabled"
+        );
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(target, ".o_kanban_record", 5, "should have created a new record");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input").value,
+            "",
+            "quick create should now be empty"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_kanban_quick_create"),
+            "o_disabled",
+            "quick create should be enabled"
+        );
+
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("quick create record: prevent multiple adds with Add clicked", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] =
+            "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</form>";
+
+        const prom = makeDeferred();
+        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, { method }) {
+                if (method === "create") {
+                    assert.step("create");
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_record", 4, "should have 4 records at the beginning");
+
+        // add an element and click 'Add' twice
+        await quickCreateRecord();
+        await editQuickCreateInput("foo", "new partner");
+        await validateRecord();
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_record", 4, "should not have created the record yet");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input").value,
+            "new partner",
+            "quick create should not be empty yet"
+        );
+        assert.hasClass(
+            target.querySelector(".o_kanban_quick_create"),
+            "o_disabled",
+            "quick create should be disabled"
+        );
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(target, ".o_kanban_record", 5, "should have created a new record");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input").value,
+            "",
+            "quick create should now be empty"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_kanban_quick_create"),
+            "o_disabled",
+            "quick create should be enabled"
+        );
+
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test(
+        "quick create record: prevent multiple adds with ENTER, with onchange",
+        async (assert) => {
+            assert.expect(14);
+
+            serverData.models.partner.onchanges = {
+                foo(obj) {
+                    obj.int_field += obj.foo ? 3 : 0;
+                },
+            };
+            serverData.views["partner,some_view_ref,form"] =
+                "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</form>";
+
+            let shouldDelayOnchange = false;
+            const prom = makeDeferred();
+            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, { method, args }) {
+                    switch (method) {
+                        case "onchange": {
+                            assert.step(method);
+                            if (shouldDelayOnchange) {
+                                await prom;
+                            }
+                            break;
+                        }
+                        case "create": {
+                            assert.step(method);
+                            assert.strictEqual(args[0].foo, "new partner");
+                            assert.strictEqual(args[0].int_field, 3);
+                            break;
+                        }
+                    }
+                },
+            });
+
+            assert.containsN(
+                target,
+                ".o_kanban_record",
+                4,
+                "should have 4 records at the beginning"
+            );
+
+            // add an element and press ENTER twice
+            await quickCreateRecord();
+            shouldDelayOnchange = true;
+            await editQuickCreateInput("foo", "new partner");
+            await triggerEvent(
+                target,
+                ".o_kanban_quick_create .o_field_widget[name=foo] input",
+                "keydown",
+                {
+                    key: "Enter",
+                }
+            );
+
+            assert.containsN(
+                target,
+                ".o_kanban_record",
+                4,
+                "should not have created the record yet"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input")
+                    .value,
+                "new partner",
+                "quick create should not be empty yet"
+            );
+            assert.hasClass(
+                target.querySelector(".o_kanban_quick_create"),
+                "o_disabled",
+                "quick create should be disabled"
+            );
+
+            prom.resolve();
+            await nextTick();
+
+            assert.containsN(target, ".o_kanban_record", 5, "should have created a new record");
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input")
+                    .value,
+                "",
+                "quick create should now be empty"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_kanban_quick_create"),
+                "o_disabled",
+                "quick create should be enabled"
+            );
+
+            assert.verifySteps([
+                "onchange", // default_get
+                "onchange", // new partner
+                "create",
+                "onchange", // default_get
+            ]);
+        }
+    );
+
+    QUnit.test(
+        "quick create record: click Add to create, with delayed onchange",
+        async (assert) => {
+            assert.expect(13);
+
+            serverData.models.partner.onchanges = {
+                foo(obj) {
+                    obj.int_field += obj.foo ? 3 : 0;
+                },
+            };
+            serverData.views["partner,some_view_ref,form"] =
+                "<form>" + '<field name="foo"/>' + '<field name="int_field"/>' + "</form>";
+
+            let shouldDelayOnchange = false;
+            const prom = makeDeferred();
+            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"/><field name="int_field"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["bar"],
+                async mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        assert.step("onchange");
+                        if (shouldDelayOnchange) {
+                            await prom;
+                        }
+                    }
+                    if (args.method === "create") {
+                        assert.step("create");
+                        assert.deepEqual(_.pick(args.args[0], "foo", "int_field"), {
+                            foo: "new partner",
+                            int_field: 3,
+                        });
+                    }
+                },
+            });
+
+            assert.containsN(
+                target,
+                ".o_kanban_record",
+                4,
+                "should have 4 records at the beginning"
+            );
+
+            // add an element and click 'add'
+            await quickCreateRecord();
+            shouldDelayOnchange = true;
+            await editQuickCreateInput("foo", "new partner");
+            await validateRecord();
+
+            assert.containsN(
+                target,
+                ".o_kanban_record",
+                4,
+                "should not have created the record yet"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input")
+                    .value,
+                "new partner",
+                "quick create should not be empty yet"
+            );
+            assert.hasClass(
+                target.querySelector(".o_kanban_quick_create"),
+                "o_disabled",
+                "quick create should be disabled"
+            );
+
+            prom.resolve(); // the onchange returns
+
+            await nextTick();
+            assert.containsN(target, ".o_kanban_record", 5, "should have created a new record");
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create .o_field_widget[name=foo] input")
+                    .value,
+                "",
+                "quick create should now be empty"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_kanban_quick_create"),
+                "o_disabled",
+                "quick create should be enabled"
+            );
+
+            assert.verifySteps([
+                "onchange", // default_get
+                "onchange", // new partner
+                "create",
+                "onchange", // default_get
+            ]);
+        }
+    );
+
+    QUnit.test("quick create when first column is folded", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_kanban_group:first-child"),
+            "o_column_folded",
+            "first column should not be folded"
+        );
+
+        // fold the first column
+        let clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Fold");
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_group:first-child"),
+            "o_column_folded",
+            "first column should be folded"
+        );
+
+        // click on 'Create' to open the quick create in the first column
+        await createRecord();
+
+        assert.doesNotHaveClass(
+            target.querySelector(".o_kanban_group:first-child"),
+            "o_column_folded",
+            "first column should no longer be folded"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_quick_create",
+            "should have added a quick create element in first column"
+        );
+
+        // fold again the first column
+        clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Fold");
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_group:first-child"),
+            "o_column_folded",
+            "first column should be folded"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "there should be no more quick create"
+        );
+    });
+
+    QUnit.test("quick create record: cancel when not dirty", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should contain one record"
+        );
+
+        // click to add an element
+        await quickCreateRecord();
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        // click again to add an element -> should have kept the quick create open
+        await quickCreateRecord();
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have kept the quick create open"
+        );
+
+        // click outside: should remove the quick create
+        await click(target, ".o_kanban_group:first-child .o_kanban_record:last-child");
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should not have been destroyed"
+        );
+
+        // click to reopen the quick create
+        await quickCreateRecord();
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        // press ESC: should remove the quick create
+        await triggerEvent(target, ".o_kanban_quick_create input", "keydown", { key: "Escape" });
+
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "quick create widget should have been removed"
+        );
+
+        // click to reopen the quick create
+        await quickCreateRecord();
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        // click on 'Discard': should remove the quick create
+        await quickCreateRecord();
+        await discardRecord();
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should be destroyed when the user clicks outside"
+        );
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should still contain one record"
+        );
+
+        // click to reopen the quick create
+        await quickCreateRecord();
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        // clicking on the quick create itself should keep it open
+        await click(target, ".o_kanban_quick_create");
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should not have been destroyed when clicked on itself"
+        );
+    });
+
+    QUnit.test("quick create record: cancel when modal is opened", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] = '<form><field name="product_id"/></form>';
+
+        // patch setTimeout s.t. the autocomplete dropdown opens directly
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            groupBy: ["bar"],
+            arch: `
+                <kanban on_create="quick_create" quick_create_view="some_view_ref">
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+        });
+
+        // click to add an element
+        await quickCreateRecord();
+        assert.containsOnce(target, ".o_kanban_quick_create");
+
+        await editInput(target, ".o_kanban_quick_create input", "test");
+        await triggerEvent(target, ".o_kanban_quick_create input", "input");
+        await triggerEvent(target, ".o_kanban_quick_create input", "blur");
+
+        // When focusing out of the many2one, a modal to add a 'product' will appear.
+        // The following assertions ensures that a click on the body element that has 'modal-open'
+        // will NOT close the quick create.
+        // This can happen when the user clicks out of the input because of a race condition between
+        // the focusout of the m2o and the global 'click' handler of the quick create.
+        // Check odoo/odoo#61981 for more details.
+        assert.hasClass(document.body, "modal-open", "modal should be opening after m2o focusout");
+        await click(document.body);
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "quick create should stay open while modal is opening"
+        );
+    });
+
+    QUnit.test("quick create record: cancel when dirty", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should contain one record"
+        );
+
+        // click to add an element and edit it
+        await quickCreateRecord();
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        await editQuickCreateInput("display_name", "some value");
+
+        // click outside: should not remove the quick create
+        await click(target, ".o_kanban_group:first-child .o_kanban_record");
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should not have been destroyed"
+        );
+
+        // press ESC: should remove the quick create
+        await triggerEvent(target, ".o_kanban_quick_create input", "keydown", { key: "Escape" });
+
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "quick create widget should have been removed"
+        );
+
+        // click to reopen quick create and edit it
+        await quickCreateRecord();
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "should have open the quick create widget"
+        );
+
+        await editQuickCreateInput("display_name", "some value");
+
+        // click on 'Discard': should remove the quick create
+        await discardRecord();
+
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should be destroyed when the user discard quick creation"
+        );
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should still contain one record"
+        );
+    });
+
+    QUnit.test("quick create record and edit in grouped mode", async (assert) => {
+        assert.expect(5);
+
+        let newRecordID;
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            async mockRPC(route, { args, method }) {
+                if (method === "read") {
+                    newRecordID = args[0][0];
+                }
+            },
+            groupBy: ["bar"],
+            selectRecord: (resId) => {
+                assert.strictEqual(resId, newRecordID);
+            },
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should contain one record"
+        );
+
+        // click to add and edit a record
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "new partner");
+        await editRecord();
+
+        assert.strictEqual(
+            serverData.models.partner.records.length,
+            5,
+            "should have created a partner"
+        );
+        assert.strictEqual(
+            _.last(serverData.models.partner.records).name,
+            "new partner",
+            "should have correct name"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "first column should now contain two records"
+        );
+    });
+
+    QUnit.test("quick create several records in a row", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should contain one record"
+        );
+
+        // click to add an element, fill the input and press ENTER
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create", "the quick create should be open");
+
+        await editQuickCreateInput("display_name", "new partner 1");
+        await validateRecord();
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "first column should now contain two records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should still be open"
+        );
+
+        // create a second element in a row
+        await createRecord();
+        await editQuickCreateInput("display_name", "new partner 2");
+        await validateRecord();
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            3,
+            "first column should now contain three records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create",
+            "the quick create should still be open"
+        );
+    });
+
+    QUnit.test("quick create is disabled until record is created and read", async (assert) => {
+        const prom = makeDeferred();
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+            async mockRPC(route, { method }) {
+                if (method === "read") {
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should contain one record"
+        );
+
+        // click to add a record, and add two in a row (first one will be delayed)
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create", "the quick create should be open");
+
+        await editQuickCreateInput("display_name", "new partner 1");
+        await validateRecord();
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should still contain one record"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_quick_create.o_disabled",
+            "quick create should be disabled"
+        );
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "first column should now contain two records"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create.o_disabled",
+            "quick create should be enabled"
+        );
+    });
+
+    QUnit.test("quick create record fail in grouped by many2one", async (assert) => {
+        serverData.views["partner,false,form"] = `
+            <form>
+                <field name="product_id"/>
+                <field name="foo"/>
+            </form>`;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                    <field name="product_id"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                if (args.method === "name_create") {
+                    throw makeErrorFromResponse({
+                        code: 200,
+                        message: "Odoo Server Error",
+                        data: {
+                            name: "odoo.exceptions.UserError",
+                            debug: "traceback",
+                            arguments: ["This is a user error"],
+                            context: {},
+                        },
+                    });
+                }
+            },
+        });
+
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 2);
+
+        await createRecord();
+        assert.containsOnce(target.querySelector(".o_kanban_group"), ".o_kanban_quick_create");
+
+        await editQuickCreateInput("display_name", "test");
+        await validateRecord();
+        assert.containsOnce(target, ".modal .o_form_view.o_form_editable");
+        assert.strictEqual(target.querySelector(".modal .o_field_many2one input").value, "hello");
+
+        // specify a name and save
+        await editInput(target, ".modal .o_field_widget[name=foo]", "test");
+        await click(target, ".modal .modal-footer .btn-primary");
+        assert.containsNone(target, ".modal");
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 3);
+        // FIXME: the new record should normally be the first one, but this behavior is temporarily
+        // broken, until we activate the new owl form view
+        const lastRecord = target.querySelectorAll(".o_kanban_group .o_kanban_record")[2];
+        assert.strictEqual(lastRecord.innerText, "test");
+        // const firstRecord = target.querySelector(".o_kanban_group .o_kanban_record");
+        // assert.strictEqual(firstRecord.innerText, "test");
+        assert.containsOnce(target, ".o_kanban_quick_create:not(.o_disabled)");
+    });
+
+    QUnit.test("quick create record is re-enabled after discard on failure", async (assert) => {
+        serverData.views["partner,false,form"] = `
+            <form>
+                <field name="product_id"/>
+                <field name="foo"/>
+            </form>`;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create">
+                    <field name="product_id"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                if (args.method === "name_create") {
+                    throw makeErrorFromResponse({
+                        code: 200,
+                        message: "Odoo Server Error",
+                        data: {
+                            name: "odoo.exceptions.UserError",
+                            debug: "traceback",
+                            arguments: ["This is a user error"],
+                            context: {},
+                        },
+                    });
+                }
+            },
+        });
+
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 2);
+
+        await createRecord();
+        assert.containsOnce(target.querySelector(".o_kanban_group"), ".o_kanban_quick_create");
+
+        await editQuickCreateInput("display_name", "test");
+        await validateRecord();
+        assert.containsOnce(target, ".modal .o_form_view.o_form_editable");
+
+        await click(target.querySelector(".modal .modal-footer .btn-secondary"));
+        assert.containsNone(target, ".modal .o_form_view .o_form_editable");
+        assert.containsOnce(target.querySelector(".o_kanban_group"), ".o_kanban_quick_create");
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 2);
+    });
+
+    QUnit.test("quick create record fails in grouped by char", async (assert) => {
+        assert.expect(7);
+
+        serverData.views["partner,false,form"] = '<form><field name="foo"/></form>';
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            groupBy: ["foo"],
+            arch: `
+                <kanban on_create="quick_create">
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+            async mockRPC(route, args) {
+                if (args.method === "name_create") {
+                    throw makeErrorFromResponse({
+                        code: 200,
+                        message: "Odoo Server Error",
+                        data: {
+                            name: "odoo.exceptions.UserError",
+                            debug: "traceback",
+                            arguments: ["This is a user error"],
+                            context: {},
+                        },
+                    });
+                }
+                if (args.method === "create") {
+                    assert.deepEqual(args.args[0], { foo: "blip" });
+                    assert.deepEqual(args.kwargs.context, {
+                        default_foo: "blip",
+                        default_name: "test",
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                }
+            },
+        });
+
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 2);
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "test");
+        await validateRecord();
+
+        assert.containsOnce(target, ".modal .o_form_view.o_form_editable");
+        assert.strictEqual(target.querySelector(".modal .o_field_widget[name=foo]").value, "blip");
+        await click(target, ".modal .modal-footer .btn-primary");
+
+        assert.containsNone(target, ".modal .o_form_view .o_form_editable");
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 3);
+    });
+
+    QUnit.test("quick create record fails in grouped by selection", async (assert) => {
+        assert.expect(7);
+
+        serverData.views["partner,false,form"] = '<form><field name="state"/></form>';
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            groupBy: ["state"],
+            arch: `
+                <kanban on_create="quick_create">
+                    <templates><t t-name="kanban-box">
+                        <div><field name="state"/></div>
+                    </t></templates>
+                </kanban>`,
+            async mockRPC(route, args) {
+                if (args.method === "name_create") {
+                    throw makeErrorFromResponse({
+                        code: 200,
+                        message: "Odoo Server Error",
+                        data: {
+                            name: "odoo.exceptions.UserError",
+                            debug: "traceback",
+                            arguments: ["This is a user error"],
+                            context: {},
+                        },
+                    });
+                }
+                if (args.method === "create") {
+                    assert.deepEqual(args.args[0], { state: "abc" });
+                    assert.deepEqual(args.kwargs.context, {
+                        default_state: "abc",
+                        default_name: "test",
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                }
+            },
+        });
+
+        assert.containsOnce(target.querySelector(".o_kanban_group"), ".o_kanban_record");
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "test");
+        await validateRecord();
+
+        assert.containsOnce(target, ".modal .o_form_view.o_form_editable");
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=state]").value,
+            '"abc"'
+        );
+
+        await click(target, ".modal .modal-footer .btn-primary");
+
+        assert.containsNone(target, ".modal .o_form_view .o_form_editable");
+        assert.containsN(target.querySelector(".o_kanban_group"), ".o_kanban_record", 2);
+    });
+
+    QUnit.test("quick create record in empty grouped kanban", 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><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method }) {
+                if (method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    return {
+                        groups: [
+                            { __domain: [["product_id", "=", 3]], product_id_count: 0 },
+                            { __domain: [["product_id", "=", 5]], product_id_count: 0 },
+                        ],
+                        length: 2,
+                    };
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2, "there should be 2 columns");
+        assert.containsNone(target, ".o_kanban_record", "both columns should be empty");
+
+        await createRecord();
+
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_quick_create",
+            "should have opened the quick create in the first column"
+        );
+    });
+
+    QUnit.test("quick create record in grouped on date(time) field", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["date"],
+            createRecord: () => {
+                assert.step("createRecord");
+            },
+        });
+
+        assert.containsNone(
+            target,
+            ".o_kanban_header .o_kanban_quick_add i",
+            "quick create should be disabled when grouped on a date field"
+        );
+
+        // clicking on CREATE in control panel should not open a quick create
+        await createRecord();
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "should not have opened the quick create widget"
+        );
+
+        await reload(kanban, { groupBy: ["datetime"] });
+
+        assert.containsNone(
+            target,
+            ".o_kanban_header .o_kanban_quick_add i",
+            "quick create should be disabled when grouped on a datetime field"
+        );
+
+        // clicking on CREATE in control panel should not open a quick create
+        await createRecord();
+        assert.containsNone(
+            target,
+            ".o_kanban_quick_create",
+            "should not have opened the quick create widget"
+        );
+
+        assert.verifySteps(["createRecord", "createRecord"]);
+    });
+
+    QUnit.test(
+        "quick create record if grouped on date(time) field with attribute allow_group_range_value: true",
+        async (assert) => {
+            serverData.models.partner.records[0].date = "2017-01-08";
+            serverData.models.partner.records[1].date = "2017-01-09";
+            serverData.models.partner.records[2].date = "2017-01-08";
+            serverData.models.partner.records[3].date = "2017-01-10";
+            serverData.models.partner.records[0].datetime = "2017-01-08 10:55:05";
+            serverData.models.partner.records[1].datetime = "2017-01-09 11:31:10";
+            serverData.models.partner.records[2].datetime = "2017-01-08 09:20:25";
+            serverData.models.partner.records[3].datetime = "2017-01-10 08:05:51";
+            serverData.views["partner,quick_form,form"] =
+                "<form>" + '<field name="date"/>' + '<field name="datetime"/>' + "</form>";
+
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create" quick_create_view="quick_form">' +
+                    '<field name="date" allow_group_range_value="true"/>' +
+                    '<field name="datetime" allow_group_range_value="true"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="display_name"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["date"],
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                "quick create should be enabled when grouped on a non-readonly date field"
+            );
+
+            // clicking on CREATE in control panel should open a quick create
+            await createRecord();
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:first-child .o_kanban_quick_create",
+                "should have opened the quick create in the first column"
+            );
+            assert.strictEqual(
+                target.querySelector(
+                    ".o_kanban_group:first-child .o_kanban_quick_create .o_field_widget[name=date] .o_datepicker input"
+                ).value,
+                "01/31/2017"
+            );
+
+            await reload(kanban, { groupBy: ["datetime"] });
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                "quick create should be enabled when grouped on a non-readonly datetime field"
+            );
+
+            // clicking on CREATE in control panel should open a quick create
+            await createRecord();
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:first-child .o_kanban_quick_create",
+                "should have opened the quick create in the first column"
+            );
+            assert.strictEqual(
+                target.querySelector(
+                    ".o_kanban_group:first-child .o_kanban_quick_create .o_field_widget[name=datetime] .o_datepicker input"
+                ).value,
+                "01/31/2017 23:59:59"
+            );
+        }
+    );
+
+    QUnit.test(
+        "quick create record feature is properly enabled/disabled at reload",
+        async (assert) => {
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="display_name"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["foo"],
+            });
+
+            assert.containsN(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                3,
+                "quick create should be enabled when grouped on a char field"
+            );
+
+            await reload(kanban, { groupBy: ["date"] });
+
+            assert.containsNone(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                "quick create should now be disabled (grouped on date field)"
+            );
+
+            await reload(kanban, { groupBy: ["bar"] });
+
+            assert.containsN(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                2,
+                "quick create should be enabled again (grouped on boolean field)"
+            );
+        }
+    );
+
+    QUnit.test("quick create record in grouped by char field", async (assert) => {
+        assert.expect(4);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["foo"],
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "name_create") {
+                    assert.strictEqual(kwargs.context.default_foo, "blip");
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_header .o_kanban_quick_add i", 3);
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "new record");
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
+    });
+
+    QUnit.test("quick create record in grouped by boolean field", async (assert) => {
+        assert.expect(4);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "name_create") {
+                    assert.strictEqual(kwargs.context.default_bar, true);
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_header .o_kanban_quick_add i", 2);
+        assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+
+        await quickCreateRecord(1);
+        await editQuickCreateInput("display_name", "new record");
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 4);
+    });
+
+    QUnit.test("quick create record in grouped on selection field", async (assert) => {
+        assert.expect(4);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            async mockRPC(route, { method, kwargs }) {
+                if (method === "name_create") {
+                    assert.strictEqual(kwargs.context.default_state, "abc");
+                }
+            },
+            groupBy: ["state"],
+        });
+
+        assert.containsN(
+            target,
+            ".o_kanban_header .o_kanban_quick_add i",
+            3,
+            "quick create should be enabled when grouped on a selection field"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column (abc) should contain 1 record"
+        );
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "new record");
+        await validateRecord();
+
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "first column (abc) should contain 2 records"
+        );
+    });
+
+    QUnit.test(
+        "quick create record in grouped by char field (within quick_create_view)",
+        async (assert) => {
+            assert.expect(6);
+
+            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">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["foo"],
+                async mockRPC(route, { method, args, kwargs }) {
+                    if (method === "create") {
+                        assert.deepEqual(args[0], { foo: "blip" });
+                        assert.strictEqual(kwargs.context.default_foo, "blip");
+                    }
+                },
+            });
+
+            assert.containsN(target, ".o_kanban_header .o_kanban_quick_add i", 3);
+            assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+            await quickCreateRecord();
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create input").value,
+                "blip",
+                "should have set the correct foo value by default"
+            );
+            await validateRecord();
+
+            assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
+        }
+    );
+
+    QUnit.test(
+        "quick create record in grouped by boolean field (within quick_create_view)",
+        async (assert) => {
+            assert.expect(6);
+
+            serverData.views["partner,some_view_ref,form"] =
+                "<form>" + '<field name="bar"/>' + "</form>";
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create" quick_create_view="some_view_ref">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="bar"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["bar"],
+                async mockRPC(route, { method, args, kwargs }) {
+                    if (method === "create") {
+                        assert.deepEqual(args[0], { bar: true });
+                        assert.strictEqual(kwargs.context.default_bar, true);
+                    }
+                },
+            });
+
+            assert.containsN(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                2,
+                "quick create should be enabled when grouped on a boolean field"
+            );
+            assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+
+            await quickCreateRecord(1);
+
+            assert.ok(
+                target.querySelector(".o_kanban_quick_create .o_field_boolean input").checked
+            );
+
+            await validateRecord();
+
+            assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 4);
+        }
+    );
+
+    QUnit.test(
+        "quick create record in grouped by selection field (within quick_create_view)",
+        async (assert) => {
+            assert.expect(6);
+
+            serverData.views["partner,some_view_ref,form"] = `<form><field name="state"/></form>`;
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create" quick_create_view="some_view_ref">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="state"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["state"],
+                async mockRPC(route, { method, args, kwargs }) {
+                    if (method === "create") {
+                        assert.deepEqual(args[0], { state: "abc" });
+                        assert.strictEqual(kwargs.context.default_state, "abc");
+                    }
+                },
+            });
+
+            assert.containsN(
+                target,
+                ".o_kanban_header .o_kanban_quick_add i",
+                3,
+                "quick create should be enabled when grouped on a selection field"
+            );
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                "first column (abc) should contain 1 record"
+            );
+
+            await quickCreateRecord();
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create select").value,
+                '"abc"',
+                "should have set the correct state value by default"
+            );
+            await validateRecord();
+
+            assert.containsN(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                2,
+                "first column (abc) should now contain 2 records"
+            );
+        }
+    );
+
+    QUnit.test("quick create record while adding a new column", async (assert) => {
+        const prom = makeDeferred();
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method, model }) {
+                if (method === "name_create" && model === "product") {
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+
+        // add a new column
+        assert.containsOnce(target, ".o_column_quick_create");
+        assert.isNotVisible(target.querySelector(".o_column_quick_create input"));
+
+        await createColumn();
+
+        assert.isVisible(target.querySelector(".o_column_quick_create input"));
+
+        await editColumnName("new column");
+        await validateColumn();
+
+        assert.strictEqual(target.querySelector(".o_column_quick_create input").value, "");
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        // click to add a new record
+        await createRecord();
+
+        // should wait for the column to be created (and view to be re-rendered
+        // before opening the quick create
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        // unlock column creation
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.containsOnce(target, ".o_kanban_quick_create");
+
+        // quick create record in first column
+        await editQuickCreateInput("display_name", "new record");
+        await validateRecord();
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
+    });
+
+    QUnit.test("close a column while quick creating a record", async (assert) => {
+        serverData.views["partner,some_view_ref,form"] = '<form><field name="int_field"/></form>';
+
+        const prom = makeDeferred();
+        let blockGetViews = false;
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban on_create="quick_create" quick_create_view="some_view_ref">
+                    <templates><t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t></templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, { method }) {
+                if (method === "get_views" && blockGetViews) {
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsNone(target, ".o_column_folded");
+
+        // click to quick create a new record in the first column (this operation is delayed)
+        blockGetViews = true;
+        await quickCreateRecord();
+
+        assert.containsNone(target, ".o_form_view");
+
+        // click to fold the first column
+        const clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Fold");
+
+        assert.containsOnce(target, ".o_column_folded");
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsNone(target, ".o_form_view");
+        assert.containsOnce(target, ".o_column_folded");
+    });
+
+    QUnit.test(
+        "quick create record: open on a column while another column has already one",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["product_id"],
+            });
+
+            // Click on quick create in first column
+            await quickCreateRecord();
+            assert.containsOnce(target, ".o_kanban_quick_create");
+            assert.containsOnce(
+                target.querySelector(".o_kanban_group:first-child"),
+                ".o_kanban_quick_create"
+            );
+
+            // Click on quick create in second column
+            await quickCreateRecord(1);
+            assert.containsOnce(target, ".o_kanban_quick_create");
+            assert.containsOnce(
+                target.querySelector(".o_kanban_group:nth-child(2)"),
+                ".o_kanban_quick_create"
+            );
+
+            // Click on quick create in first column once again
+            await quickCreateRecord();
+            assert.containsOnce(target, ".o_kanban_quick_create");
+            assert.containsOnce(
+                target.querySelector(".o_kanban_group:first-child"),
+                ".o_kanban_quick_create"
+            );
+        }
+    );
+
+    QUnit.test("many2many_tags in kanban views", async (assert) => {
+        serverData.models.partner.records[0].category_ids = [6, 7];
+        serverData.models.partner.records[1].category_ids = [7, 8];
+        serverData.models.category.records.push({
+            id: 8,
+            name: "hello",
+            color: 0,
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div class="oe_kanban_global_click">' +
+                '<field name="category_ids" widget="many2many_tags" options="{\'color_field\': \'color\'}"/>' +
+                '<field name="foo"/>' +
+                '<field name="state" widget="priority"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            async mockRPC(route) {
+                assert.step(route);
+            },
+            selectRecord: (resId) => {
+                assert.deepEqual(
+                    resId,
+                    1,
+                    "should trigger an event to open the clicked record in a form view"
+                );
+            },
+        });
+
+        assert.containsN(
+            getCard(0),
+            ".o_field_many2many_tags .o_tag",
+            2,
+            "first record should contain 2 tags"
+        );
+        assert.containsOnce(getCard(0), ".o_tag.o_tag_color_2", "first tag should have color 2");
+        assert.verifySteps(
+            [
+                "/web/dataset/call_kw/partner/get_views",
+                "/web/dataset/call_kw/partner/web_search_read",
+                "/web/dataset/call_kw/category/read",
+            ],
+            "two RPC should have been done (one search read and one read for the m2m)"
+        );
+
+        // Checks that second records has only one tag as one should be hidden (color 0)
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:nth-child(2) .o_tag",
+            "there should be only one tag in second record"
+        );
+
+        // Write on the record using the priority widget to trigger a re-render in readonly
+        await click(target, ".o_kanban_record:first-child .o_priority_star:first-child");
+
+        assert.verifySteps(
+            [
+                "/web/dataset/call_kw/partner/write",
+                "/web/dataset/call_kw/partner/read",
+                "/web/dataset/call_kw/category/read",
+            ],
+            "five RPCs should have been done (previous 2, 1 write (triggers a re-render), same 2 at re-render"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_record:first-child .o_field_many2many_tags .o_tag",
+            2,
+            "first record should still contain only 2 tags"
+        );
+
+        // click on a tag (should trigger switch_view)
+        await click(target, ".o_kanban_record:first-child .o_tag:first-child");
+    });
+
+    QUnit.test("Do not open record when clicking on `a` with `href`", async (assert) => {
+        serverData.models.partner.records = [{ id: 1, foo: "yop" }];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                '<div class="oe_kanban_global_click">' +
+                '<field name="foo"/>' +
+                "<div>" +
+                '<a class="o_test_link" href="#">test link</a>' +
+                "</div>" +
+                "</div>" +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+        });
+
+        patchWithCleanup(kanban.env.services.action, {
+            async switchView() {
+                // when clicking on a record in kanban view,
+                // it switches to form view.
+                throw new Error("should not switch view");
+            },
+        });
+
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.containsOnce(target, ".o_kanban_record a");
+
+        const testLink = target.querySelector(".o_kanban_record a");
+        assert.ok(testLink.href.length, "link inside kanban record should have non-empty href");
+
+        // Prevent the browser default behaviour when clicking on anything.
+        // This includes clicking on a `<a>` with `href`, so that it does not
+        // change the URL in the address bar.
+        // Note that we should not specify a click listener on 'a', otherwise
+        // it may influence the kanban record global click handler to not open
+        // the record.
+        testLink.addEventListener("click", (ev) => {
+            assert.notOk(
+                ev.defaultPrevented,
+                "should not prevented browser default behaviour beforehand"
+            );
+            assert.strictEqual(
+                ev.target,
+                testLink,
+                "should have clicked on the test link in the kanban record"
+            );
+            ev.preventDefault();
+        });
+
+        await click(testLink);
+    });
+
+    QUnit.test("Open record when clicking on widget field", async function (assert) {
+        assert.expect(2);
+
+        serverData.views[
+            "product,false,form"
+        ] = `<form string="Product"><field name="display_name"/></form>`;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="salary" widget="monetary"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            selectRecord: (resId) => {
+                assert.strictEqual(resId, 1, "should trigger an event to open the form view");
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+        await click(target, ".oe_kanban_global_click:first-child .o_field_monetary[name=salary]");
+    });
+
+    QUnit.test("o2m loaded in only one batch", async (assert) => {
+        serverData.models.subtask = {
+            fields: {
+                name: { string: "Name", type: "char" },
+            },
+            records: [
+                { id: 1, name: "subtask #1" },
+                { id: 2, name: "subtask #2" },
+            ],
+        };
+        serverData.models.partner.fields.subtask_ids = {
+            string: "Subtasks",
+            type: "one2many",
+            relation: "subtask",
+        };
+        serverData.models.partner.records[0].subtask_ids = [1];
+        serverData.models.partner.records[1].subtask_ids = [2];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="subtask_ids" widget="many2many_tags"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        await reload(kanban, { groupBy: ["product_id"] });
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "read",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "read",
+        ]);
+    });
+
+    QUnit.test("m2m loaded in only one batch", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="category_ids" widget="many2many_tags"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        await reload(kanban, { groupBy: ["product_id"] });
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "read",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "read",
+        ]);
+    });
+
+    QUnit.test("fetch reference in only one batch", async (assert) => {
+        serverData.models.partner.records[0].ref_product = "product,3";
+        serverData.models.partner.records[1].ref_product = "product,5";
+        serverData.models.partner.fields.ref_product = {
+            string: "Reference Field",
+            type: "reference",
+        };
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            groupBy: ["product_id"],
+            arch: `
+                <kanban>
+                    <field name="product_id"/>
+                    <templates><t t-name="kanban-box">
+                        <div class="oe_kanban_global_click">
+                            <field name="ref_product"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        await reload(kanban, { groupBy: ["product_id"] });
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "name_get",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "name_get",
+        ]);
+    });
+
+    QUnit.test("wait x2manys batch fetches to re-render", async (assert) => {
+        let prom = Promise.resolve();
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="category_ids" widget="many2many_tags"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method }) {
+                if (method === "read") {
+                    await prom;
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_tag", 2);
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        prom = makeDeferred();
+        reload(kanban, { groupBy: ["state"] });
+
+        await nextTick();
+
+        assert.containsN(target, ".o_tag", 2);
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.containsN(target, ".o_tag", 2, "Should display 2 tags after update");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:nth-child(2) .o_tag").innerText,
+            "gold",
+            "First category should be 'gold'"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:nth-child(3) .o_tag").innerText,
+            "silver",
+            "Second category should be 'silver'"
+        );
+    });
+
+    QUnit.test("can drag and drop a record from one column to the next", 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"/>' +
+                '<t t-if="widget.editable"><span class="thisiseditable">edit</span></t>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route) {
+                if (route === "/web/dataset/resequence") {
+                    assert.step("resequence");
+                }
+            },
+        });
+        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);
+        assert.containsN(target, ".thisiseditable", 4);
+
+        assert.verifySteps([]);
+
+        // first record of first column moved to the bottom of second column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
+        assert.containsN(target, ".thisiseditable", 4);
+
+        assert.verifySteps(["resequence"]);
+    });
+
+    QUnit.test("drag and drop a record, grouped by selection", async (assert) => {
+        assert.expect(7);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                '<div><field name="state"/></div>' +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+            groupBy: ["state"],
+            async mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    assert.step("resequence");
+                    return true;
+                }
+                if (args.model === "partner" && args.method === "write") {
+                    assert.deepEqual(args.args[1], { state: "abc" });
+                }
+            },
+        });
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+
+        // first record of second column moved to the bottom of first column
+        await dragAndDrop(
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            ".o_kanban_group:first-child"
+        );
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.verifySteps(["resequence"]);
+    });
+
+    QUnit.test("prevent drag and drop of record if grouped by readonly", async (assert) => {
+        serverData.models.partner.fields.foo.readonly = true;
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                "<templates>" +
+                '<t t-name="kanban-box"><div>' +
+                '<field name="foo"/>' +
+                '<field name="state" readonly="1"/>' +
+                "</div></t>" +
+                "</templates>" +
+                "</kanban>",
+            groupBy: ["state"],
+            async mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    return true;
+                }
+                if (args.model === "partner" && args.method === "write") {
+                    throw new Error("should not be draggable");
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
+
+        // first record of first column moved to the bottom of second column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        // should not be draggable
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.containsN(target, ".o_kanban_group:nth-child(3) .o_kanban_record", 2);
+
+        await reload(kanban, { groupBy: ["foo"] });
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(3) .o_kanban_record");
+
+        // first record of first column moved to the bottom of second column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        // should not be draggable
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(3) .o_kanban_record");
+
+        assert.deepEqual(getCardTexts(0), ["blipDEF", "blipGHI"]);
+
+        // second record of first column moved at first place
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record:last-child",
+            ".o_kanban_group:first-child .o_kanban_record"
+        );
+
+        // should still be able to resequence
+        assert.deepEqual(getCardTexts(0), ["blipGHI", "blipDEF"]);
+    });
+
+    QUnit.test("prevent drag and drop if grouped by date/datetime field", async (assert) => {
+        serverData.models.partner.records[0].date = "2017-01-08";
+        serverData.models.partner.records[1].date = "2017-01-09";
+        serverData.models.partner.records[2].date = "2017-02-08";
+        serverData.models.partner.records[3].date = "2017-02-10";
+        serverData.models.partner.records[0].datetime = "2017-01-08 10:55:05";
+        serverData.models.partner.records[1].datetime = "2017-01-09 11:31:10";
+        serverData.models.partner.records[2].datetime = "2017-02-08 09:20:25";
+        serverData.models.partner.records[3].datetime = "2017-02-10 08:05:51";
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="date"/>' +
+                '<field name="datetime"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["date:month"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(
+            target,
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            2,
+            "1st column should contain 2 records of January month"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            2,
+            "2nd column should contain 2 records of February month"
+        );
+
+        // drag&drop a record in another column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        // should not drag&drop record
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "Should remain same records in first column (2 records)"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            2,
+            "Should remain same records in 2nd column (2 record)"
+        );
+
+        await reload(kanban, { groupBy: ["datetime:month"] });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "1st column should contain 2 records of January month"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            2,
+            "2nd column should contain 2 records of February month"
+        );
+
+        // drag&drop a record in another column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        // should not drag&drop record
+        assert.containsN(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            2,
+            "Should remain same records in first column(2 records)"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            2,
+            "Should remain same records in 2nd column(2 record)"
+        );
+    });
+
+    QUnit.test("prevent drag and drop if grouped by many2many field", async (assert) => {
+        serverData.models.partner.records[0].category_ids = [6, 7];
+        serverData.models.partner.records[3].category_ids = [7];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["category_ids"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:first-child .o_column_title").innerText,
+            "gold",
+            "first column should have correct title"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:last-child .o_column_title").innerText,
+            "silver",
+            "second column should have correct title"
+        );
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+
+        // drag&drop a record in another column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+
+        // Sanity check: groupby a non m2m field and check dragdrop is working
+        await reload(kanban, { groupBy: ["state"] });
+
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_kanban_group .o_column_title")].map(
+                (el) => el.innerText
+            ),
+            ["ABC", "DEF", "GHI"],
+            "columns should have correct title"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should have 1 record"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:last-child .o_kanban_record",
+            2,
+            "last column should have 2 records"
+        );
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:last-child"
+        );
+
+        assert.containsNone(
+            target,
+            ".o_kanban_group:first-child .o_kanban_record",
+            "first column should not contain records"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_group:last-child .o_kanban_record",
+            3,
+            "last column should contain 3 records"
+        );
+    });
+
+    QUnit.test(
+        "drag and drop record if grouped by date/time field with attribute allow_group_range_value: true",
+        async (assert) => {
+            assert.expect(16);
+
+            serverData.models.partner.records[0].date = "2017-01-08";
+            serverData.models.partner.records[1].date = "2017-01-09";
+            serverData.models.partner.records[2].date = "2017-02-08";
+            serverData.models.partner.records[3].date = "2017-02-10";
+            serverData.models.partner.records[0].datetime = "2017-01-08 10:55:05";
+            serverData.models.partner.records[1].datetime = "2017-01-09 11:31:10";
+            serverData.models.partner.records[2].datetime = "2017-02-08 09:20:25";
+            serverData.models.partner.records[3].datetime = "2017-02-10 08:05:51";
+
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="date" allow_group_range_value="true"/>' +
+                    '<field name="datetime" allow_group_range_value="true"/>' +
+                    "<templates>" +
+                    '<t t-name="kanban-box">' +
+                    '<div><field name="display_name"/></div>' +
+                    "</t>" +
+                    "</templates>" +
+                    "</kanban>",
+                groupBy: ["date:month"],
+                async mockRPC(route, { model, method, args }) {
+                    if (route === "/web/dataset/resequence") {
+                        assert.step("resequence");
+                        return true;
+                    }
+                    if (model === "partner" && method === "write") {
+                        if ("date" in args[1]) {
+                            assert.deepEqual(args[1], { date: "2017-02-28" });
+                        } else if ("datetime" in args[1]) {
+                            assert.deepEqual(args[1], { datetime: "2017-02-28 23:59:59" });
+                        }
+                    }
+                },
+            });
+
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsN(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                2,
+                "1st column should contain 2 records of January month"
+            );
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                2,
+                "2nd column should contain 2 records of February month"
+            );
+
+            await dragAndDrop(
+                ".o_kanban_group:first-child .o_kanban_record",
+                ".o_kanban_group:nth-child(2)"
+            );
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                "Should only have one record remaining"
+            );
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                3,
+                "Should now have 3 records"
+            );
+            assert.verifySteps(["resequence"]);
+
+            await reload(kanban, { groupBy: ["datetime:month"] });
+
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsN(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                2,
+                "1st column should contain 2 records of January month"
+            );
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                2,
+                "2nd column should contain 2 records of February month"
+            );
+
+            await dragAndDrop(
+                ".o_kanban_group:first-child .o_kanban_record",
+                ".o_kanban_group:nth-child(2)"
+            );
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_group:first-child .o_kanban_record",
+                "Should only have one record remaining"
+            );
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                3,
+                "Should now have 3 records"
+            );
+            assert.verifySteps(["resequence"]);
+        }
+    );
+
+    QUnit.test(
+        "completely prevent drag and drop if records_draggable set to false",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban records_draggable="false">' +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["product_id"],
+            });
+
+            // testing initial state
+            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);
+            assert.deepEqual(getCardTexts(), ["yop", "gnap", "blip", "blip"]);
+            assert.containsNone(target, ".o_record_draggable");
+
+            // attempt to drag&drop a record in another column
+            await dragAndDrop(
+                ".o_kanban_group:first-child .o_kanban_record",
+                ".o_kanban_group:nth-child(2)"
+            );
+
+            // should not drag&drop record
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                2,
+                "First column should still contain 2 records"
+            );
+            assert.containsN(
+                target,
+                ".o_kanban_group:nth-child(2) .o_kanban_record",
+                2,
+                "Second column should still contain 2 records"
+            );
+            assert.deepEqual(
+                getCardTexts(),
+                ["yop", "gnap", "blip", "blip"],
+                "Records should not have moved"
+            );
+
+            // attempt to drag&drop a record in the same column
+            await dragAndDrop(
+                ".o_kanban_group:first-child .o_kanban_record",
+                ".o_kanban_group:first-child .o_kanban_record:last-child"
+            );
+
+            assert.deepEqual(
+                getCardTexts(),
+                ["yop", "gnap", "blip", "blip"],
+                "Records should not have moved"
+            );
+        }
+    );
+
+    QUnit.test("prevent drag and drop of record if onchange fails", async (assert) => {
+        serverData.models.partner.onchanges = {
+            product_id() {},
+        };
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                "<templates>" +
+                '<t t-name="kanban-box"><div>' +
+                '<field name="foo"/>' +
+                '<field name="product_id"/>' +
+                "</div></t>" +
+                "</templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { model, method }) {
+                if (model === "partner" && method === "onchange") {
+                    throw {};
+                }
+            },
+        });
+
+        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);
+
+        // drag&drop a record in another column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        // should not be dropped, card should reset back to first column
+        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);
+    });
+
+    QUnit.test("kanban view with default_group_by", async (assert) => {
+        assert.expect(7);
+
+        serverData.models.partner.records[0].product_id = 1;
+        serverData.models.product.records.push({ id: 1, display_name: "third product" });
+
+        let readGroupCount = 0;
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban default_group_by="bar">' +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            async mockRPC(route, { kwargs }) {
+                if (route === "/web/dataset/call_kw/partner/web_read_group") {
+                    readGroupCount++;
+                    switch (readGroupCount) {
+                        case 1:
+                            return assert.deepEqual(kwargs.groupby, ["bar"]);
+                        case 2:
+                            return assert.deepEqual(kwargs.groupby, ["product_id"]);
+                        case 3:
+                            return assert.deepEqual(kwargs.groupby, ["bar"]);
+                    }
+                }
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        // simulate an update coming from the searchview, with another groupby given
+        await reload(kanban, { groupBy: ["product_id"] });
+        assert.containsN(target, ".o_kanban_group", 3);
+
+        // simulate an update coming from the searchview, removing the previously set groupby
+        await reload(kanban, { groupBy: [] });
+        assert.containsN(target, ".o_kanban_group", 2);
+    });
+
+    QUnit.test("kanban view not groupable", async (assert) => {
+        patchWithCleanup(kanbanView, { searchMenuTypes: ["filter", "favorite"] });
+
+        serverData.views["partner,false,search"] = `
+            <search>
+                <filter string="candle" name="itsName" context="{'group_by': 'foo'}"/>
+            </search>
+        `;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban default_group_by="bar">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+            async mockRPC(route, { method }) {
+                if (method === "web_read_group") {
+                    throw new Error("Should not do a read_group RPC");
+                }
+            },
+            context: { search_default_itsName: 1 },
+        });
+
+        assert.doesNotHaveClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.containsNone(target, ".o_control_panel div.o_search_options div.o_group_by_menu");
+        assert.deepEqual(getFacetTexts(target), []);
+    });
+
+    QUnit.test("kanban view with create=False", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban create="0">' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+        });
+
+        assert.containsNone(target, ".o-kanban-button-new");
+    });
+
+    QUnit.test("clicking on a link triggers correct event", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><a type="edit">Edit</a></div>' +
+                "</t></templates></kanban>",
+            selectRecord: (resId, { mode }) => {
+                assert.equal(resId, 1);
+                assert.equal(mode, "edit");
+            },
+        });
+        await click(getCard(0), "a");
+    });
+
+    QUnit.test("environment is updated when (un)folding groups", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="id"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        assert.deepEqual(getCardTexts(), ["1", "3", "2", "4"]);
+
+        // fold the second group and check that the res_ids it contains are no
+        // longer in the environment
+        const clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Fold");
+
+        assert.deepEqual(getCardTexts(), ["1", "3"]);
+
+        // re-open the second group and check that the res_ids it contains are
+        // back in the environment
+        await click(getColumn(1));
+
+        assert.deepEqual(getCardTexts(), ["1", "3", "2", "4"]);
+    });
+
+    QUnit.test("create a column in grouped on m2o", 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><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, { method }) {
+                if (method === "name_create" || route === "/web/dataset/resequence") {
+                    assert.step(method || route);
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsOnce(target, ".o_column_quick_create", "should have a quick create column");
+        assert.containsNone(
+            target,
+            ".o_column_quick_create input",
+            "the input should not be visible"
+        );
+
+        await createColumn();
+
+        assert.containsOnce(target, ".o_column_quick_create input", "the input should be visible");
+
+        // discard the column creation and click it again
+        await triggerEvent(target, ".o_column_quick_create input", "keydown", {
+            key: "Escape",
+        });
+
+        assert.containsNone(
+            target,
+            ".o_column_quick_create input",
+            "the input should not be visible"
+        );
+
+        await createColumn();
+
+        assert.containsOnce(target, ".o_column_quick_create input", "the input should be visible");
+
+        await editColumnName("new value");
+        await validateColumn();
+
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.containsOnce(
+            getColumn(2),
+            "span:contains(new value)",
+            "the last column should be the newly created one"
+        );
+        assert.ok(getColumn(2).dataset.id, "the created column should have an associated id");
+        assert.doesNotHaveClass(
+            getColumn(2),
+            "o_column_folded",
+            "the created column should not be folded"
+        );
+        assert.verifySteps(["name_create"]);
+
+        // fold and unfold the created column, and check that no RPCs are done (as there are no records)
+        const clickColumnAction = await toggleColumnActions(2);
+        await clickColumnAction("Fold");
+
+        assert.hasClass(getColumn(2), "o_column_folded", "the created column should now be folded");
+
+        await click(getColumn(2));
+
+        assert.doesNotHaveClass(getColumn(1), "o_column_folded");
+        assert.verifySteps([], "no rpc should have been done when folding/unfolding");
+
+        // quick create a record
+        await createRecord();
+
+        assert.hasClass(
+            getColumn(0).querySelector(":scope > div:nth-child(2)"),
+            "o_kanban_quick_create",
+            "clicking on create should open the quick_create in the first column"
+        );
+    });
+
+    QUnit.test("auto fold group when reach the limit", async (assert) => {
+        for (let i = 0; i < 12; i++) {
+            serverData.models.product.records.push({
+                id: 8 + i,
+                name: "column",
+            });
+            serverData.models.partner.records.push({
+                id: 20 + i,
+                foo: "dumb entry",
+                product_id: 8 + i,
+            });
+        }
+
+        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"],
+            async mockRPC(route, args, performRPC) {
+                if (args.method === "web_read_group") {
+                    const result = await performRPC(route, args);
+                    result.groups[2].__fold = true;
+                    result.groups[8].__fold = true;
+                    return result;
+                }
+            },
+        });
+
+        // we look if column are folded/unfolded according to what is expected
+        assert.doesNotHaveClass(getColumn(1), "o_column_folded");
+        assert.doesNotHaveClass(getColumn(3), "o_column_folded");
+        assert.doesNotHaveClass(getColumn(9), "o_column_folded");
+        assert.hasClass(getColumn(2), "o_column_folded");
+        assert.hasClass(getColumn(8), "o_column_folded");
+
+        // we look if columns are actually folded after we reached the limit
+        assert.hasClass(getColumn(12), "o_column_folded");
+        assert.hasClass(getColumn(13), "o_column_folded");
+
+        // we look if we have the right count of folded/unfolded column
+        assert.containsN(target, ".o_kanban_group:not(.o_column_folded)", 10);
+        assert.containsN(target, ".o_kanban_group.o_column_folded", 4);
+    });
+
+    QUnit.test(
+        "hide and display help message (ESC) in kanban quick create [REQUIRE FOCUS]",
+        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"],
+            });
+
+            await createColumn();
+            await nextTick(); // Wait for the autofocus to trigger after the update
+
+            assert.containsOnce(target, ".o_discard_msg", "the ESC to discard message is visible");
+
+            // click outside the column (to lose focus)
+            await click(getColumn(0), ".o_kanban_header");
+
+            assert.containsNone(
+                target,
+                ".o_discard_msg",
+                "the ESC to discard message is no longer visible"
+            );
+        }
+    );
+
+    QUnit.test("delete a column in grouped on m2o", async (assert) => {
+        assert.expect(36);
+
+        let resequencedIDs = [];
+        let dialogProps;
+
+        patchDialog((_cls, props) => {
+            assert.ok(true, "a confirm modal should be displayed");
+            dialogProps = props;
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban class="o_kanban_test" on_create="quick_create">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+            groupBy: ["product_id"],
+            async mockRPC(route, { ids, method }) {
+                if (route === "/web/dataset/resequence") {
+                    resequencedIDs = ids;
+                    assert.strictEqual(
+                        ids.filter(isNaN).length,
+                        0,
+                        "column resequenced should be existing records with IDs"
+                    );
+                }
+                if (method) {
+                    assert.step(method);
+                }
+            },
+        });
+
+        // check the initial rendering
+        assert.containsN(target, ".o_kanban_group", 2, "should have two columns");
+        assert.strictEqual(
+            getColumn(0).querySelector(".o_column_title").innerText,
+            "hello",
+            'first column should be [3, "hello"]'
+        );
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "xmo",
+            'second column should be [5, "xmo"]'
+        );
+        assert.containsN(
+            getColumn(1),
+            ".o_kanban_record",
+            2,
+            "second column should have two records"
+        );
+
+        // check available actions in kanban header's config dropdown
+        await toggleColumnActions(0);
+        assert.containsOnce(
+            getColumn(0),
+            ".o_kanban_toggle_fold",
+            "should be able to fold the column"
+        );
+        assert.containsOnce(getColumn(0), ".o_column_edit", "should be able to edit the column");
+        assert.containsOnce(
+            getColumn(0),
+            ".o_column_delete",
+            "should be able to delete the column"
+        );
+        assert.containsNone(
+            getColumn(0),
+            ".o_column_archive_records",
+            "should not be able to archive all the records"
+        );
+        assert.containsNone(
+            getColumn(0),
+            ".o_column_unarchive_records",
+            "should not be able to restore all the records"
+        );
+
+        // delete second column (first cancel the confirm request, then confirm)
+        let clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Delete");
+
+        dialogProps.cancel();
+        await nextTick();
+
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "xmo",
+            'column [5, "xmo"] should still be there'
+        );
+
+        dialogProps.confirm();
+        await nextTick();
+
+        clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Delete");
+
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "hello",
+            'last column should now be [3, "hello"]'
+        );
+        assert.containsN(target, ".o_kanban_group", 2, "should still have two columns");
+        assert.strictEqual(
+            getColumn(0).querySelector(".o_column_title").innerText,
+            "None (2)",
+            "first column should have no id (Undefined column)"
+        );
+
+        // check available actions on 'Undefined' column
+        await click(getColumn(0));
+        await toggleColumnActions(0);
+        assert.containsOnce(
+            getColumn(0),
+            ".o_kanban_toggle_fold",
+            "should be able to fold the column"
+        );
+        assert.containsNone(getColumn(0), ".o_column_edit", "should be able to edit the column");
+        assert.containsNone(
+            getColumn(0),
+            ".o_column_delete",
+            "should be able to delete the column"
+        );
+        assert.containsNone(
+            getColumn(0),
+            ".o_column_archive_records",
+            "should not be able to archive all the records"
+        );
+        assert.containsNone(
+            getColumn(0),
+            ".o_column_unarchive_records",
+            "should not be able to restore all the records"
+        );
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "unlink",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+        ]);
+        assert.containsN(
+            target,
+            ".o_kanban_group",
+            2,
+            "the old groups should have been correctly deleted"
+        );
+
+        // test column drag and drop having an 'Undefined' column
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_column_title",
+            ".o_kanban_group:nth-child(2)"
+        );
+        assert.deepEqual(
+            resequencedIDs,
+            [],
+            "resequencing require at least 2 not Undefined columns"
+        );
+        await createColumn();
+        await editColumnName("once third column");
+        await validateColumn();
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_column_title",
+            ".o_kanban_group:nth-child(3)"
+        );
+
+        assert.deepEqual(
+            resequencedIDs,
+            [],
+            "moving the Undefined column should not affect order of other columns"
+        );
+
+        await dragAndDrop(
+            ".o_kanban_group:nth-child(2) .o_column_title",
+            ".o_kanban_group:nth-child(3)"
+        );
+
+        assert.deepEqual(resequencedIDs, [4, 3], "moved column should be resequenced accordingly");
+        assert.verifySteps(["name_create"]);
+    });
+
+    QUnit.test("create a column, delete it and create another one", async (assert) => {
+        patchDialog((_cls, props) => props.confirm());
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<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();
+        await editColumnName("new column 1");
+        await validateColumn();
+
+        assert.containsN(target, ".o_kanban_group", 3);
+
+        const clickColumnAction = await toggleColumnActions(2);
+        await clickColumnAction("Delete");
+
+        assert.containsN(target, ".o_kanban_group", 2);
+
+        await createColumn();
+        await editColumnName("new column 2");
+        await validateColumn();
+
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.strictEqual(
+            getColumn(2).querySelector("span").innerText,
+            "new column 2",
+            "the last column should be the newly created one"
+        );
+    });
+
+    QUnit.test("edit a column in grouped on m2o", async (assert) => {
+        serverData.views["product,false,form"] =
+            '<form string="Product"><field name="display_name"/></form>';
+
+        let nbRPCs = 0;
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC() {
+                nbRPCs++;
+            },
+        });
+
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "xmo",
+            'title of the column should be "xmo"'
+        );
+
+        // edit the title of column [5, 'xmo'] and close without saving
+        let clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Edit");
+
+        assert.containsOnce(
+            target,
+            ".modal .o_form_editable",
+            "a form view should be open in a modal"
+        );
+        assert.strictEqual(
+            target.querySelector(".modal .o_form_editable input").value,
+            "xmo",
+            'the name should be "xmo"'
+        );
+
+        await editInput(target, ".modal .o_form_editable input", "ged"); // change the value
+        nbRPCs = 0;
+        await click(target, ".modal-header .close");
+
+        assert.containsNone(target, ".modal");
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "xmo",
+            'title of the column should still be "xmo"'
+        );
+        assert.strictEqual(nbRPCs, 0, "no RPC should have been done");
+
+        // edit the title of column [5, 'xmo'] and discard
+        clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Edit");
+        await editInput(target, ".modal .o_form_editable input", "ged"); // change the value
+        nbRPCs = 0;
+        await click(target, ".modal button.o_form_button_cancel");
+
+        assert.containsNone(target, ".modal");
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "xmo",
+            'title of the column should still be "xmo"'
+        );
+        assert.strictEqual(nbRPCs, 0, "no RPC should have been done");
+
+        // edit the title of column [5, 'xmo'] and save
+        clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Edit");
+        await editInput(target, ".modal .o_form_editable input", "ged"); // change the value
+        nbRPCs = 0;
+        await click(target, ".modal .modal-footer .btn-primary"); // click on save
+
+        assert.containsNone(target, ".modal", "the modal should be closed");
+        assert.strictEqual(
+            getColumn(1).querySelector(".o_column_title").innerText,
+            "ged",
+            'title of the column should be "ged"'
+        );
+        assert.strictEqual(nbRPCs, 4, "should have done 1 write, 1 read_group and 2 search_read");
+    });
+
+    QUnit.test("edit a column propagates right context", async (assert) => {
+        assert.expect(4);
+
+        serverData.views["product,false,form"] =
+            '<form string="Product"><field name="display_name"/></form>';
+
+        patchWithCleanup(session.user_context, { lang: "brol" });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban on_create="quick_create">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(_route, { method, model, kwargs }) {
+                if (model === "partner" && method === "web_search_read") {
+                    assert.strictEqual(
+                        kwargs.context.lang,
+                        "brol",
+                        "lang is present in context for partner operations"
+                    );
+                } else if (model === "product") {
+                    assert.strictEqual(
+                        kwargs.context.lang,
+                        "brol",
+                        "lang is present in context for product operations"
+                    );
+                }
+            },
+        });
+
+        const clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Edit");
+    });
+
+    QUnit.test("quick create column should be opened if there is no column", 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"],
+            domain: [["foo", "=", "norecord"]],
+        });
+
+        assert.containsNone(target, ".o_kanban_group");
+        assert.containsOnce(target, ".o_column_quick_create");
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create input",
+            "the quick create should be opened"
+        );
+    });
+
+    QUnit.test(
+        "quick create column should not be closed on window click if there is no column",
+        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"],
+                domain: [["foo", "=", "norecord"]],
+            });
+
+            assert.containsNone(target, ".o_kanban_group");
+            assert.containsOnce(target, ".o_column_quick_create");
+            assert.containsOnce(
+                target,
+                ".o_column_quick_create input",
+                "the quick create should be opened"
+            );
+            // click outside should not discard quick create column
+            await click(target, ".o_kanban_example_background_container");
+            assert.containsOnce(
+                target,
+                ".o_column_quick_create input",
+                "the quick create should still be opened"
+            );
+        }
+    );
+
+    QUnit.test("quick create several columns in a row", 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, "should have two columns");
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create",
+            "should have a ColumnQuickCreate widget"
+        );
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create .o_quick_create_folded:visible",
+            "the ColumnQuickCreate should be folded"
+        );
+        assert.containsNone(
+            target,
+            ".o_column_quick_create .o_quick_create_unfolded:visible",
+            "the ColumnQuickCreate should be folded"
+        );
+
+        // add a new column
+        await createColumn();
+        assert.containsNone(
+            target,
+            ".o_column_quick_create .o_quick_create_folded:visible",
+            "the ColumnQuickCreate should be unfolded"
+        );
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create .o_quick_create_unfolded:visible",
+            "the ColumnQuickCreate should be unfolded"
+        );
+        await editColumnName("New Column 1");
+        await validateColumn();
+        assert.containsN(target, ".o_kanban_group", 3, "should now have three columns");
+
+        // add another column
+        assert.containsNone(
+            target,
+            ".o_column_quick_create .o_quick_create_folded:visible",
+            "the ColumnQuickCreate should still be unfolded"
+        );
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create .o_quick_create_unfolded:visible",
+            "the ColumnQuickCreate should still be unfolded"
+        );
+        await editColumnName("New Column 2");
+        await validateColumn();
+        assert.containsN(target, ".o_kanban_group", 4);
+    });
+
+    QUnit.test("quick create column and examples", async (assert) => {
+        serviceRegistry.add("dialog", dialogService, { force: true });
+        registry.category("kanban_examples").add("test", {
+            examples: [
+                {
+                    name: "A first example",
+                    columns: ["Column 1", "Column 2", "Column 3"],
+                    description: "A weak description.",
+                },
+                {
+                    name: "A second example",
+                    columns: ["Col 1", "Col 2"],
+                    description: `A fantastic description.`,
+                },
+            ],
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban examples="test">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        assert.containsOnce(target, ".o_column_quick_create", "should have quick create available");
+
+        // open the quick create
+        await createColumn();
+
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create .o_kanban_examples:visible",
+            "should have a link to see examples"
+        );
+
+        // click to see the examples
+        await click(target, ".o_column_quick_create .o_kanban_examples");
+
+        assert.containsOnce(
+            target,
+            ".modal .o_kanban_examples_dialog",
+            "should have open the examples dialog"
+        );
+        assert.containsN(
+            target,
+            ".modal .o_notebook_headers li",
+            2,
+            "should have two examples (in the menu)"
+        );
+        assert.strictEqual(
+            target.querySelector(".modal .o_notebook_headers").innerText,
+            "A first example\nA second example",
+            "example names should be correct"
+        );
+        assert.containsOnce(
+            target,
+            ".modal .o_notebook_content .tab-pane",
+            "should have only rendered one page"
+        );
+
+        const firstPane = target.querySelector(".modal .o_notebook_content .tab-pane");
+        assert.containsN(
+            firstPane,
+            ".o_kanban_examples_group",
+            3,
+            "there should be 3 stages in the first example"
+        );
+        assert.strictEqual(
+            [...firstPane.querySelectorAll("h6")].map((e) => e.textContent).join(""),
+            "Column 1Column 2Column 3",
+            "column titles should be correct"
+        );
+        assert.strictEqual(
+            firstPane.querySelector(".o_kanban_examples_description").innerHTML,
+            "A weak description.",
+            "An escaped description should be displayed"
+        );
+
+        await click(target.querySelector(".nav-item:nth-child(2) .nav-link"));
+        const secondPane = target.querySelector(".o_notebook_content");
+        assert.containsN(
+            secondPane,
+            ".o_kanban_examples_group",
+            2,
+            "there should be 2 stages in the second example"
+        );
+        assert.strictEqual(
+            [...secondPane.querySelectorAll("h6")].map((e) => e.textContent).join(""),
+            "Col 1Col 2",
+            "column titles should be correct"
+        );
+        assert.strictEqual(
+            secondPane.querySelector(".o_kanban_examples_description").innerHTML,
+            "A fantastic description.",
+            "A formatted description should be displayed."
+        );
+    });
+
+    QUnit.test("quick create column's apply button's display text", async (assert) => {
+        serviceRegistry.add("dialog", dialogService, { force: true });
+        const applyExamplesText = "Use This For My Test";
+        registry.category("kanban_examples").add("test", {
+            applyExamplesText: applyExamplesText,
+            examples: [
+                {
+                    name: "A first example",
+                    columns: ["Column 1", "Column 2", "Column 3"],
+                },
+                {
+                    name: "A second example",
+                    columns: ["Col 1", "Col 2"],
+                },
+            ],
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban examples="test">' +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        // open the quick create
+        await createColumn();
+
+        // click to see the examples
+        await click(target, ".o_column_quick_create .o_kanban_examples");
+
+        const $primaryActionButton = $(".modal footer.modal-footer button.btn-primary");
+        assert.strictEqual(
+            $primaryActionButton.text(),
+            applyExamplesText,
+            "the primary button should display the value of applyExamplesText"
+        );
+    });
+
+    QUnit.test(
+        "quick create column and examples background with ghostColumns titles",
+        async (assert) => {
+            serverData.models.partner.records = [];
+            registry.category("kanban_examples").add("test", {
+                ghostColumns: ["Ghost 1", "Ghost 2", "Ghost 3", "Ghost 4"],
+                examples: [
+                    {
+                        name: "A first example",
+                        columns: ["Column 1", "Column 2", "Column 3"],
+                    },
+                    {
+                        name: "A second example",
+                        columns: ["Col 1", "Col 2"],
+                    },
+                ],
+            });
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban examples="test">' +
+                    '<field name="product_id"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["product_id"],
+            });
+
+            assert.containsOnce(
+                target,
+                ".o_kanban_example_background",
+                "should have ExamplesBackground when no data"
+            );
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_kanban_examples_group h6")].map(
+                    (el) => el.innerText
+                ),
+                ["Ghost 1", "Ghost 2", "Ghost 3", "Ghost 4"],
+                "ghost title should be correct"
+            );
+            assert.containsOnce(
+                target,
+                ".o_column_quick_create",
+                "should have a ColumnQuickCreate widget"
+            );
+            assert.containsOnce(
+                target,
+                ".o_column_quick_create .o_kanban_examples:visible",
+                "should not have a link to see examples as there is no examples registered"
+            );
+        }
+    );
+
+    QUnit.test(
+        "quick create column and examples background without ghostColumns titles",
+        async (assert) => {
+            serverData.models.partner.records = [];
+
+            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.containsOnce(
+                target,
+                ".o_kanban_example_background",
+                "should have ExamplesBackground when no data"
+            );
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_kanban_examples_group h6")].map(
+                    (el) => el.innerText
+                ),
+                ["Column 1", "Column 2", "Column 3", "Column 4"],
+                "ghost title should be correct"
+            );
+            assert.containsOnce(
+                target,
+                ".o_column_quick_create",
+                "should have a ColumnQuickCreate widget"
+            );
+            assert.containsNone(
+                target,
+                ".o_column_quick_create .o_kanban_examples:visible",
+                "should not have a link to see examples as there is no examples registered"
+            );
+        }
+    );
+
+    QUnit.test(
+        "nocontent helper after adding a record (kanban with progressbar)",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `<kanban >
+                    <field name="product_id"/>
+                    <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}' sum_field="int_field"/>
+                    <templates>
+                      <t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                      </t>
+                    </templates>
+                </kanban>`,
+                groupBy: ["product_id"],
+                domain: [["foo", "=", "abcd"]],
+                async mockRPC(route, args) {
+                    if (args.method === "web_read_group") {
+                        return {
+                            groups: [
+                                {
+                                    __domain: [["product_id", "=", 3]],
+                                    product_id_count: 0,
+                                    product_id: [3, "hello"],
+                                },
+                            ],
+                        };
+                    }
+                },
+                noContentHelp: "No content helper",
+            });
+
+            assert.containsOnce(target, ".o_view_nocontent", "the nocontent helper is displayed");
+
+            // add a record
+            await quickCreateRecord();
+            await editQuickCreateInput("display_name", "twilight sparkle");
+            await validateRecord();
+
+            assert.containsNone(
+                target,
+                ".o_view_nocontent",
+                "the nocontent helper is not displayed after quick create"
+            );
+
+            // cancel quick create
+            await discardRecord();
+            assert.containsNone(
+                target,
+                ".o_view_nocontent",
+                "the nocontent helper is not displayed after cancelling the quick create"
+            );
+        }
+    );
+
+    QUnit.test(
+        "if view was not grouped at start, it can be grouped and ungrouped",
+        async (assert) => {
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create">' +
+                    '<field name="product_id"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+            });
+
+            assert.doesNotHaveClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+            await reload(kanban, { groupBy: ["product_id"] });
+
+            assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+
+            await reload(kanban, { groupBy: [] });
+
+            assert.doesNotHaveClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        }
+    );
+
+    QUnit.test("no content helper when archive all records in kanban group", async (assert) => {
+        // add active field on partner model to have archive option
+        serverData.models.partner.fields.active = {
+            string: "Active",
+            type: "boolean",
+            default: true,
+        };
+        // remove last records to have only one column
+        serverData.models.partner.records = serverData.models.partner.records.slice(0, 3);
+
+        patchDialog((_cls, props) => {
+            assert.step("open-dialog");
+            props.confirm();
+        });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `<kanban>
+                        <field name="active"/>
+                        <field name="bar"/>
+                        <templates>
+                            <t t-name="kanban-box">
+                               <div><field name="foo"/></div>
+                            </t>
+                        </templates>
+                    </kanban>`,
+            noContentHelp: '<p class="hello">click to add a partner</p>',
+            groupBy: ["bar"],
+        });
+
+        // check that the (unique) column contains 3 records
+        assert.containsN(target, ".o_kanban_group:last-child .o_kanban_record", 3);
+
+        // archive the records of the last column
+        const clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Archive All");
+
+        // check no content helper is exist
+        assert.containsOnce(target, ".o_view_nocontent");
+        assert.verifySteps(["open-dialog"]);
+    });
+
+    QUnit.test("no content helper when no data", async (assert) => {
+        const records = serverData.models.partner.records;
+
+        serverData.models.partner.records = [];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<t t-esc="record.foo.value"/>' +
+                '<field name="foo"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+            noContentHelp: '<p class="hello">click to add a partner</p>',
+        });
+
+        assert.containsOnce(target, ".o_view_nocontent", "should display the no content helper");
+
+        assert.strictEqual(
+            target.querySelector(".o_view_nocontent").innerText,
+            '<p class="hello">click to add a partner</p>',
+            "should have rendered no content helper from action"
+        );
+
+        serverData.models.partner.records = records;
+        await reload(kanban);
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "should not display the no content helper"
+        );
+    });
+
+    QUnit.test("no nocontent helper for grouped kanban with empty groups", 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"],
+            async mockRPC(route, args, performRpc) {
+                if (args.method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    const result = await performRpc(...arguments);
+                    for (const group of result.groups) {
+                        group[args.kwargs.groupby[0] + "_count"] = 0;
+                    }
+                    return result;
+                }
+            },
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2, "there should be two columns");
+        assert.containsNone(target, ".o_kanban_record", "there should be no records");
+    });
+
+    QUnit.test("no nocontent helper for grouped kanban with no records", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsNone(target, ".o_kanban_group", "there should be no columns");
+        assert.containsNone(target, ".o_kanban_record", "there should be no records");
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (we are in 'column creation mode')"
+        );
+        assert.containsOnce(
+            target,
+            ".o_column_quick_create",
+            "there should be a column quick create"
+        );
+    });
+
+    QUnit.test("no nocontent helper is shown when no longer creating column", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (we are in 'column creation mode')"
+        );
+
+        // creating a new column
+        await editColumnName("applejack");
+        await validateColumn();
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (still in 'column creation mode')"
+        );
+
+        // leaving column creation mode
+        await triggerEvent(target, ".o_column_quick_create .o_input", "keydown", {
+            key: "Escape",
+        });
+
+        assert.containsOnce(target, ".o_view_nocontent", "there should be a nocontent helper");
+    });
+
+    QUnit.test("no nocontent helper is hidden when quick creating a column", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    return {
+                        groups: [
+                            {
+                                __domain: [["product_id", "=", 3]],
+                                product_id_count: 0,
+                                product_id: [3, "hello"],
+                            },
+                        ],
+                        length: 1,
+                    };
+                }
+            },
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsOnce(target, ".o_view_nocontent", "there should be a nocontent helper");
+
+        await createColumn();
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (we are in 'column creation mode')"
+        );
+    });
+
+    QUnit.test("remove nocontent helper after adding a record", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    return {
+                        groups: [
+                            {
+                                __domain: [["product_id", "=", 3]],
+                                product_id_count: 0,
+                                product_id: [3, "hello"],
+                            },
+                        ],
+                        length: 1,
+                    };
+                }
+            },
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsOnce(target, ".o_view_nocontent", "there should be a nocontent helper");
+
+        // add a record
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "twilight sparkle");
+        await validateRecord();
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (there is now one record)"
+        );
+    });
+
+    QUnit.test("remove nocontent helper when adding a record", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="name"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    return {
+                        groups: [
+                            {
+                                __domain: [["product_id", "=", 3]],
+                                product_id_count: 0,
+                                product_id: [3, "hello"],
+                            },
+                        ],
+                        length: 1,
+                    };
+                }
+            },
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsOnce(target, ".o_view_nocontent", "there should be a nocontent helper");
+
+        // add a record
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "twilight sparkle");
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "there should be no nocontent helper (there is now one record)"
+        );
+    });
+
+    QUnit.test(
+        "nocontent helper is displayed again after canceling quick create",
+        async (assert) => {
+            serverData.models.partner.records = [];
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="name"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["product_id"],
+                async mockRPC(route, args) {
+                    if (args.method === "web_read_group") {
+                        return {
+                            groups: [
+                                {
+                                    __domain: [["product_id", "=", 3]],
+                                    product_id_count: 0,
+                                    product_id: [3, "hello"],
+                                },
+                            ],
+                            length: 1,
+                        };
+                    }
+                },
+                noContentHelp: "No content helper",
+            });
+
+            // add a record
+            await quickCreateRecord();
+
+            await click(target);
+
+            assert.containsOnce(
+                target,
+                ".o_view_nocontent",
+                "there should be again a nocontent helper"
+            );
+        }
+    );
+
+    QUnit.test(
+        "nocontent helper for grouped kanban with no records with no group_create",
+        async (assert) => {
+            serverData.models.partner.records = [];
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban group_create="false">' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["product_id"],
+                noContentHelp: "No content helper",
+            });
+
+            assert.containsNone(target, ".o_kanban_group", "there should be no columns");
+            assert.containsNone(target, ".o_kanban_record", "there should be no records");
+            assert.containsNone(
+                target,
+                ".o_view_nocontent",
+                "there should not be a nocontent helper"
+            );
+            assert.containsNone(
+                target,
+                ".o_column_quick_create",
+                "there should not be a column quick create"
+            );
+        }
+    );
+
+    QUnit.test("empty grouped kanban with sample data and no columns", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsNone(target, ".o_view_nocontent");
+        assert.containsOnce(target, ".o_quick_create_unfolded");
+        assert.containsOnce(target, ".o_kanban_example_background_container");
+    });
+
+    QUnit.test("empty grouped kanban with sample data and click quick create", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    result.groups.forEach((group) => {
+                        group[`${kwargs.groupby[0]}_count`] = 0;
+                    });
+                }
+                return result;
+            },
+            noContentHelp: "No content helper",
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2, "there should be two columns");
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_view_nocontent");
+        assert.containsN(
+            target,
+            ".o_kanban_record",
+            16,
+            "there should be 8 sample records by column"
+        );
+
+        await quickCreateRecord();
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsNone(target, ".o_kanban_record");
+        assert.containsNone(target, ".o_view_nocontent");
+        assert.containsOnce(
+            target.querySelector(".o_kanban_group:first-child"),
+            ".o_kanban_quick_create"
+        );
+
+        await editQuickCreateInput("display_name", "twilight sparkle");
+        await validateRecord();
+
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(
+            target.querySelector(".o_kanban_group:first-child"),
+            ".o_kanban_record"
+        );
+        assert.containsNone(target, ".o_view_nocontent");
+    });
+
+    QUnit.test("empty grouped kanban with sample data and cancel quick create", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    result.groups.forEach((group) => {
+                        group[`${kwargs.groupby[0]}_count`] = 0;
+                    });
+                }
+                return result;
+            },
+            noContentHelp: "No content helper",
+        });
+        assert.containsN(target, ".o_kanban_group", 2, "there should be two columns");
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_view_nocontent");
+        assert.containsN(
+            target,
+            ".o_kanban_record",
+            16,
+            "there should be 8 sample records by column"
+        );
+
+        await quickCreateRecord();
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsNone(target, ".o_kanban_record");
+        assert.containsNone(target, ".o_view_nocontent");
+        assert.containsOnce(
+            target.querySelector(".o_kanban_group:first-child"),
+            ".o_kanban_quick_create"
+        );
+
+        await click(target.querySelector(".o_kanban_view"));
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsNone(target, ".o_kanban_quick_create");
+        assert.containsNone(target, ".o_kanban_record");
+        assert.containsOnce(target, ".o_view_nocontent");
+    });
+
+    QUnit.test("empty grouped kanban with sample data: keyboard navigation", async (assert) => {
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                            <field name="state" widget="priority"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    result.groups.forEach((g) => (g.product_id_count = 0));
+                }
+                return result;
+            },
+        });
+
+        // Check keynav is disabled
+        assert.hasClass(getCard(0), "o_sample_data_disabled");
+
+        await toggleColumnActions(0);
+
+        assert.hasClass(target.querySelector(".o_kanban_toggle_fold"), "o_sample_data_disabled");
+        assert.containsNone(target, '[tabindex]:not([tabindex="-1"])');
+
+        assert.hasClass(document.activeElement, "o_searchview_input");
+
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowDown" });
+
+        assert.hasClass(document.activeElement, "o_searchview_input");
+    });
+
+    QUnit.test("empty kanban with sample data", async (assert) => {
+        serverData.models.partner.records = [];
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            noContentHelp: "No content helper",
+        });
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsN(
+            target,
+            ".o_kanban_record:not(.o_kanban_ghost)",
+            10,
+            "there should be 10 sample records"
+        );
+        assert.containsOnce(target, ".o_view_nocontent");
+
+        await reload(kanban, { domain: [["id", "<", 0]] });
+
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsNone(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.containsOnce(target, ".o_view_nocontent");
+    });
+
+    QUnit.test("empty grouped kanban with sample data and many2many_tags", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="int_field"/>
+                                <field name="category_ids" widget="many2many_tags"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                assert.step(method || route);
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    result.groups.forEach((group) => {
+                        group[`${kwargs.groupby[0]}_count`] = 0;
+                    });
+                }
+                return result;
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2, "there should be 2 'real' columns");
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length >= 1,
+            "there should be sample records"
+        );
+        assert.ok(
+            target.querySelectorAll(".o_field_many2many_tags .o_tag").length >= 1,
+            "there should be tags"
+        );
+
+        assert.verifySteps(["get_views", "web_read_group"], "should not read the tags");
+    });
+
+    QUnit.test("sample data does not change after reload with sample data", async (assert) => {
+        Object.assign(serverData, {
+            views: {
+                "partner,false,kanban": `
+                    <kanban sample="1">
+                        <field name="product_id"/>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div><field name="int_field"/></div>
+                            </t>
+                        </templates>
+                    </kanban>`,
+                "partner,false,search": "<search/>",
+                // list-view so that there is a view switcher, unused
+                "partner,false,list": '<tree><field name="foo"/></tree>',
+            },
+        });
+        const webClient = await createWebClient({
+            serverData,
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return empty groups, as this is
+                    // the case for several models (e.g. project.task grouped
+                    // by stage_id)
+                    result.groups.forEach((group) => {
+                        group[`${kwargs.groupby[0]}_count`] = 0;
+                    });
+                }
+                return result;
+            },
+        });
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "kanban"],
+                [false, "list"],
+            ],
+            context: {
+                group_by: ["product_id"],
+            },
+        });
+
+        const columns = target.querySelectorAll(".o_kanban_group");
+
+        assert.ok(columns.length >= 1, "there should be at least 1 sample column");
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsN(target, ".o_kanban_record", 16);
+
+        const kanbanText = target.querySelector(".o_kanban_view").innerText;
+        await click(target.querySelector(".o_control_panel .o_switch_view.o_kanban"));
+
+        assert.strictEqual(
+            kanbanText,
+            target.querySelector(".o_kanban_view").innerText,
+            "the content should be the same after reloading the view"
+        );
+    });
+
+    QUnit.test("non empty kanban with sample data", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            noContentHelp: "No content helper",
+        });
+
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+        assert.containsNone(target, ".o_view_nocontent");
+
+        await reload(kanban, { domain: [["id", "<", 0]] });
+        assert.doesNotHaveClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsNone(target, ".o_kanban_record:not(.o_kanban_ghost)");
+    });
+
+    QUnit.test("empty grouped kanban with sample data: add a column", async (assert) => {
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            async mockRPC(route, { method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    result.groups = serverData.models.product.records.map((r) => {
+                        return {
+                            product_id: [r.id, r.display_name],
+                            product_id_count: 0,
+                            __domain: [["product_id", "=", r.id]],
+                        };
+                    });
+                    result.length = result.groups.length;
+                }
+                return result;
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+
+        await createColumn();
+        await editColumnName("Yoohoo");
+        await validateColumn();
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsN(target, ".o_kanban_group", 3);
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+    });
+
+    QUnit.test("empty grouped kanban with sample data: cannot fold a column", async (assert) => {
+        // folding a column in grouped kanban with sample data is disabled, for the sake of simplicity
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return a single, empty group
+                    result.groups = result.groups.slice(0, 1);
+                    result.groups[0][`${kwargs.groupby[0]}_count`] = 0;
+                    result.length = 1;
+                }
+                return result;
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_kanban_group");
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+
+        await toggleColumnActions(0);
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_config .o_kanban_toggle_fold"),
+            "o_sample_data_disabled"
+        );
+        assert.hasClass(target.querySelector(".o_kanban_config .o_kanban_toggle_fold"), "disabled");
+    });
+
+    QUnit.skip("empty grouped kanban with sample data: fold/unfold a column", async (assert) => {
+        // folding/unfolding of grouped kanban with sample data is currently disabled
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            async mockRPC(route, { kwargs, method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return a single, empty group
+                    result.groups = result.groups.slice(0, 1);
+                    result.groups[0][`${kwargs.groupby[0]}_count`] = 0;
+                    result.length = 1;
+                }
+                return result;
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_kanban_group");
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+
+        // Fold the column
+        const clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Fold");
+
+        assert.containsOnce(target, ".o_kanban_group");
+        assert.hasClass(target.querySelector(".o_kanban_group"), "o_column_folded");
+
+        // Unfold the column
+        await click(target, ".o_kanban_group.o_column_folded");
+
+        assert.containsOnce(target, ".o_kanban_group");
+        assert.doesNotHaveClass(target.querySelector(".o_kanban_group"), "o_column_folded");
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+    });
+
+    QUnit.test("empty grouped kanban with sample data: delete a column", async (assert) => {
+        serverData.models.partner.records = [];
+
+        patchDialog((_cls, props) => props.confirm());
+
+        let groups = [
+            {
+                product_id: [1, "New"],
+                product_id_count: 0,
+                __domain: [],
+            },
+        ];
+        await makeView({
+            arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["product_id"],
+            resModel: "partner",
+            type: "kanban",
+            async mockRPC(route, { method }, performRpc) {
+                const result = await performRpc(...arguments);
+                if (method === "web_read_group") {
+                    // override read_group to return a single, empty group
+                    return {
+                        groups,
+                        length: groups.length,
+                    };
+                }
+                return result;
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_kanban_group");
+        assert.ok(
+            target.querySelectorAll(".o_kanban_record").length > 0,
+            "should contain sample records"
+        );
+
+        // Delete the first column
+        groups = [];
+        const clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Delete");
+
+        assert.containsNone(target, ".o_kanban_group");
+        assert.containsOnce(target, ".o_column_quick_create .o_quick_create_unfolded");
+    });
+
+    QUnit.test(
+        "empty grouped kanban with sample data: add a column and delete it right away",
+        async (assert) => {
+            patchDialog((_cls, props) => props.confirm());
+
+            await makeView({
+                arch: `
+                <kanban sample="1">
+                    <field name="product_id"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+                serverData,
+                groupBy: ["product_id"],
+                resModel: "partner",
+                type: "kanban",
+                async mockRPC(route, { method }, performRpc) {
+                    const result = await performRpc(...arguments);
+                    if (method === "web_read_group") {
+                        result.groups = serverData.models.product.records.map((r) => {
+                            return {
+                                product_id: [r.id, r.display_name],
+                                product_id_count: 0,
+                                __domain: [["product_id", "=", r.id]],
+                            };
+                        });
+                        result.length = result.groups.length;
+                    }
+                    return result;
+                },
+            });
+
+            assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.ok(
+                target.querySelectorAll(".o_kanban_record").length > 0,
+                "should contain sample records"
+            );
+
+            // add a new column
+            await createColumn();
+            await editColumnName("Yoohoo");
+            await validateColumn();
+
+            assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+            assert.containsN(target, ".o_kanban_group", 3);
+            assert.ok(
+                target.querySelectorAll(".o_kanban_record").length,
+                "should contain sample records"
+            );
+
+            // delete the column we just created
+            const clickColumnAction = await toggleColumnActions(2);
+            await clickColumnAction("Delete");
+
+            assert.hasClass(target.querySelector(".o_content"), "o_view_sample_data");
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.ok(
+                target.querySelectorAll(".o_kanban_record").length,
+                "should contain sample records"
+            );
+        }
+    );
+
+    QUnit.test("bounce create button when no data and click on empty area", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `<kanban><templates><t t-name="kanban-box">
+                    <div>
+                        <t t-esc="record.foo.value"/>
+                        <field name="foo"/>
+                    </div>
+                </t></templates></kanban>`,
+            noContentHelp: "click to add a partner",
+        });
+
+        await click(target, ".o_kanban_view");
+        assert.doesNotHaveClass(target.querySelector(".o-kanban-button-new"), "o_catch_attention");
+
+        await reload(kanban, { domain: [["id", "<", 0]] });
+
+        await click(target, ".o_kanban_renderer");
+        assert.hasClass(target.querySelector(".o-kanban-button-new"), "o_catch_attention");
+    });
+
+    QUnit.test("buttons with modifiers", async (assert) => {
+        serverData.models.partner.records[1].bar = false; // so that test is more complete
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="foo"/>' +
+                '<field name="bar"/>' +
+                '<field name="state"/>' +
+                '<templates><div t-name="kanban-box">' +
+                '<button class="o_btn_test_1" type="object" name="a1" ' +
+                "attrs=\"{'invisible': [['foo', '!=', 'yop']]}\"/>" +
+                '<button class="o_btn_test_2" type="object" name="a2" ' +
+                "attrs=\"{'invisible': [['bar', '=', True]]}\" " +
+                'states="abc,def"/>' +
+                "</div></templates>" +
+                "</kanban>",
+        });
+
+        assert.containsOnce(target, ".o_btn_test_1", "kanban should have one buttons of type 1");
+        assert.containsN(target, ".o_btn_test_2", 3, "kanban should have three buttons of type 2");
+    });
+
+    QUnit.test("button executes action and reloads", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                            <button type="object" name="a1" class="a1"/>
+                        </div>
+                    </templates>
+                </kanban>
+            `,
+            async mockRPC(route) {
+                assert.step(route);
+            },
+        });
+        assert.verifySteps([
+            "/web/dataset/call_kw/partner/get_views",
+            "/web/dataset/call_kw/partner/web_search_read",
+        ]);
+
+        assert.ok(
+            target.querySelectorAll("button.a1").length,
+            "kanban should have at least one button a1"
+        );
+
+        let count = 0;
+        patchWithCleanup(kanban.env.services.action, {
+            doActionButton({ onClose }) {
+                count++;
+                onClose();
+            },
+        });
+        click(target.querySelector("button.a1"));
+        await click(target.querySelector("button.a1"));
+
+        assert.strictEqual(count, 1, "should have triggered an execute action only once");
+        assert.verifySteps(
+            ["/web/dataset/call_kw/partner/web_search_read"],
+            "the records should be reloaded after executing a button action"
+        );
+    });
+
+    QUnit.test("button executes action and check domain", async (assert) => {
+        serverData.models.partner.fields.active = {
+            string: "Active",
+            type: "boolean",
+            default: true,
+        };
+        for (const k in serverData.models.partner.records) {
+            serverData.models.partner.records[k].active = true;
+        }
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><div t-name="kanban-box">' +
+                '<field name="foo"/>' +
+                '<field name="active"/>' +
+                '<button type="object" name="a1" />' +
+                '<button type="object" name="toggle_active" class="toggle-active" />' +
+                "</div></templates>" +
+                "</kanban>",
+        });
+        patchWithCleanup(kanban.env.services.action, {
+            doActionButton({ onClose }) {
+                serverData.models.partner.records[0].active = false;
+                onClose();
+            },
+        });
+
+        assert.strictEqual(
+            getCard(0).querySelector("span").textContent,
+            "yop",
+            "should display 'yop' record"
+        );
+        await click(getCard(0), "button.toggle-active");
+        assert.notEqual(
+            getCard(0).querySelector("span").textContent,
+            "yop",
+            "should remove 'yop' record from the view"
+        );
+    });
+
+    QUnit.test("button executes action with domain field not in view", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            domain: [["bar", "=", true]],
+            arch:
+                "<kanban>" +
+                '<templates><div t-name="kanban-box">' +
+                '<field name="foo"/>' +
+                '<button type="object" name="a1" />' +
+                '<button type="object" name="toggle_action" />' +
+                "</div></templates>" +
+                "</kanban>",
+        });
+        patchWithCleanup(kanban.env.services.action, {
+            doActionButton({ onClose }) {
+                onClose();
+            },
+        });
+
+        try {
+            await click(target.querySelector('.o_kanban_record button[name="toggle_action"]'));
+            assert.strictEqual(true, true, "Everything went fine");
+        } catch {
+            assert.strictEqual(true, false, "Error triggered at action execution");
+        }
+    });
+
+    QUnit.test("field tag with modifiers but no widget", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo" attrs="{'invisible': [['id', '=', 1]]}"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.strictEqual(target.querySelector(".o_kanban_record").innerText, "");
+        assert.strictEqual(target.querySelectorAll(".o_kanban_record")[1].innerText, "blip");
+    });
+
+    QUnit.test("field tag with widget and class attributes", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo" widget="char" class="hi"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.containsN(target, ".o_field_widget.hi", 4);
+    });
+
+    QUnit.test("rendering date and datetime (value)", async (assert) => {
+        serverData.models.partner.records[0].date = "2017-01-25";
+        serverData.models.partner.records[1].datetime = "2016-12-12 10:55:05";
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="date"/>' +
+                '<field name="datetime"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<span class="date" t-esc="record.date.value"/>' +
+                '<span class="datetime" t-esc="record.datetime.value"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+        });
+
+        patchWithCleanup(luxon.Settings, { defaultLocale: "en" });
+
+        assert.strictEqual(getCard(0).querySelector(".date").innerText, "01/25/2017");
+        assert.strictEqual(getCard(1).querySelector(".datetime").innerText, "12/12/2016 10:55:05");
+    });
+
+    QUnit.test("rendering date and datetime (raw value)", async (assert) => {
+        serverData.models.partner.records[0].date = "2017-01-25";
+        serverData.models.partner.records[1].datetime = "2016-12-12 10:55:05";
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="date"/>' +
+                '<field name="datetime"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<span class="date" t-esc="record.date.raw_value"/>' +
+                '<span class="datetime" t-esc="record.datetime.raw_value"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+        });
+
+        patchWithCleanup(luxon.Settings, { defaultLocale: "en" });
+
+        assert.ok(getCard(0).querySelector(".date").innerText.startsWith("Wed Jan 25 2017"));
+        assert.ok(getCard(1).querySelector(".datetime").innerText.startsWith("Mon Dec 12 2016"));
+    });
+
+    QUnit.test("rendering many2one (value)", async (assert) => {
+        serverData.models.partner.records[1].product_id = false;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<span class="product_id" t-esc="record.product_id.value"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+        });
+
+        assert.deepEqual(getCardTexts(), ["hello", "hello", "xmo"]);
+    });
+
+    QUnit.test("rendering many2one (raw value)", async (assert) => {
+        serverData.models.partner.records[1].product_id = false;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<span class="product_id" t-esc="record.product_id.raw_value"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+        });
+
+        assert.deepEqual(getCardTexts(), ["3", "false", "3", "5"]);
+    });
+
+    QUnit.test("evaluate conditions on relational fields", async (assert) => {
+        serverData.models.partner.records[0].product_id = false;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<field name="category_ids"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<button t-if="!record.product_id.raw_value" class="btn_a">A</button>' +
+                '<button t-if="!record.category_ids.raw_value.length" class="btn_b">B</button>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+        });
+
+        assert.containsN(
+            target,
+            ".o_kanban_record:not(.o_kanban_ghost)",
+            4,
+            "there should be 4 records"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:not(.o_kanban_ghost) .btn_a",
+            "only 1 of them should have the 'Action' button"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_record:not(.o_kanban_ghost) .btn_b",
+            2,
+            "only 2 of them should have the 'Action' button"
+        );
+    });
+
+    QUnit.test("resequence columns in grouped by m2o", async (assert) => {
+        serverData.models.product.fields.sequence = { type: "integer" };
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="id"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.strictEqual(getColumn(0).querySelector(".o_column_title").innerText, "hello");
+        assert.deepEqual(getCardTexts(), ["1", "3", "2", "4"]);
+
+        await dragAndDrop(".o_kanban_group:first-child", ".o_kanban_group:nth-child(2)");
+
+        // Drag & drop on column (not title) should not work
+        assert.strictEqual(getColumn(0).querySelector(".o_column_title").innerText, "hello");
+        assert.deepEqual(getCardTexts(), ["1", "3", "2", "4"]);
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_column_title",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        assert.strictEqual(getColumn(0).querySelector(".o_column_title").innerText, "xmo");
+        assert.deepEqual(getCardTexts(), ["2", "4", "1", "3"]);
+    });
+
+    QUnit.test("properly evaluate more complex domains", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="foo"/>' +
+                '<field name="bar"/>' +
+                '<field name="category_ids"/>' +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="foo"/>' +
+                "<button type=\"object\" attrs=\"{'invisible':['|', ('bar','=',True), ('category_ids', '!=', [])]}\" class=\"btn btn-primary float-right\" name=\"arbitrary\">Join</button>" +
+                "</div>" +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+        });
+
+        assert.containsOnce(
+            target,
+            "button.float-right.oe_kanban_action_button",
+            "only one button should be visible"
+        );
+    });
+
+    QUnit.test("edit the kanban color with the colorpicker", async (assert) => {
+        serverData.models.category.records[0].color = 12;
+
+        await makeView({
+            type: "kanban",
+            resModel: "category",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="color"/>' +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                '<div color="color">' +
+                '<div class="o_dropdown_kanban dropdown">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<span class="fa fa-bars fa-lg"/>' +
+                "</a>" +
+                '<ul class="dropdown-menu" role="menu">' +
+                "<li>" +
+                '<ul class="oe_kanban_colorpicker"/>' +
+                "</li>" +
+                "</ul>" +
+                "</div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+            async mockRPC(route, { method, args }) {
+                if (method === "write") {
+                    assert.step(`write-color-${args[1].color}`);
+                }
+            },
+        });
+
+        await toggleRecordDropdown(0);
+
+        assert.containsNone(
+            target,
+            ".o_kanban_record.oe_kanban_color_12",
+            "no record should have the color 12"
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:first-child .oe_kanban_colorpicker",
+            "there should be a color picker"
+        );
+        assert.containsN(
+            target,
+            ".o_kanban_record:first-child .oe_kanban_colorpicker > *",
+            12,
+            "the color picker should have 12 children (the colors)"
+        );
+
+        await click(target, ".oe_kanban_colorpicker a.oe_kanban_color_9");
+
+        assert.verifySteps(["write-color-9"], "should write on the color field");
+        assert.hasClass(getCard(0), "oe_kanban_color_9");
+    });
+
+    QUnit.test("load more records in column", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="id"/></div>' +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+            limit: 2,
+            async mockRPC(_route, { method, kwargs }) {
+                if (method === "web_search_read") {
+                    assert.step(`${kwargs.limit} - ${kwargs.offset}`);
+                }
+            },
+        });
+
+        assert.containsN(
+            getColumn(1),
+            ".o_kanban_record",
+            2,
+            "there should be 2 records in the column"
+        );
+        assert.deepEqual(getCardTexts(1), ["1", "2"]);
+
+        // load more
+        await loadMore(1);
+
+        assert.containsN(
+            getColumn(1),
+            ".o_kanban_record",
+            3,
+            "there should now be 3 records in the column"
+        );
+        assert.verifySteps(["2 - 0", "2 - 0", "2 - 2"], "the records should be correctly fetched");
+        assert.deepEqual(getCardTexts(1), ["1", "2", "3"]);
+
+        // reload
+        await validateSearch(target);
+
+        assert.containsN(
+            getColumn(1),
+            ".o_kanban_record",
+            3,
+            "there should still be 3 records in the column after reload"
+        );
+        assert.deepEqual(getCardTexts(1), ["1", "2", "3"]);
+        assert.verifySteps(["2 - 0", "3 - 0"]);
+    });
+
+    QUnit.test("load more records in column with x2many", async (assert) => {
+        assert.expect(10);
+
+        serverData.models.partner.records[0].category_ids = [7];
+        serverData.models.partner.records[1].category_ids = [];
+        serverData.models.partner.records[2].category_ids = [6];
+        serverData.models.partner.records[3].category_ids = [];
+        // record [2] will be loaded after
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <field name="category_ids"/>
+                            <field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            groupBy: ["bar"],
+            limit: 2,
+            async mockRPC(_route, { args, kwargs, model, method }) {
+                if (model === "category" && method === "read") {
+                    assert.step(String(args[0]));
+                } else if (method === "web_search_read") {
+                    const { limit, offset } = kwargs;
+                    if (limit) {
+                        assert.strictEqual(limit, 2);
+                    }
+                    if (offset) {
+                        assert.strictEqual(offset, 2);
+                    }
+                }
+            },
+        });
+
+        assert.containsN(getColumn(1), ".o_kanban_record", 2);
+
+        assert.verifySteps(["7"], "only the appearing category should be fetched");
+
+        // load more
+        await loadMore(1);
+
+        assert.containsN(getColumn(1), ".o_kanban_record", 3);
+        assert.verifySteps(["6"], "the other categories should not be fetched");
+    });
+
+    QUnit.test("update buttons after column creation", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["product_id"],
+        });
+
+        assert.containsNone(target, ".o-kanban-button-new");
+
+        await editColumnName("new column");
+        await validateColumn();
+
+        assert.containsOnce(target, ".o-kanban-button-new");
+    });
+
+    QUnit.test("group_by_tooltip option when grouping on a many2one", async (assert) => {
+        assert.expect(14);
+        delete serverData.models.partner.records[3].product_id;
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban default_group_by="bar">
+                    <field name="bar"/>
+                    <field name="product_id" options='{"group_by_tooltip": {"name": "Kikou"}}'/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            async mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/product/read") {
+                    assert.strictEqual(args.args[0].length, 2, "read on two groups");
+                    assert.deepEqual(
+                        args.args[1],
+                        ["display_name", "name"],
+                        "should read on specified fields on the group by relation"
+                    );
+                }
+            },
+        });
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_renderer"),
+            "o_kanban_grouped",
+            "should have classname 'o_kanban_grouped'"
+        );
+        assert.containsN(target, ".o_kanban_group", 2, "should have 2 columns");
+
+        // simulate an update coming from the searchview, with another groupby given
+        await reload(kanban, { groupBy: ["product_id"] });
+
+        assert.containsN(target, ".o_kanban_group", 3, "should have 3 columns");
+        assert.strictEqual(
+            target.querySelectorAll(".o_kanban_group:nth-child(1) .o_kanban_record").length,
+            1,
+            "column should contain 1 record(s)"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_kanban_group:nth-child(2) .o_kanban_record").length,
+            2,
+            "column should contain 2 record(s)"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_kanban_group:nth-child(3) .o_kanban_record").length,
+            1,
+            "column should contain 1 record(s)"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:first-child span.o_column_title").textContent,
+            "None",
+            "first column should have a default title for when no value is provided"
+        );
+        assert.ok(
+            !target.querySelector(".o_kanban_group:first-child .o_kanban_header_title").dataset
+                .tooltipInfo,
+            "tooltip of first column should not defined, since group_by_tooltip title and the many2one field has no value"
+        );
+        assert.ok(
+            !target.querySelector(".o_kanban_group:first-child .o_kanban_header_title").dataset
+                .tooltipTemplate,
+            "tooltip of first column should not defined, since group_by_tooltip title and the many2one field has no value"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:nth-child(2) span.o_column_title").textContent,
+            "hello",
+            "second column should have a title with a value from the many2one"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_header_title").dataset
+                .tooltipInfo,
+            `[{"title":"Kikou","value":"hello"}]`,
+            "second column should have a tooltip with the group_by_tooltip title and many2one field value"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_header_title").dataset
+                .tooltipTemplate,
+            "web.KanbanGroupTooltip",
+            "second column should have a tooltip with the group_by_tooltip title and many2one field value"
+        );
+    });
+
+    QUnit.test("move a record then put it again in the same column", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["product_id"],
+        });
+
+        await editColumnName("column1");
+        await validateColumn();
+
+        await editColumnName("column2");
+        await validateColumn();
+
+        await quickCreateRecord(1);
+        await editQuickCreateInput("display_name", "new partner");
+        await validateRecord();
+
+        assert.containsNone(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+
+        await dragAndDrop(
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            ".o_kanban_group:first-child"
+        );
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsNone(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        assert.containsNone(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+    });
+
+    QUnit.test("resequence a record twice", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="product_id"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="display_name"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["product_id"],
+            async mockRPC(route) {
+                if (route === "/web/dataset/resequence") {
+                    assert.step("resequence");
+                }
+            },
+        });
+
+        await editColumnName("column1");
+        await validateColumn();
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "record1");
+        await validateRecord();
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "record2");
+        await validateRecord();
+        await discardRecord(); // close quick create
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.deepEqual(
+            getCardTexts(),
+            ["record1", "record2"],
+            "records should be correctly ordered"
+        );
+
+        await dragAndDrop(".o_kanban_record:nth-child(2)", ".o_kanban_record:nth-child(3)");
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.deepEqual(
+            getCardTexts(),
+            ["record2", "record1"],
+            "records should be correctly ordered"
+        );
+
+        await dragAndDrop(".o_kanban_record:nth-child(3)", ".o_kanban_record:nth-child(2)");
+
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 2);
+        assert.deepEqual(
+            getCardTexts(),
+            ["record1", "record2"],
+            "records should be correctly ordered"
+        );
+        assert.verifySteps(["resequence", "resequence"], "should have resequenced twice");
+    });
+
+    QUnit.test("basic support for widgets", async (assert) => {
+        // This test could be removed as soon as we drop the support of legacy widgets (see test
+        // below, which is a duplicate of this one, but with an Owl Component instead).
+        widgetRegistry.add(
+            "test",
+            Widget.extend({
+                init(_parent, dataPoint) {
+                    this._super(...arguments);
+                    this.data = dataPoint.data;
+                },
+                start() {
+                    this.el.innerText = JSON.stringify(this.data);
+                },
+            })
+        );
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<t t-esc="record.foo.value"/>' +
+                '<field name="foo" blip="1"/>' +
+                '<widget name="test"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+        });
+
+        assert.strictEqual(
+            getCard(2).querySelector(".o_legacy_widget").innerText,
+            '{"foo":"gnap","id":3}'
+        );
+    });
+
+    QUnit.test("basic support for widgets (being Owl Components)", async (assert) => {
+        class MyComponent extends Component {
+            get value() {
+                return JSON.stringify(this.props.record.data);
+            }
+        }
+        MyComponent.template = owl.xml`<div t-att-class="props.class" t-esc="value"/>`;
+        viewWidgetRegistry.add("test", MyComponent);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+            <kanban>
+                <field name="foo"/>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div>
+                            <t t-esc="record.foo.value"/>
+                            <widget name="test"/>
+                        </div>
+                    </t>
+                </templates>
+            </kanban>`,
+        });
+
+        assert.strictEqual(getCard(2).querySelector(".o_widget").innerText, '{"foo":"gnap"}');
+    });
+
+    QUnit.test("subwidgets with on_attach_callback when changing record color", async (assert) => {
+        // Note: since the OWL refactor the 'on_attach_callback' is only called
+        // once since the card is not entirely re-rendered. Instead we check that
+        // the data displayed in the widget field is correctly updated.
+        let counter = 0;
+        legacyFieldRegistry.add(
+            "test_widget",
+            AbstractField.extend({
+                on_attach_callback: () => counter++,
+                _renderReadonly() {
+                    this.el.innerText = this.record.data.color;
+                },
+            })
+        );
+
+        await makeView({
+            type: "kanban",
+            resModel: "category",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="color"/>' +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                '<div color="color">' +
+                '<div class="o_dropdown_kanban dropdown">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<span class="fa fa-bars fa-lg"/>' +
+                "</a>" +
+                '<ul class="dropdown-menu" role="menu">' +
+                "<li>" +
+                '<ul class="oe_kanban_colorpicker"/>' +
+                "</li>" +
+                "</ul>" +
+                "</div>" +
+                '<field name="name" widget="test_widget"/>' +
+                "</div>" +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+        });
+
+        // counter should be 2 as there are 2 records
+        assert.strictEqual(counter, 2, "on_attach_callback should have been called twice");
+        assert.deepEqual(getCardTexts(), ["2", "5"]);
+
+        // set a color to kanban record
+        await toggleRecordDropdown(0);
+        await click(getCard(0), ".oe_kanban_colorpicker a.oe_kanban_color_9");
+
+        // first record has replaced its $el with a new one
+        assert.hasClass(getCard(0), "oe_kanban_color_9");
+        assert.deepEqual(getCardTexts(), ["9", "5"]);
+        assert.strictEqual(counter, 2, "on_attach_callback should have been called twice");
+    });
+
+    QUnit.test("column progressbars properly work", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsN(
+            target,
+            ".o_kanban_counter",
+            serverData.models.product.records.length,
+            "kanban counters should have been created"
+        );
+
+        assert.deepEqual(
+            getCounters(),
+            ["-4", "36"],
+            "counter should display the sum of int_field values"
+        );
+    });
+
+    QUnit.test('column progressbars: "false" bar is clickable', async (assert) => {
+        serverData.models.partner.records.push({
+            id: 5,
+            bar: true,
+            foo: false,
+            product_id: 5,
+            state: "ghi",
+        });
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\'/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.deepEqual(getCounters(), ["1", "4"]);
+        assert.containsN(
+            target,
+            ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar",
+            4
+        );
+        assert.containsOnce(
+            target,
+            ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted",
+            "should have false kanban color"
+        );
+        assert.hasClass(
+            target.querySelector(
+                ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted"
+            ),
+            "bg-muted"
+        );
+
+        await click(
+            target,
+            ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted"
+        );
+
+        assert.hasClass(
+            target.querySelector(
+                ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted"
+            ),
+            "progress-bar-animated"
+        );
+        assert.hasClass(
+            target.querySelector(".o_kanban_group:last-child"),
+            "o_kanban_group_show_muted"
+        );
+        assert.deepEqual(getCounters(), ["1", "1"]);
+    });
+
+    QUnit.test('column progressbars: "false" bar with sum_field', async (assert) => {
+        serverData.models.partner.records.push({
+            id: 5,
+            bar: true,
+            foo: false,
+            int_field: 15,
+            product_id: 5,
+            state: "ghi",
+        });
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<field name="foo"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.deepEqual(getCounters(), ["-4", "51"]);
+
+        await click(
+            target,
+            ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted"
+        );
+
+        assert.hasClass(
+            target.querySelector(
+                ".o_kanban_group:last-child .o_kanban_counter_progress .progress-bar.bg-muted"
+            ),
+            "progress-bar-animated"
+        );
+        assert.deepEqual(getCounters(), ["-4", "15"]);
+    });
+
+    QUnit.test("column progressbars should not crash in non grouped views", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            async mockRPC(route, { method }) {
+                assert.step(method);
+            },
+        });
+
+        assert.deepEqual(getCardTexts(), ["name", "name", "name", "name"]);
+        assert.verifySteps(
+            ["get_views", "web_search_read"],
+            "no read on progress bar data is done"
+        );
+    });
+
+    QUnit.test(
+        "column progressbars: creating a new column should create a new progressbar",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="product_id"/>' +
+                    '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\'/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    "<div>" +
+                    '<field name="name"/>' +
+                    "</div>" +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["product_id"],
+            });
+
+            assert.containsN(target, ".o_kanban_counter", 2);
+
+            // Create a new column: this should create an empty progressbar
+            await createColumn();
+            await editColumnName("test");
+            await validateColumn();
+
+            assert.containsN(
+                target,
+                ".o_kanban_counter",
+                3,
+                "a new column with a new column progressbar should have been created"
+            );
+        }
+    );
+
+    QUnit.test("column progressbars on quick create properly update counter", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\'/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.deepEqual(getCounters(), ["1", "3"]);
+
+        await quickCreateRecord();
+        await editQuickCreateInput("display_name", "Test");
+
+        assert.deepEqual(getCounters(), ["1", "3"]);
+
+        await validateRecord();
+
+        assert.deepEqual(
+            getCounters(),
+            ["2", "3"],
+            "kanban counters should have updated on quick create"
+        );
+    });
+
+    QUnit.test("column progressbars are working with load more", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            domain: [["bar", "=", true]],
+            arch:
+                '<kanban limit="1">' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\'/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="id"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.deepEqual(getCardTexts(0), ["1"]);
+
+        await loadMore(0);
+        await loadMore(0);
+
+        assert.deepEqual(getCardTexts(0), ["1", "2", "3"], "intended records are loaded");
+    });
+
+    QUnit.test(
+        "column progressbars with an active filter are working with load more",
+        async (assert) => {
+            serverData.models.partner.records.push(
+                { id: 5, bar: true, foo: "blork" },
+                { id: 6, bar: true, foo: "blork" },
+                { id: 7, bar: true, foo: "blork" }
+            );
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                domain: [["bar", "=", true]],
+                arch: `<kanban limit="1">
+                    <progressbar field="foo" colors='{"blork": "success"}'/>
+                    <field name="foo"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="id"/></div>
+                    </t></templates>
+                </kanban>`,
+                groupBy: ["bar"],
+            });
+
+            await click(target, ".o_kanban_counter_progress .progress-bar.bg-success");
+
+            assert.deepEqual(getCardTexts(), ["5"], "we should have 1 record shown");
+
+            await loadMore(0);
+            await loadMore(0);
+
+            assert.deepEqual(getCardTexts(), ["5", "6", "7"]);
+        }
+    );
+
+    QUnit.test("column progressbars on archiving records update counter", async (assert) => {
+        // add active field on partner model and make all records active
+        serverData.models.partner.fields.active = { string: "Active", type: "char", default: true };
+
+        patchDialog((_cls, props) => props.confirm());
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="active"/>' +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+        });
+
+        assert.deepEqual(getCounters(), ["-4", "36"], "counter should contain the correct value");
+        assert.deepEqual(
+            getTooltips(1),
+            ["1 yop", "1 gnap", "1 blip"],
+            "the counter progressbars should be correctly displayed"
+        );
+
+        // archive all records of the second columns
+        const clickColumnAction = await toggleColumnActions(1);
+        await clickColumnAction("Archive All");
+
+        assert.deepEqual(getCounters(), ["-4", "0"], "counter should contain the correct value");
+        assert.containsNone(
+            getColumn(1),
+            ".progress-bar",
+            "the counter progressbars should have been correctly updated"
+        );
+    });
+
+    QUnit.test(
+        "kanban with progressbars: correctly update env when archiving records",
+        async (assert) => {
+            // add active field on partner model and make all records active
+            serverData.models.partner.fields.active = {
+                string: "Active",
+                type: "char",
+                default: true,
+            };
+
+            patchDialog((_cls, props) => props.confirm());
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="active"/>' +
+                    '<field name="bar"/>' +
+                    '<field name="int_field"/>' +
+                    '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    "<div>" +
+                    '<field name="id"/>' +
+                    "</div>" +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["bar"],
+            });
+
+            assert.deepEqual(getCardTexts(), ["4", "1", "2", "3"]);
+
+            // archive all records of the first column
+            const clickColumnAction = await toggleColumnActions(0);
+            await clickColumnAction("Archive All");
+
+            assert.deepEqual(getCardTexts(), ["1", "2", "3"]);
+        }
+    );
+
+    QUnit.test("RPCs when (re)loading kanban view progressbars", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<field name="int_field"/>' +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["bar"],
+            async mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        await reload(kanban, { groupBy: ["bar"] });
+
+        assert.verifySteps([
+            // initial load
+            "get_views",
+            "web_read_group",
+            "read_progress_bar",
+            "web_search_read",
+            "web_search_read",
+            // reload
+            "web_read_group",
+            "read_progress_bar",
+            "web_search_read",
+            "web_search_read",
+        ]);
+    });
+
+    QUnit.test("RPCs when (de)activating kanban view progressbar filters", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                    <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}' sum_field="int_field"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="name"/></div>
+                    </t></templates>
+                </kanban>
+            `,
+            groupBy: ["bar"],
+            async mockRPC(route, { method }) {
+                assert.step(method || route);
+            },
+        });
+
+        // Activate "yop" on second column
+        await click(getColumn(1), ".progress-bar.bg-success");
+        // Activate "gnap" on second column
+        await click(getColumn(1), ".progress-bar.bg-warning");
+        // Deactivate "gnap" on second column
+        await click(getColumn(1), ".progress-bar.bg-warning");
+
+        assert.verifySteps([
+            // initial load
+            "get_views",
+            "web_read_group",
+            "read_progress_bar",
+            "web_search_read",
+            "web_search_read",
+            // activate filter
+            "web_read_group", // recomputes aggregates
+            "web_search_read",
+            // activate another filter (switching)
+            "web_read_group", // recomputes aggregates
+            "web_search_read",
+            // deactivate active filter
+            "web_read_group", // recomputes aggregates
+            "web_search_read",
+        ]);
+    });
+
+    QUnit.test("drag & drop records grouped by m2o with progressbar", async (assert) => {
+        serverData.models.partner.records[0].product_id = false;
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\'/>' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="int_field"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            groupBy: ["product_id"],
+        });
+
+        // Unfold first column
+        await click(getColumn(0));
+
+        assert.deepEqual(getCounters(), ["1", "1", "2"]);
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(2)"
+        );
+
+        assert.deepEqual(getCounters(), ["0", "2", "2"]);
+
+        await dragAndDrop(
+            ".o_kanban_group:nth-child(2) .o_kanban_record",
+            ".o_kanban_group:first-child"
+        );
+
+        assert.deepEqual(getCounters(), ["1", "1", "2"]);
+
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:nth-child(3)"
+        );
+
+        assert.deepEqual(getCounters(), ["0", "1", "3"]);
+    });
+
+    QUnit.test("progress bar subgroup count recompute", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `<kanban>
+                    <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}'/>
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            groupBy: ["bar"],
+        });
+
+        assert.deepEqual(getCounters(), ["1", "3"]);
+
+        await click(target, ".o_kanban_group:nth-child(2) .bg-success");
+
+        assert.deepEqual(getCounters(), ["1", "1"]);
+    });
+
+    QUnit.test(
+        "progress bar recompute after drag&drop to and from other column",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `<kanban>
+                    <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}'/>
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+                groupBy: ["bar"],
+            });
+
+            assert.deepEqual(getTooltips(), ["1 blip", "1 yop", "1 gnap", "1 blip"]);
+            assert.deepEqual(getCounters(), ["1", "3"]);
+
+            // Drag the last kanban record to the first column
+            await dragAndDrop(
+                ".o_kanban_group:last-child .o_kanban_record:nth-child(4)",
+                ".o_kanban_group:first-child"
+            );
+
+            assert.deepEqual(getTooltips(), ["1 gnap", "1 blip", "1 yop", "1 blip"]);
+            assert.deepEqual(getCounters(), ["2", "2"]);
+        }
+    );
+
+    QUnit.test("load more should load correct records after drag&drop event", async (assert) => {
+        // Add a sequence number and initialize
+        serverData.models.partner.records.forEach((el, i) => (el.sequence = i));
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `<kanban limit="1">
+                <field name="id"/>
+                <field name="foo"/>
+                <field name="sequence"/>
+                <templates><t t-name="kanban-box">
+                    <div>
+                        <field name="id"/>
+                    </div>
+                </t></templates>
+            </kanban>`,
+            groupBy: ["bar"],
+        });
+
+        assert.deepEqual(getCardTexts(0), ["4"], "first column's first record must be id 4");
+        assert.deepEqual(getCardTexts(1), ["1"], "second column's records should be only the id 1");
+
+        // Drag the first kanban record on top of the last
+        await dragAndDrop(
+            ".o_kanban_group:first-child .o_kanban_record",
+            ".o_kanban_group:last-child"
+        );
+
+        // load more twice to load all records of second column
+        await loadMore(1);
+        await loadMore(1);
+
+        // Check records of the second column
+        assert.deepEqual(
+            getCardTexts(1),
+            ["4", "1", "2", "3"],
+            "first column's first record must be id 4"
+        );
+    });
+
+    QUnit.test(
+        "column progressbars on quick create with quick_create_view are updated",
+        async (assert) => {
+            serverData.views[
+                "partner,some_view_ref,form"
+            ] = `<form><field name="int_field"/></form>`;
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create" quick_create_view="some_view_ref">' +
+                    '<field name="int_field"/>' +
+                    '<progressbar field="foo" colors=\'{"yop": "success", "gnap": "warning", "blip": "danger"}\' sum_field="int_field"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    "<div>" +
+                    '<field name="name"/>' +
+                    "</div>" +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["bar"],
+            });
+
+            assert.deepEqual(getCounters(), ["-4", "36"]);
+
+            await createRecord();
+            await editQuickCreateInput("int_field", 44);
+            await validateRecord();
+
+            assert.deepEqual(
+                getCounters(),
+                ["40", "36"],
+                "kanban counters should have been updated on quick create"
+            );
+        }
+    );
+
+    QUnit.test(
+        "column progressbars and active filter on quick create with quick_create_view are updated",
+        async (assert) => {
+            serverData.views["partner,some_view_ref,form"] = `
+                <form>
+                    <field name="int_field"/>
+                    <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="int_field"/>
+                        <field name="foo"/>
+                        <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}' sum_field="int_field"/>
+                        <templates><t t-name="kanban-box">
+                            <div><field name="name"/></div>
+                        </t></templates>
+                    </kanban>
+                `,
+                groupBy: ["bar"],
+            });
+
+            await click(getColumn(0), ".progress-bar.bg-danger");
+
+            assert.containsOnce(getColumn(0), ".o_kanban_record");
+            assert.containsOnce(getColumn(0), ".oe_kanban_card_danger");
+            assert.deepEqual(getCounters(), ["-4", "36"]);
+
+            // open the quick create
+            await createRecord();
+
+            // fill it with a record that satisfies the active filter
+            await editQuickCreateInput("int_field", 44);
+            await editQuickCreateInput("foo", "blip");
+            await validateRecord();
+
+            // fill it again with another record that DOES NOT satisfy the active filter
+            await editQuickCreateInput("int_field", 1000);
+            await editQuickCreateInput("foo", "yop");
+            await validateRecord();
+
+            assert.containsN(getColumn(0), ".o_kanban_record", 3);
+            assert.containsN(getColumn(0), ".oe_kanban_card_danger", 2);
+            assert.containsOnce(getColumn(0), ".oe_kanban_card_success");
+            assert.deepEqual(
+                getCounters(),
+                ["40", "36"],
+                "kanban counters should have been updated on quick create, respecting the active filter"
+            );
+        }
+    );
+
+    QUnit.test(
+        "keep adding quickcreate in first column after a record from this column was moved",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban on_create="quick_create">' +
+                    '<field name="int_field"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates>" +
+                    "</kanban>",
+                groupBy: ["foo"],
+                async mockRPC(route, args) {
+                    if (route === "/web/dataset/resequence") {
+                        return true;
+                    }
+                },
+            });
+            await createRecord();
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create").closest(".o_kanban_group"),
+                target.querySelector(".o_kanban_group"),
+                "quick create should have been added in the first column"
+            );
+            await dragAndDrop(".o_kanban_record", ".o_kanban_group:nth-child(2)");
+            await createRecord();
+            assert.strictEqual(
+                target.querySelector(".o_kanban_quick_create").closest(".o_kanban_group"),
+                target.querySelector(".o_kanban_group"),
+                "quick create should have been added in the first column"
+            );
+        }
+    );
+
+    QUnit.test("test displaying image (URL, image field not set)", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="id"/>' +
+                '<templates><t t-name="kanban-box"><div>' +
+                "<img t-att-src=\"kanban_image('partner', 'image', record.id.raw_value)\"/>" +
+                "</div></t></templates>" +
+                "</kanban>",
+        });
+
+        // since the field image is not set, kanban_image will generate an URL
+        const imageOnRecord = target.querySelectorAll(
+            'img[data-src*="/web/image"][data-src*="&id=1"]'
+        );
+        assert.strictEqual(imageOnRecord.length, 1, "partner with image display image by url");
+    });
+
+    QUnit.test("test displaying image (__last_update field)", async (assert) => {
+        // the presence of __last_update field ensures that the image is reloaded when necessary
+        assert.expect(1);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="id"/>
+                    <templates><t t-name="kanban-box"><div>
+                        <img t-att-src="kanban_image('partner', 'image', record.id.raw_value)"/>
+                    </div></t></templates>
+                </kanban>`,
+            mockRPC(route, { method, kwargs }) {
+                if (method === "web_search_read") {
+                    assert.deepEqual(kwargs.fields, ["id", "__last_update"]);
+                }
+            },
+        });
+    });
+
+    QUnit.test("test displaying image (binary & placeholder)", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="id"/>' +
+                '<field name="image"/>' +
+                '<templates><t t-name="kanban-box"><div>' +
+                "<img t-att-src=\"kanban_image('partner', 'image', record.id.raw_value)\"/>" +
+                "</div></t></templates>" +
+                "</kanban>",
+        });
+        const images = target.querySelectorAll("img");
+        const placeholders = [];
+        for (const [index, img] of images.entries()) {
+            if (img.dataset.src.indexOf(serverData.models.partner.records[index].image) === -1) {
+                // Then we display a placeholder
+                placeholders.push(img);
+            }
+        }
+
+        assert.strictEqual(
+            placeholders.length,
+            serverData.models.partner.records.length - 1,
+            "partner with no image should display the placeholder"
+        );
+        assert.strictEqual(
+            images[0].dataset.src,
+            "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==",
+            "The first partners non-placeholder image should be set"
+        );
+    });
+
+    QUnit.test("test displaying image (for another record)", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="id"/>' +
+                '<field name="image"/>' +
+                '<templates><t t-name="kanban-box"><div>' +
+                "<img t-att-src=\"kanban_image('partner', 'image', 1)\"/>" +
+                "</div></t></templates>" +
+                "</kanban>",
+        });
+
+        // the field image is set, but we request the image for a specific id
+        // -> for the record matching the ID, the base64 should be returned
+        // -> for all the other records, the image should be displayed by url
+        const imageOnRecord = target.querySelectorAll(
+            'img[data-src*="/web/image"][data-src*="&id=1"]'
+        );
+        assert.strictEqual(
+            imageOnRecord.length,
+            serverData.models.partner.records.length - 1,
+            "display image by url when requested for another record"
+        );
+        assert.strictEqual(
+            target.querySelector("img").dataset.src,
+            "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACAA==",
+            "display image as value when requested for the record itself"
+        );
+    });
+
+    QUnit.test("test displaying image from m2o field (m2o field not set)", async (assert) => {
+        serverData.models.foo_partner = {
+            fields: {
+                name: { string: "Foo Name", type: "char" },
+                partner_id: { string: "Partner", type: "many2one", relation: "partner" },
+            },
+            records: [
+                { id: 1, name: "foo_with_partner_image", partner_id: 1 },
+                { id: 2, name: "foo_no_partner" },
+            ],
+        };
+
+        await makeView({
+            type: "kanban",
+            resModel: "foo_partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="name"/>
+                            <field name="partner_id"/>
+                            <img t-att-src="kanban_image('partner', 'image', record.partner_id.raw_value)"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+        });
+        assert.containsOnce(
+            target,
+            'img[data-src*="/web/image"][data-src$="&id=1"]',
+            "image url should contain id of set partner_id"
+        );
+        assert.containsOnce(
+            target,
+            'img[data-src*="/web/image"][data-src$="&id="]',
+            "image url should contain an empty id if partner_id is not set"
+        );
+    });
+
+    QUnit.test(
+        "grouped kanban becomes ungrouped when clearing domain then clearing groupby",
+        async (assert) => {
+            // in this test, we simulate that clearing the domain is slow, so that
+            // clearing the groupby does not corrupt the data handled while
+            // reloading the kanban view.
+            const prom = makeDeferred();
+
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                domain: [["foo", "=", "norecord"]],
+                groupBy: ["bar"],
+                async mockRPC(route, args, performRpc) {
+                    if (args.method === "web_read_group") {
+                        const result = performRpc(route, args);
+                        const isFirstUpdate =
+                            args.kwargs.domain.length === 0 &&
+                            args.kwargs.groupby &&
+                            args.kwargs.groupby[0] === "bar";
+                        if (isFirstUpdate) {
+                            await prom;
+                        }
+                        return result;
+                    }
+                },
+            });
+
+            assert.hasClass(
+                target.querySelector(".o_kanban_renderer"),
+                "o_kanban_grouped",
+                "the kanban view should be grouped"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_kanban_renderer"),
+                "o_kanban_ungrouped",
+                "the kanban view should not be ungrouped"
+            );
+
+            reload(kanban, { domain: [] }); // 1st update on kanban view
+            reload(kanban, { groupBy: [] }); // 2nd update on kanban view
+            prom.resolve(); // simulate slow 1st update of kanban view
+
+            await nextTick();
+            assert.doesNotHaveClass(
+                target.querySelector(".o_kanban_renderer"),
+                "o_kanban_grouped",
+                "the kanban view should not longer be grouped"
+            );
+            assert.hasClass(
+                target.querySelector(".o_kanban_renderer"),
+                "o_kanban_ungrouped",
+                "the kanban view should have become ungrouped"
+            );
+        }
+    );
+
+    QUnit.test("quick_create on grouped kanban without column", async (assert) => {
+        serverData.models.partner.records = [];
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            // force group_create to false, otherwise the CREATE button in control panel is hidden
+            arch:
+                '<kanban group_create="0" on_create="quick_create"><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="name"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+            groupBy: ["product_id"],
+            createRecord: () => {
+                assert.step("createRecord");
+            },
+        });
+
+        await createRecord();
+        assert.verifySteps(["createRecord"]);
+    });
+
+    QUnit.test("keyboard navigation on kanban basic rendering", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<t t-esc="record.foo.value"/>' +
+                '<field name="foo"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+        });
+
+        getCard(0).focus();
+        assert.strictEqual(document.activeElement, getCard(0), "the kanban cards are focussable");
+
+        triggerHotkey("ArrowRight");
+
+        assert.strictEqual(
+            document.activeElement,
+            getCard(1),
+            "the second card should be focussed"
+        );
+
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(document.activeElement, getCard(0), "the first card should be focussed");
+    });
+
+    QUnit.test("keyboard navigation on kanban grouped rendering", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="bar"/>' +
+                '<templates><t t-name="kanban-box">' +
+                '<div><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["bar"],
+        });
+        const cardsByColumn = [...target.querySelectorAll(".o_kanban_group")].map((c) => [
+            ...c.querySelectorAll(".o_kanban_record"),
+        ]);
+        const firstColumnFirstCard = cardsByColumn[0][0];
+        const secondColumnFirstCard = cardsByColumn[1][0];
+        const secondColumnSecondCard = cardsByColumn[1][1];
+
+        firstColumnFirstCard.focus();
+
+        // RIGHT should select the next column
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            secondColumnFirstCard,
+            "RIGHT should select the first card of the next column"
+        );
+
+        // DOWN should move up one card
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            secondColumnSecondCard,
+            "DOWN should select the second card of the current column"
+        );
+
+        // LEFT should go back to the first column
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            firstColumnFirstCard,
+            "LEFT should select the first card of the first column"
+        );
+    });
+
+    QUnit.test(
+        "keyboard navigation on kanban grouped rendering with empty columns",
+        async (assert) => {
+            serverData.models.partner.records[1].state = "abc";
+
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    "<kanban>" +
+                    '<field name="bar"/>' +
+                    '<templates><t t-name="kanban-box">' +
+                    '<div><field name="foo"/></div>' +
+                    "</t></templates></kanban>",
+                groupBy: ["state"],
+                async mockRPC(route, args, performRpc) {
+                    if (args.method === "web_read_group") {
+                        // override read_group to return empty groups, as this is
+                        // the case for several models (e.g. project.task grouped
+                        // by stage_id)
+                        const result = await performRpc(route, args);
+                        // add 2 empty columns in the middle
+                        result.groups.splice(1, 0, {
+                            state_count: 0,
+                            state: "md1",
+                            __domain: [["state", "=", "md1"]],
+                        });
+                        result.groups.splice(1, 0, {
+                            state_count: 0,
+                            state: "md2",
+                            __domain: [["state", "=", "md2"]],
+                        });
+                        // add 1 empty column in the beginning and the end
+                        result.groups.unshift({
+                            state_count: 0,
+                            state: "beg",
+                            __domain: [["state", "=", "beg"]],
+                        });
+                        result.groups.push({
+                            state_count: 0,
+                            state: "end",
+                            __domain: [["state", "=", "end"]],
+                        });
+                        return result;
+                    }
+                },
+            });
+
+            /**
+             * Added columns in mockRPC are empty
+             *
+             *    | BEG | ABC  | MD1 | MD2 | GHI  | END
+             *    |-----|------|-----|-----|------|-----
+             *    |     | yop  |     |     | gnap |
+             *    |     | blip |     |     | blip |
+             */
+            const cardsByColumn = [...target.querySelectorAll(".o_kanban_group")].map((c) => [
+                ...c.querySelectorAll(".o_kanban_record"),
+            ]);
+            const yop = cardsByColumn[1][0];
+            const gnap = cardsByColumn[4][0];
+
+            yop.focus();
+
+            // RIGHT should select the next column that has a card
+            triggerHotkey("ArrowRight");
+            await nextTick();
+            assert.strictEqual(
+                document.activeElement,
+                gnap,
+                "RIGHT should select the first card of the next column that has a card"
+            );
+
+            // LEFT should go back to the first column that has a card
+            triggerHotkey("ArrowLeft");
+            await nextTick();
+            assert.strictEqual(
+                document.activeElement,
+                yop,
+                "LEFT should select the first card of the first column that has a card"
+            );
+        }
+    );
+
+    QUnit.test(
+        "keyboard navigation on kanban when the focus is on a link that " +
+            "has an action and the kanban has no oe_kanban_global_... class",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch:
+                    '<kanban><templates><t t-name="kanban-box">' +
+                    '<div><a type="edit">Edit</a></div>' +
+                    "</t></templates></kanban>",
+                selectRecord: (resId) => {
+                    assert.equal(
+                        resId,
+                        1,
+                        "When selecting focusing a card and hitting ENTER, the first link or button is clicked"
+                    );
+                },
+            });
+            const firstCard = getCard(0);
+            firstCard.focus();
+            await triggerEvent(firstCard, null, "keydown", { key: "Enter" });
+        }
+    );
+
+    QUnit.test("asynchronous rendering of a field widget (ungrouped)", async (assert) => {
+        let fooFieldDef = makeDeferred();
+        legacyFieldRegistry.add(
+            "asyncwidget",
+            AbstractField.extend({
+                async willStart() {
+                    await Promise.all([this._super(...arguments), fooFieldDef]);
+                },
+                async start() {
+                    this.el.innerText = "LOADED";
+                    return this._super(...arguments);
+                },
+            })
+        );
+
+        const makeViewProm = makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><field name="foo" widget="asyncwidget"/></div>' +
+                "</t></templates></kanban>",
+        });
+        await nextTick();
+
+        assert.containsNone(target, ".o_kanban_record", "kanban view is not ready yet");
+
+        fooFieldDef.resolve();
+        const kanban = await makeViewProm;
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+
+        // reload with a domain
+        fooFieldDef = makeDeferred();
+        await reload(kanban, { domain: [["id", "=", 1]] });
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+
+        fooFieldDef.resolve();
+        await nextTick();
+
+        assert.deepEqual(getCardTexts(), ["LOADED"]);
+    });
+
+    QUnit.test("asynchronous rendering of a field widget (grouped)", async (assert) => {
+        let fooFieldDef = makeDeferred();
+        legacyFieldRegistry.add(
+            "asyncwidget",
+            AbstractField.extend({
+                async willStart() {
+                    await Promise.all([this._super(...arguments), fooFieldDef]);
+                },
+                async start() {
+                    this.el.innerText = "LOADED";
+                    return this._super(...arguments);
+                },
+            })
+        );
+
+        const makeViewProm = makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><field name="foo" widget="asyncwidget"/></div>' +
+                "</t></templates></kanban>",
+            groupBy: ["foo"],
+        });
+        await nextTick();
+
+        assert.containsNone(target, ".o_kanban_record", "kanban view is not ready yet");
+
+        fooFieldDef.resolve();
+        const kanban = await makeViewProm;
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+
+        // reload with a domain
+        fooFieldDef = makeDeferred();
+        await reload(kanban, { domain: [["id", "=", 1]] });
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+
+        fooFieldDef.resolve();
+        await nextTick();
+
+        assert.deepEqual(getCardTexts(), ["LOADED"]);
+    });
+
+    QUnit.test("asynchronous rendering of a field widget with display attr", async (assert) => {
+        const fooFieldDef = makeDeferred();
+        const CharField = legacyFieldRegistry.get("char");
+        legacyFieldRegistry.add(
+            "asyncwidget",
+            CharField.extend({
+                async willStart() {
+                    await Promise.all([this._super(...arguments), fooFieldDef]);
+                },
+                async start() {
+                    this.el.innerText = "LOADED";
+                },
+            })
+        );
+
+        const makeViewProm = makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><field name="foo" display="right" widget="asyncwidget"/></div>' +
+                "</t></templates></kanban>",
+        });
+        await nextTick();
+
+        assert.containsNone(target, ".o_kanban_record", "kanban view is not ready yet");
+
+        fooFieldDef.resolve();
+        await makeViewProm;
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+        assert.hasClass(getCard(0).querySelector(".o_field_asyncwidget"), "float-right");
+    });
+
+    QUnit.test("asynchronous rendering of a widget", async (assert) => {
+        const widgetDef = makeDeferred();
+        widgetRegistry.add(
+            "asyncwidget",
+            Widget.extend({
+                async willStart() {
+                    await Promise.all([this._super(...arguments), widgetDef]);
+                },
+                async start() {
+                    this.el.innerText = "LOADED";
+                    return this._super(...arguments);
+                },
+            })
+        );
+
+        const makeViewProm = makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><widget name="asyncwidget"/></div>' +
+                "</t></templates></kanban>",
+        });
+        await nextTick();
+
+        assert.containsNone(target, ".o_kanban_record", "kanban view is not ready yet");
+
+        widgetDef.resolve();
+        await makeViewProm;
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+    });
+
+    QUnit.test("update kanban with asynchronous field widget", async (assert) => {
+        const fooFieldDef = makeDeferred();
+        legacyFieldRegistry.add(
+            "asyncwidget",
+            AbstractField.extend({
+                async willStart() {
+                    await Promise.all([this._super(...arguments), fooFieldDef]);
+                },
+                async start() {
+                    this.el.innerText = "LOADED";
+                    return this._super(...arguments);
+                },
+            })
+        );
+
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div><field name="foo" widget="asyncwidget"/></div>' +
+                "</t></templates></kanban>",
+            domain: [["id", "=", "0"]], // no record matches this domain
+        });
+
+        assert.containsNone(target, ".o_kanban_record:not(.o_kanban_ghost)");
+
+        reload(kanban, { domain: [] }); // this rendering will be async
+
+        assert.containsNone(target, ".o_kanban_record:not(.o_kanban_ghost)");
+
+        fooFieldDef.resolve();
+        await nextTick();
+
+        assert.deepEqual(getCardTexts(), ["LOADED", "LOADED", "LOADED", "LOADED"]);
+    });
+
+    QUnit.test("set cover image", async (assert) => {
+        assert.expect(7);
+
+        serviceRegistry.add("dialog", dialogService, { force: true });
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                "<templates>" +
+                '<t t-name="kanban-box">' +
+                '<div class="oe_kanban_global_click">' +
+                '<field name="name"/>' +
+                '<div class="o_dropdown_kanban dropdown">' +
+                '<a class="dropdown-toggle o-no-caret btn" data-toggle="dropdown" href="#">' +
+                '<span class="fa fa-bars fa-lg"/>' +
+                "</a>" +
+                '<div class="dropdown-menu" role="menu">' +
+                '<a type="set_cover" data-field="displayed_image_id" class="dropdown-item">Set Cover Image</a>' +
+                "</div>" +
+                "</div>" +
+                "<div>" +
+                '<field name="displayed_image_id" widget="attachment_image"/>' +
+                "</div>" +
+                "</div>" +
+                "</t>" +
+                "</templates>" +
+                "</kanban>",
+            async mockRPC(_route, { model, method, args }) {
+                if (model === "partner" && method === "write") {
+                    assert.step(String(args[0][0]));
+                }
+            },
+        });
+
+        patchWithCleanup(kanban.env.services.action, {
+            switchView(_viewType, { mode, resModel, res_id, view_type }) {
+                assert.deepEqual(
+                    { mode, resModel, res_id, view_type },
+                    {
+                        mode: "readonly",
+                        resModel: "partner",
+                        res_id: 1,
+                        view_type: "form",
+                    },
+                    "should trigger an event to open the clicked record in a form view"
+                );
+            },
+        });
+
+        await toggleRecordDropdown(0);
+        await click(getCard(0), ".oe_kanban_action");
+
+        assert.containsNone(getCard(0), "img", "Initially there is no image.");
+
+        await click(document.body, ".modal img[data-id='1']", true);
+        await click(document.body.querySelector(".modal .btn-primary"));
+
+        assert.containsOnce(target, 'img[data-src*="/web/image/1"]');
+
+        await toggleRecordDropdown(1);
+        const coverButton = getCard(1).querySelector("a");
+        assert.strictEqual(coverButton.innerText.trim(), "Set Cover Image");
+        await click(coverButton);
+        await triggerEvent(
+            document.body,
+            ".modal img[data-id='2']",
+            "dblclick",
+            {},
+            { skipVisibilityCheck: true }
+        );
+
+        assert.containsOnce(target, 'img[data-src*="/web/image/2"]');
+
+        await click(target, ".o_kanban_record:first-child .o_attachment_image");
+
+        assert.verifySteps(["1", "2"], "should writes on both kanban records");
+    });
+
+    QUnit.test("ungrouped kanban with handle field", async (assert) => {
+        assert.expect(3);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<field name="int_field" widget="handle" />' +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="foo"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+            async mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    assert.deepEqual(
+                        args.ids,
+                        [2, 3, 4, 1],
+                        "should write the sequence in correct order"
+                    );
+                }
+            },
+        });
+
+        assert.deepEqual(getCardTexts(), ["yop", "blip", "gnap", "blip"]);
+
+        await dragAndDrop(".o_kanban_record", ".o_kanban_record:nth-child(4)");
+
+        assert.deepEqual(getCardTexts(), ["blip", "gnap", "blip", "yop"]);
+    });
+
+    QUnit.test("ungrouped kanban without handle field", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                "<div>" +
+                '<field name="foo"/>' +
+                "</div>" +
+                "</t></templates></kanban>",
+            async mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    throw new Error("should not trigger a resequencing");
+                }
+            },
+        });
+
+        assert.deepEqual(getCardTexts(), ["yop", "blip", "gnap", "blip"]);
+
+        await dragAndDrop(".o_kanban_record", ".o_kanban_record:nth-child(4)");
+
+        assert.deepEqual(getCardTexts(), ["yop", "blip", "gnap", "blip"]);
+    });
+
+    QUnit.test("click on image field in kanban with oe_kanban_global_click", async (assert) => {
+        assert.expect(2);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch:
+                "<kanban>" +
+                '<templates><t t-name="kanban-box">' +
+                '<div class="oe_kanban_global_click">' +
+                '<field name="image" widget="image"/>' +
+                "</div>" +
+                "</t></templates>" +
+                "</kanban>",
+            selectRecord(recordId) {
+                assert.equal(
+                    recordId,
+                    1,
+                    "should call its selectRecord prop with the clicked record"
+                );
+            },
+        });
+
+        assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+        await click(target.querySelector(".o_field_image"));
+    });
+
+    QUnit.test("kanban view with boolean field", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="bar"/></div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.containsN(target, ".o_kanban_record:contains(True)", 3);
+        assert.containsOnce(target, ".o_kanban_record:contains(False)");
+    });
+
+    QUnit.test("kanban view with boolean widget", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div><field name="bar" widget="boolean"/></div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+        });
+
+        assert.containsOnce(getCard(0), "div.o_field_boolean .custom-checkbox");
+    });
+
+    QUnit.test("kanban view with monetary and currency fields without widget", async (assert) => {
+        const currencies = {};
+        for (const record of serverData.models.currency.records) {
+            currencies[record.id] = record;
+        }
+        patchWithCleanup(session, { currencies });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="currency_id"/>
+                    <templates><t t-name="kanban-box">
+                        <div><field name="salary"/></div>
+                    </t></templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(getCardTexts(), [
+            `$${nbsp}1750.00`,
+            `$${nbsp}1500.00`,
+            `2000.00${nbsp}€`,
+            `$${nbsp}2222.00`,
+        ]);
+    });
+
+    QUnit.test("quick create: keyboard navigation to buttons", async (assert) => {
+        await makeView({
+            arch: `
+                <kanban on_create="quick_create">
+                    <field name="bar"/>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="display_name"/>
+                        </div>
+                    </templates>
+                </kanban>`,
+            serverData,
+            groupBy: ["bar"],
+            resModel: "partner",
+            type: "kanban",
+        });
+
+        // Open quick create
+        await createRecord();
+
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_quick_create");
+
+        // Fill in mandatory field
+        await editQuickCreateInput("display_name", "aaa");
+
+        // Tab -> goes to first primary button
+        const nameInput = target.querySelector(".o_field_widget[name=display_name] input");
+        nameInput.focus();
+
+        const addButton = target.querySelector(".o_kanban_add");
+        const event = triggerEvent(nameInput, null, "keydown", { key: "Tab" }, { fast: true });
+        assert.strictEqual(getNextTabableElement(target), addButton);
+        assert.ok(!event.defaultPrevented);
+        addButton.focus();
+        await nextTick();
+        assert.hasClass(document.activeElement, "btn btn-primary o_kanban_add");
+    });
+
+    QUnit.test("kanban with isHtmlEmpty method", async (assert) => {
+        serverData.models.product.fields.description = { string: "Description", type: "html" };
+        serverData.models.product.records.push(
+            {
+                id: 11,
+                display_name: "product 11",
+                description: "<span class='text-info'>hello</hello>",
+            },
+            {
+                id: 12,
+                display_name: "product 12",
+                description: "<p class='a'><span style='color:red;'/><br/></p>",
+            }
+        );
+
+        await makeView({
+            type: "kanban",
+            resModel: "product",
+            serverData,
+            arch: `<kanban>
+                        <field name="description"/>
+                        <templates><t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="display_name"/>
+                                <div class="test" t-if="!widget.isHtmlEmpty(record.description.raw_value)">
+                                    <t t-out="record.description.value"/>
+                                </div>
+                            </div>
+                        </t></templates>
+                    </kanban>`,
+            domain: [["id", "in", [11, 12]]],
+        });
+        assert.containsOnce(
+            target,
+            ".o_kanban_record:first-child div.test",
+            "the container is displayed if description have actual content"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(".o_kanban_record:first-child div.test span.text-info")
+                .innerText.trim(),
+            "hello",
+            "the inner html content is rendered properly"
+        );
+        assert.containsNone(
+            target,
+            ".o_kanban_record:last-child div.test",
+            "the container is not displayed if description just have formatting tags and no actual content"
+        );
+    });
+
+    QUnit.test(
+        "progressbar filter state is kept unchanged when domain is updated (records still in group)",
+        async (assert) => {
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <kanban default_group_by="bar">
+                    <progressbar field="foo" colors='{"yop": "success", "blip": "danger"}'/>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="id"/>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+            });
+
+            // Check that we have 2 columns and check their progressbar's state
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+
+            // Apply an active filter
+            await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
+
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.strictEqual(
+                target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
+                    .innerText,
+                "Yes"
+            );
+
+            // Add searchdomain to something restricting progressbars' values (records still in filtered group)
+            await reload(kanban, { domain: [["foo", "=", "yop"]] });
+
+            // Check that we have now 1 column only and check its progressbar's state
+            assert.containsOnce(target, ".o_kanban_group");
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.strictEqual(target.querySelector(".o_column_title").innerText, "Yes");
+            assert.deepEqual(getTooltips(), ["1 yop"]);
+
+            // Undo searchdomain
+            await reload(kanban, { domain: [] });
+
+            // Check that we have 2 columns back and check their progressbar's state
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+        }
+    );
+
+    QUnit.test(
+        "progressbar filter state is kept unchanged when domain is updated (emptying group)",
+        async (assert) => {
+            const kanban = await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <kanban default_group_by="bar">
+                        <progressbar field="foo" colors='{"yop": "success", "blip": "danger"}'/>
+                        <field name="foo"/>
+                        <field name="bar"/>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="id"/>
+                                    <field name="foo"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>`,
+            });
+
+            // Check that we have 2 columns, check their progressbar's state and check records
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getCardTexts(0), ["4blip"]);
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+            assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
+
+            // Apply an active filter
+            await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.strictEqual(
+                target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
+                    .innerText,
+                "Yes"
+            );
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+            assert.deepEqual(getCardTexts(1), ["1yop"]);
+
+            // Add searchdomain to something restricting progressbars' values + emptying the filtered group
+            await reload(kanban, { domain: [["foo", "=", "blip"]] });
+
+            // Check that we still have 2 columns, check their progressbar's state and check records
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getCardTexts(0), ["4blip"]);
+            assert.deepEqual(getTooltips(1), ["1 blip"]);
+            assert.deepEqual(getCardTexts(1), ["2blip"]);
+
+            // Undo searchdomain
+            await reload(kanban, { domain: [] });
+
+            // Check that we still have 2 columns and check their progressbar's state
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getCardTexts(0), ["4blip"]);
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+            assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
+        }
+    );
+
+    QUnit.test(
+        "filtered column keeps consistent counters when dropping in a non-matching record",
+        async (assert) => {
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <kanban default_group_by="bar">
+                    <progressbar field="foo" colors='{"yop": "success", "blip": "danger"}'/>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="id"/>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+            });
+
+            // Check that we have 2 columns, check their progressbar's state, and check records
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), ["1 blip"]);
+            assert.deepEqual(getCardTexts(0), ["4blip"]);
+            assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+            assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
+
+            // Apply an active filter
+            await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
+
+            assert.hasClass(
+                target.querySelector(".o_kanban_group:nth-child(2)"),
+                "o_kanban_group_show"
+            );
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.strictEqual(
+                target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title")
+                    .innerText,
+                "Yes"
+            );
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show .o_kanban_record");
+            assert.deepEqual(getCardTexts(1), ["1yop"]);
+
+            // Drop in the non-matching record from first column
+            await dragAndDrop(
+                ".o_kanban_group:first-child .o_kanban_record",
+                ".o_kanban_group.o_kanban_group_show"
+            );
+
+            // Check that we have 2 columns, check their progressbar's state, and check records
+            assert.containsN(target, ".o_kanban_group", 2);
+            assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+                ["No", "Yes"]
+            );
+            assert.deepEqual(getTooltips(0), []);
+            assert.deepEqual(getCardTexts(0), []);
+            assert.deepEqual(getTooltips(1), ["1 yop", "2 blip", "1 Other"]);
+            assert.deepEqual(getCardTexts(1), ["1yop", "4blip"]);
+        }
+    );
+
+    QUnit.test("filtered column is reloaded when dragging out its last record", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <kanban default_group_by="bar">
+                        <progressbar field="foo" colors='{"yop": "success", "blip": "danger"}'/>
+                        <field name="foo"/>
+                        <field name="bar"/>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="id"/>
+                                    <field name="foo"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>`,
+            async mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        // Check that we have 2 columns, check their progressbar's state, and check records
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+            ["No", "Yes"]
+        );
+        assert.deepEqual(getTooltips(0), ["1 blip"]);
+        assert.deepEqual(getCardTexts(0), ["4blip"]);
+        assert.deepEqual(getTooltips(1), ["1 yop", "1 blip", "1 Other"]);
+        assert.deepEqual(getCardTexts(1), ["1yop", "2blip", "3gnap"]);
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "read_progress_bar",
+            "web_search_read",
+            "web_search_read",
+        ]);
+
+        // Apply an active filter
+        await click(target, ".o_kanban_group:nth-child(2) .progress-bar.bg-success");
+
+        assert.hasClass(
+            target.querySelector(".o_kanban_group:nth-child(2)"),
+            "o_kanban_group_show"
+        );
+        assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_group.o_kanban_group_show .o_column_title").innerText,
+            "Yes"
+        );
+        assert.containsOnce(target, ".o_kanban_group.o_kanban_group_show .o_kanban_record");
+        assert.deepEqual(getCardTexts(1), ["1yop"]);
+        assert.verifySteps(["web_search_read"]);
+
+        // Drag out its only record onto the first column
+        await dragAndDrop(
+            ".o_kanban_group.o_kanban_group_show .o_kanban_record",
+            ".o_kanban_group:first-child"
+        );
+
+        // Check that we have 2 columns, check their progressbar's state, and check records
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsNone(target, ".o_kanban_group.o_kanban_group_show");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_column_title")].map((el) => el.innerText),
+            ["No", "Yes"]
+        );
+        assert.deepEqual(getTooltips(0), ["1 yop", "1 blip"]);
+        assert.deepEqual(getCardTexts(0), ["4blip", "1yop"]);
+        assert.deepEqual(getTooltips(1), ["1 blip", "1 Other"]);
+        assert.deepEqual(getCardTexts(1), ["2blip", "3gnap"]);
+        assert.verifySteps([
+            "write",
+            "read_progress_bar",
+            "read", // read happens is delayed by the ORM batcher
+            "web_search_read",
+            "/web/dataset/resequence",
+            "read",
+        ]);
+    });
+
+    QUnit.test("kanban widget supports options parameters", async (assert) => {
+        widgetRegistry.add(
+            "widget_test_option",
+            Widget.extend({
+                init(_parent, _state, options) {
+                    this._super(...arguments);
+                    this.title = options.attrs.title;
+                },
+                async start() {
+                    this.$el.append(
+                        $("<div>", { text: this.title, class: "o-test-widget-option" })
+                    );
+                    return this._super(...arguments);
+                },
+            })
+        );
+
+        await makeView({
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <widget name="widget_test_option" title="Widget with Option"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            serverData,
+            resModel: "partner",
+            type: "kanban",
+        });
+
+        assert.containsN(target, ".o-test-widget-option", 4);
+        assert.strictEqual(
+            target.querySelector(".o-test-widget-option").textContent,
+            "Widget with Option"
+        );
+    });
+
+    QUnit.test("action/type attributes on kanban arch, type='object'", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban action="a1" type="object">
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <p>some value</p><field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        patchWithCleanup(kanban.env.services.action, {
+            doActionButton(params) {
+                assert.step(`doActionButton type ${params.type} name ${params.name}`);
+                params.onClose();
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+        await click(target.querySelector(".o_kanban_record p"));
+        assert.verifySteps(["doActionButton type object name a1", "web_search_read"]);
+    });
+
+    QUnit.test("action/type attributes on kanban arch, type='action'", async (assert) => {
+        const kanban = await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban action="a1" type="action">
+                    <templates><t t-name="kanban-box">
+                        <div>
+                            <p>some value</p><field name="foo"/>
+                        </div>
+                    </t></templates>
+                </kanban>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        patchWithCleanup(kanban.env.services.action, {
+            doActionButton(params) {
+                assert.step(`doActionButton type ${params.type} name ${params.name}`);
+                params.onClose();
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+        await click(target.querySelector(".o_kanban_record p"));
+        assert.verifySteps(["doActionButton type action name a1", "web_search_read"]);
+    });
+
+    QUnit.test("Missing t-key is automatically filled with a warning", async (assert) => {
+        patchWithCleanup(console, { warn: () => assert.step("warning") });
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <span t-foreach="[1, 2, 3]" t-as="i" t-esc="i" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.verifySteps(["warning"]);
+        assert.strictEqual(getCard(0).innerText, "123");
+    });
+
+    QUnit.test("Quick created record is rendered after load", async (assert) => {
+        let def;
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban on_create="quick_create">
+                    <field name="category_ids" />
+                    <progressbar field="foo" colors='{"yop": "success", "gnap": "warning", "blip": "danger"}' sum_field="int_field"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <span t-esc="record.category_ids.raw_value.length" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["product_id"],
+            async mockRPC(_route, { method }) {
+                if (method === "read") {
+                    await def;
+                }
+                if (["name_create", "read"].includes(method)) {
+                    assert.step(method);
+                }
+            },
+        });
+
+        assert.deepEqual(getCardTexts(0), ["0", "1"]);
+        assert.verifySteps(["read"]);
+
+        def = makeDeferred();
+
+        await quickCreateRecord(0);
+        await editQuickCreateInput("display_name", "Test");
+        await validateRecord();
+
+        def.resolve();
+        await nextTick();
+
+        assert.deepEqual(getCardTexts(0), ["0", "1", "0"]);
+        assert.verifySteps(["name_create", "read"]);
+    });
+
+    QUnit.test("Allow use of 'editable'/'deletable' in ungrouped kanban", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban on_create="quick_create">
+                    <templates>
+                        <div t-name="kanban-box">
+                            <button t-if="widget.editable">EDIT</button>
+                            <button t-if="widget.deletable">DELETE</button>
+                        </div>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(getCardTexts(), ["EDITDELETE", "EDITDELETE", "EDITDELETE", "EDITDELETE"]);
+    });
+
+    QUnit.test("folded groups are kept when leaving and coming back", async (assert) => {
+        serverData.views = {
+            "partner,false,kanban": `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="int_field"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            "partner,false,search": "<search/>",
+            "partner,false,form": "<form/>",
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, {
+            name: "Partners",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "kanban"],
+                [false, "form"],
+            ],
+            context: {
+                group_by: ["product_id"],
+            },
+        });
+
+        assert.containsOnce(target, ".o_kanban_view");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsNone(target, ".o_column_folded");
+        assert.containsN(target, ".o_kanban_record", 4);
+
+        // fold the first group
+        const clickColumnAction = await toggleColumnActions(0);
+        await clickColumnAction("Fold");
+        assert.containsOnce(target, ".o_column_folded");
+        assert.containsN(target, ".o_kanban_record", 2);
+
+        // open a record and go back
+        await click(target.querySelector(".o_kanban_record"));
+        assert.containsOnce(target, ".o_form_view");
+        await click(target.querySelector(".breadcrumb-item a"));
+
+        assert.containsOnce(target, ".o_column_folded");
+        assert.containsN(target, ".o_kanban_record", 2);
+    });
+
+    QUnit.test("loaded records are kept when leaving and coming back", async (assert) => {
+        serverData.views = {
+            "partner,false,kanban": `
+                <kanban limit="1">
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div class="oe_kanban_global_click">
+                                <field name="int_field"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            "partner,false,search": "<search/>",
+            "partner,false,form": "<form/>",
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, {
+            name: "Partners",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "kanban"],
+                [false, "form"],
+            ],
+            context: {
+                group_by: ["product_id"],
+            },
+        });
+
+        assert.containsOnce(target, ".o_kanban_view");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(target, ".o_kanban_record", 2);
+
+        // load more records in second group
+        await loadMore(1);
+        assert.containsN(target, ".o_kanban_record", 3);
+
+        // open a record and go back
+        await click(target.querySelector(".o_kanban_record"));
+        assert.containsOnce(target, ".o_form_view");
+        await click(target.querySelector(".breadcrumb-item a"));
+
+        assert.containsN(target, ".o_kanban_record", 3);
+    });
+});
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
new file mode 100644
index 00000000000..811a5915d4d
--- /dev/null
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -0,0 +1,13922 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { Domain } from "@web/core/domain";
+import { localization } from "@web/core/l10n/localization";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
+import { session } from "@web/session";
+import { ListController } from "@web/views/list/list_controller";
+import { tooltipService } from "@web/core/tooltip/tooltip_service";
+import { actionService } from "@web/webclient/actions/action_service";
+import { makeFakeLocalizationService, makeFakeUserService } from "../helpers/mock_services";
+import {
+    addRow,
+    click,
+    clickDiscard,
+    clickEdit,
+    clickOpenedDropdownItem,
+    clickOpenM2ODropdown,
+    clickSave,
+    dragAndDrop,
+    editInput,
+    editSelect,
+    getFixture,
+    getNodesTextContent,
+    legacyExtraNextTick,
+    makeDeferred,
+    mouseEnter,
+    nextTick,
+    patchDate,
+    patchTimeZone,
+    patchWithCleanup,
+    selectDropdownItem,
+    triggerEvent,
+    triggerEvents,
+    triggerHotkey,
+} from "../helpers/utils";
+import {
+    getButtons,
+    getFacetTexts,
+    getPagerLimit,
+    getPagerValue,
+    groupByMenu,
+    pagerNext,
+    pagerPrevious,
+    toggleActionMenu,
+    toggleFavoriteMenu,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenuItem,
+    validateSearch,
+} from "../search/helpers";
+import { createWebClient, doAction, loadState } from "../webclient/helpers";
+import { makeView, setupViewRegistries } from "./helpers";
+import { getNextTabableElement } from "@web/core/utils/ui";
+import { TextField } from "@web/views/fields/text/text_field";
+import { registerCleanup } from "../helpers/cleanup";
+
+const { onWillStart } = owl;
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+let target;
+
+async function reloadListView(target) {
+    await validateSearch(target);
+}
+
+function getDataRow(position) {
+    return target.querySelectorAll(".o_data_row")[position - 1];
+}
+
+function getGroup(position) {
+    return target.querySelectorAll(".o_group_header")[position - 1];
+}
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        date: { string: "Some Date", type: "date" },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            group_operator: "sum",
+                        },
+                        text: { string: "text field", type: "text" },
+                        qux: { string: "my float", type: "float" },
+                        m2o: { string: "M2O field", type: "many2one", relation: "bar" },
+                        o2m: { string: "O2M field", type: "one2many", relation: "bar" },
+                        m2m: { string: "M2M field", type: "many2many", relation: "bar" },
+                        amount: { string: "Monetary field", type: "monetary" },
+                        currency_id: {
+                            string: "Currency",
+                            type: "many2one",
+                            relation: "res_currency",
+                            default: 1,
+                        },
+                        datetime: { string: "Datetime Field", type: "datetime" },
+                        reference: {
+                            string: "Reference Field",
+                            type: "reference",
+                            selection: [
+                                ["bar", "Bar"],
+                                ["res_currency", "Currency"],
+                                ["event", "Event"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            bar: true,
+                            foo: "yop",
+                            int_field: 10,
+                            qux: 0.4,
+                            m2o: 1,
+                            m2m: [1, 2],
+                            amount: 1200,
+                            currency_id: 2,
+                            date: "2017-01-25",
+                            datetime: "2016-12-12 10:55:05",
+                            reference: "bar,1",
+                        },
+                        {
+                            id: 2,
+                            bar: true,
+                            foo: "blip",
+                            int_field: 9,
+                            qux: 13,
+                            m2o: 2,
+                            m2m: [1, 2, 3],
+                            amount: 500,
+                            reference: "res_currency,1",
+                        },
+                        {
+                            id: 3,
+                            bar: true,
+                            foo: "gnap",
+                            int_field: 17,
+                            qux: -3,
+                            m2o: 1,
+                            m2m: [],
+                            amount: 300,
+                            reference: "res_currency,2",
+                        },
+                        {
+                            id: 4,
+                            bar: false,
+                            foo: "blip",
+                            int_field: -4,
+                            qux: 9,
+                            m2o: 1,
+                            m2m: [1],
+                            amount: 0,
+                        },
+                    ],
+                },
+                bar: {
+                    fields: {},
+                    records: [
+                        { id: 1, display_name: "Value 1" },
+                        { id: 2, display_name: "Value 2" },
+                        { id: 3, display_name: "Value 3" },
+                    ],
+                },
+                res_currency: {
+                    fields: {
+                        symbol: { string: "Symbol", type: "char" },
+                        position: {
+                            string: "Position",
+                            type: "selection",
+                            selection: [
+                                ["after", "A"],
+                                ["before", "B"],
+                            ],
+                        },
+                    },
+                    records: [
+                        { id: 1, display_name: "USD", symbol: "$", position: "before" },
+                        { id: 2, display_name: "EUR", symbol: "€", position: "after" },
+                    ],
+                },
+                event: {
+                    fields: {
+                        id: { string: "ID", type: "integer" },
+                        name: { string: "name", type: "char" },
+                    },
+                    records: [{ id: "2-20170808020000", name: "virtual" }],
+                },
+                "ir.translation": {
+                    fields: {
+                        lang_code: { type: "char" },
+                        src: { type: "char" },
+                        value: { type: "char" },
+                        res_id: { type: "integer" },
+                        name: { type: "char" },
+                        lang: { type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 99,
+                            res_id: 1,
+                            value: "",
+                            lang_code: "en_US",
+                            lang: "en_US",
+                            name: "foo,foo",
+                        },
+                        {
+                            id: 100,
+                            res_id: 1,
+                            value: "",
+                            lang_code: "fr_BE",
+                            lang: "fr_BE",
+                            name: "foo,foo",
+                        },
+                    ],
+                },
+            },
+        };
+        setupViewRegistries();
+        serviceRegistry.add("tooltip", tooltipService);
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+            clearTimeout: () => {},
+        });
+        target = getFixture();
+        serviceRegistry.add("ui", uiService);
+    });
+
+    QUnit.module("ListView");
+
+    QUnit.test("simple readonly list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="int_field"/></tree>',
+        });
+
+        // 3 th (1 for checkbox, 2 for columns)
+        assert.containsN(target, "th", 3, "should have 3 columns");
+
+        assert.strictEqual($(target).find("td:contains(gnap)").length, 1, "should contain gnap");
+        assert.containsN(target, "tbody tr", 4, "should have 4 rows");
+        assert.containsOnce(target, "th.o_column_sortable", "should have 1 sortable column");
+
+        assert.strictEqual(
+            $(target).find("thead th:nth(2)").css("text-align"),
+            "right",
+            "header cells of integer fields should be right aligned"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:first td:nth(2)").css("text-align"),
+            "right",
+            "integer cells should be right aligned"
+        );
+
+        assert.isVisible(target.querySelector(".o_list_button_add"));
+        assert.isNotVisible(target.querySelector(".o_list_button_save"));
+        assert.isNotVisible(target.querySelector(".o_list_button_discard"));
+    });
+
+    QUnit.test('list with create="0"', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree create="0"><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(target, ".o_list_button_add", "should not have the 'Create' button");
+    });
+
+    QUnit.test('list with delete="0"', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            actionMenus: {},
+            arch: '<tree delete="0"><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 4, "should have 4 records");
+
+        await click(target.querySelector("tbody td.o_list_record_selector input"));
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus .dropdown-menu");
+    });
+
+    QUnit.test('editable list with edit="0"', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top" edit="0"><field name="foo"/></tree>',
+            selectRecord: (resId, options) => {
+                assert.step(`switch to form - resId: ${resId} activeIds: ${options.activeIds}`);
+            },
+        });
+
+        assert.ok(
+            target.querySelectorAll("tbody td.o_list_record_selector").length,
+            "should have at least one record"
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsNone(target, "tbody tr.o_selected_row", "should not have editable row");
+
+        assert.verifySteps(["switch to form - resId: 1 activeIds: 1,2,3,4"]);
+    });
+
+    QUnit.test(
+        "export feature in list for users not in base.group_allow_export",
+        async function (assert) {
+            function hasGroup(group) {
+                return group !== "base.group_allow_export";
+            }
+            serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                actionMenus: {},
+                arch: '<tree><field name="foo"/></tree>',
+            });
+
+            assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+            assert.ok(
+                $(target).find("tbody td.o_list_record_selector").length,
+                "should have at least one record"
+            );
+            assert.containsNone(target, "div.o_control_panel .o_cp_buttons .o_list_export_xlsx");
+            await click(target.querySelector("tbody td.o_list_record_selector input"));
+            assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+            await toggleActionMenu(target);
+            assert.deepEqual(
+                getNodesTextContent(
+                    target.querySelectorAll(".o_control_panel .o_cp_action_menus .o_menu_item")
+                ),
+                ["Delete"],
+                "action menu should not contain the Export button"
+            );
+        }
+    );
+
+    QUnit.test("list with export button", async function (assert) {
+        function hasGroup(group) {
+            return group === "base.group_allow_export";
+        }
+        serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            actionMenus: {},
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.ok(
+            target.querySelectorAll("tbody td.o_list_record_selector").length,
+            "should have at least one record"
+        );
+        assert.containsOnce(target, "div.o_control_panel .o_cp_buttons .o_list_export_xlsx");
+
+        await click(target.querySelector("tbody td.o_list_record_selector input"));
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        await toggleActionMenu(target);
+        assert.deepEqual(
+            getNodesTextContent(
+                target.querySelectorAll(".o_control_panel .o_cp_action_menus .o_menu_item")
+            ),
+            ["Export", "Delete"],
+            "action menu should have Export button"
+        );
+    });
+
+    QUnit.test("export button in list view", async function (assert) {
+        function hasGroup(group) {
+            return group === "base.group_allow_export";
+        }
+        serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+        assert.isVisible(target.querySelector(".o_list_export_xlsx"));
+
+        await click(target.querySelector("tbody td.o_list_record_selector input"));
+        assert.isNotVisible(target.querySelector(".o_list_export_xlsx"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        await click(target.querySelector("tbody td.o_list_record_selector input"));
+        assert.isVisible(target.querySelector(".o_list_export_xlsx"));
+    });
+
+    QUnit.test("export button in empty list view", async function (assert) {
+        const records = serverData.models.foo.records;
+
+        serverData.models.foo.records = [];
+
+        function hasGroup(group) {
+            return group === "base.group_allow_export";
+        }
+        serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.isNotVisible(target.querySelector(".o_list_export_xlsx"));
+
+        serverData.models.foo.records = records;
+        await reloadListView(target);
+        assert.isVisible(target.querySelector(".o_list_export_xlsx"));
+    });
+
+    QUnit.test("Direct export button invisible", async function (assert) {
+        function hasGroup(group) {
+            return group === "base.group_allow_export";
+        }
+        serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "foo",
+            arch: `<tree export_xlsx="0"><field name="foo"/></tree>`,
+        });
+        assert.containsNone(target, ".o_list_export_xlsx");
+    });
+
+    QUnit.test("list view with adjacent buttons", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <button name="a" type="object" icon="fa-car"/>
+                    <field name="foo"/>
+                    <button name="x" type="object" icon="fa-star"/>
+                    <button name="y" type="object" icon="fa-refresh"/>
+                    <button name="z" type="object" icon="fa-exclamation"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "th",
+            4,
+            "adjacent buttons in the arch must be grouped in a single column"
+        );
+        assert.containsN(target.querySelector(".o_data_row:first-child"), "td.o_list_button", 2);
+    });
+
+    QUnit.test("list view with adjacent buttons and invisible field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <button name="a" type="object" icon="fa-car"/>
+                    <field name="foo" invisible="1"/>
+                    <button name="x" type="object" icon="fa-star"/>
+                    <button name="y" type="object" icon="fa-refresh"/>
+                    <button name="z" type="object" icon="fa-exclamation"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "th",
+            3,
+            "adjacent buttons in the arch must be grouped in a single column"
+        );
+        assert.containsN(target.querySelector(".o_data_row:first-child"), "td.o_list_button", 2);
+    });
+
+    QUnit.test(
+        "list view with adjacent buttons and invisible field (modifier)",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                <tree>
+                    <button name="a" type="object" icon="fa-car"/>
+                    <field name="foo" attrs="{'invisible': [['foo', '=', 'blip']]}"/>
+                    <button name="x" type="object" icon="fa-star"/>
+                    <button name="y" type="object" icon="fa-refresh"/>
+                    <button name="z" type="object" icon="fa-exclamation"/>
+                </tree>`,
+            });
+
+            assert.containsN(
+                target,
+                "th",
+                4,
+                "adjacent buttons in the arch must be grouped in a single column"
+            );
+            assert.containsN(
+                target.querySelector(".o_data_row:first-child"),
+                "td.o_list_button",
+                2
+            );
+        }
+    );
+
+    QUnit.test("list view with adjacent buttons and optional field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <button name="a" type="object" icon="fa-car"/>
+                    <field name="foo" optional="hide"/>
+                    <button name="x" type="object" icon="fa-star"/>
+                    <button name="y" type="object" icon="fa-refresh"/>
+                    <button name="z" type="object" icon="fa-exclamation"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "th",
+            3,
+            "adjacent buttons in the arch must be grouped in a single column"
+        );
+        assert.containsN(target.querySelector(".o_data_row:first-child"), "td.o_list_button", 2);
+    });
+
+    QUnit.test("list view with adjacent buttons with invisible modifier", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <button name="x" type="object" icon="fa-star" attrs="{'invisible': [['foo', '=', 'blip']]}"/>
+                    <button name="y" type="object" icon="fa-refresh" attrs="{'invisible': [['foo', '=', 'yop']]}"/>
+                    <button name="z" type="object" icon="fa-exclamation" attrs="{'invisible': [['foo', '=', 'gnap']]}"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "th",
+            3,
+            "adjacent buttons in the arch must be grouped in a single column"
+        );
+        assert.containsOnce(target.querySelector(".o_data_row"), "td.o_list_button");
+        assert.strictEqual($(target).find(".o_field_cell").text(), "yopblipgnapblip");
+        assert.containsN(target, "td button i.fa-star", 2);
+        assert.containsN(target, "td button i.fa-refresh", 3);
+        assert.containsN(target, "td button i.fa-exclamation", 3);
+    });
+
+    QUnit.test("list view with icon buttons", async function (assert) {
+        serverData.models.foo.records.splice(1);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <button name="x" type="object" icon="fa-asterisk"/>
+                    <button name="x" type="object" icon="fa-star" class="o_yeah"/>
+                    <button name="x" type="object" icon="fa-refresh" string="Refresh" class="o_yeah"/>
+                    <button name="x" type="object" icon="fa-exclamation" string="Danger" class="o_yeah btn-danger"/>
+                </tree>`,
+        });
+
+        assert.containsOnce(target, "button.btn.btn-link i.fa.fa-asterisk");
+        assert.containsOnce(target, "button.btn.btn-link.o_yeah i.fa.fa-star");
+        assert.containsOnce(
+            target,
+            'button.btn.btn-link.o_yeah:contains("Refresh") i.fa.fa-refresh'
+        );
+        assert.containsOnce(
+            target,
+            'button.btn.btn-danger.o_yeah:contains("Danger") i.fa.fa-exclamation'
+        );
+        assert.containsNone(target, "button.btn.btn-link.btn-danger");
+    });
+
+    QUnit.test("list view: action button in controlPanel basic rendering", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <header>
+                         <button name="x" type="object" class="plaf" string="plaf"/>
+                         <button name="y" type="object" class="plouf" string="plouf" invisible="not context.get('bim')"/>
+                    </header>
+                    <field name="foo" />
+                </tree>`,
+        });
+        let cpButtons = getButtons(target);
+        assert.containsNone(cpButtons[0], 'button[name="x"]');
+        assert.containsNone(cpButtons[0], ".o_list_selection_box");
+        assert.containsNone(cpButtons[0], 'button[name="y"]');
+
+        await click(
+            target.querySelector('.o_data_row .o_list_record_selector input[type="checkbox"]')
+        );
+        cpButtons = getButtons(target);
+        assert.containsOnce(cpButtons[0], 'button[name="x"]');
+        assert.hasClass(cpButtons[0].querySelector('button[name="x"]'), "btn btn-secondary");
+        assert.containsOnce(cpButtons[0], ".o_list_selection_box");
+        assert.strictEqual(
+            cpButtons[0].querySelector('button[name="x"]').nextElementSibling,
+            cpButtons[0].querySelector(".o_list_selection_box")
+        );
+        assert.containsNone(cpButtons[0], 'button[name="y"]');
+
+        await click(
+            target.querySelector('.o_data_row .o_list_record_selector input[type="checkbox"]')
+        );
+        cpButtons = getButtons(target);
+        assert.containsNone(cpButtons[0], 'button[name="x"]');
+        assert.containsNone(cpButtons[0], ".o_list_selection_box");
+        assert.containsNone(cpButtons[0], 'button[name="y"]');
+    });
+
+    QUnit.test(
+        "list view: action button executes action on click: buttons are disabled and re-enabled",
+        async function (assert) {
+            const executeActionDef = makeDeferred();
+            const list = await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <header>
+                             <button name="x" type="object" class="plaf" string="plaf"/>
+                        </header>
+                        <field name="foo" />
+                    </tree>`,
+            });
+            patchWithCleanup(list.env.services.action, {
+                doActionButton: async () => {
+                    await executeActionDef;
+                },
+            });
+            await click(
+                target.querySelector('.o_data_row .o_list_record_selector input[type="checkbox"]')
+            );
+            const cpButtons = getButtons(target);
+            assert.ok(
+                Array.from(cpButtons[0].querySelectorAll("button")).every((btn) => !btn.disabled)
+            );
+
+            await click(cpButtons[0].querySelector('button[name="x"]'));
+            assert.ok(
+                Array.from(cpButtons[0].querySelectorAll("button")).every((btn) => btn.disabled)
+            );
+
+            executeActionDef.resolve();
+            await nextTick();
+            assert.ok(
+                Array.from(cpButtons[0].querySelectorAll("button")).every((btn) => !btn.disabled)
+            );
+        }
+    );
+
+    QUnit.test(
+        "list view: buttons handler is called once on double click",
+        async function (assert) {
+            const executeActionDef = makeDeferred();
+            const list = await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="foo" />
+                        <button name="x" type="object" class="do_something" string="Do Something"/>
+                    </tree>`,
+            });
+            patchWithCleanup(list.env.services.action, {
+                doActionButton: async () => {
+                    assert.step("execute_action");
+                    await executeActionDef;
+                },
+            });
+            const button = target.querySelector("tbody .o_list_button > button");
+            await click(button);
+            assert.ok(button.matches("[disabled]"));
+
+            executeActionDef.resolve();
+            await nextTick();
+            assert.verifySteps(["execute_action"]);
+        }
+    );
+
+    QUnit.test(
+        "list view: action button executes action on click: correct parameters",
+        async function (assert) {
+            assert.expect(6);
+
+            const list = await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <header>
+                             <button name="x" type="object" class="plaf" string="plaf" context="{'plouf': 'plif'}"/>
+                        </header>
+                        <field name="foo" />
+                    </tree>`,
+            });
+            patchWithCleanup(list.env.services.action, {
+                doActionButton: async (params) => {
+                    const { buttonContext, context, name, resModel, resIds, type } = params;
+                    // Action's own properties
+                    assert.strictEqual(name, "x");
+                    assert.strictEqual(type, "object");
+
+                    // The action's execution context
+                    assert.deepEqual(buttonContext, {
+                        active_domain: [],
+                        // active_id: 1, //FGE TODO
+                        active_ids: [1],
+                        active_model: "foo",
+                        plouf: "plif",
+                    });
+
+                    assert.strictEqual(resModel, "foo");
+                    assert.deepEqual([...resIds], [1]);
+                    assert.strictEqual(JSON.stringify(context), "{}");
+                },
+            });
+            await click(
+                target.querySelector('.o_data_row .o_list_record_selector input[type="checkbox"]')
+            );
+            const cpButtons = getButtons(target);
+            await click(cpButtons[0].querySelector('button[name="x"]'));
+        }
+    );
+
+    QUnit.test(
+        "list view: action button executes action on click with domain selected: correct parameters",
+        async function (assert) {
+            assert.expect(12);
+
+            const list = await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree limit="1">
+                        <header>
+                             <button name="x" type="object" class="plaf" string="plaf"/>
+                        </header>
+                        <field name="foo" />
+                    </tree>`,
+                mockRPC(route, args) {
+                    if (args.method === "search") {
+                        assert.step("search");
+                        assert.strictEqual(args.model, "foo");
+                        assert.deepEqual(args.args, [[]]); // empty domain since no domain in searchView
+                    }
+                },
+            });
+            patchWithCleanup(list.env.services.action, {
+                doActionButton: async (params) => {
+                    const { buttonContext, context, name, resModel, resIds, type } = params;
+                    assert.step("execute_action");
+                    // Action's own properties
+                    assert.strictEqual(name, "x");
+                    assert.strictEqual(type, "object");
+
+                    // The action's execution context
+                    assert.deepEqual(buttonContext, {
+                        active_domain: [],
+                        // active_id: 1, // FGE TODO
+                        active_ids: [1, 2, 3, 4],
+                        active_model: "foo",
+                    });
+
+                    assert.strictEqual(JSON.stringify(context), "{}");
+                    assert.strictEqual(resModel, "foo");
+                    assert.deepEqual([...resIds], [1, 2, 3, 4]);
+                },
+            });
+            await click(
+                target.querySelector('.o_data_row .o_list_record_selector input[type="checkbox"]')
+            );
+            const cpButtons = getButtons(target);
+
+            await click(cpButtons[0].querySelector(".o_list_select_domain"));
+            assert.verifySteps([]);
+
+            await click(cpButtons[0].querySelector('button[name="x"]'));
+            assert.verifySteps(["search", "execute_action"]);
+        }
+    );
+
+    QUnit.test("column names (noLabel, label, string and default)", async function (assert) {
+        const fieldRegistry = registry.category("fields");
+        const CharField = fieldRegistry.get("char");
+
+        class NoLabelCharField extends CharField {}
+        NoLabelCharField.noLabel = true;
+        fieldRegistry.add("nolabel_char", NoLabelCharField);
+
+        class LabelCharField extends CharField {}
+        LabelCharField.displayName = "Some static label";
+        fieldRegistry.add("label_char", LabelCharField);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="display_name" widget="nolabel_char"/>
+                    <field name="foo" widget="label_char"/>
+                    <field name="int_field" string="My custom label"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        const columnLabels = [...target.querySelectorAll("thead th")].map((th) => th.textContent);
+        assert.deepEqual(columnLabels, [
+            "",
+            "",
+            "Some static label",
+            "My custom label",
+            "text field",
+        ]);
+    });
+
+    QUnit.test("simple editable rendering", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, "th", 3, "should have 2 th");
+        assert.containsN(target, "th", 3, "should have 3 th");
+        assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+        assert.containsOnce(target, "td:contains(yop)", "should contain yop");
+
+        assert.containsOnce(target, ".o_list_button_add");
+        assert.containsNone(target, ".o_list_button_save");
+        assert.containsNone(target, ".o_list_button_discard");
+
+        await click(target.querySelector(".o_field_cell"));
+
+        assert.containsNone(target, ".o_list_button_add");
+        assert.containsOnce(target, ".o_list_button_save");
+        assert.containsOnce(target, ".o_list_button_discard");
+        assert.containsNone(target, ".o_list_record_selector input:enabled");
+
+        await click(target.querySelector(".o_list_button_save"));
+
+        assert.containsOnce(target, ".o_list_button_add");
+        assert.containsNone(target, ".o_list_button_save");
+        assert.containsNone(target, ".o_list_button_discard");
+        assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+    });
+
+    QUnit.test("editable rendering with handle and no data", async function (assert) {
+        serverData.models.foo.records = [];
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="int_field" widget="handle"/>
+                    <field name="currency_id"/>
+                    <field name="m2o"/>
+                </tree>`,
+        });
+        assert.containsN(target, "thead th", 4, "there should be 4 th");
+        assert.hasClass(target.querySelectorAll("thead th")[0], "o_list_record_selector");
+        assert.hasClass(target.querySelectorAll("thead th")[1], "o_handle_cell");
+        assert.strictEqual(
+            target.querySelectorAll("thead th")[1].innerText,
+            "",
+            "the handle field shouldn't have a header description"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("thead th")[2].getAttribute("style"),
+            "width: 50%;"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("thead th")[3].getAttribute("style"),
+            "width: 50%;"
+        );
+    });
+
+    QUnit.test("invisible columns are not displayed", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar" invisible="1"/>
+                </tree>`,
+        });
+
+        // 1 th for checkbox, 1 for 1 visible column
+        assert.containsN(target, "th", 2, "should have 2 th");
+    });
+
+    QUnit.test("boolean field has no title (data-tooltip)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="bar"/></tree>',
+        });
+        assert.strictEqual(target.querySelector(".o_data_cell").getAttribute("data-tooltip"), null);
+    });
+
+    QUnit.test("field with nolabel has no title", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo" nolabel="1"/></tree>',
+        });
+        assert.strictEqual($(target).find("thead tr:first th:eq(1)").text(), "");
+    });
+
+    QUnit.test("field titles are not escaped", async function (assert) {
+        serverData.models.foo.records[0].foo = "<div>Hello</div>";
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.strictEqual(
+            $(target).find("tbody tr:first .o_data_cell").text(),
+            "<div>Hello</div>"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:first .o_data_cell").attr("data-tooltip"),
+            "<div>Hello</div>"
+        );
+    });
+
+    QUnit.test("record-depending invisible lines are correctly aligned", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar" attrs="{'invisible': [('id','=', 1)]}"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+        assert.containsN(target, ".o_data_row td", 16); // 4 cells per row
+        assert.strictEqual(target.querySelectorAll(".o_data_row td")[2].innerHTML, "");
+    });
+
+    QUnit.test(
+        "do not perform extra RPC to read invisible many2one fields",
+        async function (assert) {
+            serverData.models.foo.fields.m2o.default = 2;
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo"/>
+                        <field name="m2o" invisible="1"/>
+                    </tree>`,
+                mockRPC(route) {
+                    assert.step(route.split("/").pop());
+                },
+            });
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.verifySteps(
+                ["get_views", "web_search_read", "onchange"],
+                "no nameget should be done"
+            );
+        }
+    );
+
+    QUnit.test("editable list datepicker destroy widget (edition)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="date"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        await click(target, ".o_datepicker input");
+        assert.containsOnce(document.body, ".bootstrap-datetimepicker-widget");
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.containsOnce(target, ".o_selected_row");
+        assert.containsNone(document.body, ".bootstrap-datetimepicker-widget");
+
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.containsNone(target, ".o_selected_row");
+        assert.containsN(target, ".o_data_row", 4);
+    });
+
+    QUnit.test("editable list datepicker destroy widget (new line)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree editable="top"><field name="date"/></tree>`,
+        });
+
+        assert.containsN(target, ".o_data_row", 4, "There should be 4 rows");
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        await click(target, ".o_datepicker input");
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+        await triggerEvent(document.activeElement, null, "keydown", { key: "Escape" });
+
+        assert.containsOnce(target, ".o_selected_row", "the row is still in edition");
+        assert.containsNone(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "the datepicker is no longer visible"
+        );
+        await triggerEvent(document.activeElement, null, "keydown", { key: "Escape" });
+
+        assert.containsNone(target, ".o_selected_row", "the row is no longer in edition");
+        assert.containsN(target, ".o_data_row", 4, "There should still be 4 rows");
+    });
+
+    QUnit.test("at least 4 rows are rendered, even if less data", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="bar"/></tree>',
+            domain: [["bar", "=", true]],
+        });
+
+        assert.containsN(target, "tbody tr", 4, "should have 4 rows");
+    });
+
+    QUnit.test(
+        'discard a new record in editable="top" list with less than 4 records',
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="bar"/></tree>',
+                domain: [["bar", "=", true]],
+            });
+            assert.containsN(target, ".o_data_row", 3);
+            assert.containsN(target, "tbody tr", 4);
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.containsN(target, ".o_data_row", 4);
+            assert.hasClass(target.querySelector("tbody tr"), "o_selected_row");
+
+            await click(target.querySelector(".o_list_button_discard"));
+            assert.containsN(target, ".o_data_row", 3);
+            assert.containsN(target, "tbody tr", 4);
+            assert.hasClass(target.querySelector("tbody tr"), "o_data_row");
+        }
+    );
+
+    QUnit.test("basic grouped list rendering", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        assert.strictEqual($(target).find("th:contains(Foo)").length, 1, "should contain Foo");
+        assert.strictEqual($(target).find("th:contains(Bar)").length, 1, "should contain Bar");
+        assert.containsN(target, "tr.o_group_header", 2, "should have 2 .o_group_header");
+        assert.containsN(target, "th.o_group_name", 2, "should have 2 .o_group_name");
+    });
+
+    QUnit.test('basic grouped list rendering with widget="handle" col', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="int_field" widget="handle"/>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>`,
+            groupBy: ["bar"],
+        });
+
+        assert.strictEqual($(target).find("th:contains(Foo)").length, 1, "should contain Foo");
+        assert.strictEqual($(target).find("th:contains(Bar)").length, 1, "should contain Bar");
+        assert.containsN(target, "tr.o_group_header", 2, "should have 2 .o_group_header");
+        assert.containsN(target, "th.o_group_name", 2, "should have 2 .o_group_name");
+        assert.containsNone(
+            target,
+            "th:contains(int_field)",
+            "Should not have int_field in grouped list"
+        );
+    });
+
+    QUnit.test("basic grouped list rendering 1 col without selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+            groupBy: ["bar"],
+            hasSelectors: false,
+        });
+
+        assert.containsOnce(target.querySelector(".o_group_header"), "th");
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "1");
+    });
+
+    QUnit.test("basic grouped list rendering 1 col with selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        assert.containsOnce(target.querySelector(".o_group_header"), "th");
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "2");
+    });
+
+    QUnit.test("basic grouped list rendering 2 cols without selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree ><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["bar"],
+            hasSelectors: false,
+        });
+
+        assert.containsN(target.querySelector(".o_group_header"), "th", 2);
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "1");
+    });
+
+    QUnit.test("basic grouped list rendering 3 cols without selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree ><field name="foo"/><field name="bar"/><field name="text"/></tree>',
+            groupBy: ["bar"],
+            hasSelectors: false,
+        });
+
+        assert.containsN(target.querySelector(".o_group_header"), "th", 2);
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "2");
+    });
+
+    QUnit.test("basic grouped list rendering 2 col with selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree ><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["bar"],
+            hasSelectors: true,
+        });
+
+        assert.containsN(target.querySelector(".o_group_header"), "th", 2);
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "2");
+    });
+
+    QUnit.test("basic grouped list rendering 3 cols with selector", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/><field name="text"/></tree>',
+            groupBy: ["bar"],
+            hasSelectors: true,
+        });
+
+        assert.containsN(target.querySelector(".o_group_header"), "th", 2);
+        assert.strictEqual(target.querySelector(".o_group_header th").getAttribute("colspan"), "3");
+    });
+
+    QUnit.test(
+        "basic grouped list rendering 7 cols with aggregates and selector",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="datetime"/>
+                        <field name="foo"/>
+                        <field name="int_field" sum="Sum1"/>
+                        <field name="bar"/>
+                        <field name="qux" sum="Sum2"/>
+                        <field name="date"/>
+                        <field name="text"/>
+                    </tree>`,
+                groupBy: ["bar"],
+            });
+
+            assert.containsN(target.querySelector(".o_group_header"), "th,td", 5);
+            assert.strictEqual(
+                target.querySelector(".o_group_header th").getAttribute("colspan"),
+                "3"
+            );
+            assert.containsN(
+                target.querySelector(".o_group_header"),
+                "td",
+                3,
+                "there should be 3 tds (aggregates + fields in between)"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_group_header th:last-child").getAttribute("colspan"),
+                "2",
+                "header last cell should span on the two last fields (to give space for the pager) (colspan 2)"
+            );
+        }
+    );
+
+    QUnit.test("basic grouped list rendering with groupby m2m field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            groupBy: ["m2m"],
+        });
+
+        assert.containsN(target, ".o_group_header", 4, "should contain 4 open groups");
+        assert.containsNone(target, ".o_group_open", "no group is open");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_header .o_group_name")].map((el) => el.innerText),
+            ["None (1)", "Value 1 (3)", "Value 2 (2)", "Value 3 (1)"],
+            "should have those group headers"
+        );
+
+        // Open all groups
+        await click(target.querySelectorAll(".o_group_name")[0]);
+        await click(target.querySelectorAll(".o_group_name")[1]);
+        await click(target.querySelectorAll(".o_group_name")[2]);
+        await click(target.querySelectorAll(".o_group_name")[3]);
+        assert.containsN(target, ".o_group_open", 4, "all groups are open");
+
+        const rows = target.querySelectorAll(".o_list_view tbody > tr");
+        assert.deepEqual(
+            [...rows].map((el) => el.innerText.replace(/\s/g, "")),
+            [
+                "None(1)",
+                "gnap",
+                "Value1(3)",
+                "yopValue1Value2",
+                "blipValue1Value2Value3",
+                "blipValue1",
+                "Value2(2)",
+                "yopValue1Value2",
+                "blipValue1Value2Value3",
+                "Value3(1)",
+                "blipValue1Value2Value3",
+            ],
+            "should have these row contents"
+        );
+    });
+
+    QUnit.test("grouped list rendering with groupby m2o and m2m field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2o"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            groupBy: ["m2o", "m2m"],
+        });
+
+        let rows = target.querySelectorAll("tbody > tr");
+        assert.deepEqual(
+            [...rows].map((el) => el.innerText.replace(/\s/g, "")),
+
+            ["Value1(3)", "Value2(1)"],
+            "should have these row contents"
+        );
+
+        await click(target.querySelector("th.o_group_name"));
+
+        rows = target.querySelectorAll("tbody > tr");
+        assert.deepEqual(
+            [...rows].map((el) => el.innerText.replace(/\s/g, "")),
+            ["Value1(3)", "None(1)", "Value1(2)", "Value2(1)", "Value2(1)"],
+            "should have these row contents"
+        );
+
+        await click(target.querySelectorAll("tbody th.o_group_name")[4]);
+        rows = target.querySelectorAll(".o_list_view tbody > tr");
+
+        assert.deepEqual(
+            [...rows].map((el) => el.innerText.replace(/\s/g, "")),
+            [
+                "Value1(3)",
+                "None(1)",
+                "Value1(2)",
+                "Value2(1)",
+                "Value2(1)",
+                "Value1(1)",
+                "Value2(1)",
+                "Value3(1)",
+            ],
+            "should have these row contents"
+        );
+    });
+
+    QUnit.test("deletion of record is disabled when groupby m2m field", async function (assert) {
+        serviceRegistry.add(
+            "user",
+            makeFakeUserService(() => false),
+            { force: true }
+        );
+
+        serverData.models.foo.fields.m2m.sortable = true;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            actionMenus: {},
+        });
+        await groupByMenu(target, "m2m");
+
+        await click(target.querySelector(".o_group_header:first-child")); // open first group
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsNone(
+            target,
+            "div.o_control_panel .o_cp_action_menus .dropdown",
+            "should not have dropdown as delete item is not there"
+        );
+
+        // unselect group by m2m
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "M2M field");
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus .dropdown");
+        await click(target, "div.o_control_panel .o_cp_action_menus .dropdown button");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_cp_action_menus .o_menu_item")].map(
+                (el) => el.innerText
+            ),
+            ["Delete"]
+        );
+    });
+
+    QUnit.test(
+        "editing a record should change same record in other groups when grouped by m2m field",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="m2m" widget="many2many_tags"/>
+                    </tree>`,
+                groupBy: ["m2m"],
+            });
+            await click(target.querySelectorAll(".o_group_header")[1]); // open Value 1 group
+            await click(target.querySelectorAll(".o_group_header")[2]); // open Value 2 group
+            const rows = target.querySelectorAll(".o_data_row");
+            assert.strictEqual(rows[0].querySelector(".o_list_char").textContent, "yop");
+            assert.strictEqual(rows[3].querySelector(".o_list_char").textContent, "yop");
+
+            await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            await editInput(rows[0], ".o_data_row .o_list_char input", "xyz");
+            await click(target, ".o_list_view");
+            assert.strictEqual(rows[0].querySelector(".o_list_char").textContent, "xyz");
+            assert.strictEqual(rows[3].querySelector(".o_list_char").textContent, "xyz");
+        }
+    );
+
+    QUnit.test(
+        "change a record field in readonly should change same record in other groups when grouped by m2m field",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.foo.fields.priority = {
+                string: "Priority",
+                type: "selection",
+                selection: [
+                    [0, "Not Prioritary"],
+                    [1, "Prioritary"],
+                ],
+                default: 0,
+            };
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="foo"/>
+                        <field name="priority" widget="priority"/>
+                        <field name="m2m" widget="many2many_tags"/>
+                    </tree>`,
+                groupBy: ["m2m"],
+                domain: [["m2o", "=", 1]],
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(args.args[0], [1], "should write on the correct record");
+                        assert.deepEqual(
+                            args.args[1],
+                            {
+                                priority: 1,
+                            },
+                            "should write these changes"
+                        );
+                    }
+                },
+            });
+
+            await click(target.querySelectorAll(".o_group_header")[1]); // open Value 1 group
+            await click(target.querySelectorAll(".o_group_header")[2]); // open Value 2 group
+            const rows = target.querySelectorAll(".o_data_row");
+            assert.strictEqual(rows[0].querySelector(".o_list_char").textContent, "yop");
+            assert.strictEqual(rows[2].querySelector(".o_list_char").textContent, "yop");
+            assert.containsNone(
+                target,
+                ".o_priority_star.fa-star",
+                "should not have any starred records"
+            );
+
+            await click(rows[0].querySelector(".o_priority_star"));
+            assert.containsN(
+                target,
+                ".o_priority_star.fa-star",
+                2,
+                "both 'yop' records should have been starred"
+            );
+        }
+    );
+
+    QUnit.test("ordered target, sort attribute in context", async function (assert) {
+        // Equivalent to saving a custom filter
+        // FIXME WOWL: no it isn't
+
+        serverData.models.foo.fields.foo.sortable = true;
+        serverData.models.foo.fields.date.sortable = true;
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="date"/></tree>',
+        });
+
+        // Descending order on Foo
+        await click($(target).find('th.o_column_sortable:contains("Foo")')[0]);
+        await click($(target).find('th.o_column_sortable:contains("Foo")')[0]);
+
+        // Ascending order on Date
+        await click($(target).find('th.o_column_sortable:contains("Date")')[0]);
+
+        assert.deepEqual(
+            list.model.root.orderBy,
+            [
+                {
+                    name: "date",
+                    asc: true,
+                },
+                {
+                    name: "foo",
+                    asc: false,
+                },
+            ],
+            "the list should have the right orderedBy"
+        );
+    });
+
+    QUnit.test("Loading a filter with a sort attribute", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.foo.fields.foo.sortable = true;
+        serverData.models.foo.fields.date.sortable = true;
+
+        let searchReads = 0;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="date"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "web_search_read") {
+                    if (searchReads === 0) {
+                        assert.strictEqual(
+                            args.kwargs.order,
+                            "date ASC, foo DESC",
+                            "The sort attribute of the filter should be used by the initial search_read"
+                        );
+                    } else if (searchReads === 1) {
+                        assert.strictEqual(
+                            args.kwargs.order,
+                            "date DESC, foo ASC",
+                            "The sort attribute of the filter should be used by the next search_read"
+                        );
+                    }
+                    searchReads += 1;
+                }
+            },
+            irFilters: [
+                {
+                    context: "{}",
+                    domain: "[]",
+                    id: 7,
+                    is_default: true,
+                    name: "My favorite",
+                    sort: '["date asc", "foo desc"]',
+                    user_id: [2, "Mitchell Admin"],
+                },
+                {
+                    context: "{}",
+                    domain: "[]",
+                    id: 8,
+                    is_default: false,
+                    name: "My second favorite",
+                    sort: '["date desc", "foo asc"]',
+                    user_id: [2, "Mitchell Admin"],
+                },
+            ],
+        });
+
+        await toggleFavoriteMenu(target);
+        await toggleMenuItem(target, "My second favorite");
+    });
+
+    QUnit.test("many2one field rendering", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="m2o"/></tree>',
+        });
+
+        assert.ok(
+            $(target).find("td:contains(Value 1)").length,
+            "should have the display_name of the many2one"
+        );
+    });
+
+    QUnit.test("grouped list view, with 1 open group", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="int_field"/></tree>',
+            groupBy: ["foo"],
+        });
+
+        assert.containsN(target, "tr.o_group_header", 3);
+        assert.containsNone(target, "tr.o_data_row");
+
+        await click(target.querySelector("th.o_group_name"));
+        await nextTick();
+        assert.containsN(target, "tr.o_group_header", 3);
+        assert.containsN(target, "tr.o_data_row", 2);
+        assert.containsOnce(target, "td:contains(9)", "should contain 9");
+        assert.containsOnce(target, "td:contains(-4)", "should contain -4");
+        assert.containsOnce(target, "td:contains(10)", "should contain 10"); // FIXME: missing aggregates
+        assert.containsOnce(
+            target,
+            "tr.o_group_header td:contains(10)",
+            "but 10 should be in a header"
+        );
+    });
+
+    QUnit.test("opening records when clicking on record", async function (assert) {
+        assert.expect(6);
+
+        const listView = registry.category("views").get("list");
+        class ListViewCustom extends listView.Controller {
+            openRecord(record) {
+                assert.step("openRecord");
+                assert.strictEqual(record.resId, 2);
+            }
+        }
+        registry.category("views").add(
+            "list",
+            {
+                ...listView,
+                Controller: ListViewCustom,
+            },
+            { force: true }
+        );
+
+        serverData.models.foo.fields.foo.sortable = true;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        await click(target.querySelector("tr:nth-child(2) td:not(.o_list_record_selector)"));
+        await groupByMenu(target, "foo");
+
+        assert.containsN(target, "tr.o_group_header", 3, "list should be grouped");
+        await click(target.querySelector("th.o_group_name"));
+
+        await click(
+            target.querySelector("tr:not(.o_group_header) td:not(.o_list_record_selector)")
+        );
+        assert.verifySteps(["openRecord", "openRecord"]);
+    });
+
+    QUnit.test("editable list view: readonly fields cannot be edited", async function (assert) {
+        serverData.models.foo.fields.foo.readonly = true;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field" readonly="1"/>
+                </tree>`,
+        });
+        await click(target.querySelector(".o_field_cell"));
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "row should be in edit mode"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=foo]"),
+            "o_readonly_modifier",
+            "foo field should be readonly in edit mode"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_field_widget[name=bar]"),
+            "o_readonly_modifier",
+            "bar field should be editable"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=int_field]"),
+            "o_readonly_modifier",
+            "int_field field should be readonly in edit mode"
+        );
+    });
+
+    QUnit.test("editable list view: line with no active element", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.bar = {
+            fields: {
+                titi: { string: "Char", type: "char" },
+                grosminet: { string: "Bool", type: "boolean" },
+            },
+            records: [
+                { id: 1, titi: "cui", grosminet: true },
+                { id: 2, titi: "cuicui", grosminet: false },
+            ],
+        };
+        serverData.models.foo.records[0].o2m = [1, 2];
+
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            resId: 1,
+            arch: `
+                <form>
+                    <field name="o2m">
+                        <tree editable="top">
+                            <field name="titi" readonly="1"/>
+                            <field name="grosminet" widget="boolean_toggle"/>
+                        </tree>
+                    </field>
+                </form>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args[1], {
+                        o2m: [
+                            [1, 1, { grosminet: false }],
+                            [4, 2, false],
+                        ],
+                    });
+                }
+            },
+        });
+        await clickEdit(target);
+
+        assert.hasClass(target.querySelectorAll(".o_data_cell")[1], "o_boolean_toggle_cell");
+
+        await click(target.querySelectorAll(".o_data_cell")[0]);
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        assert.containsOnce(target.querySelectorAll(".o_data_cell")[0], ".o_readonly_modifier");
+        await click(target.querySelectorAll(".o_data_cell")[1], ".o_boolean_toggle input");
+        await clickSave(target);
+    });
+
+    QUnit.test(
+        "editable list view: click on last element after creation empty new line",
+        async function (assert) {
+            serverData.models.bar = {
+                fields: {
+                    titi: { string: "Char", type: "char", required: true },
+                    int_field: {
+                        string: "int_field",
+                        type: "integer",
+                        sortable: true,
+                        required: true,
+                    },
+                },
+                records: [
+                    { id: 1, titi: "cui", int_field: 2 },
+                    { id: 2, titi: "cuicui", int_field: 4 },
+                ],
+            };
+            serverData.models.foo.records[0].o2m = [1, 2];
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <field name="o2m">
+                            <tree editable="top">
+                            <field name="int_field" widget="handle"/>
+                            <field name="titi"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+            await clickEdit(target);
+            await addRow(target);
+            await click(
+                [...target.querySelectorAll(".o_data_row")].pop().querySelector("td.o_list_char")
+            );
+            // This test ensure that they aren't traceback when clicking on the last row.
+            assert.containsN(target, ".o_data_row", 2, "list should have exactly 2 rows");
+        }
+    );
+
+    QUnit.test("edit field in editable field without editing the row", async function (assert) {
+        // some widgets are editable in readonly (e.g. priority, boolean_toggle...) and they
+        // thus don't require the row to be switched in edition to be edited
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="bar" widget="boolean_toggle"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.step("write: " + args.args[1].bar);
+                }
+            },
+        });
+
+        // toggle the boolean value of the first row without editing the row
+        assert.ok(target.querySelector(".o_data_row .o_boolean_toggle input").checked);
+        assert.containsNone(target, ".o_selected_row");
+        await click(target.querySelector(".o_data_row .o_boolean_toggle input"));
+        assert.notOk(target.querySelector(".o_data_row .o_boolean_toggle input").checked);
+        assert.containsNone(target, ".o_selected_row");
+        assert.verifySteps(["write: false"]);
+
+        // toggle the boolean value after switching the row in edition
+        assert.containsNone(target, ".o_selected_row");
+        await click(target.querySelector(".o_data_row .o_data_cell .o_field_boolean_toggle div"));
+        assert.containsOnce(target, ".o_selected_row");
+        await click(target.querySelector(".o_selected_row .o_field_boolean_toggle div"));
+        assert.containsOnce(target, ".o_selected_row");
+        assert.verifySteps([]);
+
+        // save
+        await clickSave(target);
+        assert.containsNone(target, ".o_selected_row");
+        assert.verifySteps(["write: true"]);
+    });
+
+    QUnit.test("basic operations for editable list renderer", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+        assert.containsNone(target, ".o_data_row .o_selected_row");
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+    });
+
+    QUnit.test("editable list: add a line and discard", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+            domain: [["foo", "=", "yop"]],
+        });
+
+        assert.containsN(target, "tbody tr", 4, "list should contain 4 rows");
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "list should contain one record (and thus 3 empty rows)"
+        );
+
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").innerText,
+            "1-1",
+            "pager should be correct"
+        );
+
+        await click(target.querySelector(".o_list_button_add"));
+
+        assert.containsN(target, "tbody tr", 4, "list should still contain 4 rows");
+        assert.containsN(
+            target,
+            ".o_data_row",
+            2,
+            "list should contain two record (and thus 2 empty rows)"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").innerText,
+            "1-2",
+            "pager should be correct"
+        );
+
+        await click(target.querySelector(".o_list_button_discard"));
+
+        assert.containsN(target, "tbody tr", 4, "list should still contain 4 rows");
+        assert.containsOnce(
+            target,
+            ".o_data_row",
+            "list should contain one record (and thus 3 empty rows)"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_pager_value").innerText,
+            "1-1",
+            "pager should be correct"
+        );
+    });
+
+    QUnit.test("field changes are triggered correctly", async function (assert) {
+        serverData.models.foo.onchanges = {
+            foo: function () {
+                assert.step("onchange");
+            },
+        };
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass(target.querySelectorAll(".o_data_row")[0], "o_selected_row");
+        await editInput(target, ".o_field_widget[name=foo] input", "abc");
+        assert.verifySteps(["onchange"]);
+        await click(target.querySelectorAll(".o_data_cell")[2]);
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+        assert.verifySteps([]);
+    });
+
+    QUnit.test("editable list view: basic char field edition", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        await click(target.querySelector(".o_field_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        await editInput(target, ".o_field_char input", "abc");
+        assert.strictEqual(
+            target.querySelector(".o_field_char input").value,
+            "abc",
+            "char field has been edited correctly"
+        );
+
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        assert.strictEqual(
+            target.querySelector(".o_field_cell").innerText,
+            "abc",
+            "changes should be saved correctly"
+        );
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "saved row should be in readonly mode"
+        );
+        assert.strictEqual(
+            serverData.models.foo.records[0].foo,
+            "abc",
+            "the edition should have been properly saved"
+        );
+    });
+
+    QUnit.test(
+        "editable list view: save data when list sorting in edit mode",
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.models.foo.fields.foo.sortable = true;
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="bottom"><field name="foo"/></tree>',
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(
+                            args.args,
+                            [[1], { foo: "xyz" }],
+                            "should correctly save the edited record"
+                        );
+                    }
+                },
+            });
+
+            await click(target.querySelector(".o_data_cell"));
+            await editInput(target, '.o_field_widget[name="foo"] input', "xyz");
+            await click(target.querySelector(".o_column_sortable"));
+
+            assert.hasClass(
+                target.querySelector(".o_data_row"),
+                "o_selected_row",
+                "first row should still be in edition"
+            );
+
+            await click(target.querySelector(".o_list_button_save"));
+            assert.containsNone(target, ".o_list_button_save");
+        }
+    );
+
+    QUnit.test(
+        "editable list view: check that controlpanel buttons are updating when groupby applied",
+        async function (assert) {
+            serverData.models.foo.fields.foo = { string: "Foo", type: "char", required: true };
+            serverData.actions = {
+                11: {
+                    id: 11,
+                    name: "Partners Action 11",
+                    res_model: "foo",
+                    type: "ir.actions.act_window",
+                    views: [[3, "list"]],
+                    search_view_id: [9, "search"],
+                },
+            };
+            serverData.views = {
+                "foo,3,list":
+                    '<tree editable="top"><field name="display_name"/><field name="foo"/></tree>',
+
+                "foo,9,search": `
+                    <search>
+                        <filter string="candle" name="itsName" context="{'group_by': 'foo'}"/>
+                    </search>`,
+            };
+
+            const webClient = await createWebClient({ serverData });
+
+            await doAction(webClient, 11);
+            await click(target.querySelector(".o_list_button_add"));
+
+            assert.containsNone(target, ".o_list_button_add");
+            assert.containsOnce(target, ".o_list_button_save");
+
+            await toggleGroupByMenu(target);
+            await toggleMenuItem(target, "candle");
+
+            assert.containsNone(
+                target,
+                ".o_list_button_add",
+                "Create not available as list is grouped"
+            );
+            assert.containsNone(
+                target,
+                ".o_list_button_save",
+                "Save not available as no row in edition"
+            );
+        }
+    );
+
+    QUnit.test("list view not groupable", async function (assert) {
+        serverData.views = {
+            "foo,false,search": `
+                <search>
+                    <filter context="{'group_by': 'foo'}" name="foo"/>
+                </search>`,
+        };
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="display_name"/>
+                    <field name="foo"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    throw new Error("Should not do a read_group RPC");
+                }
+            },
+            searchMenuTypes: ["filter", "favorite"],
+            context: { search_default_foo: 1 },
+        });
+
+        assert.containsNone(
+            target,
+            ".o_control_panel div.o_search_options div.o_group_by_menu",
+            "there should not be groupby menu"
+        );
+        assert.deepEqual(getFacetTexts(target), []);
+    });
+
+    QUnit.test("selection changes are triggered correctly", async function (assert) {
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+        });
+        var tbody_selector = target.querySelector("tbody .o_list_record_selector input");
+        var thead_selector = target.querySelector("thead .o_list_record_selector input");
+
+        assert.strictEqual(list.model.root.selection.length, 0, "no record should be selected");
+        assert.notOk(tbody_selector.checked, "selection checkbox should be checked");
+
+        // tbody checkbox click
+        await click(tbody_selector);
+        assert.strictEqual(list.model.root.selection.length, 1, "only 1 record should be selected");
+        assert.deepEqual(
+            list.model.root.selection[0].data,
+            {
+                bar: true,
+                foo: "yop",
+            },
+            "the correct record should be selected"
+        );
+        assert.ok(tbody_selector.checked, "selection checkbox should be checked");
+
+        await click(tbody_selector);
+        assert.strictEqual(list.model.root.selection.length, 0, "no record should be selected");
+        assert.notOk(tbody_selector.checked, "selection checkbox should be checked");
+
+        // head checkbox click
+        await click(thead_selector);
+        assert.strictEqual(list.model.root.selection.length, 4, "all records should be selected");
+        assert.containsN(
+            target,
+            "tbody .o_list_record_selector input:checked",
+            target.querySelectorAll("tbody tr").length,
+            "all selection checkboxes should be checked"
+        );
+
+        await click(thead_selector);
+        assert.strictEqual(list.model.root.selection.length, 0, "no records should be selected");
+        assert.containsNone(
+            target,
+            "tbody .o_list_record_selector input:checked",
+            "no selection checkbox should be checked"
+        );
+    });
+
+    QUnit.test(
+        "Row selection checkbox can be toggled by clicking on the cell",
+        async function (assert) {
+            const list = await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            });
+
+            assert.strictEqual(list.model.root.selection.length, 0, "no record should be selected");
+
+            await click(target.querySelector("tbody .o_list_record_selector"));
+            assert.containsOnce(target, "tbody .o_list_record_selector input:checked");
+            assert.strictEqual(
+                list.model.root.selection.length,
+                1,
+                "only 1 record should be selected"
+            );
+            await click(target.querySelector("tbody .o_list_record_selector"));
+            assert.containsNone(target, ".o_list_record_selector input:checked");
+            assert.strictEqual(list.model.root.selection.length, 0, "no record should be selected");
+
+            await click(target.querySelector("thead .o_list_record_selector"));
+            assert.containsN(target, ".o_list_record_selector input:checked", 5);
+            assert.strictEqual(
+                list.model.root.selection.length,
+                4,
+                "all records should be selected"
+            );
+            await click(target.querySelector("thead .o_list_record_selector"));
+            assert.containsNone(target, ".o_list_record_selector input:checked");
+            assert.strictEqual(list.model.root.selection.length, 0, "no record should be selected");
+        }
+    );
+
+    QUnit.test("head selector is toggled by the other selectors", async function (assert) {
+        await makeView({
+            type: "list",
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            serverData,
+            groupBy: ["bar"],
+            resModel: "foo",
+        });
+
+        assert.notOk(
+            target.querySelector("thead .o_list_record_selector input").checked,
+            "Head selector should be unchecked"
+        );
+
+        await click(target.querySelector(".o_group_header:nth-child(2)"));
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        assert.containsN(
+            target,
+            "tbody .o_list_record_selector input:checked",
+            3,
+            "All visible checkboxes should be checked"
+        );
+
+        await click(target.querySelector(".o_group_header:first-child"));
+        assert.notOk(
+            target.querySelector("thead .o_list_record_selector input").checked,
+            "Head selector should be unchecked"
+        );
+
+        await click(target.querySelector("tbody:nth-child(2) .o_list_record_selector input"));
+        assert.ok(
+            target.querySelector("thead .o_list_record_selector input").checked,
+            "Head selector should be checked"
+        );
+
+        await click(target.querySelector("tbody .o_list_record_selector input"));
+
+        assert.notOk(
+            target.querySelector("thead .o_list_record_selector input").checked,
+            "Head selector should be unchecked"
+        );
+
+        await click(target.querySelector(".o_group_header"));
+
+        assert.ok(
+            target.querySelector("thead .o_list_record_selector input").checked,
+            "Head selector should be checked"
+        );
+    });
+
+    QUnit.test("selection box is properly displayed (single page)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // select a record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsNone(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "1 selected"
+        );
+
+        // select all records of first page
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsNone(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "4 selected"
+        );
+
+        // unselect a record
+        await click(target.querySelectorAll(".o_data_row .o_list_record_selector input")[1]);
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsNone(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "3 selected"
+        );
+    });
+
+    QUnit.test("selection box is properly displayed (multi pages)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="3"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 3);
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // select a record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsNone(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "1 selected"
+        );
+
+        // select all records of first page
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsOnce(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.replace(/\s+/g, " ").trim(),
+            "3 selected Select all 4"
+        );
+
+        // select all domain
+        await click(target.querySelector(".o_list_selection_box .o_list_select_domain"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "All 4 selected"
+        );
+    });
+
+    QUnit.test("selection box is properly displayed (group list)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["foo"],
+        });
+        assert.containsN(target, ".o_group_header", 3);
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // open first group
+        await click(target.querySelector(".o_group_header"));
+
+        // select a record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsNone(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "1 selected"
+        );
+
+        // select all records of first page
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.containsOnce(target.querySelector(".o_list_selection_box"), ".o_list_select_domain");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.replace(/\s+/g, " ").trim(),
+            "2 selected Select all 4"
+        );
+
+        // select all domain
+        await click(target.querySelector(".o_list_selection_box .o_list_select_domain"));
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "All 4 selected"
+        );
+    });
+
+    QUnit.test("selection box is displayed after header buttons", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <header>
+                         <button name="x" type="object" class="plaf" string="plaf"/>
+                         <button name="y" type="object" class="plouf" string="plouf"/>
+                    </header>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, ".o_data_row", 4);
+        assert.containsNone($(target).find(".o_cp_buttons"), ".o_list_selection_box");
+
+        // select a record
+        await click(target, ".o_data_row:first-child .o_list_record_selector input");
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        const lastElement = target.querySelector(".o_cp_buttons .o_list_buttons").lastElementChild;
+        assert.strictEqual(
+            lastElement,
+            target.querySelector(".o_cp_buttons .o_list_selection_box"),
+            "last element should selection box"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_selection_box").textContent.trim(),
+            "1 selected"
+        );
+    });
+
+    QUnit.test("selection box is removed after multi record edition", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree multi_edit="1"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, ".o_data_row", 4, "there should be 4 records");
+        assert.containsNone(
+            target.querySelector(".o_cp_buttons"),
+            ".o_list_selection_box",
+            "list selection box should not be displayed"
+        );
+
+        // select all records
+        await click(target.querySelector(".o_list_record_selector input"));
+        assert.containsOnce(
+            target.querySelector(".o_cp_buttons"),
+            ".o_list_selection_box",
+            "list selection box should be displayed"
+        );
+        assert.containsN(
+            target,
+            ".o_data_row .o_list_record_selector input:checked",
+            4,
+            "all 4 records should be selected"
+        );
+
+        // edit selected records
+        await click(target.querySelector(".o_data_row").querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_row [name=foo] input", "legion");
+        await click(target, ".modal-dialog button.btn-primary");
+        assert.containsNone(
+            target.querySelector(".o_cp_buttons"),
+            ".o_list_selection_box",
+            "list selection box should not be displayed"
+        );
+        assert.containsNone(
+            target,
+            ".o_data_row .o_list_record_selector input:checked",
+            "no records should be selected"
+        );
+    });
+
+    QUnit.test("selection is reset on reload", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="int_field" sum="Sum"/>
+                </tree>`,
+        });
+
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.strictEqual(
+            $(target).find("tfoot td:nth(2)").text(),
+            "32",
+            "total should be 32 (no record selected)"
+        );
+
+        // select first record
+        var firstRowSelector = target.querySelector("tbody .o_list_record_selector input");
+        await click(firstRowSelector);
+        assert.ok(firstRowSelector.checked, "first row should be selected");
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.strictEqual(
+            $(target).find("tfoot td:nth(2)").text(),
+            "10",
+            "total should be 10 (first record selected)"
+        );
+
+        await reloadListView(target);
+        firstRowSelector = target.querySelector("tbody .o_list_record_selector input");
+        assert.notOk(firstRowSelector.checked, "first row should no longer be selected");
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+        assert.strictEqual(
+            $(target).find("tfoot td:nth(2)").text(),
+            "32",
+            "total should be 32 (no more record selected)"
+        );
+    });
+
+    QUnit.test("selection is kept on render without reload", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["foo"],
+            actionMenus: {},
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="int_field" sum="Sum"/>
+                </tree>`,
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // open blip grouping and check all lines
+        await click($(target).find('.o_group_header:contains("blip (2)")')[0]);
+        await click(target.querySelector(".o_data_row input"));
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // open yop grouping and verify blip are still checked
+        await click($(target).find('.o_group_header:contains("yop (1)")')[0]);
+        assert.containsOnce(
+            target,
+            ".o_data_row input:checked",
+            "opening a grouping does not uncheck others"
+        );
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+
+        // close and open blip grouping and verify blip are unchecked
+        await click($(target).find('.o_group_header:contains("blip (2)")')[0]);
+        await click($(target).find('.o_group_header:contains("blip (2)")')[0]);
+        assert.containsNone(
+            target,
+            ".o_data_row input:checked",
+            "opening and closing a grouping uncheck its elements"
+        );
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsNone(target.querySelector(".o_cp_buttons"), ".o_list_selection_box");
+    });
+
+    QUnit.test("aggregates are computed correctly", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="int_field" sum="Sum"/></tree>',
+            searchViewArch: `
+                <search>
+                    <filter name="my_filter" string="My Filter" domain="[('id', '=', 0)]"/>
+                </search>`,
+        });
+        const tbodySelectors = target.querySelectorAll("tbody .o_list_record_selector input");
+        const theadSelector = target.querySelector("thead .o_list_record_selector input");
+
+        assert.strictEqual(target.querySelectorAll("tfoot td")[2].innerText, "32");
+
+        await click(tbodySelectors[0]);
+        await click(tbodySelectors[3]);
+        assert.strictEqual(target.querySelectorAll("tfoot td")[2].innerText, "6");
+
+        await click(theadSelector);
+        assert.strictEqual(target.querySelectorAll("tfoot td")[2].innerText, "32");
+
+        // Let's update the view to dislay NO records
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "My Filter");
+        assert.strictEqual(
+            target.querySelectorAll("tfoot td")[2].innerText,
+            "",
+            "No records, so no total."
+        );
+    });
+
+    QUnit.test("aggregates are computed correctly in grouped lists", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["m2o"],
+            arch:
+                '<tree editable="bottom"><field name="foo" /><field name="int_field" sum="Sum"/></tree>',
+        });
+        const groupHeaders = target.querySelectorAll(".o_group_header");
+        assert.strictEqual(
+            groupHeaders[0].querySelector("td:last-child").textContent,
+            "23",
+            "first group total should be 23"
+        );
+        assert.strictEqual(
+            groupHeaders[1].querySelector("td:last-child").textContent,
+            "9",
+            "second group total should be 9"
+        );
+        assert.strictEqual(
+            target.querySelector("tfoot td:last-child").textContent,
+            "32",
+            "total should be 32"
+        );
+        await click(groupHeaders[0]);
+        await click(target.querySelector("tbody .o_list_record_selector input:first-child"));
+        assert.strictEqual(
+            target.querySelector("tfoot td:last-child").textContent,
+            "10",
+            "total should be 10 as first record of first group is selected"
+        );
+    });
+
+    QUnit.test(
+        "hide aggregated value in grouped lists when no data provided by RPC call",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                groupBy: ["bar"],
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="qux" widget="float_time" sum="Sum"/>
+                    </tree>`,
+                mockRPC: async function (route, args, performRPC) {
+                    if (args.method === "web_read_group") {
+                        const result = await performRPC(route, args);
+                        result.groups.forEach((group) => {
+                            delete group.qux;
+                        });
+                        return Promise.resolve(result);
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelectorAll("tfoot td")[2].textContent,
+                "",
+                "There isn't any aggregated value"
+            );
+        }
+    );
+
+    QUnit.test("aggregates are updated when a line is edited", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="int_field" sum="Sum"/></tree>',
+        });
+
+        assert.strictEqual(
+            target.querySelector('td[data-tooltip="Sum"]').innerText,
+            "32",
+            "current total should be 32"
+        );
+
+        await click(target.querySelector("tr.o_data_row td.o_data_cell"));
+        await editInput(target, "td.o_data_cell input", "15");
+
+        assert.strictEqual(
+            target.querySelector('td[data-tooltip="Sum"]').innerText,
+            "37",
+            "current total should be 37"
+        );
+    });
+
+    QUnit.test("aggregates are formatted according to field widget", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="qux" widget="float_time" sum="Sum"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            target.querySelectorAll("tfoot td")[2].textContent,
+            "19:24",
+            "total should be formatted as a float_time"
+        );
+    });
+
+    QUnit.test("aggregates digits can be set with digits field attribute", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="amount" widget="monetary" sum="Sum" digits="[69,3]"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row td")[1].textContent,
+            "1200.00",
+            "field should still be formatted based on currency"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("tfoot td")[1].textContent,
+            "2000.000",
+            "aggregates monetary use digits attribute if available"
+        );
+    });
+
+    QUnit.test("groups can be sorted on aggregates", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["foo"],
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field" sum="Sum"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    assert.step(args.kwargs.orderby || "default order");
+                }
+            },
+        });
+
+        assert.strictEqual(
+            $(target).find("tbody .o_list_number").text(),
+            "51710",
+            "initial order should be 5, 17, 17"
+        );
+        assert.strictEqual($(target).find("tfoot td:last()").text(), "32", "total should be 32");
+
+        await click(target, ".o_column_sortable");
+        assert.strictEqual(
+            $(target).find("tfoot td:last()").text(),
+            "32",
+            "total should still be 32"
+        );
+        assert.strictEqual(
+            $(target).find("tbody .o_list_number").text(),
+            "51017",
+            "order should be 5, 10, 17"
+        );
+
+        await click(target, ".o_column_sortable");
+        assert.strictEqual(
+            $(target).find("tbody .o_list_number").text(),
+            "17105",
+            "initial order should be 17, 10, 5"
+        );
+        assert.strictEqual(
+            $(target).find("tfoot td:last()").text(),
+            "32",
+            "total should still be 32"
+        );
+
+        assert.verifySteps(["default order", "int_field ASC", "int_field DESC"]);
+    });
+
+    QUnit.test("groups cannot be sorted on non-aggregable fields", async function (assert) {
+        serverData.models.foo.fields.sort_field = {
+            string: "sortable_field",
+            type: "sting",
+            sortable: true,
+            default: "value",
+        };
+        _.each(serverData.models.records, function (elem) {
+            elem.sort_field = "value" + elem.id;
+        });
+        serverData.models.foo.fields.foo.sortable = true;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["foo"],
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                    <field name="sort_field"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    assert.step(args.kwargs.orderby || "default order");
+                }
+            },
+        });
+        assert.verifySteps(["default order"]);
+        //we cannot sort by sort_field since it doesn't have a group_operator
+        await click(target.querySelectorAll(".o_column_sortable")[2]);
+        assert.verifySteps([]);
+        //we can sort by int_field since it has a group_operator
+        await click(target.querySelectorAll(".o_column_sortable")[1]);
+        assert.verifySteps(["int_field ASC"]);
+        //we keep previous order
+        await click(target.querySelectorAll(".o_column_sortable")[2]);
+        assert.verifySteps([]);
+        //we can sort on foo since we are groupped by foo + previous order
+        await click(target.querySelectorAll(".o_column_sortable")[0]);
+        assert.verifySteps(["foo ASC, int_field ASC"]);
+    });
+
+    QUnit.test("properly apply onchange in simple case", async function (assert) {
+        serverData.models.foo.onchanges = {
+            foo: function (obj) {
+                obj.int_field = obj.foo.length + 1000;
+            },
+        };
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="int_field"/></tree>',
+        });
+
+        await click(target.querySelector(".o_field_cell"));
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "10",
+            "should contain initial value"
+        );
+
+        await editInput(target, ".o_field_widget[name=foo] input", "tralala");
+
+        assert.strictEqual(
+            target.querySelector(".o_field_widget[name=int_field] input").value,
+            "1007",
+            "should contain input with onchange applied"
+        );
+    });
+
+    QUnit.test("column width should not change when switching mode", async function (assert) {
+        // Warning: this test is css dependant
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="int_field" readonly="1"/>
+                    <field name="m2o"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+        });
+
+        var startWidths = [...target.querySelectorAll("thead th")].map((el) => el.offsetWidth);
+        var startWidth = window.getComputedStyle(target.querySelector("table")).width;
+
+        // start edition of first row
+        await click(target.querySelector("td:not(.o_list_record_selector)"));
+
+        var editionWidths = [...target.querySelectorAll("thead th")].map((el) => el.offsetWidth);
+        var editionWidth = window.getComputedStyle(target.querySelector("table")).width;
+
+        // leave edition
+        await click(target.querySelector(".o_list_button_save"));
+
+        var readonlyWidths = [...target.querySelectorAll("thead th")].map((el) => el.offsetWidth);
+        var readonlyWidth = window.getComputedStyle(target.querySelector("table")).width;
+
+        assert.strictEqual(
+            editionWidth,
+            startWidth,
+            "table should have kept the same width when switching from readonly to edit mode"
+        );
+        assert.deepEqual(
+            editionWidths,
+            startWidths,
+            "width of columns should remain unchanged when switching from readonly to edit mode"
+        );
+        assert.strictEqual(
+            readonlyWidth,
+            editionWidth,
+            "table should have kept the same width when switching from edit to readonly mode"
+        );
+        assert.deepEqual(
+            readonlyWidths,
+            editionWidths,
+            "width of columns should remain unchanged when switching from edit to readonly mode"
+        );
+    });
+
+    QUnit.test(
+        "column widths should depend on the content when there is data",
+        async function (assert) {
+            serverData.models.foo.records[0].foo = "Some very very long value for a char field";
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="bar"/>
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                        <field name="qux"/>
+                        <field name="date"/>
+                        <field name="datetime"/>
+                    </tree>`,
+                limit: 2,
+            });
+            var widthPage1 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+
+            await pagerNext(target);
+
+            var widthPage2 = target.querySelector(`th[data-name=foo]`).offsetWidth;
+            assert.ok(
+                widthPage1 > widthPage2,
+                "column widths should be computed dynamically according to the content"
+            );
+        }
+    );
+
+    QUnit.test(
+        "width of some of the fields should be hardcoded if no data",
+        async function (assert) {
+            const assertions = [
+                { field: "bar", expected: 70, type: "Boolean" },
+                { field: "int_field", expected: 74, type: "Integer" },
+                { field: "qux", expected: 92, type: "Float" },
+                { field: "date", expected: 92, type: "Date" },
+                { field: "datetime", expected: 146, type: "Datetime" },
+                { field: "amount", expected: 104, type: "Monetary" },
+            ];
+            assert.expect(9);
+
+            serverData.models.foo.records = [];
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="bar"/>
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                        <field name="qux"/>
+                        <field name="date"/>
+                        <field name="datetime"/>
+                        <field name="amount"/>
+                        <field name="currency_id" width="25px"/>
+                    </tree>`,
+            });
+
+            assert.containsNone(
+                target,
+                ".o_resize",
+                "There shouldn't be any resize handle if no data"
+            );
+            assertions.forEach((a) => {
+                assert.strictEqual(
+                    target.querySelector(`th[data-name="${a.field}"]`).offsetWidth,
+                    a.expected,
+                    `Field ${a.type} should have a fixed width of ${a.expected} pixels`
+                );
+            });
+            assert.strictEqual(
+                target.querySelector('th[data-name="foo"]').style.width,
+                "100%",
+                "Char field should occupy the remaining space"
+            );
+            assert.strictEqual(
+                target.querySelector('th[data-name="currency_id"]').offsetWidth,
+                25,
+                "Currency field should have a fixed width of 25px (see arch)"
+            );
+        }
+    );
+
+    QUnit.test(
+        "width of some fields should be hardcoded if no data, and list initially invisible",
+        async function (assert) {
+            const assertions = [
+                { field: "bar", expected: 70, type: "Boolean" },
+                { field: "int_field", expected: 74, type: "Integer" },
+                { field: "qux", expected: 92, type: "Float" },
+                { field: "date", expected: 92, type: "Date" },
+                { field: "datetime", expected: 146, type: "Datetime" },
+                { field: "amount", expected: 104, type: "Monetary" },
+            ];
+            assert.expect(12);
+
+            serverData.models.foo.fields.foo_o2m = {
+                string: "Foo O2M",
+                type: "one2many",
+                relation: "foo",
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                mode: "edit",
+                arch: `
+                    <form>
+                        <sheet>
+                            <notebook>
+                                <page string="Page1"></page>
+                                <page string="Page2">
+                                    <field name="foo_o2m">
+                                        <tree editable="bottom">
+                                            <field name="bar"/>
+                                            <field name="foo"/>
+                                            <field name="int_field"/>
+                                            <field name="qux"/>
+                                            <field name="date"/>
+                                            <field name="datetime"/>
+                                            <field name="amount"/>
+                                            <field name="currency_id" width="25px"/>
+                                        </tree>
+                                    </field>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+            });
+
+            assert.isNotVisible(target.querySelector(".o_field_one2many"));
+
+            await click(target.querySelector(".nav-item:last-child .nav-link"));
+
+            assert.isVisible(target.querySelector(".o_field_one2many"));
+
+            assert.containsNone(
+                target,
+                ".o_field_one2many .o_resize",
+                "There shouldn't be any resize handle if no data"
+            );
+            assertions.forEach((a) => {
+                assert.strictEqual(
+                    target.querySelector(`.o_field_one2many th[data-name="${a.field}"]`)
+                        .offsetWidth,
+                    a.expected,
+                    `Field ${a.type} should have a fixed width of ${a.expected} pixels`
+                );
+            });
+            assert.strictEqual(
+                target.querySelector('.o_field_one2many th[data-name="foo"]').style.width,
+                "100%",
+                "Char field should occupy the remaining space"
+            );
+            assert.strictEqual(
+                target.querySelector('th[data-name="currency_id"]').offsetWidth,
+                25,
+                "Currency field should have a fixed width of 25px (see arch)"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_list_record_remove_header").style.width,
+                "32px"
+            );
+        }
+    );
+
+    QUnit.test(
+        "empty editable list with the handle widget and no content help",
+        async function (assert) {
+            // no records for the foo model
+            serverData.models.foo.records = [];
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="int_field" widget="handle" />
+                        <field name="foo" />
+                    </tree>`,
+                noContentHelp: '<p class="hello">click to add a foo</p>',
+            });
+
+            // as help is being provided in the action, table won't be rendered until a record exists
+            assert.containsNone(
+                target,
+                ".o_list_table",
+                " there should not be any records in the view."
+            );
+            assert.containsOnce(target, ".o_view_nocontent", "should have no content help");
+
+            // click on create button
+            await click(target.querySelector(".o_list_button_add"));
+            const handleWidgetMinWidth = "33px";
+            const handleWidgetHeader = target.querySelector("thead > tr > th.o_handle_cell");
+
+            assert.strictEqual(
+                window.getComputedStyle(handleWidgetHeader).minWidth,
+                handleWidgetMinWidth,
+                "While creating first record, min-width should be applied to handle widget."
+            );
+
+            // creating one record
+            await editInput(target, ".o_selected_row [name='foo'] input", "test_foo");
+            await clickSave(target);
+            assert.strictEqual(
+                window.getComputedStyle(handleWidgetHeader).minWidth,
+                handleWidgetMinWidth,
+                "After creation of the first record, min-width of the handle widget should remain as it is"
+            );
+        }
+    );
+
+    QUnit.test("editable list: overflowing table", async function (assert) {
+        serverData.models.bar = {
+            fields: {
+                titi: { string: "Small char", type: "char", sortable: true },
+                grosminet: { string: "Beeg char", type: "char", sortable: true },
+            },
+            records: [
+                {
+                    id: 1,
+                    titi: "Tiny text",
+                    grosminet:
+                        // Just want to make sure that the table is overflowed
+                        `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Donec est massa, gravida eget dapibus ac, eleifend eget libero.
+                        Suspendisse feugiat sed massa eleifend vestibulum. Sed tincidunt
+                        velit sed lacinia lacinia. Nunc in fermentum nunc. Vestibulum ante
+                        ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+                        Curae; Nullam ut nisi a est ornare molestie non vulputate orci.
+                        Nunc pharetra porta semper. Mauris dictum eu nulla a pulvinar. Duis
+                        eleifend odio id ligula congue sollicitudin. Curabitur quis aliquet
+                        nunc, ut aliquet enim. Suspendisse malesuada felis non metus
+                        efficitur aliquet.`,
+                },
+            ],
+        };
+        await makeView({
+            type: "list",
+            resModel: "bar",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="titi"/>
+                    <field name="grosminet" widget="char"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector("table").offsetWidth,
+            target.querySelector(".o_list_renderer").offsetWidth,
+            "Table should not be stretched by its content"
+        );
+    });
+
+    QUnit.test("editable list: overflowing table (3 columns)", async function (assert) {
+        const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Donec est massa, gravida eget dapibus ac, eleifend eget libero.
+                        Suspendisse feugiat sed massa eleifend vestibulum. Sed tincidunt
+                        velit sed lacinia lacinia. Nunc in fermentum nunc. Vestibulum ante
+                        ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+                        Curae; Nullam ut nisi a est ornare molestie non vulputate orci.
+                        Nunc pharetra porta semper. Mauris dictum eu nulla a pulvinar. Duis
+                        eleifend odio id ligula congue sollicitudin. Curabitur quis aliquet
+                        nunc, ut aliquet enim. Suspendisse malesuada felis non metus
+                        efficitur aliquet.`;
+
+        serverData.models.bar = {
+            fields: {
+                titi: { string: "Small char", type: "char", sortable: true },
+                grosminet1: { string: "Beeg char 1", type: "char", sortable: true },
+                grosminet2: { string: "Beeg char 2", type: "char", sortable: true },
+                grosminet3: { string: "Beeg char 3", type: "char", sortable: true },
+            },
+            records: [
+                {
+                    id: 1,
+                    titi: "Tiny text",
+                    grosminet1: longText,
+                    grosminet2: longText + longText,
+                    grosminet3: longText + longText + longText,
+                },
+            ],
+        };
+        await makeView({
+            arch: `
+                <tree editable="top">
+                    <field name="titi"/>
+                    <field name="grosminet1" class="large"/>
+                    <field name="grosminet3" class="large"/>
+                    <field name="grosminet2" class="large"/>
+                </tree>`,
+            serverData,
+            resModel: "bar",
+            type: "list",
+        });
+
+        assert.strictEqual(
+            target.querySelector("table").offsetWidth,
+            target.querySelector(".o_list_view").offsetWidth
+        );
+        const largeCells = target.querySelectorAll(".o_data_cell.large");
+        assert.ok(Math.abs(largeCells[0].offsetWidth - largeCells[1].offsetWidth) <= 1);
+        assert.ok(Math.abs(largeCells[1].offsetWidth - largeCells[2].offsetWidth) <= 1);
+        assert.ok(
+            target.querySelector(".o_data_cell:not(.large)").offsetWidth < largeCells[0].offsetWidth
+        );
+    });
+
+    QUnit.test(
+        "editable list: list view in an initially unselected notebook page",
+        async function (assert) {
+            serverData.models.foo.records = [{ id: 1, o2m: [1] }];
+            serverData.models.bar = {
+                fields: {
+                    titi: { string: "Small char", type: "char", sortable: true },
+                    grosminet: { string: "Beeg char", type: "char", sortable: true },
+                },
+                records: [
+                    {
+                        id: 1,
+                        titi: "Tiny text",
+                        grosminet:
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+                            "Ut at nisi congue, facilisis neque nec, pulvinar nunc. " +
+                            "Vivamus ac lectus velit.",
+                    },
+                ],
+            };
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <sheet>
+                            <notebook>
+                                <page string="Page1"></page>
+                                <page string="Page2">
+                                    <field name="o2m">
+                                        <tree editable="bottom">
+                                            <field name="titi"/>
+                                            <field name="grosminet"/>
+                                        </tree>
+                                    </field>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+            });
+            await clickEdit(target);
+            assert.containsNone(target, ".o_field_one2many");
+
+            await click(target.querySelector(".nav-item:last-child .nav-link"));
+            assert.containsOnce(target, ".o_field_one2many");
+
+            const [titi, grosminet] = target.querySelectorAll(".tab-pane:last-child th");
+            assert.ok(
+                titi.style.width.split("px")[0] > 80 && grosminet.style.width.split("px")[0] > 700,
+                "list has been correctly frozen after being visible"
+            );
+        }
+    );
+
+    QUnit.test("editable list: list view hidden by an invisible modifier", async function (assert) {
+        serverData.models.foo.records = [{ id: 1, bar: true, o2m: [1] }];
+        serverData.models.bar = {
+            fields: {
+                titi: { string: "Small char", type: "char", sortable: true },
+                grosminet: { string: "Beeg char", type: "char", sortable: true },
+            },
+            records: [
+                {
+                    id: 1,
+                    titi: "Tiny text",
+                    grosminet:
+                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+                        "Ut at nisi congue, facilisis neque nec, pulvinar nunc. " +
+                        "Vivamus ac lectus velit.",
+                },
+            ],
+        };
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            resId: 1,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="bar"/>
+                        <field name="o2m" attrs="{'invisible': [('bar', '=', True)]}">
+                            <tree editable="bottom">
+                                <field name="titi"/>
+                                <field name="grosminet"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+        });
+        await clickEdit(target);
+        assert.containsNone(target, ".o_field_one2many");
+
+        await click(target.querySelector(".o_field_boolean input"));
+        assert.containsOnce(target, ".o_field_one2many");
+
+        const [titi, grosminet] = target.querySelectorAll("th");
+        assert.ok(
+            titi.style.width.split("px")[0] > 80 && grosminet.style.width.split("px")[0] > 700,
+            "list has been correctly frozen after being visible"
+        );
+    });
+
+    QUnit.test("editable list: updating list state while invisible", async function (assert) {
+        serverData.models.foo.onchanges = {
+            bar: function (obj) {
+                obj.o2m = [[5], [0, null, { display_name: "Whatever" }]];
+            },
+        };
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            resId: 1,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="bar"/>
+                        <notebook>
+                            <page string="Page 1"></page>
+                            <page string="Page 2">
+                                <field name="o2m">
+                                    <tree editable="bottom">
+                                        <field name="display_name"/>
+                                    </tree>
+                                </field>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+        });
+        await clickEdit(target);
+        assert.containsNone(target, ".o_field_one2many");
+
+        await click(target.querySelector(".o_field_boolean input"));
+        assert.containsNone(target, ".o_field_one2many");
+
+        await click(target.querySelector(".nav-item:last-child .nav-link"));
+        assert.containsOnce(target, ".o_field_one2many");
+        assert.strictEqual(
+            target.querySelector(".o_field_one2many .o_data_row").textContent,
+            "Whatever"
+        );
+        assert.notEqual(
+            target.querySelector("th").style.width,
+            "",
+            "Column header should have been frozen"
+        );
+    });
+
+    QUnit.test("empty list: state with nameless and stringless buttons", async function (assert) {
+        serverData.models.foo.records = [];
+        await makeView({
+            type: "list",
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <button string="choucroute"/>
+                    <button icon="fa-heart"/>
+                </tree>`,
+            serverData,
+            resModel: "foo",
+        });
+
+        assert.strictEqual(
+            [...target.querySelectorAll("th")].find((el) => el.textContent === "Foo").style.width,
+            "50%",
+            "Field column should be frozen"
+        );
+        assert.strictEqual(
+            target.querySelector("th:last-child").style.width,
+            "50%",
+            "Buttons column should be frozen"
+        );
+    });
+
+    QUnit.test("editable list: unnamed columns cannot be resized", async function (assert) {
+        serverData.models.foo.records = [{ id: 1, o2m: [1] }];
+        serverData.models.bar.records = [{ id: 1, display_name: "Oui" }];
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            resId: 1,
+            mode: "edit",
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="o2m">
+                            <tree editable="top">
+                                <field name="display_name"/>
+                                <button name="the_button" icon="fa-heart"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+        });
+
+        const [charTh, buttonTh] = target.querySelectorAll(".o_field_one2many th");
+        const thRect = charTh.getBoundingClientRect();
+        const resizeRect = charTh.querySelector(".o_resize").getBoundingClientRect();
+
+        assert.strictEqual(
+            thRect.x + thRect.width,
+            resizeRect.x + resizeRect.width,
+            "First resize handle should be attached at the end of the first header"
+        );
+        assert.containsNone(
+            buttonTh,
+            ".o_resize",
+            "Columns without name should not have a resize handle"
+        );
+    });
+
+    QUnit.test(
+        "editable list view, click on m2o dropdown does not close editable row",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="m2o"/></tree>',
+            });
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.strictEqual(
+                target.querySelector(".o_selected_row .o_field_many2one input").value,
+                ""
+            );
+            await click(target.querySelector(".o_selected_row .o_field_many2one input"));
+            assert.containsOnce(target, ".o_field_many2one .o-autocomplete--dropdown-menu");
+
+            await click(
+                target.querySelector(
+                    ".o_field_many2one .o-autocomplete--dropdown-menu .dropdown-item"
+                )
+            );
+            assert.strictEqual(
+                target.querySelector(".o_selected_row .o_field_many2one input").value,
+                "Value 1"
+            );
+            assert.containsOnce(target, ".o_selected_row", "should still have editable row");
+        }
+    );
+
+    QUnit.test(
+        "width of some of the fields should be hardcoded if no data (grouped case)",
+        async function (assert) {
+            const assertions = [
+                { field: "bar", expected: 70, type: "Boolean" },
+                { field: "int_field", expected: 74, type: "Integer" },
+                { field: "qux", expected: 92, type: "Float" },
+                { field: "date", expected: 92, type: "Date" },
+                { field: "datetime", expected: 146, type: "Datetime" },
+                { field: "amount", expected: 104, type: "Monetary" },
+            ];
+            assert.expect(9);
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="bar"/>
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                        <field name="qux"/>
+                        <field name="date"/>
+                        <field name="datetime"/>
+                        <field name="amount"/>
+                        <field name="currency_id" width="25px"/>
+                    </tree>`,
+                groupBy: ["int_field"],
+            });
+
+            assert.containsNone(
+                target,
+                ".o_resize",
+                "There shouldn't be any resize handle if no data"
+            );
+            assertions.forEach((a) => {
+                assert.strictEqual(
+                    a.expected,
+                    target.querySelectorAll(`th[data-name="${a.field}"]`)[0].offsetWidth,
+                    `Field ${a.type} should have a fixed width of ${a.expected} pixels`
+                );
+            });
+            assert.strictEqual(
+                target.querySelectorAll('th[data-name="foo"]')[0].style.width,
+                "100%",
+                "Char field should occupy the remaining space"
+            );
+            assert.strictEqual(
+                target.querySelectorAll('th[data-name="currency_id"]')[0].offsetWidth,
+                25,
+                "Currency field should have a fixed width of 25px (see arch)"
+            );
+        }
+    );
+
+    QUnit.test("column width should depend on the widget", async function (assert) {
+        serverData.models.foo.records = []; // the width heuristic only applies when there are no records
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="datetime" widget="date"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+        assert.strictEqual(
+            target.querySelector('th[data-name="datetime"]').offsetWidth,
+            92,
+            "should be the optimal width to display a date, not a datetime"
+        );
+    });
+
+    QUnit.test("column widths are kept when adding first record", async function (assert) {
+        serverData.models.foo.records = []; // in this scenario, we start with no records
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="datetime"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        var width = target.querySelectorAll('th[data-name="datetime"]')[0].offsetWidth;
+
+        await click(target.querySelector(".o_list_button_add"));
+
+        assert.containsOnce(target, ".o_data_row");
+        assert.strictEqual(
+            target.querySelectorAll('th[data-name="datetime"]')[0].offsetWidth,
+            width
+        );
+    });
+
+    QUnit.test("column widths are kept when editing a record", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="datetime"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        var width = target.querySelectorAll('th[data-name="datetime"]')[0].offsetWidth;
+
+        await click(target.querySelector(".o_data_row:nth-child(1) > .o_data_cell:nth-child(2)"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        var longVal =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, " +
+            "justo nec tincidunt feugiat, mi justo suscipit libero, sit amet tempus ipsum purus " +
+            "bibendum est.";
+        await editInput(target.querySelector(".o_field_widget[name=text] .o_input"), null, longVal);
+        await clickSave(target);
+
+        assert.containsNone(target, ".o_selected_row");
+        assert.strictEqual(
+            target.querySelectorAll('th[data-name="datetime"]')[0].offsetWidth,
+            width
+        );
+    });
+
+    QUnit.test("column widths are kept when switching records in edition", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="m2o"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        const width = target.querySelectorAll('th[data-name="m2o"]')[0].offsetWidth;
+
+        await click(target.querySelector(".o_data_row:nth-child(1) > .o_data_cell:nth-child(2)"));
+
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(1)"), "o_selected_row");
+        assert.strictEqual(target.querySelectorAll('th[data-name="m2o"]')[0].offsetWidth, width);
+
+        await click(target.querySelector(".o_data_row:nth-child(2) > .o_data_cell:nth-child(2)"));
+
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+        assert.strictEqual(target.querySelectorAll('th[data-name="m2o"]')[0].offsetWidth, width);
+    });
+
+    QUnit.test("column widths are re-computed on window resize", async function (assert) {
+        serverData.models.foo.records[0].text =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
+            "Sed blandit, justo nec tincidunt feugiat, mi justo suscipit libero, sit amet tempus " +
+            "ipsum purus bibendum est.";
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="datetime"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        const initialTextWidth = target.querySelectorAll('th[data-name="text"]')[0].offsetWidth;
+        const selectorWidth = target.querySelectorAll("th.o_list_record_selector")[0].offsetWidth;
+
+        // simulate a window resize
+        target.style.width = target.getBoundingClientRect().width / 2 + "px";
+        window.dispatchEvent(new Event("resize"));
+
+        const postResizeTextWidth = target.querySelectorAll('th[data-name="text"]')[0].offsetWidth;
+        const postResizeSelectorWidth = target.querySelectorAll("th.o_list_record_selector")[0]
+            .offsetWidth;
+        assert.ok(postResizeTextWidth < initialTextWidth);
+        assert.strictEqual(selectorWidth, postResizeSelectorWidth);
+    });
+
+    QUnit.test(
+        "columns with an absolute width are never narrower than that width",
+        async function (assert) {
+            serverData.models.foo.records[0].text =
+                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " +
+                "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim " +
+                "veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo " +
+                "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+                "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, " +
+                "sunt in culpa qui officia deserunt mollit anim id est laborum";
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="datetime"/>
+                        <field name="int_field" width="200px"/>
+                        <field name="text"/>
+                    </tree>`,
+            });
+
+            assert.strictEqual($(target).find('th[data-name="datetime"]')[0].offsetWidth, 146);
+            assert.strictEqual($(target).find('th[data-name="int_field"]')[0].offsetWidth, 200);
+        }
+    );
+
+    QUnit.test("list view with data: text columns are not crushed", async function (assert) {
+        const longText =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
+            "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim " +
+            "veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo " +
+            "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, " +
+            "sunt in culpa qui officia deserunt mollit anim id est laborum";
+        serverData.models.foo.records[0].foo = longText;
+        serverData.models.foo.records[0].text = longText;
+        serverData.models.foo.records[1].foo = "short text";
+        serverData.models.foo.records[1].text = "short text";
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="text"/></tree>',
+        });
+
+        const foo = [...target.querySelectorAll("th")].find((el) => el.textContent === "Foo");
+        const fooWidth = Math.ceil(foo.getBoundingClientRect().width);
+
+        const text = [...target.querySelectorAll("th")].find(
+            (el) => el.textContent === "text field"
+        );
+        const textWidth = Math.ceil(text.getBoundingClientRect().width);
+
+        assert.ok(
+            Math.abs(fooWidth - textWidth) <= 1,
+            "both columns should have been given the same width"
+        );
+
+        const firstRowHeight = $(target).find(".o_data_row:nth(0)")[0].offsetHeight;
+        const secondRowHeight = $(target).find(".o_data_row:nth(1)")[0].offsetHeight;
+        assert.ok(
+            firstRowHeight > secondRowHeight,
+            "in the first row, the (long) text field should be properly displayed on several lines"
+        );
+    });
+
+    QUnit.test("button in a list view with a default relative width", async function (assert) {
+        await makeView({
+            type: "list",
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <button name="the_button" icon="fa-heart" width="0.1"/>
+                </tree>`,
+            serverData,
+            resModel: "foo",
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_data_cell button").style.width,
+            "",
+            "width attribute should not change the CSS style"
+        );
+    });
+
+    QUnit.test("button columns in a list view don't have a max width", async function (assert) {
+        // set a long foo value s.t. the column can be squeezed
+        serverData.models.foo.records[0].foo = "Lorem ipsum dolor sit amet";
+        await makeView({
+            type: "list",
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <button name="b1" string="Do This"/>
+                    <button name="b2" string="Do That"/>
+                    <button name="b3" string="Or Rather Do Something Else"/>
+                </tree>`,
+            serverData,
+            resModel: "foo",
+        });
+
+        // simulate a window resize (buttons column width should not be squeezed)
+        target.style.width = "300px";
+        window.dispatchEvent(new Event("resize"));
+        await nextTick();
+
+        assert.strictEqual(
+            window.getComputedStyle(target.querySelectorAll("th")[1]).maxWidth,
+            "92px",
+            "max-width should be set on column foo to the minimum column width (92px)"
+        );
+        assert.strictEqual(
+            window.getComputedStyle(target.querySelectorAll("th")[2]).maxWidth,
+            "100%",
+            "no max-width should be harcoded on the buttons column"
+        );
+    });
+
+    QUnit.test("column widths are kept when editing multiple records", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="datetime"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        var width = target.querySelector('th[data-name="datetime"]').offsetWidth;
+
+        // select two records and edit
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+        await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+
+        assert.containsOnce(target, ".o_selected_row");
+        var longVal =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit, " +
+            "justo nec tincidunt feugiat, mi justo suscipit libero, sit amet tempus ipsum purus " +
+            "bibendum est.";
+        await editInput(target, ".o_field_widget[name=text] textarea", longVal);
+        assert.containsOnce(document.body, ".modal");
+        await click(target, ".modal .btn-primary");
+
+        assert.containsNone(target, ".o_selected_row");
+        assert.strictEqual(target.querySelector('th[data-name="datetime"]').offsetWidth, width);
+    });
+
+    QUnit.test(
+        "row height and width should not change when switching mode",
+        async function (assert) {
+            // Warning: this test is css dependant
+            serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+                force: true,
+            });
+
+            serverData.models.foo.fields.foo.translate = true;
+            serverData.models.foo.fields.boolean = { type: "boolean", string: "Bool" };
+            const currencies = {};
+            serverData.models.res_currency.records.forEach((currency) => {
+                currencies[currency.id] = currency;
+            });
+            patchWithCleanup(session, { currencies });
+
+            // the width is hardcoded to make sure we have the same condition
+            // between debug mode and non debug mode
+            target.style.width = "1200px";
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo" required="1"/>
+                        <field name="int_field" readonly="1"/>
+                        <field name="boolean"/>
+                        <field name="date"/>
+                        <field name="text"/>
+                        <field name="amount"/>
+                        <field name="currency_id" invisible="1"/>
+                        <field name="m2o"/>
+                        <field name="m2m" widget="many2many_tags"/>
+                    </tree>`,
+            });
+            const startHeight = target.querySelector(".o_data_row").offsetHeight;
+            const startWidth = target.querySelector(".o_data_row").offsetWidth;
+
+            // start edition of first row
+            await click(target.querySelector(".o_data_row > td:not(.o_list_record_selector)"));
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            const editionHeight = target.querySelector(".o_data_row").offsetHeight;
+            const editionWidth = target.querySelector(".o_data_row").offsetWidth;
+
+            // leave edition
+            await click(target.querySelector(".o_list_button_save"));
+            const readonlyHeight = target.querySelector(".o_data_row").offsetHeight;
+            const readonlyWidth = target.querySelector(".o_data_row").offsetWidth;
+
+            assert.strictEqual(startHeight, editionHeight);
+            assert.strictEqual(startHeight, readonlyHeight);
+            assert.strictEqual(startWidth, editionWidth);
+            assert.strictEqual(startWidth, readonlyWidth);
+        }
+    );
+
+    QUnit.test("fields are translatable in list view", async function (assert) {
+        serverData.models.foo.fields.foo.translate = true;
+        serviceRegistry.add("localization", makeFakeLocalizationService({ multiLang: true }), {
+            force: true,
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_button" && args.method === "translate_fields") {
+                    return Promise.resolve({
+                        domain: [],
+                        context: { search_default_name: "foo,foo" },
+                    });
+                }
+                if (route === "/web/dataset/call_kw/res.lang/get_installed") {
+                    return Promise.resolve([
+                        ["en_US", "English"],
+                        ["fr_BE", "Frenglish"],
+                    ]);
+                }
+            },
+            arch: '<tree editable="top">' + '<field name="foo" required="1"/>' + "</tree>",
+        });
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+        await click(target.querySelector("span.o_field_translate"));
+        assert.containsOnce(target, ".o_translation_dialog");
+        assert.containsN(
+            target.querySelector(".o_translation_dialog"),
+            ".translation>input.o_field_char",
+            2,
+            "modal should have 2 languages to translate"
+        );
+    });
+
+    QUnit.test("long words in text cells should break into smaller lines", async function (assert) {
+        serverData.models.foo.records[0].text = "a";
+        serverData.models.foo.records[1].text = "pneumonoultramicroscopicsilicovolcanoconiosis"; // longest english word I could find
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="text"/></tree>',
+        });
+
+        // Intentionally set the table width to a small size
+        $(target).find("table").width("100px");
+        $(target).find("th:last").width("100px");
+        var shortText = $(target).find(".o_data_row:eq(0) td:last")[0].clientHeight;
+        var longText = $(target).find(".o_data_row:eq(1) td:last")[0].clientHeight;
+        var emptyText = $(target).find(".o_data_row:eq(2) td:last")[0].clientHeight;
+
+        assert.strictEqual(
+            shortText,
+            emptyText,
+            "Short word should not change the height of the cell"
+        );
+        assert.ok(longText > emptyText, "Long word should change the height of the cell");
+    });
+
+    QUnit.test("deleting one record", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            actionMenus: {},
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 4, "should have 4 records");
+
+        await click(target.querySelector("tbody td.o_list_record_selector:first-child input"));
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+        assert.hasClass(
+            document.querySelector("body"),
+            "modal-open",
+            "body should have modal-open class"
+        );
+
+        await click(document, "body .modal footer button.btn-primary");
+
+        assert.containsN(target, "tbody td.o_list_record_selector", 3, "should have 3 records");
+    });
+
+    QUnit.test(
+        "deleting record which throws UserError should close confirmation dialog",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                actionMenus: {},
+                arch: '<tree><field name="foo"/></tree>',
+                mockRPC(route, args) {
+                    if (args.method === "unlink") {
+                        return Promise.reject({ message: "Odoo Server Error" });
+                    }
+                },
+            });
+
+            await click(target.querySelector("tbody td.o_list_record_selector:first-child input"));
+
+            assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Delete");
+            assert.containsOnce(
+                document.body,
+                ".modal",
+                "should have open the confirmation dialog"
+            );
+
+            await click(document, "body .modal footer button.btn-primary");
+            assert.containsNone(document.body, ".modal", "confirmation dialog should be closed");
+        }
+    );
+
+    QUnit.test("delete all records matching the domain", async function (assert) {
+        assert.expect(6);
+
+        serverData.models.foo.records.push({ id: 5, bar: true, foo: "xxx" });
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="2"><field name="foo"/></tree>',
+            domain: [["bar", "=", true]],
+            mockRPC(route, args) {
+                if (args.method === "unlink") {
+                    assert.deepEqual(args.args[0], [1, 2, 3, 5]);
+                }
+            },
+            actionMenus: {},
+        });
+        patchWithCleanup(list.env.services.notification, {
+            add: () => {
+                throw new Error("should not display a notification");
+            },
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 2, "should have 2 records");
+
+        await click(target.querySelector("thead .o_list_record_selector input"));
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target, ".o_list_selection_box .o_list_select_domain");
+
+        await click(target, ".o_list_selection_box .o_list_select_domain");
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+        await click(document, "body .modal footer button.btn-primary");
+    });
+
+    QUnit.test("delete all records matching the domain (limit reached)", async function (assert) {
+        assert.expect(8);
+
+        serverData.models.foo.records.push({ id: 5, bar: true, foo: "xxx" });
+        serverData.models.foo.records.push({ id: 6, bar: true, foo: "yyy" });
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="2"><field name="foo"/></tree>',
+            domain: [["bar", "=", true]],
+            mockRPC(route, args) {
+                if (args.method === "unlink") {
+                    assert.deepEqual(args.args[0], [1, 2, 3, 5]);
+                }
+            },
+            actionMenus: {},
+        });
+        patchWithCleanup(session, {
+            active_ids_limit: 4,
+        });
+        patchWithCleanup(list.env.services.notification, {
+            add: () => {
+                assert.step("notify");
+            },
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 2, "should have 2 records");
+
+        await click(target.querySelector("thead .o_list_record_selector input"));
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target, ".o_list_selection_box .o_list_select_domain");
+
+        await click(target.querySelector(".o_list_selection_box .o_list_select_domain"));
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+        await click(document, "body .modal footer button.btn-primary");
+
+        assert.verifySteps(["notify"]);
+    });
+
+    QUnit.test("archiving one record", async function (assert) {
+        // add active field on foo model and make all records active
+        serverData.models.foo.fields.active = { string: "Active", type: "boolean", default: true };
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            actionMenus: {},
+            arch: '<tree><field name="foo"/></tree>',
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 4, "should have 4 records");
+
+        await click(target.querySelector("tbody td.o_list_record_selector:first-child input"));
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+
+        assert.verifySteps([
+            "/web/dataset/call_kw/foo/get_views",
+            "/web/dataset/call_kw/foo/web_search_read",
+        ]);
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Archive");
+
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+        await click(document, ".modal-footer .btn-secondary");
+        assert.containsN(
+            target,
+            "tbody td.o_list_record_selector",
+            4,
+            "still should have 4 records"
+        );
+
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Archive");
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+        await click(document, ".modal-footer .btn-primary");
+        assert.containsN(target, "tbody td.o_list_record_selector", 3, "should have 3 records");
+        assert.verifySteps([
+            "/web/dataset/call_kw/foo/action_archive",
+            "/web/dataset/call_kw/foo/web_search_read",
+        ]);
+    });
+
+    QUnit.test("archive all records matching the domain", async function (assert) {
+        assert.expect(6);
+        // add active field on foo model and make all records active
+        serverData.models.foo.fields.active = { string: "Active", type: "boolean", default: true };
+        serverData.models.foo.records.push({ id: 5, bar: true, foo: "xxx" });
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="2"><field name="foo"/></tree>',
+            domain: [["bar", "=", true]],
+            mockRPC(route, args) {
+                if (args.method === "action_archive") {
+                    assert.deepEqual(args.args[0], [1, 2, 3, 5]);
+                }
+            },
+            actionMenus: {},
+        });
+        patchWithCleanup(list.env.services.notification, {
+            add: () => {
+                throw new Error("should not display a notification");
+            },
+            loadActionMenus: true,
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 2, "should have 2 records");
+
+        await click(target, "thead .o_list_record_selector input");
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target, ".o_list_selection_box .o_list_select_domain");
+
+        await click(target, ".o_list_selection_box .o_list_select_domain");
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Archive");
+
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+        await click(document, ".modal-footer .btn-primary");
+    });
+
+    QUnit.test("archive all records matching the domain (limit reached)", async function (assert) {
+        assert.expect(8);
+
+        // add active field on foo model and make all records active
+        serverData.models.foo.fields.active = { string: "Active", type: "boolean", default: true };
+        serverData.models.foo.records.push({ id: 5, bar: true, foo: "xxx" });
+        serverData.models.foo.records.push({ id: 6, bar: true, foo: "yyy" });
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="2"><field name="foo"/></tree>',
+            domain: [["bar", "=", true]],
+            mockRPC(route, args) {
+                if (args.method === "action_archive") {
+                    assert.deepEqual(args.args[0], [1, 2, 3, 5]);
+                }
+            },
+            actionMenus: {},
+        });
+
+        patchWithCleanup(session, {
+            active_ids_limit: 4,
+        });
+        patchWithCleanup(list.env.services.notification, {
+            add: () => {
+                assert.step("notify");
+            },
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsN(target, "tbody td.o_list_record_selector", 2, "should have 2 records");
+
+        await click(target, "thead .o_list_record_selector input");
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+        assert.containsOnce(target, ".o_list_selection_box .o_list_select_domain");
+
+        await click(target, ".o_list_selection_box .o_list_select_domain");
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Archive");
+
+        assert.strictEqual($(".modal").length, 1, "a confirm modal should be displayed");
+        await click(document.querySelector(".modal-footer .btn-primary"));
+
+        assert.verifySteps(["notify"]);
+    });
+
+    QUnit.test("archive/unarchive handles returned action", async function (assert) {
+        // add active field on foo model and make all records active
+        serverData.models.foo.fields.active = { string: "Active", type: "boolean", default: true };
+
+        serverData.actions = {
+            11: {
+                id: 11,
+                name: "Action 11",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[3, "list"]],
+                search_view_id: [9, "search"],
+            },
+        };
+        serverData.views = {
+            "foo,3,list": '<tree><field name="foo"/></tree>',
+            "foo,9,search": `
+                <search>
+                    <filter string="Not Bar" name="not bar" domain="[['bar','=',False]]"/>
+                </search>`,
+            "bar,false,form": '<form><field name="display_name"/></form>',
+        };
+
+        const mockRPC = (route) => {
+            if (route === "/web/dataset/call_kw/foo/action_archive") {
+                return {
+                    type: "ir.actions.act_window",
+                    name: "Archive Action",
+                    res_model: "bar",
+                    view_mode: "form",
+                    target: "new",
+                    views: [[false, "form"]],
+                };
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 11);
+
+        assert.containsNone(target, ".o_cp_action_menus", "sidebar should be invisible");
+        assert.containsN(target, "tbody td.o_list_record_selector", 4, "should have 4 records");
+
+        await click(target.querySelector("tbody td.o_list_record_selector input"));
+        assert.containsOnce(target, ".o_cp_action_menus", "sidebar should be visible");
+
+        await click(target.querySelector(".o_cp_action_menus .dropdown-toggle"));
+        const archiveItem = [
+            ...target.querySelectorAll(".o_cp_action_menus .dropdown-menu .o_menu_item"),
+        ].filter((elem) => elem.textContent === "Archive");
+        await click(archiveItem[0]);
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "a confirm modal should be displayed"
+        );
+
+        await click(document.querySelector(".modal .modal-footer .btn-primary"));
+        assert.strictEqual(
+            document.querySelectorAll(".modal").length,
+            1,
+            "archive action dialog should be displayed"
+        );
+        assert.strictEqual(
+            document.querySelector(".modal .modal-title").textContent.trim(),
+            "Archive Action",
+            "action wizard should have been opened"
+        );
+    });
+
+    QUnit.test("pager (ungrouped and grouped mode), default limit", async function (assert) {
+        assert.expect(4);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "web_search_read") {
+                    assert.strictEqual(args.kwargs.limit, 80, "default limit should be 80 in List");
+                }
+            },
+        });
+
+        assert.containsOnce(target, "div.o_control_panel .o_cp_pager .o_pager");
+        assert.strictEqual(target.querySelector(".o_pager_limit").innerText, "4");
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "Bar");
+        assert.strictEqual(target.querySelector(".o_pager_limit").innerText, "2");
+    });
+
+    QUnit.test("can sort records when clicking on header", async function (assert) {
+        serverData.models.foo.fields.foo.sortable = true;
+
+        let nbSearchRead = 0;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/foo/web_search_read") {
+                    nbSearchRead++;
+                }
+            },
+        });
+
+        assert.strictEqual(nbSearchRead, 1, "should have done one search_read");
+        assert.ok(
+            $(target).find("tbody tr:first td:contains(yop)").length,
+            "record 1 should be first"
+        );
+        assert.ok(
+            $(target).find("tbody tr:eq(3) td:contains(blip)").length,
+            "record 3 should be first"
+        );
+
+        nbSearchRead = 0;
+        await click($(target).find("thead th:contains(Foo)")[0]);
+        assert.strictEqual(nbSearchRead, 1, "should have done one search_read");
+        assert.ok(
+            $(target).find("tbody tr:first td:contains(blip)").length,
+            "record 3 should be first"
+        );
+        assert.ok(
+            $(target).find("tbody tr:eq(3) td:contains(yop)").length,
+            "record 1 should be first"
+        );
+
+        nbSearchRead = 0;
+        await click($(target).find("thead th:contains(Foo)")[0]);
+        assert.strictEqual(nbSearchRead, 1, "should have done one search_read");
+        assert.ok(
+            $(target).find("tbody tr:first td:contains(yop)").length,
+            "record 3 should be first"
+        );
+        assert.ok(
+            $(target).find("tbody tr:eq(3) td:contains(blip)").length,
+            "record 1 should be first"
+        );
+    });
+
+    QUnit.test("do not sort records when clicking on header with nolabel", async function (assert) {
+        serverData.models.foo.fields.foo.sortable = true;
+
+        let nbSearchRead = 0;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo" nolabel="1"/><field name="int_field"/></tree>',
+            mockRPC(route) {
+                if (route === "/web/dataset/call_kw/foo/web_search_read") {
+                    nbSearchRead++;
+                }
+            },
+        });
+
+        assert.strictEqual(nbSearchRead, 1, "should have done one search_read");
+        assert.strictEqual($(target).find(".o_data_cell").text(), "yop10blip9gnap17blip-4");
+
+        await click(target.querySelectorAll("thead th")[2]);
+        assert.strictEqual(nbSearchRead, 2, "should have done one other search_read");
+        assert.strictEqual($(target).find(".o_data_cell").text(), "blip-4blip9yop10gnap17");
+
+        await click(target.querySelectorAll("thead th")[1]);
+        assert.strictEqual(nbSearchRead, 2, "shouldn't have done anymore search_read");
+        assert.strictEqual($(target).find(".o_data_cell").text(), "blip-4blip9yop10gnap17");
+    });
+
+    QUnit.test("use default_order", async function (assert) {
+        assert.expect(3);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree default_order="foo"><field name="foo"/><field name="bar"/></tree>',
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/foo/web_search_read") {
+                    assert.strictEqual(
+                        args.kwargs.order,
+                        "foo ASC",
+                        "should correctly set the sort attribute"
+                    );
+                }
+            },
+        });
+
+        assert.ok(
+            $(target).find("tbody tr:first td:contains(blip)").length,
+            "record 3 should be first"
+        );
+        assert.ok(
+            $(target).find("tbody tr:eq(3) td:contains(yop)").length,
+            "record 1 should be first"
+        );
+    });
+
+    QUnit.test("use more complex default_order", async function (assert) {
+        assert.expect(3);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch:
+                '<tree default_order="foo, bar desc, int_field">' +
+                '<field name="foo"/><field name="bar"/>' +
+                "</tree>",
+            mockRPC(route, args) {
+                if (route === "/web/dataset/call_kw/foo/web_search_read") {
+                    assert.strictEqual(
+                        args.kwargs.order,
+                        "foo ASC, bar DESC, int_field ASC",
+                        "should correctly set the sort attribute"
+                    );
+                }
+            },
+        });
+
+        assert.ok(
+            $(target).find("tbody tr:first td:contains(blip)").length,
+            "record 3 should be first"
+        );
+        assert.ok(
+            $(target).find("tbody tr:eq(3) td:contains(yop)").length,
+            "record 1 should be first"
+        );
+    });
+
+    QUnit.test("use default_order on editable tree: sort on save", async function (assert) {
+        serverData.models.foo.records[0].o2m = [1, 3];
+
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="o2m">
+                            <tree editable="bottom" default_order="display_name">
+                                <field name="display_name"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 3"]
+        );
+
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=o2m] .o_field_widget input", "Value 2");
+        await click(target, ".o_form_view");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 3", "Value 2"]
+        );
+
+        await clickSave(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 2", "Value 3"]
+        );
+    });
+
+    QUnit.test("use default_order on editable tree: sort on demand", async function (assert) {
+        serverData.models.foo.records[0].o2m = [1, 3];
+        serverData.models.bar.fields = {
+            name: { string: "Name", type: "char", sortable: true },
+        };
+        serverData.models.bar.records[0].name = "Value 1";
+        serverData.models.bar.records[2].name = "Value 3";
+
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="o2m">
+                            <tree editable="bottom" default_order="name">
+                                <field name="name"/>
+                            </tree>
+                        </field>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        await clickEdit(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 3"]
+        );
+
+        await addRow(target);
+        await editInput(target, ".o_field_widget[name=o2m] .o_field_widget input", "Value 2");
+        await click(target, ".o_form_view");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 3", "Value 2"]
+        );
+
+        await click(target, ".o_field_widget[name=o2m] .o_column_sortable");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 1", "Value 2", "Value 3"]
+        );
+
+        await click(target, ".o_field_widget[name=o2m] .o_column_sortable");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_field_x2many_list .o_data_row")].map(
+                (el) => el.textContent
+            ),
+            ["Value 3", "Value 2", "Value 1"]
+        );
+    });
+
+    QUnit.test(
+        "use default_order on editable tree: sort on demand in page",
+        async function (assert) {
+            serverData.models.bar.fields = {
+                name: { string: "Name", type: "char", sortable: true },
+            };
+
+            const ids = [];
+            for (let i = 0; i < 45; i++) {
+                const id = 4 + i;
+                ids.push(id);
+                serverData.models.bar.records.push({
+                    id: id,
+                    name: "Value " + (id < 10 ? "0" : "") + id,
+                });
+            }
+            serverData.models.foo.records[0].o2m = ids;
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <field name="o2m">
+                                <tree editable="bottom" default_order="name">
+                                    <field name="name"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            await pagerNext(target.querySelector(".o_field_widget[name=o2m]"));
+            assert.strictEqual(
+                target.querySelector("tbody tr").textContent,
+                "Value 44",
+                "record 44 should be first"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("tbody tr")[4].textContent,
+                "Value 48",
+                "record 48 should be last"
+            );
+
+            await click(target.querySelector(".o_column_sortable"));
+            assert.strictEqual(
+                target.querySelector("tbody tr").textContent,
+                "Value 08",
+                "record 48 should be first"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("tbody tr")[4].textContent,
+                "Value 04",
+                "record 44 should be first"
+            );
+        }
+    );
+
+    QUnit.test("can display button in edit mode", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <button name="notafield" type="object" icon="fa-asterisk" class="o_yeah"/>
+                </tree>`,
+        });
+        assert.containsN(target, "tbody button[name=notafield]", 4);
+        assert.containsN(
+            target,
+            "tbody button[name=notafield].o_yeah",
+            4,
+            "class o_yeah should be set on the four button"
+        );
+
+        await click(target.querySelector(".o_field_cell"));
+        assert.containsOnce(target, ".o_selected_row button[name=notafield]");
+    });
+
+    QUnit.test("can display a list with a many2many field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree><field name="m2m"/></tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+        assert.verifySteps(["get_views", "web_search_read"], "should have done 1 web_search_read");
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "2 records",
+            "3 records",
+            "No records",
+            "1 record",
+        ]);
+    });
+
+    QUnit.test("display a tooltip on a field", async function (assert) {
+        patchWithCleanup(odoo, {
+            debug: false,
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar" widget="toggle_button"/>
+                </tree>`,
+        });
+
+        await mouseEnter(target.querySelector("th[data-name=foo]"));
+        await nextTick(); // GES: see next nextTick comment
+        assert.strictEqual(
+            target.querySelectorAll(".o-tooltip .o-tooltip--string").length,
+            0,
+            "should not have rendered a tooltip"
+        );
+
+        patchWithCleanup(odoo, {
+            debug: true,
+        });
+
+        // it is necessary to rerender the list so tooltips can be properly created
+        await reloadListView(target);
+        await mouseEnter(target.querySelector("th[data-name=bar]"));
+        await nextTick(); // GES: I had once an indetermist failure because of no tooltip, so for safety I add a nextTick.
+
+        assert.strictEqual(
+            target.querySelectorAll(".o-tooltip .o-tooltip--string").length,
+            1,
+            "should have rendered a tooltip"
+        );
+
+        assert.containsOnce(
+            target,
+            '.o-tooltip--technical>li[data-item="widget"]',
+            "widget should be present for this field"
+        );
+
+        assert.deepEqual(
+            getNodesTextContent([
+                target.querySelector('.o-tooltip--technical>li[data-item="widget"]'),
+            ]),
+            ["Widget:Button (toggle_button)"],
+            "widget description should be correct"
+        );
+    });
+
+    QUnit.test("support row decoration", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree decoration-info="int_field > 5">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "tbody tr.text-info",
+            3,
+            "should have 3 columns with text-info class"
+        );
+
+        assert.containsN(target, "tbody tr", 4, "should have 4 rows");
+    });
+
+    QUnit.test("support row decoration (with unset numeric values)", async function (assert) {
+        serverData.models.foo.records = [];
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch:
+                '<tree editable="bottom" decoration-danger="int_field &lt; 0">' +
+                '<field name="int_field"/>' +
+                "</tree>",
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsNone(
+            target,
+            "tr.o_data_row.text-danger",
+            "the data row should not have .text-danger decoration (int_field is unset)"
+        );
+
+        await editInput(target, '[name="int_field"] input', "-3");
+        assert.containsOnce(
+            target,
+            "tr.o_data_row.text-danger",
+            "the data row should have .text-danger decoration (int_field is negative)"
+        );
+    });
+
+    QUnit.test("support row decoration with date", async function (assert) {
+        serverData.models.foo.records[0].datetime = "2017-02-27 12:51:35";
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree decoration-info="datetime == '2017-02-27 12:51:35'" decoration-danger="datetime &gt; '2017-02-27 12:51:35' AND datetime &lt; '2017-02-27 10:51:35'">
+                    <field name="datetime"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        assert.containsOnce(
+            target,
+            "tbody tr.text-info",
+            "should have 1 columns with text-info class with good datetime"
+        );
+
+        assert.containsNone(
+            target,
+            "tbody tr.text-danger",
+            "should have 0 columns with text-danger class with wrong timezone datetime"
+        );
+
+        assert.containsN(target, "tbody tr", 4, "should have 4 rows");
+    });
+
+    QUnit.test("support field decoration", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo" decoration-danger="int_field > 5"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, "tbody tr", 4);
+        assert.containsN(target, "tbody td.o_list_char", 4);
+        assert.containsN(target, "tbody td.text-danger", 3);
+        assert.containsN(target, "tbody td.o_list_number", 4);
+        assert.containsNone(target, "tbody td.o_list_number.text-danger");
+    });
+
+    QUnit.test(
+        "bounce create button when no data and click on empty area",
+        async function (assert) {
+            patchWithCleanup(browser, {
+                setTimeout: () => {},
+            });
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree><field name="foo"/></tree>',
+                noContentHelp: "click to add a record",
+                searchViewArch: `
+                    <search>
+                        <filter name="Empty List" domain="[('id', '&lt;', 0)]"/>
+                    </search>`,
+            });
+
+            assert.containsNone(target, ".o_view_nocontent");
+            await click(target, ".o_list_view");
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_button_add"),
+                "o_catch_attention"
+            );
+
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, "Empty List");
+            assert.containsOnce(target, ".o_view_nocontent");
+
+            await click(target, ".o_view_nocontent");
+            assert.hasClass(target.querySelector(".o_list_button_add"), "o_catch_attention");
+        }
+    );
+
+    QUnit.test("no content helper when no data", async function (assert) {
+        const records = serverData.models.foo.records;
+
+        serverData.models.foo.records = [];
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+            noContentHelp: "click to add a partner",
+        });
+        assert.containsOnce(target, ".o_view_nocontent", "should display the no content helper");
+        assert.containsNone(target, ".o_list_view table", "should not have a table in the dom");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_view_nocontent")].map((el) => el.textContent),
+            ["click to add a partner"]
+        );
+
+        serverData.models.foo.records = records;
+        await reloadListView(target);
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "should not display the no content helper"
+        );
+        assert.containsOnce(target, ".o_list_view table", "should have a table in the dom");
+    });
+
+    QUnit.test("no nocontent helper when no data and no help", async function (assert) {
+        serverData.models.foo.records = [];
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "should not display the no content helper"
+        );
+        assert.containsNone(target, "tr.o_data_row", "should not have any data row");
+        assert.containsOnce(target, ".o_list_view table", "should have a table in the dom");
+    });
+
+    QUnit.test("empty list with sample data", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                    <field name="m2o"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                    <field name="date"/>
+                    <field name="datetime"/>
+                </tree>`,
+            context: { search_default_empty: true },
+            noContentHelp: "click to add a partner",
+            searchViewArch: `
+                <search>
+                    <filter name="empty" domain="[('id', '&lt;', 0)]"/>
+                    <filter name="True Domain" domain="[(1,'=',1)]"/>
+                    <filter name="False Domain" domain="[(1,'=',0)]"/>
+                </search>`,
+        });
+
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 10);
+        assert.containsOnce(target, ".o_nocontent_help");
+
+        // Check list sample data
+        const firstRow = target.querySelector(".o_data_row");
+        const cells = firstRow.querySelectorAll(":scope > .o_data_cell");
+        assert.strictEqual(
+            cells[0].innerText.trim(),
+            "",
+            "Char field should yield an empty element"
+        );
+        assert.containsOnce(cells[1], ".custom-checkbox", "Boolean field has been instantiated");
+        assert.notOk(isNaN(cells[2].innerText.trim()), "Intger value is a number");
+        assert.ok(cells[3].innerText.trim(), "Many2one field is a string");
+
+        const firstM2MTag = cells[4].querySelector(":scope div.o_tag_badge_text").innerText.trim();
+        assert.ok(firstM2MTag.length > 0, "Many2many contains at least one string tag");
+
+        assert.ok(
+            /\d{2}\/\d{2}\/\d{4}/.test(cells[5].innerText.trim()),
+            "Date field should have the right format"
+        );
+        assert.ok(
+            /\d{2}\/\d{2}\/\d{4} \d{2}:\d{2}:\d{2}/.test(cells[6].innerText.trim()),
+            "Datetime field should have the right format"
+        );
+
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "empty");
+        await toggleMenuItem(target, "False Domain");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_list_view .o_content"),
+            "o_view_sample_data"
+        );
+        assert.containsNone(target, ".o_list_table");
+        assert.containsOnce(target, ".o_nocontent_help");
+
+        await toggleMenuItem(target, "False Domain");
+        await toggleMenuItem(target, "True Domain");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_list_view .o_content"),
+            "o_view_sample_data"
+        );
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 4);
+        assert.containsNone(target, ".o_nocontent_help");
+    });
+
+    QUnit.test("refresh empty list with sample data", async function (assert) {
+        serverData.views = {
+            "foo,false,search": `
+                <search>
+                    <filter name="empty" domain="[('id', '&lt;', 0)]"/>
+                </search>`,
+            "foo,false,list": `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                    <field name="m2o"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                    <field name="date"/>
+                    <field name="datetime"/>
+                </tree>`,
+            "foo,false,kanban": "<kanban></kanban>",
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "foo",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "kanban"],
+            ],
+            context: { search_default_empty: true },
+            help: '<p class="hello">click to add a partner</p>',
+        });
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 10);
+        assert.containsOnce(target, ".o_nocontent_help");
+
+        const textContent = target.querySelector(".o_list_view").textContent;
+        await click(target, ".o_cp_switch_buttons .o_list");
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 10);
+        assert.containsOnce(target, ".o_nocontent_help");
+        assert.strictEqual(target.querySelector(".o_list_view").textContent, textContent);
+    });
+
+    QUnit.test("empty list with sample data: toggle optional field", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="m2o" optional="hide"/>
+                </tree>`,
+            domain: Domain.FALSE.toList(),
+        });
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.ok(target.querySelectorAll(".o_data_row").length > 0);
+        assert.hasClass(target.querySelectorAll(".o_data_row"), "o_sample_data_disabled");
+        assert.containsN(target, "th", 2, "should have 2 th, 1 for selector and 1 for foo");
+        assert.containsOnce(target, "table .o_optional_columns_dropdown");
+
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+
+        await click(target, ".o_optional_columns_dropdown span.dropdown-item:first-child label");
+
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.ok(target.querySelectorAll(".o_data_row").length > 0);
+        assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
+        assert.containsN(target, "th", 3);
+    });
+
+    QUnit.test("empty list with sample data: keyboard navigation", async function (assert) {
+        await makeView({
+            type: "list",
+            arch: `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                </tree>`,
+            serverData,
+            domain: Domain.FALSE.toList(),
+            resModel: "foo",
+        });
+
+        // Check keynav is disabled
+        assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
+        assert.hasClass(target.querySelector(".o_list_table > tfoot"), "o_sample_data_disabled");
+        assert.hasClass(
+            target.querySelector(".o_list_table > thead .o_list_record_selector"),
+            "o_sample_data_disabled"
+        );
+
+        // From search bar
+        assert.hasClass(document.activeElement, "o_searchview_input");
+
+        triggerHotkey("arrowdown");
+        await nextTick();
+
+        assert.hasClass(document.activeElement, "o_searchview_input");
+
+        // From 'Create' button
+        document.querySelector(".btn.o_list_button_add").focus();
+
+        assert.hasClass(document.activeElement, "o_list_button_add");
+
+        triggerHotkey("arrowdown");
+        await nextTick();
+
+        assert.hasClass(document.activeElement, "o_list_button_add");
+
+        triggerHotkey("tab");
+        await nextTick();
+
+        assert.containsNone(document.body, ".o-tooltip--string");
+
+        // From column header
+        target.querySelector(':scope th[data-name="foo"]').focus();
+
+        assert.ok(document.activeElement.dataset.name === "foo");
+
+        triggerHotkey("arrowdown");
+        await nextTick();
+
+        assert.ok(document.activeElement.dataset.name === "foo");
+    });
+
+    QUnit.test("non empty list with sample data", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                </tree>`,
+            domain: Domain.TRUE.toList(),
+            context: { search_default_true_domain: true },
+            searchViewArch: `
+                    <search>
+                        <filter name="true_domain" domain="[(1,'=',1)]"/>
+                        <filter name="false_domain" domain="[(1,'=',0)]"/>
+                    </search>`,
+        });
+
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 4);
+        assert.doesNotHaveClass(
+            target.querySelector(".o_list_view .o_content"),
+            "o_view_sample_data"
+        );
+
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "true_domain");
+        await toggleMenuItem(target, "false_domain");
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsNone(target, ".o_data_row");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_list_view .o_content"),
+            "o_view_sample_data"
+        );
+    });
+
+    QUnit.test("click on header in empty list with sample data", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                </tree>`,
+            domain: Domain.FALSE.toList(),
+        });
+
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+        assert.containsOnce(target, ".o_list_table");
+        assert.containsN(target, ".o_data_row", 10);
+
+        const content = target.querySelector(".o_list_view").textContent;
+
+        await click(target.querySelector("tr .o_column_sortable"));
+        assert.strictEqual(
+            target.querySelector(".o_list_view").textContent,
+            content,
+            "the content should still be the same"
+        );
+    });
+
+    QUnit.test(
+        "non empty editable list with sample data: delete all records",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top" sample="1">
+                        <field name="foo"/>
+                        <field name="bar"/>
+                        <field name="int_field"/>
+                    </tree>`,
+                domain: Domain.TRUE.toList(),
+                noContentHelp: "click to add a partner",
+                actionMenus: {},
+            });
+
+            // Initial state: all records displayed
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsOnce(target, ".o_list_table");
+            assert.containsN(target, ".o_data_row", 4);
+            assert.containsNone(target, ".o_nocontent_help");
+
+            // Delete all records
+            await click(target.querySelector("thead .o_list_record_selector input"));
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Delete");
+            await click(target.querySelector(".modal-footer .btn-primary"));
+
+            // Final state: no more sample data, but nocontent helper displayed
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsNone(target, ".o_list_table");
+            assert.containsOnce(target, ".o_nocontent_help");
+        }
+    );
+
+    QUnit.test(
+        "empty editable list with sample data: start create record and cancel",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                <tree editable="top" sample="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="int_field"/>
+                </tree>`,
+                domain: Domain.FALSE.toList(),
+                noContentHelp: "click to add a partner",
+            });
+
+            // Initial state: sample data and nocontent helper displayed
+            assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+            assert.containsOnce(target, ".o_list_table");
+            assert.containsN(target, ".o_data_row", 10);
+            assert.containsOnce(target, ".o_nocontent_help");
+
+            // Start creating a record
+            await click(target.querySelector(".btn.o_list_button_add"));
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsOnce(target, ".o_data_row");
+
+            // Discard temporary record
+            await click(target.querySelector(".btn.o_list_button_discard"));
+
+            // Final state: there should be no table, but the no content helper
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsNone(target, ".o_list_table");
+            assert.containsOnce(target, ".o_nocontent_help");
+        }
+    );
+
+    QUnit.test(
+        "empty editable list with sample data: create and delete record",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top" sample="1">
+                        <field name="foo"/>
+                        <field name="bar"/>
+                        <field name="int_field"/>
+                    </tree>`,
+                domain: Domain.FALSE.toList(),
+                noContentHelp: "click to add a partner",
+                actionMenus: {},
+            });
+
+            // Initial state: sample data and nocontent helper displayed
+            assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
+            assert.containsOnce(target, ".o_list_table");
+            assert.containsN(target, ".o_data_row", 10);
+            assert.containsOnce(target, ".o_nocontent_help");
+
+            // Start creating a record
+            await click(target.querySelector(".btn.o_list_button_add"));
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsOnce(target, ".o_data_row");
+
+            // Save temporary record
+            await clickSave(target);
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsOnce(target, ".o_list_table");
+            assert.containsOnce(target, ".o_data_row");
+            assert.containsNone(target, ".o_nocontent_help");
+
+            // Delete newly created record
+            await click(target.querySelector(".o_data_row input"));
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Delete");
+            await click(target.querySelector(".modal-footer .btn-primary"));
+
+            // Final state: there should be no table, but the no content helper
+            assert.doesNotHaveClass(
+                target.querySelector(".o_list_view .o_content"),
+                "o_view_sample_data"
+            );
+            assert.containsNone(target, ".o_list_table");
+            assert.containsOnce(target, ".o_nocontent_help");
+        }
+    );
+
+    QUnit.test("groupby node with a button", async function (assert) {
+        assert.expect(17);
+
+        serverData.models.foo.fields.currency_id.sortable = true;
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <button string="Button 1" type="object" name="button_method"/>
+                    </groupby>
+                </tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+        patchWithCleanup(list.env.services.action, {
+            doActionButton: (params) => {
+                assert.step(params.name);
+                assert.deepEqual(params.resId, 1, "should call with correct id");
+                assert.strictEqual(
+                    params.resModel,
+                    "res_currency",
+                    "should call with correct model"
+                );
+                assert.strictEqual(params.name, "button_method", "should call correct method");
+                assert.strictEqual(params.type, "object", "should have correct type");
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+        assert.containsOnce(
+            target,
+            "thead th:not(.o_list_record_selector)",
+            "there should be only one column"
+        );
+
+        await groupByMenu(target, "currency_id");
+
+        assert.verifySteps(["web_read_group"]);
+        assert.containsN(target, ".o_group_header", 2, "there should be 2 group headers");
+        assert.containsNone(
+            target,
+            ".o_group_header button",
+            0,
+            "there should be no button in the header"
+        );
+        await click(target, ".o_group_header:first-child");
+        assert.verifySteps(["web_search_read"]);
+        assert.containsOnce(target, ".o_group_header button");
+
+        await click(target, ".o_group_header:first-child button");
+        assert.verifySteps(["button_method"]);
+    });
+
+    QUnit.test("groupby node with a button in inner groupbys", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <button string="Button 1" type="object" name="button_method"/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["bar", "currency_id"],
+        });
+
+        assert.containsN(target, ".o_group_header", 2, "there should be 2 group headers");
+        assert.containsNone(target, ".o_group_header button");
+
+        await click(target, ".o_group_header:first-child");
+        assert.containsN(target, ".o_list_view .o_group_header", 3);
+        assert.containsNone(target, ".o_group_header button");
+        await click(target, ".o_group_header:nth-child(2)");
+        assert.containsOnce(target, ".o_group_header button");
+    });
+
+    QUnit.test("groupby node with a button with modifiers", async function (assert) {
+        assert.expect(15);
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <field name="position"/>
+                        <button string="Button 1" type="object" name="button_method" attrs='{"invisible": [("position", "=", "after")]}'/>
+                    </groupby>
+                </tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "read" && args.model === "res_currency") {
+                    assert.deepEqual(args.args, [[1, 2], ["position"]]);
+                }
+            },
+            groupBy: ["currency_id"],
+        });
+
+        assert.verifySteps(["get_views", "web_read_group", "read"]);
+        assert.containsNone(target, ".o_group_header button");
+        assert.containsNone(target, ".o_data_row");
+
+        await click(target, ".o_group_header:nth-child(2)");
+        assert.verifySteps(["web_search_read"]);
+        assert.containsNone(target, ".o_group_header button");
+        assert.containsN(target, ".o_data_row", 1);
+
+        await click(target, ".o_group_header:first-child");
+        assert.verifySteps(["web_search_read"]);
+        assert.containsOnce(target, ".o_group_header button");
+        assert.containsN(target, ".o_data_row", 4);
+    });
+
+    QUnit.test(
+        "groupby node with a button with modifiers using a many2one",
+        async function (assert) {
+            serverData.models.res_currency.fields.m2o = {
+                string: "Currency M2O",
+                type: "many2one",
+                relation: "bar",
+            };
+            serverData.models.res_currency.records[0].m2o = 1;
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                <tree expand="1">
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <field name="m2o"/>
+                        <button string="Button 1" type="object" name="button_method" attrs='{"invisible": [("m2o", "=", false)]}'/>
+                    </groupby>
+                </tree>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+                groupBy: ["currency_id"],
+            });
+            const groupHeaders = target.querySelectorAll(".o_group_header");
+            assert.containsOnce(groupHeaders[0], "button");
+            assert.containsNone(groupHeaders[1], "button");
+
+            assert.verifySteps(["get_views", "web_read_group", "read"]);
+        }
+    );
+
+    QUnit.test("reload list view with groupby node", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1">
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <field name="position"/>
+                        <button string="Button 1" type="object" name="button_method" attrs='{"invisible": [("position", "=", "after")]}'/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["currency_id"],
+        });
+
+        assert.containsOnce(target, ".o_group_header button");
+
+        await reloadListView(target);
+        assert.containsOnce(target, ".o_group_header button");
+    });
+
+    QUnit.test("editable list view with groupby node and modifiers", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1" editable="bottom">
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <field name="position"/>
+                        <button string="Button 1" type="object" name="button_method" attrs='{"invisible": [("position", "=", "after")]}'/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["currency_id"],
+        });
+
+        assert.doesNotHaveClass(
+            $(target).find(".o_data_row:first"),
+            "o_selected_row",
+            "first row should be in readonly mode"
+        );
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.hasClass(
+            $(target).find(".o_data_row:first"),
+            "o_selected_row",
+            "the row should be in edit mode"
+        );
+
+        await triggerEvent(document.activeElement, null, "keydown", { key: "escape" });
+        assert.doesNotHaveClass(
+            $(target).find(".o_data_row:first"),
+            "o_selected_row",
+            "the row should be back in readonly mode"
+        );
+    });
+
+    QUnit.test("groupby node with edit button", async function (assert) {
+        assert.expect(1);
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1">
+                    <field name="foo"/>
+                    <groupby name="currency_id">
+                        <button string="Button 1" type="edit" name="edit"/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["currency_id"],
+        });
+        patchWithCleanup(list.env.services.action, {
+            doAction: (action) => {
+                assert.deepEqual(action, {
+                    context: { create: false },
+                    res_id: 2,
+                    res_model: "res_currency",
+                    type: "ir.actions.act_window",
+                    views: [[false, "form"]],
+                    flags: { mode: "edit" },
+                });
+            },
+        });
+        await click(target.querySelectorAll(".o_group_header button")[1]);
+    });
+
+    QUnit.test("groupby node with subfields, and onchange", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.foo.onchanges = {
+            foo: function () {},
+        };
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree editable="bottom" expand="1">
+                    <field name="foo"/>
+                    <field name="currency_id"/>
+                    <groupby name="currency_id">
+                        <field name="position" invisible="1"/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["currency_id"],
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.deepEqual(
+                        args.args[3],
+                        {
+                            foo: "1",
+                            currency_id: "",
+                        },
+                        "onchange spec should not follow relation of many2one fields"
+                    );
+                }
+            },
+        });
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+    });
+
+    QUnit.test("list view, editable, without data", async function (assert) {
+        serverData.models.foo.records = [];
+        serverData.models.foo.fields.date.default = "2017-02-10";
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="date"/>
+                    <field name="m2o"/>
+                    <field name="foo"/>
+                    <button type="object" icon="fa-plus-square" name="method"/>
+                </tree>`,
+            noContentHelp: "click to add a partner",
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.step("create");
+                }
+            },
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_view_nocontent",
+            "should have a no content helper displayed"
+        );
+        assert.containsNone(
+            target,
+            "div.table-responsive",
+            "should not have a div.table-responsive"
+        );
+        assert.containsNone(target, "table", "should not have rendered a table");
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsNone(
+            target,
+            ".o_view_nocontent",
+            "should not have a no content helper displayed"
+        );
+        assert.containsOnce(target, "table", "should have rendered a table");
+        assert.hasClass(
+            target.querySelector("tbody tr"),
+            "o_selected_row",
+            "the date field td should be in edit mode"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr").querySelectorAll("td")[1].textContent,
+            "",
+            "the date field td should not have any content"
+        );
+        assert.strictEqual(
+            target.querySelector("tr.o_selected_row .o_list_record_selector input").disabled,
+            true,
+            "record selector checkbox should be disabled while the record is not yet created"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_button button").disabled,
+            true,
+            "buttons should be disabled while the record is not yet created"
+        );
+
+        await clickSave(target);
+        assert.strictEqual(
+            target.querySelector("tbody tr .o_list_record_selector input").disabled,
+            false,
+            "record selector checkbox should not be disabled once the record is created"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_list_button button").disabled,
+            false,
+            "buttons should not be disabled once the record is created"
+        );
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("list view, editable, with a button", async function (assert) {
+        serverData.models.foo.records = [];
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <button string="abc" icon="fa-phone" type="object" name="schedule_another_phonecall"/>
+                </tree>`,
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+
+        assert.containsOnce(
+            target,
+            "table button i.o_button_icon.fa-phone",
+            "should have rendered a button"
+        );
+    });
+
+    QUnit.test("list view with a button without icon", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <button string="abc" type="object" name="schedule_another_phonecall"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            target.querySelector("table button").innerText,
+            "abc",
+            "should have rendered a button with string attribute as label"
+        );
+    });
+
+    QUnit.test("list view, editable, can discard", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/></tree>',
+        });
+
+        assert.containsNone(
+            target,
+            "td:not(.o_list_record_selector) input",
+            "no input should be in the table"
+        );
+        assert.containsNone(target, ".o_list_button_discard");
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(
+            target,
+            "td:not(.o_list_record_selector) input",
+            "first cell should be editable"
+        );
+        assert.containsOnce(target, ".o_list_button_discard");
+
+        await click(target.querySelector(".o_list_button_discard"));
+
+        assert.containsNone(
+            target,
+            "td:not(.o_list_record_selector) input",
+            "no input should be in the table"
+        );
+        assert.containsNone(target, ".o_list_button_discard");
+    });
+
+    QUnit.test("editable list view, click on the list to save", async function (assert) {
+        serverData.models.foo.fields.date.default = "2017-02-10";
+        serverData.models.foo.records = [];
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="int_field" sum="Sum"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.step("create");
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        await click(target.querySelector(".o_list_renderer"));
+        assert.verifySteps(["create"]);
+
+        await click(target.querySelector(".o_list_button_add"));
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        await click(target.querySelector("tfoot"));
+        assert.verifySteps(["create"]);
+
+        await click(target.querySelector(".o_list_button_add"));
+        await editInput(target, ".o_field_widget[name=foo] input", "new value");
+        await click(target.querySelectorAll("tbody tr")[2].querySelector(".o_data_cell"));
+        assert.verifySteps(["create"]);
+    });
+
+    QUnit.test("click on a button in a list view", async function (assert) {
+        assert.expect(10);
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <button string="a button" name="button_action" icon="fa-car" type="object"/>
+                </tree>`,
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+        patchWithCleanup(list.env.services.action, {
+            doActionButton: (action) => {
+                assert.deepEqual(action.resId, 1, "should call with correct id");
+                assert.strictEqual(action.resModel, "foo", "should call with correct model");
+                assert.strictEqual(action.name, "button_action", "should call correct method");
+                assert.strictEqual(action.type, "object", "should have correct type");
+                action.onClose();
+            },
+        });
+
+        assert.containsN(target, "tbody .o_list_button", 4, "there should be one button per row");
+        assert.containsN(target, ".o_data_row .o_list_button .o_button_icon.fa.fa-car", 4);
+
+        await click(target.querySelector(".o_data_row .o_list_button > button"));
+        assert.verifySteps(
+            [
+                "/web/dataset/call_kw/foo/get_views",
+                "/web/dataset/call_kw/foo/web_search_read",
+                "/web/dataset/call_kw/foo/web_search_read",
+            ],
+            "should have reloaded the view (after the action is complete)"
+        );
+    });
+
+    QUnit.test("invisible attrs in readonly and editable list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <button string="a button" name="button_action" icon="fa-car" type="object" attrs="{'invisible': [('id','=', 1)]}"/>
+                    <field name="int_field"/>
+                    <field name="qux"/>
+                    <field name="foo" attrs="{'invisible': [('id','=', 1)]}"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(target.querySelectorAll(".o_field_cell")[2].innerHTML, "");
+        assert.strictEqual(target.querySelector(".o_data_cell.o_list_button").innerHTML, "");
+
+        // edit first row
+        await click(target.querySelector(".o_field_cell"));
+        assert.strictEqual(target.querySelectorAll(".o_field_cell")[2].innerHTML, "");
+        assert.strictEqual(target.querySelector(".o_data_cell.o_list_button").innerHTML, "");
+
+        await click(target.querySelector(".o_list_button_discard"));
+
+        // click on the invisible field's cell to edit first row
+        await click(target.querySelectorAll(".o_field_cell")[2]);
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+    });
+
+    QUnit.test("monetary fields are properly rendered", async function (assert) {
+        const currencies = {};
+        serverData.models.res_currency.records.forEach((currency) => {
+            currencies[currency.id] = currency;
+        });
+        patchWithCleanup(session, { currencies });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="id"/>
+                    <field name="amount"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        });
+
+        assert.containsN(
+            target,
+            "tbody tr:first td",
+            3,
+            "currency_id column should not be in the table"
+        );
+        assert.strictEqual(
+            target
+                .querySelector("tbody .o_data_row:first-child .o_data_cell:nth-child(3)")
+                .textContent.replace(/\s/g, " "),
+            "1200.00 €",
+            "currency_id column should not be in the table"
+        );
+        assert.strictEqual(
+            target
+                .querySelector("tbody .o_data_row:nth-child(2) .o_data_cell:nth-child(3)")
+                .textContent.replace(/\s/g, " "),
+            "$ 500.00",
+            "currency_id column should not be in the table"
+        );
+    });
+
+    QUnit.test("simple list with date and datetime", async function (assert) {
+        patchTimeZone(120);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="date"/><field name="datetime"/></tree>',
+        });
+        const cells = target.querySelectorAll(".o_data_row .o_data_cell");
+        assert.strictEqual(cells[0].textContent, "01/25/2017", "should have formatted the date");
+        assert.strictEqual(
+            cells[1].textContent,
+            "12/12/2016 12:55:05",
+            "should have formatted the datetime"
+        );
+    });
+
+    QUnit.test("edit a row by clicking on a readonly field", async function (assert) {
+        serverData.models.foo.fields.foo.readonly = true;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="int_field"/></tree>',
+        });
+
+        // edit the first row
+        await click(target.querySelector(".o_field_cell"));
+        assert.hasClass(
+            target.querySelector(".o_data_row"),
+            "o_selected_row",
+            "first row should be selected"
+        );
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+            "o_readonly_modifier"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_selected_row .o_field_widget[name=foo] span").innerText,
+            "yop",
+            "a widget should have been rendered for readonly fields"
+        );
+        assert.containsOnce(
+            target,
+            ".o_selected_row .o_field_widget[name=int_field] input",
+            "'int_field' should be editable"
+        );
+
+        // click again on readonly cell of first line: nothing should have changed
+        await click(target.querySelector(".o_field_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+            "o_readonly_modifier"
+        );
+        assert.containsOnce(
+            target,
+            ".o_selected_row .o_field_widget[name=int_field] input",
+            "'int_field' should be editable"
+        );
+    });
+
+    QUnit.test("list view with nested groups", async function (assert) {
+        assert.expect(40);
+
+        serverData.models.foo.records.push({ id: 5, foo: "blip", int_field: -7, m2o: 1 });
+        serverData.models.foo.records.push({ id: 6, foo: "blip", int_field: 5, m2o: 2 });
+
+        let nbRPCs = { readGroup: 0, webSearchRead: 0 };
+        let envIDs = []; // the ids that should be in the environment during this test
+
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="id"/><field name="int_field"/></tree>',
+            groupBy: ["m2o", "foo"],
+            mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    if (args.kwargs.groupby[0] === "foo") {
+                        // nested read_group
+                        // called twice (once when opening the group, once when sorting)
+                        assert.deepEqual(
+                            args.kwargs.domain,
+                            [["m2o", "=", 1]],
+                            "nested read_group should be called with correct domain"
+                        );
+                    }
+                    nbRPCs.readGroup++;
+                } else if (args.method === "web_search_read") {
+                    // called twice (once when opening the group, once when sorting)
+                    assert.deepEqual(
+                        args.kwargs.domain,
+                        [
+                            ["foo", "=", "blip"],
+                            ["m2o", "=", 1],
+                        ],
+                        "nested web_search_read should be called with correct domain"
+                    );
+                    nbRPCs.webSearchRead++;
+                }
+            },
+            selectRecord: (resId, options) => {
+                assert.step(`switch to form - resId: ${resId}`);
+            },
+        });
+
+        assert.strictEqual(nbRPCs.readGroup, 1, "should have done one read_group");
+        assert.strictEqual(nbRPCs.webSearchRead, 0, "should have done no web_search_read");
+        assert.deepEqual(
+            list.model.root.records.map((r) => r.resId),
+            envIDs
+        );
+
+        // basic rendering tests
+        assert.containsN(target, ".o_group_header", 2, "should contain 2 groups at first level");
+        const value1Group = getGroup(1);
+        assert.strictEqual(
+            value1Group.querySelector(".o_group_name").textContent.trim(),
+            "Value 1 (4)",
+            "group should have correct name and count"
+        );
+        assert.containsN(
+            target,
+            ".o_group_name .fa-caret-right",
+            2,
+            "the carret of closed groups should be right"
+        );
+        assert.strictEqual(
+            value1Group.querySelector("span").style["padding-left"],
+            "2px",
+            "groups of level 1 should have a 2px padding-left"
+        );
+        assert.strictEqual(
+            [...value1Group.querySelectorAll("td")].pop().textContent,
+            "16",
+            "group aggregates are correctly displayed"
+        );
+
+        // open the first group
+        nbRPCs = { readGroup: 0, webSearchRead: 0 };
+        await click(value1Group);
+        assert.strictEqual(nbRPCs.readGroup, 1, "should have done one read_group");
+        assert.strictEqual(nbRPCs.webSearchRead, 0, "should have done no web_search_read");
+        assert.deepEqual(
+            list.model.root.records.map((r) => r.resId),
+            envIDs
+        );
+
+        assert.strictEqual(
+            getGroup(1).querySelector(".o_group_name").textContent.trim(),
+            "Value 1 (4)",
+            "group should have correct name and count (of records, not inner subgroups)"
+        );
+        assert.containsOnce(
+            target,
+            ".o_group_name:first .fa-caret-down",
+            "the carret of open groups should be down"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_group_header").length,
+            5,
+            "open group should contain 5 groups (2 groups and 3 subGroup)"
+        );
+        const blipGroup = getGroup(2);
+        assert.strictEqual(
+            blipGroup.querySelector(".o_group_name").textContent.trim(),
+            "blip (2)",
+            "group should have correct name and count"
+        );
+        assert.strictEqual(
+            blipGroup.querySelector("span").style["padding-left"],
+            "22px",
+            "groups of level 2 should have a 22px padding-left"
+        );
+        assert.strictEqual(
+            [...blipGroup.querySelectorAll("td")].pop().textContent,
+            "-11",
+            "inner group aggregates are correctly displayed"
+        );
+
+        // open subgroup
+        nbRPCs = { readGroup: 0, webSearchRead: 0 };
+        envIDs = [4, 5]; // the opened subgroup contains these two records
+        await click(blipGroup);
+        assert.strictEqual(nbRPCs.readGroup, 0, "should have done no read_group");
+        assert.strictEqual(nbRPCs.webSearchRead, 1, "should have done one web_search_read");
+        assert.deepEqual(
+            list.model.root.records.map((r) => r.resId),
+            envIDs
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_group_header").length,
+            5,
+            "open group should contain 5 groups (2 groups and 3 subGroup)"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row").length,
+            2,
+            "open subgroup should contain 2 data rows"
+        );
+        assert.strictEqual(
+            [...target.querySelector(".o_data_row").querySelectorAll(".o_data_cell")].pop()
+                .textContent,
+            "-4",
+            "first record in open subgroup should be res_id 4 (with int_field -4)"
+        );
+
+        // open a record (should trigger event 'open_record')
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.verifySteps([`switch to form - resId: 4`]);
+
+        // sort by int_field (ASC) and check that open groups are still open
+        nbRPCs = { readGroup: 0, webSearchRead: 0 };
+        envIDs = [5, 4]; // order of the records changed
+        await click(target.querySelector(".o_list_view thead [data-name='int_field']"));
+        assert.strictEqual(nbRPCs.readGroup, 2, "should have done two read_groups");
+        assert.strictEqual(nbRPCs.webSearchRead, 1, "should have done one web_search_read");
+        assert.deepEqual(
+            list.model.root.records.map((r) => r.resId),
+            envIDs
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_group_header").length,
+            5,
+            "open group should contain 5 groups (2 groups and 3 subGroup)"
+        );
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row").length,
+            2,
+            "open subgroup should contain 2 data rows"
+        );
+        assert.strictEqual(
+            [...target.querySelector(".o_data_row").querySelectorAll(".o_data_cell")].pop()
+                .textContent,
+            "-7",
+            "first record in open subgroup should be res_id 5 (with int_field -7)"
+        );
+
+        // close first level group
+        nbRPCs = { readGroup: 0, webSearchRead: 0 };
+        envIDs = []; // the group being closed, there is no more record in the environment
+        await click(getGroup(2));
+        assert.strictEqual(nbRPCs.readGroup, 0, "should have done no read_group");
+        assert.strictEqual(nbRPCs.webSearchRead, 0, "should have done no web_search_read");
+        assert.deepEqual(
+            list.model.root.records.map((r) => r.resId),
+            envIDs
+        );
+
+        assert.containsN(target, ".o_group_header", 2, "should contain 2 groups at first level");
+        assert.containsN(
+            target,
+            ".o_group_name .fa-caret-right",
+            2,
+            "the carret of closed groups should be right"
+        );
+    });
+
+    QUnit.test("grouped list on selection field at level 2", async function (assert) {
+        serverData.models.foo.fields.priority = {
+            string: "Priority",
+            type: "selection",
+            selection: [
+                [1, "Low"],
+                [2, "Medium"],
+                [3, "High"],
+            ],
+            default: 1,
+        };
+        serverData.models.foo.records.push({
+            id: 5,
+            foo: "blip",
+            int_field: -7,
+            m2o: 1,
+            priority: 2,
+        });
+        serverData.models.foo.records.push({
+            id: 6,
+            foo: "blip",
+            int_field: 5,
+            m2o: 1,
+            priority: 3,
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="id"/><field name="int_field"/></tree>',
+            groupBy: ["m2o", "priority"],
+        });
+
+        assert.containsN(target, ".o_group_header", 2, "should contain 2 groups at first level");
+
+        // open the first group
+        await click(target.querySelector(".o_group_header"));
+        assert.containsN(
+            target,
+            ".o_group_header",
+            5,
+            "should contain 2 groups at first level and 3 groups at second level"
+        );
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_header .o_group_name")].map((el) => el.innerText),
+            ["Value 1 (5)", "Low (3)", "Medium (1)", "High (1)", "Value 2 (1)"]
+        );
+    });
+
+    QUnit.test("grouped list with a pager in a group", async function (assert) {
+        serverData.models.foo.records[3].bar = true;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["bar"],
+            limit: 3,
+        });
+        const headerHeight = target.querySelector(".o_group_header").offsetHeight;
+        // basic rendering checks
+        await click(target.querySelector(".o_group_header"));
+        assert.strictEqual(
+            target.querySelector(".o_group_header").offsetHeight,
+            headerHeight,
+            "height of group header shouldn't have changed"
+        );
+        assert.hasClass(
+            target.querySelector(".o_group_header th > nav"),
+            "o_pager",
+            "last cell of open group header should have classname 'o_pager'"
+        );
+        assert.deepEqual(getPagerValue(target.querySelector(".o_group_header")), [1, 3]);
+        assert.containsN(target, ".o_data_row", 3);
+
+        // go to next page
+        await pagerNext(target.querySelector(".o_group_header"));
+        assert.deepEqual(getPagerValue(target.querySelector(".o_group_header")), [4, 4]);
+        assert.containsOnce(target, ".o_data_row");
+    });
+
+    QUnit.test("edition: create new line, then discard", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+        });
+
+        assert.containsN(target, "tr.o_data_row", 4, "should have 4 records");
+        assert.containsOnce(target, ".o_list_button_add");
+        assert.containsNone(target, ".o_list_button_discard");
+        assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsNone(target, ".o_list_button_add");
+        assert.containsOnce(target, ".o_list_button_discard");
+        assert.containsNone(target, ".o_list_record_selector input:enabled");
+        await click(target.querySelector(".o_list_button_discard"));
+        assert.containsN(target, "tr.o_data_row", 4, "should still have 4 records");
+        assert.containsOnce(target, ".o_list_button_add");
+        assert.containsNone(target, ".o_list_button_discard");
+        assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+    });
+
+    QUnit.test(
+        "invisible attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo" attrs="{'invisible': [['bar', '=', True]]}"/>
+                        <field name="bar"/>
+                    </tree>`,
+            });
+
+            let fooCells = target.querySelectorAll(".o_data_cell.o_list_char");
+            assert.deepEqual(
+                [...fooCells].map((c) => c.innerText),
+                ["", "", "", "blip"]
+            );
+
+            // Make first line editable
+            await click(target.querySelector(".o_field_cell"));
+            assert.containsNone(target, ".o_selected_row .o_list_char .o_field_widget[name=foo]");
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.containsOnce(target, ".o_selected_row .o_list_char .o_field_widget[name=foo]");
+            assert.strictEqual(target.querySelector(".o_list_char input").value, "yop");
+            fooCells = target.querySelectorAll(".o_data_cell.o_list_char");
+            assert.deepEqual(
+                [...fooCells].map((c) => c.innerText),
+                ["", "", "", "blip"]
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.containsNone(target, ".o_selected_row .o_list_char .o_field_widget[name=foo]");
+            fooCells = target.querySelectorAll(".o_data_cell.o_list_char");
+            assert.deepEqual(
+                [...fooCells].map((c) => c.innerText),
+                ["", "", "", "blip"]
+            );
+
+            // Reswitch the field to visible and save the row
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            await click(target.querySelector(".o_list_button_save"));
+
+            target.querySelectorAll(".o_data_cell.o_list_char");
+            assert.deepEqual(
+                [...fooCells].map((c) => c.innerText),
+                ["yop", "", "", "blip"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "readonly attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo" attrs="{'readonly': [['bar', '=', True]]}"/>
+                        <field name="bar"/>
+                    </tree>`,
+            });
+
+            // Make first line editable
+            await click(target.querySelector(".o_field_cell"));
+            assert.containsOnce(target, ".o_selected_row");
+            assert.containsOnce(target, ".o_selected_row .o_field_widget[name=foo] span");
+            assert.hasClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_readonly_modifier"
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.containsOnce(target, ".o_selected_row .o_field_widget[name=foo] input");
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_readonly_modifier"
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.containsOnce(target, ".o_selected_row .o_field_widget[name=foo] span");
+            assert.hasClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_readonly_modifier"
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.containsOnce(target, ".o_selected_row .o_field_widget[name=foo] input");
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_readonly_modifier"
+            );
+
+            // Click outside to leave edition mode and make first line editable again
+            await click(target);
+            assert.containsNone(target, ".o_selected_row");
+            await click(target.querySelector(".o_field_cell"));
+            assert.containsOnce(target, ".o_selected_row");
+            assert.containsOnce(target, ".o_selected_row .o_field_widget[name=foo] input");
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_readonly_modifier"
+            );
+        }
+    );
+
+    QUnit.test(
+        "required attrs on fields are re-evaluated on field change",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo" attrs="{'required': [['bar', '=', True]]}"/>
+                        <field name="bar"/>
+                    </tree>`,
+            });
+
+            // Make first line editable
+            await click(target.querySelector(".o_field_cell"));
+            assert.hasClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_required_modifier"
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_required_modifier"
+            );
+
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.hasClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_required_modifier"
+            );
+
+            // Reswitch the field to required and save the row and make first line editable again
+            await click(target.querySelector(".o_field_widget[name=bar] input"));
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_required_modifier"
+            );
+            await click(target.querySelector(".o_list_button_save"));
+            await click(target.querySelector(".o_field_cell"));
+            assert.doesNotHaveClass(
+                target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+                "o_required_modifier"
+            );
+        }
+    );
+
+    QUnit.test(
+        "modifiers of other x2many rows a re-evaluated when a subrecord is updated",
+        async function (assert) {
+            // In an x2many, a change on a subrecord might trigger an onchange on the x2many that
+            // updates other sub-records than the edited one. For that reason, modifiers must be
+            // re-evaluated.
+            serverData.models.foo.onchanges = {
+                o2m: function (obj) {
+                    obj.o2m = [
+                        [5],
+                        [1, 1, { display_name: "Value 1", stage: "open" }],
+                        [1, 2, { display_name: "Value 2", stage: "draft" }],
+                    ];
+                },
+            };
+
+            serverData.models.bar.fields.stage = {
+                string: "Stage",
+                type: "selection",
+                selection: [
+                    ["draft", "Draft"],
+                    ["open", "Open"],
+                ],
+            };
+
+            serverData.models.foo.records[0].o2m = [1, 2];
+            serverData.models.bar.records[0].stage = "draft";
+            serverData.models.bar.records[1].stage = "open";
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="o2m">
+                            <tree editable="top">
+                                <field name="display_name" attrs="{'invisible': [('stage', '=', 'open')]}"/>
+                                <field name="stage"/>
+                            </tree>
+                        </field>
+                    </form>`,
+                resId: 1,
+            });
+            await clickEdit(target);
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        ".o_field_widget[name=o2m] .o_data_row .o_data_cell:first-child"
+                    ),
+                ].map((el) => el.innerText),
+                ["Value 1", ""]
+            );
+
+            // Make a change in the list to trigger the onchange
+            await click(
+                target.querySelector(
+                    ".o_field_widget[name=o2m] .o_data_row .o_data_cell:nth-child(2)"
+                )
+            );
+            await editSelect(
+                target,
+                '.o_field_widget[name=o2m] .o_data_row [name="stage"] select',
+                '"open"'
+            );
+            assert.deepEqual(
+                [
+                    ...target.querySelectorAll(
+                        ".o_field_widget[name=o2m] .o_data_row .o_data_cell:first-child"
+                    ),
+                ].map((el) => el.innerText),
+                ["", "Value 2"]
+            );
+            assert.strictEqual(
+                target.querySelector(".o_data_row:nth-child(2)").textContent,
+                "Value 2Draft",
+                "the onchange should have been applied"
+            );
+        }
+    );
+
+    QUnit.test("leaving unvalid rows in edition", async function (assert) {
+        let warnings = 0;
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo" required="1"/>
+                    <field name="bar"/>
+                </tree>`,
+        });
+        patchWithCleanup(list.env.services.notification, {
+            add: (message, { type }) => {
+                if (type === "danger") {
+                    warnings++;
+                }
+            },
+        });
+
+        // Start first line edition
+        await click(target.querySelector(".o_data_cell"));
+
+        // Remove required foo field value
+        await editInput(target, ".o_selected_row .o_field_widget[name=foo] input", "");
+
+        // Try starting other line edition
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        assert.hasClass(
+            target.querySelectorAll(".o_data_row")[0],
+            "o_selected_row",
+            "first line should still be in edition as invalid"
+        );
+        assert.containsOnce(target, ".o_selected_row", "no other line should be in edition");
+        assert.containsOnce(
+            target.querySelectorAll(".o_data_row")[0],
+            ".o_field_invalid input",
+            "the required field should be marked as invalid"
+        );
+        assert.strictEqual(warnings, 1, "a warning should have been displayed");
+    });
+
+    QUnit.test("open a virtual id", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "event",
+            serverData,
+            arch: '<tree><field name="name"/></tree>',
+            selectRecord: (resId, options) => {
+                assert.step(`switch to form - resId: ${resId}`);
+            },
+        });
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.verifySteps([`switch to form - resId: 2-20170808020000`]);
+    });
+
+    QUnit.test("pressing enter on last line of editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree editable="bottom"><field name="foo"/></tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+        assert.containsN(target, "tr.o_data_row", 4);
+
+        // click on 3rd line
+        await click(target.querySelector("tr.o_data_row:nth-child(3) .o_field_cell[name=foo]"));
+        assert.hasClass(target.querySelector("tr.o_data_row:nth-child(3)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row [name=foo] input")
+        );
+
+        // press enter in input
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.hasClass(target.querySelector("tr.o_data_row:nth-child(4)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row [name=foo] input")
+        );
+
+        // press enter on last row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, "tr.o_data_row", 5);
+        assert.hasClass(target.querySelector("tr.o_data_row:nth-child(5)"), "o_selected_row");
+
+        assert.verifySteps(["onchange"]);
+    });
+
+    QUnit.test("pressing tab on last cell of editable list view", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="int_field"/></tree>',
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[3].querySelector(".o_data_cell"));
+        assert.strictEqual(
+            document.activeElement.parentNode.getAttribute("name"),
+            "foo",
+            "focus should be on an input with name = foo"
+        );
+
+        //it will not create a new line unless a modification is made
+        document.activeElement.value = "blip-changed";
+        await triggerEvent(document.activeElement, null, "change");
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement.parentNode.getAttribute("name"),
+            "int_field",
+            "focus should be on an input with name = int_field"
+        );
+
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass(
+            $(target).find("tr.o_data_row:eq(4)"),
+            "o_selected_row",
+            "5th row should be selected"
+        );
+        assert.strictEqual(
+            document.activeElement.parentNode.getAttribute("name"),
+            "foo",
+            "focus should be on an input with name = foo"
+        );
+
+        assert.verifySteps([
+            "/web/dataset/call_kw/foo/get_views",
+            "/web/dataset/call_kw/foo/web_search_read",
+            "/web/dataset/call_kw/foo/write",
+            "/web/dataset/call_kw/foo/read",
+            "/web/dataset/call_kw/foo/onchange",
+        ]);
+    });
+
+    QUnit.test("navigation with tab and read completes after default_get", async function (assert) {
+        const onchangeGetPromise = makeDeferred();
+        const readPromise = makeDeferred();
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="int_field"/></tree>',
+            mockRPC(route, args, performRPC) {
+                assert.step(args.method);
+                const result = performRPC(route, args);
+                if (args.method === "read") {
+                    return readPromise.then(function () {
+                        return result;
+                    });
+                }
+                if (args.method === "onchange") {
+                    return onchangeGetPromise.then(function () {
+                        return result;
+                    });
+                }
+                return result;
+            },
+        });
+
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[3].querySelectorAll(".o_data_cell")[1]);
+
+        await editInput(target, ".o_selected_row [name='int_field'] input", "1234");
+        triggerHotkey("Tab");
+        await nextTick();
+
+        onchangeGetPromise.resolve();
+        assert.containsN(target, "tbody tr.o_data_row", 4, "should have 4 data rows");
+
+        readPromise.resolve();
+        await nextTick();
+        assert.containsN(target, "tbody tr.o_data_row", 5, "should have 5 data rows");
+        assert.strictEqual(
+            $(target).find("td:contains(1234)").length,
+            1,
+            "should have a cell with new value"
+        );
+
+        // we trigger a tab to move to the second cell in the current row. this
+        // operation requires that this.currentRow is properly set in the
+        // list editable renderer.
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass(
+            $(target).find("tr.o_data_row:eq(4)"),
+            "o_selected_row",
+            "5th row should be selected"
+        );
+
+        assert.verifySteps(["get_views", "web_search_read", "write", "read", "onchange"]);
+    });
+
+    QUnit.test("display toolbar", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "event",
+            serverData,
+            arch: '<tree><field name="name"/></tree>',
+            info: {
+                actionMenus: {
+                    action: [
+                        {
+                            id: 29,
+                            name: "Action event",
+                        },
+                    ],
+                },
+            },
+        });
+
+        assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+
+        await click(target.querySelector(".o_list_record_selector input"));
+        await toggleActionMenu(target);
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_cp_action_menus .dropdown-item")),
+            ["Export", "Delete", "Action event"]
+        );
+    });
+
+    QUnit.test(
+        "execute ActionMenus actions with correct params (single page)",
+        async function (assert) {
+            assert.expect(12);
+
+            patchWithCleanup(actionService, {
+                start() {
+                    const result = this._super(...arguments);
+                    return {
+                        ...result,
+                        doAction(id, { additionalContext }) {
+                            assert.step(
+                                JSON.stringify({ action_id: id, context: additionalContext })
+                            );
+                        },
+                    };
+                },
+            });
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree><field name="foo"/></tree>',
+                info: {
+                    actionMenus: {
+                        action: [
+                            {
+                                id: 44,
+                                name: "Custom Action",
+                                type: "ir.actions.server",
+                            },
+                        ],
+                        print: [],
+                    },
+                },
+                actionMenus: {},
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" domain="[('bar', '=', true)]"/>
+                    </search>`,
+            });
+
+            assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+            assert.containsN(target, ".o_data_row", 4);
+
+            // select all records
+            await click(target.querySelector("thead .o_list_record_selector input"));
+            assert.containsN(target, ".o_list_record_selector input:checked", 5);
+            assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            // unselect first record (will unselect the thead checkbox as well)
+            await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+            assert.containsN(target, ".o_list_record_selector input:checked", 3);
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            // add a domain and select first two records
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, "bar");
+            assert.containsN(target, ".o_data_row", 3);
+            assert.containsNone(target, ".o_list_record_selector input:checked");
+
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+            assert.containsN(target, ".o_list_record_selector input:checked", 2);
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            assert.verifySteps([
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":1,"active_ids":[1,2,3,4],"active_model":"foo","active_domain":[]}}',
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":2,"active_ids":[2,3,4],"active_model":"foo","active_domain":[]}}',
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":1,"active_ids":[1,2],"active_model":"foo","active_domain":[["bar","=",true]]}}',
+            ]);
+        }
+    );
+
+    QUnit.test(
+        "execute ActionMenus actions with correct params (multi pages)",
+        async function (assert) {
+            patchWithCleanup(actionService, {
+                start() {
+                    const result = this._super(...arguments);
+                    return {
+                        ...result,
+                        doAction(id, { additionalContext }) {
+                            assert.step(
+                                JSON.stringify({ action_id: id, context: additionalContext })
+                            );
+                        },
+                    };
+                },
+            });
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree limit="2"><field name="foo"/></tree>',
+                info: {
+                    actionMenus: {
+                        action: [
+                            {
+                                id: 44,
+                                name: "Custom Action",
+                                type: "ir.actions.server",
+                            },
+                        ],
+                        print: [],
+                    },
+                },
+                actionMenus: {},
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" domain="[('bar', '=', true)]"/>
+                    </search>`,
+            });
+
+            assert.containsNone(target, "div.o_control_panel .o_cp_action_menus");
+            assert.containsN(target, ".o_data_row", 2);
+
+            // select all records
+            await click(target, "thead .o_list_record_selector input");
+            assert.containsN(target, ".o_list_record_selector input:checked", 3);
+            assert.containsOnce(target, ".o_list_selection_box .o_list_select_domain");
+            assert.containsOnce(target, "div.o_control_panel .o_cp_action_menus");
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            // select all domain
+            await click(target, ".o_list_selection_box .o_list_select_domain");
+            assert.containsN(target, ".o_list_record_selector input:checked", 3);
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            // add a domain
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, "bar");
+            assert.containsNone(target, ".o_list_selection_box .o_list_select_domain");
+
+            // select all domain
+            await click(target, "thead .o_list_record_selector input");
+            await click(target, ".o_list_selection_box .o_list_select_domain");
+            assert.containsN(target, ".o_list_record_selector input:checked", 3);
+            assert.containsNone(target, ".o_list_selection_box .o_list_select_domain");
+
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Custom Action");
+
+            assert.verifySteps([
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":1,"active_ids":[1,2],"active_model":"foo","active_domain":[]}}',
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":1,"active_ids":[1,2,3,4],"active_model":"foo","active_domain":[]}}',
+                '{"action_id":44,"context":{"lang":"en","uid":7,"tz":"taht","active_id":1,"active_ids":[1,2,3],"active_model":"foo","active_domain":[["bar","=",true]]}}',
+            ]);
+        }
+    );
+
+    QUnit.test("edit list line after line deletion", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="int_field"/></tree>',
+        });
+
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[2].querySelector(".o_data_cell"));
+        assert.ok(
+            $(target).find(".o_data_row:nth(2)").is(".o_selected_row"),
+            "third row should be in edition"
+        );
+
+        await clickDiscard(target);
+        await click(target.querySelector(".o_list_button_add"));
+        assert.ok(
+            $(target).find(".o_data_row:nth(0)").is(".o_selected_row"),
+            "first row should be in edition (creation)"
+        );
+
+        await clickDiscard(target);
+        assert.containsNone(target, ".o_selected_row", "no row should be selected");
+
+        await click(rows[2].querySelector(".o_data_cell"));
+        assert.ok(
+            $(target).find(".o_data_row:nth(2)").is(".o_selected_row"),
+            "third row should be in edition"
+        );
+        assert.containsOnce(target, ".o_selected_row", "no other row should be selected");
+    });
+
+    QUnit.test(
+        "pressing TAB in editable list with several fields [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_data_cell"));
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row .o_data_cell input")
+            );
+
+            // Press 'Tab' -> should go to next cell (still in first row)
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row .o_data_cell:nth-child(3) input")
+            );
+
+            // Press 'Tab' -> should go to next line (first cell)
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) .o_data_cell input")
+            );
+        }
+    );
+
+    QUnit.test(
+        "pressing SHIFT-TAB in editable list with several fields [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_data_row:nth-child(2) .o_data_cell"));
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) .o_data_cell input")
+            );
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row .o_data_cell:nth-child(3) input")
+            );
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row .o_data_cell input")
+            );
+        }
+    );
+
+    QUnit.test("navigation with tab and readonly field (no modification)", async function (assert) {
+        // This test makes sure that if we have 2 cells in a row, the first in
+        // edit mode, and the second one readonly, then if we press TAB when the
+        // focus is on the first, then the focus skip the readonly cells and
+        // directly goes to the next line instead.
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field" readonly="1"/>
+                </tree>`,
+        });
+
+        // Pass the first row in edition.
+        await click(target, ".o_data_row:nth-child(1) [name=foo]");
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(1)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(1) [name=foo] input")
+        );
+
+        // Pressing Tab should skip the readonly field and directly go to the next row.
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+        );
+
+        // We do it again.
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(3)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(3) [name=foo] input")
+        );
+    });
+
+    QUnit.test(
+        "navigation with tab and readonly field (with modification)",
+        async function (assert) {
+            // This test makes sure that if we have 2 cells in a row, the first in
+            // edit mode, and the second one readonly, then if we press TAB when the
+            // focus is on the first, then the focus skips the readonly cells and
+            // directly goes to the next line instead.
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field" readonly="1"/>
+                    </tree>`,
+            });
+
+            // Pass the first row in edition.
+            await click(target, ".o_data_row:nth-child(1) [name=foo]");
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(1)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(1) [name=foo] input")
+            );
+
+            // Modity the cell content
+            await editInput(document.activeElement, null, "blip-changed");
+
+            // Pressing Tab should skip the readonly field and directly go to the next row.
+            triggerHotkey("Tab");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+            );
+
+            // We do it again.
+            triggerHotkey("Tab");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(3)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(3) [name=foo] input")
+            );
+        }
+    );
+
+    QUnit.test('navigation with tab on a list with create="0"', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom" create="0">
+                    <field name="display_name"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, ".o_data_row", 4, "the list should contain 4 rows");
+
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[2].querySelector(".o_data_cell"));
+        assert.hasClass(
+            $(target).find(".o_data_row:nth(2)"),
+            "o_selected_row",
+            "third row should be in edition"
+        );
+
+        // Press 'Tab' -> should go to next line
+        // add a value in the cell because the Tab on an empty first cell would activate the next widget in the view
+        await editInput(target, ".o_selected_row .o_data_cell input", 11);
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass(
+            $(target).find(".o_data_row:nth(3)"),
+            "o_selected_row",
+            "fourth row should be in edition"
+        );
+
+        // Press 'Tab' -> should go back to first line as the create action isn't available
+        await editInput(target, ".o_selected_row .o_data_cell input", 11);
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass(
+            $(target).find(".o_data_row:first"),
+            "o_selected_row",
+            "first row should be in edition"
+        );
+    });
+
+    QUnit.test('navigation with tab on a one2many list with create="0"', async function (assert) {
+        serverData.models.foo.records[0].o2m = [1, 2];
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="o2m">
+                        <tree editable="bottom" create="0">
+                            <field name="display_name"/>
+                        </tree>
+                        </field>
+                        <field name="foo"/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+            mode: "edit",
+        });
+
+        assert.containsN(target, ".o_field_widget[name=o2m] .o_data_row", 2);
+
+        await click(
+            target,
+            ".o_field_widget[name=o2m] .o_data_row:nth-child(1) .o_data_cell[name=display_name]"
+        );
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=o2m] .o_data_row:nth-child(1)"),
+            "o_selected_row"
+        );
+        assert.containsOnce(target, ".o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row [name=display_name] input")
+        );
+
+        // Press 'Tab' -> should go to next line
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass(
+            target.querySelector(".o_field_widget[name=o2m] .o_data_row:nth-child(2)"),
+            "o_selected_row"
+        );
+        assert.containsOnce(target, ".o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row [name=display_name] input")
+        );
+
+        // Pressing 'Tab' -> should use default behavior and thus get out of
+        // the one to many and go to the next field of the form
+        const nextInput = target.querySelector("[name=foo] input");
+        const event = triggerEvent(
+            document.activeElement,
+            null,
+            "keydown",
+            { key: "Tab" },
+            { fast: true }
+        );
+        assert.strictEqual(getNextTabableElement(target), nextInput);
+        assert.ok(!event.defaultPrevented);
+        nextInput.focus();
+        await nextTick();
+        assert.strictEqual(document.activeElement, nextInput);
+    });
+
+    QUnit.test(
+        "edition, then navigation with tab (with a readonly field)",
+        async function (assert) {
+            // This test makes sure that if we have 2 cells in a row, the first in
+            // edit mode, and the second one readonly, then if we edit and press TAB,
+            // (before debounce), the save operation is properly done (before
+            // selecting the next row)
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field" readonly="1"/>
+                    </tree>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+            });
+
+            // click on first dataRow and press TAB
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            await editInput(target, ".o_selected_row [name='foo'] input", "new value");
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.strictEqual(
+                $(target).find("tbody tr:first td:contains(new value)").length,
+                1,
+                "should have the new value visible in dom"
+            );
+            assert.verifySteps(["get_views", "web_search_read", "write", "read"]);
+        }
+    );
+
+    QUnit.test(
+        "edition, then navigation with tab (with a readonly field and onchange)",
+        async function (assert) {
+            // This test makes sure that if we have a read-only cell in a row, in
+            // case the keyboard navigation move over it and there a unsaved changes
+            // (which will trigger an onchange), the focus of the next activable
+            // field will not crash
+            serverData.models.bar.onchanges = {
+                o2m: function () {},
+            };
+            serverData.models.bar.fields.o2m = {
+                string: "O2M field",
+                type: "one2many",
+                relation: "foo",
+            };
+            serverData.models.bar.records[0].o2m = [1, 4];
+
+            await makeView({
+                type: "form",
+                resModel: "bar",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="display_name"/>
+                            <field name="o2m">
+                                <tree editable="bottom">
+                                    <field name="foo"/>
+                                    <field name="date" readonly="1"/>
+                                    <field name="int_field"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        assert.step(`onchange:${args.model}`);
+                    }
+                },
+            });
+
+            await clickEdit(target);
+
+            await click(target.querySelector(".o_data_cell"));
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_cell[name=foo] input")
+            );
+            await editInput(target, ".o_data_cell[name=foo] input", "new value");
+
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_cell[name=int_field] input")
+            );
+
+            assert.verifySteps(["onchange:bar"]);
+        }
+    );
+
+    QUnit.test(
+        "pressing SHIFT-TAB in editable list with a readonly field [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field" readonly="1"/>
+                        <field name="qux"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_data_row:nth-child(2) [name=qux]"));
+
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) [name=qux] input")
+            );
+
+            await triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+            );
+        }
+    );
+
+    QUnit.test(
+        "pressing SHIFT-TAB in editable list with a readonly field in first column [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="int_field" readonly="1"/>
+                        <field name="foo"/>
+                        <field name="qux"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_data_row:nth-child(2) .o_data_cell"));
+
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+            );
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row [name=qux] input")
+            );
+        }
+    );
+
+    QUnit.test(
+        "pressing SHIFT-TAB in editable list with a readonly field in last column [REQUIRE FOCUS]",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="int_field"/>
+                        <field name="foo"/>
+                        <field name="qux" readonly="1"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_data_row:nth-child(2) .o_data_cell"));
+
+            assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:nth-child(2) [name=int_field] input")
+            );
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row [name=foo] input")
+            );
+        }
+    );
+
+    QUnit.test("skip invisible fields when navigating list view with TAB", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="bar" invisible="1"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            resId: 1,
+        });
+
+        await click(target, ".o_data_row:nth-child(1) .o_field_cell[name=foo]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(1) .o_field_cell[name=foo] input")
+        );
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(1) .o_field_cell[name=int_field] input")
+        );
+    });
+
+    QUnit.test("skip buttons when navigating list view with TAB (end)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <button name="kikou" string="Kikou" type="object"/>
+                    </tree>`,
+            resId: 1,
+        });
+
+        await click(target, ".o_data_row:nth-child(3) [name=foo]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(3) [name=foo] input")
+        );
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(4) [name=foo] input")
+        );
+    });
+
+    QUnit.test("skip buttons when navigating list view with TAB (middle)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                    <tree editable="bottom">
+                        <button name="kikou" string="Kikou" type="object"/>
+                        <field name="foo"/>
+                        <button name="kikou" string="Kikou" type="object"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            resId: 1,
+        });
+
+        await click(target, ".o_data_row:nth-child(3) [name=foo]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(3) [name=foo] input")
+        );
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(3) [name=int_field] input")
+        );
+    });
+
+    QUnit.test("navigation: not moving down with keydown", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/></tree>',
+        });
+
+        await click(target.querySelector(".o_field_cell[name=foo]"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+        triggerHotkey("arrowdown");
+        await nextTick();
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+    });
+
+    QUnit.test(
+        "navigation: moving right with keydown from text field does not move the focus",
+        async function (assert) {
+            serverData.models.foo.fields.foo.type = "text";
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="bar"/>
+                    </tree>`,
+            });
+
+            await click(target.querySelector(".o_field_cell[name=foo]"));
+
+            const textarea = target.querySelector(".o_field_widget[name=foo] textarea");
+            assert.strictEqual(document.activeElement, textarea);
+            assert.strictEqual(textarea.selectionStart, 0);
+            assert.strictEqual(textarea.selectionEnd, 3);
+            textarea.selectionStart = 3; // Simulate browser keyboard right behavior (unselect)
+
+            assert.strictEqual(document.activeElement, textarea);
+            assert.ok(textarea.selectionStart === 3 && textarea.selectionEnd === 3);
+
+            triggerHotkey("arrowright");
+            await nextTick();
+
+            assert.strictEqual(document.activeElement, textarea);
+        }
+    );
+
+    QUnit.test(
+        "discarding changes in a row properly updates the rendering",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="foo"/></tree>',
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_field_cell").innerText,
+                "yop",
+                "first cell should contain 'yop'"
+            );
+
+            await click(target.querySelector(".o_field_cell"));
+            await editInput(target, ".o_field_widget[name=foo] input", "hello");
+            await click(target.querySelector(".o_list_button_discard"));
+            assert.containsNone(document.body, ".modal", "should be no modal to ask for discard");
+
+            assert.strictEqual(
+                target.querySelector(".o_field_cell").innerText,
+                "yop",
+                "first cell should still contain 'yop'"
+            );
+        }
+    );
+
+    QUnit.test("numbers in list are right-aligned", async function (assert) {
+        const currencies = {};
+        serverData.models.res_currency.records.forEach((currency) => {
+            currencies[currency.id] = currency;
+        });
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="qux"/>
+                    <field name="amount" widget="monetary"/>
+                    <field name="currency_id" invisible="1"/>
+                </tree>`,
+        });
+        patchWithCleanup(session, { currencies });
+        const nbCellRight = [
+            ...target.querySelectorAll(".o_data_row:first-child > .o_data_cell"),
+        ].filter((el) => window.getComputedStyle(el).textAlign === "right").length;
+        assert.strictEqual(nbCellRight, 2, "there should be two right-aligned cells");
+
+        await click(target.querySelector(".o_data_cell"));
+        const nbInputRight = [
+            ...target.querySelectorAll(".o_data_row:first-child > .o_data_cell input"),
+        ].filter((el) => window.getComputedStyle(el).textAlign === "right").length;
+        assert.strictEqual(nbInputRight, 2, "there should be two right-aligned input");
+    });
+
+    QUnit.test(
+        "grouped list with another grouped list parent, click unfold",
+        async function (assert) {
+            serverData.models.bar.fields = {
+                cornichon: { string: "cornichon", type: "char" },
+            };
+
+            const rec = serverData.models.bar.records[0];
+            // create records to have the search more button
+            const newRecs = [];
+            for (let i = 0; i < 8; i++) {
+                const newRec = _.extend({}, rec);
+                newRec.id = 1 + i;
+                newRec.cornichon = "extra fin";
+                newRecs.push(newRec);
+            }
+            serverData.models.bar.records = newRecs;
+            serverData.views = {
+                "bar,false,list": '<tree><field name="cornichon"/></tree>',
+                "bar,false,search":
+                    "<search><filter context=\"{'group_by': 'cornichon'}\" string=\"cornichon\"/></search>",
+            };
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="foo"/><field name="m2o"/></tree>',
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                    </search>`,
+            });
+            await toggleGroupByMenu(target);
+            await toggleMenuItem(target, "bar");
+            await toggleMenuItem(target, "bar");
+
+            await click(target.querySelector(".o_data_cell"));
+            await clickOpenM2ODropdown(target, "m2o");
+            await clickOpenedDropdownItem(target, "m2o", "Search More...");
+            assert.containsOnce(target, ".modal-content");
+            assert.containsNone(
+                target,
+                ".modal-content .o_group_name",
+                "list in modal not grouped"
+            );
+
+            const modal = target.querySelector(".modal");
+            await toggleGroupByMenu(modal);
+            await toggleMenuItem(modal, "cornichon");
+            await click(target.querySelector(".o_group_header"));
+            assert.containsOnce(target, ".modal-content .o_group_open");
+        }
+    );
+
+    QUnit.test("field values are escaped", async function (assert) {
+        const value = "<script>throw Error();</script>";
+
+        serverData.models.foo.records[0].foo = value;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/></tree>',
+        });
+
+        assert.strictEqual(
+            target.querySelector(".o_data_cell").textContent,
+            value,
+            "value should have been escaped"
+        );
+    });
+
+    QUnit.test("pressing ESC discard the current line changes", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/></tree>',
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsN(target, "tr.o_data_row", 5, "should currently adding a 5th data row");
+
+        await triggerEvent(target, '[name="foo"] input', "keydown", { key: "escape" });
+        assert.containsN(target, "tr.o_data_row", 4, "should have only 4 data row after escape");
+        assert.containsNone(target, "tr.o_data_row.o_selected_row", "no rows should be selected");
+        assert.containsNone(target, ".o_list_button_save", "should not have a save button");
+    });
+
+    QUnit.test(
+        "pressing ESC discard the current line changes (with required)",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="foo" required="1"/></tree>',
+            });
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.containsN(target, "tr.o_data_row", 5, "should currently adding a 5th data row");
+
+            await triggerEvent(target, '[name="foo"] input', "keydown", { key: "escape" });
+            assert.containsN(
+                target,
+                "tr.o_data_row",
+                4,
+                "should have only 4 data row after escape"
+            );
+            assert.containsNone(
+                target,
+                "tr.o_data_row.o_selected_row",
+                "no rows should be selected"
+            );
+            assert.containsNone(target, ".o_list_button_save", "should not have a save button");
+        }
+    );
+
+    QUnit.test("field with password attribute", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo" password="True"/></tree>',
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row .o_data_cell")].map((el) => el.textContent),
+            ["***", "****", "****", "****"]
+        );
+    });
+
+    QUnit.test("list with handle widget", async function (assert) {
+        assert.expect(11);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="int_field" widget="handle"/>
+                    <field name="amount" widget="float" digits="[5,0]"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    assert.strictEqual(
+                        args.offset,
+                        9,
+                        "should write the sequence starting from the lowest current one"
+                    );
+                    assert.strictEqual(
+                        args.field,
+                        "int_field",
+                        "should write the right field as sequence"
+                    );
+                    assert.deepEqual(
+                        args.ids,
+                        [3, 2, 1],
+                        "should write the sequence in correct order"
+                    );
+                    return Promise.resolve();
+                }
+            },
+        });
+
+        let rows = target.querySelectorAll(".o_data_row");
+        assert.strictEqual(
+            rows[0].querySelector("[name='amount']").textContent,
+            "0",
+            "default fourth record should have amount 0"
+        );
+        assert.strictEqual(
+            rows[1].querySelector("[name='amount']").textContent,
+            "500",
+            "default second record should have amount 500"
+        );
+        assert.strictEqual(
+            rows[2].querySelector("[name='amount']").textContent,
+            "1200",
+            "default first record should have amount 1200"
+        );
+        assert.strictEqual(
+            rows[3].querySelector("[name='amount']").textContent,
+            "300",
+            "default third record should have amount 300"
+        );
+
+        // Drag and drop the fourth line in second position
+        await dragAndDrop("tbody tr:nth-child(4) .o_handle_cell", "tbody tr:nth-child(2)");
+        // await nextTick()
+        rows = target.querySelectorAll(".o_data_row");
+        assert.strictEqual(
+            rows[0].querySelector("[name='amount']").textContent,
+            "0",
+            "new second record should have amount 0"
+        );
+        assert.strictEqual(
+            rows[1].querySelector("[name='amount']").textContent,
+            "300",
+            "new fourth record should have amount 300"
+        );
+        assert.strictEqual(
+            rows[2].querySelector("[name='amount']").textContent,
+            "500",
+            "new third record should have amount 500"
+        );
+        assert.strictEqual(
+            rows[3].querySelector("[name='amount']").textContent,
+            "1200",
+            "new first record should have amount 1200"
+        );
+    });
+
+    QUnit.test("result of consecutive resequences is correctly sorted", async function (assert) {
+        assert.expect(9);
+        serverData.models = {
+            // we want the data to be minimal to have a minimal test
+            foo: {
+                fields: { int_field: { string: "int_field", type: "integer", sortable: true } },
+                records: [
+                    { id: 1, int_field: 11 },
+                    { id: 2, int_field: 12 },
+                    { id: 3, int_field: 13 },
+                    { id: 4, int_field: 14 },
+                ],
+            },
+        };
+        let moves = 0;
+        const context = {
+            lang: "en",
+            tz: "taht",
+            uid: 7,
+        };
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="int_field" widget="handle"/>
+                    <field name="id"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    if (moves === 0) {
+                        assert.deepEqual(args, {
+                            context,
+                            model: "foo",
+                            ids: [4, 3],
+                            offset: 13,
+                            field: "int_field",
+                        });
+                    }
+                    if (moves === 1) {
+                        assert.deepEqual(args, {
+                            context,
+                            model: "foo",
+                            ids: [4, 2],
+                            offset: 12,
+                            field: "int_field",
+                        });
+                    }
+                    if (moves === 2) {
+                        assert.deepEqual(args, {
+                            context,
+                            model: "foo",
+                            ids: [2, 4],
+                            offset: 12,
+                            field: "int_field",
+                        });
+                    }
+                    if (moves === 3) {
+                        assert.deepEqual(args, {
+                            context,
+                            model: "foo",
+                            ids: [4, 2],
+                            offset: 12,
+                            field: "int_field",
+                        });
+                    }
+                    moves += 1;
+                }
+            },
+        });
+        assert.strictEqual(
+            $(target).find("tbody tr td.o_list_number").text(),
+            "1234",
+            "default should be sorted by id"
+        );
+
+        await dragAndDrop(
+            ".o_list_view tbody tr:nth-child(4) .o_handle_cell",
+            ".o_list_view tbody tr:nth-child(3)"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr td.o_list_number").text(),
+            "1243",
+            "the int_field (sequence) should have been correctly updated"
+        );
+
+        await dragAndDrop(
+            ".o_list_view tbody tr:nth-child(3) .o_handle_cell",
+            ".o_list_view tbody tr:nth-child(2)"
+        );
+        assert.deepEqual(
+            $(target).find("tbody tr td.o_list_number").text(),
+            "1423",
+            "the int_field (sequence) should have been correctly updated"
+        );
+
+        await dragAndDrop(
+            ".o_list_view tbody tr:nth-child(2) .o_handle_cell",
+            ".o_list_view tbody tr:nth-child(3)",
+            "top"
+        );
+        assert.deepEqual(
+            $(target).find("tbody tr td.o_list_number").text(),
+            "1243",
+            "the int_field (sequence) should have been correctly updated"
+        );
+
+        await dragAndDrop(
+            ".o_list_view tbody tr:nth-child(3) .o_handle_cell",
+            ".o_list_view tbody tr:nth-child(2)",
+            "top"
+        );
+        assert.deepEqual(
+            $(target).find("tbody tr td.o_list_number").text(),
+            "1423",
+            "the int_field (sequence) should have been correctly updated"
+        );
+    });
+
+    QUnit.test("editable list with handle widget", async function (assert) {
+        assert.expect(12);
+
+        // resequence makes sense on a sequence field, not on arbitrary fields
+        serverData.models.foo.records[0].int_field = 0;
+        serverData.models.foo.records[1].int_field = 1;
+        serverData.models.foo.records[2].int_field = 2;
+        serverData.models.foo.records[3].int_field = 3;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" default_order="int_field">
+                    <field name="int_field" widget="handle"/>
+                    <field name="amount" widget="float" digits="[5,0]"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (route === "/web/dataset/resequence") {
+                    assert.strictEqual(
+                        args.offset,
+                        1,
+                        "should write the sequence starting from the lowest current one"
+                    );
+                    assert.strictEqual(
+                        args.field,
+                        "int_field",
+                        "should write the right field as sequence"
+                    );
+                    assert.deepEqual(
+                        args.ids,
+                        [4, 2, 3],
+                        "should write the sequence in correct order"
+                    );
+                }
+            },
+        });
+
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(0) td:last").text(),
+            "1200",
+            "default first record should have amount 1200"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(1) td:last").text(),
+            "500",
+            "default second record should have amount 500"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(2) td:last").text(),
+            "300",
+            "default third record should have amount 300"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(3) td:last").text(),
+            "0",
+            "default fourth record should have amount 0"
+        );
+
+        // Drag and drop the fourth line in second position
+        await dragAndDrop("tbody tr:nth-child(4) .o_handle_cell", "tbody tr:nth-child(2)");
+
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(0) td:last").text(),
+            "1200",
+            "new first record should have amount 1200"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(1) td:last").text(),
+            "0",
+            "new second record should have amount 0"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(2) td:last").text(),
+            "500",
+            "new third record should have amount 500"
+        );
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(3) td:last").text(),
+            "300",
+            "new fourth record should have amount 300"
+        );
+
+        await click(target, "tbody tr:nth-child(2) div[name='amount']");
+
+        assert.strictEqual(
+            $(target).find("tbody tr:eq(1) td:last input").val(),
+            "0",
+            "the edited record should be the good one"
+        );
+    });
+
+    QUnit.test("editable target, handle widget locks and unlocks on sort", async function (assert) {
+        // we need another sortable field to lock/unlock the handle
+        serverData.models.foo.fields.amount.sortable = true;
+        // resequence makes sense on a sequence field, not on arbitrary fields
+        serverData.models.foo.records[0].int_field = 0;
+        serverData.models.foo.records[1].int_field = 1;
+        serverData.models.foo.records[2].int_field = 2;
+        serverData.models.foo.records[3].int_field = 3;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" default_order="int_field">
+                    <field name="int_field" widget="handle"/>
+                    <field name="amount" widget="float"/>
+                </tree>`,
+        });
+
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "1200.00500.00300.000.00",
+            "default should be sorted by int_field"
+        );
+
+        // Drag and drop the fourth line in second position
+        await dragAndDrop("tbody tr:nth-child(4) .o_row_handle", "tbody tr:nth-child(2)");
+
+        // Handle should be unlocked at this point
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "1200.000.00500.00300.00",
+            "drag and drop should have succeeded, as the handle is unlocked"
+        );
+
+        // Sorting by a field different for int_field should lock the handle
+        await click(target.querySelectorAll(".o_column_sortable")[1]);
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "0.00300.00500.001200.00",
+            "should have been sorted by amount"
+        );
+
+        // Drag and drop the fourth line in second position (not)
+        await dragAndDrop("tbody tr:nth-child(4) .o_row_handle", "tbody tr:nth-child(2)");
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "0.00300.00500.001200.00",
+            "drag and drop should have failed as the handle is locked"
+        );
+
+        // Sorting by int_field should unlock the handle
+        await click(target.querySelectorAll(".o_column_sortable")[0]);
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "1200.000.00500.00300.00",
+            "records should be ordered as per the previous resequence"
+        );
+
+        // Drag and drop the fourth line in second position
+        await dragAndDrop("tbody tr:nth-child(4) .o_row_handle", "tbody tr:nth-child(2)");
+        assert.strictEqual(
+            $(target).find('tbody div[name="amount"]').text(),
+            "1200.00300.000.00500.00",
+            "drag and drop should have worked as the handle is unlocked"
+        );
+    });
+
+    QUnit.test("editable list with handle widget with slow network", async function (assert) {
+        assert.expect(15);
+
+        // resequence makes sense on a sequence field, not on arbitrary fields
+        serverData.models.foo.records[0].int_field = 0;
+        serverData.models.foo.records[1].int_field = 1;
+        serverData.models.foo.records[2].int_field = 2;
+        serverData.models.foo.records[3].int_field = 3;
+
+        const prom = makeDeferred();
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="int_field" widget="handle" />
+                    <field name="amount" widget="float" digits="[5,0]" />
+                </tree>`,
+            mockRPC: async function (route, { field, ids, offset }) {
+                if (route === "/web/dataset/resequence") {
+                    assert.strictEqual(
+                        offset,
+                        1,
+                        "should write the sequence starting from the lowest current one"
+                    );
+                    assert.strictEqual(
+                        field,
+                        "int_field",
+                        "should write the right field as sequence"
+                    );
+                    assert.deepEqual(ids, [4, 2, 3], "should write the sequence in correct order");
+                    await prom;
+                }
+            },
+        });
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(1) td:nth-child(3)").textContent,
+            "1200",
+            "default first record should have amount 1200"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(2) td:nth-child(3)").textContent,
+            "500",
+            "default second record should have amount 500"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(3) td:nth-child(3)").textContent,
+            "300",
+            "default third record should have amount 300"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(4) td:nth-child(3)").textContent,
+            "0",
+            "default fourth record should have amount 0"
+        );
+        // drag and drop the fourth line in second position
+        await dragAndDrop("tbody tr:nth-child(4) .o_handle_cell", "tbody tr:nth-child(2)");
+
+        // edit moved row before the end of resequence
+        await click(target, "tbody tr:nth-child(4) .o_field_widget[name='amount']");
+        await nextTick();
+
+        assert.containsNone(
+            target,
+            "tbody tr:nth-child(4) td:nth-child(3) input",
+            "shouldn't edit the line before resequence"
+        );
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsOnce(
+            target,
+            "tbody tr:nth-child(4) td:nth-child(3) input",
+            "should edit the line after resequence"
+        );
+
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(4) td:nth-child(3) input").value,
+            "300",
+            "fourth record should have amount 300"
+        );
+
+        await editInput(target, ".o_data_row [name='amount'] input", 301);
+        await click(target, "tbody tr:nth-child(1) .o_field_widget[name='amount']");
+        await clickSave(target);
+
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(1) td:nth-child(3)").textContent,
+            "1200",
+            "first record should have amount 1200"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(2) td:nth-child(3)").textContent,
+            "0",
+            "second record should have amount 1"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(3) td:nth-child(3)").textContent,
+            "500",
+            "third record should have amount 500"
+        );
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(4) td:nth-child(3)").textContent,
+            "301",
+            "fourth record should have amount 301"
+        );
+
+        await click(target, "tbody tr:nth-child(4) .o_field_widget[name='amount']");
+
+        assert.strictEqual(
+            target.querySelector("tbody tr:nth-child(4) td:nth-child(3) input").value,
+            "301",
+            "fourth record should have amount 301"
+        );
+    });
+
+    QUnit.test("multiple clicks on Add do not create invalid rows", async function (assert) {
+        serverData.models.foo.onchanges = {
+            m2o: function () {},
+        };
+
+        const prom = makeDeferred();
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="m2o" required="1"/></tree>',
+            mockRPC: async function (route, args, performRPC) {
+                const result = await performRPC(route, args);
+                if (args.method === "onchange") {
+                    await prom;
+                }
+                return result;
+            },
+        });
+
+        assert.containsN(target, ".o_data_row", 4, "should contain 4 records");
+
+        // click on Add twice, and delay the onchange
+        click(target.querySelector(".o_list_button_add"));
+        click(target.querySelector(".o_list_button_add"));
+
+        prom.resolve();
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 5, "only one record should have been created");
+    });
+
+    QUnit.test("reference field rendering", async function (assert) {
+        serverData.models.foo.records.push({
+            id: 5,
+            reference: "res_currency,2",
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="reference"/></tree>',
+            mockRPC(route, args) {
+                if (args.method === "name_get") {
+                    assert.step(args.model);
+                }
+            },
+        });
+
+        assert.verifySteps(
+            ["bar", "res_currency"],
+            "should have done 1 name_get by model in reference values"
+        );
+        assert.strictEqual(
+            $(target).find("tbody td:not(.o_list_record_selector)").text(),
+            "Value 1USDEUREUR",
+            "should have the display_name of the reference"
+        );
+    });
+
+    QUnit.test("reference field batched in grouped list", async function (assert) {
+        assert.expect(9);
+
+        serverData.models.foo.records = [
+            // group 1
+            { id: 1, foo: "1", reference: "bar,1" },
+            { id: 2, foo: "1", reference: "bar,2" },
+            { id: 3, foo: "1", reference: "res_currency,1" },
+            //group 2
+            { id: 4, foo: "2", reference: "bar,2" },
+            { id: 5, foo: "2", reference: "bar,3" },
+        ];
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1">
+                   <field name="foo" invisible="1"/>
+                   <field name="reference"/>
+               </tree>`,
+            groupBy: ["foo"],
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "name_get") {
+                    if (args.model === "bar") {
+                        assert.deepEqual(args.args[0], [1, 2, 3]);
+                    }
+                    if (args.model === "res_currency") {
+                        assert.deepEqual(args.args[0], [1]);
+                    }
+                }
+            },
+        });
+        assert.verifySteps(["get_views", "web_read_group", "name_get", "name_get"]);
+        assert.containsN(target, ".o_group_header", 2);
+        const allNames = Array.from(
+            target.querySelectorAll(".o_data_cell"),
+            (node) => node.textContent
+        );
+        assert.deepEqual(allNames, ["Value 1", "Value 2", "USD", "Value 2", "Value 3"]);
+    });
+
+    QUnit.test("multi edit in view grouped by field not in view", async function (assert) {
+        serverData.models.foo.records = [
+            // group 1
+            { id: 1, foo: "1", m2o: 1 },
+            { id: 3, foo: "2", m2o: 1 },
+            //group 2
+            { id: 2, foo: "1", m2o: 2 },
+            { id: 4, foo: "2", m2o: 2 },
+            // group 3
+            { id: 5, foo: "2", m2o: 3 },
+        ];
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1" multi_edit="1">
+                   <field name="foo"/>
+               </tree>`,
+            groupBy: ["m2o"],
+        });
+        // Select items from the first group
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+        await click(target.querySelector(".o_list_char"));
+        await editInput(target, ".o_data_row [name=foo] input", "test");
+        assert.containsOnce(target, ".modal");
+
+        await click(target, ".modal .modal-footer .btn-primary");
+        assert.containsNone(target, ".modal");
+        const allNames = [...document.querySelectorAll(".o_data_cell")].map((n) => n.textContent);
+        assert.deepEqual(allNames, ["test", "test", "1", "2", "2"]);
+    });
+
+    QUnit.test("multi edit reference field batched in grouped list", async function (assert) {
+        assert.expect(19);
+
+        serverData.models.foo.records = [
+            // group 1
+            { id: 1, foo: "1", reference: "bar,1" },
+            { id: 2, foo: "1", reference: "bar,2" },
+            //group 2
+            { id: 3, foo: "2", reference: "res_currency,1" },
+            { id: 4, foo: "2", reference: "bar,2" },
+            { id: 5, foo: "2", reference: "bar,3" },
+        ];
+        // Field boolean_toggle just to simplify the test flow
+        let nameGetCount = 0;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree expand="1" multi_edit="1">
+                    <field name="foo" invisible="1"/>
+                    <field name="bar" widget="boolean_toggle"/>
+                    <field name="reference"/>
+                </tree>`,
+            groupBy: ["foo"],
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "write") {
+                    assert.deepEqual(args.args, [[1, 2, 3], { bar: true }]);
+                }
+                if (args.method === "name_get") {
+                    if (nameGetCount === 2) {
+                        assert.strictEqual(args.model, "bar");
+                        assert.deepEqual(args.args[0], [1, 2]);
+                    }
+                    if (nameGetCount === 3) {
+                        assert.strictEqual(args.model, "res_currency");
+                        assert.deepEqual(args.args[0], [1]);
+                    }
+                    nameGetCount++;
+                }
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_read_group", "name_get", "name_get"]);
+        await click(target.querySelectorAll(".o_data_row .o_list_record_selector input")[0]);
+        await click(target.querySelectorAll(".o_data_row .o_list_record_selector input")[1]);
+        await click(target.querySelectorAll(".o_data_row .o_list_record_selector input")[2]);
+        await click(target.querySelector(".o_data_row .o_field_boolean label"));
+        assert.containsOnce(target, ".modal");
+
+        await click(target, ".modal .modal-footer .btn-primary");
+        assert.containsNone(target, ".modal");
+        assert.verifySteps(["write", "read", "name_get", "name_get"]);
+        assert.containsN(target, ".o_group_header", 2);
+
+        const allNames = Array.from(target.querySelectorAll(".o_data_cell"))
+            .filter((node) => !node.children.length)
+            .map((n) => n.textContent);
+        assert.deepEqual(allNames, ["Value 1", "Value 2", "USD", "Value 2", "Value 3"]);
+    });
+
+    QUnit.test("multi edit field with daterange widget", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.daterange = {
+            fields: {
+                date_start: { string: "Date Start", type: "date" },
+                date_end: { string: "Date End", type: "date" },
+            },
+            records: [
+                {
+                    id: 1,
+                    date_start: "2017-01-25",
+                    date_end: "2017-01-26",
+                },
+                {
+                    id: 2,
+                    date_start: "2017-01-02",
+                    date_end: "2017-01-03",
+                },
+            ],
+        };
+        patchTimeZone(360);
+
+        await makeView({
+            type: "list",
+            resModel: "daterange",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="date_start" widget="daterange" options="{'related_end_date': 'date_end'}" />
+                    <field name="date_end" widget="daterange" options="{'related_start_date': 'date_start'}"/>
+                </tree>`,
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(args.args, [
+                        [1, 2],
+                        { date_start: "2017-01-16", date_end: "2017-02-12" },
+                    ]);
+                }
+            },
+        });
+        await click(target.querySelector(".o_list_record_selector input"));
+        await click(target.querySelector(".o_data_row .o_data_cell")); // edit first row
+        await click(target.querySelector(".o_data_row .o_data_cell .o_field_daterange input"));
+        // change dates via the daterangepicker
+        const datepicker = document.querySelector(`.daterangepicker[data-name="date_start"]`);
+        await triggerEvent(
+            datepicker,
+            ".drp-calendar.left .available[data-title='r3c1']",
+            "mousedown"
+        );
+        await triggerEvent(
+            datepicker,
+            ".drp-calendar.right .available[data-title='r2c0']",
+            "mousedown"
+        );
+        const applyBtn = datepicker.querySelector(".applyBtn");
+        assert.notOk(applyBtn.disabled);
+
+        // Apply the changes
+        await click(applyBtn);
+        assert.containsOnce(
+            target,
+            ".modal",
+            "The confirm dialog should appear to confirm the multi edition."
+        );
+
+        const changesTable = document.querySelector(".modal-body .o_modal_changes");
+        assert.strictEqual(
+            changesTable.innerText.replaceAll("\n", "").replaceAll("\t", ""),
+            "Field:Date StartUpdate to:01/16/2017Field:Date EndUpdate to:02/12/2017"
+        );
+
+        // Valid the confirm dialog
+        await click(target, ".modal .btn-primary");
+        assert.containsNone(target, ".modal");
+    });
+
+    QUnit.test(
+        "multi edit field with daterange widget (edition without using the picker)",
+        async function (assert) {
+            assert.expect(4);
+
+            serverData.models.daterange = {
+                fields: {
+                    date_start: { string: "Date Start", type: "date" },
+                    date_end: { string: "Date End", type: "date" },
+                },
+                records: [
+                    {
+                        id: 1,
+                        date_start: "2017-01-25",
+                        date_end: "2017-01-26",
+                    },
+                    {
+                        id: 2,
+                        date_start: "2017-01-02",
+                        date_end: "2017-01-03",
+                    },
+                ],
+            };
+            patchTimeZone(360);
+
+            await makeView({
+                type: "list",
+                resModel: "daterange",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="date_start" widget="daterange" options="{'related_end_date': 'date_end'}" />
+                        <field name="date_end" widget="daterange" options="{'related_start_date': 'date_start'}"/>
+                    </tree>`,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(args.args, [[1, 2], { date_start: "2021-04-01" }]);
+                    }
+                },
+            });
+
+            // Test manually edit the date without using the daterange picker
+            await click(target.querySelector(".o_list_record_selector input"));
+            await click(target.querySelector(".o_data_row .o_data_cell")); // edit first row
+
+            // Change the date in the first datetime
+            await editInput(
+                target,
+                ".o_data_row .o_data_cell .o_field_daterange[name='date_start'] input",
+                "2021-04-01 11:00:00"
+            );
+            assert.containsOnce(
+                target,
+                ".modal",
+                "The confirm dialog should appear to confirm the multi edition."
+            );
+
+            const changesTable = target.querySelector(".modal-body .o_modal_changes");
+            assert.strictEqual(
+                changesTable.innerText.replaceAll("\n", "").replaceAll("\t", ""),
+                "Field:Date StartUpdate to:04/01/2021"
+            );
+
+            // Valid the confirm dialog
+            await click(target, ".modal .btn-primary");
+            assert.containsNone(target, ".modal");
+        }
+    );
+
+    QUnit.test("editable list view: contexts are correctly sent", async function (assert) {
+        patchWithCleanup(session.user_context, { someKey: "some value" });
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/></tree>',
+            mockRPC(route, args) {
+                const context = args.kwargs.context;
+                assert.strictEqual(context.active_field, 2, "context should be correct");
+                assert.strictEqual(context.someKey, "some value", "context should be correct");
+            },
+            context: { active_field: 2 },
+        });
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target.querySelector(".o_field_widget[name=foo] input"), null, "abc");
+        await click(target.querySelector(".o_list_button_save"));
+    });
+
+    QUnit.test("editable list view: contexts with multiple edit", async function (assert) {
+        assert.expect(4);
+
+        patchWithCleanup(session.user_context, { someKey: "some value" });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree multi_edit="1"><field name="foo"/></tree>',
+            mockRPC(route, args) {
+                if (
+                    route === "/web/dataset/call_kw/foo/write" ||
+                    route === "/web/dataset/call_kw/foo/read"
+                ) {
+                    const context = args.kwargs.context;
+                    assert.strictEqual(context.active_field, 2, "context should be correct");
+                    assert.strictEqual(context.someKey, "some value", "context should be correct");
+                }
+            },
+            context: { active_field: 2 },
+        });
+
+        // Uses the main selector to select all lines.
+        await click(target.querySelector(".o_list_record_selector input"));
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        // Edits first record then confirms changes.
+        await editInput(target, ".o_data_row [name=foo] input", "legion");
+        await click(target, ".modal-dialog button.btn-primary");
+    });
+
+    QUnit.test("editable list view: single edition with selected records", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree editable="top" multi_edit="1"><field name="foo"/></tree>`,
+        });
+
+        // Select first record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+
+        // Edit the second
+        await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_cell input", "oui");
+        await click(target.querySelector(".o_list_button_save"));
+
+        assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
+            "yop",
+            "oui",
+            "gnap",
+            "blip",
+        ]);
+    });
+
+    QUnit.test(
+        "editable list view: non dirty record with required fields",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo" required="1"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+            assert.containsN(target, ".o_data_row", 4);
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.containsN(target, ".o_data_row", 5);
+            assert.containsOnce(target, ".o_selected_row");
+
+            // do not change anything and then click outside should discard record
+            await click(target, ".o_list_view");
+            assert.containsN(target, ".o_data_row", 4);
+            assert.containsNone(target, ".o_selected_row");
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.containsN(target, ".o_data_row", 5);
+            assert.containsOnce(target, ".o_selected_row");
+
+            // do not change anything and then click save button should not allow to discard record
+            await click(target.querySelector(".o_list_button_save"));
+            assert.containsN(target, ".o_data_row", 5);
+            assert.containsOnce(target, ".o_selected_row");
+
+            // selecting some other row should discard non dirty record
+            await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+            assert.containsN(target, ".o_data_row", 4);
+            assert.containsOnce(target, ".o_selected_row");
+
+            // click somewhere else to discard currently selected row
+            await click(target, ".o_list_view");
+            assert.containsN(target, ".o_data_row", 4);
+            assert.containsNone(target, ".o_selected_row");
+
+            await click(target.querySelector(".o_list_button_add"));
+            assert.containsN(target, ".o_data_row", 5);
+            assert.containsOnce(target, ".o_selected_row");
+
+            // do not change anything and press Enter key should not allow to discard record
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+
+            // discard row and create new record and keep required field empty and click anywhere
+            await click(target.querySelector(".o_list_button_discard"));
+            await click(target, ".o_list_button_add");
+            assert.containsOnce(target, ".o_selected_row", "row should be selected");
+            await editInput(target, ".o_selected_row [name=int_field] input", 123);
+            await click(target, ".o_list_view");
+            assert.containsOnce(target, ".o_selected_row", "row should still be selected");
+        }
+    );
+
+    QUnit.test("editable list view: multi edition", async function (assert) {
+        assert.expect(27);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom" multi_edit="1">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args,
+                        [[1, 2], { int_field: 666 }],
+                        "should write on multi records"
+                    );
+                } else if (args.method === "read") {
+                    if (args.args[0].length !== 1) {
+                        assert.deepEqual(
+                            args.args,
+                            [
+                                [1, 2],
+                                ["foo", "int_field"],
+                            ],
+                            "should batch the read"
+                        );
+                    }
+                }
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+
+        // select two records
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+
+        // edit a line without modifying a field
+        await click(rows[0].querySelector(".o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+        await click(target, ".o_list_view");
+        assert.containsNone(target, ".o_selected_row");
+
+        // create a record and edit its value
+        await click(target, ".o_list_button_add");
+        assert.verifySteps(["onchange"]);
+
+        await editInput(target, ".o_selected_row [name=int_field] input", 123);
+        assert.containsNone(document.body, ".modal");
+
+        await clickSave(target);
+        assert.verifySteps(["create", "read"]);
+
+        // edit a field
+        await click(rows[0].querySelector("[name=int_field]"));
+        await editInput(rows[0], "[name=int_field] input", 666);
+        assert.containsOnce(target, ".modal");
+
+        await click(target, ".modal .btn.btn-secondary");
+        assert.containsN(target, ".o_list_record_selector input:checked", 2);
+        assert.deepEqual(
+            [...rows[0].querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["yop", "10"]
+        );
+        assert.strictEqual(
+            document.activeElement,
+            rows[0].querySelector(".o_data_cell[name=int_field]")
+        );
+
+        await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+        await editInput(target, ".o_data_row [name=int_field] input", 666);
+        assert.ok(
+            $(".modal").text().includes("those 2 records"),
+            "the number of records should be correctly displayed"
+        );
+
+        await click(target, ".modal .btn-primary");
+        assert.containsNone(
+            target,
+            ".o_data_cell input.o_field_widget",
+            "no field should be editable anymore"
+        );
+        assert.containsNone(
+            target,
+            ".o_list_record_selector input:checked",
+            "no record should be selected anymore"
+        );
+        assert.verifySteps(["write", "read"]);
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+            "yop666",
+            "the first row should be updated"
+        );
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(1) .o_data_cell").text(),
+            "blip666",
+            "the second row should be updated"
+        );
+        assert.containsNone(
+            target,
+            ".o_data_cell input.o_field_widget",
+            "no field should be editable anymore"
+        );
+        assert.strictEqual(
+            document.activeElement,
+            $(target).find(".o_data_row:eq(0) .o_data_cell:eq(1)")[0],
+            "focus should be given to the most recently edited cell after confirm"
+        );
+    });
+
+    QUnit.test("editable list view: multi edit a field with string attr", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo" string="Custom Label"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        // select two records
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+
+        // edit foo
+        await click(rows[0].querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_row [name=foo] input", "new value");
+
+        assert.containsOnce(target, ".modal");
+        const changesTable = target.querySelector(".modal-body .o_modal_changes");
+        assert.strictEqual(
+            changesTable.innerText.replaceAll("\n", "").replaceAll("\t", ""),
+            "Field:Custom LabelUpdate to:new value"
+        );
+    });
+
+    QUnit.test("create in multi editable list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            createRecord: () => {
+                assert.step("createRecord");
+            },
+        });
+
+        // click on CREATE (should trigger a switch_view)
+        await click(target, ".o_list_button_add");
+        assert.verifySteps(["createRecord"]);
+    });
+
+    QUnit.test("editable list view: multi edition cannot call onchanges", async function (assert) {
+        serverData.models.foo.onchanges = {
+            foo: function (obj) {
+                obj.int_field = obj.foo.length;
+            },
+        };
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "write") {
+                    args.args[1].int_field = args.args[1].foo.length;
+                }
+            },
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+
+        // select and edit a single record
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[0].querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_row [name=foo] input", "hi");
+        assert.containsNone(target, ".modal");
+        assert.deepEqual(
+            [...rows[0].querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["hi", "2"]
+        );
+        assert.deepEqual(
+            [...rows[1].querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["blip", "9"]
+        );
+
+        assert.verifySteps(["write", "read"]);
+
+        // select the second record (the first one is still selected)
+        assert.containsNone(target, ".o_list_record_selector input:checked");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+
+        // edit foo, first row
+        await click(rows[0].querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_row [name=foo] input", "hello");
+        assert.containsOnce(target, ".modal"); // save dialog
+
+        await click(target, ".modal .btn-primary");
+        assert.deepEqual(
+            [...rows[0].querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["hello", "5"]
+        );
+        assert.deepEqual(
+            [...rows[1].querySelectorAll(".o_data_cell")].map((el) => el.innerText),
+            ["hello", "5"]
+        );
+
+        assert.verifySteps(["write", "read"], "should not perform the onchange in multi edition");
+    });
+
+    QUnit.test(
+        "editable list view: multi edition error and cancellation handling",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo" required="1"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+
+            assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+
+            // select two records
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+
+            // edit a line and cancel
+            await click(rows[0].querySelector(".o_data_cell"));
+            assert.containsNone(target, ".o_list_record_selector input:enabled");
+            await editInput(target, ".o_selected_row [name=foo] input", "abc");
+            await click(target, ".modal .btn.btn-secondary");
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+                "yop10",
+                "first cell should have discarded any change"
+            );
+            assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+
+            // edit a line with an invalid format type
+            await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+            assert.containsNone(target, ".o_list_record_selector input:enabled");
+
+            await editInput(target, ".o_selected_row [name=int_field] input", "hahaha");
+            assert.containsOnce(target, ".modal", "there should be an opened modal");
+
+            await click(target, ".modal .btn-primary");
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+                "yop10",
+                "changes should be discarded"
+            );
+            assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+
+            // edit a line with an invalid value
+            await click(rows[0].querySelector(".o_data_cell"));
+            assert.containsNone(target, ".o_list_record_selector input:enabled");
+
+            await editInput(target, ".o_selected_row [name=foo] input", "");
+            assert.containsOnce(target, ".modal", "there should be an opened modal");
+            await click(target, ".modal .btn-primary");
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+                "yop10",
+                "changes should be discarded"
+            );
+            assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+        }
+    );
+
+    QUnit.test("multi edition: many2many_tags in many2many field", async function (assert) {
+        for (let i = 4; i <= 10; i++) {
+            serverData.models.bar.records.push({ id: i, display_name: "Value" + i });
+        }
+
+        serverData.views = {
+            "bar,false,list": '<tree><field name="name"/></tree>',
+            "bar,false,search": "<search></search>",
+        };
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree multi_edit="1"><field name="m2m" widget="many2many_tags"/></tree>',
+        });
+
+        assert.containsN(target, ".o_list_record_selector input:enabled", 5);
+
+        // select two records and enter edit mode
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+        await click(rows[0].querySelector(".o_data_cell"));
+        await selectDropdownItem(target, "m2m", "Search More...");
+        assert.containsOnce(document.body, ".modal", "should have open the modal");
+
+        await click(target.querySelector(".modal .o_data_row .o_field_cell"));
+        assert.containsOnce(
+            target,
+            ".modal [role='alert']",
+            "should have open the confirmation modal"
+        );
+        assert.containsN(target, ".modal .o_field_many2many_tags .badge", 3);
+        assert.strictEqual(
+            target
+                .querySelector(".modal .o_field_many2many_tags .badge:nth-child(3)")
+                .textContent.trim(),
+            "Value 3",
+            "should have display_name in badge"
+        );
+    });
+
+    QUnit.test("multi edition: many2many field in grouped list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            groupBy: ["m2m"],
+        });
+
+        await click(target.querySelectorAll(".o_group_header")[1]); // open Value 1 group
+        await click(target.querySelectorAll(".o_group_header")[2]); // open Value 2 group
+
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+        await selectDropdownItem(target, "m2m", "Value 3");
+        assert.strictEqual(
+            rows[0].querySelectorAll(".o_data_cell")[1].textContent,
+            "Value 1Value 2Value 3",
+            "should have a right value in many2many field"
+        );
+        assert.strictEqual(
+            rows[3].querySelectorAll(".o_data_cell")[1].textContent,
+            "Value 1Value 2Value 3",
+            "should have same value in many2many field on all other records with same res_id"
+        );
+    });
+
+    QUnit.test(
+        "editable list view: multi edition of many2one: set same value",
+        async function (assert) {
+            assert.expect(4);
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo"/>
+                        <field name="m2o"/>
+                    </tree>`,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(
+                            args.args,
+                            [[1, 2, 3, 4], { m2o: 1 }],
+                            "should force write value on all selected records"
+                        );
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                $(target).find(".o_list_many2one").text(),
+                "Value 1Value 2Value 1Value 1"
+            );
+
+            // select all records (the first one has value 1 for m2o)
+            await click(target.querySelector(".o_list_record_selector input"));
+
+            // set m2o to 1 in first record
+            await click(target.querySelector(".o_data_row .o_data_cell"));
+            await editInput(target, ".o_data_row [name=m2o] input", "Value 1");
+            await click(target.querySelector(".o-autocomplete--dropdown-item"));
+            assert.containsOnce(target, ".modal");
+
+            await click(target, ".modal .modal-footer .btn-primary");
+            assert.strictEqual(
+                $(target).find(".o_list_many2one").text(),
+                "Value 1Value 1Value 1Value 1"
+            );
+        }
+    );
+
+    QUnit.test(
+        'editable list view: clicking on "Discard changes" in multi edition',
+        async function (assert) {
+            await makeView({
+                type: "list",
+                arch: `
+                    <tree editable="top" multi_edit="1">
+                        <field name="foo"/>
+                    </tree>`,
+                serverData,
+                resModel: "foo",
+            });
+
+            // select two records
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+            await click(rows[0].querySelector(".o_data_cell"));
+            target.querySelector(".o_data_row .o_data_cell input").value = "oof";
+
+            const discardButton = target.querySelector(".o_list_button_discard");
+            // Simulates an actual click (event chain is: mousedown > change > blur > focus > mouseup > click)
+            await triggerEvents(discardButton, null, ["mousedown"]);
+            await triggerEvents(target.querySelector(".o_data_row .o_data_cell input"), null, [
+                "change",
+                "blur",
+                "focusout",
+            ]);
+            await triggerEvents(discardButton, null, ["focus"]);
+            await triggerEvents(discardButton, null, ["mouseup"]);
+            await click(discardButton);
+
+            assert.containsNone(document.body, ".modal", "should not open modal");
+
+            assert.strictEqual(
+                $(target).find(".o_data_row:first() .o_data_cell:first()").text(),
+                "yop"
+            );
+        }
+    );
+
+    QUnit.test(
+        'editable list view (multi edition): mousedown on "Discard", but mouseup somewhere else',
+        async function (assert) {
+            await makeView({
+                type: "list",
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo"/>
+                    </tree>`,
+                serverData,
+                resModel: "foo",
+            });
+
+            // select two records
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[1], ".o_list_record_selector input");
+            await click(rows[0].querySelector(".o_data_cell"));
+            target.querySelector(".o_data_row .o_data_cell input").value = "oof";
+
+            const discardButton = target.querySelector(".o_list_button_discard");
+            // Simulates an actual click (event chain is: mousedown > change > blur > focus > mouseup > click)
+            await triggerEvents(discardButton, null, ["mousedown"]);
+            await triggerEvents(target.querySelector(".o_data_row .o_data_cell input"), null, [
+                "change",
+                "blur",
+                "focusout",
+            ]);
+            await triggerEvents(discardButton, null, ["focus"]);
+            await triggerEvents(document, null, ["mouseup"]);
+
+            assert.ok(
+                $(".modal").text().includes("Confirmation"),
+                "Modal should ask to save changes"
+            );
+            await click(target, ".modal .btn-primary");
+        }
+    );
+
+    QUnit.test(
+        "editable list view (multi edition): writable fields in readonly (force save)",
+        async function (assert) {
+            assert.expect(8);
+
+            // boolean toogle widget allows for writing on the record even in readonly mode
+            await makeView({
+                type: "list",
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="bar" widget="boolean_toggle"/>
+                    </tree>`,
+                serverData,
+                resModel: "foo",
+                mockRPC(route, args) {
+                    assert.step(args.method || route);
+                    if (args.method === "write") {
+                        assert.deepEqual(args.args, [[1, 3], { bar: false }]);
+                    }
+                },
+            });
+
+            assert.verifySteps(["get_views", "web_search_read"]);
+            // select two records
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+            await click(rows[2], ".o_list_record_selector input");
+            await click(rows[0].querySelector(".o_boolean_toggle label"));
+
+            assert.ok(
+                $(".modal").text().includes("Confirmation"),
+                "Modal should ask to save changes"
+            );
+            await click(target, ".modal .btn-primary");
+            assert.verifySteps(["write", "read"]);
+        }
+    );
+
+    QUnit.test(
+        "editable list view: multi edition with readonly modifiers",
+        async function (assert) {
+            assert.expect(5);
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="id"/>
+                        <field name="foo"/>
+                        <field name="int_field" attrs='{"readonly": [("id", ">" , 2)]}'/>
+                    </tree>`,
+                mockRPC(route, args) {
+                    if (args.method === "write") {
+                        assert.deepEqual(
+                            args.args,
+                            [[1, 2], { int_field: 666 }],
+                            "should only write on the valid records"
+                        );
+                    }
+                },
+            });
+
+            // select all records
+            await click(target.querySelector(".o_list_record_selector input"));
+            ``; // edit a field
+            await click(target.querySelectorAll(".o_data_row .o_data_cell")[1]);
+            await editInput(target, ".o_data_row [name=int_field] input", 666);
+
+            const modalText = target
+                .querySelector(".modal-body")
+                .textContent.split(" ")
+                .filter((w) => w.trim() !== "")
+                .join(" ")
+                .split("\n")
+                .join("");
+            assert.strictEqual(
+                modalText,
+                "Among the 4 selected records, 2 are valid for this update. Are you sure you want to " +
+                    "perform the following update on those 2 records ? Field:int_fieldUpdate to:666"
+            );
+            assert.strictEqual(
+                target.querySelector(".modal .o_modal_changes .o_field_widget").parentNode.style
+                    .pointerEvents,
+                "none",
+                "pointer events should be deactivated on the demo widget"
+            );
+
+            await click(target, ".modal .btn-primary");
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+                "1yop666",
+                "the first row should be updated"
+            );
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(1) .o_data_cell").text(),
+                "2blip666",
+                "the second row should be updated"
+            );
+        }
+    );
+
+    QUnit.test(
+        "editable list view: multi edition when the domain is selected",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree multi_edit="1" limit="2">
+                        <field name="id"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+
+            // select all records, and then select all domain
+            await click(target.querySelector(".o_list_record_selector input"));
+            await click(target.querySelector(".o_list_selection_box .o_list_select_domain"));
+
+            // edit a field
+            await click(target.querySelectorAll(".o_data_row .o_data_cell")[1]);
+            await editInput(target, ".o_data_row [name=int_field] input", 666);
+            assert.ok(
+                target
+                    .querySelector(".modal-body")
+                    .textContent.includes(
+                        "This update will only consider the records of the current page."
+                    )
+            );
+        }
+    );
+
+    QUnit.test("editable list view: many2one with readonly modifier", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="m2o" readonly="1"/>
+                    <field name="foo"/>
+                </tree>`,
+        });
+
+        // edit a field
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        assert.containsOnce(target, '.o_data_row:eq(0) .o_data_cell:eq(0) div[name="m2o"] a');
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelectorAll(".o_data_row .o_data_cell")[1].querySelector("input"),
+            "focus should go to the char input"
+        );
+    });
+
+    QUnit.test("editable list view: multi edition server error handling", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree multi_edit="1"><field name="foo" required="1"/></tree>',
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    return Promise.reject();
+                }
+            },
+        });
+
+        // select two records
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+
+        // edit a line and confirm
+        await click(rows[0].querySelector(".o_data_cell"));
+        await editInput(target, ".o_selected_row [name=foo] input", "abc");
+        await click(target, ".o_list_view");
+        await click(target, ".modal .btn-primary");
+        // Server error: if there was a crash manager, there would be an open error at this point...
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+            "yop",
+            "first cell should have discarded any change"
+        );
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(1) .o_data_cell").text(),
+            "blip",
+            "second selected record should not have changed"
+        );
+        assert.containsNone(
+            target,
+            ".o_data_cell input.o_field_widget",
+            "no field should be editable anymore"
+        );
+    });
+
+    QUnit.test("editable readonly list view: navigation", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            selectRecord: (resId) => {
+                assert.step(`resId: ${resId}`);
+            },
+        });
+
+        assert.strictEqual(document.activeElement, target.querySelector(".o_searchview_input"));
+
+        // ArrowDown two times must get to the checkbox selector of first data row
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:first-child .o_list_record_selector input")
+        );
+
+        // select the second record
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        let checkbox = target.querySelector(
+            ".o_data_row:nth-child(2) .o_list_record_selector input"
+        );
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(!checkbox.checked);
+        let event = triggerEvent(checkbox, null, "keydown", { key: "Space" }, { fast: true });
+        assert.ok(!event.defaultPrevented);
+        checkbox.checked = true;
+        await nextTick();
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(checkbox.checked);
+
+        await triggerEvent(document.activeElement, null, "input");
+        await triggerEvent(document.activeElement, null, "change");
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(checkbox.checked);
+
+        // select the fourth record
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        checkbox = target.querySelector(".o_data_row:nth-child(4) .o_list_record_selector input");
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(!checkbox.checked);
+        event = triggerEvent(checkbox, null, "keydown", { key: "Space" }, { fast: true });
+        assert.ok(!event.defaultPrevented);
+        checkbox.checked = true;
+        await nextTick();
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(checkbox.checked);
+
+        await triggerEvent(document.activeElement, null, "input");
+        await triggerEvent(document.activeElement, null, "change");
+        assert.strictEqual(document.activeElement, checkbox);
+        assert.ok(checkbox.checked);
+
+        // toggle a row mode
+        triggerHotkey("ArrowUp");
+        triggerHotkey("ArrowUp");
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name=foo]")
+        );
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+        );
+
+        // Keyboard navigation only interracts with selected elements
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(4)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(4) [name=foo] input")
+        );
+
+        triggerHotkey("Tab"); // go to 4th row int_field
+        triggerHotkey("Tab"); // go to 2nd row foo field
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name=foo] input")
+        );
+
+        triggerHotkey("Tab"); // go to 2nd row int_field
+        triggerHotkey("Tab"); // go to 4th row foo field
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(4)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(4) [name=foo] input")
+        );
+
+        triggerHotkey("Shift+Tab"); // go to 2nd row int_field
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(2)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(2) [name=int_field] input")
+        );
+
+        triggerHotkey("Shift+Tab"); // go to 2nd row foo field
+        triggerHotkey("Shift+Tab"); // go to 4th row int_field field
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(4)"), "o_selected_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:nth-child(4) [name=int_field] input")
+        );
+
+        // Clicking on an unselected row while a row is being edited will leave the edition
+        await click(target, ".o_data_row:nth-child(3) [name=foo]");
+        assert.containsNone(target, ".o_selected_row");
+
+        // Clicking on an unselected record while no row is being edited will open the record
+        assert.verifySteps([]);
+        await click(target, ".o_data_row:nth-child(3) [name=foo]");
+        assert.verifySteps([`resId: 3`]);
+    });
+
+    QUnit.test(
+        "editable list view: multi edition: edit and validate last row",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+            assert.containsN(target, ".o_data_row", 4);
+            await click(target.querySelector(".o_list_view .o_list_record_selector input"));
+
+            await click(target, ".o_data_row:last-child [name=int_field]");
+            const input = target.querySelector(".o_data_row:last-child [name=int_field] input");
+            input.value = 7;
+            await triggerEvent(input, null, "input");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_row:last-child [name=int_field] input")
+            );
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".modal");
+            await click(target, ".modal .btn-primary");
+            assert.containsN(target, ".o_data_row", 4);
+        }
+    );
+
+    QUnit.test("editable readonly list view: navigation in grouped list", async function (assert) {
+        await makeView({
+            type: "list",
+            serverData,
+            resModel: "foo",
+            arch: `<tree multi_edit="1"><field name="foo"/></tree>`,
+            groupBy: ["bar"],
+            selectRecord: (resId) => {
+                assert.step(`resId: ${resId}`);
+            },
+        });
+
+        // Open both groups
+        const groupHeaders = [...target.querySelectorAll(".o_group_header")];
+        assert.containsN(target, ".o_group_header", 2);
+        await click(groupHeaders.shift());
+        await click(groupHeaders.shift());
+
+        // select 2 records
+        const rows = [...target.querySelectorAll(".o_data_row")];
+        assert.containsN(target, ".o_data_row", 4);
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[2], ".o_list_record_selector input");
+
+        // toggle a row mode
+        await click(rows[0].querySelector("[name=foo]"));
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(rows[0], "o_selected_row");
+        assert.strictEqual(document.activeElement, rows[0].querySelector("[name=foo] input"));
+
+        // Keyboard navigation only interracts with selected elements
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(rows[2], "o_selected_row");
+        assert.strictEqual(document.activeElement, rows[2].querySelector("[name=foo] input"));
+
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(rows[0], "o_selected_row");
+        assert.strictEqual(document.activeElement, rows[0].querySelector("[name=foo] input"));
+
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(rows[2], "o_selected_row");
+        assert.strictEqual(document.activeElement, rows[2].querySelector("[name=foo] input"));
+
+        // Click on a non selected row
+        await click(rows[3].querySelector("[name=foo]"));
+        assert.containsNone(target, ".o_selected_row");
+
+        // Click again should select the clicked record
+        await click(rows[3].querySelector("[name=foo]"));
+        assert.verifySteps(["resId: 3"]);
+    });
+
+    QUnit.test(
+        "editable readonly list view: single edition does not behave like a multi-edition",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo" required="1"/>
+                    </tree>`,
+                serverData,
+                resModel: "foo",
+            });
+
+            // select a record
+            const rows = target.querySelectorAll(".o_data_row");
+            await click(rows[0], ".o_list_record_selector input");
+
+            // edit a field (invalid input)
+            await click(rows[0].querySelector(".o_data_cell"));
+            await editInput(target, ".o_data_row [name=foo] input", "");
+            assert.containsOnce(target, ".modal", "should have a modal (invalid fields)");
+
+            await click(target, ".modal button.btn");
+
+            // edit a field
+            await click(rows[0].querySelector(".o_data_cell"));
+            await editInput(target, ".o_data_row [name=foo] input", "bar");
+            assert.containsNone(target, ".modal", "should not have a modal");
+            assert.strictEqual(
+                $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+                "bar",
+                "the first row should be updated"
+            );
+        }
+    );
+
+    QUnit.test("editable readonly list view: multi edition", async function (assert) {
+        await makeView({
+            type: "list",
+            arch: `
+                <tree multi_edit="1">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            serverData,
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args,
+                        [[1, 2], { int_field: 666 }],
+                        "should write on multi records"
+                    );
+                } else if (args.method === "read") {
+                    if (args.args[0].length !== 1) {
+                        assert.deepEqual(
+                            args.args,
+                            [
+                                [1, 2],
+                                ["foo", "int_field"],
+                            ],
+                            "should batch the read"
+                        );
+                    }
+                }
+            },
+            resModel: "foo",
+        });
+
+        assert.verifySteps(["get_views", "web_search_read"]);
+
+        // select two records
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[0], ".o_list_record_selector input");
+        await click(rows[1], ".o_list_record_selector input");
+
+        // edit a field
+        await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+        await editInput(target, ".o_data_row [name=int_field] input", 666);
+        await click(rows[0].querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".modal", "modal appears when switching cells");
+
+        await click(target, ".modal .btn-secondary");
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+            "yop10",
+            "changes have been discarded and row is back to readonly"
+        );
+
+        await click(rows[0].querySelectorAll(".o_data_cell")[1]);
+        await editInput(target, ".o_data_row [name=int_field] input", 666);
+        await click(rows[1].querySelectorAll(".o_data_cell")[0]);
+        assert.containsOnce(target, ".modal", "there should be an opened modal");
+        assert.ok(
+            $(".modal").text().includes("those 2 records"),
+            "the number of records should be correctly displayed"
+        );
+
+        await click(target, ".modal .btn-primary");
+        assert.verifySteps(["write", "read"]);
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(0) .o_data_cell").text(),
+            "yop666",
+            "the first row should be updated"
+        );
+        assert.strictEqual(
+            $(target).find(".o_data_row:eq(1) .o_data_cell").text(),
+            "blip666",
+            "the second row should be updated"
+        );
+        assert.containsNone(
+            target,
+            ".o_data_cell input.o_field_widget",
+            "no field should be editable anymore"
+        );
+    });
+
+    QUnit.test("editable list view: m2m tags in grouped list", async function (assert) {
+        await makeView({
+            arch: `
+                <tree editable="top" multi_edit="1">
+                    <field name="bar"/>
+                    <field name="m2m" widget="many2many_tags"/>
+                </tree>`,
+            groupBy: ["bar"],
+            resModel: "foo",
+            serverData,
+            type: "list",
+        });
+
+        // Opens first group
+        await click(target.querySelectorAll(".o_group_header")[1]);
+        assert.notEqual(
+            target.querySelector(".o_data_row").innerText,
+            target.querySelectorAll(".o_data_row")[1].innerText,
+            "First row and last row should have different values"
+        );
+
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        await click(target.querySelector(".o_data_row .o_field_many2many_tags"));
+        await click(target.querySelector(".o_selected_row .o_field_many2many_tags .o_delete"));
+        await click(target.querySelector(".modal .btn-primary"));
+        assert.strictEqual(
+            target.querySelector(".o_data_row").innerText,
+            target.querySelectorAll(".o_data_row")[0].innerText,
+            "All rows should have been correctly updated"
+        );
+    });
+
+    QUnit.test("editable list: edit many2one from external link", async function (assert) {
+        serverData.views = {
+            "bar,false,form": `
+                <form string="Bar">
+                    <field name="display_name"/>
+                </form>`,
+        };
+
+        await makeView({
+            arch: `
+                <tree editable="top" multi_edit="1">
+                    <field name="m2o"/>
+                </tree>`,
+            serverData,
+            mockRPC: async function (route, args) {
+                if (args.method === "get_formview_id") {
+                    return false;
+                }
+            },
+            resModel: "foo",
+            type: "list",
+        });
+
+        assert.containsNone(target, ".o_selected_row", "not in edit mode");
+        await click(target.querySelector("thead .o_list_record_selector input"));
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row", "in edit mode");
+        await click(target.querySelector(".o_external_button"));
+
+        // Clicking somewhere on the form dialog should not close it
+        // and should not leave edit mode
+        assert.containsOnce(target, ".modal[role='dialog']");
+        await click(target.querySelector(".modal[role='dialog']"));
+        assert.containsOnce(target, ".modal[role='dialog']");
+        assert.containsOnce(target, ".o_selected_row", "in edit mode");
+
+        // Change the M2O value in the Form dialog
+        await editInput(target, ".modal input", "OOF");
+        await click(target.querySelector(".modal .o_form_button_save"));
+
+        assert.strictEqual(
+            target.querySelector(".modal .o_field_widget[name=m2o]").innerText,
+            "OOF",
+            "Value of the m2o should be updated in the confirmation dialog"
+        );
+
+        // Close the confirmation dialog
+        await click(target.querySelector(".modal .btn-primary"));
+
+        assert.strictEqual(
+            target.querySelector(".o_data_cell").innerText,
+            "OOF",
+            "Value of the m2o should be updated in the list"
+        );
+    });
+
+    QUnit.test("editable list with fields with readonly modifier", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="bar"/>
+                    <field name="foo" attrs="{'readonly': [['bar','=',True]]}"/>
+                    <field name="m2o" attrs="{'readonly': [['bar','=',False]]}"/>
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(target, ".o_selected_row");
+        assert.notOk(target.querySelector(".o_selected_row .o_field_boolean input").checked);
+        assert.doesNotHaveClass(
+            target.querySelector(".o_selected_row .o_field_char"),
+            "o_readonly_modifier"
+        );
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_many2one"),
+            "o_readonly_modifier"
+        );
+
+        await click(target.querySelector(".o_selected_row .o_field_boolean input"));
+        assert.ok(target.querySelector(".o_selected_row .o_field_boolean input").checked);
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_char"),
+            "o_readonly_modifier"
+        );
+        assert.doesNotHaveClass(
+            target.querySelector(".o_selected_row .o_field_many2one"),
+            "o_readonly_modifier"
+        );
+
+        await click(target.querySelector(".o_selected_row .o_field_many2one input"));
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_selected_row .o_field_many2one input")
+        );
+    });
+
+    QUnit.test(
+        "editable form with many2one: click out does not discard the row",
+        async function (assert) {
+            serverData.models.bar.fields.m2o = {
+                string: "M2O field",
+                type: "many2one",
+                relation: "foo",
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="display_name"/>
+                        <field name="o2m">
+                            <tree editable="bottom">
+                                <field name="m2o" required="1"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsNone(target, ".o_data_row");
+
+            await click(target.querySelector(".o_field_x2many_list_row_add > a"));
+            assert.containsOnce(target, ".o_data_row");
+
+            // focus and write something in the m2o
+            await editInput(target, ".o_field_many2one input", "abcdef");
+            await nextTick();
+
+            // simulate focus out
+            await triggerEvent(target, ".o_field_many2one input", "blur");
+
+            assert.containsOnce(target, ".modal", "should ask confirmation to create a record");
+            assert.containsOnce(target, ".o_data_row", "the row should still be there");
+        }
+    );
+
+    QUnit.test(
+        "editable form alongside html field: click out to unselect the row",
+        async function (assert) {
+            // FIXME WOWL hack: add back the text field as html field removed by web_editor html_field file
+            if (registry.category("fields").contains("html")) {
+                throw new Error("Time to remove this hack!");
+            }
+            registry.category("fields").add("html", TextField);
+            registerCleanup(() => registry.category("fields").remove("html"));
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <form>
+                        <field name="text" widget="html"/>
+                        <field name="o2m">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                            </tree>
+                        </field>
+                    </form>`,
+            });
+
+            assert.containsNone(target, ".o_data_row");
+
+            await addRow(target);
+            assert.containsOnce(target, ".o_data_row");
+            assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+            await editInput(
+                target,
+                '[name="o2m"] .o_field_x2many .o_selected_row [name="display_name"] input',
+                "new value"
+            );
+
+            // click outside to unselect the row
+            await click(target.querySelector(".o_form_view"));
+            assert.containsOnce(target, ".o_data_row");
+            assert.doesNotHaveClass(target.querySelector(".o_data_row"), "o_selected_row");
+        }
+    );
+
+    QUnit.test("list grouped by date:month", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="date"/></tree>',
+            groupBy: ["date:month"],
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_header")].map((el) => el.innerText),
+            ["January 2017 (1)", "None (3)"],
+            "the group names should be correct"
+        );
+    });
+
+    QUnit.test("grouped list edition with toggle_button widget", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="bar" widget="toggle_button"/></tree>',
+            groupBy: ["m2o"],
+            mockRPC(route, args) {
+                if (args.method === "write") {
+                    assert.deepEqual(
+                        args.args[1],
+                        { bar: false },
+                        "should write the correct value"
+                    );
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_group_header"));
+        assert.containsOnce(
+            target,
+            ".o_data_row:first .o_toggle_button_success",
+            "boolean value of the first record should be true"
+        );
+        await click(target.querySelector(".o_data_row .o_icon_button"));
+        assert.strictEqual(
+            $(target).find(".o_data_row:first .text-muted:not(.o_toggle_button_success)").length,
+            1,
+            "boolean button should have been updated"
+        );
+    });
+
+    QUnit.test("grouped list view, indentation for empty group", async function (assert) {
+        serverData.models.foo.fields.priority = {
+            string: "Priority",
+            type: "selection",
+            selection: [
+                [1, "Low"],
+                [2, "Medium"],
+                [3, "High"],
+            ],
+            default: 1,
+        };
+        serverData.models.foo.records.push({
+            id: 5,
+            foo: "blip",
+            int_field: -7,
+            m2o: 1,
+            priority: 2,
+        });
+        serverData.models.foo.records.push({
+            id: 6,
+            foo: "blip",
+            int_field: 5,
+            m2o: 1,
+            priority: 3,
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="id"/></tree>',
+            groupBy: ["priority", "m2o"],
+            mockRPC(route, args) {
+                // Override of the read_group to display the row even if there is no record in it,
+                // to mock the behavihour of some fields e.g stage_id on the sale order.
+                if (args.method === "web_read_group" && args.kwargs.groupby[0] === "m2o") {
+                    return Promise.resolve({
+                        groups: [
+                            {
+                                id: 8,
+                                m2o: [1, "Value 1"],
+                                m2o_count: 0,
+                            },
+                            {
+                                id: 2,
+                                m2o: [2, "Value 2"],
+                                m2o_count: 1,
+                            },
+                        ],
+                        length: 1,
+                    });
+                }
+            },
+        });
+
+        // open the first group
+        await click(target.querySelector(".o_group_header"));
+        assert.strictEqual(
+            $(target).find("th.o_group_name").eq(1).children().length,
+            1,
+            "There should be an empty element creating the indentation for the subgroup."
+        );
+        assert.hasClass(
+            $(target).find("th.o_group_name").eq(1).children().eq(0),
+            "fa",
+            "The first element of the row name should have the fa class"
+        );
+        assert.strictEqual(
+            $(target).find("th.o_group_name").eq(1).children().eq(0).is("span"),
+            true,
+            "The first element of the row name should be a span"
+        );
+    });
+
+    QUnit.test("use the limit attribute in arch", async function (assert) {
+        assert.expect(4);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree limit="2"><field name="foo"/></tree>',
+            mockRPC(route, args) {
+                if (args.method === "web_search_read") {
+                    assert.strictEqual(args.kwargs.limit, 2, "should use the correct limit value");
+                }
+            },
+        });
+        assert.deepEqual(getPagerValue(target), [1, 2]);
+        assert.strictEqual(getPagerLimit(target), 4);
+        assert.containsN(target, ".o_data_row", 2, "should display 2 data rows");
+    });
+
+    QUnit.test("concurrent reloads finishing in inverse order", async function (assert) {
+        let blockSearchRead = false;
+        const def = makeDeferred();
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/></tree>',
+            mockRPC: async function (route, args) {
+                if (args.method === "web_search_read" && blockSearchRead) {
+                    await def;
+                }
+            },
+            searchViewArch: `
+                <search>
+                    <filter name="yop" domain="[('foo', '=', 'yop')]"/>
+                </search>`,
+        });
+
+        assert.containsN(
+            target,
+            ".o_list_view .o_data_row",
+            4,
+            "list view should contain 4 records"
+        );
+
+        // reload with a domain (this request is blocked)
+        blockSearchRead = true;
+        // list.reload({ domain: [["foo", "=", "yop"]] });
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "yop");
+        assert.containsN(
+            target,
+            ".o_list_view .o_data_row",
+            4,
+            "list view should still contain 4 records (search_read being blocked)"
+        );
+
+        // reload without the domain
+        blockSearchRead = false;
+        // list.reload({ domain: [] });
+        // await toggleFilterMenu(target);
+        await toggleMenuItem(target, "yop");
+        assert.containsN(
+            target,
+            ".o_list_view .o_data_row",
+            4,
+            "list view should still contain 4 records"
+        );
+
+        // unblock the RPC
+        def.resolve();
+        await nextTick();
+        assert.containsN(
+            target,
+            ".o_list_view .o_data_row",
+            4,
+            "list view should still contain 4 records"
+        );
+    });
+
+    QUnit.test('list view on a "noCache" model', async function (assert) {
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree editable="top"><field name="display_name"/></tree>`,
+            mockRPC(route, args) {
+                if (["name_create", "unlink", "write"].includes(args.method)) {
+                    assert.step(args.method);
+                }
+            },
+            actionMenus: {},
+        });
+
+        list.model.noCacheModels = list.model.noCacheModels.concat(["foo"]);
+        list.env.bus.on("CLEAR-CACHES", target, assert.step.bind(assert, "clear_cache"));
+
+        // create a new record
+        await click(target.querySelector(".o_list_button_add"));
+        await editInput(target, ".o_selected_row .o_field_widget input", "some value");
+        await clickSave(target);
+
+        // edit an existing record
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, ".o_selected_row .o_field_widget input", "new value");
+        await click(target.querySelector(".o_list_button_save"));
+
+        // delete a record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        await toggleActionMenu(target);
+        await toggleMenuItem(target, "Delete");
+        await click(target.querySelector(".modal-footer .btn-primary"));
+
+        assert.verifySteps([
+            "name_create",
+            "clear_cache",
+            "write",
+            "clear_cache",
+            "unlink",
+            "clear_cache",
+        ]);
+    });
+
+    QUnit.test(
+        "list view move to previous page when all records from last page deleted",
+        async function (assert) {
+            assert.expect(8);
+
+            let checkSearchRead = false;
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree limit="3"><field name="display_name"/></tree>',
+                mockRPC(route, args) {
+                    if (checkSearchRead && args.method === "web_search_read") {
+                        assert.strictEqual(args.kwargs.limit, 3, "limit should 3");
+                        assert.notOk(
+                            args.kwargs.offset,
+                            "offset should not be passed i.e. offset 0 by default"
+                        );
+                    }
+                },
+                actionMenus: {},
+            });
+
+            assert.deepEqual(getPagerValue(target), [1, 3]);
+            assert.strictEqual(getPagerLimit(target), 4);
+
+            // move to next page
+            await pagerNext(target);
+            assert.deepEqual(getPagerValue(target), [4, 4]);
+            assert.strictEqual(getPagerLimit(target), 4);
+
+            // delete a record
+            await click(target.querySelector("tbody .o_data_row td.o_list_record_selector input"));
+            checkSearchRead = true;
+            await click(target.querySelector(".o_cp_action_menus .dropdown-toggle"));
+            const deleteMenuItem = [
+                ...target.querySelectorAll(".o_cp_action_menus .o_menu_item"),
+            ].filter((el) => el.innerText === "Delete")[0];
+            await click(deleteMenuItem);
+            await click(target, ".modal button.btn-primary");
+            assert.deepEqual(getPagerValue(target), [1, 3]);
+            assert.strictEqual(getPagerLimit(target), 3);
+        }
+    );
+
+    QUnit.test(
+        "grouped list view move to previous page of group when all records from last page deleted",
+        async function (assert) {
+            assert.expect(9);
+
+            let checkSearchRead = false;
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree limit="2"><field name="display_name"/></tree>',
+                mockRPC(route, args) {
+                    if (checkSearchRead && args.method === "web_search_read") {
+                        assert.strictEqual(args.kwargs.limit, 2, "limit should 2");
+                        assert.notOk(
+                            args.kwargs.offset,
+                            "offset should not be passed i.e. offset 0 by default"
+                        );
+                    }
+                },
+                actionMenus: {},
+                groupBy: ["m2o"],
+            });
+
+            assert.strictEqual(
+                $(target).find("th:contains(Value 1 (3))").length,
+                1,
+                "Value 1 should contain 3 records"
+            );
+            assert.strictEqual(
+                $(target).find("th:contains(Value 2 (1))").length,
+                1,
+                "Value 2 should contain 1 record"
+            );
+            const groupheader = target.querySelector(".o_group_header");
+            await click(groupheader);
+            assert.deepEqual(getPagerValue(groupheader), [1, 2]);
+            assert.strictEqual(getPagerLimit(groupheader), 3);
+
+            // move to next page
+            await pagerNext(groupheader);
+            assert.deepEqual(getPagerValue(groupheader), [3, 3]);
+            assert.strictEqual(getPagerLimit(groupheader), 3);
+
+            // delete a record
+            await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+            checkSearchRead = true;
+            await click(target, ".o_cp_action_menus .dropdown-toggle");
+            await click(
+                [...target.querySelectorAll(".dropdown-item")].filter(
+                    (el) => el.innerText === "Delete"
+                )[0]
+            );
+            await click(target, ".modal .btn-primary");
+
+            assert.strictEqual(
+                $(target).find("th.o_group_name:eq(0) .o_pager_counter").text().trim(),
+                "",
+                "should be on first page now"
+            );
+        }
+    );
+
+    QUnit.test(
+        "list view move to previous page when all records from last page archive/unarchived",
+        async function (assert) {
+            // add active field on foo model and make all records active
+            serverData.models.foo.fields.active = {
+                string: "Active",
+                type: "boolean",
+                default: true,
+            };
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree limit="3"><field name="display_name"/></tree>',
+                actionMenus: {},
+                mockRPC(route) {
+                    if (route === "/web/dataset/call_kw/foo/action_archive") {
+                        serverData.models.foo.records[3].active = false;
+                        return {};
+                    }
+                },
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_pager_counter").textContent.trim(),
+                "1-3 / 4",
+                "should have 2 pages and current page should be first page"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("tbody td.o_list_record_selector").length,
+                3,
+                "should have 3 records"
+            );
+
+            // move to next page
+            await click(target, ".o_pager_next");
+            assert.strictEqual(
+                target.querySelector(".o_pager_counter").textContent.trim(),
+                "4-4 / 4",
+                "should be on second page"
+            );
+            assert.strictEqual(
+                target.querySelectorAll("tbody td.o_list_record_selector").length,
+                1,
+                "should have 1 records"
+            );
+            assert.containsNone(target, ".o_cp_action_menus", "sidebar should not be available");
+
+            await click(
+                target,
+                "tbody .o_data_row:first-child td.o_list_record_selector:first-child input"
+            );
+            assert.containsOnce(target, ".o_cp_action_menus", "sidebar should be available");
+
+            // archive all records of current page
+            await toggleActionMenu(target);
+            await toggleMenuItem(target, "Archive");
+            assert.strictEqual(
+                document.querySelectorAll(".modal").length,
+                1,
+                "a confirm modal should be displayed"
+            );
+
+            await click(document, ".modal-footer .btn-primary");
+            assert.strictEqual(
+                target.querySelectorAll("tbody td.o_list_record_selector").length,
+                3,
+                "should have 3 records"
+            );
+            assert.strictEqual(
+                target.querySelector(".o_pager_counter").textContent.trim(),
+                "1-3 / 3",
+                "should have 1 page only"
+            );
+        }
+    );
+
+    QUnit.test("list should ask to scroll to top on page changes", async function (assert) {
+        patchWithCleanup(ListController.prototype, {
+            onPageChangeScroll() {
+                this._super(...arguments);
+                assert.step("scroll");
+            },
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `<tree limit="3"><field name="display_name"/></tree>`,
+        });
+
+        // switch pages (should ask to scroll)
+        await click(target, ".o_pager_next");
+        await click(target, ".o_pager_previous");
+        assert.verifySteps(["scroll", "scroll"], "should ask to scroll when switching pages");
+
+        // change the limit (should not ask to scroll)
+        await click(target.querySelector(".o_pager_value"));
+        await editInput(target, ".o_pager_value", "1-2");
+        await nextTick();
+        assert.strictEqual(target.querySelector(".o_pager_value").textContent, "1-2");
+        assert.verifySteps([], "should not ask to scroll when changing the limit");
+
+        // switch pages again (should still ask to scroll)
+        await click(target, ".o_pager_next");
+
+        assert.verifySteps(["scroll"], "this is still working after a limit change");
+    });
+
+    QUnit.test(
+        "list with handle field, override default_get, bottom when inline",
+        async function (assert) {
+            serverData.models.foo.fields.int_field.default = 10;
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom" default_order="int_field">
+                        <field name="int_field" widget="handle"/>
+                        <field name="foo"/>
+                    </tree>`,
+            });
+
+            // starting condition
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_cell.o_list_char")].map(
+                    (el) => el.textContent
+                ),
+                ["blip", "blip", "yop", "gnap"]
+            );
+
+            // click add a new line
+            // save the record
+            // check line is at the correct place
+
+            const inputText = "ninja";
+            await click(target, ".o_list_button_add");
+            await editInput(target, '[name="foo"] input', inputText);
+            await clickSave(target);
+            await click(target, ".o_list_button_add");
+
+            assert.deepEqual(
+                [...target.querySelectorAll(".o_data_cell.o_list_char")].map(
+                    (el) => el.textContent
+                ),
+                ["blip", "blip", "yop", "gnap", inputText, ""]
+            );
+        }
+    );
+
+    QUnit.test("create record on list with modifiers depending on id", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="id" invisible="1"/>
+                    <field name="foo" attrs="{'readonly': [['id','!=',False]]}"/>
+                    <field name="int_field" attrs="{'invisible': [['id','!=',False]]}"/>
+                </tree>`,
+        });
+
+        // add a new record
+        await click(target, ".o_list_button_add");
+
+        // modifiers should be evaluted to false
+        assert.containsOnce(target, ".o_selected_row");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_selected_row [name=foo].o_field_widget"),
+            "o_readonly_modifier"
+        );
+        assert.containsOnce(target, ".o_selected_row div[name=int_field]");
+
+        // set a value and save
+        await editInput(target, ".o_selected_row [name=foo] input", "some value");
+        await clickSave(target);
+        // int_field should not be displayed
+        assert.strictEqual(target.querySelectorAll(".o_data_row .o_data_cell")[1].innerText, "");
+
+        // edit again the just created record
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+        // modifiers should be evaluated to true
+        assert.hasClass(
+            target.querySelector(".o_selected_row .o_field_widget[name=foo]"),
+            "o_readonly_modifier"
+        );
+        assert.containsNone(target, ".o_selected_row div[name=int_field]");
+    });
+
+    QUnit.test("readonly boolean in editable list is readonly", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="bar" attrs="{'readonly': [('foo', '!=', 'yop')]}"/>
+                </tree>`,
+        });
+
+        // clicking on disabled checkbox with active row does not work
+        const rows = target.querySelectorAll(".o_data_row");
+        const disabledCell = rows[1].querySelector("[name=bar]");
+        await click(rows[1].querySelector(".o_data_cell"));
+        assert.containsOnce(disabledCell, ":disabled:checked");
+        await click(rows[1].querySelector("[name=bar] div"));
+        assert.containsOnce(disabledCell, ":checked", "clicking disabled checkbox did not work");
+        assert.ok(
+            $(document.activeElement).is('input[type="text"]'),
+            "disabled checkbox is not focused after click"
+        );
+
+        // clicking on enabled checkbox with active row toggles check mark
+        await click(rows[0].querySelector(".o_data_cell"));
+        const enabledCell = rows[0].querySelector("div[name=bar]");
+        assert.containsOnce(enabledCell, ":checked:not(:disabled)");
+        await click(rows[0].querySelector("div[name=bar] div"));
+        assert.containsNone(
+            enabledCell,
+            ":checked",
+            "clicking enabled checkbox worked and unchecked it"
+        );
+        assert.ok(
+            $(document.activeElement).is('input[type="checkbox"]'),
+            "enabled checkbox is focused after click"
+        );
+    });
+
+    QUnit.test("grouped lists with groups_limit attribute", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree groups_limit="3"><field name="foo"/></tree>',
+            groupBy: ["int_field"],
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        assert.containsN(target, ".o_group_header", 3); // page 1
+        assert.containsNone(target, ".o_data_row");
+        assert.containsOnce(target, ".o_pager"); // has a pager
+
+        await pagerNext(target); // switch to page 2
+        assert.containsN(target, ".o_group_header", 1); // page 2
+        assert.containsNone(target, ".o_data_row");
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // read_group page 1
+            "web_read_group", // read_group page 2
+        ]);
+    });
+
+    QUnit.test("grouped list with expand attribute", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree expand="1"><field name="foo"/></tree>',
+            groupBy: ["bar"],
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        assert.containsN(target, ".o_group_header", 2);
+        assert.containsN(target, ".o_data_row", 4);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["blip", "yop", "blip", "gnap"]
+        );
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // records are fetched alongside groups
+        ]);
+    });
+
+    QUnit.test("grouped list (two levels) with expand attribute", async function (assert) {
+        // the expand attribute only opens the first level groups
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree expand="1"><field name="foo"/></tree>',
+            groupBy: ["bar", "int_field"],
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+        });
+
+        assert.containsN(target, ".o_group_header", 6);
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group", // global
+            "web_read_group", // first group
+            "web_read_group", // second group
+        ]);
+    });
+
+    QUnit.test("grouped lists with expand attribute and a lot of groups", async function (assert) {
+        for (var i = 0; i < 15; i++) {
+            serverData.models.foo.records.push({ foo: "record " + i, int_field: i });
+        }
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree expand="1"><field name="foo"/></tree>',
+            groupBy: ["int_field"],
+            mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    assert.step(args.method);
+                }
+            },
+        });
+
+        assert.containsN(target, ".o_group_header", 10); // page 1
+        assert.containsN(target, ".o_data_row", 10); // two groups contains two records
+        assert.containsOnce(target, ".o_pager"); // has a pager
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_name")].map((el) => el.innerText),
+            [
+                "-4 (1)",
+                "0 (1)",
+                "1 (1)",
+                "2 (1)",
+                "3 (1)",
+                "4 (1)",
+                "5 (1)",
+                "6 (1)",
+                "7 (1)",
+                "8 (1)",
+            ]
+        );
+        await pagerNext(target); // switch to page 2
+
+        assert.containsN(target, ".o_group_header", 7); // page 2
+        assert.containsN(target, ".o_data_row", 9); // two groups contains two records
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_name")].map((el) => el.innerText),
+            ["9 (2)", "10 (2)", "11 (1)", "12 (1)", "13 (1)", "14 (1)", "17 (1)"]
+        );
+
+        assert.verifySteps([
+            "web_read_group", // read_group page 1
+            "web_read_group", // read_group page 2
+        ]);
+    });
+
+    QUnit.test("add filter in a grouped list with a pager", async function (assert) {
+        serverData.actions = {
+            11: {
+                id: 11,
+                name: "Action 11",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[3, "list"]],
+                search_view_id: [9, "search"],
+                context: { group_by: ["int_field"] },
+            },
+        };
+
+        serverData.views = {
+            "foo,3,list": '<tree groups_limit="3"><field name="foo"/></tree>',
+            "foo,9,search": `
+                <search>
+                    <filter string="Not Bar" name="not bar" domain="[['bar','=',False]]"/>
+                </search>`,
+        };
+
+        const mockRPC = (route, args) => {
+            if (args.method === "web_read_group") {
+                assert.step(JSON.stringify(args.kwargs.domain) + ", " + args.kwargs.offset);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 11);
+        assert.containsOnce(target, ".o_list_view");
+        assert.deepEqual(getPagerValue(target), [1, 3]);
+        assert.containsN(target, ".o_group_header", 3); // page 1
+
+        await pagerNext(target);
+        await legacyExtraNextTick();
+        assert.deepEqual(getPagerValue(target), [4, 4]);
+        assert.containsN(target, ".o_group_header", 1); // page 2
+
+        // toggle a filter -> there should be only one group left (on page 1)
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, 0);
+        assert.deepEqual(getPagerValue(target), [1, 1]);
+        assert.containsN(target, ".o_group_header", 1); // page 1
+
+        assert.verifySteps(["[], 0", "[], 3", '[["bar","=",false]], 0']);
+    });
+
+    QUnit.test("editable grouped lists", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="bar"/></tree>',
+            searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                </search>`,
+        });
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "bar");
+        await click(target.querySelector(".o_group_header"));
+
+        // enter edition (grouped case)
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        // click on the body should leave the edition
+        await click(target, ".o_list_view");
+        assert.containsNone(target, ".o_selected_row");
+
+        // reload without groupBy
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "bar");
+
+        // enter edition (ungrouped case)
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        // click on the body should leave the edition
+        await click(target, ".o_list_view");
+        assert.containsNone(target, ".o_selected_row");
+    });
+
+    QUnit.test("grouped lists are editable (ungrouped first)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="bar"/></tree>',
+            searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                </search>`,
+        });
+
+        // enter edition (ungrouped case)
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+
+        // reload with a groupby
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "bar");
+
+        // open first group
+        await click(target.querySelector(".o_group_header"));
+
+        // enter edition (grouped case)
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_selected_row");
+    });
+
+    QUnit.test("char field edition in editable grouped list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/><field name="bar"/></tree>',
+            groupBy: ["bar"],
+        });
+        await click(target.querySelector(".o_group_header"));
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_selected_row .o_data_cell [name="foo"] input', "pla");
+        await clickSave(target);
+        assert.strictEqual(
+            serverData.models.foo.records[3].foo,
+            "pla",
+            "the edition should have been properly saved"
+        );
+        assert.containsOnce(target, ".o_data_row:first:contains(pla)");
+    });
+
+    QUnit.test("control panel buttons in editable grouped list views", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="bar"/></tree>',
+            searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                </search>`,
+        });
+
+        assert.containsOnce(target, ".o_list_button_add");
+
+        // reload with a groupby
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "bar");
+
+        assert.containsNone(target, ".o_list_button_add");
+
+        // reload without groupby
+        await toggleMenuItem(target, "bar");
+
+        assert.containsOnce(target, ".o_list_button_add");
+    });
+
+    QUnit.test(
+        "control panel buttons in multi editable grouped list views",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                groupBy: ["foo"],
+                arch: `
+                    <tree multi_edit="1">
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                    </tree>`,
+            });
+
+            assert.containsNone(target, ".o_data_row", "all groups should be closed");
+            assert.isVisible(
+                target.querySelector(".o_list_button_add"),
+                "should have a visible Create button"
+            );
+
+            await click(target.querySelector(".o_group_header"));
+            assert.containsN(target, ".o_data_row", 2, "first group should be opened");
+            assert.isVisible(
+                target.querySelector(".o_list_button_add"),
+                "should have a visible Create button"
+            );
+
+            await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+            assert.containsOnce(
+                target,
+                ".o_data_row:eq(0) .o_list_record_selector input:enabled",
+                "should have selected first record"
+            );
+            assert.isVisible(
+                target.querySelector(".o_list_button_add"),
+                "should have a visible Create button"
+            );
+
+            await click([...target.querySelectorAll(".o_group_header")].pop());
+            assert.containsN(target, ".o_data_row", 3, "two groups should be opened");
+            assert.isVisible(
+                target.querySelector(".o_list_button_add"),
+                "should have a visible Create button"
+            );
+        }
+    );
+
+    QUnit.test("edit a line and discard it in grouped editable", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo"/><field name="int_field"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        await click(target, ".o_group_header:nth-child(2)");
+        await click(target, ".o_data_row:nth-child(5) .o_data_cell:nth-child(2)");
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(5)"), "o_selected_row");
+
+        await click(target, ".o_list_button_discard");
+        await click(target, ".o_data_row:nth-child(3) .o_data_cell:nth-child(2)");
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(3)"), "o_selected_row");
+
+        await click(target, ".o_list_button_discard");
+        assert.containsNone(target, ".o_selected_row");
+
+        await click(target, ".o_data_row:nth-child(5) .o_data_cell:nth-child(2)");
+        assert.containsOnce(target, ".o_selected_row");
+        assert.hasClass(target.querySelector(".o_data_row:nth-child(5)"), "o_selected_row");
+    });
+
+    QUnit.test(
+        "add and discard a record in a multi-level grouped list view",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="foo" required="1"/></tree>',
+                groupBy: ["foo", "bar"],
+            });
+
+            // unfold first subgroup
+            await click(target.querySelector(".o_group_header"));
+            await click(target.querySelectorAll(".o_group_header")[1]);
+            assert.hasClass(target.querySelector(".o_group_header"), "o_group_open");
+            assert.hasClass(target.querySelectorAll(".o_group_header")[1], "o_group_open");
+            assert.containsOnce(target, ".o_data_row");
+
+            // add a record to first subgroup
+            await click(target, ".o_group_field_row_add a");
+            assert.containsN(target, ".o_data_row", 2);
+
+            // discard
+            await clickDiscard(target);
+            assert.containsOnce(target, ".o_data_row");
+        }
+    );
+
+    QUnit.test(
+        "pressing ESC in editable grouped list should discard the current line changes",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top"><field name="foo"/><field name="bar"/></tree>',
+                groupBy: ["bar"],
+            });
+
+            await click(target.querySelectorAll(".o_group_header")[1]); // open second group
+            assert.containsN(target, "tr.o_data_row", 3);
+
+            await click(target.querySelector(".o_data_cell"));
+
+            // update foo field of edited row
+            await editInput(target, ".o_data_cell [name=foo] input", "new_value");
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_cell [name=foo] input")
+            );
+            // discard by pressing ESC
+            triggerHotkey("Escape");
+            await nextTick();
+            assert.containsNone(target, ".modal");
+
+            assert.containsOnce(target, "tbody tr td:contains(yop)");
+            assert.containsN(target, "tr.o_data_row", 3);
+            assert.containsNone(target, "tr.o_data_row.o_selected_row");
+            assert.isNotVisible(target.querySelector(".o_list_button_save"));
+        }
+    );
+
+    QUnit.test('pressing TAB in editable="bottom" grouped list', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        // open two groups
+        await click(getGroup(1));
+        assert.containsN(target, ".o_data_row", 1, "first group contains 1 row");
+
+        await click(getGroup(2));
+        assert.containsN(target, ".o_data_row", 4, "second group contains 3 rows");
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass($(target).find(".o_data_row:first"), "o_selected_row");
+
+        // Press 'Tab' -> should go to first line of second group
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(1)"), "o_selected_row");
+
+        // Press 'Tab' -> should go to next line (still in second group)
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(2)"), "o_selected_row");
+
+        // Press 'Tab' -> should go to next line (still in second group)
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(3)"), "o_selected_row");
+
+        // Press 'Tab' -> should go back to first line of first group
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:first"), "o_selected_row");
+    });
+
+    QUnit.test('pressing TAB in editable="top" grouped list', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                </tree>`,
+            groupBy: ["bar"],
+        });
+
+        // open two groups
+        await click(target.querySelector(".o_group_header"));
+        assert.containsN(target, ".o_data_row", 1);
+
+        await click(target.querySelector(".o_group_header:last-child"));
+        assert.containsN(target, ".o_data_row", 4);
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+        const dataRows = [...target.querySelectorAll(".o_data_row")];
+        dataRows.push(dataRows.shift());
+        for (const row of dataRows) {
+            triggerHotkey("Tab");
+            await nextTick();
+            assert.hasClass(row, "o_selected_row");
+        }
+    });
+
+    QUnit.test("pressing TAB in editable grouped list with create=0", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom" create="0"><field name="foo"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        // open two groups
+        await click(getGroup(1));
+        assert.containsN(target, ".o_data_row", 1, "first group contains 1 rows");
+        await click(getGroup(2));
+        assert.containsN(target, ".o_data_row", 4, "first group contains 3 row");
+
+        await click(target.querySelector(".o_data_cell"));
+        assert.hasClass($(target).find(".o_data_row:first"), "o_selected_row");
+
+        // Press 'Tab' -> should go to the second group
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(1)"), "o_selected_row");
+
+        // Press 'Tab' -> should go to next line (still in second group)
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(2)"), "o_selected_row");
+
+        // Press 'Tab' -> should go to next line (still in second group)
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:nth(3)"), "o_selected_row");
+
+        // Press 'Tab' -> should go back to first line of first group
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.hasClass($(target).find(".o_data_row:first"), "o_selected_row");
+    });
+
+    QUnit.test('pressing SHIFT-TAB in editable="bottom" grouped list', async function (assert) {
+        serverData.models.foo.records[2].bar = false;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo" required="1"/>
+                </tree>`,
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_header"));
+        assert.containsN(target, ".o_data_row", 2);
+        await click(target.querySelector(".o_group_header:last-child"));
+        assert.containsN(target, ".o_data_row", 4);
+
+        // navigate inside a group
+        const secondRow = target.querySelectorAll(".o_data_row")[1];
+        await click(secondRow, ".o_data_cell");
+        assert.hasClass(secondRow, "o_selected_row");
+
+        triggerHotkey("shift+Tab");
+        await nextTick();
+
+        const firstRow = target.querySelector(".o_data_row");
+        assert.hasClass(firstRow, "o_selected_row");
+        assert.doesNotHaveClass(secondRow, "o_selected_row");
+
+        // navigate between groups
+        const thirdRow = target.querySelectorAll(".o_data_row")[2];
+        await click(thirdRow, ".o_data_cell");
+
+        assert.hasClass(thirdRow, "o_selected_row");
+
+        triggerHotkey("shift+Tab");
+        await nextTick();
+
+        assert.hasClass(secondRow, "o_selected_row");
+    });
+
+    QUnit.test('pressing SHIFT-TAB in editable="top" grouped list', async function (assert) {
+        serverData.models.foo.records[2].bar = false;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo" required="1"/>
+                </tree>`,
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_header"));
+        assert.containsN(target, ".o_data_row", 2);
+        await click(target.querySelector(".o_group_header:last-child"));
+        assert.containsN(target, ".o_data_row", 4);
+
+        // navigate inside a group
+        const secondRow = target.querySelectorAll(".o_data_row")[1];
+        await click(secondRow, ".o_data_cell");
+        assert.hasClass(secondRow, "o_selected_row");
+
+        triggerHotkey("shift+Tab");
+        await nextTick();
+
+        const firstRow = target.querySelector(".o_data_row");
+        assert.hasClass(firstRow, "o_selected_row");
+        assert.doesNotHaveClass(secondRow, "o_selected_row");
+
+        // navigate between groups
+        const thirdRow = target.querySelectorAll(".o_data_row")[2];
+        await click(thirdRow, ".o_data_cell");
+
+        assert.hasClass(thirdRow, "o_selected_row");
+
+        triggerHotkey("shift+Tab");
+        await nextTick();
+
+        assert.hasClass(secondRow, "o_selected_row");
+    });
+
+    QUnit.test(
+        'pressing SHIFT-TAB in editable grouped list with create="0"',
+        async function (assert) {
+            serverData.models.foo.records[2].bar = false;
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top" create="0">
+                        <field name="foo" required="1"/>
+                    </tree>`,
+                groupBy: ["bar"],
+            });
+
+            await click(target.querySelector(".o_group_header"));
+            assert.containsN(target, ".o_data_row", 2);
+            await click(target.querySelector(".o_group_header:last-child"));
+            assert.containsN(target, ".o_data_row", 4);
+
+            // navigate inside a group
+            const secondRow = target.querySelectorAll(".o_data_row")[1];
+            await click(secondRow, ".o_data_cell");
+            assert.hasClass(secondRow, "o_selected_row");
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            const firstRow = target.querySelector(".o_data_row");
+            assert.hasClass(firstRow, "o_selected_row");
+            assert.doesNotHaveClass(secondRow, "o_selected_row");
+
+            // navigate between groups
+            const thirdRow = target.querySelectorAll(".o_data_row")[2];
+            await click(thirdRow, ".o_data_cell");
+
+            assert.hasClass(thirdRow, "o_selected_row");
+
+            triggerHotkey("shift+Tab");
+            await nextTick();
+
+            assert.hasClass(secondRow, "o_selected_row");
+        }
+    );
+
+    QUnit.test("editing then pressing TAB in editable grouped list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/></tree>',
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+            groupBy: ["bar"],
+        });
+
+        // open two groups
+        await click(getGroup(1));
+        assert.containsN(target, ".o_data_row", 1, "first group contains 1 rows");
+        await click(getGroup(2));
+        assert.containsN(target, ".o_data_row", 4, "first group contains 3 row");
+
+        // select and edit last row of first group
+        await click(target.querySelector(".o_data_row").querySelector(".o_data_cell"));
+        assert.hasClass($(target).find(".o_data_row:nth(0)"), "o_selected_row");
+        await editInput(target, '.o_selected_row [name="foo"] input', "new value");
+
+        // Press 'Tab' -> should create a new record as we edited the previous one
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.hasClass($(target).find(".o_data_row:nth(1)"), "o_selected_row");
+
+        // fill foo field for the new record and press 'tab' -> should create another record
+        await editInput(target, '.o_selected_row [name="foo"] input', "new record");
+        triggerHotkey("Tab");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 6);
+        assert.hasClass($(target).find(".o_data_row:nth(2)"), "o_selected_row");
+
+        // leave this new row empty and press tab -> should discard the new record and move to the
+        // next group
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.hasClass($(target).find(".o_data_row:nth(2)"), "o_selected_row");
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "write",
+            "read",
+            "onchange",
+            "create",
+            "read",
+            "onchange",
+        ]);
+    });
+
+    QUnit.test(
+        "editing then pressing TAB (with a readonly field) in grouped list",
+        async function (assert) {
+            serverData.models.foo.records[0].bar = false;
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="bottom">
+                        <field name="foo"/>
+                        <field name="int_field" readonly="1"/>
+                    </tree>`,
+                mockRPC(route, args) {
+                    assert.step(args.method);
+                },
+                groupBy: ["bar"],
+            });
+
+            await click(target.querySelector(".o_group_header"));
+            await click(target.querySelector(".o_data_row [name=foo]"));
+
+            await editInput(target, ".o_selected_row [name=foo] input", "new value");
+
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.strictEqual(
+                target.querySelector(".o_data_row [name=foo]").innerText,
+                "new value"
+            );
+
+            const secondDataRow = target.querySelectorAll(".o_data_row")[1];
+            assert.strictEqual(
+                document.activeElement,
+                secondDataRow.querySelector(".o_selected_row [name=foo] input")
+            );
+
+            assert.verifySteps(["get_views", "web_read_group", "web_search_read", "write", "read"]);
+        }
+    );
+
+    QUnit.test('pressing ENTER in editable="bottom" grouped list view', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo"/></tree>',
+            mockRPC(route, args) {
+                assert.step(args.method || route);
+            },
+            groupBy: ["bar"],
+        });
+
+        await click(getGroup(1)); // open first group
+        await click(getGroup(2)); // open second group
+        assert.containsN(target, "tr.o_data_row", 4);
+
+        const rows = target.querySelectorAll(".o_data_row");
+        await click(rows[2].querySelector(".o_data_cell"));
+        assert.hasClass($(target).find("tr.o_data_row:eq(2)"), "o_selected_row");
+
+        // press enter in input should move to next record
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.hasClass($(target).find("tr.o_data_row:eq(3)"), "o_selected_row");
+        assert.doesNotHaveClass($(target).find("tr.o_data_row:eq(2)"), "o_selected_row");
+
+        // press enter on last row should create a new record
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.containsN(target, "tr.o_data_row", 5);
+        assert.hasClass($(target).find("tr.o_data_row:eq(4)"), "o_selected_row");
+
+        assert.verifySteps([
+            "get_views",
+            "web_read_group",
+            "web_search_read",
+            "web_search_read",
+            "onchange",
+        ]);
+    });
+
+    QUnit.test('pressing ENTER in editable="top" grouped list view', async function (assert) {
+        serverData.models.foo.records[2].bar = false;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                </tree>`,
+            mockRPC(route, args) {
+                assert.step(args.method);
+            },
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_header"));
+        await click(target.querySelector(".o_group_header:last-child"));
+        assert.containsN(target, "tr.o_data_row", 4);
+
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        assert.hasClass(target.querySelector(".o_data_row"), "o_selected_row");
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.hasClass(target.querySelectorAll(".o_data_row")[2], "o_selected_row");
+
+        assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
+    });
+
+    QUnit.test(
+        "pressing ENTER in editable grouped list view with create=0",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="bottom" create="0"><field name="foo"/></tree>',
+                mockRPC(route, { method }) {
+                    assert.step(method);
+                },
+                groupBy: ["bar"],
+            });
+            assert.containsN(target, ".o_group_header", 2);
+            assert.containsNone(target, ".o_data_row");
+            assert.verifySteps(["get_views", "web_read_group"]);
+
+            // Open group headers
+            const [firstGroupHeader, secondGroupHeader] = [
+                ...target.querySelectorAll(".o_group_header"),
+            ];
+            await click(firstGroupHeader);
+            await click(secondGroupHeader);
+            assert.containsN(target, ".o_data_row", 4);
+            assert.containsNone(target, ".o_selected_row");
+            assert.verifySteps(["web_search_read", "web_search_read"]);
+
+            // Click on first data row
+            const dataRows = [...target.querySelectorAll(".o_data_row")];
+            await click(dataRows[0].querySelector("[name=foo]"));
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(dataRows[0], "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                dataRows[0].querySelector("[name=foo] input")
+            );
+            assert.strictEqual(dataRows[0], target.querySelector("tbody tr:nth-child(2)"));
+
+            // Press enter in input should move to next record, even if record is in another group
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(dataRows[1], "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                dataRows[1].querySelector("[name=foo] input")
+            );
+            assert.strictEqual(dataRows[1], target.querySelector("tbody tr:nth-child(4)"));
+
+            // Press enter in input should move to next record
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(dataRows[2], "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                dataRows[2].querySelector("[name=foo] input")
+            );
+            assert.strictEqual(dataRows[2], target.querySelector("tbody tr:nth-child(5)"));
+
+            // Once again
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(dataRows[3], "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                dataRows[3].querySelector("[name=foo] input")
+            );
+            assert.strictEqual(dataRows[3], target.querySelector("tbody tr:nth-child(6)"));
+
+            // Once again on the last data row should cycle to the first data row
+            triggerHotkey("Enter");
+            await nextTick();
+            assert.containsOnce(target, ".o_selected_row");
+            assert.hasClass(dataRows[0], "o_selected_row");
+            assert.strictEqual(
+                document.activeElement,
+                dataRows[0].querySelector("[name=foo] input")
+            );
+            assert.strictEqual(dataRows[0], target.querySelector("tbody tr:nth-child(2)"));
+
+            assert.verifySteps([]);
+        }
+    );
+
+    QUnit.test("cell-level keyboard navigation in non-editable list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo" required="1"/></tree>',
+            selectRecord: (resId) => {
+                assert.step(`resId: ${resId}`);
+            },
+        });
+
+        assert.strictEqual(document.activeElement, target.querySelector(".o_searchview_input"));
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("thead .o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowUp");
+        await nextTick();
+        assert.strictEqual(document.activeElement, target.querySelector(".o_searchview_input"));
+
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:first-child .o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:first-child .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "yop");
+
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:first-child .o_field_cell[name=foo]")
+        );
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(2) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "blip");
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(3) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "gnap");
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(4) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "blip");
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(4) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "blip");
+
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(4) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "blip");
+
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(4) .o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(4) .o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowUp");
+        triggerHotkey("ArrowRight");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody tr:nth-child(3) .o_field_cell[name=foo]")
+        );
+        assert.strictEqual(document.activeElement.textContent, "gnap");
+
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.verifySteps(["resId: 3"]);
+    });
+
+    QUnit.test("keyboard navigation from last cell in editable list", async (assert) => {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>
+            `,
+        });
+
+        // Click on last cell
+        await click(target, ".o_data_row:last-child [name=int_field]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:last-child [name=int_field] input")
+        );
+
+        // Tab should focus the first field of first row
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:first-child [name=foo] input")
+        );
+
+        // Shift+Tab should focus back the last field of last row
+        triggerHotkey("Shift+Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:last-child [name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        assert.containsN(target, ".o_data_row", 4);
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:last-child [name=foo] input")
+        );
+
+        // Enter should discard the edited row as it is pristine + get to first row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 4);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:first-child [name=foo] input")
+        );
+
+        // Click on last cell
+        await click(target, ".o_data_row:last-child [name=int_field]");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:last-child [name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+
+        // Edit the row and press enter: should add a new row
+        const input = target.querySelector(".o_data_row:last-child [name=foo] input");
+        assert.strictEqual(document.activeElement, input);
+        input.value = "blork";
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+        assert.containsN(target, ".o_data_row", 6);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_data_row:last-child [name=foo] input")
+        );
+
+        // Escape should discard the added row as it is pristine + view should go into readonly mode
+        triggerHotkey("Escape");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.containsNone(target, ".o_selected_row");
+    });
+
+    QUnit.test("keyboard navigation from last cell in editable grouped list", async (assert) => {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["bar"],
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>
+            `,
+        });
+
+        assert.containsNone(target, ".o_data_row");
+        assert.containsN(target, ".o_group_header", 2);
+
+        // Open first and second groups
+        await click(getGroup(1));
+        await click(getGroup(2));
+        assert.containsN(target, ".o_data_row", 4);
+
+        // Click on last cell
+        await click(getDataRow(4).querySelector("[name=int_field]"));
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Tab should focus the first field of first data row
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Shift+Tab should focus back the last field of last row
+        triggerHotkey("Shift+Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.strictEqual(document.activeElement, getDataRow(5).querySelector("[name=foo] input"));
+
+        // Enter should discard the edited row as it is pristine + get to first row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 4);
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Click on last cell
+        await click(getDataRow(4).querySelector("[name=int_field]"));
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+
+        // Edit the row and press enter: should add a new row
+        let input = getDataRow(5).querySelector("[name=foo] input");
+        assert.strictEqual(document.activeElement, input);
+        input.value = "blork";
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+        assert.containsN(target, ".o_data_row", 6);
+        assert.strictEqual(document.activeElement, getDataRow(6).querySelector("[name=foo] input"));
+
+        // Escape should discard the added row as it is pristine + view should go into readonly mode
+        triggerHotkey("Escape");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.containsNone(target, ".o_selected_row");
+
+        // Click on last data row of first group
+        assert.equal(getGroup(1).innerText, "No (1)	-4");
+        await click(getDataRow(1).querySelector("[name=foo]"));
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Enter should add a new row in the first group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 6);
+        assert.equal(getGroup(1).innerText, "No (2)	-4");
+
+        // Enter should discard the edited row as it is pristine + get to next data row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.equal(getGroup(1).innerText, "No (1)	-4");
+        assert.strictEqual(document.activeElement, getDataRow(2).querySelector("[name=foo] input"));
+
+        // Shift+Tab should focus back the last field of first row
+        triggerHotkey("Shift+Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(1).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row in the first group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 6);
+        assert.equal(getGroup(1).innerText, "No (2)	-4");
+
+        // Edit the row and press enter: should add a new row
+        input = getDataRow(2).querySelector("[name=foo] input");
+        assert.strictEqual(document.activeElement, input);
+        input.value = "zzapp";
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+        assert.containsN(target, ".o_data_row", 7);
+        assert.equal(getGroup(1).innerText, "No (3)	-4");
+        assert.strictEqual(document.activeElement, getDataRow(3).querySelector("[name=foo] input"));
+    });
+
+    QUnit.test("keyboard navigation from last cell in multi-edit list", async (assert) => {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            groupBy: ["bar"],
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>
+            `,
+        });
+
+        assert.containsNone(target, ".o_data_row");
+        assert.containsN(target, ".o_group_header", 2);
+
+        // Open first and second groups
+        await click(getGroup(1));
+        await click(getGroup(2));
+        assert.containsN(target, ".o_data_row", 4);
+
+        // Click on last cell
+        await click(getDataRow(4).querySelector("[name=int_field]"));
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Tab should focus the first field of first data row
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Shift+Tab should focus back the last field of last row
+        triggerHotkey("Shift+Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.strictEqual(document.activeElement, getDataRow(5).querySelector("[name=foo] input"));
+
+        // Enter should discard the edited row as it is pristine + get to first row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 4);
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Click on last cell
+        await click(getDataRow(4).querySelector("[name=int_field]"));
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(4).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row at the bottom
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+
+        // Edit the row and press enter: should add a new row
+        let input = getDataRow(5).querySelector("[name=foo] input");
+        assert.strictEqual(document.activeElement, input);
+        input.value = "blork";
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+        assert.containsN(target, ".o_data_row", 6);
+        assert.strictEqual(document.activeElement, getDataRow(6).querySelector("[name=foo] input"));
+
+        // Escape should discard the added row as it is pristine + view should go into readonly mode
+        triggerHotkey("Escape");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.containsNone(target, ".o_selected_row");
+
+        // Click on last data row of first group
+        assert.equal(getGroup(1).innerText, "No (1)	-4");
+        await click(getDataRow(1).querySelector("[name=foo]"));
+        assert.strictEqual(document.activeElement, getDataRow(1).querySelector("[name=foo] input"));
+
+        // Enter should add a new row in the first group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 6);
+        assert.equal(getGroup(1).innerText, "No (2)	-4");
+
+        // Enter should discard the edited row as it is pristine + get to next data row
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 5);
+        assert.equal(getGroup(1).innerText, "No (1)	-4");
+        assert.strictEqual(document.activeElement, getDataRow(2).querySelector("[name=foo] input"));
+
+        // Shift+Tab should focus back the last field of first row
+        triggerHotkey("Shift+Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            getDataRow(1).querySelector("[name=int_field] input")
+        );
+
+        // Enter should add a new row in the first group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 6);
+        assert.equal(getGroup(1).innerText, "No (2)	-4");
+
+        // Edit the row and press enter: should add a new row
+        input = getDataRow(2).querySelector("[name=foo] input");
+        assert.strictEqual(document.activeElement, input);
+        input.value = "zzapp";
+        await triggerEvent(input, null, "input");
+        triggerHotkey("Enter");
+        await triggerEvent(input, null, "change");
+        assert.containsN(target, ".o_data_row", 7);
+        assert.equal(getGroup(1).innerText, "No (3)	-4");
+        assert.strictEqual(document.activeElement, getDataRow(3).querySelector("[name=foo] input"));
+    });
+
+    QUnit.test(
+        "editable grouped list: adding a second record pass the first in readonly",
+        async (assert) => {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                groupBy: ["bar"],
+                arch: `
+                <tree editable="bottom">
+                    <field name="foo"/>
+                </tree>
+            `,
+            });
+
+            assert.containsNone(target, ".o_data_row");
+            assert.containsN(target, ".o_group_header", 2);
+
+            // Open first and second groups
+            await click(getGroup(1));
+            await click(getGroup(2));
+            assert.containsN(target, ".o_data_row", 4);
+            assert.equal(getGroup(1).innerText, "No (1)");
+            assert.equal(getGroup(2).innerText, "Yes (3)");
+
+            // add a row in first group
+            await click(target.querySelectorAll(".o_group_field_row_add a")[0]);
+            assert.containsOnce(target, ".o_selected_row");
+            assert.containsN(target, ".o_data_row", 5);
+            assert.equal(getGroup(1).innerText, "No (2)");
+            assert.strictEqual(
+                document.activeElement,
+                getDataRow(2).querySelector("[name=foo] input")
+            );
+
+            // add a row in second group
+            await click(target.querySelectorAll(".o_group_field_row_add a")[1]);
+            assert.containsOnce(target, ".o_selected_row");
+            assert.containsN(target, ".o_data_row", 5);
+            assert.equal(getGroup(2).innerText, "Yes (4)");
+            assert.equal(getGroup(1).innerText, "No (1)");
+            assert.strictEqual(
+                document.activeElement,
+                getDataRow(5).querySelector("[name=foo] input")
+            );
+        }
+    );
+
+    QUnit.test("removing a groupby while adding a line from list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree multi_edit="1" editable="bottom">
+                    <field name="display_name"/>
+                    <field name="foo"/>
+                </tree>`,
+            searchViewArch: `
+                <search>
+                    <field name="foo"/>
+                    <group expand="1" string="Group By">
+                        <filter name="groupby_foo" context="{'group_by': 'foo'}"/>
+                    </group>
+                </search>`,
+        });
+
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "Foo");
+
+        // expand group
+        await click(target.querySelector("th.o_group_name"));
+        assert.containsNone(target, ".o_selected_row");
+        await click(target.querySelector("td.o_group_field_row_add a"));
+        assert.containsOnce(target, ".o_selected_row");
+        await click(target, ".o_searchview_facet .o_facet_remove");
+        assert.containsNone(target, ".o_selected_row");
+    });
+
+    QUnit.test("cell-level keyboard navigation in editable grouped list", async function (assert) {
+        serverData.models.foo.records[0].bar = false;
+        serverData.models.foo.records[1].bar = false;
+        serverData.models.foo.records[2].bar = false;
+        serverData.models.foo.records[3].bar = true;
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="bottom">
+                    <field name="foo" required="1"/>
+                </tree>`,
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_name"));
+        const secondDataRow = target.querySelectorAll(".o_data_row")[1];
+        await click(secondDataRow, "[name=foo]");
+        assert.hasClass(secondDataRow, "o_selected_row");
+
+        await editInput(secondDataRow, "[name=foo] input", "blipbloup");
+
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.containsNone(document.body, ".modal");
+
+        assert.doesNotHaveClass(secondDataRow, "o_selected_row");
+
+        assert.strictEqual(document.activeElement, secondDataRow.querySelector("[name=foo]"));
+
+        assert.strictEqual(document.activeElement.textContent, "blip");
+
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(
+            document.activeElement,
+            secondDataRow.querySelector("input[type=checkbox]")
+        );
+
+        triggerHotkey("ArrowUp");
+        triggerHotkey("ArrowRight");
+
+        const firstDataRow = target.querySelector(".o_data_row");
+        assert.strictEqual(document.activeElement, firstDataRow.querySelector("[name=foo]"));
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.hasClass(firstDataRow, "o_selected_row");
+        await editInput(firstDataRow, "[name=foo] input", "Zipadeedoodah");
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.strictEqual(firstDataRow.querySelector("[name=foo]").innerText, "Zipadeedoodah");
+        assert.doesNotHaveClass(firstDataRow, "o_selected_row");
+        assert.hasClass(secondDataRow, "o_selected_row");
+        assert.strictEqual(document.activeElement, secondDataRow.querySelector("[name=foo] input"));
+        assert.strictEqual(document.activeElement.value, "blip");
+
+        triggerHotkey("ArrowUp");
+        triggerHotkey("ArrowRight");
+        await nextTick();
+
+        assert.strictEqual(document.activeElement, secondDataRow.querySelector("[name=foo] input"));
+        assert.strictEqual(document.activeElement.value, "blip");
+
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+
+        assert.strictEqual(
+            document.activeElement,
+            secondDataRow.querySelector("td[name=foo] input")
+        );
+        assert.strictEqual(document.activeElement.value, "blip");
+
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.doesNotHaveClass(secondDataRow, "o_selected_row");
+
+        assert.strictEqual(document.activeElement, secondDataRow.querySelector("td[name=foo]"));
+
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_field_row_add a")
+        );
+
+        triggerHotkey("ArrowDown");
+
+        const secondGroupHeader = target.querySelectorAll(".o_group_name")[1];
+        assert.strictEqual(document.activeElement, secondGroupHeader);
+
+        assert.containsN(target, ".o_data_row", 3);
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 4);
+
+        assert.strictEqual(document.activeElement, secondGroupHeader);
+
+        triggerHotkey("ArrowDown");
+
+        const fourthDataRow = target.querySelectorAll(".o_data_row")[3];
+        assert.strictEqual(document.activeElement, fourthDataRow.querySelector("[name=foo]"));
+
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelectorAll(".o_group_field_row_add a")[1]
+        );
+
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelectorAll(".o_group_field_row_add a")[1]
+        );
+
+        const event = triggerEvent(
+            document.activeElement,
+            null,
+            "keydown",
+            { key: "Enter" },
+            { fast: true }
+        ); // default Enter on a A tag
+        assert.ok(!event.defaultPrevented);
+        await click(target.querySelectorAll(".o_group_field_row_add a")[1]);
+
+        const fifthDataRow = target.querySelectorAll(".o_data_row")[4];
+        assert.strictEqual(document.activeElement, fifthDataRow.querySelector("[name=foo] input"));
+
+        await editInput(
+            fifthDataRow.querySelector("[name=foo] input"),
+            null,
+            "cheateur arrete de cheater"
+        );
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 6);
+
+        triggerHotkey("Escape");
+        await nextTick();
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelectorAll(".o_group_field_row_add a")[1]
+        );
+
+        // come back to the top
+        for (let i = 0; i < 9; i++) {
+            triggerHotkey("ArrowUp");
+        }
+
+        assert.strictEqual(document.activeElement, target.querySelector("thead th:nth-child(2)"));
+
+        triggerHotkey("ArrowLeft");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("thead th.o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowDown");
+        triggerHotkey("ArrowRight");
+
+        assert.strictEqual(document.activeElement, firstDataRow.querySelector("td[name=foo]"));
+
+        triggerHotkey("ArrowUp");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        assert.containsN(target, ".o_data_row", 5);
+
+        triggerHotkey("Enter");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 2);
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        triggerHotkey("ArrowRight");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 5);
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        triggerHotkey("ArrowRight");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 5);
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 2);
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        triggerHotkey("ArrowLeft");
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 2);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(2) .o_group_name")
+        );
+
+        triggerHotkey("ArrowDown");
+
+        const firstVisibleDataRow = target.querySelector(".o_data_row");
+        assert.strictEqual(document.activeElement, firstVisibleDataRow.querySelector("[name=foo]"));
+
+        triggerHotkey("ArrowDown");
+
+        const secondVisibleDataRow = target.querySelectorAll(".o_data_row")[1];
+        assert.strictEqual(
+            document.activeElement,
+            secondVisibleDataRow.querySelector("[name=foo]")
+        );
+
+        triggerHotkey("ArrowDown");
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_field_row_add a")
+        );
+
+        triggerHotkey("ArrowUp");
+
+        assert.strictEqual(
+            document.activeElement,
+            secondVisibleDataRow.querySelector("[name=foo]")
+        );
+
+        triggerHotkey("ArrowUp");
+        assert.strictEqual(document.activeElement, firstVisibleDataRow.querySelector("[name=foo]"));
+    });
+
+    QUnit.test("execute group header button with keyboard navigation", async function (assert) {
+        const list = await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <groupby name="m2o">
+                        <button type="object" name="some_method" string="Do this"/>
+                    </groupby>
+                </tree>`,
+            groupBy: ["m2o"],
+        });
+
+        patchWithCleanup(list.env.services.action, {
+            doActionButton: ({ name }) => {
+                assert.step(name);
+            },
+        });
+
+        assert.containsNone(target, ".o_data_row");
+
+        // focus create button as a starting point
+        assert.containsOnce(target, ".o_list_button_add");
+        target.querySelector(".o_list_button_add").focus();
+        assert.strictEqual(document.activeElement, target.querySelector(".o_list_button_add"));
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("thead th.o_list_record_selector input")
+        );
+
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        // unfold first group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 3);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        // move to first record of opened group
+        triggerHotkey("ArrowDown");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector("tbody .o_data_row td[name=foo]")
+        );
+
+        // move back to the group header
+        triggerHotkey("ArrowUp");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        // fold the group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsNone(target, ".o_data_row");
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        // unfold the group
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 3);
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header:nth-child(1) .o_group_name")
+        );
+
+        // tab to the group header button
+        triggerHotkey("Tab");
+        await nextTick();
+        assert.strictEqual(
+            document.activeElement,
+            target.querySelector(".o_group_header .o_group_buttons button:first-child")
+        );
+
+        // click on the button by pressing enter
+        assert.verifySteps([]);
+        triggerHotkey("Enter");
+        await nextTick();
+        assert.containsN(target, ".o_data_row", 3);
+        assert.verifySteps(["some_method"]);
+    });
+
+    QUnit.test('add a new row in grouped editable="top" list', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top"><field name="foo" required="1"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_header")); // open group "No"
+        await click(target, ".o_group_field_row_add a"); // add a new row
+        assert.hasClass(target.querySelectorAll(".o_data_row")[0], "o_selected_row");
+        assert.strictEqual(
+            target.querySelector(".o_selected_row [name=foo] input"),
+            document.activeElement,
+            "The first input of the line should have the focus"
+        );
+        assert.containsN(target, ".o_data_row", 2);
+
+        await clickDiscard(target);
+        await click(target.querySelectorAll(".o_group_header")[1]); // open second group "Yes"
+        assert.containsN(target, ".o_data_row", 4);
+
+        await click(target.querySelectorAll(".o_group_field_row_add a")[1]); // create row in second group "Yes"
+        assert.strictEqual(
+            target.querySelectorAll(".o_group_name")[1].innerText,
+            "Yes (4)",
+            "group should have correct name and count"
+        );
+        assert.containsN(target, ".o_data_row", 5);
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+
+        await editInput(target, '.o_selected_row [name="foo"] input', "pla");
+        await clickSave(target);
+        assert.containsN(target, ".o_data_row", 5);
+    });
+
+    QUnit.test('add a new row in grouped editable="bottom" list', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="bottom"><field name="foo" required="1"/></tree>',
+            groupBy: ["bar"],
+        });
+        await click(target.querySelector(".o_group_header")); // open group "No"
+        await click(target, ".o_group_field_row_add a"); // add a new row
+        assert.hasClass(target.querySelectorAll(".o_data_row")[1], "o_selected_row");
+        assert.containsN(target, ".o_data_row", 2);
+
+        await clickDiscard(target);
+        await click(target.querySelectorAll(".o_group_header")[1]); // open second group
+        assert.containsN(target, ".o_data_row", 4);
+        await click(target.querySelectorAll(".o_group_field_row_add a")[1]); // create row in second group "Yes"
+        assert.hasClass(target.querySelectorAll(".o_data_row")[4], "o_selected_row");
+
+        await editInput(target, '.o_selected_row [name="foo"] input', "pla");
+        await clickSave(target);
+        assert.containsN(target, ".o_data_row", 5);
+    });
+
+    QUnit.test(
+        "add and discard a line through keyboard navigation without crashing",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="bottom"><field name="foo" required="1"/></tree>',
+                groupBy: ["bar"],
+            });
+
+            // open the last group
+            await click(target, ".o_group_header:last-child");
+            assert.containsN(target, ".o_data_row", 3);
+
+            // Can trigger ENTER on "Add a line" link ?
+            assert.containsOnce(target, ".o_group_field_row_add a");
+            target.querySelector(".o_group_field_row_add a").focus();
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_group_field_row_add a")
+            );
+            const event = triggerEvent(
+                document.activeElement,
+                null,
+                "keydown",
+                { key: "Enter" },
+                { fast: true }
+            );
+            assert.ok(!event.defaultPrevented);
+            // Simulate "enter" keydown
+            await click(target, ".o_group_field_row_add a");
+
+            assert.containsN(target, ".o_data_row", 4);
+            await click(target, ".o_list_button_discard");
+            // At this point, a crash manager should appear if no proper link targetting
+            assert.containsN(target, ".o_data_row", 3);
+        }
+    );
+
+    QUnit.test('editable grouped list with create="0"', async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree editable="top" create="0"><field name="foo" required="1"/></tree>',
+            groupBy: ["bar"],
+        });
+
+        await click(target.querySelector(".o_group_header")); // open group
+        assert.containsNone(
+            target,
+            ".o_group_field_row_add a",
+            "Add a line should not be available in readonly"
+        );
+    });
+
+    QUnit.test("add a new row in (selection) grouped editable list", async function (assert) {
+        serverData.models.foo.fields.priority = {
+            string: "Priority",
+            type: "selection",
+            selection: [
+                [1, "Low"],
+                [2, "Medium"],
+                [3, "High"],
+            ],
+            default: 1,
+        };
+        serverData.models.foo.records.push({
+            id: 5,
+            foo: "blip",
+            int_field: -7,
+            m2o: 1,
+            priority: 2,
+        });
+        serverData.models.foo.records.push({
+            id: 6,
+            foo: "blip",
+            int_field: 5,
+            m2o: 1,
+            priority: 3,
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="priority"/>
+                    <field name="m2o"/>
+                </tree>`,
+            groupBy: ["priority"],
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step(args.kwargs.context.default_priority.toString());
+                }
+            },
+        });
+        await click(target.querySelector(".o_group_header")); // open group
+        await click(target.querySelector(".o_group_field_row_add a")); // add a new row
+        await editInput(target, '[name="foo"] input', "xyz"); // make record dirty
+        await click(target, ".o_list_view"); // unselect row
+        assert.verifySteps(["1"]);
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row .o_data_cell")[1].textContent,
+            "Low",
+            "should have a column name with a value from the groupby"
+        );
+
+        await click(target.querySelectorAll(".o_group_header")[1]); // open second group
+        await click(target.querySelectorAll(".o_group_field_row_add a")[1]); // create row in second group
+        await click(target, ".o_list_view"); // unselect row
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row")[5].querySelectorAll(".o_data_cell")[1]
+                .textContent,
+            "Medium",
+            "should have a column name with a value from the groupby"
+        );
+        assert.verifySteps(["2"]);
+    });
+
+    QUnit.test("add a new row in (m2o) grouped editable list", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="m2o"/>
+                </tree>`,
+            groupBy: ["m2o"],
+            mockRPC(route, args) {
+                if (args.method === "onchange") {
+                    assert.step(args.kwargs.context.default_m2o.toString());
+                }
+            },
+        });
+        await click(target.querySelector(".o_group_header")); // open group
+        await click(target.querySelector(".o_group_field_row_add a")); // add a new row
+        await click(target, ".o_list_view"); // unselect row
+        assert.strictEqual(
+            target.querySelector(".o_data_row").querySelectorAll(".o_data_cell")[1].textContent,
+            "Value 1",
+            "should have a column name with a value from the groupby"
+        );
+        assert.verifySteps(["1"]);
+
+        await click(target.querySelectorAll(".o_group_header")[1]); // open second group
+        await click(target.querySelectorAll(".o_group_field_row_add a")[1]); // create row in second group
+        await click(target, ".o_list_view"); // unselect row
+        assert.strictEqual(
+            target.querySelectorAll(".o_data_row")[3].querySelectorAll(".o_data_cell")[1]
+                .textContent,
+            "Value 2",
+            "should have a column name with a value from the groupby"
+        );
+        assert.verifySteps(["2"]);
+    });
+
+    QUnit.test("list view with optional fields rendering", async function (assert) {
+        patchWithCleanup(localization, {
+            direction: "ltr",
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2o" optional="hide"/>
+                    <field name="amount"/>
+                    <field name="reference" optional="hide"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, "th", 3, "should have 3 th, 1 for selector, 2 for columns");
+
+        assert.containsOnce(
+            target,
+            "table .o_optional_columns_dropdown",
+            "should have the optional columns dropdown toggle inside the table"
+        );
+
+        const optionalFieldsToggler = target.querySelector("table").lastElementChild;
+        assert.ok(
+            optionalFieldsToggler.classList.contains("o_optional_columns_dropdown"),
+            "The optional fields toggler is the second last element"
+        );
+
+        // optional fields
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+        assert.containsN(
+            target,
+            "div.o_optional_columns_dropdown span.dropdown-item",
+            2,
+            "dropdown have 2 optional field foo with checked and bar with unchecked"
+        );
+
+        // enable optional field
+        await click(target, "div.o_optional_columns_dropdown span.dropdown-item:first-child");
+        // 5 th (1 for checkbox, 4 for columns)
+        assert.containsN(target, "th", 4, "should have 4 th");
+        assert.ok(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should have a visible m2o field"
+        ); //m2o field
+
+        assert.strictEqual(
+            target.querySelectorAll(
+                "div.o_optional_columns_dropdown span.dropdown-item:first-child input:checked"
+            )[0],
+            [...target.querySelectorAll("div.o_optional_columns_dropdown span.dropdown-item")]
+                .filter((el) => el.innerText === "M2O field")[0]
+                .querySelector("input"),
+            "m2o advanced field check box should be checked in dropdown"
+        );
+
+        await click(target, "div.o_optional_columns_dropdown span.dropdown-item:first-child");
+        // 3 th (1 for checkbox, 2 for columns)
+        assert.containsN(target, "th", 3, "should have 3 th");
+        assert.notOk(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should not have a visible m2o field"
+        ); //m2o field not displayed
+
+        await click(target, "table .o_optional_columns_dropdown");
+        assert.notOk(
+            $(target)
+                .find('div.o_optional_columns_dropdown span.dropdown-item [name="m2o"]')
+                .is(":checked")
+        );
+    });
+
+    QUnit.test("list view with optional fields rendering in RTL mode", async function (assert) {
+        patchWithCleanup(localization, {
+            direction: "rtl",
+        });
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2o" optional="hide"/>
+                    <field name="amount"/>
+                    <field name="reference" optional="hide"/>
+                </tree>`,
+        });
+
+        assert.containsOnce(
+            target.querySelector("table"),
+            ".o_optional_columns_dropdown",
+            "should have the optional columns dropdown toggle inside the table"
+        );
+
+        const optionalFieldsToggler = target.querySelector("table").lastElementChild;
+        assert.ok(
+            optionalFieldsToggler.classList.contains("o_optional_columns_dropdown"),
+            "The optional fields toggler is the last element"
+        );
+    });
+
+    QUnit.test(
+        "optional fields do not disappear even after listview reload",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="foo"/>
+                        <field name="m2o" optional="hide"/>
+                        <field name="amount"/>
+                        <field name="reference" optional="hide"/>
+                    </tree>`,
+            });
+
+            assert.containsN(target, "th", 3, "should have 3 th, 1 for selector, 2 for columns");
+
+            // enable optional field
+            await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+            assert.notOk(
+                target.querySelector(
+                    "div.o_optional_columns_dropdown span.dropdown-item:first-child input"
+                ).checked
+            );
+            await click(target, "div.o_optional_columns_dropdown span.dropdown-item:first-child");
+            assert.containsN(target, "th", 4, "should have 4 th 1 for selector, 3 for columns");
+            assert.ok(
+                $(target).find("th:contains(M2O field)").is(":visible"),
+                "should have a visible m2o field"
+            ); //m2o field
+
+            var firstRowSelector = target.querySelector("tbody .o_list_record_selector input");
+            await click(firstRowSelector);
+            await reloadListView(target);
+            assert.containsN(
+                target,
+                "th",
+                4,
+                "should have 4 th 1 for selector, 3 for columns ever after listview reload"
+            );
+            assert.ok(
+                $(target).find("th:contains(M2O field)").is(":visible"),
+                "should have a visible m2o field even after listview reload"
+            );
+
+            await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+            assert.ok(
+                target.querySelector(
+                    "div.o_optional_columns_dropdown span.dropdown-item:first-child input"
+                ).checked
+            );
+        }
+    );
+
+    QUnit.test("selection is kept when optional fields are toggled", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="m2o" optional="hide"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, "th", 2);
+
+        // select a record
+        await click(target.querySelector(".o_data_row .o_list_record_selector input"));
+        assert.containsOnce(target, ".o_list_record_selector input:checked");
+
+        // add an optional field
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+        await click(target, ".o_optional_columns_dropdown span.dropdown-item:first-child label");
+        assert.containsN(target, "th", 3);
+        assert.containsOnce(target, ".o_list_record_selector input:checked");
+
+        // select all records
+        await click(target, "thead .o_list_record_selector input");
+        assert.containsN(target, ".o_list_record_selector input:checked", 5);
+
+        // remove an optional field
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+        await click(target, ".o_optional_columns_dropdown span.dropdown-item:first-child label");
+        assert.containsN(target, "th", 2);
+        assert.containsN(target, ".o_list_record_selector input:checked", 5);
+    });
+
+    QUnit.test("list view with optional fields and async rendering", async function (assert) {
+        assert.expect(14);
+
+        const def = makeDeferred();
+        const fieldRegistry = registry.category("fields");
+        const CharField = fieldRegistry.get("char");
+
+        class AsyncCharField extends CharField {
+            setup() {
+                super.setup();
+                onWillStart(async () => {
+                    assert.ok(true, "the rendering must be async");
+                    await def;
+                });
+            }
+        }
+        fieldRegistry.add("asyncwidget", AsyncCharField);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="m2o"/>
+                    <field name="foo" widget="asyncwidget" optional="hide"/>
+                </tree>`,
+        });
+
+        assert.containsN(target, "th", 2);
+        assert.containsNone(target, ".o_optional_columns_dropdown.show");
+
+        // add an optional field (we click on the label on purpose, as it will trigger
+        // a second event on the input)
+        await click(target, "table .o_optional_columns_dropdown .dropdown-toggle");
+        assert.containsOnce(target, ".o_optional_columns_dropdown.show");
+        assert.containsNone(target, ".o_optional_columns_dropdown input:checked");
+
+        await click(target, ".o_optional_columns_dropdown span.dropdown-item:first-child label");
+        assert.containsN(target, "th", 2);
+        assert.containsOnce(target, ".o_optional_columns_dropdown.show");
+        assert.containsOnce(target, ".o_optional_columns_dropdown input:checked");
+
+        def.resolve();
+        await nextTick();
+        assert.containsN(target, "th", 3);
+        assert.containsOnce(target, ".o_optional_columns_dropdown.show");
+        assert.containsOnce(target, ".o_optional_columns_dropdown input:checked");
+    });
+
+    QUnit.test("change the viewType of the current action", async function (assert) {
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partners Action 1",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[1, "kanban"]],
+            },
+            2: {
+                id: 2,
+                name: "Partners",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "list"],
+                    [1, "kanban"],
+                ],
+            },
+        };
+
+        serverData.views = {
+            "foo,1,kanban":
+                '<kanban><templates><t t-name="kanban-box">' +
+                '<div class="oe_kanban_global_click"><field name="foo"/></div>' +
+                "</t></templates></kanban>",
+
+            "foo,false,list":
+                '<tree limit="3">' +
+                '<field name="foo"/>' +
+                '<field name="m2o" optional="hide"/>' +
+                '<field name="o2m" optional="show"/></tree>',
+
+            "foo,false,search": '<search><field name="foo" string="Foo"/></search>',
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, 2);
+
+        assert.containsOnce(target, ".o_list_view", "should have rendered a list view");
+
+        assert.containsN(target, "th", 3, "should display 3 th (selector + 2 fields)");
+
+        // enable optional field
+        await click(target, "table .o_optional_columns_dropdown_toggle");
+
+        assert.notOk(
+            $(target)
+                .find('div.o_optional_columns_dropdown span.dropdown-item [name="m2o"]')
+                .is(":checked")
+        );
+        assert.ok(
+            $(target)
+                .find('div.o_optional_columns_dropdown span.dropdown-item [name="o2m"]')
+                .is(":checked")
+        );
+
+        await click(target.querySelector("div.o_optional_columns_dropdown span.dropdown-item"));
+        assert.containsN(target, "th", 4, "should display 4 th (selector + 3 fields)");
+        assert.ok(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should have a visible m2o field"
+        ); //m2o field
+
+        // switch to kanban view
+        await loadState(webClient, {
+            action: 2,
+            view_type: "kanban",
+        });
+
+        assert.containsNone(target, ".o_list_view", "should not display the list view anymore");
+        assert.containsOnce(target, ".o_kanban_view", "should have switched to the kanban view");
+
+        // switch back to list view
+        await loadState(webClient, {
+            action: 2,
+            view_type: "list",
+        });
+
+        assert.containsNone(target, ".o_kanban_view", "should not display the kanban view anymoe");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
+
+        assert.containsN(target, "th", 4, "should display 4 th");
+        assert.ok(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should have a visible m2o field"
+        ); //m2o field
+        assert.ok(
+            $(target).find("th:contains(O2M field)").is(":visible"),
+            "should have a visible o2m field"
+        ); //m2o field
+
+        // disable optional field
+        await click(target, "table .o_optional_columns_dropdown_toggle");
+        assert.ok(
+            $(target)
+                .find('div.o_optional_columns_dropdown span.dropdown-item [name="m2o"]')
+                .is(":checked")
+        );
+        assert.ok(
+            $(target)
+                .find('div.o_optional_columns_dropdown span.dropdown-item [name="o2m"]')
+                .is(":checked")
+        );
+        await click(
+            target.querySelectorAll("div.o_optional_columns_dropdown span.dropdown-item input")[1]
+        );
+        assert.ok(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should have a visible m2o field"
+        ); //m2o field
+        assert.notOk(
+            $(target).find("th:contains(O2M field)").is(":visible"),
+            "should have a visible o2m field"
+        ); //m2o field
+        assert.containsN(target, "th", 3, "should display 3 th");
+
+        await doAction(webClient, 1);
+
+        assert.containsNone(target, ".o_list_view", "should not display the list view anymore");
+        assert.containsOnce(target, ".o_kanban_view", "should have switched to the kanban view");
+
+        await doAction(webClient, 2);
+
+        assert.containsNone(target, ".o_kanban_view", "should not havethe kanban view anymoe");
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
+
+        assert.containsN(target, "th", 3, "should display 3 th");
+        assert.ok(
+            $(target).find("th:contains(M2O field)").is(":visible"),
+            "should have a visible m2o field"
+        ); //m2o field
+        assert.notOk(
+            $(target).find("th:contains(O2M field)").is(":visible"),
+            "should have a visible o2m field"
+        ); //m2o field
+    });
+
+    QUnit.test(
+        "list view with optional fields rendering and local storage mock",
+        async function (assert) {
+            let forceLocalStorage = true;
+
+            patchWithCleanup(browser.localStorage, {
+                getItem(key) {
+                    assert.step("getItem " + key);
+                    return forceLocalStorage ? '["m2o"]' : this._super(arguments);
+                },
+                setItem(key, value) {
+                    assert.step("setItem " + key + " to " + JSON.stringify(value));
+                    return this._super(arguments);
+                },
+            });
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree>
+                        <field name="foo"/>
+                        <field name="m2o" optional="hide"/>
+                        <field name="reference" optional="show"/>
+                    </tree>`,
+                viewId: 42,
+            });
+
+            const localStorageKey = "optional_fields,foo,list,42,foo,m2o,reference";
+
+            assert.verifySteps(["getItem " + localStorageKey]);
+
+            assert.containsN(target, "th", 3, "should have 3 th, 1 for selector, 2 for columns");
+
+            assert.ok(
+                $(target).find("th:contains(M2O field)").is(":visible"),
+                "should have a visible m2o field"
+            ); //m2o field
+
+            assert.notOk(
+                $(target).find("th:contains(Reference Field)").is(":visible"),
+                "should not have a visible reference field"
+            );
+
+            // optional fields
+            await click(target.querySelector("table .o_optional_columns_dropdown button"));
+            assert.containsN(
+                target,
+                "div.o_optional_columns_dropdown span.dropdown-item",
+                2,
+                "dropdown have 2 optional fields"
+            );
+
+            forceLocalStorage = false;
+            // enable optional field
+            await click(
+                $(target).find("div.o_optional_columns_dropdown span.dropdown-item:eq(1) input")[0]
+            );
+
+            // Only a setItem since the list view maintains its own internal state of toggled
+            // optional columns.
+            assert.verifySteps(["setItem " + localStorageKey + ' to ["m2o","reference"]']);
+
+            // 4 th (1 for checkbox, 3 for columns)
+            assert.containsN(target, "th", 4, "should have 4 th");
+
+            assert.ok(
+                $(target).find("th:contains(M2O field)").is(":visible"),
+                "should have a visible m2o field"
+            ); //m2o field
+
+            assert.ok(
+                $(target).find("th:contains(Reference Field)").is(":visible"),
+                "should have a visible reference field"
+            );
+        }
+    );
+
+    QUnit.test("quickcreate in a many2one in a list", async function (assert) {
+        await makeView({
+            type: "list",
+            arch: '<tree editable="top"><field name="m2o"/></tree>',
+            serverData,
+            resModel: "foo",
+        });
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+
+        const input = target.querySelector(".o_data_row .o_data_cell input");
+        await editInput(input, null, "aaa");
+        await triggerEvents(input, null, ["keyup", "blur"]);
+        document.body.click();
+        await nextTick();
+        assert.containsOnce(target, ".modal", "the quick_create modal should appear");
+
+        await click(target.querySelector(".modal .btn-primary"));
+        await click(target.querySelector(".o_list_view"));
+        assert.strictEqual(
+            target.getElementsByClassName("o_data_cell")[0].innerHTML,
+            "aaa",
+            "value should have been updated"
+        );
+    });
+
+    QUnit.test("float field render with digits attribute on listview", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: '<tree><field name="foo"/><field name="qux" digits="[12,6]"/></tree>',
+        });
+
+        assert.strictEqual(
+            target.querySelector("td.o_list_number").textContent,
+            "0.400000",
+            "should contain 6 digits decimal precision"
+        );
+    });
+
+    QUnit.test("editable list: resize column headers", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="reference" optional="hide"/>
+                </tree>`,
+        });
+
+        // Target handle
+        const th = target.querySelector("th:nth-child(2)");
+        const optionalDropdown = target.querySelector(".o_optional_columns_dropdown");
+        const optionalInitialX = optionalDropdown.getBoundingClientRect().x;
+        const resizeHandle = th.querySelector(".o_resize");
+        const originalWidth = th.offsetWidth;
+        const expectedWidth = Math.floor(originalWidth / 2 + resizeHandle.offsetWidth / 2);
+        const delta = originalWidth - expectedWidth;
+
+        await dragAndDrop(resizeHandle, th);
+        const optionalFinalX = Math.floor(optionalDropdown.getBoundingClientRect().x);
+
+        assert.strictEqual(
+            th.offsetWidth,
+            expectedWidth,
+            // 1px for the cell right border
+            "header width should be halved (plus half the width of the handle)"
+        );
+        assert.strictEqual(
+            optionalFinalX,
+            optionalInitialX - delta,
+            "optional columns dropdown should have moved the same amount"
+        );
+    });
+
+    QUnit.test("editable list: resize column headers with max-width", async function (assert) {
+        // This test will ensure that, on resize list header,
+        // the resized element have the correct size and other elements are not resized
+        serverData.models.foo.records[0].foo = "a".repeat(200);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                    <field name="reference" optional="hide"/>
+                </tree>`,
+        });
+
+        // Target handle
+        const th = target.querySelector("th:nth-child(2)");
+        const thNext = target.querySelector("th:nth-child(3)");
+        const resizeHandle = th.querySelector(".o_resize");
+        const nextResizeHandle = thNext.querySelector(".o_resize");
+        const thOriginalWidth = th.offsetWidth;
+        const thNextOriginalWidth = thNext.offsetWidth;
+        const thExpectedWidth = Math.floor(thOriginalWidth + thNextOriginalWidth);
+
+        await dragAndDrop(resizeHandle, nextResizeHandle);
+
+        const thFinalWidth = th.offsetWidth;
+        const thNextFinalWidth = thNext.offsetWidth;
+        const thWidthDiff = Math.abs(thExpectedWidth - thFinalWidth);
+
+        assert.ok(thWidthDiff <= 1, "Wrong width on resize");
+        assert.ok(thNextOriginalWidth === thNextFinalWidth, "Width must not have been changed");
+    });
+
+    QUnit.test("resize column with several x2many lists in form group", async function (assert) {
+        serverData.models.bar.fields.text = { string: "Text field", type: "char" };
+        serverData.models.foo.records[0].o2m = [1, 2];
+
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <form>
+                    <group>
+                        <field name="o2m">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                                <field name="text"/>
+                            </tree>
+                        </field>
+                        <field name="m2m">
+                            <tree editable="bottom">
+                                <field name="display_name"/>
+                                <field name="text"/>
+                            </tree>
+                        </field>
+                    </group>
+                </form>`,
+            resId: 1,
+        });
+
+        const th = target.querySelector("th");
+        const resizeHandle = th.querySelector(".o_resize");
+        const firstTableInitialWidth = target.querySelectorAll(".o_field_x2many_list table")[0]
+            .offsetWidth;
+        const secondTableInititalWidth = target.querySelectorAll(".o_field_x2many_list table")[1]
+            .offsetWidth;
+
+        assert.strictEqual(
+            firstTableInitialWidth,
+            secondTableInititalWidth,
+            "both table columns have same width"
+        );
+
+        await dragAndDrop(resizeHandle, target.getElementsByTagName("th")[1], {
+            position: "right",
+        });
+
+        assert.notEqual(
+            firstTableInitialWidth,
+            target.querySelectorAll("thead")[0].offsetWidth,
+            "first o2m table is resized and width of table has changed"
+        );
+        assert.strictEqual(
+            secondTableInititalWidth,
+            target.querySelectorAll("thead")[1].offsetWidth,
+            "second o2m table should not be impacted on first o2m in group resized"
+        );
+    });
+
+    QUnit.test(
+        "resize column with x2many list with several fields in form notebook",
+        async function (assert) {
+            serverData.models.foo.records[0].o2m = [1, 2];
+
+            await makeView({
+                type: "form",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <notebook>
+                                <page string="Page 1">
+                                    <field name="o2m">
+                                        <tree editable="bottom">
+                                            <field name="display_name"/>
+                                            <field name="display_name"/>
+                                            <field name="display_name"/>
+                                            <field name="display_name"/>
+                                        </tree>
+                                    </field>
+                                </page>
+                            </notebook>
+                        </sheet>
+                    </form>`,
+                resId: 1,
+            });
+
+            const th = target.querySelector("th");
+            const resizeHandle = th.querySelector(".o_resize");
+            const listInitialWidth = target.querySelector(".o_list_renderer").offsetWidth;
+
+            await dragAndDrop(resizeHandle, target.getElementsByTagName("th")[1], {
+                position: "right",
+            });
+
+            assert.strictEqual(
+                target.querySelector(".o_list_renderer").offsetWidth,
+                listInitialWidth,
+                "resizing the column should not impact the width of list"
+            );
+        }
+    );
+
+    QUnit.test("enter edition in editable list with multi_edit = 0", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" multi_edit="0">
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        // click on int_field cell of first row
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        const intFieldInput = target.querySelector(
+            ".o_selected_row .o_field_widget[name=int_field] input"
+        );
+        assert.strictEqual(document.activeElement, intFieldInput);
+    });
+
+    QUnit.test("enter edition in editable list with multi_edit = 1", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" multi_edit="1">
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        // click on int_field cell of first row
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        const intFieldInput = target.querySelector(
+            ".o_selected_row .o_field_widget[name=int_field] input"
+        );
+        assert.strictEqual(document.activeElement, intFieldInput);
+    });
+
+    QUnit.test("Date in evaluation context works with date field", async function (assert) {
+        patchDate(1997, 0, 9, 12, 0, 0);
+
+        serverData.models.foo.fields.birthday = { string: "Birthday", type: "date" };
+        serverData.models.foo.records[0].birthday = "1997-01-08";
+        serverData.models.foo.records[1].birthday = "1997-01-09";
+        serverData.models.foo.records[2].birthday = "1997-01-10";
+
+        await makeView({
+            type: "list",
+            arch: `
+                <tree>
+                    <field name="birthday" decoration-danger="birthday > today"/>
+                </tree>`,
+            serverData,
+            resModel: "foo",
+        });
+
+        assert.containsOnce(target, ".o_data_row .text-danger");
+    });
+
+    QUnit.test("Datetime in evaluation context works with datetime field", async function (assert) {
+        patchDate(1997, 0, 9, 12, 0, 0);
+
+        /**
+         * Returns "1997-01-DD HH:MM:00" with D, H and M holding current UTC values
+         * from patched date + (deltaMinutes) minutes.
+         * This is done to allow testing from any timezone since UTC values are
+         * calculated with the offset of the current browser.
+         */
+        function dateStringDelta(deltaMinutes) {
+            const d = new Date(Date.now() + 1000 * 60 * deltaMinutes);
+            return `1997-01-${String(d.getUTCDate()).padStart(
+                2,
+                "0"
+            )} ${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}:00`;
+        }
+
+        // "datetime" field may collide with "datetime" object in context
+        serverData.models.foo.fields.birthday = { string: "Birthday", type: "datetime" };
+        serverData.models.foo.records[0].birthday = dateStringDelta(-30);
+        serverData.models.foo.records[1].birthday = dateStringDelta(0);
+        serverData.models.foo.records[2].birthday = dateStringDelta(+30);
+
+        await makeView({
+            type: "list",
+            arch: `
+                <tree>
+                    <field name="birthday" decoration-danger="birthday > now"/>
+                </tree>`,
+            serverData,
+            resModel: "foo",
+        });
+
+        assert.containsOnce(target, ".o_data_row .text-danger");
+    });
+
+    QUnit.test("Auto save: add a record and leave action", async function (assert) {
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Action 1",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[2, "list"]],
+                search_view_id: [1, "search"],
+            },
+            2: {
+                id: 2,
+                name: "Action 2",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[3, "list"]],
+                search_view_id: [1, "search"],
+            },
+        };
+        serverData.views = {
+            "foo,1,search": "<search></search>",
+            "foo,2,list": '<tree editable="top"><field name="foo"/></tree>',
+            "foo,3,list": '<tree editable="top"><field name="foo"/></tree>',
+        };
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, 1);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap", "blip"]
+        );
+        assert.containsN(target, ".o_data_row", 4);
+
+        await click(target, ".o_list_button_add");
+        await editInput(target, '.o_data_cell [name="foo"] input', "test");
+
+        // change action and come back
+        await doAction(webClient, 2);
+        await doAction(webClient, 1, { clearBreadcrumbs: true });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap", "blip", "test"]
+        );
+        assert.containsN(target, ".o_data_row", 5);
+    });
+
+    QUnit.test("Auto save: modify a record and leave action", async function (assert) {
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Action 1",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[2, "list"]],
+                search_view_id: [1, "search"],
+            },
+            2: {
+                id: 2,
+                name: "Action 2",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[3, "list"]],
+                search_view_id: [1, "search"],
+            },
+        };
+        serverData.views = {
+            "foo,1,search": "<search></search>",
+            "foo,2,list": '<tree editable="top"><field name="foo"/></tree>',
+            "foo,3,list": '<tree editable="top"><field name="foo"/></tree>',
+        };
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, 1);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap", "blip"]
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_data_cell [name="foo"] input', "test");
+
+        // change action and come back
+        await doAction(webClient, 2);
+        await doAction(webClient, 1, { clearBreadcrumbs: true });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["test", "blip", "gnap", "blip"]
+        );
+    });
+
+    QUnit.test("Auto save: modify a record and leave action (reject)", async function (assert) {
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Action 1",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[2, "list"]],
+                search_view_id: [1, "search"],
+            },
+            2: {
+                id: 2,
+                name: "Action 2",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[3, "list"]],
+                search_view_id: [1, "search"],
+            },
+        };
+        serverData.views = {
+            "foo,1,search": "<search></search>",
+            "foo,2,list": '<tree editable="top"><field name="foo" required="1"/></tree>',
+            "foo,3,list": '<tree editable="top"><field name="foo"/></tree>',
+        };
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, 1);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap", "blip"]
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_data_cell [name="foo"] input', "");
+        await assert.rejects(doAction(webClient, 2));
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "blip", "gnap", "blip"]
+        );
+        assert.hasClass(target.querySelector('.o_data_cell [name="foo"]'), "o_field_invalid");
+        assert.containsN(target, ".o_data_row", 4);
+    });
+
+    QUnit.test("Auto save: add a record and change page", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" limit="3">
+                    <field name="foo"/>
+                </tree>`,
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap"]
+        );
+
+        await click(target.querySelector(".o_list_button_add"));
+        await editInput(target, '.o_data_cell [name="foo"] input', "test");
+        await pagerNext(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["blip", "test"]
+        );
+
+        await pagerPrevious(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap"]
+        );
+    });
+
+    QUnit.test("Auto save: modify a record and change page", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" limit="3">
+                    <field name="foo"/>
+                </tree>`,
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap"]
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_cell input", "test");
+        await pagerNext(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["blip"]
+        );
+
+        await pagerPrevious(target);
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["test", "blip", "gnap"]
+        );
+    });
+
+    QUnit.test("Auto save: modify a record and change page (reject)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top" limit="3">
+                    <field name="foo" required="1"/>
+                </tree>`,
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["yop", "blip", "gnap"]
+        );
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, ".o_data_cell input", "");
+        await pagerNext(target);
+        assert.hasClass(target.querySelector('.o_data_cell [name="foo"]'), "o_field_invalid");
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_cell")].map((el) => el.textContent),
+            ["", "blip", "gnap"]
+        );
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                </tree>`,
+            mockRPC(route, { args, method, model }) {
+                if (model === "foo" && method === "write") {
+                    assert.deepEqual(args, [[1], { foo: "test" }]);
+                }
+            },
+        });
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_data_cell [name="foo"] input', "test");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (pending changes)", async function (assert) {
+        assert.expect(1);
+
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                </tree>`,
+            mockRPC(route, { args, method, model }) {
+                if (model === "foo" && method === "write") {
+                    assert.deepEqual(args, [[1], { foo: "test" }]);
+                }
+            },
+        });
+        await click(target.querySelector(".o_data_cell"));
+        const input = target.querySelector('.o_data_cell [name="foo"] input');
+        input.value = "test";
+        await triggerEvent(input, null, "input");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test("Auto save: save on closing tab/browser (invalid field)", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo" required="1"/>
+                </tree>`,
+            mockRPC(route, { args, method, model }) {
+                if (model === "foo" && method === "write") {
+                    assert.step("save"); // should not be called
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_data_cell [name="foo"] input', "");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+
+        assert.verifySteps([], "should not save because of invalid field");
+    });
+
+    QUnit.test(
+        "Auto save: save on closing tab/browser (onchanges + pending changes)",
+        async function (assert) {
+            assert.expect(1);
+
+            serverData.models.foo.onchanges = {
+                int_field: function (obj) {
+                    obj.foo = `${obj.int_field}`;
+                },
+            };
+
+            const def = makeDeferred();
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                    <tree editable="top">
+                        <field name="foo"/>
+                        <field name="int_field"/>
+                    </tree>`,
+                mockRPC(route, { args, method, model }) {
+                    if (model === "foo" && method === "onchange") {
+                        return def;
+                    }
+                    if (model === "foo" && method === "write") {
+                        assert.deepEqual(args, [[1], { int_field: 2021 }]);
+                    }
+                },
+            });
+            await click(target.querySelector(".o_data_cell"));
+            await editInput(target, '.o_data_cell [name="int_field"] input', "2021");
+
+            window.dispatchEvent(new Event("beforeunload"));
+            await nextTick();
+        }
+    );
+
+    QUnit.test("Auto save: save on closing tab/browser (onchanges)", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.foo.onchanges = {
+            int_field: function (obj) {
+                obj.foo = `${obj.int_field}`;
+            },
+        };
+
+        const def = makeDeferred();
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="foo"/>
+                    <field name="int_field"/>
+                </tree>`,
+            mockRPC(route, { args, method, model }) {
+                if (model === "foo" && method === "onchange") {
+                    return def;
+                }
+                if (model === "foo" && method === "write") {
+                    assert.deepEqual(args, [[1], { foo: "test", int_field: 2021 }]);
+                }
+            },
+        });
+        await click(target.querySelector(".o_data_cell"));
+        await editInput(target, '.o_data_cell [name="int_field"] input', "2021");
+        const input = target.querySelector('.o_data_cell [name="foo"] input');
+        input.value = "test";
+        await triggerEvent(input, null, "input");
+
+        window.dispatchEvent(new Event("beforeunload"));
+        await nextTick();
+    });
+
+    QUnit.test(
+        "edition, then navigation with tab (with a readonly re-evaluated field and onchange)",
+        async function (assert) {
+            // This test makes sure that if we have a cell in a row that will become
+            // read-only after editing another cell, in case the keyboard navigation
+            // move over it before it becomes read-only and there are unsaved changes
+            // (which will trigger an onchange), the focus of the next activable
+            // field will not crash
+            serverData.models.bar.onchanges = {
+                o2m: function () {},
+            };
+            serverData.models.bar.fields.o2m = {
+                string: "O2M field",
+                type: "one2many",
+                relation: "foo",
+            };
+            serverData.models.bar.records[0].o2m = [1, 4];
+
+            await makeView({
+                type: "form",
+                resModel: "bar",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <group>
+                            <field name="display_name"/>
+                            <field name="o2m">
+                                <tree editable="bottom">
+                                    <field name="foo"/>
+                                    <field name="date" attrs="{'readonly': [('foo', '!=', 'yop')]}"/>
+                                    <field name="int_field"/>
+                                </tree>
+                            </field>
+                        </group>
+                    </form>`,
+                mockRPC(route, args) {
+                    if (args.method === "onchange") {
+                        assert.step(`onchange:${args.model}`);
+                    }
+                },
+            });
+
+            await clickEdit(target);
+
+            await click(target.querySelector(".o_data_cell"));
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_cell[name=foo] input")
+            );
+            await editInput(target, ".o_data_cell[name=foo] input", "new value");
+
+            triggerHotkey("Tab");
+            await nextTick();
+
+            assert.strictEqual(
+                document.activeElement,
+                target.querySelector(".o_data_cell[name=int_field] input")
+            );
+
+            assert.verifySteps(["onchange:bar"]);
+        }
+    );
+
+    QUnit.test(
+        "selecting a row after another one containing a table within an html field should be the correct one",
+        async function (assert) {
+            serverData.models.foo.fields.html = { string: "HTML field", type: "html" };
+            serverData.models.foo.records[0].html = `
+                <table class="table table-bordered">
+                    <tbody>
+                        <tr>
+                            <td><br></td>
+                            <td><br></td>
+                        </tr>
+                         <tr>
+                            <td><br></td>
+                            <td><br></td>
+                        </tr>
+                    </tbody>
+                </table>`;
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree editable="top" multi_edit="1"><field name="html"/></tree>',
+            });
+
+            await click(target.querySelectorAll(".o_data_row")[1].querySelector(".o_data_cell"));
+            assert.ok(
+                $("table.o_list_table > tbody > tr:eq(1)")[0].classList.contains("o_selected_row"),
+                "The second row should be selected"
+            );
+        }
+    );
+
+    QUnit.test(
+        "archive/unarchive not available on active readonly models",
+        async function (assert) {
+            serverData.models.foo.fields.active = {
+                string: "Active",
+                type: "boolean",
+                default: true,
+                readonly: true,
+            };
+
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: '<tree limit="3"><field name="display_name"/></tree>',
+                actionMenus: {},
+            });
+
+            await click(target.querySelector("tbody .o_data_row td.o_list_record_selector input"));
+            assert.containsOnce(target, ".o_cp_action_menus", "sidebar should be available");
+
+            await click(target, "div.o_control_panel .o_cp_action_menus .dropdown button");
+            assert.containsNone(
+                target,
+                "a:contains(Archive)",
+                "Archive action should not be available"
+            );
+        }
+    );
+
+    QUnit.test("open groups are kept when leaving and coming back", async (assert) => {
+        serverData.views = {
+            "foo,false,list": `<tree><field name="foo"/></tree>`,
+            "foo,false,search": "<search/>",
+            "foo,false,form": "<form/>",
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, {
+            name: "Partners",
+            res_model: "foo",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "list"],
+                [false, "form"],
+            ],
+            context: {
+                group_by: ["bar"],
+            },
+        });
+
+        assert.containsOnce(target, ".o_list_view");
+        assert.containsN(target, ".o_group_header", 2);
+        assert.containsNone(target, ".o_group_open");
+        assert.containsNone(target, ".o_data_row");
+
+        // unfold the second group
+        await click(target.querySelectorAll(".o_group_header")[1]);
+        assert.containsOnce(target, ".o_group_open");
+        assert.containsN(target, ".o_data_row", 3);
+
+        // open a record and go back
+        await click(target.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_form_view");
+        await click(target.querySelector(".breadcrumb-item a"));
+
+        assert.containsOnce(target, ".o_group_open");
+        assert.containsN(target, ".o_data_row", 3);
+    });
+});
diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js
index 8f2d471f7f4..870ec97919b 100644
--- a/addons/web/static/tests/views/pivot_view_tests.js
+++ b/addons/web/static/tests/views/pivot_view_tests.js
@@ -4121,9 +4121,9 @@ QUnit.module("Views", (hooks) => {
                     }
                     readGroupCount++;
                 }
-                if (route === "/web/dataset/search_read") {
+                if (args.method === "web_search_read") {
                     assert.step("search_read");
-                    const domain = args.domain;
+                    const domain = args.kwargs.domain;
                     assert.deepEqual(
                         domain,
                         ["&", ["customer", "=", 1], ["foo", "=", 12]],
@@ -4799,7 +4799,7 @@ QUnit.module("Views", (hooks) => {
         await legacyExtraNextTick();
 
         assert.containsOnce(target, ".o_list_view");
-        assert.verifySteps(["/web/dataset/search_read"]);
+        assert.verifySteps(["web_search_read"]);
 
         // switch back to pivot
         await click(target.querySelector(".o_control_panel .o_switch_view.o_pivot"));
diff --git a/addons/web/static/tests/views/record_tests.js b/addons/web/static/tests/views/record_tests.js
new file mode 100644
index 00000000000..701e3b68a1b
--- /dev/null
+++ b/addons/web/static/tests/views/record_tests.js
@@ -0,0 +1,186 @@
+/** @odoo-module **/
+
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { Field } from "@web/views/fields/field";
+import { Record } from "@web/views/record";
+import { click, getFixture, mount } from "../helpers/utils";
+import { setupViewRegistries } from "../views/helpers";
+
+const { Component, xml, useState } = owl;
+
+let serverData;
+let target;
+
+QUnit.module("Record Component", (hooks) => {
+    hooks.beforeEach(() => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                            trim: true,
+                        },
+                        int_field: {
+                            string: "int_field",
+                            type: "integer",
+                            sortable: true,
+                            searchable: true,
+                        },
+                        p: {
+                            string: "one2many field",
+                            type: "one2many",
+                            relation: "partner",
+                            searchable: true,
+                        },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            searchable: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            foo: "yop",
+                            int_field: 10,
+                            p: [],
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            foo: "blip",
+                            int_field: 0,
+                            p: [],
+                        },
+                        { id: 3, foo: "gnap", int_field: 80 },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            foo: "abc",
+                            int_field: false,
+                        },
+                        { id: 5, foo: "blop", int_field: -4 },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char", searchable: true },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+            },
+        };
+
+        setupViewRegistries();
+    });
+
+    QUnit.test("display a simple field", async function (assert) {
+        class Parent extends Component {}
+        Parent.components = { Record, Field };
+        Parent.template = xml`
+            <Record resModel="'partner'" resId="1" fieldNames="['foo']" t-slot-scope="data">
+                <span>hello</span>
+                <Field name="'foo'" record="data.record"/>
+            </Record>`;
+        const env = await makeTestEnv({
+            serverData,
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+        await mount(Parent, target, { env });
+        assert.strictEqual(
+            target.innerHTML,
+            '<span>hello</span><div name="foo" class="o_field_widget o_field_char"><span>yop</span></div>'
+        );
+        assert.verifySteps([
+            "/web/dataset/call_kw/partner/fields_get",
+            "/web/dataset/call_kw/partner/read",
+        ]);
+    });
+
+    QUnit.test("can be updated with different resId", async function (assert) {
+        class Parent extends Component {
+            setup() {
+                this.state = useState({
+                    resId: 1,
+                });
+            }
+        }
+        Parent.components = { Record, Field };
+        Parent.template = xml`
+            <Record resModel="'partner'" resId="state.resId" fieldNames="['foo']" t-slot-scope="data">
+                <Field name="'foo'" record="data.record"/>
+                <button t-on-click="() => this.state.resId++">Next</button>
+            </Record>`;
+        const env = await makeTestEnv({
+            serverData,
+            mockRPC(route) {
+                assert.step(route);
+            },
+        });
+        await mount(Parent, target, { env, dev: true });
+        assert.verifySteps([
+            "/web/dataset/call_kw/partner/fields_get",
+            "/web/dataset/call_kw/partner/read",
+        ]);
+        assert.containsOnce(target, ".o_field_char:contains(yop)");
+        await click(target.querySelector("button"));
+        assert.containsOnce(target, ".o_field_char:contains(blip)");
+        assert.verifySteps(["/web/dataset/call_kw/partner/read"]);
+    });
+
+    QUnit.test("predefined fields and values", async function (assert) {
+        class Parent extends Component {
+            setup() {
+                this.fields = {
+                    foo: {
+                        name: "foo",
+                        type: "char",
+                    },
+                    bar: {
+                        name: "bar",
+                        type: "boolean",
+                    },
+                };
+                this.values = {
+                    foo: "abc",
+                    bar: true,
+                };
+            }
+        }
+        Parent.components = { Record, Field };
+        Parent.template = xml`
+            <Record resModel="'partner'" fieldNames="['foo']" fields="fields" initialValues="values" t-slot-scope="data">
+                <Field name="'foo'" record="data.record"/>
+            </Record>
+        `;
+
+        await mount(Parent, target, {
+            env: await makeTestEnv({
+                serverData,
+                mockRPC(route) {
+                    assert.step(route);
+                },
+            }),
+        });
+        assert.verifySteps([]);
+        assert.strictEqual(target.querySelector(".o_field_widget input").value, "abc");
+    });
+});
diff --git a/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js b/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
new file mode 100644
index 00000000000..68a3c459c9b
--- /dev/null
+++ b/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
@@ -0,0 +1,684 @@
+/** @odoo-module */
+
+import {
+    click,
+    dragAndDrop,
+    editInput,
+    editSelect,
+    getFixture,
+    getNodesTextContent,
+    mockDownload,
+    nextTick,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
+import { makeView } from "@web/../tests/views/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+import { makeFakeUserService } from "../../helpers/mock_services";
+
+const serviceRegistry = registry.category("services");
+
+QUnit.module("ViewDialogs", (hooks) => {
+    let serverData;
+    let target;
+    let fetchedFields;
+
+    const openExportDataDialog = async () => {
+        await click(target.querySelector(".o_list_record_selector input[type='checkbox'"));
+        await click(target.querySelector(".o_control_panel .o_cp_action_menus .dropdown-toggle"));
+        await click(
+            target.querySelector(
+                ".o_control_panel .o_cp_action_menus .dropdown-menu span:first-child"
+            )
+        );
+        await nextTick();
+    };
+
+    hooks.beforeEach(async () => {
+        target = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        instrument: {
+                            string: "Instruments",
+                            type: "many2one",
+                            relation: "instrument",
+                        },
+                    },
+                    records: [
+                        { id: 1, foo: "blip", display_name: "blipblip", bar: true },
+                        { id: 2, foo: "ta tata ta ta", display_name: "macgyver", bar: false },
+                        { id: 3, foo: "piou piou", display_name: "Jack O'Neill", bar: true },
+                    ],
+                },
+                instrument: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        badassery: {
+                            string: "level",
+                            type: "many2many",
+                            relation: "badassery",
+                            domain: [["level", "=", "Awsome"]],
+                        },
+                    },
+                },
+
+                badassery: {
+                    fields: {
+                        level: { string: "level", type: "char" },
+                    },
+                    records: [{ id: 1, level: "Awsome" }],
+                },
+
+                product: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        partner: { string: "Doors", type: "one2many", relation: "partner" },
+                    },
+                    records: [{ id: 1, name: "The end" }],
+                },
+                "ir.exports": {
+                    fields: {
+                        name: { string: "Name", type: "char" },
+                        export_fields: {
+                            string: "Templates fields",
+                            type: "one2many",
+                            relation: "partner",
+                        },
+                    },
+                    records: [],
+                },
+            },
+        };
+        target = getFixture();
+        setupControlPanelServiceRegistry();
+
+        function hasGroup(group) {
+            return group === "base.group_allow_export";
+        }
+        serviceRegistry.add("user", makeFakeUserService(hasGroup), { force: true });
+        serviceRegistry.add("dialog", dialogService);
+
+        fetchedFields = {
+            root: [
+                {
+                    field_type: "one2many",
+                    string: "Activities",
+                    required: false,
+                    value: "activity_ids/id",
+                    id: "activity_ids",
+                    params: {
+                        model: "mail.activity",
+                        prefix: "activity_ids",
+                        name: "Activities",
+                    },
+                    relation_field: "res_id",
+                    children: true,
+                },
+                {
+                    children: false,
+                    field_type: "char",
+                    id: "foo",
+                    relation_field: null,
+                    required: false,
+                    string: "Foo",
+                    value: "foo",
+                },
+                {
+                    children: false,
+                    field_type: "char",
+                    id: "bar",
+                    relation_field: null,
+                    required: false,
+                    string: "Bar",
+                    value: "bar",
+                },
+            ],
+            activity_ids: [
+                {
+                    field_type: "one2many",
+                    string: "Attendants",
+                    required: false,
+                    value: "activity_ids/id",
+                    id: "activity_ids/partner_ids",
+                    params: {
+                        model: "mail.activity",
+                        prefix: "partner_ids",
+                        name: "Company",
+                    },
+                    children: true,
+                },
+                {
+                    field_type: "one2many",
+                    string: "Activity types",
+                    required: false,
+                    value: "activity_ids/id",
+                    id: "activity_ids/types",
+                    params: {
+                        model: "mail.activity",
+                        prefix: "activity_types",
+                        name: "Activity types",
+                    },
+                    children: true,
+                },
+            ],
+            partner_ids: [
+                {
+                    children: false,
+                    field_type: "many2one",
+                    id: "activity_ids/partner_ids/company_ids",
+                    relation_field: null,
+                    string: "Company",
+                    value: "company_ids",
+                },
+                {
+                    children: false,
+                    field_type: "char",
+                    id: "activity_ids/partner_ids/name",
+                    relation_field: null,
+                    string: "Partner name",
+                    value: "partner_name",
+                },
+            ],
+        };
+    });
+
+    QUnit.module("ExportDataDialog");
+
+    QUnit.test("Export dialog UI test", async function (assert) {
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: '<tree><field name="foo"/></tree>',
+            actionMenus: {},
+            mockRPC(route) {
+                if (route === "/web/export/formats") {
+                    return Promise.resolve([
+                        { tag: "csv", label: "CSV" },
+                        { tag: "xls", label: "Excel" },
+                    ]);
+                }
+                if (route === "/web/export/get_fields") {
+                    return Promise.resolve(fetchedFields.root);
+                }
+            },
+        });
+
+        await openExportDataDialog();
+
+        assert.containsOnce(target, ".o_dialog", "the export dialog should be visible");
+        assert.containsN(
+            target,
+            ".o_dialog .o_export_tree_item",
+            3,
+            "There should be only three items visible"
+        );
+        await editInput(target.querySelector(".modal .o_export_search_input"), null, "ac");
+        assert.containsOnce(target, ".modal .o_export_tree_item", "Only match item visible");
+        // Add field
+        await click(target.querySelector(".modal .o_export_tree_item .o_add_field"));
+        assert.containsN(
+            target,
+            ".modal .o_export_field",
+            2,
+            "There should be two fields in export field list."
+        );
+        assert.strictEqual(
+            target.querySelector(".modal .o_export_field:nth-child(2)").textContent,
+            "Activities",
+            "string of second field in export list should be 'Activities'"
+        );
+        // Remove field
+        await click(target, ".modal .o_export_field:first-child .o_remove_field");
+        assert.containsOnce(
+            target,
+            ".modal .o_export_field",
+            "There should be only one field in list"
+        );
+    });
+
+    QUnit.test("Export dialog: interacting with export templates", async function (assert) {
+        assert.expect(22);
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `
+                <tree export_xlsx="1"><field name="foo"/></tree>`,
+            actionMenus: {},
+            mockRPC(route, args) {
+                if (args.method === "create") {
+                    assert.strictEqual(args.model, "ir.exports");
+                    assert.strictEqual(
+                        args.args[0].name,
+                        "Export template",
+                        "the template name is correctly sent"
+                    );
+                    return 2;
+                }
+                if (route === "/web/dataset/call_kw") {
+                    return Promise.resolve([{ id: 1, name: "Activities template" }]);
+                }
+                if (route === "/web/export/namelist") {
+                    if (args.export_id === 1) {
+                        return Promise.resolve([{ name: "activity_ids", label: "Activities" }]);
+                    }
+                    return Promise.resolve([]);
+                }
+                if (route === "/web/export/formats") {
+                    return Promise.resolve([
+                        { tag: "csv", label: "CSV" },
+                        { tag: "xls", label: "Excel" },
+                    ]);
+                }
+                if (route === "/web/export/get_fields") {
+                    return Promise.resolve([
+                        ...fetchedFields.root,
+                        {
+                            children: false,
+                            field_type: "string",
+                            id: "third_field",
+                            relation_field: null,
+                            required: false,
+                            string: "Third field selected",
+                            value: "third_field",
+                        },
+                    ]);
+                }
+            },
+        });
+
+        await openExportDataDialog();
+
+        assert.containsOnce(target, ".o_dialog", "the export dialog should be visible");
+        assert.hasClass(
+            target.querySelector(".o_export_tree_item:nth-child(2) .o_add_field"),
+            "o_inactive",
+            "fields already selected cannot be added anymore"
+        );
+        // load a template which contains the activity_ids field
+        await editSelect(target, ".o_exported_lists_select", "1");
+        assert.containsOnce(
+            target,
+            ".o_fields_list .o_export_field",
+            "only one field is present for the selected template"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_fields_list .o_export_field").textContent,
+            "Activities"
+        );
+
+        // add a new field to the exported fields list allow the edition of the template
+        await click(target.querySelector(".o_export_tree_item:nth-child(2) .o_add_field"));
+        assert.containsOnce(
+            target,
+            ".o_exported_lists_select",
+            "the template list is still visible"
+        );
+        assert.containsNone(target, ".o_save_list_btn", "save button is not visible");
+        assert.containsOnce(target, ".o_cancel_list_btn .fa-undo", "undo button is visible");
+        assert.containsN(
+            target,
+            ".o_fields_list .o_export_field",
+            2,
+            "the list contains two fields"
+        );
+
+        await click(target.querySelector(".o_cancel_list_btn"));
+        assert.containsOnce(
+            target,
+            ".o_fields_list .o_export_field",
+            "the template has been reset and the added field is no longer in the list"
+        );
+
+        await click(target.querySelector(".o_export_tree_item:nth-child(2) .o_add_field"));
+        await editSelect(target, ".o_exported_lists_select", "new_template");
+        assert.containsNone(target, ".o_exported_lists_select", "the template list is now hidden");
+        assert.containsOnce(
+            target,
+            "input.o_save_list_name",
+            "an input is present to edit the current template"
+        );
+
+        await click(target.querySelector(".o_save_list_btn"));
+        assert.strictEqual(
+            target.querySelector(".o_notification").textContent,
+            "Please enter save field list name",
+            "should display a notification if the template list has no name"
+        );
+
+        await editInput(target, ".o_save_list_name", "Export template");
+        await click(target.querySelector(".o_cancel_list_btn"));
+        assert.containsOnce(target, ".o_exported_lists_select", "the template list is now visible");
+
+        await click(target.querySelector(".o_export_tree_item:nth-child(3) .o_add_field"));
+        assert.containsN(
+            target,
+            ".o_fields_list .o_export_field",
+            3,
+            "three fields are present in the exported fields list"
+        );
+        await editSelect(target, ".o_exported_lists_select", "new_template");
+        await editInput(target, ".o_save_list_name", "Export template");
+        await click(target.querySelector(".o_save_list_btn"));
+
+        assert.strictEqual(
+            target.querySelector(".o_exported_lists_select").selectedOptions[0].textContent,
+            "Export template",
+            "the new template is now selected"
+        );
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Activities", "Foo", "Bar"]
+        );
+
+        await click(target, ".o_delete_exported_list");
+        assert.strictEqual(
+            document.querySelectorAll(".o_dialog .modal-body")[1].textContent,
+            "Do you really want to delete this export template?"
+        );
+        assert.containsN(
+            document.body,
+            ".o_dialog",
+            2,
+            "a confirmation dialog has appeared on top"
+        );
+
+        await click(document.body, ".o_dialog:nth-child(2) .btn-primary");
+        assert.strictEqual(
+            target.querySelector(".o_exported_lists_select").selectedOptions[0].textContent,
+            "",
+            "the template list has been resetted"
+        );
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Foo"]
+        );
+    });
+
+    QUnit.test("Export dialog: interacting with available fields", async function (assert) {
+        assert.expect(9);
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `
+                <tree export_xlsx="1"><field name="foo"/></tree>`,
+            actionMenus: {},
+            mockRPC(route, args) {
+                if (route === "/web/export/formats") {
+                    return Promise.resolve([
+                        { tag: "csv", label: "CSV" },
+                        { tag: "xls", label: "Excel" },
+                    ]);
+                }
+                if (route === "/web/export/get_fields") {
+                    if (!args.parent_field) {
+                        return Promise.resolve(fetchedFields.root);
+                    }
+                    if (args.prefix === "partner_ids") {
+                        assert.step("fetch fields for 'partner_ids'");
+                    }
+                    return Promise.resolve(fetchedFields[args.prefix]);
+                }
+            },
+        });
+
+        await openExportDataDialog();
+
+        const firstField = target.querySelector(
+            ".o_left_field_panel .o_export_tree_item:first-child"
+        );
+        await click(firstField);
+
+        // show then hide content for the 'partner_ids' field. Then show it again
+        await click(firstField.querySelector(".o_export_tree_item"));
+        await click(firstField.querySelector(".o_export_tree_item"));
+        await click(firstField.querySelector(".o_export_tree_item"));
+        assert.verifySteps(
+            ["fetch fields for 'partner_ids'"],
+            "we should only make one rpc to fetch fields"
+        );
+
+        assert.containsNone(
+            firstField.querySelector(
+                ".o_export_tree_item[data-field_id='activity_ids/partner_ids/company_ids']",
+                ".o_expand_parent",
+                "available fields are limited to 2 levels of subfields"
+            )
+        );
+
+        await triggerEvent(
+            target,
+            ".o_export_tree_item[data-field_id='activity_ids/partner_ids/company_ids']",
+            "dblclick"
+        );
+        assert.hasClass(
+            firstField.querySelector(
+                ".o_export_tree_item[data-field_id='activity_ids/partner_ids/company_ids'] .o_add_field"
+            ),
+            "o_inactive",
+            "field has been added by double clicking on it and cannot be added anymore"
+        );
+
+        await click(firstField.querySelector(".o_add_field"));
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Foo", "Company", "Activities"]
+        );
+        await triggerEvent(target, ".o_export_tree_item[data-field_id='activity_ids']", "dblclick");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Foo", "Company", "Activities"],
+            "double clicking on an expandable field does not add the field"
+        );
+
+        await dragAndDrop(".o_export_field:first-child", ".o_export_field:nth-child(2)");
+        await dragAndDrop(".o_export_field:nth-child(3)", ".o_export_field:first-child");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Activities", "Company", "Foo"]
+        );
+
+        await click(target.querySelector(".o_export_field:nth-child(2) .o_remove_field"));
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Activities", "Foo"]
+        );
+
+        await click(
+            firstField.querySelector(
+                ".o_export_tree_item[data-field_id='activity_ids/partner_ids/name'] .o_add_field"
+            )
+        );
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_right_field_panel .o_export_field")),
+            ["Activities", "Foo", "Partner name"]
+        );
+    });
+
+    QUnit.test("Export dialog: compatible and export type options", async function (assert) {
+        assert.expect(5);
+
+        mockDownload(({ url, data }) => {
+            assert.strictEqual(url, "/web/export/wow", "should call get_file with the correct url");
+            assert.ok(
+                JSON.parse(data.data)["import_compat"],
+                "request to generate the file must have 'import_compat' as true"
+            );
+            return Promise.resolve();
+        });
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `
+                <tree export_xlsx="1"><field name="foo"/></tree>`,
+            actionMenus: {},
+            mockRPC(route, args) {
+                if (route === "/web/export/formats") {
+                    return Promise.resolve([
+                        { tag: "csv", label: "CSV" },
+                        { tag: "xls", label: "Excel" },
+                        { tag: "wow", label: "WOW" },
+                    ]);
+                }
+                if (route === "/web/export/get_fields") {
+                    if (!args.parent_field) {
+                        return Promise.resolve(fetchedFields.root);
+                    }
+                    if (args.prefix === "partner_ids") {
+                        assert.step("fetch fields for 'partner_ids'");
+                    }
+                    return Promise.resolve(fetchedFields[args.prefix]);
+                }
+            },
+        });
+
+        await openExportDataDialog();
+
+        assert.containsN(
+            target,
+            "input[name='o_export_format_name']",
+            3,
+            "three inputs are available to choose the format"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("input[name='o_export_format_name']")[2].value,
+            "wow",
+            "the third input has the right value"
+        );
+        assert.strictEqual(
+            target.querySelectorAll("input[name='o_export_format_name']")[2].labels[0].textContent,
+            "WOW",
+            "the third input has the right label"
+        );
+
+        await click(target.querySelectorAll("input[name='o_export_format_name']")[2]);
+        await click(target, ".o_import_compat input");
+        await click(target, ".o_select_button");
+    });
+
+    QUnit.test("Direct export list", async function (assert) {
+        assert.expect(2);
+
+        mockDownload(({ url, data }) => {
+            assert.strictEqual(
+                url,
+                "/web/export/xlsx",
+                "should call get_file with the correct url"
+            );
+            assert.deepEqual(
+                JSON.parse(data.data),
+                {
+                    context: { lang: "en", uid: 7, tz: "taht" },
+                    model: "partner",
+                    domain: [["bar", "!=", "glou"]],
+                    groupby: [],
+                    ids: false,
+                    import_compat: false,
+                    fields: [
+                        {
+                            name: "foo",
+                            label: "Foo",
+                            type: "char",
+                        },
+                        {
+                            name: "bar",
+                            label: "Bar",
+                            type: "char",
+                        },
+                    ],
+                },
+                "should be called with correct params"
+            );
+            return Promise.resolve();
+        });
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            actionMenus: {},
+            arch: `
+                <tree export_xlsx="1">
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>`,
+            domain: [["bar", "!=", "glou"]],
+            mockRPC(route) {
+                if (route === "/web/export/get_fields") {
+                    return Promise.resolve(fetchedFields.root);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_list_export_xlsx"));
+    });
+
+    QUnit.test("Direct export grouped list ", async function (assert) {
+        assert.expect(2);
+
+        mockDownload(({ url, data }) => {
+            assert.strictEqual(
+                url,
+                "/web/export/xlsx",
+                "should call get_file with the correct url"
+            );
+            assert.deepEqual(
+                JSON.parse(data.data),
+                {
+                    context: { lang: "en", uid: 7, tz: "taht" },
+                    model: "partner",
+                    domain: [["bar", "!=", "glou"]],
+                    groupby: ["foo", "bar"],
+                    ids: false,
+                    import_compat: false,
+                    fields: [
+                        {
+                            name: "foo",
+                            label: "Foo",
+                            type: "char",
+                        },
+                        {
+                            name: "bar",
+                            label: "Bar",
+                            type: "char",
+                        },
+                    ],
+                },
+                "should be called with correct params"
+            );
+            return Promise.resolve();
+        });
+
+        await makeView({
+            serverData,
+            type: "list",
+            resModel: "partner",
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </tree>`,
+            groupBy: ["foo", "bar"],
+            domain: [["bar", "!=", "glou"]],
+            mockRPC(route) {
+                if (route === "/web/export/get_fields") {
+                    return Promise.resolve(fetchedFields.root);
+                }
+            },
+        });
+
+        await click(target.querySelector(".o_list_export_xlsx"));
+    });
+});
diff --git a/addons/web/static/tests/views/view_dialogs/form_view_dialog_tests.js b/addons/web/static/tests/views/view_dialogs/form_view_dialog_tests.js
new file mode 100644
index 00000000000..3233f922a67
--- /dev/null
+++ b/addons/web/static/tests/views/view_dialogs/form_view_dialog_tests.js
@@ -0,0 +1,286 @@
+/** @odoo-module */
+
+import { click, getFixture, nextTick, triggerHotkey } from "@web/../tests/helpers/utils";
+import { makeView } from "@web/../tests/views/helpers";
+import { createWebClient } from "@web/../tests/webclient/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+
+const serviceRegistry = registry.category("services");
+
+QUnit.module("ViewDialogs", (hooks) => {
+    let serverData;
+    let target;
+
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        instrument: {
+                            string: "Instruments",
+                            type: "many2one",
+                            relation: "instrument",
+                        },
+                    },
+                    records: [
+                        { id: 1, foo: "blip", display_name: "blipblip", bar: true },
+                        { id: 2, foo: "ta tata ta ta", display_name: "macgyver", bar: false },
+                        { id: 3, foo: "piou piou", display_name: "Jack O'Neill", bar: true },
+                    ],
+                },
+                instrument: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        badassery: {
+                            string: "level",
+                            type: "many2many",
+                            relation: "badassery",
+                            domain: [["level", "=", "Awsome"]],
+                        },
+                    },
+                },
+
+                badassery: {
+                    fields: {
+                        level: { string: "level", type: "char" },
+                    },
+                    records: [{ id: 1, level: "Awsome" }],
+                },
+
+                product: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        partner: { string: "Doors", type: "one2many", relation: "partner" },
+                    },
+                    records: [{ id: 1, name: "The end" }],
+                },
+            },
+        };
+        target = getFixture();
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+    });
+
+    QUnit.module("FormViewDialog");
+
+    QUnit.test("formviewdialog buttons in footer are positioned properly", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                    <form string="Partner">
+                        <sheet>
+                            <group>
+                                <field name="foo"/>
+                            </group>
+                            <footer>
+                                <button string="Custom Button" type="object" class="btn-primary"/>
+                            </footer>
+                        </sheet>
+                    </form>
+                `,
+        };
+        const webClient = await createWebClient({ serverData });
+        webClient.env.services.dialog.add(FormViewDialog, {
+            resModel: "partner",
+            resId: 1,
+        });
+
+        await nextTick();
+
+        assert.containsNone(target, ".modal-body button", "should not have any button in body");
+        assert.containsOnce(
+            target,
+            ".modal-footer button:not(.d-none)",
+            "should have only one button in footer"
+        );
+    });
+
+    QUnit.test("modifiers are considered on multiple <footer/> tags", async function (assert) {
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="bar"/>
+                    <footer attrs="{'invisible': [('bar','=',False)]}">
+                        <button>Hello</button>
+                        <button>World</button>
+                    </footer>
+                    <footer attrs="{'invisible': [('bar','!=',False)]}">
+                        <button>Foo</button>
+                    </footer>
+                </form>`,
+        };
+        const webClient = await createWebClient({ serverData });
+        webClient.env.services.dialog.add(FormViewDialog, {
+            resModel: "partner",
+            resId: 1,
+        });
+
+        await nextTick();
+
+        assert.deepEqual(
+            getVisibleButtonTexts(),
+            ["Hello", "World"],
+            "only the first button section should be visible"
+        );
+
+        await click(target.querySelector(".o_field_boolean input"));
+
+        assert.deepEqual(
+            getVisibleButtonTexts(),
+            ["Foo"],
+            "only the second button section should be visible"
+        );
+
+        function getVisibleButtonTexts() {
+            return [...target.querySelectorAll(".modal-footer button:not(.d-none)")].map((x) =>
+                x.innerHTML.trim()
+            );
+        }
+    });
+
+    QUnit.test("formviewdialog buttons in footer are not duplicated", async function (assert) {
+        serverData.models.partner.fields.poney_ids = {
+            string: "Poneys",
+            type: "one2many",
+            relation: "partner",
+        };
+        serverData.models.partner.records[0].poney_ids = [];
+        serverData.views = {
+            "partner,false,form": `
+                    <form string="Partner">
+                        <field name="poney_ids"><tree editable="top"><field name="display_name"/></tree></field>
+                        <footer><button string="Custom Button" type="object" class="my_button"/></footer>
+                    </form>
+                `,
+        };
+        const webClient = await createWebClient({ serverData });
+
+        webClient.env.services.dialog.add(FormViewDialog, {
+            resModel: "partner",
+            resId: 1,
+        });
+        await nextTick();
+
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(target, ".modal button.my_button", "should have 1 buttons in modal");
+
+        await click(target, ".o_field_x2many_list_row_add a");
+        triggerHotkey("escape");
+        await nextTick();
+
+        assert.containsOnce(target, ".modal");
+        assert.containsOnce(
+            target,
+            ".modal button.btn-primary",
+            "should still have 1 buttons in modal"
+        );
+    });
+
+    QUnit.test("Form dialog and subview with _view_ref contexts", async function (assert) {
+        assert.expect(2);
+
+        serverData.models.instrument.records = [{ id: 1, name: "Tromblon", badassery: [1] }];
+        serverData.models.partner.records[0].instrument = 1;
+        // This is an old test, written before "get_views" (formerly "load_views") automatically
+        // inlines x2many subviews. As the purpose of this test is to assert that the js fetches
+        // the correct sub view when it is not inline (which can still happen in nested form views),
+        // we bypass the inline mecanism of "get_views" by setting widget="many2many" on the field.
+        serverData.views = {
+            "instrument,false,form": `
+                        <form>
+                            <field name="name"/>
+                            <field name="badassery" widget="many2many" context="{'tree_view_ref': 'some_other_tree_view'}"/>
+                        </form>`,
+            "badassery,false,list": `
+                        <tree>
+                            <field name="level"/>
+                        </tree>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `<form>
+                    <field name="name"/>
+                    <field name="instrument" context="{'tree_view_ref': 'some_tree_view'}"/>
+                   </form>`,
+            mockRPC: function (route, args) {
+                if (args.method === "get_formview_id") {
+                    return Promise.resolve(false);
+                }
+                if (args.method === "get_views" && args.model === "instrument") {
+                    assert.deepEqual(
+                        args.kwargs.context,
+                        {
+                            lang: "en",
+                            tree_view_ref: "some_tree_view",
+                            tz: "taht",
+                            uid: 7,
+                        },
+                        "1 The correct _view_ref should have been sent to the server, first time"
+                    );
+                }
+                if (args.method === "get_views" && args.model === "badassery") {
+                    assert.deepEqual(
+                        args.kwargs.context,
+                        {
+                            base_model_name: "instrument",
+                            lang: "en",
+                            tree_view_ref: "some_other_tree_view",
+                            tz: "taht",
+                            uid: 7,
+                        },
+                        "2 The correct _view_ref should have been sent to the server for the subview"
+                    );
+                }
+            },
+        });
+        await click(target, ".o_form_button_edit");
+        await click(target, '.o_field_widget[name="instrument"] button.o_external_button');
+    });
+
+    QUnit.test(
+        "formviewdialog is not closed when button handlers return a rejected promise",
+        async function (assert) {
+            serverData.views = {
+                "partner,false,form": `
+                        <form string="Partner">
+                            <sheet>
+                                <group><field name="foo"/></group>
+                            </sheet>
+                        </form>
+                `,
+            };
+            let reject = true;
+            function mockRPC(route, args) {
+                if (args.method === "create" && reject) {
+                    return Promise.reject();
+                }
+            }
+            const webClient = await createWebClient({ serverData, mockRPC });
+            webClient.env.services.dialog.add(FormViewDialog, {
+                resModel: "partner",
+                context: { answer: 42 },
+            });
+
+            await nextTick();
+
+            assert.containsNone(target, ".modal-body button", "should not have any button in body");
+            assert.containsN(target, ".modal-footer button", 3, "should have 3 buttons in footer");
+
+            await click(target, ".modal .o_form_button_save");
+            assert.containsOnce(target, ".modal", "modal should still be opened");
+
+            reject = false;
+            await click(target, ".modal .o_form_button_save");
+            assert.containsNone(target, ".modal", "modal should be closed");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/view_dialogs/select_create_dialog_tests.js b/addons/web/static/tests/views/view_dialogs/select_create_dialog_tests.js
new file mode 100644
index 00000000000..2070dc69e03
--- /dev/null
+++ b/addons/web/static/tests/views/view_dialogs/select_create_dialog_tests.js
@@ -0,0 +1,477 @@
+/** @odoo-module */
+
+import {
+    click,
+    getFixture,
+    nextTick,
+    editInput,
+    selectDropdownItem,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { createWebClient } from "@web/../tests/webclient/helpers";
+import { browser } from "@web/core/browser/browser";
+import { session } from "@web/session";
+import { useSetupAction } from "@web/webclient/actions/action_hook";
+import { listView } from "@web/views/list/list_view";
+import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
+import {
+    editFavoriteName,
+    removeFacet,
+    saveFavorite,
+    toggleFavoriteMenu,
+    toggleFilterMenu,
+    toggleMenuItem,
+    toggleSaveFavorite,
+} from "@web/../tests/search/helpers";
+
+QUnit.module("ViewDialogs", (hooks) => {
+    let serverData;
+    let target;
+
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        instrument: {
+                            string: "Instruments",
+                            type: "many2one",
+                            relation: "instrument",
+                        },
+                    },
+                    records: [
+                        { id: 1, foo: "blip", display_name: "blipblip", bar: true },
+                        { id: 2, foo: "ta tata ta ta", display_name: "macgyver", bar: false },
+                        { id: 3, foo: "piou piou", display_name: "Jack O'Neill", bar: true },
+                    ],
+                },
+                instrument: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        badassery: {
+                            string: "level",
+                            type: "many2many",
+                            relation: "badassery",
+                            domain: [["level", "=", "Awsome"]],
+                        },
+                    },
+                },
+
+                badassery: {
+                    fields: {
+                        level: { string: "level", type: "char" },
+                    },
+                    records: [{ id: 1, level: "Awsome" }],
+                },
+
+                product: {
+                    fields: {
+                        name: { string: "name", type: "char" },
+                        partner: { string: "Doors", type: "one2many", relation: "partner" },
+                    },
+                    records: [{ id: 1, name: "The end" }],
+                },
+            },
+        };
+        target = getFixture();
+        setupViewRegistries();
+    });
+
+    QUnit.module("SelectCreateDialog");
+
+    QUnit.test(
+        "SelectCreateDialog use domain, group_by and search default",
+        async function (assert) {
+            assert.expect(3);
+
+            serverData.views = {
+                "partner,false,list": `
+                    <tree string="Partner">
+                        <field name="display_name"/>
+                        <field name="foo"/>
+                    </tree>
+                    `,
+                "partner,false,search": `
+                    <search>
+                        <field name="foo" filter_domain="[('display_name','ilike',self), ('foo','ilike',self)]"/>
+                        <group expand="0" string="Group By">
+                            <filter name="groupby_bar" context="{'group_by' : 'bar'}"/>
+                        </group>
+                    </search>
+                    `,
+            };
+            let search = 0;
+            const mockRPC = async (route, args) => {
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(
+                        args.kwargs,
+                        {
+                            context: {
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            domain: [
+                                "&",
+                                ["display_name", "like", "a"],
+                                "&",
+                                ["display_name", "ilike", "piou"],
+                                ["foo", "ilike", "piou"],
+                            ],
+                            fields: ["display_name", "foo", "bar"],
+                            groupby: ["bar"],
+                            orderby: "",
+                            expand: false,
+                            lazy: true,
+                            limit: 80,
+                            offset: 0,
+                        },
+                        "should search with the complete domain (domain + search), and group by 'bar'"
+                    );
+                } else if (args.method === "web_search_read") {
+                    if (search === 0) {
+                        assert.deepEqual(
+                            args.kwargs,
+                            {
+                                context: {
+                                    bin_size: true,
+                                    lang: "en",
+                                    tz: "taht",
+                                    uid: 7,
+                                }, // not part of the test, may change
+                                domain: [
+                                    "&",
+                                    ["display_name", "like", "a"],
+                                    "&",
+                                    ["display_name", "ilike", "piou"],
+                                    ["foo", "ilike", "piou"],
+                                ],
+                                fields: ["display_name", "foo"],
+                                limit: 80,
+                                offset: 0,
+                                order: "",
+                            },
+                            "should search with the complete domain (domain + search)"
+                        );
+                    } else if (search === 1) {
+                        assert.deepEqual(
+                            args.kwargs,
+                            {
+                                context: {
+                                    bin_size: true,
+                                    lang: "en",
+                                    tz: "taht",
+                                    uid: 7,
+                                }, // not part of the test, may change
+                                domain: [["display_name", "like", "a"]],
+                                fields: ["display_name", "foo"],
+                                limit: 80,
+                                offset: 0,
+                                order: "",
+                            },
+                            "should search with the domain"
+                        );
+                    }
+                    search++;
+                }
+            };
+            const webClient = await createWebClient({ serverData, mockRPC });
+            webClient.env.services.dialog.add(SelectCreateDialog, {
+                noCreate: true,
+                resModel: "partner",
+                domain: [["display_name", "like", "a"]],
+                context: {
+                    search_default_groupby_bar: true,
+                    search_default_foo: "piou",
+                },
+            });
+            await nextTick();
+            await removeFacet(target.querySelector(".modal"), "Bar");
+            await removeFacet(target.querySelector(".modal"));
+        }
+    );
+
+    QUnit.test("SelectCreateDialog correctly evaluates domains", async function (assert) {
+        assert.expect(1);
+
+        serverData.views = {
+            "partner,false,list": `
+                    <tree string="Partner">
+                        <field name="display_name"/>
+                        <field name="foo"/>
+                    </tree>
+                `,
+            "partner,false,search": `
+                    <search>
+                        <field name="foo"/>
+                    </search>
+                `,
+        };
+        const mockRPC = async (route, args) => {
+            if (args.method === "web_search_read") {
+                assert.deepEqual(
+                    args.kwargs.domain,
+                    [["id", "=", 2]],
+                    "should have correctly evaluated the domain"
+                );
+            }
+        };
+        patchWithCleanup(session.user_context, { uid: 2 });
+        const webClient = await createWebClient({ serverData, mockRPC });
+        webClient.env.services.dialog.add(SelectCreateDialog, {
+            noCreate: true,
+            readonly: true, //Not used
+            resModel: "partner",
+            domain: [["id", "=", session.user_context.uid]],
+        });
+        await nextTick();
+    });
+
+    QUnit.test("SelectCreateDialog list view in readonly", async function (assert) {
+        serverData.views = {
+            "partner,false,list": `
+                    <tree string="Partner" editable="bottom">
+                        <field name="display_name"/>
+                        <field name="foo"/>
+                    </tree>
+                `,
+            "partner,false,search": `
+                    <search/>
+                `,
+        };
+        const webClient = await createWebClient({ serverData });
+        webClient.env.services.dialog.add(SelectCreateDialog, {
+            resModel: "partner",
+        });
+
+        await nextTick();
+
+        // click on the first row to see if the list is editable
+        target.querySelectorAll(".o_list_view tbody tr td")[1].click();
+        await nextTick();
+        assert.equal(
+            target.querySelectorAll(".o_list_view tbody tr td .o_field_char input").length,
+            0,
+            "list view should not be editable in a SelectCreateDialog"
+        );
+    });
+
+    QUnit.test("SelectCreateDialog cascade x2many in create mode", async function (assert) {
+        assert.expect(5);
+        serverData.views = {
+            "partner,false,form": `
+                <form>
+                    <field name="name"/>
+                    <field name="instrument" widget="one2many" mode="tree"/>
+                </form>
+            `,
+            "instrument,false,form": `
+                <form>
+                    <field name="name"/>
+                    <field name="badassery">
+                        <tree>
+                            <field name="level"/>
+                        </tree>
+                    </field>
+                </form>
+            `,
+            "badassery,false,list": `<tree><field name="level"/></tree>`,
+            "badassery,false,search": `<search><field name="level"/></search>`,
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "product",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="name"/>
+                    <field name="partner" widget="one2many" >
+                        <tree editable="top">
+                            <field name="display_name"/>
+                            <field name="instrument"/>
+                        </tree>
+                    </field>
+                </form>
+            `,
+            mockRPC: (route, args) => {
+                if (route === "/web/dataset/call_kw/partner/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+                if (route === "/web/dataset/call_kw/instrument/get_formview_id") {
+                    return Promise.resolve(false);
+                }
+                if (route === "/web/dataset/call_kw/instrument/create") {
+                    assert.deepEqual(
+                        args.args,
+                        [{ badassery: [[6, false, [1]]], name: "ABC" }],
+                        "The method create should have been called with the right arguments"
+                    );
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        await click(target, ".o_form_button_edit");
+        await click(target, ".o_field_x2many_list_row_add a");
+
+        await editInput(target, ".o_field_widget[name=instrument] input", "ABC");
+        await selectDropdownItem(target, "instrument", "Create and edit...");
+
+        assert.containsOnce(target, ".modal .modal-lg");
+
+        await click(target.querySelector(".modal .o_field_x2many_list_row_add a"));
+
+        assert.containsN(target, ".modal .modal-lg", 2);
+
+        await click(target.querySelector(".modal .o_data_row input[type=checkbox]"));
+        await nextTick(); // wait for the select button to be enabled
+        await click(target.querySelector(".modal .o_select_button"));
+
+        assert.containsOnce(target, ".modal .modal-lg");
+        assert.strictEqual(target.querySelector(".modal .o_data_cell").innerText, "Awsome");
+
+        await click(target.querySelector(".modal .o_form_button_save"));
+    });
+
+    QUnit.test("SelectCreateDialog: save current search", async function (assert) {
+        assert.expect(4);
+
+        serverData.views = {
+            "partner,false,list": `
+                <tree>
+                    <field name="display_name"/>
+                </tree>
+            `,
+            "partner,false,search": `
+                <search>
+                    <filter name="bar" help="Bar" domain="[('bar', '=', True)]"/>
+                </search>
+            `,
+        };
+
+        patchWithCleanup(listView.Controller.prototype, {
+            setup() {
+                this._super(...arguments);
+                useSetupAction({
+                    getContext: () => ({ shouldBeInFilterContext: true }),
+                });
+            },
+        });
+
+        const mockRPC = (_, args) => {
+            if (args.model === "ir.filters" && args.method === "create_or_replace") {
+                const irFilter = args.args[0];
+                assert.deepEqual(
+                    irFilter.domain,
+                    `[("bar", "=", True)]`,
+                    "should save the correct domain"
+                );
+                const expectedContext = {
+                    group_by: [], // default groupby is an empty list
+                    shouldBeInFilterContext: true,
+                };
+                assert.deepEqual(
+                    irFilter.context,
+                    expectedContext,
+                    "should save the correct context"
+                );
+                return 7; // fake serverSideId
+            }
+        };
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        webClient.env.services.dialog.add(SelectCreateDialog, {
+            context: { shouldNotBeInFilterContext: false },
+            resModel: "partner",
+        });
+        await nextTick();
+
+        assert.containsN(target, ".o_data_row", 3, "should contain 3 records");
+
+        // filter on bar
+        await toggleFilterMenu(target);
+        await toggleMenuItem(target, "Bar");
+
+        assert.containsN(target, ".o_data_row", 2, "should contain 2 records");
+
+        // save filter
+        await toggleFavoriteMenu(target);
+        await toggleSaveFavorite(target);
+        await editFavoriteName(target, "some name");
+        await saveFavorite(target);
+    });
+
+    QUnit.test(
+        "SelectCreateDialog calls on_selected with every record matching the domain",
+        async function (assert) {
+            assert.expect(1);
+            serverData.views = {
+                "partner,false,list": `
+                        <tree limit="2" string="Partner">
+                            <field name="display_name"/>
+                            <field name="foo"/>
+                        </tree>
+                    `,
+                "partner,false,search": `
+                        <search>
+                            <field name="foo"/>
+                        </search>
+                    `,
+            };
+
+            const webClient = await createWebClient({ serverData });
+            webClient.env.services.dialog.add(SelectCreateDialog, {
+                resModel: "partner",
+                onSelected: function (records) {
+                    assert.equal(records.join(","), "1,2,3");
+                },
+            });
+            await nextTick();
+
+            await click(target, "thead .o_list_record_selector input");
+            await click(target, ".o_list_selection_box .o_list_select_domain");
+            await click(target, ".modal .o_select_button");
+        }
+    );
+
+    QUnit.test(
+        "SelectCreateDialog calls on_selected with every record matching without selecting a domain",
+        async function (assert) {
+            assert.expect(1);
+            serverData.views = {
+                "partner,false,list": `
+                        <tree limit="2" string="Partner">
+                            <field name="display_name"/>
+                            <field name="foo"/>
+                        </tree>
+                    `,
+                "partner,false,search": `
+                        <search>
+                            <field name="foo"/>
+                        </search>
+                    `,
+            };
+
+            const webClient = await createWebClient({ serverData });
+            webClient.env.services.dialog.add(SelectCreateDialog, {
+                resModel: "partner",
+                onSelected: function (records) {
+                    assert.equal(records.join(","), "1,2");
+                },
+            });
+
+            await nextTick();
+
+            await click(target, "thead .o_list_record_selector input");
+            await click(target, ".o_list_selection_box");
+            await click(target, ".modal .o_select_button");
+        }
+    );
+});
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
index f57160aede2..9b2c8695e22 100644
--- a/addons/web/static/tests/views/view_tests.js
+++ b/addons/web/static/tests/views/view_tests.js
@@ -9,7 +9,7 @@ import {
     nextTick,
     patchWithCleanup,
 } from "@web/../tests/helpers/utils";
-import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+import { setupViewRegistries } from "@web/../tests/views/helpers";
 import { registry } from "@web/core/registry";
 import { OnboardingBanner } from "@web/views/onboarding_banner";
 import { View } from "@web/views/view";
@@ -95,8 +95,7 @@ QUnit.module("Views", (hooks) => {
         viewRegistry.add("toy", toyView);
         viewRegistry.add("toy_imp", { ...toyView, Controller: ToyControllerImp });
 
-        setupControlPanelServiceRegistry();
-
+        setupViewRegistries();
         const fakeActionService = {
             name: "action",
             start() {
@@ -461,10 +460,8 @@ QUnit.module("Views", (hooks) => {
                 type: "toy",
                 arch: `<toy>Specific arch content</toy>`,
                 fields: {},
-                actionMenus: {
-                    /** ... */
-                },
                 loadActionMenus: true,
+                actionMenus: {},
             };
             await mount(View, target, { env, props });
             assert.containsOnce(target, ".o_toy_view");
diff --git a/addons/web/static/tests/views/widgets/week_days_tests.js b/addons/web/static/tests/views/widgets/week_days_tests.js
new file mode 100644
index 00000000000..94d6534f2b8
--- /dev/null
+++ b/addons/web/static/tests/views/widgets/week_days_tests.js
@@ -0,0 +1,178 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { makeFakeLocalizationService } from "../../helpers/mock_services";
+import { getFixture, click, clickEdit, clickSave } from "../../helpers/utils";
+import { makeView, setupViewRegistries } from "../helpers";
+
+let serverData;
+let fixture;
+
+QUnit.module("Widgets", ({ beforeEach }) => {
+    beforeEach(() => {
+        fixture = getFixture();
+        setupViewRegistries();
+
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        id: { type: "integer", string: "ID" },
+                        sun: { type: "boolean", string: "Sun" },
+                        mon: { type: "boolean", string: "Mon" },
+                        tue: { type: "boolean", string: "Tue" },
+                        wed: { type: "boolean", string: "Wed" },
+                        thu: { type: "boolean", string: "Thu" },
+                        fri: { type: "boolean", string: "Fri" },
+                        sat: { type: "boolean", string: "Sat" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            sun: false,
+                            mon: false,
+                            tue: false,
+                            wed: false,
+                            thu: false,
+                            fri: false,
+                            sat: false,
+                        },
+                    ],
+                },
+            },
+        };
+    });
+
+    QUnit.module("WeekDays");
+
+    QUnit.test("simple week recurrence widget", async (assert) => {
+        assert.expect(14);
+
+        let writeCall = 0;
+        registry.category("services", makeFakeLocalizationService({ weekStart: 1 }));
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <widget name="week_days" />
+                        </group>
+                    </sheet>
+                </form>
+            `,
+            mockRPC(route, { args, method }) {
+                if (method === "write") {
+                    writeCall++;
+                    if (writeCall === 1) {
+                        assert.ok(args[1].sun, "value of sunday should be true");
+                    }
+                    if (writeCall === 2) {
+                        assert.notOk(args[1].sun, "value of sunday should be false");
+                        assert.ok(args[1].mon, "value of monday should be true");
+                        assert.ok(args[1].tue, "value of tuesday should be true");
+                    }
+                }
+            },
+        });
+
+        assert.containsN(
+            fixture,
+            ".custom-control input:disabled",
+            7,
+            "all inputs should be disabled in readonly mode"
+        );
+        const labelsTexts = [...fixture.querySelectorAll(".o_recurrent_weekday_label")].map((el) =>
+            el.innerText.trim()
+        );
+        assert.deepEqual(
+            labelsTexts,
+            ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+            "labels should be short week names"
+        );
+
+        await clickEdit(fixture);
+        assert.containsNone(
+            fixture,
+            ".custom-control input:disabled",
+            "all inputs should be enabled in readonly mode"
+        );
+
+        await click(fixture.querySelector("td:nth-child(7) input"));
+        assert.ok(
+            fixture.querySelector("td:nth-child(7) input").checked,
+            "sunday checkbox should be checked"
+        );
+        await clickSave(fixture);
+
+        await clickEdit(fixture);
+        await click(fixture.querySelector("td:nth-child(1) input"));
+        assert.ok(
+            fixture.querySelector("td:nth-child(1) input").checked,
+            "monday checkbox should be checked"
+        );
+
+        await click(fixture.querySelector("td:nth-child(2) input"));
+        assert.ok(
+            fixture.querySelector("td:nth-child(2) input").checked,
+            "tuesday checkbox should be checked"
+        );
+
+        // uncheck Sunday checkbox and check write call
+        await click(fixture.querySelector("td:nth-child(7) input"));
+        assert.notOk(
+            fixture.querySelector("td:nth-child(7) input").checked,
+            "sunday checkbox should be unchecked"
+        );
+
+        await clickSave(fixture);
+        assert.notOk(
+            fixture.querySelector("td:nth-child(7) input").checked,
+            "sunday checkbox should be unchecked"
+        );
+        assert.ok(
+            fixture.querySelector("td:nth-child(1) input").checked,
+            "monday checkbox should be checked"
+        );
+        assert.ok(
+            fixture.querySelector("td:nth-child(2) input").checked,
+            "tuesday checkbox should be checked"
+        );
+    });
+
+    QUnit.test(
+        "week recurrence widget show week start as per language configuration",
+        async (assert) => {
+            registry.category("services", makeFakeLocalizationService({ weekStart: 5 }));
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <group>
+                                <widget name="week_days" />
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            const labels = [...fixture.querySelectorAll(".o_recurrent_weekday_label")].map((el) =>
+                el.textContent.trim()
+            );
+            assert.deepEqual(
+                labels,
+                ["Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu"],
+                "labels should be short week names"
+            );
+        }
+    );
+});
diff --git a/addons/web/static/tests/webclient/actions/close_action_tests.js b/addons/web/static/tests/webclient/actions/close_action_tests.js
index a852e580d89..4860f4d96fb 100644
--- a/addons/web/static/tests/webclient/actions/close_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/close_action_tests.js
@@ -9,13 +9,9 @@ import {
     patchWithCleanup,
 } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
-import FormController from "web.FormController";
-import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
-import ListController from "web.ListController";
-import { pivotView } from "@web/views/pivot/pivot_view";
-import { registry } from "@web/core/registry";
 
-const serviceRegistry = registry.category("services");
+import { formView } from "@web/views/form/form_view";
+import { listView } from "../../../src/views/list/list_view";
 
 let serverData;
 let target;
@@ -106,11 +102,11 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("history back calls on_close handler of dialog action", async function (assert) {
         assert.expect(4);
-        let controller;
-        patchWithCleanup(FormController.prototype, {
-            init() {
+        let form;
+        patchWithCleanup(formView.Controller.prototype, {
+            setup() {
                 this._super(...arguments);
-                controller = this;
+                form = this;
             },
         });
         const webClient = await createWebClient({ serverData });
@@ -120,7 +116,7 @@ QUnit.module("ActionManager", (hooks) => {
         // open a new dialog form
         await doAction(webClient, 5, { onClose });
         assert.containsOnce(target, ".modal");
-        controller.trigger_up("history_back");
+        form.env.config.historyBack();
         assert.verifySteps(["on_close"], "should have called the on_close handler");
         await nextTick();
         assert.containsNone(target, ".modal");
@@ -128,11 +124,11 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("history back called within on_close", async function (assert) {
         assert.expect(7);
-        let controller;
-        patchWithCleanup(ListController.prototype, {
-            init() {
+        let list;
+        patchWithCleanup(listView.Controller.prototype, {
+            setup() {
                 this._super(...arguments);
-                controller = this;
+                list = this;
             },
         });
         const webClient = await createWebClient({ serverData });
@@ -143,7 +139,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsOnce(target, ".o_list_view");
 
         function onClose() {
-            controller.trigger_up("history_back");
+            list.env.config.historyBack();
             assert.step("on_close");
         }
         // open a new dialog form
@@ -162,11 +158,11 @@ QUnit.module("ActionManager", (hooks) => {
         "history back calls on_close handler of dialog action with 2 breadcrumbs",
         async function (assert) {
             assert.expect(7);
-            let controller;
-            patchWithCleanup(ListController.prototype, {
-                init() {
+            let list;
+            patchWithCleanup(listView.Controller.prototype, {
+                setup() {
                     this._super(...arguments);
-                    controller = this;
+                    list = this;
                 },
             });
             const webClient = await createWebClient({ serverData });
@@ -180,7 +176,7 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 5, { onClose });
             assert.containsOnce(target, ".modal");
             assert.containsOnce(target, ".o_list_view");
-            controller.trigger_up("history_back");
+            list.env.config.historyBack();
             assert.verifySteps(["on_close"], "should have called the on_close handler");
             await nextTick();
             await legacyExtraNextTick();
@@ -189,46 +185,6 @@ QUnit.module("ActionManager", (hooks) => {
         }
     );
 
-    QUnit.test(
-        "history back calls on_close handler of dialog action with 2 breadcrumbs (2)",
-        async function (assert) {
-            assert.expect(7);
-            let pivot;
-            patchWithCleanup(pivotView.Controller.prototype, {
-                setup() {
-                    this._super(...arguments);
-                    pivot = this;
-                },
-            });
-            serverData.views["partner,false,pivot"] = "<pivot/>";
-            serviceRegistry.add("user", makeFakeUserService());
-            const webClient = await createWebClient({ serverData });
-            await doAction(webClient, 1); // kanban
-            await doAction(webClient, {
-                id: 3,
-                xml_id: "action_3",
-                name: "Partners",
-                res_model: "partner",
-                type: "ir.actions.act_window",
-                views: [[false, "pivot"]],
-            }); // pivot
-            assert.containsOnce(target, ".o_pivot_view");
-            function onClose() {
-                assert.step("on_close");
-            }
-            // open a new dialog form
-            await doAction(webClient, 5, { onClose });
-            assert.containsOnce(target, ".modal");
-            assert.containsOnce(target, ".o_pivot_view");
-            pivot.env.config.historyBack();
-            assert.verifySteps(["on_close"], "should have called the on_close handler");
-            await nextTick();
-            await legacyExtraNextTick();
-            assert.containsOnce(target, ".o_pivot_view");
-            assert.containsNone(target, ".modal");
-        }
-    );
-
     QUnit.test("web client is not deadlocked when a view crashes", async function (assert) {
         assert.expect(3);
         const readOnFirstRecordDef = testUtils.makeTestPromise();
@@ -241,13 +197,15 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         // open first record in form view. this will crash and will not
         // display a form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_cell:first"));
         await legacyExtraNextTick();
         readOnFirstRecordDef.reject("not working as intended");
         await nextTick();
         assert.containsOnce(target, ".o_list_view", "there should still be a list view in dom");
         // open another record, the read will not crash
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:eq(2)"));
+        await testUtils.dom.click(
+            $(target).find(".o_list_view .o_data_row:eq(2) .o_data_cell:first")
+        );
         await legacyExtraNextTick();
         assert.containsNone(target, ".o_list_view", "there should not be a list view in dom");
         assert.containsOnce(target, ".o_form_view", "there should be a form view in dom");
diff --git a/addons/web/static/tests/webclient/actions/concurrency_tests.js b/addons/web/static/tests/webclient/actions/concurrency_tests.js
index 2bfb5af3048..21db298a081 100644
--- a/addons/web/static/tests/webclient/actions/concurrency_tests.js
+++ b/addons/web/static/tests/webclient/actions/concurrency_tests.js
@@ -1,18 +1,27 @@
 /** @odoo-module **/
 
-import { click, getFixture, makeDeferred } from "@web/../tests/helpers/utils";
+import {
+    click,
+    getFixture,
+    legacyExtraNextTick,
+    makeDeferred,
+    nextTick,
+} from "@web/../tests/helpers/utils";
 import { ControlPanel } from "@web/search/control_panel/control_panel";
-import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import {
     isItemSelected,
     toggleFilterMenu,
     toggleMenuItem,
     switchView,
 } from "@web/../tests/search/helpers";
-import { legacyExtraNextTick, nextTick } from "../../helpers/utils";
 import { registry } from "@web/core/registry";
-import testUtils from "web.test_utils";
-import { useSetupView } from "@web/views/helpers/view_hook";
+import { useSetupView } from "@web/views/view_hook";
+import {
+    createWebClient,
+    doAction,
+    getActionManagerServerData,
+    loadState,
+} from "@web/../tests/webclient/helpers";
 
 const { Component, xml } = owl;
 const actionRegistry = registry.category("actions");
@@ -30,8 +39,8 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("drop previous actions if possible", async function (assert) {
         assert.expect(7);
-        const def = testUtils.makeTestPromise();
-        const mockRPC = async function (route, args) {
+        const def = makeDeferred();
+        const mockRPC = async function (route) {
             assert.step(route);
             if (route === "/web/action/load") {
                 await def;
@@ -41,8 +50,7 @@ QUnit.module("ActionManager", (hooks) => {
         doAction(webClient, 4);
         doAction(webClient, 8);
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         // action 4 loads a kanban view first, 6 loads a list view. We want a list
         assert.containsOnce(target, ".o_list_view");
         assert.verifySteps([
@@ -50,20 +58,17 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/action/load",
             "/web/action/load",
             "/web/dataset/call_kw/pony/get_views",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/pony/web_search_read",
         ]);
     });
 
-    QUnit.skip("handle switching view and switching back on slow network", async function (assert) {
-        // This scenario isn't supported while we still have the compatibility layer.
-        // As soon as the list and kanban views will be written in owl, this test will
-        // need to be unskipped.
+    QUnit.test("handle switching view and switching back on slow network", async function (assert) {
         assert.expect(9);
-        let def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const defs = [Promise.resolve(), def, Promise.resolve()];
-        const mockRPC = async function (route, args) {
+        const mockRPC = async function (route, { method }) {
             assert.step(route);
-            if (route === "/web/dataset/search_read") {
+            if (method === "web_search_read") {
                 await defs.shift();
             }
         };
@@ -71,30 +76,28 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 4);
         // kanban view is loaded, switch to list view
         await switchView(target, "list");
-        await legacyExtraNextTick();
         // here, list view is not ready yet, because def is not resolved
         // switch back to kanban view
         await switchView(target, "kanban");
-        await legacyExtraNextTick();
         // here, we want the kanban view to reload itself, regardless of list view
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
             "/web/dataset/call_kw/partner/get_views",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
         ]);
         // we resolve def => list view is now ready (but we want to ignore it)
         def.resolve();
-        await testUtils.nextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_kanban_view", "there should be a kanban view in dom");
         assert.containsNone(target, ".o_list_view", "there should not be a list view in dom");
     });
 
     QUnit.test("when an server action takes too much time...", async function (assert) {
         assert.expect(1);
-        const def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const mockRPC = async function (route, args) {
             if (route === "/web/action/run") {
                 await def;
@@ -105,7 +108,7 @@ QUnit.module("ActionManager", (hooks) => {
         doAction(webClient, 2);
         doAction(webClient, 4);
         def.resolve();
-        await testUtils.nextTick();
+        await nextTick();
         await legacyExtraNextTick();
         assert.strictEqual(
             $(target).find(".o_control_panel .breadcrumb-item.active").text(),
@@ -125,23 +128,18 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // create a situation with 3 breadcrumbs: kanban/form/list
         await doAction(webClient, 4);
-        await testUtils.dom.click($(target).find(".o_kanban_record:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_kanban_record"));
         await doAction(webClient, 8);
-        await legacyExtraNextTick();
         // now, the next read operations will be promise (this is the read
         // operation for the form view reload)
-        def = testUtils.makeTestPromise();
+        def = makeDeferred();
         // click on the breadcrumbs for the form view, then on the kanban view
         // before the form view is fully reloaded
-        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:eq(1)"));
-        await legacyExtraNextTick();
-        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:eq(0)"));
-        await legacyExtraNextTick();
+        await click(target.querySelectorAll(".o_control_panel .breadcrumb-item")[1]);
+        await click(target.querySelector(".o_control_panel .breadcrumb-item"));
         // resolve the form view read
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.strictEqual(
             $(target).find(".o_control_panel .breadcrumb-item.active").text(),
             "Partners Action 4",
@@ -154,27 +152,22 @@ QUnit.module("ActionManager", (hooks) => {
         async function (assert) {
             assert.expect(16);
             let def;
-            const mockRPC = async function (route, args) {
-                assert.step((args && args.method) || route);
-                if (route === "/web/dataset/search_read" && args && args.model === "partner") {
+            const mockRPC = async function (route, { method, model }) {
+                assert.step(method || route);
+                if (method === "web_search_read" && model === "partner") {
                     await def;
                 }
             };
             const webClient = await createWebClient({ serverData, mockRPC });
-            webClient.env.bus.trigger("test:hashchange", {
+            await loadState(webClient, {
                 action: 4,
                 id: 2,
                 view_type: "form",
             });
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
             assert.containsOnce(target, ".o_form_view", "should display the form view of action 4");
             // click to go back to Kanban (this request is blocked)
-            def = testUtils.makeTestPromise();
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
-            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
-            await legacyExtraNextTick();
+            def = makeDeferred();
+            await click(target.querySelector(".o_control_panel .breadcrumb a"));
             assert.containsOnce(
                 target,
                 ".o_form_view",
@@ -189,15 +182,14 @@ QUnit.module("ActionManager", (hooks) => {
                 "/web/action/load",
                 "get_views",
                 "read",
-                "/web/dataset/search_read",
+                "web_search_read",
                 "/web/action/load",
                 "get_views",
-                "/web/dataset/search_read",
+                "web_search_read",
             ]);
             // unblock the switch to Kanban in action 4
             def.resolve();
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
+            await nextTick();
             assert.containsOnce(target, ".o_list_view", "should still display action 8");
             assert.containsNone(
                 target,
@@ -210,7 +202,7 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("execute a new action while handling a call_button", async function (assert) {
         assert.expect(17);
-        const def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const mockRPC = async function (route, args) {
             assert.step((args && args.method) || route);
             if (route === "/web/dataset/call_button") {
@@ -221,11 +213,10 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute action 3 and open a record in form view
         await doAction(webClient, 3);
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         assert.containsOnce(target, ".o_form_view", "should display the form view of action 3");
         // click on 'Call method' button (this request is blocked)
-        await testUtils.dom.click($(target).find(".o_form_view button:contains(Call method)"));
+        await click(target.querySelector('.o_form_view button[name="object"]'));
         assert.containsOnce(
             target,
             ".o_form_view",
@@ -239,17 +230,16 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
             "object",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
         // unblock the call_button request
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(
             target,
             ".o_list_view",
@@ -282,10 +272,8 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view", "should display the list view of action 3");
             // switch to the form view (this request is blocked)
-            def = testUtils.makeTestPromise();
-            testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
+            def = makeDeferred();
+            await click(target.querySelector(".o_list_view .o_data_cell"));
             assert.containsOnce(
                 target,
                 ".o_list_view",
@@ -303,16 +291,15 @@ QUnit.module("ActionManager", (hooks) => {
                 "/web/webclient/load_menus",
                 "/web/action/load",
                 "get_views",
-                "/web/dataset/search_read",
+                "web_search_read",
                 "read",
                 "/web/action/load",
                 "get_views",
-                "/web/dataset/search_read",
+                "web_search_read",
             ]);
             // unblock the switch to the form view in action 3
             def.resolve();
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
+            await nextTick();
             assert.containsOnce(
                 target,
                 ".o_kanban_view",
@@ -329,7 +316,7 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("execute a new action while loading views", async function (assert) {
         assert.expect(11);
-        const def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const mockRPC = async function (route, args) {
             assert.step((args && args.method) || route);
             if (args && args.method === "get_views") {
@@ -339,15 +326,13 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute a first action (its 'get_views' RPC is blocked)
         doAction(webClient, 3);
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         // execute another action meanwhile (and unlock the RPC)
         doAction(webClient, 4);
-        await testUtils.nextTick();
+        await nextTick();
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_kanban_view", "should display the kanban view of action 4");
         assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         assert.containsOnce(
@@ -361,30 +346,28 @@ QUnit.module("ActionManager", (hooks) => {
             "get_views",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("execute a new action while loading data of default view", async function (assert) {
         assert.expect(12);
-        const def = testUtils.makeTestPromise();
-        const mockRPC = async function (route, args) {
-            assert.step((args && args.method) || route);
-            if (route === "/web/dataset/search_read") {
+        const def = makeDeferred();
+        const mockRPC = async function (route, { method }) {
+            assert.step(method || route);
+            if (method === "web_search_read") {
                 await def;
             }
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute a first action (its 'search_read' RPC is blocked)
         doAction(webClient, 3);
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         // execute another action meanwhile (and unlock the RPC)
         doAction(webClient, 4);
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_kanban_view", "should display the kanban view of action 4");
         assert.containsNone(target, ".o_list_view", "should not display the list view of action 3");
         assert.containsOnce(
@@ -396,17 +379,17 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("open a record while reloading the list view", async function (assert) {
         assert.expect(12);
         let def;
-        const mockRPC = async function (route, args) {
+        const mockRPC = async function (route) {
             if (route === "/web/dataset/search_read") {
                 await def;
             }
@@ -417,21 +400,18 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsN(target, ".o_list_view .o_data_row", 5);
         assert.containsOnce(target, ".o_control_panel .o_list_buttons");
         // reload (the search_read RPC will be blocked)
-        def = testUtils.makeTestPromise();
+        def = makeDeferred();
         await switchView(target, "list");
-        await legacyExtraNextTick();
         assert.containsN(target, ".o_list_view .o_data_row", 5);
         assert.containsOnce(target, ".o_control_panel .o_list_buttons");
         // open a record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         assert.containsOnce(target, ".o_form_view");
         assert.containsNone(target, ".o_control_panel .o_list_buttons");
         assert.containsOnce(target, ".o_control_panel .o_form_buttons_view");
         // unblock the search_read RPC
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_form_view");
         assert.containsNone(target, ".o_list_view");
         assert.containsNone(target, ".o_control_panel .o_list_buttons");
@@ -442,7 +422,7 @@ QUnit.module("ActionManager", (hooks) => {
         "properly drop client actions after new action is initiated",
         async function (assert) {
             assert.expect(3);
-            const slowWillStartDef = testUtils.makeTestPromise();
+            const slowWillStartDef = makeDeferred();
             class ClientAction extends Component {
                 setup() {
                     owl.onWillStart(() => slowWillStartDef);
@@ -460,52 +440,52 @@ QUnit.module("ActionManager", (hooks) => {
             await legacyExtraNextTick();
             assert.containsOnce(target, ".o_kanban_view", "should have loaded a kanban view");
             slowWillStartDef.resolve();
-            await testUtils.nextTick();
+            await nextTick();
             await legacyExtraNextTick();
             assert.containsOnce(target, ".o_kanban_view", "should still display the kanban view");
         }
     );
 
-    QUnit.test("restoring a controller when doing an action -- load_action slow", async function (assert) {
-        assert.expect(14);
-        let def;
-        const mockRPC = async (route, args) => {
-            assert.step((args && args.method) || route);
-            if (route === "/web/action/load") {
-                return Promise.resolve(def);
-            }
-        };
-        const webClient = await createWebClient({ serverData, mockRPC });
-        await doAction(webClient, 3);
-        assert.containsOnce(target, ".o_list_view");
-        await click(target.querySelector(".o_list_view .o_data_cell"));
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_form_view");
-        def = makeDeferred();
-        doAction(webClient, 4, { clearBreadcrumbs: true });
-        await nextTick();
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_form_view", "should still contain the form view");
-        await click(target.querySelector(".o_control_panel .breadcrumb-item a"));
-        def.resolve();
-        await nextTick();
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_list_view");
-        assert.strictEqual(
-            target.querySelector(".o_control_panel .breadcrumb-item").textContent,
-            "Partners"
-        );
-        assert.containsNone(target, ".o_form_view");
-        assert.verifySteps([
-            "/web/webclient/load_menus",
-            "/web/action/load",
-            "get_views",
-            "/web/dataset/search_read",
-            "read",
-            "/web/action/load",
-            "/web/dataset/search_read",
-        ]);
-    });
+    QUnit.test(
+        "restoring a controller when doing an action -- load_action slow",
+        async function (assert) {
+            assert.expect(14);
+            let def;
+            const mockRPC = async (route, args) => {
+                assert.step((args && args.method) || route);
+                if (route === "/web/action/load") {
+                    return Promise.resolve(def);
+                }
+            };
+            const webClient = await createWebClient({ serverData, mockRPC });
+            await doAction(webClient, 3);
+            assert.containsOnce(target, ".o_list_view");
+            await click(target.querySelector(".o_list_view .o_data_cell"));
+            assert.containsOnce(target, ".o_form_view");
+            def = makeDeferred();
+            doAction(webClient, 4, { clearBreadcrumbs: true });
+            await nextTick();
+            assert.containsOnce(target, ".o_form_view", "should still contain the form view");
+            await click(target.querySelector(".o_control_panel .breadcrumb-item a"));
+            def.resolve();
+            await nextTick();
+            assert.containsOnce(target, ".o_list_view");
+            assert.strictEqual(
+                target.querySelector(".o_control_panel .breadcrumb-item").textContent,
+                "Partners"
+            );
+            assert.containsNone(target, ".o_form_view");
+            assert.verifySteps([
+                "/web/webclient/load_menus",
+                "/web/action/load",
+                "get_views",
+                "web_search_read",
+                "read",
+                "/web/action/load",
+                "web_search_read",
+            ]);
+        }
+    );
 
     QUnit.test("switching when doing an action -- load_action slow", async function (assert) {
         assert.expect(12);
@@ -522,12 +502,10 @@ QUnit.module("ActionManager", (hooks) => {
         def = makeDeferred();
         doAction(webClient, 4, { clearBreadcrumbs: true });
         await nextTick();
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_list_view", "should still contain the list view");
         await switchView(target, "kanban");
         def.resolve();
         await nextTick();
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_kanban_view");
         assert.strictEqual(
             target.querySelector(".o_control_panel .breadcrumb-item").textContent,
@@ -538,9 +516,9 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "/web/action/load",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
@@ -556,15 +534,13 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         assert.containsOnce(target, ".o_list_view");
-        def = testUtils.makeTestPromise();
+        def = makeDeferred();
         doAction(webClient, 4, { clearBreadcrumbs: true });
         await nextTick();
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_list_view", "should still contain the list view");
         await switchView(target, "kanban");
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_kanban_view");
         assert.strictEqual(
             target.querySelector(".o_control_panel .breadcrumb-item").textContent,
@@ -575,20 +551,20 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("switching when doing an action -- search_read slow", async function (assert) {
         assert.expect(13);
-        const def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const defs = [null, def, null];
-        const mockRPC = async (route, args) => {
-            assert.step((args && args.method) || route);
-            if (route === "/web/dataset/search_read") {
+        const mockRPC = async (route, { method }) => {
+            assert.step(method || route);
+            if (method === "web_search_read") {
                 await Promise.resolve(defs.shift());
             }
         };
@@ -596,12 +572,10 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         assert.containsOnce(target, ".o_list_view");
         doAction(webClient, 4, { clearBreadcrumbs: true });
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         await switchView(target, "kanban");
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
         assert.containsOnce(target, ".o_kanban_view");
         assert.strictEqual(
             target.querySelector(".o_control_panel .breadcrumb-item").textContent,
@@ -612,18 +586,16 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
+            "web_search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("click multiple times to open a record", async function (assert) {
-        assert.expect(5);
-
-        const def = testUtils.makeTestPromise();
+        const def = makeDeferred();
         const defs = [null, def];
         const mockRPC = async (route, args) => {
             if (args.method === "read") {
@@ -635,24 +607,29 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         assert.containsOnce(target, ".o_list_view");
 
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         assert.containsOnce(target, ".o_form_view");
 
-        await testUtils.dom.click(target.querySelector(".o_back_button"));
-        await legacyExtraNextTick();
-
+        await click(target.querySelector(".o_back_button"));
         assert.containsOnce(target, ".o_list_view");
 
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_list_view");
+        const row1 = target.querySelectorAll(".o_list_view .o_data_row")[0];
+        const row2 = target.querySelectorAll(".o_list_view .o_data_row")[1];
+        await click(row1.querySelector(".o_data_cell"));
+        await click(row2.querySelector(".o_data_cell"));
+        assert.containsOnce(target, ".o_form_view");
+        assert.strictEqual(
+            target.querySelector(".breadcrumb-item.active").innerText,
+            "Second record"
+        );
 
         def.resolve();
         await nextTick();
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_form_view");
+        assert.strictEqual(
+            target.querySelector(".breadcrumb-item.active").innerText,
+            "Second record"
+        );
     });
 
     QUnit.test("local state, global state, and race conditions", async function (assert) {
diff --git a/addons/web/static/tests/webclient/actions/legacy_tests.js b/addons/web/static/tests/webclient/actions/legacy_tests.js
index b237fd1ec6f..e60a65e6db3 100644
--- a/addons/web/static/tests/webclient/actions/legacy_tests.js
+++ b/addons/web/static/tests/webclient/actions/legacy_tests.js
@@ -3,14 +3,18 @@
 import { registry } from "@web/core/registry";
 import testUtils from "web.test_utils";
 import ListController from "web.ListController";
+import FormView from "web.FormView";
 import ListView from "web.ListView";
 import {
     click,
     destroy,
     getFixture,
+    makeDeferred,
     legacyExtraNextTick,
     patchWithCleanup,
+    triggerEvents,
 } from "../../helpers/utils";
+import KanbanView from "web.KanbanView";
 import { registerCleanup } from "../../helpers/cleanup";
 import { makeTestEnv } from "../../helpers/mock_env";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
@@ -21,17 +25,26 @@ import { makeLegacyCrashManagerService } from "@web/legacy/utils";
 import { useDebugCategory } from "@web/core/debug/debug_context";
 import { ErrorDialog } from "@web/core/errors/error_dialogs";
 
+import AbstractView from "web.AbstractView";
 import ControlPanel from "web.ControlPanel";
 import core from "web.core";
 import AbstractAction from "web.AbstractAction";
 import Widget from "web.Widget";
 import SystrayMenu from "web.SystrayMenu";
+import legacyViewRegistry from "web.view_registry";
 
 let serverData;
 let target;
 
 QUnit.module("ActionManager", (hooks) => {
     hooks.beforeEach(() => {
+        registry.category("views").remove("form"); // remove new form from registry
+        registry.category("views").remove("kanban"); // remove new kanban from registry
+        registry.category("views").remove("list"); // remove new list from registry
+        legacyViewRegistry.add("form", FormView); // add legacy form -> will be wrapped and added to new registry
+        legacyViewRegistry.add("kanban", KanbanView); // add legacy kanban -> will be wrapped and added to new registry
+        legacyViewRegistry.add("list", ListView); // add legacy list -> will be wrapped and added to new registry
+
         serverData = getActionManagerServerData();
         target = getFixture();
     });
@@ -513,6 +526,78 @@ QUnit.module("ActionManager", (hooks) => {
         ]);
     });
 
+    QUnit.test("bootstrap tooltip in dialog action auto destroy", async (assert) => {
+        assert.expect(2);
+
+        const mockRPC = (route) => {
+            if (route === "/web/dataset/call_button") {
+                return false;
+            }
+        };
+
+        serverData.views["partner,3,form"] = /*xml*/ `
+            <form>
+                <field name="display_name" />
+                <footer>
+                    <button name="echoes" type="object" string="Echoes" help="echoes"/>
+                </footer>
+            </form>
+        `;
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 25);
+
+        const tooltipProm = makeDeferred();
+        $(target).one("shown.bs.tooltip", () => {
+            tooltipProm.resolve();
+        });
+
+        triggerEvents(target, ".modal footer button", ["mouseover", "focusin"]);
+        await tooltipProm;
+        // check on webClient dom
+        assert.containsOnce(document.body, ".tooltip");
+        await doAction(webClient, {
+            type: "ir.actions.act_window_close",
+        });
+        // check on the whole DOM
+        assert.containsNone(document.body, ".tooltip");
+    });
+
+    QUnit.test("bootstrap tooltip destroyed on click", async (assert) => {
+        assert.expect(2);
+
+        const mockRPC = (route) => {
+            if (route === "/web/dataset/call_button") {
+                return false;
+            }
+        };
+
+        serverData.views["partner,666,form"] = /*xml*/ `
+            <form>
+                <header>
+                    <button name="echoes" type="object" string="Echoes" help="echoes"/>
+                </header>
+                <field name="display_name" />
+            </form>
+        `;
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, 24);
+
+        const tooltipProm = makeDeferred();
+        $(target).one("shown.bs.tooltip", () => {
+            tooltipProm.resolve();
+        });
+
+        triggerEvents(target, ".o_form_statusbar button", ["mouseover", "focusin"]);
+        await tooltipProm;
+        // check on webClient DOM
+        assert.containsOnce(document.body, ".tooltip");
+        await click(target, ".o_content");
+        // check on the whole DOM
+        assert.containsNone(document.body, ".tooltip");
+    });
+
     QUnit.test("breadcrumbs are correct in stacked legacy client actions", async function (assert) {
         const ClientAction = AbstractAction.extend({
             hasControlPanel: true,
@@ -540,4 +625,115 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsOnce(target, ".client_action");
         assert.strictEqual($(target).find(".breadcrumb-item").text(), "PartnersBlabla");
     });
+
+    QUnit.test("view with js_class attribute (legacy)", async function (assert) {
+        assert.expect(2);
+        const TestView = AbstractView.extend({
+            viewType: "test_view",
+        });
+        const TestJsClassView = TestView.extend({
+            init() {
+                this._super.call(this, ...arguments);
+                assert.step("init js class");
+            },
+        });
+        serverData.views["partner,false,test_view"] = `<div js_class="test_jsClass"></div>`;
+        serverData.actions[9999] = {
+            id: 1,
+            name: "Partners Action 1",
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "test_view"]],
+        };
+        legacyViewRegistry.add("test_view", TestView);
+        legacyViewRegistry.add("test_jsClass", TestJsClassView);
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 9999);
+        assert.verifySteps(["init js class"]);
+        delete legacyViewRegistry.map.test_view;
+        delete legacyViewRegistry.map.test_jsClass;
+    });
+
+    QUnit.test(
+        "execute action without modal closes bootstrap tooltips anyway",
+        async function (assert) {
+            assert.expect(12);
+            Object.assign(serverData.views, {
+                "partner,666,form": `<form>
+            <header>
+              <button name="object" string="Call method" type="object" help="need somebody"/>
+            </header>
+            <field name="display_name"/>
+          </form>`,
+            });
+            const mockRPC = async (route) => {
+                assert.step(route);
+                if (route === "/web/dataset/call_button") {
+                    // Some business stuff server side, then return an implicit close action
+                    return Promise.resolve(false);
+                }
+            };
+
+            const webClient = await createWebClient({ serverData, mockRPC });
+            await doAction(webClient, 24);
+            assert.verifySteps([
+                "/web/webclient/load_menus",
+                "/web/action/load",
+                "/web/dataset/call_kw/partner/get_views",
+                "/web/dataset/call_kw/partner/read",
+            ]);
+            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+            const actionButton = target.querySelector("button[name=object]");
+            const tooltipProm = new Promise((resolve) => {
+                $(document.body).one("shown.bs.tooltip", () => {
+                    $(actionButton).mouseleave();
+                    resolve();
+                });
+            });
+            $(actionButton).mouseenter();
+            await tooltipProm;
+            assert.containsOnce(document.body, ".tooltip");
+            await click(actionButton);
+            await legacyExtraNextTick();
+            assert.verifySteps(["/web/dataset/call_button", "/web/dataset/call_kw/partner/read"]);
+            assert.containsNone(document.body, ".tooltip"); // body different from webClient in tests !
+            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+        }
+    );
+
+    QUnit.test("click multiple times to open a record", async function (assert) {
+        assert.expect(5);
+
+        const def = testUtils.makeTestPromise();
+        const defs = [null, def];
+        const mockRPC = async (route, args) => {
+            if (args.method === "read") {
+                await Promise.resolve(defs.shift());
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 3);
+
+        assert.containsOnce(target, ".o_list_view");
+
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_form_view");
+
+        await testUtils.dom.click(target.querySelector(".o_back_button"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(target, ".o_list_view");
+
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_list_view");
+
+        def.resolve();
+        await testUtils.nextTick();
+        await legacyExtraNextTick();
+        assert.containsOnce(target, ".o_form_view");
+    });
 });
diff --git a/addons/web/static/tests/webclient/actions/load_state_tests.js b/addons/web/static/tests/webclient/actions/load_state_tests.js
index afcfd375e1a..c8e9ac5fa6e 100644
--- a/addons/web/static/tests/webclient/actions/load_state_tests.js
+++ b/addons/web/static/tests/webclient/actions/load_state_tests.js
@@ -133,7 +133,6 @@ QUnit.module("ActionManager", (hooks) => {
                     additional_context: {
                         active_id: 4,
                         active_ids: [4, 8],
-                        active_model: undefined,
                     },
                 });
             }
@@ -217,7 +216,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
@@ -310,7 +309,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
@@ -347,7 +346,7 @@ QUnit.module("ActionManager", (hooks) => {
                 "/web/action/load",
                 "get_views",
                 "read",
-                "/web/dataset/search_read",
+                "web_search_read",
             ]);
         }
     );
@@ -464,8 +463,8 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
+            "web_search_read",
+            "web_search_read",
             "read",
         ]);
     });
@@ -478,7 +477,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         // execute action 3 and open the first record in a form view
         await doAction(webClient, 3);
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await testUtils.dom.click($(target).find(".o_list_view .o_data_cell:first"));
         await legacyExtraNextTick();
         assert.containsOnce(target, ".o_form_view");
         assert.strictEqual(
@@ -513,7 +512,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
             "read",
         ]);
@@ -542,7 +541,7 @@ QUnit.module("ActionManager", (hooks) => {
             view_type: "list",
         });
         assert.verifySteps(["push_state"], "should have pushed the final state");
-        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
+        await testUtils.dom.click($(target).find("tr .o_data_cell:first"));
         await legacyExtraNextTick();
         currentHash = webClient.env.services.router.current.hash;
         assert.deepEqual(currentHash, {
@@ -718,10 +717,10 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "setItem session current_action",
             "getItem session current_action",
-            "/web/dataset/search_read",
+            "web_search_read",
             "setItem session current_action",
         ]);
     });
@@ -750,7 +749,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "/web/dataset/call_kw/partner/get_views",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
         ]);
     });
 
@@ -800,7 +799,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "/web/dataset/call_kw/partner/get_views",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
         ]);
     });
 
@@ -839,7 +838,7 @@ QUnit.module("ActionManager", (hooks) => {
             id: "",
         });
         assert.verifySteps(["/web/dataset/call_kw/partner/onchange"]);
-        assert.containsOnce(target, ".o_form_view.o_form_editable");
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
         assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
             $(target).find(".o_control_panel .breadcrumb-item.active").text(),
@@ -927,7 +926,7 @@ QUnit.module("ActionManager", (hooks) => {
             await loadState(webClient.env, hash);
             assert.containsOnce(
                 target,
-                ".o_form_view.o_form_editable",
+                ".o_form_view .o_form_editable",
                 "should now display the form view in edit mode"
             );
         }
diff --git a/addons/web/static/tests/webclient/actions/misc_tests.js b/addons/web/static/tests/webclient/actions/misc_tests.js
index 86e936665f1..3d983dfb031 100644
--- a/addons/web/static/tests/webclient/actions/misc_tests.js
+++ b/addons/web/static/tests/webclient/actions/misc_tests.js
@@ -11,9 +11,8 @@ import {
     getFixture,
     hushConsole,
     legacyExtraNextTick,
-    makeDeferred,
+    nextTick,
     patchWithCleanup,
-    triggerEvents,
 } from "../../helpers/utils";
 import {
     createWebClient,
@@ -22,7 +21,7 @@ import {
     setupWebClientRegistries,
 } from "./../helpers";
 import * as cpHelpers from "@web/../tests/search/helpers";
-import ListController from "web.ListController";
+import { listView } from "@web/views/list/list_view";
 
 let serverData;
 let target;
@@ -375,7 +374,6 @@ QUnit.module("ActionManager", (hooks) => {
     );
 
     QUnit.test('action with "no_breadcrumbs" set to true', async function (assert) {
-        assert.expect(2);
         serverData.actions[4].context = { no_breadcrumbs: true };
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
@@ -386,7 +384,6 @@ QUnit.module("ActionManager", (hooks) => {
     });
 
     QUnit.test("document's title is updated when an action is executed", async function (assert) {
-        assert.expect(8);
         const defaultTitle = { zopenerp: "Odoo" };
         const webClient = await createWebClient({ serverData });
         let currentTitle = webClient.env.services.title.getParts();
@@ -409,8 +406,8 @@ QUnit.module("ActionManager", (hooks) => {
         });
         currentHash = webClient.env.services.router.current.hash;
         assert.deepEqual(currentHash, { action: 8, model: "pony", view_type: "list" });
-        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_data_row .o_data_cell"));
+        await nextTick();
         currentTitle = webClient.env.services.title.getParts();
         assert.deepEqual(currentTitle, {
             ...defaultTitle,
@@ -458,18 +455,18 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test('handles "history_back" event', async function (assert) {
         assert.expect(3);
-        let controller;
-        patchWithCleanup(ListController.prototype, {
-            init() {
+        let list;
+        patchWithCleanup(listView.Controller.prototype, {
+            setup() {
                 this._super(...arguments);
-                controller = this;
+                list = this;
             },
         });
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
         await doAction(webClient, 3);
         assert.containsN(target, ".o_control_panel .breadcrumb-item", 2);
-        controller.trigger_up("history_back");
+        list.env.config.historyBack();
         await testUtils.nextTick();
         await legacyExtraNextTick();
         assert.containsOnce(target, ".o_control_panel .breadcrumb-item");
@@ -500,29 +497,26 @@ QUnit.module("ActionManager", (hooks) => {
         assert.strictEqual(target.querySelector(".o_content").scrollTop, 0);
         // go back using the breadcrumbs
         await click(target.querySelector(".o_control_panel .breadcrumb a"));
-        await legacyExtraNextTick();
         assert.strictEqual(target.querySelector(".o_content").scrollTop, 100);
     });
 
     QUnit.test(
         'executing an action with target != "new" closes all dialogs',
         async function (assert) {
-            assert.expect(4);
             serverData.views["partner,false,form"] = `
-      <form>
-        <field name="o2m">
-          <tree><field name="foo"/></tree>
-          <form><field name="foo"/></form>
-        </field>
-      </form>`;
+                <form>
+                    <field name="o2m">
+                    <tree><field name="foo"/></tree>
+                    <form><field name="foo"/></form>
+                    </field>
+                </form>
+                `;
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view");
-            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_view .o_data_row .o_list_char"));
             assert.containsOnce(target, ".o_form_view");
-            await testUtils.dom.click(target.querySelector(".o_form_view .o_data_row"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_form_view .o_data_row .o_data_cell"));
             assert.containsOnce(document.body, ".modal .o_form_view");
             await doAction(webClient, 1); // target != 'new'
             assert.containsNone(document.body, ".modal");
@@ -534,95 +528,22 @@ QUnit.module("ActionManager", (hooks) => {
         async function (assert) {
             assert.expect(4);
             serverData.views["partner,false,form"] = `
-      <form>
-        <field name="o2m">
-          <tree><field name="foo"/></tree>
-          <form><field name="foo"/></form>
-        </field>
-      </form>`;
+                <form>
+                    <field name="o2m">
+                    <tree><field name="foo"/></tree>
+                    <form><field name="foo"/></form>
+                    </field>
+                </form>
+                `;
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view");
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_view .o_data_row .o_data_cell"));
             assert.containsOnce(target, ".o_form_view");
-            await testUtils.dom.click($(target).find(".o_form_view .o_data_row:first"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_form_view .o_data_row .o_data_cell"));
             assert.containsOnce(document.body, ".modal .o_form_view");
             await doAction(webClient, 5); // target 'new'
             assert.containsN(document.body, ".modal .o_form_view", 2);
         }
     );
-
-    QUnit.test("bootstrap tooltip in dialog action auto destroy", async (assert) => {
-        assert.expect(2);
-
-        const mockRPC = (route, args) => {
-            if (route === "/web/dataset/call_button") {
-                return false;
-            }
-        };
-
-        serverData.views["partner,3,form"] = /*xml*/ `
-            <form>
-                <field name="display_name" />
-                <footer>
-                    <button name="echoes" type="object" string="Echoes" help="echoes"/>
-                </footer>
-            </form>
-        `;
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, 25);
-
-        const tooltipProm = makeDeferred();
-        $(target).one("shown.bs.tooltip", () => {
-            tooltipProm.resolve();
-        });
-
-        triggerEvents(target, ".modal footer button", ["mouseover", "focusin"]);
-        await tooltipProm;
-        // check on webClient dom
-        assert.containsOnce(document.body, ".tooltip");
-        await doAction(webClient, {
-            type: "ir.actions.act_window_close",
-        });
-        // check on the whole DOM
-        assert.containsNone(document.body, ".tooltip");
-    });
-
-    QUnit.test("bootstrap tooltip destroyed on click", async (assert) => {
-        assert.expect(2);
-
-        const mockRPC = (route, args) => {
-            if (route === "/web/dataset/call_button") {
-                return false;
-            }
-        };
-
-        serverData.views["partner,666,form"] = /*xml*/ `
-            <form>
-                <header>
-                    <button name="echoes" type="object" string="Echoes" help="echoes"/>
-                </header>
-                <field name="display_name" />
-            </form>
-        `;
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, 24);
-
-        const tooltipProm = makeDeferred();
-        $(target).one("shown.bs.tooltip", () => {
-            tooltipProm.resolve();
-        });
-
-        triggerEvents(target, ".o_form_statusbar button", ["mouseover", "focusin"]);
-        await tooltipProm;
-        // check on webClient DOM
-        assert.containsOnce(document.body, ".tooltip");
-        await click(target, ".o_content");
-        // check on the whole DOM
-        assert.containsNone(document.body, ".tooltip");
-    });
 });
diff --git a/addons/web/static/tests/webclient/actions/push_state_tests.js b/addons/web/static/tests/webclient/actions/push_state_tests.js
index 73c85a55645..c59bcdb3f01 100644
--- a/addons/web/static/tests/webclient/actions/push_state_tests.js
+++ b/addons/web/static/tests/webclient/actions/push_state_tests.js
@@ -8,6 +8,7 @@ import {
     click,
     getFixture,
     legacyExtraNextTick,
+    makeDeferred,
     nextTick,
     patchWithCleanup,
 } from "../../helpers/utils";
@@ -190,8 +191,8 @@ QUnit.module("ActionManager", (hooks) => {
             model: "pony",
             view_type: "list",
         });
-        await testUtils.dom.click($(target).find("tr.o_data_row:first"));
-        await legacyExtraNextTick();
+        await testUtils.dom.click($(target).find("tr .o_data_cell:first"));
+        await nextTick();
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: 8,
             model: "pony",
@@ -202,20 +203,20 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("push state after action is loaded, not before", async function (assert) {
         assert.expect(2);
-        const def = testUtils.makeTestPromise();
-        const mockRPC = async function (route) {
-            if (route === "/web/dataset/search_read") {
+        const def = makeDeferred();
+        const mockRPC = async function (route, args) {
+            if (args.method === "web_search_read") {
                 await def;
             }
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         doAction(webClient, 4);
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
+        await nextTick();
         assert.deepEqual(webClient.env.services.router.current.hash, {});
         def.resolve();
-        await testUtils.nextTick();
-        await legacyExtraNextTick();
+        await nextTick();
+        await nextTick();
         assert.deepEqual(webClient.env.services.router.current.hash, {
             action: 4,
             model: "partner",
diff --git a/addons/web/static/tests/webclient/actions/server_action_tests.js b/addons/web/static/tests/webclient/actions/server_action_tests.js
index d1322301bd1..f4aeb7c936e 100644
--- a/addons/web/static/tests/webclient/actions/server_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/server_action_tests.js
@@ -33,7 +33,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/action/run",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
@@ -92,8 +92,6 @@ QUnit.module("ActionManager", (hooks) => {
     });
 
     QUnit.test("action with html help returned by a server action", async function (assert) {
-        assert.expect(1);
-
         serverData.actions[2].context = { someKey: 44 };
         const mockRPC = async (route, args) => {
             if (route === "/web/action/run") {
diff --git a/addons/web/static/tests/webclient/actions/target_tests.js b/addons/web/static/tests/webclient/actions/target_tests.js
index e30850d8b98..1502efdda9f 100644
--- a/addons/web/static/tests/webclient/actions/target_tests.js
+++ b/addons/web/static/tests/webclient/actions/target_tests.js
@@ -4,14 +4,7 @@ import testUtils from "web.test_utils";
 import core from "web.core";
 import AbstractAction from "web.AbstractAction";
 import { registry } from "@web/core/registry";
-import {
-    click,
-    getFixture,
-    legacyExtraNextTick,
-    patchWithCleanup,
-    makeDeferred,
-    nextTick,
-} from "../../helpers/utils";
+import { click, getFixture, patchWithCleanup, makeDeferred, nextTick } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
 import { registerCleanup } from "../../helpers/cleanup";
 import { errorService } from "@web/core/errors/error_service";
@@ -48,9 +41,9 @@ QUnit.module("ActionManager", (hooks) => {
             "o_act_window",
             "dialog main element should have classname 'o_act_window'"
         );
-        assert.hasClass(
-            $(".o_technical_modal .o_form_view")[0],
-            "o_form_editable",
+        assert.containsOnce(
+            document.body,
+            ".o_technical_modal .o_form_view .o_form_editable",
             "form view should be in edit mode"
         );
         assert.verifySteps([
@@ -80,12 +73,13 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test("footer buttons are moved to the dialog footer", async function (assert) {
         assert.expect(3);
         serverData.views["partner,false,form"] = `
-      <form>
-        <field name="display_name"/>
-        <footer>
-          <button string="Create" type="object" class="infooter"/>
-        </footer>
-      </form>`;
+            <form>
+                <field name="display_name"/>
+                <footer>
+                    <button string="Create" type="object" class="infooter"/>
+                </footer>
+            </form>
+        `;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 5);
         assert.containsNone(
@@ -99,29 +93,26 @@ QUnit.module("ActionManager", (hooks) => {
             "the button should be in the footer"
         );
         assert.containsOnce(
-            $(".o_technical_modal .modal-footer")[0],
-            "button",
-            "the modal footer should only contain one button"
+            target,
+            ".modal-footer button:not(.d-none)",
+            "the modal footer should only contain one visible button"
         );
     });
 
     QUnit.test("Button with `close` attribute closes dialog", async function (assert) {
-        assert.expect(19);
         serverData.views = {
             "partner,false,form": `
-        <form>
-          <header>
-            <button string="Open dialog" name="5" type="action"/>
-          </header>
-        </form>
-      `,
+                <form>
+                    <header>
+                        <button string="Open dialog" name="5" type="action"/>
+                    </header>
+                </form>`,
             "partner,view_ref,form": `
-          <form>
-            <footer>
-              <button string="I close the dialog" name="some_method" type="object" close="1"/>
-            </footer>
-          </form>
-      `,
+                <form>
+                    <footer>
+                        <button string="I close the dialog" name="some_method" type="object" close="1"/>
+                    </footer>
+                </form>`,
             "partner,false,search": "<search></search>",
         };
         serverData.actions[4] = {
@@ -164,8 +155,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/dataset/call_kw/partner/get_views",
             "/web/dataset/call_kw/partner/onchange",
         ]);
-        await legacyExtraNextTick();
-        assert.strictEqual($(".modal").length, 1, "It should display a modal");
+        assert.containsOnce(document.body, ".modal");
         await testUtils.dom.click(`button[name="some_method"]`);
         assert.verifySteps([
             "/web/dataset/call_kw/partner/create",
@@ -173,8 +163,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/dataset/call_button",
             "/web/dataset/call_kw/partner/read",
         ]);
-        await legacyExtraNextTick();
-        assert.strictEqual($(".modal").length, 0, "It should have closed the modal");
+        assert.containsNone(document.body, ".modal");
     });
 
     QUnit.test('on_attach_callback is called for actions in target="new"', async function (assert) {
@@ -206,25 +195,26 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         'footer buttons are updated when having another action in target "new"',
         async function (assert) {
-            serverData.views["partner,false,form"] =
-                "<form>" +
-                '<field name="display_name"/>' +
-                "<footer>" +
-                '<button string="Create" type="object" class="infooter"/>' +
-                "</footer>" +
-                "</form>";
+            serverData.views["partner,false,form"] = `
+                <form>
+                    <field name="display_name"/>
+                    <footer>
+                        <button string="Create" type="object" class="infooter"/>
+                    </footer>
+                </form>
+            `;
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 5);
             assert.containsNone(target, '.o_technical_modal .modal-body button[special="save"]');
             assert.containsNone(target, ".o_technical_modal .modal-body button.infooter");
             assert.containsOnce(target, ".o_technical_modal .modal-footer button.infooter");
-            assert.containsOnce(target, ".o_technical_modal .modal-footer button");
+            assert.containsOnce(target, ".o_technical_modal .modal-footer button:not(.d-none)");
             await doAction(webClient, 25);
             assert.containsNone(target, ".o_technical_modal .modal-body button.infooter");
             assert.containsNone(target, ".o_technical_modal .modal-footer button.infooter");
             assert.containsNone(target, '.o_technical_modal .modal-body button[special="save"]');
             assert.containsOnce(target, '.o_technical_modal .modal-footer button[special="save"]');
-            assert.containsOnce(target, ".o_technical_modal .modal-footer button");
+            assert.containsOnce(target, ".o_technical_modal .modal-footer button:not(.d-none)");
         }
     );
 
@@ -296,7 +286,10 @@ QUnit.module("ActionManager", (hooks) => {
 
             await testUtils.dom.click($(".modal:last .modal-footer .btn-primary"));
             assert.containsOnce(document.body, ".modal");
-            assert.strictEqual($(".modal:last .modal-body").text().trim(), "Another action");
+            assert.strictEqual(
+                target.querySelector(".modal main .o_content").innerText.trim(),
+                "Another action"
+            );
         }
     );
 
@@ -421,10 +414,7 @@ QUnit.module("ActionManager", (hooks) => {
             type: "ir.actions.act_window",
             views: [[false, "list"]],
         });
-        assert.deepEqual(
-            [...target.querySelectorAll(".modal .breadcrumb-item")].map((i) => i.innerText),
-            ["Create a Partner"]
-        );
+        assert.containsNone(target, ".modal .breadcrumb");
     });
 
     QUnit.test('call switchView in an action in target="new"', async function (assert) {
@@ -453,46 +443,6 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsOnce(target, ".o_kanban_view");
     });
 
-    QUnit.module('Actions in target="inline"');
-
-    QUnit.test(
-        'form views for actions in target="inline" open in edit mode',
-        async function (assert) {
-            const mockRPC = async (route, args) => {
-                assert.step(args.method || route);
-            };
-            const webClient = await createWebClient({ serverData, mockRPC });
-            await doAction(webClient, 6);
-            assert.containsOnce(
-                target,
-                ".o_form_view.o_form_editable",
-                "should have rendered a form view in edit mode"
-            );
-            assert.verifySteps([
-                "/web/webclient/load_menus",
-                "/web/action/load",
-                "get_views",
-                "read",
-            ]);
-        }
-    );
-
-    QUnit.test("breadcrumbs and actions with target inline", async function (assert) {
-        serverData.actions[4].views = [[false, "form"]];
-        serverData.actions[4].target = "inline";
-        const webClient = await createWebClient({ serverData });
-        await doAction(webClient, 4);
-        assert.containsNone(target, ".o_control_panel");
-        await doAction(webClient, 1, { clearBreadcrumbs: true });
-        assert.containsOnce(target, ".o_control_panel");
-        assert.isVisible(target.querySelector(".o_control_panel"));
-        assert.strictEqual(
-            target.querySelector(".o_control_panel .breadcrumb").textContent,
-            "Partners Action 1",
-            "should have only one current action visible in breadcrumbs"
-        );
-    });
-
     QUnit.module('Actions in target="fullscreen"');
 
     QUnit.test(
@@ -515,15 +465,12 @@ QUnit.module("ActionManager", (hooks) => {
         ] = `<form><button name="1" type="action" class="oe_stat_button" /></form>`;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 6);
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_main_navbar");
-        await testUtils.dom.click($(target).find("button[name=1]"));
+        await click(target.querySelector("button[name='1']"));
         await nextTick(); // wait for the webclient template to be re-rendered
-        await legacyExtraNextTick();
         assert.containsNone(target, ".o_main_navbar");
-        await testUtils.dom.click(target.querySelector(".breadcrumb li a"));
+        await click(target.querySelector(".breadcrumb li a"));
         await nextTick(); // wait for the webclient template to be re-rendered
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_main_navbar");
     });
 
@@ -534,15 +481,11 @@ QUnit.module("ActionManager", (hooks) => {
         ] = `<form><button name="1" type="action" class="oe_stat_button" /></form>`;
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 6);
-        assert.containsNone(target, ".o_main_navbar");
-        await testUtils.dom.click($(target).find("button[name=1]"));
-        await nextTick(); // wait for the webclient template to be re-rendered
-        await legacyExtraNextTick();
-        assert.containsNone(target, ".o_main_navbar");
-        await testUtils.dom.click($(target).find(".breadcrumb li a:first"));
-        await nextTick(); // wait for the webclient template to be re-rendered
-        await legacyExtraNextTick();
-        assert.containsNone(target, ".o_main_navbar");
+        assert.isNotVisible(target.querySelector(".o_main_navbar"));
+        await click(target.querySelector("button[name='1']"));
+        assert.isNotVisible(target.querySelector(".o_main_navbar"));
+        await click(target.querySelector(".breadcrumb li a"));
+        assert.isNotVisible(target.querySelector(".o_main_navbar"));
     });
 
     QUnit.test(
@@ -557,22 +500,18 @@ QUnit.module("ActionManager", (hooks) => {
                 '<form><button name="24" type="action" class="oe_stat_button"/></form>';
             await createWebClient({ serverData });
             await nextTick(); // wait for the load state (default app)
-            await legacyExtraNextTick();
             assert.containsOnce(target, "nav .o_menu_brand");
-            assert.strictEqual($(target).find("nav .o_menu_brand").text(), "MAIN APP");
-            await testUtils.dom.click($(target).find('button[name="24"]'));
+            assert.strictEqual(target.querySelector("nav .o_menu_brand").innerText, "MAIN APP");
+            await click(target.querySelector("button[name='24']"));
             await nextTick(); // wait for the webclient template to be re-rendered
-            await legacyExtraNextTick();
             assert.containsOnce(target, "nav .o_menu_brand");
-            await testUtils.dom.click($(target).find('button[name="1"]'));
+            await click(target.querySelector("button[name='1']"));
             await nextTick(); // wait for the webclient template to be re-rendered
-            await legacyExtraNextTick();
             assert.containsNone(target, "nav.o_main_navbar");
-            await testUtils.dom.click($(target).find(".breadcrumb li a")[1]);
+            await click(target.querySelectorAll(".breadcrumb li a")[1]);
             await nextTick(); // wait for the webclient template to be re-rendered
-            await legacyExtraNextTick();
             assert.containsOnce(target, "nav .o_menu_brand");
-            assert.strictEqual($(target).find("nav .o_menu_brand").text(), "MAIN APP");
+            assert.strictEqual(target.querySelector("nav .o_menu_brand").innerText, "MAIN APP");
         }
     );
 
@@ -627,7 +566,6 @@ QUnit.module("ActionManager", (hooks) => {
 
         // open first record
         await click(target.querySelector(".o_data_row .o_data_cell"));
-        await legacyExtraNextTick();
 
         assert.containsOnce(target, ".o_form_view");
         assert.containsN(target, ".breadcrumb-item", 2);
@@ -659,7 +597,6 @@ QUnit.module("ActionManager", (hooks) => {
 
         // open first record
         await click(target.querySelector(".o_data_row .o_data_cell"));
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_form_view");
         assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
@@ -673,7 +610,6 @@ QUnit.module("ActionManager", (hooks) => {
 
         // go back to form view
         await click(target.querySelectorAll(".breadcrumb-item")[1]);
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".o_form_view");
         assert.containsN(target, ".breadcrumb-item", 2);
         assert.strictEqual(
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index e07427eb5e8..840fbf2adbe 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -4,15 +4,15 @@ import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
 import { editView } from "@web/views/debug_items";
 import { clearUncommittedChanges } from "@web/webclient/actions/action_service";
-import AbstractView from "web.AbstractView";
-import FormView from "web.FormView";
-import ListController from "web.ListController";
+import { listView } from "@web/views/list/list_view";
+import { useSetupAction } from "@web/webclient/actions/action_hook";
 import testUtils from "web.test_utils";
-import legacyViewRegistry from "web.view_registry";
 import { session } from "@web/session";
 import {
     click,
     getFixture,
+    editInput,
+    getNodesTextContent,
     legacyExtraNextTick,
     makeDeferred,
     nextTick,
@@ -26,7 +26,7 @@ import { WarningDialog } from "@web/core/errors/error_dialogs";
 import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 import * as cpHelpers from "@web/../tests/search/helpers";
 
-const { markup, onMounted } = owl;
+const { onMounted } = owl;
 let serverData;
 let target;
 const serviceRegistry = registry.category("services");
@@ -56,12 +56,13 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("sidebar is present in list view", async function (assert) {
         assert.expect(4);
+
         serverData.models.partner.toolbar = {
             print: [{ name: "Print that record" }],
         };
@@ -77,7 +78,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         assert.containsNone(target, ".o_cp_action_menus");
-        await testUtils.dom.clickFirst($(target).find("input.custom-control-input"));
+        await click(target.querySelector("input.custom-control-input"));
         assert.isVisible(
             $(target).find('.o_cp_action_menus button.dropdown-toggle:contains("Print")')[0]
         );
@@ -105,7 +106,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsOnce(target, ".o_list_view", "should display the list view");
         assert.containsNone(target, ".o_kanban_view", "should no longer display the kanban view");
         // open a record in form view
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsNone(target, ".o_list_view", "should no longer display the list view");
         assert.containsOnce(target, ".o_form_view", "should display the form view");
@@ -123,24 +124,23 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
+            "web_search_read",
+            "web_search_read",
+            "web_search_read",
             "read",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("switching into a view with mode=edit lands in edit mode", async function (assert) {
         serverData.views["partner,1,kanban"] = `
-    <kanban on_create="quick_create" default_group_by="m2o">
-      <templates>
-        <t t-name="kanban-box">
-          <div class="oe_kanban_global_click"><field name="foo"/></div>
-        </t>
-      </templates>
-    </kanban>
-    `;
+            <kanban on_create="quick_create" default_group_by="m2o">
+                <templates>
+                    <t t-name="kanban-box">
+                        <div class="oe_kanban_global_click"><field name="foo"/></div>
+                    </t>
+                </templates>
+            </kanban>`;
         serverData.actions[1] = {
             id: 1,
             xml_id: "action_1",
@@ -155,22 +155,18 @@ QUnit.module("ActionManager", (hooks) => {
         const mockRPC = async (route, args) => {
             assert.step((args && args.method) || route);
         };
-        assert.expect(14);
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 1);
         assert.containsOnce(target, ".o_kanban_view", "should display the kanban view");
         // quick create record
         await testUtils.dom.click(target.querySelector(".o-kanban-button-new"));
-        await testUtils.fields.editInput(
-            target.querySelector(".o_field_widget[name=display_name]"),
-            "New name"
-        );
-        await legacyExtraNextTick();
+        await editInput(target, ".o_field_widget[name=display_name] input", "New name");
+
         // edit quick-created record
         await testUtils.dom.click(target.querySelector(".o_kanban_edit"));
         assert.containsOnce(
             target,
-            ".o_form_view.o_form_editable",
+            ".o_form_view .o_form_editable",
             "should display the form view in edit mode"
         );
         assert.verifySteps([
@@ -178,12 +174,11 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/action/load",
             "get_views",
             "web_read_group",
-            "/web/dataset/search_read",
-            "/web/dataset/search_read",
+            "web_search_read",
+            "web_search_read",
             "onchange",
             "name_create",
             "read",
-            "onchange",
             "read",
         ]);
     });
@@ -211,7 +206,7 @@ QUnit.module("ActionManager", (hooks) => {
             ];
             let searchReadCount = 1;
             const mockRPC = async (route, args) => {
-                if (route === "/web/dataset/search_read") {
+                if (args.method === "web_search_read") {
                     args = args || {};
                     if (searchReadCount === 1) {
                         assert.strictEqual(args.model, "partner");
@@ -219,7 +214,7 @@ QUnit.module("ActionManager", (hooks) => {
                     }
                     if (searchReadCount === 2) {
                         assert.strictEqual(args.model, "partner");
-                        assert.strictEqual(args.sort, "foo ASC");
+                        assert.strictEqual(args.kwargs.order, "foo ASC");
                     }
                     if (searchReadCount === 3) {
                         assert.strictEqual(args.model, "pony");
@@ -231,14 +226,11 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
             // Sort records
-            await testUtils.dom.click($(target).find(".o_list_view th.o_column_sortable"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_view th.o_column_sortable"));
             // Get to the form view of the model, on the first record
-            await testUtils.dom.click($(target).find(".o_data_cell:first"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_data_cell"));
             // Execute another action by clicking on the button within the form
-            await testUtils.dom.click($(target).find("button[name=8]"));
-            await legacyExtraNextTick();
+            await click(target.querySelector('button[name="8"]'));
         }
     );
 
@@ -309,7 +301,7 @@ QUnit.module("ActionManager", (hooks) => {
             "breadcrumbs should still display the display_name of the action"
         );
         // open a record in form view
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsN(
             target,
@@ -401,7 +393,7 @@ QUnit.module("ActionManager", (hooks) => {
             "list should now be the active view"
         );
         // open a record in form view
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsNone(
             target,
@@ -425,6 +417,7 @@ QUnit.module("ActionManager", (hooks) => {
     });
     QUnit.test("pager is updated when switching between views", async function (assert) {
         assert.expect(10);
+
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 4);
         assert.strictEqual(
@@ -451,7 +444,7 @@ QUnit.module("ActionManager", (hooks) => {
             "limit should be correct for list"
         );
         // open a record in form view
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.strictEqual(
             $(target).find(".o_control_panel .o_pager_value").text(),
@@ -548,7 +541,7 @@ QUnit.module("ActionManager", (hooks) => {
         assert.containsOnce(target, ".o_list_view", "should now display the list view");
         // open a record in form view
         def = testUtils.makeTestPromise();
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsOnce(target, ".o_list_view", "should still display the list view");
         assert.containsNone(target, ".o_form_view", "shouldn't display the form view yet");
@@ -597,7 +590,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsN(
             target,
@@ -611,12 +604,9 @@ QUnit.module("ActionManager", (hooks) => {
             "breadcrumbs should contain the display_name of the opened record"
         );
         // switch to edit mode and change the display_name
-        await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
-        await testUtils.fields.editInput(
-            target.querySelector(".o_field_widget[name=display_name]"),
-            "New name"
-        );
-        await testUtils.dom.click(target.querySelector(".o_control_panel .o_form_button_save"));
+        await click(target.querySelector(".o_control_panel .o_form_button_edit"));
+        await editInput(target, ".o_field_widget[name=display_name] input", "New name");
+        await click(target.querySelector(".o_control_panel .o_form_button_save"));
         assert.containsN(
             target,
             ".o_control_panel .breadcrumb-item",
@@ -635,23 +625,21 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         await testUtils.dom.click($(target).find(".o_form_view button:contains(Execute action)"));
-        await legacyExtraNextTick();
         assert.containsN(target, ".o_control_panel .breadcrumb li", 3);
         let $previousBreadcrumb = $(target).find(".o_control_panel .breadcrumb li.active").prev();
         assert.strictEqual(
-            $previousBreadcrumb.attr("accesskey"),
+            $previousBreadcrumb.attr("data-hotkey"),
             "b",
             "previous breadcrumb should have accessKey 'b'"
         );
         await testUtils.dom.click($previousBreadcrumb);
-        await legacyExtraNextTick();
         assert.containsN(target, ".o_control_panel .breadcrumb li", 2);
         $previousBreadcrumb = $(target).find(".o_control_panel .breadcrumb li.active").prev();
         assert.strictEqual(
-            $previousBreadcrumb.attr("accesskey"),
+            $previousBreadcrumb.attr("data-hotkey"),
             "b",
             "previous breadcrumb should have accessKey 'b'"
         );
@@ -669,7 +657,7 @@ QUnit.module("ActionManager", (hooks) => {
         await legacyExtraNextTick();
         assert.containsOnce(
             target,
-            ".o_form_view.o_form_editable",
+            ".o_form_view .o_form_editable",
             "should have opened the form view in edit mode"
         );
         // discard
@@ -680,9 +668,9 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "onchange",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
@@ -719,7 +707,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.strictEqual(
             $(target).find(".o_field_widget[name=foo]").text(),
@@ -738,7 +726,7 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
             "object",
             "read",
@@ -773,7 +761,7 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view");
             // open first record in form view
-            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_row"));
+            await testUtils.dom.click(target.querySelector(".o_list_view .o_data_cell"));
             await legacyExtraNextTick();
             assert.containsOnce(target, ".o_form_view");
             // click on 'Execute action', to execute action 4 in a dialog
@@ -859,7 +847,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         // click on 'Execute action' button (should execute an action)
         assert.containsN(
@@ -885,22 +873,23 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("execute smart button and back", async function (assert) {
-        assert.expect(8);
         const mockRPC = async (route, args) => {
             if (args.method === "read") {
+                assert.step("read");
                 assert.notOk("default_partner" in args.kwargs.context);
             }
-            if (route === "/web/dataset/search_read") {
-                assert.strictEqual(args.context.default_partner, 2);
+            if (args.method === "web_search_read") {
+                assert.step("web_search_read");
+                assert.strictEqual(args.kwargs.context.default_partner, 2);
             }
         };
         const webClient = await createWebClient({ serverData, mockRPC });
@@ -914,13 +903,14 @@ QUnit.module("ActionManager", (hooks) => {
         await legacyExtraNextTick();
         assert.containsOnce(target, ".o_form_view");
         assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
+        assert.verifySteps(["read", "web_search_read", "read"]);
     });
 
     QUnit.test("execute smart button and fails", async function (assert) {
-        assert.expect(12);
+        assert.expect(13);
         const mockRPC = async (route, args) => {
             assert.step(route);
-            if (route === "/web/dataset/search_read") {
+            if (args.method === "web_search_read") {
                 return Promise.reject();
             }
         };
@@ -939,7 +929,8 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/dataset/call_kw/partner/read",
             "/web/action/load",
             "/web/dataset/call_kw/partner/get_views",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
+            "/web/dataset/call_kw/partner/read",
         ]);
     });
 
@@ -958,7 +949,7 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+            await click(target.querySelector(".o_list_view .o_data_cell"));
             await legacyExtraNextTick();
             // click on 'Call method' button (should call an Object method)
             def = testUtils.makeTestPromise();
@@ -984,7 +975,6 @@ QUnit.module("ActionManager", (hooks) => {
     );
 
     QUnit.test("action with html help returned by a call_button", async function (assert) {
-        assert.expect(1);
         const mockRPC = async (route, args) => {
             if (route === "/web/dataset/call_button") {
                 return Promise.resolve({
@@ -1000,11 +990,9 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
 
         // open a record in form view
-        await click(target.querySelector(".o_list_view .o_data_row"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_view .o_data_row .o_data_cell"));
 
         await click(target.querySelector(".o_statusbar_buttons button"));
-        await legacyExtraNextTick();
         assert.strictEqual(
             target.querySelector(".o_list_view .o_nocontent_help p").innerText,
             "I am not a helper"
@@ -1019,7 +1007,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open the first record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.strictEqual(
             $(target).find(".o_control_panel .breadcrumb-item:last").text(),
@@ -1035,7 +1023,9 @@ QUnit.module("ActionManager", (hooks) => {
         await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a"));
         await legacyExtraNextTick();
         // open the second record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:nth(1)"));
+        await testUtils.dom.click(
+            $(target).find(".o_list_view .o_data_row:nth(1) .o_data_cell:first")
+        );
         await legacyExtraNextTick();
         assert.strictEqual(
             $(target).find(".o_control_panel .breadcrumb-item:last").text(),
@@ -1051,9 +1041,9 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
-            "/web/dataset/search_read",
+            "web_search_read",
             "read",
         ]);
     });
@@ -1158,19 +1148,18 @@ QUnit.module("ActionManager", (hooks) => {
     });
 
     QUnit.test("can open a many2one external window", async function (assert) {
-        assert.expect(9);
         serverData.models.partner.records[0].bar = 2;
         serverData.views["partner,false,search"] = `
-      <search>
-        <group>
-          <filter name="foo" string="foo" context="{'group_by': 'foo'}"/>
-        </group>
-      </search>`;
+            <search>
+                <group>
+                    <filter name="foo" string="foo" context="{'group_by': 'foo'}"/>
+                </group>
+            </search>`;
         serverData.views["partner,false,form"] = `
-      <form>
-        <field name="foo"/>
-        <field name="bar"/>
-      </form>`;
+            <form>
+                <field name="foo"/>
+                <field name="bar"/>
+            </form>`;
         const mockRPC = async (route, args) => {
             assert.step(route);
             if (args && args.method === "get_formview_id") {
@@ -1180,22 +1169,19 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         // open first record in form view
-        await testUtils.dom.click($(target).find(".o_data_row:first"));
-        await legacyExtraNextTick();
+        await testUtils.dom.click(target.querySelector(".o_data_row .o_data_cell"));
         // click on edit
-        await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
-        await legacyExtraNextTick();
+        await testUtils.dom.click(target.querySelector(".o_control_panel .o_form_button_edit"));
         // click on external button for m2o
-        await testUtils.dom.click($(target).find(".o_external_button"));
-        await legacyExtraNextTick();
+        await testUtils.dom.click(target.querySelector(".o_external_button"));
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
             "/web/dataset/call_kw/partner/get_views",
-            "/web/dataset/search_read",
+            "/web/dataset/call_kw/partner/web_search_read",
             "/web/dataset/call_kw/partner/read",
             "/web/dataset/call_kw/partner/get_formview_id",
-            "/web/dataset/call_kw/partner",
+            "/web/dataset/call_kw/partner/get_views",
             "/web/dataset/call_kw/partner/read",
         ]);
     });
@@ -1210,14 +1196,12 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 4);
         // open record in form view
-        await testUtils.dom.click($(target).find(".o_kanban_record:first")[0]);
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_kanban_record"));
         // edit record
-        await testUtils.dom.click($(target).find(".o_control_panel button.o_form_button_edit"));
-        await testUtils.fields.editInput($(target).find('input[name="foo"]'), "pinkypie");
+        await click(target.querySelector(".o_control_panel button.o_form_button_edit"));
+        await editInput(target, '.o_field_widget[name="foo"] input', "pinkypie");
         // go back to kanban view
-        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:first a"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_control_panel .breadcrumb-item a"));
         assert.containsNone(document.body, ".modal", "should not display a modal dialog");
         assert.containsNone(target, ".o_form_view", "should no longer be in form view");
         assert.containsOnce(target, ".o_kanban_view", "should be in kanban view");
@@ -1240,7 +1224,7 @@ QUnit.module("ActionManager", (hooks) => {
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3);
         // open a record in form view
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         await legacyExtraNextTick();
         assert.containsN(
             target,
@@ -1316,18 +1300,18 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
+            await click(target.querySelector(".o_list_view .o_data_cell"));
             await legacyExtraNextTick();
             // switch to edit mode
-            await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
+            await click(target.querySelector(".o_control_panel .o_form_button_edit"));
             await legacyExtraNextTick();
-            assert.hasClass($(target).find(".o_form_view")[0], "o_form_editable");
+            assert.containsOnce(target, ".o_form_view .o_form_editable");
             // do some other action
             await doAction(webClient, 4);
             // go back to form view
-            await testUtils.dom.clickLast($(target).find(".o_control_panel .breadcrumb a"));
+            await click(target.querySelectorAll(".o_control_panel .breadcrumb a")[1]);
             await legacyExtraNextTick();
-            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
         }
     );
 
@@ -1338,15 +1322,16 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 3);
             // open a record in form view
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_view .o_data_row .o_data_cell"));
+            await nextTick(); // wait for the router to update its state
             assert.strictEqual(webClient.env.services.router.current.hash.id, 1);
             // do some other action
             await doAction(webClient, 4);
+            await nextTick(); // wait for the router to update its state
             assert.notOk(webClient.env.services.router.current.hash.id);
             // go back to form view
-            await testUtils.dom.clickLast($(target).find(".o_control_panel .breadcrumb a"));
-            await legacyExtraNextTick();
+            await click(target.querySelectorAll(".o_control_panel .breadcrumb a")[1]);
+            await nextTick(); // wait for the router to update its state
             assert.strictEqual(webClient.env.services.router.current.hash.id, 1);
         }
     );
@@ -1370,17 +1355,11 @@ QUnit.module("ActionManager", (hooks) => {
             "should be grouped by 'bar' (two groups) at first load"
         );
         // groupby 'bar' using the searchview
-        await testUtils.dom.click(
-            $(target).find(".o_control_panel .o_cp_bottom_right button:contains(Group By)")
-        );
-        await testUtils.dom.click(
-            $(target).find(".o_control_panel .o_group_by_menu .o_menu_item:first")
-        );
-        await legacyExtraNextTick();
+        await click(target.querySelectorAll(".o_control_panel .o_cp_bottom_right button")[1]);
+        await click(target.querySelector(".o_control_panel .o_group_by_menu .o_menu_item"));
         assert.containsN(target, ".o_group_header", 5, "should be grouped by 'foo' (five groups)");
         // remove the groupby in the searchview
-        await testUtils.dom.click($(target).find(".o_control_panel .o_searchview .o_facet_remove"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_control_panel .o_searchview .o_facet_remove"));
         assert.containsOnce(target, ".o_list_table_grouped", "should still be grouped");
         assert.containsN(
             target,
@@ -1417,20 +1396,20 @@ QUnit.module("ActionManager", (hooks) => {
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
         ]);
     });
 
     QUnit.test("flags field of ir.actions.act_window is used", async function (assert) {
         // more info about flags field : https://github.com/odoo/odoo/commit/c9b133813b250e89f1f61816b0eabfb9bee2009d
-        assert.expect(7);
+        assert.expect(6);
         serverData.actions[44] = {
             id: 33,
             name: "Partners",
             res_model: "partner",
             type: "ir.actions.act_window",
             flags: {
-                withControlPanel: false,
+                mode: "readonly",
             },
             views: [[false, "form"]],
         };
@@ -1439,12 +1418,11 @@ QUnit.module("ActionManager", (hooks) => {
         };
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 44);
-        assert.containsOnce(target, ".o_form_view", "should display the form view");
-        assert.containsNone(
-            document.body,
-            ".o_control_panel",
-            "should not display the control panel"
-        );
+        assert.containsOnce(
+            target,
+            ".o_form_view .o_form_readonly",
+            "should display the form view in readonly mode"
+        ); // provided that the default mode is edit
 
         assert.verifySteps([
             "/web/webclient/load_menus",
@@ -1456,15 +1434,7 @@ QUnit.module("ActionManager", (hooks) => {
 
     QUnit.test("save current search", async function (assert) {
         assert.expect(4);
-        testUtils.mock.patch(ListController, {
-            getOwnedQueryParams: function () {
-                return {
-                    context: {
-                        shouldBeInFilterContext: true,
-                    },
-                };
-            },
-        });
+
         serverData.actions[33] = {
             id: 33,
             context: {
@@ -1476,28 +1446,28 @@ QUnit.module("ActionManager", (hooks) => {
             type: "ir.actions.act_window",
             views: [[false, "list"]],
         };
-        const legacyParams = {
-            dataManager: {
-                create_filter: function (filter) {
-                    assert.strictEqual(
-                        filter.domain,
-                        `[("bar", "=", 1)]`,
-                        "should save the correct domain"
-                    );
-                    const expectedContext = {
-                        group_by: [],
-                        shouldBeInFilterContext: true,
-                    };
-                    assert.deepEqual(
-                        filter.context,
-                        expectedContext,
-                        "should save the correct context"
-                    );
-                },
-            },
-        };
         patchWithCleanup(browser, { setTimeout: (fn) => fn() });
-        const webClient = await createWebClient({ serverData, legacyParams });
+        patchWithCleanup(listView.Controller.prototype, {
+            setup() {
+                this._super(...arguments);
+                useSetupAction({
+                    getContext: () => ({ shouldBeInFilterContext: true }),
+                });
+            },
+        });
+
+        const mockRPC = async (route, args) => {
+            if (args.method === "create_or_replace") {
+                assert.strictEqual(args.args[0].domain, `[("bar", "=", 1)]`);
+                assert.deepEqual(args.args[0].context, {
+                    group_by: [],
+                    shouldBeInFilterContext: true,
+                });
+                return 3; // fake filter id
+            }
+        };
+        const webClient = await createWebClient({ serverData, mockRPC });
+
         await doAction(webClient, 33);
         assert.containsN(target, ".o_data_row", 5, "should contain 5 records");
         // filter on bar
@@ -1509,14 +1479,11 @@ QUnit.module("ActionManager", (hooks) => {
         await cpHelpers.toggleSaveFavorite(target);
         await cpHelpers.editFavoriteName(target, "some name");
         await cpHelpers.saveFavorite(target);
-        await legacyExtraNextTick();
-        testUtils.mock.unpatch(ListController);
     });
 
     QUnit.test(
         "list with default_order and favorite filter with no orderedBy",
         async function (assert) {
-            assert.expect(5);
             serverData.views["partner,1,list"] =
                 '<tree default_order="foo desc"><field name="foo"/></tree>';
             serverData.actions[100] = {
@@ -1541,40 +1508,39 @@ QUnit.module("ActionManager", (hooks) => {
             ];
             const webClient = await createWebClient({ serverData });
             await doAction(webClient, 100);
-            assert.strictEqual(
-                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
-                "zoupyopplopgnapblip",
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell")),
+                ["zoup", "yop", "plop", "gnap", "blip"],
                 "record should be in descending order as default_order applies"
             );
+
             await cpHelpers.toggleFavoriteMenu(target);
             await cpHelpers.toggleMenuItem(target, "favorite filter");
-            await legacyExtraNextTick();
             assert.strictEqual(
-                $(target).find(".o_control_panel .o_facet_values").text().trim(),
+                target.querySelector(".o_control_panel .o_facet_values").innerText.trim(),
                 "favorite filter",
                 "favorite filter should be applied"
             );
-            assert.strictEqual(
-                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
-                "gnapblip",
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell")),
+                ["gnap", "blip"],
                 "record should still be in descending order after default_order applied"
             );
+
             // go to formview and come back to listview
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await legacyExtraNextTick();
-            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:eq(0)"));
-            await legacyExtraNextTick();
-            assert.strictEqual(
-                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
-                "gnapblip",
+            await click(target.querySelector(".o_list_view .o_data_row .o_data_cell"));
+            await testUtils.dom.click(target.querySelector(".o_control_panel .breadcrumb a"));
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell")),
+                ["gnap", "blip"],
                 "order of records should not be changed, while coming back through breadcrumb"
             );
+
             // remove filter
             await cpHelpers.removeFacet(target, 0);
-            await legacyExtraNextTick();
-            assert.strictEqual(
-                $(target).find(".o_list_view tr.o_data_row .o_data_cell").text(),
-                "zoupyopplopgnapblip",
+            assert.deepEqual(
+                getNodesTextContent(target.querySelectorAll(".o_data_row .o_data_cell")),
+                ["zoup", "yop", "plop", "gnap", "blip"],
                 "order of records should not be changed, after removing current filter"
             );
         }
@@ -1664,14 +1630,13 @@ QUnit.module("ActionManager", (hooks) => {
     });
 
     QUnit.test("execute action from dirty, new record, and come back", async function (assert) {
-        assert.expect(18);
         serverData.models.partner.fields.bar.default = 1;
         serverData.views["partner,false,form"] = `
-      <form>
-        <field name="display_name"/>
-        <field name="foo"/>
-        <field name="bar" readonly="1"/>
-      </form>`;
+            <form>
+                <field name="display_name"/>
+                <field name="foo"/>
+                <field name="bar" readonly="1"/>
+            </form>`;
         const mockRPC = async (route, args) => {
             assert.step((args && args.method) || route);
             if (args && args.method === "get_formview_action") {
@@ -1684,40 +1649,41 @@ QUnit.module("ActionManager", (hooks) => {
             }
         };
         const webClient = await createWebClient({ serverData, mockRPC });
+
         // execute an action and create a new record
         await doAction(webClient, 3);
-        await testUtils.dom.click($(target).find(".o_list_button_add"));
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_form_view.o_form_editable");
+        await click(target.querySelector(".o_list_button_add"));
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
         assert.containsOnce(target, ".o_form_uri:contains(First record)");
-        assert.strictEqual(
-            $(target).find(".o_control_panel .breadcrumb-item").text(),
-            "PartnersNew"
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_control_panel .breadcrumb-item")),
+            ["Partners", "New"]
         );
+
         // set form view dirty and open m2o record
-        await testUtils.fields.editInput($(target).find('input[name="display_name"]'), "test");
-        await testUtils.fields.editInput($(target).find("input[name=foo]"), "val");
-        await testUtils.dom.click($(target).find(".o_form_uri:contains(First record)"));
-        await legacyExtraNextTick();
-        assert.containsOnce(target, ".o_form_view.o_form_readonly");
-        assert.strictEqual(
-            $(target).find(".o_control_panel .breadcrumb-item").text(),
-            "PartnerstestFirst record"
+        await editInput(target, '.o_field_widget[name="display_name"] input', "test");
+        await editInput(target, ".o_field_widget[name=foo] input", "val");
+        await click(target.querySelector(".o_form_uri"));
+        assert.containsOnce(target, ".o_form_view .o_form_readonly");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_control_panel .breadcrumb-item")),
+            ["Partners", "test", "First record"]
         );
         // go back to test using the breadcrumbs
-        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
-        await legacyExtraNextTick();
+        await testUtils.dom.click(
+            target.querySelectorAll(".o_control_panel .breadcrumb-item a")[1]
+        );
         // should be readonly and so saved
-        assert.containsOnce(target, ".o_form_view.o_form_readonly");
-        assert.strictEqual(
-            $(target).find(".o_control_panel .breadcrumb-item").text(),
-            "Partnerstest"
+        assert.containsOnce(target, ".o_form_view .o_form_readonly");
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_control_panel .breadcrumb-item")),
+            ["Partners", "test"]
         );
         assert.verifySteps([
             "/web/webclient/load_menus",
             "/web/action/load",
             "get_views",
-            "/web/dataset/search_read",
+            "web_search_read",
             "onchange",
             "get_formview_action",
             "create", // FIXME: to check with mcm
@@ -1748,20 +1714,17 @@ QUnit.module("ActionManager", (hooks) => {
         // execute an action and open a record
         await doAction(webClient, 3);
         assert.containsOnce(target, ".o_list_view");
-        await testUtils.dom.click($(target).find(".o_data_row:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_data_row .o_data_cell"));
         assert.containsOnce(target, ".o_form_view");
         // execute the custom action from the action menu
-        await testUtils.controlPanel.toggleActionMenu(target);
-        await testUtils.controlPanel.toggleMenuItem(target, "Favorite Ponies");
-        await legacyExtraNextTick();
+        await cpHelpers.toggleActionMenu(target);
+        await cpHelpers.toggleMenuItem(target, "Favorite Ponies");
         assert.containsOnce(target, ".o_list_view");
     });
 
     QUnit.test(
         "go back to action with form view as main view, and res_id",
         async function (assert) {
-            assert.expect(7);
             serverData.actions[999] = {
                 id: 999,
                 name: "Partner",
@@ -1783,24 +1746,20 @@ QUnit.module("ActionManager", (hooks) => {
             };
             const webClient = await createWebClient({ serverData, mockRPC });
             await doAction(webClient, 999);
-            assert.containsOnce(target, ".o_form_view");
-            assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
             assert.strictEqual(
                 target.querySelector(".o_control_panel .breadcrumb").textContent,
                 "Second record"
             );
             // push another action in the breadcrumb
-            await testUtils.dom.click($(target).find(".o_form_uri:contains(Third record)"));
-            await legacyExtraNextTick();
+            await click(target, ".o_field_many2one .o_form_uri");
             assert.strictEqual(
                 target.querySelector(".o_control_panel .breadcrumb").textContent,
                 "Second recordThird record"
             );
             // go back to the form view
-            await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb a:first"));
-            await legacyExtraNextTick();
-            assert.containsOnce(target, ".o_form_view");
-            assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
+            await click(target.querySelector(".o_control_panel .breadcrumb a"));
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
             assert.strictEqual(
                 target.querySelector(".o_control_panel .breadcrumb-item").textContent,
                 "Second record"
@@ -1815,19 +1774,16 @@ QUnit.module("ActionManager", (hooks) => {
         await doAction(webClient, 3);
         assert.containsOnce(target, ".o_list_view");
         assert.containsN(target, ".o_list_view .o_data_row", 5);
-        await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_view .o_data_cell"));
         assert.containsOnce(target, ".o_form_view");
-        assert.hasClass(target.querySelector(".o_form_view"), "o_form_readonly");
+        assert.containsOnce(target, ".o_form_view .o_form_readonly");
         // go back using the breadcrumbs
-        await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item a"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_control_panel .breadcrumb-item a"));
         assert.containsOnce(target, ".o_list_view");
         // create a new record
-        await testUtils.dom.click($(target).find(".o_list_button_add"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_list_button_add"));
         assert.containsOnce(target, ".o_form_view");
-        assert.hasClass(target.querySelector(".o_form_view"), "o_form_editable");
+        assert.containsOnce(target, ".o_form_view .o_form_editable");
     });
 
     QUnit.test(
@@ -1839,26 +1795,23 @@ QUnit.module("ActionManager", (hooks) => {
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view");
             assert.containsN(target, ".o_list_view .o_data_row", 5);
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_view .o_data_cell"));
             assert.containsOnce(target, ".o_form_view");
             assert.strictEqual(
                 $(target).find(".o_field_widget[name=display_name]").text(),
                 "First record"
             );
             // switch to second record
-            await testUtils.dom.click($(target).find(".o_pager_next"));
+            await click(target.querySelector(".o_pager_next"));
             assert.strictEqual(
                 $(target).find(".o_field_widget[name=display_name]").text(),
                 "Second record"
             );
             // execute an action from the second record
             await testUtils.dom.click($(target).find(".o_statusbar_buttons button[name=4]"));
-            await legacyExtraNextTick();
             assert.containsOnce(target, ".o_kanban_view");
             // go back using the breadcrumbs
             await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
-            await legacyExtraNextTick();
             assert.containsOnce(target, ".o_form_view");
             assert.strictEqual(
                 $(target).find(".o_field_widget[name=display_name]").text(),
@@ -1875,25 +1828,19 @@ QUnit.module("ActionManager", (hooks) => {
             // execute an action and create a new record
             await doAction(webClient, 3);
             assert.containsOnce(target, ".o_list_view");
-            await testUtils.dom.click($(target).find(".o_list_button_add"));
-            await legacyExtraNextTick();
+            await click(target.querySelector(".o_list_button_add"));
             assert.containsOnce(target, ".o_form_view");
-            assert.hasClass($(target).find(".o_form_view")[0], "o_form_editable");
-            await testUtils.fields.editInput(
-                $(target).find(".o_field_widget[name=display_name]"),
-                "another record"
-            );
-            await testUtils.dom.click($(target).find(".o_form_button_save"));
-            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view .o_form_editable");
+            await editInput(target, ".o_field_widget[name=display_name] input", "another record");
+            await click(target.querySelector(".o_form_button_save"));
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
             // execute an action from the second record
             await testUtils.dom.click($(target).find(".o_statusbar_buttons button[name=4]"));
-            await legacyExtraNextTick();
             assert.containsOnce(target, ".o_kanban_view");
             // go back using the breadcrumbs
             await testUtils.dom.click($(target).find(".o_control_panel .breadcrumb-item:nth(1) a"));
-            await legacyExtraNextTick();
             assert.containsOnce(target, ".o_form_view");
-            assert.hasClass($(target).find(".o_form_view")[0], "o_form_readonly");
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
             assert.strictEqual(
                 $(target).find(".o_field_widget[name=display_name]").text(),
                 "another record"
@@ -1901,133 +1848,26 @@ QUnit.module("ActionManager", (hooks) => {
         }
     );
 
-    QUnit.test("view with js_class attribute (legacy)", async function (assert) {
-        assert.expect(2);
-        const TestView = AbstractView.extend({
-            viewType: "test_view",
-        });
-        const TestJsClassView = TestView.extend({
-            init() {
-                this._super.call(this, ...arguments);
-                assert.step("init js class");
+    QUnit.test("onClose should be called only once with right parameters", async function (assert) {
+        assert.expect(5);
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 24); // main form view
+        await doAction(webClient, 25, {
+            // form view in target new
+            onClose(infos) {
+                assert.step("onClose");
+                assert.deepEqual(infos, { cantaloupe: "island" });
             },
         });
-        serverData.views["partner,false,test_view"] = `
-      <div js_class="test_jsClass"></div>
-    `;
-        serverData.actions[9999] = {
-            id: 1,
-            name: "Partners Action 1",
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "test_view"]],
-        };
-        legacyViewRegistry.add("test_view", TestView);
-        legacyViewRegistry.add("test_jsClass", TestJsClassView);
-        const webClient = await createWebClient({ serverData });
-        await doAction(webClient, 9999);
-        assert.verifySteps(["init js class"]);
-        delete legacyViewRegistry.map.test_view;
-        delete legacyViewRegistry.map.test_jsClass;
+        assert.containsOnce(target, ".modal");
+        await doAction(webClient, {
+            type: "ir.actions.act_window_close",
+            infos: { cantaloupe: "island" },
+        });
+        assert.verifySteps(["onClose"]);
+        assert.containsNone(target, ".modal");
     });
 
-    QUnit.test(
-        "on_close should be called only once with right parameters in js_class form view",
-        async function (assert) {
-            assert.expect(4);
-            // This test is quite specific but matches a real case in legacy: event_configurator_widget.js
-            // Clicking on form view's action button triggers its own mechanism: it saves the record and closes the dialog.
-            // Now it is possible that the dialog action wants to do something of its own at closing time, to, for instance
-            // update the main action behind it, with specific parameters.
-            // This test ensures that this flow is supported in legacy,
-            const TestCustoFormController = FormView.prototype.config.Controller.extend({
-                async saveRecord() {
-                    await this._super.apply(this, arguments);
-                    this.do_action({
-                        type: "ir.actions.act_window_close",
-                        infos: { cantaloupe: "island" },
-                    });
-                },
-            });
-            const TestCustoFormView = FormView.extend({
-                config: Object.assign({}, FormView.prototype.config, {
-                    Controller: TestCustoFormController,
-                }),
-            });
-            legacyViewRegistry.add("test_view", TestCustoFormView);
-            serverData.views["partner,3,form"] = `
-      <form js_class="test_view">
-        <field name="foo" />
-        <footer>
-          <button string="Echoes" special="save" />
-        </footer>
-      </form>`;
-            const webClient = await createWebClient({ serverData });
-            await doAction(webClient, 24); // main form view
-            await doAction(webClient, 25, {
-                // Custom jsClass form view in target new
-                onClose(infos) {
-                    assert.step("onClose");
-                    assert.deepEqual(infos, { cantaloupe: "island" });
-                },
-            });
-            // Close dialog by clicking on save button
-            await testUtils.dom.click(
-                target.querySelector(".o_dialog .modal-footer button[special=save]")
-            );
-            assert.verifySteps(["onClose"]);
-            await legacyExtraNextTick();
-            assert.containsNone(target, ".modal");
-            delete legacyViewRegistry.map.test_view;
-        }
-    );
-
-    QUnit.test(
-        "execute action without modal closes bootstrap tooltips anyway",
-        async function (assert) {
-            assert.expect(12);
-            Object.assign(serverData.views, {
-                "partner,666,form": `<form>
-            <header>
-              <button name="object" string="Call method" type="object" help="need somebody"/>
-            </header>
-            <field name="display_name"/>
-          </form>`,
-            });
-            const mockRPC = async (route, args) => {
-                assert.step(route);
-                if (route === "/web/dataset/call_button") {
-                    // Some business stuff server side, then return an implicit close action
-                    return Promise.resolve(false);
-                }
-            };
-            const webClient = await createWebClient({ serverData, mockRPC });
-            await doAction(webClient, 24);
-            assert.verifySteps([
-                "/web/webclient/load_menus",
-                "/web/action/load",
-                "/web/dataset/call_kw/partner/get_views",
-                "/web/dataset/call_kw/partner/read",
-            ]);
-            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
-            const actionButton = target.querySelector("button[name=object]");
-            const tooltipProm = new Promise((resolve) => {
-                $(document.body).one("shown.bs.tooltip", () => {
-                    $(actionButton).mouseleave();
-                    resolve();
-                });
-            });
-            $(actionButton).mouseenter();
-            await tooltipProm;
-            assert.containsN(document.body, ".tooltip", 1);
-            await click(actionButton);
-            await legacyExtraNextTick();
-            assert.verifySteps(["/web/dataset/call_button", "/web/dataset/call_kw/partner/read"]);
-            assert.containsNone(document.body, ".tooltip"); // body different from webClient in tests !
-            assert.containsN(target, ".o_form_buttons_view button:not([disabled])", 2);
-        }
-    );
-
     QUnit.test("search view should keep focus during do_search", async function (assert) {
         assert.expect(5);
         // One should be able to type something in the search view, press on enter to
@@ -2037,8 +1877,8 @@ QUnit.module("ActionManager", (hooks) => {
         // because of how native events are handled in tests
         const searchPromise = testUtils.makeTestPromise();
         const mockRPC = async (route, args) => {
-            if (route === "/web/dataset/search_read") {
-                assert.step("search_read " + args.domain);
+            if (args.method === "web_search_read") {
+                assert.step("search_read " + args.kwargs.domain);
                 if (JSON.stringify(args.domain) === JSON.stringify([["foo", "ilike", "m"]])) {
                     await searchPromise;
                 }
@@ -2072,19 +1912,16 @@ QUnit.module("ActionManager", (hooks) => {
             const webClient = await createWebClient({ serverData, mockRPC });
             // execute an action and edit existing record
             await doAction(webClient, 3);
-            await testUtils.dom.click($(target).find(".o_list_view .o_data_row:first"));
-            await legacyExtraNextTick();
-            assert.containsOnce(target, ".o_form_view.o_form_readonly");
-            await testUtils.dom.click($(target).find(".o_control_panel .o_form_button_edit"));
-            assert.containsOnce(target, ".o_form_view.o_form_editable");
-            await testUtils.fields.editInput($(target).find("input[name=foo]"), "val");
+            await click(target.querySelector(".o_list_view .o_data_cell"));
+            assert.containsOnce(target, ".o_form_view .o_form_readonly");
+            await click(target.querySelector(".o_control_panel .o_form_button_edit"));
+            assert.containsOnce(target, ".o_form_view .o_form_editable");
+            await editInput(target, ".o_field_widget[name=foo] input", "val");
             clearUncommittedChanges(webClient.env);
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
+            await nextTick();
             assert.containsNone(document.body, ".modal");
             clearUncommittedChanges(webClient.env);
-            await testUtils.nextTick();
-            await legacyExtraNextTick();
+            await nextTick();
             assert.containsNone(document.body, ".modal");
             assert.strictEqual(writeCalls, 1);
         }
@@ -2093,12 +1930,7 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         "executing a window action with onchange warning does not hide it",
         async function (assert) {
-            assert.expect(2);
-
-            serverData.views["partner,false,form"] = `
-            <form>
-              <field name="foo"/>
-            </form>`;
+            serverData.views["partner,false,form"] = `<form><field name="foo"/></form>`;
             const mockRPC = (route, args) => {
                 if (args.method === "onchange") {
                     return Promise.resolve({
@@ -2115,16 +1947,14 @@ QUnit.module("ActionManager", (hooks) => {
 
             await doAction(webClient, 3);
 
-            await testUtils.dom.click(target.querySelector(".o_list_button_add"));
+            await click(target.querySelector(".o_list_button_add"));
             assert.containsOnce(
                 document.body,
                 ".modal.o_technical_modal",
                 "Warning modal should be opened"
             );
 
-            await testUtils.dom.click(
-                document.querySelector(".modal.o_technical_modal button.close")
-            );
+            await click(document.querySelector(".modal.o_technical_modal button.close"));
             assert.containsNone(
                 document.body,
                 ".modal.o_technical_modal",
@@ -2136,44 +1966,19 @@ QUnit.module("ActionManager", (hooks) => {
     QUnit.test(
         "do not call clearUncommittedChanges() when target=new and dialog is opened",
         async function (assert) {
-            assert.expect(2);
             const webClient = await createWebClient({ serverData });
             // Open Partner form view and enter some text
             await doAction(webClient, 3, { viewType: "form" });
-            await legacyExtraNextTick();
-            await testUtils.fields.editInput(
-                target.querySelector(".o_input[name=display_name]"),
-                "TEST"
-            );
+            assert.containsOnce(target, ".o_action_manager .o_form_view .o_form_editable");
+            await editInput(target, ".o_field_widget[name=display_name] input", "TEST");
             // Open dialog without saving should not ask to discard
             await doAction(webClient, 5);
-            await legacyExtraNextTick();
-            assert.containsOnce(target, ".o_dialog");
-            assert.containsOnce(target, ".o_dialog .o_act_window .o_view_controller");
+            assert.containsOnce(target, ".o_action_manager .o_form_view .o_form_editable");
+            assert.containsOnce(target, ".o_dialog .o_view_controller");
         }
     );
 
     QUnit.test("do not pushState when target=new and dialog is opened", async function (assert) {
-        assert.expect(2);
-        const TestCustoFormController = FormView.prototype.config.Controller.extend({
-            _onButtonClicked() {
-                assert.ok(true, "Button was clicked");
-                this.trigger_up("push_state", { state: { id: 42 } });
-            },
-        });
-        const TestCustoFormView = FormView.extend({
-            config: Object.assign({}, FormView.prototype.config, {
-                Controller: TestCustoFormController,
-            }),
-        });
-        legacyViewRegistry.add("test_view", TestCustoFormView);
-        serverData.views["partner,3,form"] = `
-        <form js_class="test_view">
-            <field name="foo" />
-            <footer>
-            <button id="o_push_state_btn" special="special" />
-            </footer>
-        </form>`;
         const webClient = await createWebClient({ serverData });
         // Open Partner form in create mode
         await doAction(webClient, 3, { viewType: "form" });
@@ -2188,7 +1993,6 @@ QUnit.module("ActionManager", (hooks) => {
             target: "new",
             view_mode: "form",
         });
-        await click(document.getElementById("o_push_state_btn"));
         assert.deepEqual(
             webClient.env.services.router.current.hash,
             prevHash,
@@ -2297,8 +2101,8 @@ QUnit.module("ActionManager", (hooks) => {
             sections: [],
         });
         const mockRPC = async (route, args) => {
-            if (route === "/web/dataset/search_read") {
-                assert.deepEqual(args.domain, [["id", "=", 99]]);
+            if (args.method === "web_search_read") {
+                assert.deepEqual(args.kwargs.domain, [["id", "=", 99]]);
             }
         };
 
@@ -2311,8 +2115,6 @@ QUnit.module("ActionManager", (hooks) => {
     });
 
     QUnit.test("window action in target new fails (onchange)", async (assert) => {
-        assert.expect(3);
-
         /*
          * By-pass QUnit's and test's error handling because the error service needs to be active
          */
@@ -2368,7 +2170,7 @@ QUnit.module("ActionManager", (hooks) => {
 
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 24);
-        await click(target, ".o_form_view button");
+        await click(target, ".o_form_view button[name='5']");
 
         await warningOpened;
         assert.containsOnce(target, ".modal");
@@ -2388,23 +2190,20 @@ QUnit.module("ActionManager", (hooks) => {
 
         await doAction(webClient, 1);
         assert.containsOnce(target, ".o_kanban_view");
-        assert.verifySteps(["/web/action/load", "get_views", "/web/dataset/search_read"]);
+        assert.verifySteps(["/web/action/load", "get_views", "web_search_read"]);
 
         await doAction(webClient, 1);
         assert.containsOnce(target, ".o_kanban_view");
 
-        assert.verifySteps(["/web/dataset/search_read"]);
+        assert.verifySteps(["web_search_read"]);
     });
 
     QUnit.test("pushState also changes the title of the tab", async (assert) => {
-        assert.expect(3);
-
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 3); // list view
         const titleService = webClient.env.services.title;
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"Partners"}');
-        await click(target.querySelector(".o_data_row"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".o_data_row .o_data_cell"));
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"First record"}');
         await click(target.querySelector(".o_pager_next"));
         assert.strictEqual(titleService.current, '{"zopenerp":"Odoo","action":"Second record"}');
@@ -2444,12 +2243,12 @@ QUnit.module("ActionManager", (hooks) => {
         const action = serverData.actions[3];
         serverData.actions[3] = {
             ...action,
-            help: markup('<p class="hello">Hello</p>'),
+            help: '<p class="hello">Hello</p>',
         };
         serverData.actions[4] = {
             ...action,
             id: 4,
-            help: markup('<p class="hello"></p>'),
+            help: '<p class="hello"></p>',
         };
 
         const webClient = await createWebClient({ serverData });
diff --git a/addons/web/static/tests/webclient/helpers.js b/addons/web/static/tests/webclient/helpers.js
index 717346ba2a7..a60905a77c1 100644
--- a/addons/web/static/tests/webclient/helpers.js
+++ b/addons/web/static/tests/webclient/helpers.js
@@ -36,6 +36,7 @@ import {
     makeFakeLocalizationService,
     makeFakeRouterService,
     makeFakeHTTPService,
+    makeFakeUserService,
 } from "../helpers/mock_services";
 import {
     getFixture,
@@ -47,7 +48,6 @@ import {
 import session from "web.session";
 import LegacyMockServer from "web.MockServer";
 import Widget from "web.Widget";
-import { userService } from "@web/core/user_service";
 import { uiService } from "@web/core/ui/ui_service";
 import { ClientActionAdapter, ViewAdapter } from "@web/legacy/action_adapters";
 import { commandService } from "@web/core/commands/command_service";
@@ -95,7 +95,7 @@ export function setupWebClientRegistries() {
         router: () => makeFakeRouterService(),
         title: () => fakeTitleService,
         ui: () => uiService,
-        user: () => userService,
+        user: () => makeFakeUserService(),
         view: () => viewService,
     };
     for (let serviceName in services) {
diff --git a/addons/web/static/tests/webclient/navbar_tests.js b/addons/web/static/tests/webclient/navbar_tests.js
index db49cd67871..8cb4e44c7b6 100644
--- a/addons/web/static/tests/webclient/navbar_tests.js
+++ b/addons/web/static/tests/webclient/navbar_tests.js
@@ -4,7 +4,9 @@ import { browser } from "@web/core/browser/browser";
 import { notificationService } from "@web/core/notifications/notification_service";
 import { menuService } from "@web/webclient/menus/menu_service";
 import { registry } from "@web/core/registry";
+import { ormService } from "@web/core/orm_service";
 import { uiService } from "@web/core/ui/ui_service";
+import { viewService } from "@web/views/view_service";
 import { actionService } from "@web/webclient/actions/action_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { NavBar } from "@web/webclient/navbar/navbar";
@@ -37,6 +39,8 @@ QUnit.module("Navbar", {
         serviceRegistry.add("notification", notificationService);
         serviceRegistry.add("hotkey", hotkeyService);
         serviceRegistry.add("ui", uiService);
+        serviceRegistry.add("view", viewService); // #action-serv-leg-compat-js-class
+        serviceRegistry.add("orm", ormService); // #action-serv-leg-compat-js-class
         systrayRegistry.add("addon.myitem", { Component: MySystrayItem });
         patchWithCleanup(browser, {
             setTimeout: (handler, delay, ...args) => handler(...args),
@@ -179,21 +183,21 @@ QUnit.test("navbar updates after adding a systray item", async (assert) => {
     MyItem1.template = xml`<li class="my-item-1">my item 1</li>`;
 
     clearRegistryWithCleanup(systrayRegistry);
-    systrayRegistry.add('addon.myitem1', { Component: MyItem1 });
+    systrayRegistry.add("addon.myitem1", { Component: MyItem1 });
 
     const env = await makeTestEnv(baseConfig);
 
     patchWithCleanup(NavBar.prototype, {
         setup() {
             onRendered(() => {
-                if (!systrayRegistry.contains('addon.myitem2')) {
+                if (!systrayRegistry.contains("addon.myitem2")) {
                     class MyItem2 extends Component {}
                     MyItem2.template = xml`<li class="my-item-2">my item 2</li>`;
-                    systrayRegistry.add('addon.myitem2', {Component: MyItem2});
+                    systrayRegistry.add("addon.myitem2", { Component: MyItem2 });
                 }
             });
             this._super();
-        }
+        },
     });
 
     await mount(NavBar, target, { env });
diff --git a/addons/web/static/tests/webclient/webclient_tests.js b/addons/web/static/tests/webclient/webclient_tests.js
index aff44b66e71..6b4edc99fa1 100644
--- a/addons/web/static/tests/webclient/webclient_tests.js
+++ b/addons/web/static/tests/webclient/webclient_tests.js
@@ -4,7 +4,9 @@ import { dialogService } from "@web/core/dialog/dialog_service";
 import { notificationService } from "@web/core/notifications/notification_service";
 import { popoverService } from "@web/core/popover/popover_service";
 import { registry } from "@web/core/registry";
+import { ormService } from "@web/core/orm_service";
 import { uiService } from "@web/core/ui/ui_service";
+import { viewService } from "@web/views/view_service";
 import { legacyServiceProvider } from "@web/legacy/legacy_service_provider";
 import { actionService } from "@web/webclient/actions/action_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
@@ -32,7 +34,9 @@ QUnit.module("WebClient", {
             .add("notification", notificationService)
             .add("popover", popoverService)
             .add("title", fakeTitleService)
-            .add("ui", uiService);
+            .add("ui", uiService)
+            .add("view", viewService) // #action-serv-leg-compat-js-class
+            .add("orm", ormService); // #action-serv-leg-compat-js-class
         baseConfig = { activateMockServer: true };
         target = getFixture();
     },

From af0f323bac7db9140987b3777c5bb36a03c78266 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:07:08 +0000
Subject: [PATCH 23/50] [REF] web: adapt debug items to new views

This commit adapts the (form) view debug items to make them work
with the new owl kanban, list and form views, and to make them
use the new owl SelectCreateDialog.

Part-of: odoo/odoo#92475
---
 .../src/core/debug/debug_menu_items.xml       |   8 +-
 addons/web/static/src/views/debug_items.js    | 298 +++++++++++++++++-
 .../web/static/src/webclient/debug_items.js   |  18 +-
 .../tests/core/debug/debug_manager_tests.js   |  16 +-
 4 files changed, 297 insertions(+), 43 deletions(-)

diff --git a/addons/web/static/src/core/debug/debug_menu_items.xml b/addons/web/static/src/core/debug/debug_menu_items.xml
index b6bbb5fd385..9464db70490 100644
--- a/addons/web/static/src/core/debug/debug_menu_items.xml
+++ b/addons/web/static/src/core/debug/debug_menu_items.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.DebugMenu.SetDefaultDialog" owl="1">
-        <Dialog title="this.constructor.title">
+        <Dialog title="title">
             <table style="width: 100%">
                 <tr>
                     <td>
@@ -62,7 +62,7 @@
     </t>
 
     <t t-name="web.DebugMenu.GetMetadataDialog" owl="1">
-        <Dialog title="this.constructor.title">
+        <Dialog title="title">
             <table class="table table-sm table-striped">
                 <tr>
                     <th>ID:</th>
@@ -92,7 +92,7 @@
                 </tr>
                 <tr>
                     <th>Creation Date:</th>
-                    <td><t t-esc="state.create_date"/></td>
+                    <td><t t-esc="state.createDate"/></td>
                 </tr>
                 <tr>
                     <th>Latest Modification by:</th>
@@ -100,7 +100,7 @@
                 </tr>
                 <tr>
                     <th>Latest Modification Date:</th>
-                    <td><t t-esc="state.write_date"/></td>
+                    <td><t t-esc="state.writeDate"/></td>
                 </tr>
             </table>
         </Dialog>
diff --git a/addons/web/static/src/views/debug_items.js b/addons/web/static/src/views/debug_items.js
index e1f1da6384b..6f816acef2c 100644
--- a/addons/web/static/src/views/debug_items.js
+++ b/addons/web/static/src/views/debug_items.js
@@ -3,14 +3,30 @@
 import { _lt } from "@web/core/l10n/translation";
 import { Dialog } from "@web/core/dialog/dialog";
 import { editModelDebug } from "@web/core/debug/debug_utils";
+import { formatDateTime, parseDateTime } from "@web/core/l10n/dates";
 import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { formatMany2one } from "@web/views/fields/formatters";
+import { evalDomain } from "@web/views/utils";
+import { FormViewDialog } from "@web/views/view_dialogs/form_view_dialog";
 
-const { Component, xml } = owl;
+const { Component, onWillStart, useState, xml } = owl;
 
 const debugRegistry = registry.category("debug");
 
+function viewSeparator() {
+    return { type: "separator", sequence: 300 };
+}
+
+debugRegistry.category("view").add("viewSeparator", viewSeparator);
+
+//------------------------------------------------------------------------------
+// Fields View Get
+//------------------------------------------------------------------------------
+
 class FieldViewGetDialog extends Component {}
-FieldViewGetDialog.template = xml`<Dialog title="this.constructor.title">
+FieldViewGetDialog.template = xml`
+<Dialog title="this.constructor.title">
     <pre t-esc="props.arch"/>
 </Dialog>`;
 FieldViewGetDialog.components = { Dialog };
@@ -20,14 +36,7 @@ FieldViewGetDialog.props = {
 };
 FieldViewGetDialog.title = _lt("Fields View Get");
 
-function viewSeparator() {
-    return {
-        type: "separator",
-        sequence: 300,
-    };
-}
-
-function fieldsViewGet({ component, env }) {
+export function fieldsViewGet({ component, env }) {
     let { arch } = component.props;
     if ("viewInfo" in component.props) {
         //legacy
@@ -43,6 +52,12 @@ function fieldsViewGet({ component, env }) {
     };
 }
 
+debugRegistry.category("view").add("fieldsViewGet", fieldsViewGet);
+
+//------------------------------------------------------------------------------
+// Edit View
+//------------------------------------------------------------------------------
+
 export function editView({ accessRights, component, env }) {
     if (!accessRights.canEditView) {
         return null;
@@ -66,6 +81,12 @@ export function editView({ accessRights, component, env }) {
     };
 }
 
+debugRegistry.category("view").add("editView", editView);
+
+//------------------------------------------------------------------------------
+// Edit SearchView
+//------------------------------------------------------------------------------
+
 export function editSearchView({ accessRights, component, env }) {
     if (!accessRights.canEditView) {
         return null;
@@ -81,7 +102,7 @@ export function editSearchView({ accessRights, component, env }) {
     if (searchViewId === undefined) {
         return null;
     }
-    const description = env._t("Edit ControlPanelView");
+    const description = env._t("Edit SearchView");
     return {
         type: "item",
         description,
@@ -92,9 +113,252 @@ export function editSearchView({ accessRights, component, env }) {
     };
 }
 
-debugRegistry
-    .category("view")
-    .add("viewSeparator", viewSeparator)
-    .add("fieldsViewGet", fieldsViewGet)
-    .add("editView", editView)
-    .add("editSearchView", editSearchView);
+debugRegistry.category("view").add("editSearchView", editSearchView);
+
+// -----------------------------------------------------------------------------
+// View Metadata
+// -----------------------------------------------------------------------------
+
+class GetMetadataDialog extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.dialogService = useService("dialog");
+        this.title = this.env._t("View Metadata");
+        this.state = useState({});
+        onWillStart(() => this.loadMetadata());
+    }
+
+    onClickCreateXmlid() {
+        const context = Object.assign({}, this.context, {
+            default_module: "__custom__",
+            default_res_id: this.state.id,
+            default_model: this.props.resModel,
+        });
+        this.dialogService.add(FormViewDialog, {
+            context,
+            onRecordSaved: () => this.loadMetadata(),
+            resModel: "ir.model.data",
+        });
+    }
+
+    async toggleNoupdate() {
+        await this.env.services.orm.call("ir.model.data", "toggle_noupdate", [
+            this.props.resModel,
+            this.state.id,
+        ]);
+        await this.loadMetadata();
+    }
+
+    async loadMetadata() {
+        const args = [[this.props.resId]];
+        const result = await this.orm.call(this.props.resModel, "get_metadata", args);
+        const metadata = result[0];
+        this.state.id = metadata.id;
+        this.state.xmlid = metadata.xmlid;
+        this.state.noupdate = metadata.noupdate;
+        this.state.creator = formatMany2one(metadata.create_uid);
+        this.state.lastModifiedBy = formatMany2one(metadata.write_uid);
+        this.state.createDate = formatDateTime(parseDateTime(metadata.create_date), {
+            timezone: true,
+        });
+        this.state.writeDate = formatDateTime(parseDateTime(metadata.write_date), {
+            timezone: true,
+        });
+    }
+}
+GetMetadataDialog.template = "web.DebugMenu.GetMetadataDialog";
+GetMetadataDialog.components = { Dialog };
+
+export function viewMetadata({ component, env }) {
+    const resId = component.model.root.resId;
+    if (!resId) {
+        return null; // No record
+    }
+    return {
+        type: "item",
+        description: env._t("View Metadata"),
+        callback: () => {
+            env.services.dialog.add(GetMetadataDialog, {
+                resModel: component.props.resModel,
+                resId,
+            });
+        },
+        sequence: 320,
+    };
+}
+
+debugRegistry.category("form").add("viewMetadata", viewMetadata);
+
+// -----------------------------------------------------------------------------
+// Set Defaults
+// -----------------------------------------------------------------------------
+
+class SetDefaultDialog extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.title = this.env._t("Set Defaults");
+        this.state = {
+            fieldToSet: "",
+            condition: "",
+            scope: "self",
+        };
+        const root = this.props.component.model.root;
+        this.fields = root.fields;
+        this.fieldsInfo = root.activeFields;
+        this.fieldNamesInView = root.fieldNames;
+        this.fieldNamesBlackList = ["message_attachment_count"];
+        this.fieldsValues = root.data;
+        this.modifierDatas = {};
+        this.fieldNamesInView.forEach((fieldName) => {
+            this.modifierDatas[fieldName] = this.fieldsInfo[fieldName].modifiers;
+        });
+        this.defaultFields = this.getDefaultFields();
+        this.conditions = this.getConditions();
+    }
+
+    getDefaultFields() {
+        return this.fieldNamesInView
+            .filter((fieldName) => !this.fieldNamesBlackList.includes(fieldName))
+            .map((fieldName) => {
+                const modifierData = this.modifierDatas[fieldName];
+                let invisibleOrReadOnly;
+                if (modifierData) {
+                    const evalContext = this.props.component.model.root.evalContext;
+                    invisibleOrReadOnly =
+                        evalDomain(modifierData.invisible, evalContext) ||
+                        evalDomain(modifierData.readonly, evalContext);
+                }
+                const fieldInfo = this.fields[fieldName];
+                const valueDisplayed = this.display(fieldInfo, this.fieldsValues[fieldName]);
+                const value = valueDisplayed[0];
+                const displayed = valueDisplayed[1];
+                // ignore fields which are empty, invisible, readonly, o2m or m2m
+                if (
+                    !value ||
+                    invisibleOrReadOnly ||
+                    fieldInfo.type === "one2many" ||
+                    fieldInfo.type === "many2many" ||
+                    fieldInfo.type === "binary" ||
+                    this.fieldsInfo[fieldName].options.isPassword ||
+                    fieldInfo.depends === undefined ||
+                    fieldInfo.depends.length !== 0
+                ) {
+                    return false;
+                }
+                return {
+                    name: fieldName,
+                    string: fieldInfo.string,
+                    value,
+                    displayed,
+                };
+            })
+            .filter((val) => val)
+            .sort((field) => field.string);
+    }
+
+    getConditions() {
+        return this.fieldNamesInView
+            .filter((fieldName) => {
+                const fieldInfo = this.fields[fieldName];
+                return fieldInfo.change_default;
+            })
+            .map((fieldName) => {
+                const fieldInfo = this.fields[fieldName];
+                const valueDisplayed = this.display(fieldInfo, this.fieldsValues[fieldName]);
+                const value = valueDisplayed[0];
+                const displayed = valueDisplayed[1];
+                return {
+                    name: fieldName,
+                    string: fieldInfo.string,
+                    value: value,
+                    displayed: displayed,
+                };
+            });
+    }
+
+    display(fieldInfo, value) {
+        let displayed = value;
+        if (value && fieldInfo.type === "many2one") {
+            displayed = value[1];
+            value = value[0];
+        } else if (value && fieldInfo.type === "selection") {
+            displayed = fieldInfo.selection.find((option) => {
+                return option[0] === value;
+            })[1];
+        }
+        return [value, displayed];
+    }
+
+    async saveDefault() {
+        if (!this.state.fieldToSet) {
+            return;
+        }
+        const fieldToSet = this.defaultFields.find((field) => {
+            return field.name === this.state.fieldToSet;
+        }).value;
+        await this.orm.call("ir.default", "set", [
+            this.props.resModel,
+            this.state.fieldToSet,
+            fieldToSet,
+            this.state.scope === "self",
+            true,
+            this.state.condition || false,
+        ]);
+        this.props.close();
+    }
+}
+SetDefaultDialog.template = "web.DebugMenu.SetDefaultDialog";
+SetDefaultDialog.components = { Dialog };
+
+export function setDefaults({ component, env }) {
+    return {
+        type: "item",
+        description: env._t("Set Defaults"),
+        callback: () => {
+            env.services.dialog.add(SetDefaultDialog, {
+                resModel: component.props.resModel,
+                component,
+            });
+        },
+        sequence: 310,
+    };
+}
+debugRegistry.category("form").add("setDefaults", setDefaults);
+
+//------------------------------------------------------------------------------
+// Manage Attachments
+//------------------------------------------------------------------------------
+
+export function manageAttachments({ component, env }) {
+    const resId = component.model.root.resId;
+    if (!resId) {
+        return null; // No record
+    }
+    const description = env._t("Manage Attachments");
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            env.services.action.doAction({
+                res_model: "ir.attachment",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                type: "ir.actions.act_window",
+                domain: [
+                    ["res_model", "=", component.props.resModel],
+                    ["res_id", "=", resId],
+                ],
+                context: {
+                    default_res_model: component.props.resModel,
+                    default_res_id: resId,
+                },
+            });
+        },
+        sequence: 330,
+    };
+}
+
+debugRegistry.category("form").add("manageAttachments", manageAttachments);
diff --git a/addons/web/static/src/webclient/debug_items.js b/addons/web/static/src/webclient/debug_items.js
index c5a255b1700..4014220a467 100644
--- a/addons/web/static/src/webclient/debug_items.js
+++ b/addons/web/static/src/webclient/debug_items.js
@@ -2,10 +2,7 @@
 import { registry } from "@web/core/registry";
 import { browser } from "@web/core/browser/browser";
 
-import dialogs from "web.view_dialogs";
-import { standaloneAdapter } from "web.OwlCompatibility";
-
-const { Component } = owl;
+import { SelectCreateDialog } from "@web/views/view_dialogs/select_create_dialog";
 
 function runJSTestsItem({ env }) {
     const runTestsURL = browser.location.origin + "/web/tests?debug=assets";
@@ -37,7 +34,7 @@ export function openViewItem({ env }) {
     async function onSelected(records) {
         const views = await env.services.orm.searchRead(
             "ir.ui.view",
-            [["id", "=", records[0].id]],
+            [["id", "=", records[0]]],
             ["name", "model", "type"],
             { limit: 1 }
         );
@@ -55,19 +52,16 @@ export function openViewItem({ env }) {
         type: "item",
         description: env._t("Open View"),
         callback: () => {
-            const adapterParent = standaloneAdapter({ Component });
-            const selectCreateDialog = new dialogs.SelectCreateDialog(adapterParent, {
-                res_model: "ir.ui.view",
+            env.services.dialog.add(SelectCreateDialog, {
+                resModel: "ir.ui.view",
                 title: env._t("Select a view"),
-                disable_multiple_selection: true,
+                multiSelect: false,
                 domain: [
                     ["type", "!=", "qweb"],
                     ["type", "!=", "search"],
                 ],
-                on_selected: onSelected,
+                onSelected,
             });
-
-            selectCreateDialog.open();
         },
         sequence: 40,
     };
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index 313bacf90ed..bba7f1992d2 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -7,7 +7,7 @@ import { registry } from "@web/core/registry";
 import { useDebugCategory, useOwnDebugContext } from "@web/core/debug/debug_context";
 import { ormService } from "@web/core/orm_service";
 import { uiService } from "@web/core/ui/ui_service";
-import { useSetupView } from "@web/views/helpers/view_hook";
+import { useSetupView } from "@web/views/view_hook";
 import { ActionDialog } from "@web/webclient/actions/action_dialog";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
 import { makeTestEnv, utils } from "../../helpers/mock_env";
@@ -27,8 +27,7 @@ import {
 } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "../../webclient/helpers";
 import { openViewItem } from "@web/webclient/debug_items";
-import { editSearchView, editView } from "@web/views/debug_items";
-import { setDefaults } from "@web/legacy/debug_manager";
+import { editSearchView, editView, setDefaults } from "@web/views/debug_items";
 
 const { Component, xml } = owl;
 const { prepareRegistriesWithCleanup } = utils;
@@ -332,11 +331,9 @@ QUnit.module("DebugMenu", (hooks) => {
         await createWebClient({ serverData, mockRPC });
         await click(target.querySelector(".o_debug_manager button"));
         await click(target.querySelector(".o_debug_manager .dropdown-item"));
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".modal .o_list_view");
 
-        await click(target.querySelector(".modal .o_list_view .o_data_row"));
-        await legacyExtraNextTick();
+        await click(target.querySelector(".modal .o_list_view .o_data_row td"));
         assert.containsNone(target, ".modal");
         assert.containsOnce(target, ".some_view");
     });
@@ -376,10 +373,9 @@ QUnit.module("DebugMenu", (hooks) => {
         await doAction(webClient, 1234);
         await click(target.querySelector(".o_debug_manager button"));
         await click(target.querySelector(".o_debug_manager .dropdown-item"));
-        await legacyExtraNextTick();
         assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id] input").value,
             "18"
         );
     });
@@ -415,7 +411,7 @@ QUnit.module("DebugMenu", (hooks) => {
         await legacyExtraNextTick();
         assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id] input").value,
             "293"
         );
     });
@@ -478,7 +474,7 @@ QUnit.module("DebugMenu", (hooks) => {
         await legacyExtraNextTick();
         assert.containsOnce(target, ".modal .o_form_view");
         assert.strictEqual(
-            target.querySelector(".modal .o_form_view .o_field_widget[name=id]").value,
+            target.querySelector(".modal .o_form_view .o_field_widget[name=id] input").value,
             "293"
         );
     });

From b0f20bcd09e39841376a5b75a8d2b8c90db5fd51 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:09:40 +0000
Subject: [PATCH 24/50] [REF] web: adapt ControlPanel to support new owl views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit contains several adaptations of the Layout, WithSearch,
ControlPanel and its children components with respect to the
conversion of kanban, list and form views in owl.

In a nutshell:
 - ActionMenus: we didn't have an implementation yet, as already
   converted views do not need it.
 - ControlPanel: allow to move the focus from the search bar to
   the view and vice-versa + slight rework of the template to
   properly handle hidden areas.
 - CustomFilterItems: adapt to formatter/parser changes.
 - Layout: hide breadcrumbs in dialogs and allow to move control
   panel buttons in the footer (in dialogs as well)
 - WithSearch: only pass search props to the underlying view +
   take its content in a default slot

Part-of: odoo/odoo#92475
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Géry Debongnie <ged@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Simon Genin (ges) <ges@odoo.com>
Co-authored-by: Francois (fge) <fge@odoo.com>
Co-authored-by: Michael Mattiello (mcm) <mcm@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
Co-authored-by: luvi <luvi@odoo.com>
---
 addons/web/static/src/core/pager/pager.js     |  12 +-
 .../src/search/action_menus/action_menus.js   | 145 ++++++++++++++++++
 .../src/search/action_menus/action_menus.xml  |  33 ++++
 .../src/search/control_panel/control_panel.js |  14 ++
 .../search/control_panel/control_panel.xml    |  67 ++++----
 .../search/filter_menu/custom_filter_item.js  |  18 ++-
 addons/web/static/src/search/layout.js        |  10 +-
 addons/web/static/src/search/layout.xml       |   3 +
 addons/web/static/src/search/pager_hook.js    |   4 +-
 .../static/src/search/search_arch_parser.js   |   4 +-
 .../src/search/search_bar/search_bar.js       |   4 +-
 addons/web/static/src/search/search_model.js  |  17 +-
 addons/web/static/src/search/utils/misc.js    |   1 +
 .../src/search/with_search/with_search.js     |  27 +---
 .../src/search/with_search/with_search.xml    |   7 +-
 .../static/tests/search/with_search_tests.js  |  15 +-
 16 files changed, 288 insertions(+), 93 deletions(-)
 create mode 100644 addons/web/static/src/search/action_menus/action_menus.js
 create mode 100644 addons/web/static/src/search/action_menus/action_menus.xml

diff --git a/addons/web/static/src/core/pager/pager.js b/addons/web/static/src/core/pager/pager.js
index 108c347332b..014a15ba832 100644
--- a/addons/web/static/src/core/pager/pager.js
+++ b/addons/web/static/src/core/pager/pager.js
@@ -50,7 +50,7 @@ export class Pager extends Component {
         return parts.join("-");
     }
     /**
-     * @returns {boolean} true iff there is only one page
+     * @returns {boolean} true if there is only one page
      */
     get isSinglePage() {
         return this.minimum === 1 && this.maximum === this.props.total;
@@ -68,15 +68,14 @@ export class Pager extends Component {
         } else if (minimum < 0 && this.props.limit > 1) {
             minimum = this.props.total - (this.props.total % this.props.limit || this.props.limit);
         }
-
-        this.update(minimum, this.props.limit);
+        this.update(minimum, this.props.limit, true);
     }
     /**
      * @param {string} value
      * @returns {{ minimum: number, maximum: number }}
      */
     parse(value) {
-        let [minimum, maximum] = value.trim().split(/\s*[\-\s,;]\s*/);
+        let [minimum, maximum] = value.trim().split(/\s*[-\s,;]\s*/);
         const clamp = (value) => Math.min(Math.max(value, 1), this.props.total);
         return {
             minimum: clamp(parseInt(minimum, 10)) - 1,
@@ -96,10 +95,11 @@ export class Pager extends Component {
     /**
      * @param {number} offset
      * @param {number} limit
+     * @param {Boolean} hasNavigated
      */
-    async update(offset, limit) {
+    async update(offset, limit, hasNavigated) {
         this.state.isDisabled = true;
-        await this.props.onUpdate({ offset, limit });
+        await this.props.onUpdate({ offset, limit }, hasNavigated);
         this.state.isDisabled = false;
         this.state.isEditing = false;
     }
diff --git a/addons/web/static/src/search/action_menus/action_menus.js b/addons/web/static/src/search/action_menus/action_menus.js
new file mode 100644
index 00000000000..f12d2b8d74e
--- /dev/null
+++ b/addons/web/static/src/search/action_menus/action_menus.js
@@ -0,0 +1,145 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { makeContext } from "@web/core/context";
+import { session } from "@web/session";
+import { registry } from "@web/core/registry";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component, onWillStart, onWillUpdateProps } = owl;
+let registryActionId = 0;
+/**
+ * Action menus (or Action/Print bar, previously called 'Sidebar')
+ *
+ * The side bar is the group of dropdown menus located on the left side of the
+ * control panel. Its role is to display a list of items depending on the view
+ * type and selected records and to execute a set of actions on active records.
+ * It is made out of 2 dropdown: Print and Action.
+ *
+ * @extends Component
+ */
+export class ActionMenus extends Component {
+    setup() {
+        this.orm = useService("orm");
+        this.actionService = useService("action");
+        onWillStart(async () => {
+            this.actionItems = await this.setActionItems(this.props);
+        });
+        onWillUpdateProps(async (nextProps) => {
+            this.actionItems = await this.setActionItems(nextProps);
+        });
+    }
+
+    get printItems() {
+        const printActions = this.props.items.print || [];
+        return printActions.map((action) => ({
+            action,
+            description: action.name,
+            key: action.id,
+        }));
+    }
+
+    //---------------------------------------------------------------------
+    // Private
+    //---------------------------------------------------------------------
+
+    async setActionItems(props) {
+        // Callback based actions
+        const callbackActions = (props.items.other || []).map((action) =>
+            Object.assign({ key: `action-${action.description}` }, action)
+        );
+        // Action based actions
+        const actionActions = props.items.action || [];
+        const formattedActions = actionActions.map((action) => ({
+            action,
+            description: action.name,
+            key: action.id,
+        }));
+        // ActionMenus action registry components
+        const registryActions = [];
+        for (const { Component, getProps } of registry.category("action_menus").getAll()) {
+            const itemProps = await getProps(props, this.env);
+            if (itemProps) {
+                registryActions.push({
+                    Component,
+                    key: `registry-action-${registryActionId++}`,
+                    props: itemProps,
+                });
+            }
+        }
+
+        return [...callbackActions, ...formattedActions, ...registryActions];
+    }
+
+    //---------------------------------------------------------------------
+    // Handlers
+    //---------------------------------------------------------------------
+
+    async executeAction(action) {
+        let activeIds = this.props.activeIds;
+        if (this.props.isDomainSelected) {
+            activeIds = await this.orm.search(this.props.resModel, this.props.domain, {
+                limit: session.active_ids_limit,
+                context: this.props.context,
+            });
+        }
+        const activeIdsContext = {
+            active_id: activeIds[0],
+            active_ids: activeIds,
+            active_model: this.props.resModel,
+        };
+        if (this.props.domain) {
+            // keep active_domain in context for backward compatibility
+            // reasons, and to allow actions to bypass the active_ids_limit
+            activeIdsContext.active_domain = this.props.domain;
+        }
+        const context = makeContext([this.props.context, activeIdsContext]);
+        return this.actionService.doAction(action.id, {
+            additionalContext: context,
+            on_close: () => this.trigger("reload"),
+        });
+    }
+
+    /**
+     * Handler used to determine which way must be used to execute a selected
+     * action: it will be either:
+     * - a callback (function given by the view controller);
+     * - an action ID (string);
+     * - an URL (string).
+     * @private
+     * @param {Object} item
+     */
+    onItemSelected(item) {
+        if (item.callback) {
+            item.callback([item]);
+        } else if (item.action) {
+            this.executeAction(item.action);
+        } else if (item.url) {
+            // Event has been prevented at its source: we need to redirect manually.
+            browser.location = item.url;
+        }
+    }
+}
+
+ActionMenus.components = {
+    Dropdown,
+    DropdownItem,
+};
+ActionMenus.props = {
+    activeIds: { type: Array, element: [Number, String] }, // virtual IDs are strings.
+    context: Object,
+    resModel: String,
+    domain: { type: Array, optional: true },
+    isDomainSelected: { type: Boolean, optional: true },
+    items: {
+        type: Object,
+        shape: {
+            action: { type: Array, optional: true },
+            print: { type: Array, optional: true },
+            other: { type: Array, optional: true },
+        },
+    },
+};
+ActionMenus.template = "web.ActionMenus";
diff --git a/addons/web/static/src/search/action_menus/action_menus.xml b/addons/web/static/src/search/action_menus/action_menus.xml
new file mode 100644
index 00000000000..56ca0a56f9e
--- /dev/null
+++ b/addons/web/static/src/search/action_menus/action_menus.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ActionMenus" owl="1">
+        <div class="o_cp_action_menus">
+            <Dropdown t-if="printItems.length" togglerClass="'btn btn-secondary'" tooltip="'Printing options'" hotkey="'shift+u'">
+                <t t-set-slot="toggler">
+                    <i class="small mr-1 fa fa-print"/>
+                    <span class="o_dropdown_title">Print</span>
+                </t>
+                <t t-foreach="printItems" t-as="item" t-key="item.key">
+                    <DropdownItem class="'o_menu_item'" onSelected="() => this.onItemSelected(item)">
+                        <t t-esc="item.description"/>
+                    </DropdownItem>
+                </t>
+            </Dropdown>
+
+            <Dropdown t-if="actionItems.length" togglerClass="'btn btn-secondary'" tooltip="'Additional actions'" hotkey="'u'">
+                <t t-set-slot="toggler">
+                    <i class="small mr-1 fa fa-cog"/>
+                    <span class="o_dropdown_title">Action</span>
+                </t>
+                <t t-foreach="actionItems" t-as="item" t-key="item.key">
+                    <t t-if="item.Component" t-component="item.Component" t-props="item.props" />
+                    <DropdownItem t-else="" class="'o_menu_item'" onSelected="() => this.onItemSelected(item)">
+                        <t t-esc="item.description"/>
+                    </DropdownItem>
+                </t>
+            </Dropdown>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/control_panel/control_panel.js b/addons/web/static/src/search/control_panel/control_panel.js
index 65ea3c45a4c..9db06294bdf 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { getActiveHotkey } from "@web/core/hotkeys/hotkey_service";
 import { Pager } from "@web/core/pager/pager";
 import { useService } from "@web/core/utils/hooks";
 import { ComparisonMenu } from "../comparison_menu/comparison_menu";
@@ -25,6 +26,18 @@ export class ControlPanel extends Component {
             : undefined;
     }
 
+    /**
+     * @param {KeyboardEvent} ev
+     */
+    onBottomLeftKeydown(ev) {
+        const hotkey = getActiveHotkey(ev);
+        if (hotkey === "arrowdown") {
+            this.env.searchModel.trigger("focus-view");
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+
     /**
      * @returns {Object}
      */
@@ -34,6 +47,7 @@ export class ControlPanel extends Component {
                 "top-left": true,
                 "top-right": true,
                 "bottom-left": true,
+                "bottom-left-buttons": true,
                 "bottom-right": true,
             },
             this.props.display || this.env.searchModel.display.controlPanel
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 90424ed3314..60bff845c65 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -2,46 +2,49 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ControlPanel" owl="1">
-        <div class="o_control_panel">
+        <div class="o_control_panel" t-ref="root">
             <div t-if="display['top']" class="o_cp_top">
-                <div t-if="display['top-left']" class="o_cp_top_left">
-                    <t t-slot="control-panel-top-left">
-                        <t t-call="web.Breadcrumbs" />
+                <div class="o_cp_top_left">
+                    <t t-slot="control-panel-top-left" t-if="display['top-left']">
+                        <t t-call="web.Breadcrumbs" t-if="!env.config.noBreadcrumbs"/>
                     </t>
                 </div>
-                <div t-if="display['top-right']" class="o_cp_top_right">
-                    <t t-slot="control-panel-top-right">
+                <div class="o_cp_top_right">
+                    <t t-slot="control-panel-top-right" t-if="display['top-right']">
                         <SearchBar/>
                     </t>
                 </div>
             </div>
             <div t-if="display['bottom']" class="o_cp_bottom">
-                <div t-if="display['bottom-left']" class="o_cp_bottom_left">
-                    <t t-slot="control-panel-bottom-left"/>
+                <div class="o_cp_bottom_left" t-on-keydown="onBottomLeftKeydown">
+                    <t t-slot="control-panel-bottom-left-buttons" t-if="display['bottom-left'] and display['bottom-left-buttons']" />
+                    <t t-slot="control-panel-bottom-left" t-if="display['bottom-left']"/>
                 </div>
-                <div t-if="display['bottom-right']" class="o_cp_bottom_right">
-                    <t t-slot="control-panel-bottom-right">
-                        <div class="btn-group o_search_options position-static" role="search">
-                            <t t-foreach="searchMenus" t-as="menu" t-key="menu.key">
-                                <t t-component="menu.Component"/>
-                            </t>
+                <div class="o_cp_bottom_right">
+                    <t t-if="display['bottom-right']">
+                        <t t-slot="control-panel-bottom-right">
+                            <div class="btn-group o_search_options position-static" role="search">
+                                <t t-foreach="searchMenus" t-as="menu" t-key="menu.key">
+                                    <t t-component="menu.Component"/>
+                                </t>
+                            </div>
+                        </t>
+
+                        <div class="o_cp_pager" role="search">
+                                <Pager t-if="pagerProps and pagerProps.total > 0" t-props="pagerProps"/>
                         </div>
-                    </t>
 
-                    <div class="o_cp_pager" role="search">
-                            <Pager t-if="pagerProps and pagerProps.total > 0" t-props="pagerProps"/>
-                    </div>
-
-                    <t t-if="env.config.viewSwitcherEntries.length">
-                        <nav class="btn-group o_cp_switch_buttons">
-                            <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
-                                <button class="btn btn-light o_switch_view "
-                                    t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
-                                    t-att-data-tooltip="view.name"
-                                    t-on-click="() => this.onViewClicked(view.type)"
-                                    />
-                            </t>
-                        </nav>
+                        <t t-if="env.config.viewSwitcherEntries.length > 1">
+                            <nav class="btn-group o_cp_switch_buttons">
+                                <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
+                                    <button class="btn btn-light o_switch_view "
+                                        t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
+                                        t-att-data-tooltip="view.name"
+                                        t-on-click="() => this.onViewClicked(view.type)"
+                                        />
+                                </t>
+                            </nav>
+                        </t>
                     </t>
                 </div>
             </div>
@@ -52,11 +55,7 @@
         <ol class="breadcrumb">
             <t t-foreach="env.config.breadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
                 <t t-set="isPenultimate" t-value="breadcrumb_index === env.config.breadcrumbs.length - 2"/>
-                <li t-if="!breadcrumb_last"
-                    class="breadcrumb-item"
-                    t-att-class="{ o_back_button: isPenultimate}"
-                    t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)"
-                    >
+                <li t-if="!breadcrumb_last" class="breadcrumb-item" t-att-data-hotkey="isPenultimate and 'b'" t-att-class="{ o_back_button: isPenultimate}" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
                     <a href="#">
                         <t t-if="breadcrumb.name" t-esc="breadcrumb.name"/>
                         <em t-else="" class="text-warning">Unnamed</em>
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.js b/addons/web/static/src/search/filter_menu/custom_filter_item.js
index 90e2b5adbf9..1703cec6937 100644
--- a/addons/web/static/src/search/filter_menu/custom_filter_item.js
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.js
@@ -1,8 +1,8 @@
 /** @odoo-module **/
 
-import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
 import { Domain } from "@web/core/domain";
+import { Dropdown } from "@web/core/dropdown/dropdown";
 import { serializeDate, serializeDateTime } from "@web/core/l10n/dates";
 import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
@@ -86,23 +86,23 @@ const FIELD_OPERATORS = {
     ],
 };
 
-const parseField = (field, value, opts = {}) => {
+function parseField(field, value, opts = {}) {
     if (FIELD_TYPES[field.type] === "char") {
         return value;
     }
     const type = field.type === "id" ? "integer" : field.type;
     const parse = parsers.contains(type) ? parsers.get(type) : (v) => v;
     return parse(value, { field, ...opts });
-};
+}
 
-const formatField = (field, value, opts = {}) => {
+function formatField(field, value, opts = {}) {
     if (FIELD_TYPES[field.type] === "char") {
         return value;
     }
     const type = field.type === "id" ? "integer" : field.type;
     const format = formatters.contains(type) ? formatters.get(type) : (v) => v;
-    return format(value, { field, ...opts });
-};
+    return format(value, { digits: field.digits, ...opts });
+}
 
 export class CustomFilterItem extends Component {
     setup() {
@@ -176,7 +176,11 @@ export class CustomFilterItem extends Component {
                 if (genericType === "datetime") {
                     condition.value[0] = condition.value[0].set({ hour: 0, minute: 0, second: 0 });
                     if (operator.symbol === "between") {
-                        condition.value[1] = condition.value[1].set({ hour: 23, minute: 59, second: 59 });
+                        condition.value[1] = condition.value[1].set({
+                            hour: 23,
+                            minute: 59,
+                            second: 59,
+                        });
                     }
                 }
                 break;
diff --git a/addons/web/static/src/search/layout.js b/addons/web/static/src/search/layout.js
index a8f6c97feae..81fc11a1d97 100644
--- a/addons/web/static/src/search/layout.js
+++ b/addons/web/static/src/search/layout.js
@@ -9,22 +9,28 @@ const { Component } = owl;
  * @param {Object} params
  * @returns {Object}
  */
-export const extractLayoutComponents = (params) => {
+export function extractLayoutComponents(params) {
     return {
         ControlPanel: params.ControlPanel || ControlPanel,
         SearchPanel: params.SearchPanel || SearchPanel,
         Banner: params.Banner || false,
     };
-};
+}
 
 export class Layout extends Component {
     setup() {
         const { display = {} } = this.env.searchModel || {};
         this.components = extractLayoutComponents(this.env.config);
+        if (display.controlPanel && this.env.inDialog) {
+            display.controlPanel["top-left"] = false;
+            display.controlPanel["bottom-left-buttons"] = false;
+        }
         this.display = display;
     }
     get controlPanelSlots() {
         const slots = { ...this.props.slots };
+        slots["control-panel-bottom-left-buttons"] = slots["layout-buttons"];
+        delete slots["layout-buttons"];
         delete slots.default;
         return slots;
     }
diff --git a/addons/web/static/src/search/layout.xml b/addons/web/static/src/search/layout.xml
index 23a246b4201..15b16619149 100644
--- a/addons/web/static/src/search/layout.xml
+++ b/addons/web/static/src/search/layout.xml
@@ -2,6 +2,9 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Layout" owl="1">
+        <t t-if="env.inDialog" t-portal="'#' + env.dialogId + ' .modal-footer'">
+            <t t-slot="layout-buttons"/>
+        </t>
         <t t-component="components.ControlPanel" slots="controlPanelSlots" t-if="display.controlPanel"/>
         <div class="o_content" t-attf-class="{{props.className}}" t-att-class="{ o_component_with_search_panel: display.searchPanel }">
             <t t-component="components.Banner" t-if="components.Banner and display.banner"/>
diff --git a/addons/web/static/src/search/pager_hook.js b/addons/web/static/src/search/pager_hook.js
index b0f25d8ff36..df9c456629b 100644
--- a/addons/web/static/src/search/pager_hook.js
+++ b/addons/web/static/src/search/pager_hook.js
@@ -23,7 +23,7 @@ const { useEnv, useChildSubEnv, useState, onWillRender } = owl;
  */
 export function usePager(getProps) {
     const env = useEnv();
-    const pagerState = useState(getProps());
+    const pagerState = useState({});
 
     useChildSubEnv({
         config: {
@@ -32,6 +32,6 @@ export function usePager(getProps) {
         },
     });
     onWillRender(() => {
-        Object.assign(pagerState, getProps());
+        Object.assign(pagerState, getProps() || { total: 0 });
     });
 }
diff --git a/addons/web/static/src/search/search_arch_parser.js b/addons/web/static/src/search/search_arch_parser.js
index 09bdb370079..9883356f40d 100644
--- a/addons/web/static/src/search/search_arch_parser.js
+++ b/addons/web/static/src/search/search_arch_parser.js
@@ -17,13 +17,13 @@ const DEFAULT_VIEWS_WITH_SEARCH_PANEL = ["kanban", "list"];
  * @param {string} context
  * @returns {string[]}
  */
-const getContextGroubBy = (context) => {
+function getContextGroubBy(context) {
     try {
         return makeContext([context]).group_by.split(":");
     } catch (_err) {
         return [];
     }
-};
+}
 
 function reduceType(type) {
     if (type === "dateFilter") {
diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
index 30c81eba892..3437678b45c 100644
--- a/addons/web/static/src/search/search_bar/search_bar.js
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -37,7 +37,7 @@ export class SearchBar extends Component {
 
         this.inputRef = useAutofocus();
 
-        useBus(this.env.bus, "FOCUS-SEARCH-BAR", () => {
+        useBus(this.env.searchModel, "focus-search", () => {
             this.inputRef.el.focus();
         });
 
@@ -345,7 +345,7 @@ export class SearchBar extends Component {
                         focusedIndex = this.state.focusedIndex + 1;
                     }
                 } else {
-                    this.env.bus.trigger("FOCUS-VIEW");
+                    this.env.searchModel.trigger("focus-view");
                 }
                 break;
             case "ArrowUp":
diff --git a/addons/web/static/src/search/search_model.js b/addons/web/static/src/search/search_model.js
index 9ca0506e4c4..72e1704ca0a 100644
--- a/addons/web/static/src/search/search_model.js
+++ b/addons/web/static/src/search/search_model.js
@@ -266,8 +266,10 @@ export class SearchModel extends EventBus {
             this.__legacyParseSearchPanelArchAnyway(searchViewDescription, searchViewFields);
             this.domainParts = {};
             this.display = this._getDisplay(config.display);
-
-            return this._reloadSections();
+            if (!this.searchPanelInfo.loaded) {
+                return this._reloadSections();
+            }
+            return;
         }
 
         this.blockNotification = true;
@@ -310,7 +312,7 @@ export class SearchModel extends EventBus {
         );
         const { labels, preSearchItems, searchPanelInfo, sections } = parser.parse();
 
-        this.searchPanelInfo = { ...searchPanelInfo, shouldReload: false };
+        this.searchPanelInfo = { ...searchPanelInfo, loaded: false, shouldReload: false };
 
         await Promise.all(labels.map((cb) => cb(this.orm)));
 
@@ -1284,6 +1286,7 @@ export class SearchModel extends EventBus {
     async _fetchSections(categoriesToLoad, filtersToLoad) {
         await this._fetchCategories(categoriesToLoad);
         await this._fetchFilters(filtersToLoad);
+        this.searchPanelInfo.loaded = true;
     }
 
     _getActiveComparison() {
@@ -1423,9 +1426,9 @@ export class SearchModel extends EventBus {
         let domain;
         try {
             domain = Domain.and(domains);
-            return params.raw ? domain : domain.toList(
-                Object.assign({}, this.globalContext, this.userService.context)
-            );
+            return params.raw
+                ? domain
+                : domain.toList(Object.assign({}, this.globalContext, this.userService.context));
         } catch (error) {
             throw new Error(
                 `${this.env._t("Failed to evaluate the domain")} ${domain.toString()}.\n${
@@ -2094,6 +2097,6 @@ export class SearchModel extends EventBus {
         const parser = new SearchArchParser(searchViewDescription, searchViewFields);
         const { searchPanelInfo } = parser.parse();
 
-        this.searchPanelInfo = { ...searchPanelInfo, shouldReload: false };
+        this.searchPanelInfo = { ...searchPanelInfo, loaded: false, shouldReload: false };
     }
 }
diff --git a/addons/web/static/src/search/utils/misc.js b/addons/web/static/src/search/utils/misc.js
index 4a537462e19..73441e06e4b 100644
--- a/addons/web/static/src/search/utils/misc.js
+++ b/addons/web/static/src/search/utils/misc.js
@@ -14,5 +14,6 @@ export const GROUPABLE_TYPES = [
     "datetime",
     "integer",
     "many2one",
+    "many2many",
     "selection",
 ];
diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js
index 1bf1c0732b0..b371ff93a51 100644
--- a/addons/web/static/src/search/with_search/with_search.js
+++ b/addons/web/static/src/search/with_search/with_search.js
@@ -7,12 +7,9 @@ import { CallbackRecorder, useSetupAction } from "@web/webclient/actions/action_
 const { Component, onWillStart, onWillUpdateProps, toRaw, useSubEnv } = owl;
 
 export const SEARCH_KEYS = ["comparison", "context", "domain", "groupBy", "orderBy"];
-const OTHER_SEARCH_KEYS = ["irFilters", "searchViewArch", "searchViewFields", "searchViewId"];
 
 export class WithSearch extends Component {
     setup() {
-        this.Component = this.props.Component;
-
         if (!this.env.__getContext__) {
             useSubEnv({ __getContext__: new CallbackRecorder() });
         }
@@ -54,31 +51,12 @@ export class WithSearch extends Component {
             await this.searchModel.reload(config);
         });
     }
-
-    //-------------------------------------------------------------------------
-    // Getters
-    //-------------------------------------------------------------------------
-
-    get componentProps() {
-        const componentProps = { ...this.props.componentProps };
-        for (const key of SEARCH_KEYS) {
-            componentProps[key] = this.searchModel[key];
-        }
-        componentProps.info = componentProps.info || {};
-        for (const key of OTHER_SEARCH_KEYS) {
-            componentProps.info[key] = this.searchModel[key];
-        }
-        return componentProps;
-    }
 }
 
-WithSearch.defaultProps = {
-    componentProps: {},
-};
+WithSearch.template = "web.WithSearch";
 WithSearch.props = {
-    Component: Function,
+    slots: Object,
     SearchModel: { type: Function, optional: true },
-    componentProps: { type: Object, optional: true },
 
     resModel: String,
 
@@ -107,4 +85,3 @@ WithSearch.props = {
     dynamicFilters: { type: Array, element: Object, optional: true },
     searchMenuTypes: { type: Array, element: String, optional: true },
 };
-WithSearch.template = "web.WithSearch";
diff --git a/addons/web/static/src/search/with_search/with_search.xml b/addons/web/static/src/search/with_search/with_search.xml
index ec650abaf5c..cfae1dfb112 100644
--- a/addons/web/static/src/search/with_search/with_search.xml
+++ b/addons/web/static/src/search/with_search/with_search.xml
@@ -2,7 +2,12 @@
 <templates xml:space="preserve">
 
   <t t-name="web.WithSearch" owl="1">
-    <t t-component="Component" t-props="componentProps" />
+    <t t-slot="default"
+      context="searchModel.context"
+      domain="searchModel.domain"
+      groupBy="searchModel.groupBy"
+      orderBy="searchModel.orderBy"
+      comparison="searchModel.comparison"/>
   </t>
 
 </templates>
diff --git a/addons/web/static/tests/search/with_search_tests.js b/addons/web/static/tests/search/with_search_tests.js
index a881ee97b7e..2cb8f966ce9 100644
--- a/addons/web/static/tests/search/with_search_tests.js
+++ b/addons/web/static/tests/search/with_search_tests.js
@@ -322,18 +322,23 @@ QUnit.module("Search", (hooks) => {
 
         class Parent extends Component {
             setup() {
-                this.state = useState({
+                this.searchState = useState({
                     resModel: "animal",
-                    Component: TestComponent,
                     domain: [["type", "=", "carnivorous"]],
                 });
             }
         }
-        Parent.template = xml`<WithSearch t-props="state"/>`;
-        Parent.components = { WithSearch };
+        Parent.template = xml`
+            <WithSearch t-props="searchState" t-slot-scope="search">
+                <TestComponent
+                    domain="search.domain"
+                />
+            </WithSearch>
+        `;
+        Parent.components = { WithSearch, TestComponent };
 
         const parent = await mount(Parent, target, { env });
-        parent.state.domain = [["type", "=", "herbivorous"]];
+        parent.searchState.domain = [["type", "=", "herbivorous"]];
 
         await nextTick();
     });

From 968148f59ed9094c84365d907c119a4ecc54d0ce Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Fri, 24 Jun 2022 07:53:03 +0000
Subject: [PATCH 25/50] [REF] sms: patch new owl PhoneField

This commit patches the new implementation of the PhoneField to
add the sms button.

Part-of: odoo/odoo#92475
---
 addons/sms/__manifest__.py                    |  2 ++
 .../src/components/phone_field/phone_field.js | 12 ++++++++++
 .../components/phone_field/phone_field.xml    | 12 ++++++++++
 .../src/components/sms_button/sms_button.js   | 23 +++++++++++++++++++
 .../src/components/sms_button/sms_button.xml  | 13 +++++++++++
 5 files changed, 62 insertions(+)
 create mode 100644 addons/sms/static/src/components/phone_field/phone_field.js
 create mode 100644 addons/sms/static/src/components/phone_field/phone_field.xml
 create mode 100644 addons/sms/static/src/components/sms_button/sms_button.js
 create mode 100644 addons/sms/static/src/components/sms_button/sms_button.xml

diff --git a/addons/sms/__manifest__.py b/addons/sms/__manifest__.py
index fc445d503da..fb02637a072 100644
--- a/addons/sms/__manifest__.py
+++ b/addons/sms/__manifest__.py
@@ -44,10 +44,12 @@ The service is provided by the In App Purchase Odoo platform.
         ],
         'mail.assets_discuss_public': [
             'sms/static/src/components/*/*',
+            ('remove', 'sms/static/src/components/phone_field/*'),
         ],
         'web.assets_backend': [
             'sms/static/src/js/fields_phone_widget.js',
             'sms/static/src/js/fields_sms_widget.js',
+            'sms/static/src/components/*/*',
         ],
         'web.qunit_suite_tests': [
             'sms/static/tests/sms_widget_test.js',
diff --git a/addons/sms/static/src/components/phone_field/phone_field.js b/addons/sms/static/src/components/phone_field/phone_field.js
new file mode 100644
index 00000000000..677a335b0c9
--- /dev/null
+++ b/addons/sms/static/src/components/phone_field/phone_field.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { PhoneField } from "@web/views/fields/phone/phone_field";
+import { SendSMSButton } from '@sms/components/sms_button/sms_button';
+
+patch(PhoneField, "sms.PhoneField", {
+    components: {
+        ...PhoneField.components,
+        SendSMSButton
+    },
+});
diff --git a/addons/sms/static/src/components/phone_field/phone_field.xml b/addons/sms/static/src/components/phone_field/phone_field.xml
new file mode 100644
index 00000000000..337648d5d23
--- /dev/null
+++ b/addons/sms/static/src/components/phone_field/phone_field.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-inherit="web.PhoneField" t-inherit-mode="extension">
+        <xpath expr="//*[hasclass('o_phone_link')]" position="after">
+            <t t-if="props.value.length > 0">
+                <SendSMSButton record="props.record" value="props.value"/>
+            </t>
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/sms/static/src/components/sms_button/sms_button.js b/addons/sms/static/src/components/sms_button/sms_button.js
new file mode 100644
index 00000000000..7165e9bbf4f
--- /dev/null
+++ b/addons/sms/static/src/components/sms_button/sms_button.js
@@ -0,0 +1,23 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+
+export class SendSMSButton extends Component {
+    setup() {
+        this.action = useService("action");
+        this.title = this.env._t("Send SMS Text Message");
+    }
+    onClick() {
+        this.action.doAction({
+            type: "ir.actions.act_window",
+            name: this.title,
+            res_id: this.props.record.resId,
+            res_model: "sms.composer",
+            target: "new",
+            views: [[false, "form"]],
+        });
+    }
+};
+SendSMSButton.template = "sms.SendSMSButton";
diff --git a/addons/sms/static/src/components/sms_button/sms_button.xml b/addons/sms/static/src/components/sms_button/sms_button.xml
new file mode 100644
index 00000000000..bb1aab2381e
--- /dev/null
+++ b/addons/sms/static/src/components/sms_button/sms_button.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="sms.SendSMSButton" owl="1">
+        <a
+            t-att-title="title"
+            t-att-href="'sms:'+props.value"
+            t-on-click.prevent="onClick"
+            class="ml-3 d-inline-flex align-items-center o_field_phone_sms"
+        ><i class="fa fa-mobile"></i><small class="font-weight-bold ml-1">SMS</small></a>
+    </t>
+
+</templates>

From 4f984568e139d8da448018af12ef79005e317cf6 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Fri, 24 Jun 2022 07:56:28 +0000
Subject: [PATCH 26/50] [REF] *: adapt code to new kanban view

This commit makes various adapations in addons with respect to
the introduction of the owl kanban view. Mainly, some selectors
in scss and in tests needed to be adapted. Moreover, in some tests
that we haven't adapted yet, we must ensure that legacy form and
list views are still used (useLegacyViews).

It also contains some adaptations in kanban templates, e.g. the
replacement of moment by luxon, the removal of underscore...

Part-of: odoo/odoo#92475
---
 .../static/src/scss/account_dashboard.scss    |   2 +-
 .../src/scss/account_journal_dashboard.scss   |   2 +-
 .../src/scss/crm_team_member_views.scss       |   2 +-
 addons/event/static/src/scss/event.scss       |   4 +-
 addons/event/views/event_event_views.xml      |  21 ++--
 .../views/gamification_badge_views.xml        |   2 +-
 .../views/gamification_goal_views.xml         |   2 +-
 .../static/src/scss/hr_expense.scss           |   2 +-
 .../static/src/scss/accrual_plan_level.scss   |   2 +-
 .../static/src/scss/hr_job.scss               |  10 +-
 addons/hr_timesheet/__manifest__.py           |   9 +-
 addons/im_livechat/__manifest__.py            |   1 +
 .../lunch/static/src/scss/lunch_kanban.scss   |   2 +-
 .../static/tests/lunch_kanban_mobile_tests.js |   6 +-
 .../lunch/static/tests/lunch_kanban_tests.js  |   6 +-
 .../mail/static/src/js/tools/debug_manager.js |  40 ++++++-
 addons/mail/static/src/scss/kanban_view.scss  |   2 +-
 .../form_renderer/wowl_form_renderer.js       |  34 ------
 .../mail/static/tests/helpers/test_utils.js   |   2 +
 .../tests/qunit_suite_tests/chatter_tests.js  |  20 +++-
 .../qunit_suite_tests/debug_manager_tests.js  |  13 ++-
 .../src/scss/maintenance_team_dashboard.scss  |   2 +-
 .../maintenance/views/maintenance_views.xml   |   2 +-
 .../static/src/scss/mrp_workorder_kanban.scss |   2 +-
 .../static/tests/mrp_document_kanban_tests.js |   4 +-
 addons/note/views/note_views.xml              |   2 +-
 .../static/src/scss/payment_acquirer.scss     |   2 +-
 .../static/src/scss/pos_dashboard.scss        |   2 +-
 .../src/js/project_task_kanban_examples.js    | 103 ++++++++----------
 .../src/js/right_panel/project_right_panel.js |   2 +-
 .../static/src/scss/project_dashboard.scss    |   2 +-
 .../static/src/scss/project_widgets.scss      |   2 +-
 .../src/xml/project_task_kanban_examples.xml  |  61 +++++++++++
 .../tests/tours/project_sharing_tour.js       |   2 +-
 .../static/src/scss/rating_rating_views.scss  |   2 +-
 addons/rating/views/rating_rating_views.xml   |   4 +-
 .../tests/sales_team_dashboard_tests.js       |   2 +-
 .../src/right_panel/project_right_panel.js    |   2 +-
 .../views/project_task_views.xml              |   2 +-
 .../static/src/scss/crm_team_views.scss       |   4 +-
 ...stock_traceability_report_backend_tests.js |  25 ++++-
 .../test_mail/static/tests/activity_tests.js  |   2 +-
 .../src/js/utm_campaign_kanban_examples.js    |   8 +-
 addons/utm/static/src/scss/utm_views.scss     |   2 +-
 .../src/views/kanban/kanban_dashboard.scss    |   3 +-
 .../static/src/js/backend/field_html.js       |   4 +
 .../static/src/scss/website.backend.scss      |   2 +-
 addons/website_sale/views/product_views.xml   |   2 +-
 .../static/src/scss/slide_views.scss          |   2 +-
 odoo/addons/base/static/src/css/modules.css   |   6 +-
 .../base/static/src/scss/res_partner.scss     |   2 +-
 .../base/static/tests/base_settings_tests.js  |   4 +-
 52 files changed, 265 insertions(+), 185 deletions(-)
 delete mode 100644 addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
 create mode 100644 addons/project/static/src/xml/project_task_kanban_examples.xml

diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss
index 5050be09648..63fa1d72e35 100644
--- a/addons/account/static/src/scss/account_dashboard.scss
+++ b/addons/account/static/src/scss/account_dashboard.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_dashboard.o_account_kanban {
+.o_legacy_kanban_view.o_kanban_dashboard.o_account_kanban {
 
     &.o_kanban_ungrouped .o_account_dashboard_header {
         margin: (0 - $o-kanban-record-margin) ($o-kanban-record-margin - $o-horizontal-padding) $o-kanban-record-margin;
diff --git a/addons/account/static/src/scss/account_journal_dashboard.scss b/addons/account/static/src/scss/account_journal_dashboard.scss
index 6c36e61a0a3..42003420008 100644
--- a/addons/account/static/src/scss/account_journal_dashboard.scss
+++ b/addons/account/static/src/scss/account_journal_dashboard.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_dashboard.o_account_kanban {
+.o_kanban_renderer.o_kanban_dashboard.o_account_kanban {
     .o_kanban_record {
 
         @include media-breakpoint-up(sm) {
diff --git a/addons/crm/static/src/scss/crm_team_member_views.scss b/addons/crm/static/src/scss/crm_team_member_views.scss
index 4999b609e41..f544377979e 100644
--- a/addons/crm/static/src/scss/crm_team_member_views.scss
+++ b/addons/crm/static/src/scss/crm_team_member_views.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_crm_team_member_kanban {
+.o_kanban_view .o_crm_team_member_kanban {
     .o_member_assignment div.oe_gauge {
         width: 100px;
         height: 80px;
diff --git a/addons/event/static/src/scss/event.scss b/addons/event/static/src/scss/event.scss
index 439b7a125da..43dea8de0c6 100644
--- a/addons/event/static/src/scss/event.scss
+++ b/addons/event/static/src/scss/event.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_event_kanban_view {
+.o_kanban_view .o_event_kanban_view {
     .o_kanban_record {
         min-height: 140px;
     }
@@ -17,7 +17,7 @@
     }
 }
 
-.o_kanban_view.o_event_attendee_kanban_view {
+.o_kanban_view .o_event_attendee_kanban_view {
     @media (max-width: 768px) {
         .o_event_registration_kanban {
             min-height: 80px;
diff --git a/addons/event/views/event_event_views.xml b/addons/event/views/event_event_views.xml
index f2f9f57d11b..866638f87fc 100644
--- a/addons/event/views/event_event_views.xml
+++ b/addons/event/views/event_event_views.xml
@@ -185,34 +185,33 @@
                         <div t-attf-class="d-flex flex-column p-0 oe_kanban_card oe_kanban_global_click">
                             <div class="o_kanban_content p-0 m-0 position-relative row d-flex flex-fill">
                                 <div class="col-3 bg-primary p-2 text-center d-flex flex-column justify-content-center">
-                                    <div t-out="record.date_begin.raw_value.getDate()" class="o_event_fontsize_20"/>
+                                    <div t-esc="record.date_begin.raw_value.getDate()" class="o_event_fontsize_20"/>
                                     <div>
-                                        <t t-out="moment(record.date_begin.raw_value).format('MMM')"/>
-                                        <t t-out="record.date_begin.raw_value.getFullYear()"/>
+                                        <t t-esc="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('MMM yyyy')"/>
                                     </div>
-                                    <div><t t-out="moment(record.date_begin.raw_value).format('LT')"/></div>
-                                    <div t-if="moment(record.date_begin.raw_value).dayOfYear() !== moment(record.date_end.raw_value).dayOfYear()">
-                                        <i class="fa fa-arrow-right o_event_fontsize_09" title="End date"/>
-                                        <t t-out="moment(record.date_end.raw_value).format('D MMM')"/>
-                                     </div>
+                                    <div><t t-esc="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('t')"/></div>
+                                        <div t-if="luxon.DateTime.fromJSDate(record.date_begin.raw_value).toFormat('DDMMYYYY') !== luxon.DateTime.fromJSDate(record.date_end.raw_value).toFormat('DDMMYYYY')">
+                                            <i class="fa fa-arrow-right mr-2 o_event_fontsize_09" title="End date"/>
+                                            <t t-esc="luxon.DateTime.fromJSDate(record.date_end.raw_value).toFormat('d MMM')"/>
+                                        </div>
                                 </div>
                                 <div class="col-9 py-2 px-3 d-flex flex-column justify-content-between pt-3">
                                     <div>
                                         <div class="o_kanban_record_title o_text_overflow" t-att-title="record.name.value">
                                             <field name="name"/>
                                         </div>
-                                        <div t-if="record.address_id.value"><i class="fa fa-map-marker" title="Location"/> <span class="o_text_overflow o_event_kanban_location" t-out="record.address_id.value"/></div>
+                                        <div t-if="record.address_id.value"><i class="fa fa-map-marker" title="Location"/> <span class="o_text_overflow o_event_kanban_location" t-esc="record.address_id.value"/></div>
                                     </div>
                                     <h5 class="o_event_fontsize_11 p-0">
                                         <a name="%(event_registration_action_stats_from_event)d"
                                            type="action"
                                            context="{'search_default_expected': True}">
-                                            <t t-out="record.seats_expected.raw_value"/> Expected attendees
+                                            <t t-esc="record.seats_expected.raw_value"/> Expected attendees
                                         </a>
                                         <t t-set="total_seats" t-value="record.seats_reserved.raw_value + record.seats_used.raw_value"/>
                                         <div  class="pt-2 pt-md-0" t-if="total_seats > 0 and ! record.auto_confirm.raw_value"><br/>
                                             <a class="pl-2" name="%(event_registration_action_stats_from_event)d" type="action" context="{'search_default_confirmed': True}">
-                                                <i class="fa fa-level-up fa-rotate-90" title="Confirmed"/><span class="pl-2"><t t-out="total_seats"/> Confirmed</span>
+                                                <i class="fa fa-level-up fa-rotate-90" title="Confirmed"/><span class="pl-2"><t t-esc="total_seats"/> Confirmed</span>
                                             </a>
                                         </div>
                                     </h5>
diff --git a/addons/gamification/views/gamification_badge_views.xml b/addons/gamification/views/gamification_badge_views.xml
index 127b49533e0..7a49efe5624 100644
--- a/addons/gamification/views/gamification_badge_views.xml
+++ b/addons/gamification/views/gamification_badge_views.xml
@@ -148,7 +148,7 @@
                                 <div t-if="!widget.isHtmlEmpty(record.description.value)" class="o_kanban_badge_description">
                                     <em t-out="record.description.value"/>
                                     <div>
-                                        <t t-foreach="record.unique_owner_ids.raw_value.slice(0,11)" t-as="owner">
+                                        <t t-foreach="record.unique_owner_ids.raw_value.slice(0,11)" t-as="owner" t-key="owner">
                                             <img class="oe_kanban_avatar o_image_24_cover" t-att-src="kanban_image('res.users', 'avatar_128', owner)" t-att-data-member_id="owner" alt="Owner"/>
                                         </t>
                                     </div>
diff --git a/addons/gamification/views/gamification_goal_views.xml b/addons/gamification/views/gamification_goal_views.xml
index e8ce7e13dbd..cfe6d35c218 100644
--- a/addons/gamification/views/gamification_goal_views.xml
+++ b/addons/gamification/views/gamification_goal_views.xml
@@ -166,7 +166,7 @@
                         </ul>
                     </t>
                     <t t-name="kanban-box">
-                        <div t-attf-class="oe_kanban_card oe_kanban_global_click o_kanban_gamification #{record.end_date.raw_value &lt; record.last_update.raw_value &amp; record.state.raw_value == 'failed' ? 'oe_kanban_color_2' : ''} #{record.end_date.raw_value &lt; record.last_update.raw_value &amp; record.state.raw_value == 'reached' ? 'oe_kanban_color_5' : ''}">
+                        <div t-attf-class="oe_kanban_card oe_kanban_global_click o_kanban_gamification #{record.end_date.raw_value &lt; record.last_update.raw_value and record.state.raw_value == 'failed' ? 'oe_kanban_color_2' : ''} #{record.end_date.raw_value &lt; record.last_update.raw_value and record.state.raw_value == 'reached' ? 'oe_kanban_color_5' : ''}">
                             <div class="o_kanban_content">
                                 <p><strong><h4 class="oe_goal_name text-center" tooltip="kanban-tooltip"><field name="definition_id" /></h4></strong></p>
                                 <div class="float-left">
diff --git a/addons/hr_expense/static/src/scss/hr_expense.scss b/addons/hr_expense/static/src/scss/hr_expense.scss
index 0dcad3f74fb..436275b49c9 100644
--- a/addons/hr_expense/static/src/scss/hr_expense.scss
+++ b/addons/hr_expense/static/src/scss/hr_expense.scss
@@ -1,6 +1,6 @@
 .hr_expense {
     @include media-breakpoint-up(md) {
-        &.o_list_view, &.o_kanban_view {
+        &.o_list_view, &.o_legacy_kanban_view {
             min-height: auto;
         }
     }
diff --git a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
index 47aae17f754..b9c293d1034 100644
--- a/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
+++ b/addons/hr_holidays/static/src/scss/accrual_plan_level.scss
@@ -30,7 +30,7 @@ $o-hr-holidays-border-color: gray('300');
             border-radius: 25px;
         }
 
-        .o_kanban_view.o_kanban_ungrouped .o_kanban_record {
+        .o_kanban_renderer.o_kanban_ungrouped .o_kanban_record {
             counter-increment: o-hr-holidays-accrual-plan-level-counter;
             display: flex;
             flex: 0 0 100%;
diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index b6129d99a87..3f6a48e2b34 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_dashboard {
+.o_kanban_renderer.o_kanban_dashboard {
     &.o_hr_recruitment_kanban {
         &.o_kanban_ungrouped .o_kanban_record {
             width: 450px;
@@ -54,10 +54,10 @@
 
         .o_kanban_card_header_title {
             min-height: 3rem;
-        }
 
-        .o_recruitment_job_container {
-            max-width: None !important;
+            .o_field_boolean_favorite {
+                display: inline;
+            }
         }
     }
 
@@ -116,7 +116,7 @@
     }
 }
 
-.o_kanban_view {
+.o_kanban_renderer {
     &.o_kanban_applicant {
         .o_sample_data_disabled {
             .ribbon {
diff --git a/addons/hr_timesheet/__manifest__.py b/addons/hr_timesheet/__manifest__.py
index 493bc9057a6..d74677ca892 100644
--- a/addons/hr_timesheet/__manifest__.py
+++ b/addons/hr_timesheet/__manifest__.py
@@ -48,13 +48,8 @@ up a management by affair.
     'assets': {
         'web.assets_backend': [
             'hr_timesheet/static/src/scss/timesheets_task_form.scss',
-            'hr_timesheet/static/src/js/task_with_hours.js',
-            'hr_timesheet/static/src/js/timesheet_uom.js',
-            'hr_timesheet/static/src/js/timesheet_factor.js',
-            'hr_timesheet/static/src/js/timesheet_config_form_view.js',
-            'hr_timesheet/static/src/js/qr_code_action.js',
-            'hr_timesheet/static/src/js/timesheet_graph_view.js',
-            'hr_timesheet/static/src/js/timesheet_graph_model.js',
+            'hr_timesheet/static/src/**/*.js',
+            ('remove', 'hr_timesheet/static/src/js/*_legacy.js')
         ],
         "web.assets_backend_legacy_lazy": [
             'hr_timesheet/static/src/js/*_legacy.js',
diff --git a/addons/im_livechat/__manifest__.py b/addons/im_livechat/__manifest__.py
index 50f5b123c57..2f723e75b70 100644
--- a/addons/im_livechat/__manifest__.py
+++ b/addons/im_livechat/__manifest__.py
@@ -142,6 +142,7 @@ Help your customers with this chat, and analyse their feedback.
             'web/static/src/core/utils/components.js',
             'web/static/src/core/utils/functions.js',
             'web/static/src/core/utils/hooks.js',
+            'web/static/src/core/utils/numbers.js',
             'web/static/src/core/utils/strings.js',
             'web/static/src/core/utils/timing.js',
             'web/static/src/core/utils/ui.js',
diff --git a/addons/lunch/static/src/scss/lunch_kanban.scss b/addons/lunch/static/src/scss/lunch_kanban.scss
index b4ffa97c8fe..6cbf1da507d 100644
--- a/addons/lunch/static/src/scss/lunch_kanban.scss
+++ b/addons/lunch/static/src/scss/lunch_kanban.scss
@@ -1,5 +1,5 @@
 .o_lunch_content {
-    .o_kanban_view {
+    .o_legacy_kanban_view {
         flex: 1 1 100%;
         &.o_kanban_grouped {
             min-height: auto; // override min-height: 100%
diff --git a/addons/lunch/static/tests/lunch_kanban_mobile_tests.js b/addons/lunch/static/tests/lunch_kanban_mobile_tests.js
index cfcf4fa3c8b..4eec2a0fe7e 100644
--- a/addons/lunch/static/tests/lunch_kanban_mobile_tests.js
+++ b/addons/lunch/static/tests/lunch_kanban_mobile_tests.js
@@ -72,15 +72,15 @@ QUnit.module('LunchKanbanView Mobile', {
             }),
         });
 
-        assert.containsOnce(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)',
+        assert.containsOnce(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)',
             "should have 1 records in the renderer");
 
         // check view layout
         assert.containsOnce(kanban, '.o_content > .o_lunch_content',
             "should have a 'kanban lunch wrapper' column");
-        assert.containsOnce(kanban, '.o_lunch_content > .o_kanban_view',
+        assert.containsOnce(kanban, '.o_lunch_content > .o_legacy_kanban_view',
             "should have a 'classical kanban view' column");
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_lunch_kanban_view',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_lunch_kanban_view',
             "should have classname 'o_lunch_kanban_view'");
         assert.containsOnce($('.o_lunch_content'), '> details',
             "should have a 'lunch kanban' details/summary discolure panel");
diff --git a/addons/lunch/static/tests/lunch_kanban_tests.js b/addons/lunch/static/tests/lunch_kanban_tests.js
index 3861886f92f..13a53618eb0 100644
--- a/addons/lunch/static/tests/lunch_kanban_tests.js
+++ b/addons/lunch/static/tests/lunch_kanban_tests.js
@@ -112,7 +112,7 @@ QUnit.module('LunchKanbanView', {
             }),
         });
 
-        assert.containsOnce(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)',
+        assert.containsOnce(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)',
             "should have 1 records in the renderer");
 
         // check view layout
@@ -122,9 +122,9 @@ QUnit.module('LunchKanbanView', {
             "should have a 'lunch filters' column");
         assert.containsOnce(kanban, '.o_content > .o_lunch_content',
             "should have a 'lunch wrapper' column");
-        assert.containsOnce(kanban, '.o_lunch_content > .o_kanban_view',
+        assert.containsOnce(kanban, '.o_lunch_content > .o_legacy_kanban_view',
             "should have a 'classical kanban view' column");
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_lunch_kanban_view',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_lunch_kanban_view',
             "should have classname 'o_lunch_kanban_view'");
         assert.containsOnce(kanban, '.o_lunch_content > span > .o_lunch_banner',
             "should have a 'lunch' banner");
diff --git a/addons/mail/static/src/js/tools/debug_manager.js b/addons/mail/static/src/js/tools/debug_manager.js
index 0e1968391e6..c2b25bc7875 100644
--- a/addons/mail/static/src/js/tools/debug_manager.js
+++ b/addons/mail/static/src/js/tools/debug_manager.js
@@ -2,7 +2,42 @@
 
 import { registry } from "@web/core/registry";
 
-export function manageMessages({ action, component, env }) {
+export function manageMessages({ component, env }) {
+    const resId = component.model.root.resId;
+    if (!resId) {
+        return null; // No record
+    }
+    const description = env._t("Manage Messages");
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            env.services.action.doAction({
+                res_model: "mail.message",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                type: "ir.actions.act_window",
+                domain: [
+                    ["res_id", "=", resId],
+                    ["model", "=", component.props.resModel],
+                ],
+                context: {
+                    default_res_model: component.props.resModel,
+                    default_res_id: resId,
+                },
+            });
+        },
+        sequence: 325,
+    };
+}
+
+registry.category("debug").category("form").add("mail.manageMessages", manageMessages);
+
+// Legacy form views compatibility: remove as soon as we no longer support legacy views
+function legacyManageMessages({ action, component, env }) {
     const selectedIds = component.widget.getSelectedIds();
     if (!selectedIds.length) {
         return null; // No record
@@ -33,5 +68,4 @@ export function manageMessages({ action, component, env }) {
         sequence: 325,
     };
 }
-
-registry.category("debug").category("form").add("mail.manageMessages", manageMessages);
+registry.category("debug").category("form_legacy").add("mail.manageMessages", legacyManageMessages);
diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss
index ba6f1620e64..311d85e3913 100644
--- a/addons/mail/static/src/scss/kanban_view.scss
+++ b/addons/mail/static/src/scss/kanban_view.scss
@@ -1,6 +1,6 @@
 $o-kanban-attachement-image-size: 80px;
 
-.o_kanban_view {
+.o_legacy_kanban_view, .o_kanban_renderer {
 
     .o_kanban_record.o_kanban_attachment {
         padding: map-get($spacers, 0);
diff --git a/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js b/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
deleted file mode 100644
index 76bc7d2b7fd..00000000000
--- a/addons/mail/static/src/widgets/form_renderer/wowl_form_renderer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @odoo-module */
-
-import { registry } from "@web/core/registry";
-import { FormRenderer } from "@web/views/form/form_renderer";
-import { ChatterContainer } from "@mail/components/chatter_container/chatter_container";
-import {
-    createElement,
-} from "@web/core/utils/xml";
-import { append } from "@web/views/view_compiler";
-
-function compileChatter(node, params) {
-    node.classList.remove("oe_chatter");
-    const container = createElement("div");
-    container.classList.add("o_FormRenderer_chatterContainer");
-
-    const chatter = createElement("ChatterContainer");
-    chatter.setAttribute("threadModel", "props.record.resModel");
-    chatter.setAttribute("threadId", "props.record.resId");
-    // TODO: pass chatterFields equivalent in props
-
-    // chatter.setAttribute("record", "props.record"); // props.record.model.load() to reload the form
-    // in ChatterContainer setup:
-    //   this.messagingService = useService("messaging");
-
-    append(container, chatter);
-    return container;
-}
-
-registry.category("form_compilers").add("chatter_compiler", {
-    selector: "div.oe_chatter",
-    fn: compileChatter,
-});
-
-FormRenderer.components.ChatterContainer = ChatterContainer;
diff --git a/addons/mail/static/tests/helpers/test_utils.js b/addons/mail/static/tests/helpers/test_utils.js
index bdb478ee131..d9cf11d2443 100644
--- a/addons/mail/static/tests/helpers/test_utils.js
+++ b/addons/mail/static/tests/helpers/test_utils.js
@@ -12,6 +12,7 @@ import { registerCleanup } from "@web/../tests/helpers/cleanup";
 import { MockServer } from "@web/../tests/helpers/mock_server";
 import { getFixture, makeDeferred, patchWithCleanup } from "@web/../tests/helpers/utils";
 import { doAction, getActionManagerServerData } from "@web/../tests/webclient/helpers";
+import { useLegacyViews } from "@web/../tests/legacy/legacy_setup";
 
 import core from 'web.core';
 
@@ -507,6 +508,7 @@ function getOpenFormView(afterEvent, openView) {
  * @returns {Object}
  */
 async function start(param0 = {}) {
+    useLegacyViews();
     // patch _.debounce and _.throttle to be fast and synchronous.
     patchWithCleanup(_, {
         debounce: func => func,
diff --git a/addons/mail/static/tests/qunit_suite_tests/chatter_tests.js b/addons/mail/static/tests/qunit_suite_tests/chatter_tests.js
index 92ff287fd41..480be3d226b 100644
--- a/addons/mail/static/tests/qunit_suite_tests/chatter_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/chatter_tests.js
@@ -5,6 +5,7 @@ import { WEBCLIENT_LOAD_ROUTES } from '@mail/../tests/helpers/webclient_setup';
 
 import testUtils from 'web.test_utils';
 import { patchWithCleanup } from '@web/../tests/helpers/utils';
+import { ViewAdapter } from "@web/legacy/action_adapters";
 
 QUnit.module('mail', {}, function () {
 QUnit.module('Chatter');
@@ -167,7 +168,7 @@ QUnit.test('list activity widget: open dropdown', async function (assert) {
     const views = {
         'res.users,false,list': '<list><field name="activity_ids" widget="list_activity"/></list>',
     };
-    const { env, openView } = await start({
+    const { openView } = await start({
         mockRPC: function (route, args) {
             if (
                 args.method !== 'get_views' &&
@@ -188,11 +189,18 @@ QUnit.test('list activity widget: open dropdown', async function (assert) {
         },
         serverData: { views },
     });
-    patchWithCleanup(env.services.action, {
-        switchView() {
-            assert.step('switch_view');
-        },
+
+    patchWithCleanup(ViewAdapter.prototype, {
+        setup() {
+            this._super();
+            const selectRecord = this.props.selectRecord;
+            this.props.selectRecord = (...args) => {
+                assert.step(`select_record ${JSON.stringify(args)}`);
+                return selectRecord(...args);
+            }
+        }
     });
+
     await openView({
         res_model: 'res.users',
         views: [[false, 'list']],
@@ -216,7 +224,7 @@ QUnit.test('list activity widget: open dropdown', async function (assert) {
 
     assert.verifySteps([
         '/web/dataset/search_read',
-        'switch_view',
+        'select_record [2,{\"mode\":\"readonly\"}]',
         'open dropdown',
         'activity_format',
         'action_feedback',
diff --git a/addons/mail/static/tests/qunit_suite_tests/debug_manager_tests.js b/addons/mail/static/tests/qunit_suite_tests/debug_manager_tests.js
index 7dcf7d155c4..40b3f2db3d5 100644
--- a/addons/mail/static/tests/qunit_suite_tests/debug_manager_tests.js
+++ b/addons/mail/static/tests/qunit_suite_tests/debug_manager_tests.js
@@ -26,14 +26,15 @@ QUnit.test("Manage Messages", async function (assert) {
 
     registry.category("debug").category("form").add("manageMessages", manageMessages);
 
-    async function mockRPC(route, args) {
-        if (args.method === "check_access_rights") {
+    async function mockRPC(route, { method, model, kwargs }) {
+        if (method === "check_access_rights") {
             return true;
         }
-        if (route === "/web/dataset/search_read" && args.model === "mail.message") {
-            assert.strictEqual(args.context.default_res_id, 5);
-            assert.strictEqual(args.context.default_res_model, "partner");
-            assert.deepEqual(args.domain, ["&", ["res_id", "=", 5], ["model", "=", "partner"]]);
+        if (method === "web_search_read" && model === "mail.message") {
+            const { context, domain } = kwargs;
+            assert.strictEqual(context.default_res_id, 5);
+            assert.strictEqual(context.default_res_model, "partner");
+            assert.deepEqual(domain, ["&", ["res_id", "=", 5], ["model", "=", "partner"]]);
         }
     }
 
diff --git a/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss b/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
index ac678128701..f6ced06b76d 100644
--- a/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
+++ b/addons/maintenance/static/src/scss/maintenance_team_dashboard.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_ungrouped.o_kanban_dashboard.o_maintenance_team_kanban {
+.o_kanban_renderer.o_kanban_ungrouped.o_kanban_dashboard.o_maintenance_team_kanban {
     .o_kanban_record {
         width: 420px;
     }
diff --git a/addons/maintenance/views/maintenance_views.xml b/addons/maintenance/views/maintenance_views.xml
index ac075c98276..629ebfbabc9 100644
--- a/addons/maintenance/views/maintenance_views.xml
+++ b/addons/maintenance/views/maintenance_views.xml
@@ -462,7 +462,7 @@
                                             <t t-out="record.maintenance_open_count.raw_value"/> Request
                                         </div>
                                         <div class="badge badge-secondary" t-if="!selection_mode and record.next_action_date.raw_value" >
-                                            <t t-out="moment(record.next_action_date.raw_value).format('MMMM Do')"/>
+                                            <t t-esc="luxon.DateTime.fromJSDate(record.next_action_date.raw_value).toFormat('d MMMM')"/>
                                         </div>
                                     </div>
                                     <div class="oe_kanban_bottom_right">
diff --git a/addons/mrp/static/src/scss/mrp_workorder_kanban.scss b/addons/mrp/static/src/scss/mrp_workorder_kanban.scss
index d2580da46d8..f1a5b1f7bdc 100644
--- a/addons/mrp/static/src/scss/mrp_workorder_kanban.scss
+++ b/addons/mrp/static/src/scss/mrp_workorder_kanban.scss
@@ -1,4 +1,4 @@
-.o_kanban_dashboard.o_kanban_view {
+.o_kanban_dashboard.o_kanban_renderer {
     &.o_mrp_workorder_kanban,&.o_workcenter_kanban {
         .o_kanban_group:not(.o_column_folded) {
             width: 400px + $o-kanban-group-padding;
diff --git a/addons/mrp/static/tests/mrp_document_kanban_tests.js b/addons/mrp/static/tests/mrp_document_kanban_tests.js
index 65551b2f050..17540a0a13c 100644
--- a/addons/mrp/static/tests/mrp_document_kanban_tests.js
+++ b/addons/mrp/static/tests/mrp_document_kanban_tests.js
@@ -58,10 +58,10 @@ QUnit.module('MrpDocumentsKanbanView', {
         assert.ok(kanban, "kanban is created");
         assert.ok(kanban.$buttons.find('.o_mrp_documents_kanban_upload'),
             "should have upload button in kanban buttons");
-        assert.containsN(kanban, '.o_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3,
+        assert.containsN(kanban, '.o_legacy_kanban_view .o_kanban_record:not(.o_kanban_ghost)', 3,
             "should have 3 records in the renderer");
         // check view layout
-        assert.hasClass(kanban.$('.o_kanban_view'), 'o_mrp_documents_kanban_view',
+        assert.hasClass(kanban.$('.o_legacy_kanban_view'), 'o_mrp_documents_kanban_view',
             "should have classname 'o_mrp_documents_kanban_view'");
         // check control panel buttons
         assert.containsN(kanban, '.o_cp_buttons .btn-primary', 1,
diff --git a/addons/note/views/note_views.xml b/addons/note/views/note_views.xml
index 4f443b33aeb..e12c275b3c4 100644
--- a/addons/note/views/note_views.xml
+++ b/addons/note/views/note_views.xml
@@ -124,7 +124,7 @@
                   </div>
                   <div t-attf-class="d-flex #{noteHasFollowers ? 'w-100 align-items-center justify-content-end' : 'align-items-end'}">
                     <div t-if="noteHasFollowers" class="d-flex align-items-center mr-2 mt-2">
-                      <t t-foreach="record.message_partner_ids.raw_value" t-as="follower">
+                      <t t-foreach="record.message_partner_ids.raw_value" t-as="follower" t-key="follower">
                         <img
                             t-if="follower_index &lt; 5"
                             t-att-src="kanban_image('res.partner', 'avatar_128', follower)"
diff --git a/addons/payment/static/src/scss/payment_acquirer.scss b/addons/payment/static/src/scss/payment_acquirer.scss
index e73582ec847..dba272044ab 100644
--- a/addons/payment/static/src/scss/payment_acquirer.scss
+++ b/addons/payment/static/src/scss/payment_acquirer.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_payment_acquirer {
+.o_kanban_renderer.o_kanban_payment_acquirer {
     &.o_kanban_ungrouped {
         .o_kanban_record {
             width: 500px;
diff --git a/addons/point_of_sale/static/src/scss/pos_dashboard.scss b/addons/point_of_sale/static/src/scss/pos_dashboard.scss
index 469fd9982f2..ca45e6b8a72 100644
--- a/addons/point_of_sale/static/src/scss/pos_dashboard.scss
+++ b/addons/point_of_sale/static/src/scss/pos_dashboard.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_dashboard.o_pos_kanban.o_kanban_ungrouped {
+.o_kanban_renderer.o_kanban_dashboard.o_pos_kanban.o_kanban_ungrouped {
 	.o_kanban_record {
         width: 500px;
 	}
diff --git a/addons/project/static/src/js/project_task_kanban_examples.js b/addons/project/static/src/js/project_task_kanban_examples.js
index 7882dbd0514..2ae2f87445e 100644
--- a/addons/project/static/src/js/project_task_kanban_examples.js
+++ b/addons/project/static/src/js/project_task_kanban_examples.js
@@ -1,111 +1,104 @@
 /** @odoo-module **/
 
 import { _lt } from 'web.core';
-import {Markup} from 'web.utils';
 import kanbanExamplesRegistry from 'web.kanban_examples_registry';
+import { registry } from "@web/core/registry";
+import { renderToString } from '@web/core/utils/render';
 
-const greenBullet = Markup`<span class="o_status d-inline-block o_status_green"></span>`;
-const redBullet = Markup`<span class="o_status d-inline-block o_status_red"></span>`;
-const star = Markup`<a style="color: gold;" class="fa fa-star"/>`;
-const clock = Markup`<a class="fa fa-clock-o" />`;
+const { markup } = owl;
+const greenBullet = markup(`<span class="o_status d-inline-block o_status_green"></span>`);
+const redBullet = markup(`<span class="o_status d-inline-block o_status_red"></span>`);
+const star = markup(`<a style="color: gold;" class="fa fa-star"></a>`);
+const clock = markup(`<a class="fa fa-clock-o"></a>`);
 
-const descriptionActivities = escFormat(_lt('%s Use the %s icon to organize your daily activities.'), '<br/>', clock);
-const description = escFormat(_lt('Prioritize Tasks by using the %s icon.' +
-            '%s Use the %s button to signalize to your colleagues that a task is ready for the next stage.' +
-            '%s Use the %s to signalize a problem or a need for discussion on a task.' +
-            '%s'), star, '<br/>', greenBullet, '<br/>', redBullet, descriptionActivities);
-
-/**
- * Helper function to escape the format string, but not the values formatted in,
- * rougly equivalent to `_.str.sprintf(_.escape(fmt), ...)`.
- *
- * Performs the escaping lazily (at point of use) as it's designed to be used
- * with `_lt` as the source of the format string.
- *
- * @param fmt format string, to escape
- * @param args objects to format into `fmt`, unescaped
- * @returns {Object} a stringifiable object returning the escaped then formatted string
- */
-function escFormat(fmt, ...args) {
-    return {
-        [_.escapeMethod]() {
-            return this;
-        },
-        toString() {
-            return _.str.sprintf(_.escape(fmt), ...args);
-        },
-    };
-}
-
-kanbanExamplesRegistry.add('project', {
+const exampleData = {
     ghostColumns: [_lt('New'), _lt('Assigned'), _lt('In Progress'), _lt('Done')],
     applyExamplesText: _lt("Use This For My Project"),
     examples:[{
         name: _lt('Software Development'),
         columns: [_lt('Backlog'), _lt('Specifications'), _lt('Development'), _lt('Tests'), _lt('Delivered')],
-        description: escFormat(_lt('Prioritize Tasks by using the %s icon.' +
-            '%s Use the %s button to inform your colleagues that a task is ready for the next stage.' +
-            '%s Use the %s to indicate a problem or a need for discussion on a task.' +
-            '%s'), star, '<br/>', greenBullet, '<br/>', redBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.generic"));
+        },
         bullets: [greenBullet, redBullet, star],
     }, {
         name: _lt('Agile Scrum'),
         columns: [_lt('Backlog'), _lt('Sprint Backlog'), _lt('Sprint in Progress'), _lt('Sprint Complete'), _lt('Old Completed Sprint')],
-        description: escFormat(_lt('Use %s and %s bullets to indicate the status of a task. %s'), greenBullet, redBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.agilescrum"));
+        },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Digital Marketing'),
         columns: [_lt('Ideas'), _lt('Researching'), _lt('Writing'), _lt('Editing'), _lt('Done')],
-        description: escFormat(_lt('Everyone can propose ideas, and the Editor marks the best ones ' +
-            'as %s. Attach all documents or links to the task directly, to have all research information centralized. %s'), greenBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.digitalmarketing"));
+        },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Customer Feedback'),
         columns: [_lt('New'), _lt('In development'), _lt('Done'), _lt('Refused')],
-        description: escFormat(_lt('Customers propose feedbacks by email; Odoo creates tasks ' +
-            'automatically, and you can communicate on the task directly. Your managers decide which ' +
-            'feedback is accepted %s and which feedback is moved to the %s column. %s'), greenBullet, _lt('"Refused"'), descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.customerfeedback"));
+        },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Consulting'),
         columns: [_lt('New Projects'), _lt('Resources Allocation'), _lt('In Progress'), _lt('Done')],
-        description: escFormat(_lt('Manage the lifecycle of your project using the kanban view. Add newly acquired projects, assign them and use the %s and %s to define if the project is ready for the next step. %s'), greenBullet, redBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.consulting"));
+        },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Research Project'),
         columns: [_lt('Brainstorm'), _lt('Research'), _lt('Draft'), _lt('Final Document')],
-        description: escFormat(_lt('Handle your idea gathering within Tasks of your new Project and discuss them in the chatter of the tasks. Use the %s and %s to signalize what is the current status of your Idea. %s'), greenBullet, redBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.researchproject"));
+        },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Website Redesign'),
         columns: [_lt('Page Ideas'), _lt('Copywriting'), _lt('Design'), _lt('Live')],
-        description: escFormat(_lt('Handle your idea gathering within Tasks of your new Project and discuss them in the chatter of the tasks. Use the %s and %s to signalize what is the current status of your Idea. %s'), greenBullet, redBullet, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.researchproject"));
+        },
     }, {
         name: _lt('T-shirt Printing'),
         columns: [_lt('New Orders'), _lt('Logo Design'), _lt('To Print'), _lt('Done')],
-        description: escFormat(_lt('Communicate with customers on the task using the email gateway. ' +
-            'Attach logo designs to the task, so that information flows from designers to the workers ' +
-            'who print the t-shirt. Organize priorities amongst orders using the %s icon. %s'), star, descriptionActivities),
+        get description() {
+            return markup(renderToString("project.example.tshirtprinting"));
+        },
         bullets: [star],
     }, {
         name: _lt('Design'),
         columns: [_lt('New Request'), _lt('Design'), _lt('Client Review'), _lt('Handoff')],
-        description: description,
+        get description() {
+            return markup(renderToString("project.example.generic"));
+        },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Publishing'),
         columns: [_lt('Ideas'), _lt('Writing'), _lt('Editing'), _lt('Published')],
-        description: description,
+        get description() {
+            return markup(renderToString("project.example.generic"));
+        },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Manufacturing'),
         columns: [_lt('New Orders'), _lt('Material Sourcing'), _lt('Manufacturing'), _lt('Assembling'), _lt('Delivered')],
-        description: description,
+        get description() {
+            return markup(renderToString("project.example.generic"));
+        },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Podcast and Video Production'),
         columns: [_lt('Research'), _lt('Script'), _lt('Recording'), _lt('Mixing'), _lt('Published')],
-        description: description,
+        get description() {
+            return markup(renderToString("project.example.generic"));
+        },
         bullets: [greenBullet, redBullet, star, clock],
     }],
-});
+};
+
+kanbanExamplesRegistry.add('project', exampleData);
+registry.category("kanban_examples").add('project', exampleData);
diff --git a/addons/project/static/src/js/right_panel/project_right_panel.js b/addons/project/static/src/js/right_panel/project_right_panel.js
index c56c0f952d4..ccb3ba5901c 100644
--- a/addons/project/static/src/js/right_panel/project_right_panel.js
+++ b/addons/project/static/src/js/right_panel/project_right_panel.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { AddMilestone, OpenMilestone } from '@project/js/right_panel/project_utils';
-import { formatFloat, formatMonetary } from "@web/fields/formatters";
+import { formatFloat, formatMonetary } from "@web/views/fields/formatters";
 import { LegacyComponent } from "@web/legacy/legacy_component";
 import { session } from "@web/session";
 
diff --git a/addons/project/static/src/scss/project_dashboard.scss b/addons/project/static/src/scss/project_dashboard.scss
index 5b3ac2b1349..47289359433 100644
--- a/addons/project/static/src/scss/project_dashboard.scss
+++ b/addons/project/static/src/scss/project_dashboard.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_kanban_dashboard.o_project_kanban {
+.o_legacy_kanban_view.o_kanban_dashboard.o_project_kanban {
 
     .o_project_kanban_main {
         max-width: 300px;
diff --git a/addons/project/static/src/scss/project_widgets.scss b/addons/project/static/src/scss/project_widgets.scss
index fc9e858cbd2..27b86bc792b 100644
--- a/addons/project/static/src/scss/project_widgets.scss
+++ b/addons/project/static/src/scss/project_widgets.scss
@@ -37,7 +37,7 @@
     cursor: pointer;
 }
 
-.o_kanban_view.o_pupdate_kanban {
+.o_legacy_kanban_view.o_pupdate_kanban {
     overflow: auto;
     &.o_kanban_ungrouped {
         padding:0px;
diff --git a/addons/project/static/src/xml/project_task_kanban_examples.xml b/addons/project/static/src/xml/project_task_kanban_examples.xml
new file mode 100644
index 00000000000..cfc831ff52f
--- /dev/null
+++ b/addons/project/static/src/xml/project_task_kanban_examples.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="project.example.generic" owl="1">
+      Prioritize Tasks by using the <a style="color: gold;" class="fa fa-star"></a> icon.
+      <br/>
+      Use the <span class="o_status d-inline-block o_status_green"></span> button to inform your colleagues that a task is ready for the next stage.
+      <br/>
+      Use the <span class="o_status d-inline-block o_status_red"></span> to indicate a problem or a need for discussion on a task.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+    <t t-name="project.example.agilescrum" owl="1">
+      Use <span class="o_status d-inline-block o_status_green"></span> and <span class="o_status d-inline-block o_status_red"></span> bullets to indicate the status of a task.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+    <t t-name="project.example.digitalmarketing" owl="1">
+      Everyone can propose ideas, and the Editor marks the best ones as <span class="o_status d-inline-block o_status_green"></span>.
+      Attach all documents or links to the task directly, to have all research information centralized. 
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+  
+    <t t-name="project.example.customerfeedback" owl="1">
+      Customers propose feedbacks by email; Odoo creates tasks automatically, and you can
+      communicate on the task directly. Your managers decide which feedback is accepted
+      <span class="o_status d-inline-block o_status_green"></span> and which feedback is
+      moved to the "Refused" column.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+    <t t-name="project.example.consulting" owl="1">
+      Manage the lifecycle of your project using the kanban view. Add newly acquired projects,
+      assign them and use the <span class="o_status d-inline-block o_status_green"></span> and
+      <span class="o_status d-inline-block o_status_red"></span> to define if the project is
+      ready for the next step.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+    <t t-name="project.example.researchproject" owl="1">
+      Handle your idea gathering within Tasks of your new Project and discuss them in the chatter of the tasks. Use the
+      <span class="o_status d-inline-block o_status_green"></span> and <span class="o_status d-inline-block o_status_red"></span>
+      to signalize what is the current status of your Idea.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+    <t t-name="project.example.tshirtprinting" owl="1">
+      Communicate with customers on the task using the email gateway. Attach logo designs to the task, so that information flows from
+      designers to the workers who print the t-shirt. Organize priorities amongst orders using the
+      <a style="color: gold;" class="fa fa-star"></a> icon.
+      <br/>
+      Use the <a class="fa fa-clock-o"></a> icon to organize your daily activities.
+    </t>
+
+</templates>
diff --git a/addons/project/static/tests/tours/project_sharing_tour.js b/addons/project/static/tests/tours/project_sharing_tour.js
index 671f5c6a0e9..7d7cad8e40e 100644
--- a/addons/project/static/tests/tours/project_sharing_tour.js
+++ b/addons/project/static/tests/tours/project_sharing_tour.js
@@ -48,7 +48,7 @@ const projectSharingSteps = [...tour.stepUtils.goToAppSteps("project.menu_main_p
     content: 'Click "Create" button',
     run: 'click',
 }, {
-    trigger: '.o_kanban_quick_create .o_field_widget[name="name"]',
+    trigger: '.o_kanban_quick_create .o_field_widget[name="name"] input',
     content: 'Create Task',
     run: 'text Test Create Task',
 }, {
diff --git a/addons/rating/static/src/scss/rating_rating_views.scss b/addons/rating/static/src/scss/rating_rating_views.scss
index 9fb46a6e322..8d5d84200b2 100644
--- a/addons/rating/static/src/scss/rating_rating_views.scss
+++ b/addons/rating/static/src/scss/rating_rating_views.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_rating_rating_kanban {
+.o_kanban_renderer .o_rating_rating_kanban {
     .o_kanban_record {
         width: 350px;
     }
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index ff16e461e52..60d0152724a 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -152,7 +152,7 @@
                                 <div class="d-flex flex-row">
                                     <div class="o_rating_kanban_left mr-3">
                                         <h1 class="o_rating_value text-center text-primary" t-esc="val_stars"/>
-                                        <i t-foreach="_.range(0, val_integer)" t-as="num"
+                                        <i t-foreach="[...Array(val_integer).keys()]" t-as="num"  t-key="num"
                                            class="fa fa-star"
                                            aria-label="A star"
                                            role="img"/>
@@ -160,7 +160,7 @@
                                            class="fa fa-star-half-o"
                                            aria-label="Half a star"
                                            role="img"/>
-                                        <i t-foreach="_.range(0, empty_star)" t-as="num"
+                                        <i t-foreach="[...Array(empty_star).keys()]" t-as="num" t-key="num"
                                            class="fa fa-star text-black-25"
                                            aria-label="A star"
                                            role="img"/>
diff --git a/addons/sale/static/tests/sales_team_dashboard_tests.js b/addons/sale/static/tests/sales_team_dashboard_tests.js
index a0a7b91b66a..dadea52f230 100644
--- a/addons/sale/static/tests/sales_team_dashboard_tests.js
+++ b/addons/sale/static/tests/sales_team_dashboard_tests.js
@@ -55,7 +55,7 @@ QUnit.test('edit target with several o_kanban_primary_bottom divs [REQUIRE FOCUS
         },
     });
 
-    assert.containsOnce(kanban, '.o_kanban_view .o_progressbar:contains(Click to define an invoicing target)')
+    assert.containsOnce(kanban, '.o_legacy_kanban_view .o_progressbar:contains(Click to define an invoicing target)')
     assert.containsN(kanban, '.o_kanban_primary_bottom', 2,
         "should have two divs with classname 'o_kanban_primary_bottom'");
 
diff --git a/addons/sale_project/static/src/right_panel/project_right_panel.js b/addons/sale_project/static/src/right_panel/project_right_panel.js
index 5c3c3a509db..9f0a312ef47 100644
--- a/addons/sale_project/static/src/right_panel/project_right_panel.js
+++ b/addons/sale_project/static/src/right_panel/project_right_panel.js
@@ -1,7 +1,7 @@
 /** @odoo-module  */
 
 import { patch } from 'web.utils';
-import { formatFloatTime, formatFloat } from "@web/fields/formatters";
+import { formatFloatTime, formatFloat } from "@web/views/fields/formatters";
 import ProjectRightPanel from '@project/js/right_panel/project_right_panel';
 
 patch(ProjectRightPanel.prototype, '@sale_project/right_panel/project_right_panel', {
diff --git a/addons/sale_timesheet/views/project_task_views.xml b/addons/sale_timesheet/views/project_task_views.xml
index 0190e311d57..b2470e97eda 100644
--- a/addons/sale_timesheet/views/project_task_views.xml
+++ b/addons/sale_timesheet/views/project_task_views.xml
@@ -206,7 +206,7 @@
         <record id="view_task_form2_inherit_sale_timesheet" model="ir.ui.view">
             <field name="name">view.task.form2.inherit</field>
             <field name="model">project.task</field>
-            <field name="inherit_id" ref="project.view_task_form2"/>
+            <field name="inherit_id" ref="sale_project.view_sale_project_inherit_form"/>
             <field name="arch" type="xml">
                 <xpath expr="//field[@name='sale_line_id']" position="attributes">
                     <attribute name="context">{'with_remaining_hours': True, 'with_price_unit': True}</attribute>
diff --git a/addons/sales_team/static/src/scss/crm_team_views.scss b/addons/sales_team/static/src/scss/crm_team_views.scss
index 2c626e1d13d..f3f5977952f 100644
--- a/addons/sales_team/static/src/scss/crm_team_views.scss
+++ b/addons/sales_team/static/src/scss/crm_team_views.scss
@@ -1,7 +1,7 @@
 $o-kanban-large-record-width: 400px;
 $o-kanban-medium-record-width: 350px;
 
-.o_kanban_view.o_crm_team_kanban {
+.o_kanban_renderer.o_crm_team_kanban {
     .o_kanban_group:not(.o_column_folded) {
         width: $o-kanban-large-record-width + 2*$o-kanban-group-padding;
     }
@@ -10,7 +10,7 @@ $o-kanban-medium-record-width: 350px;
     }
 }
 
-.o_kanban_view.o_crm_team_member_kanban {
+.o_kanban_renderer.o_crm_team_member_kanban {
     .o_kanban_group:not(.o_column_folded) {
         width: $o-kanban-medium-record-width + 2*$o-kanban-group-padding;
         min-height: 100px;
diff --git a/addons/stock/static/tests/stock_traceability_report_backend_tests.js b/addons/stock/static/tests/stock_traceability_report_backend_tests.js
index 3c7c87b006c..def4bb68295 100644
--- a/addons/stock/static/tests/stock_traceability_report_backend_tests.js
+++ b/addons/stock/static/tests/stock_traceability_report_backend_tests.js
@@ -1,7 +1,8 @@
 odoo.define('stock.stock_traceability_report_backend_tests', function (require) {
     "use strict";
 
-    const ControlPanel = require('web.ControlPanel');
+    const LegacyControlPanel = require('web.ControlPanel');
+    const { ControlPanel } = require("@web/search/control_panel/control_panel");
     const dom = require('web.dom');
     const StockReportGeneric = require('stock.stock_report_generic');
     const testUtils = require('web.test_utils');
@@ -99,6 +100,20 @@ odoo.define('stock.stock_traceability_report_backend_tests', function (require)
                     });
                 },
             });
+
+            patchWithCleanup(LegacyControlPanel.prototype, {
+                setup() {
+                    this._super();
+                    onMounted(() => {
+                        mountCount = mountCount + 1;
+                        this.__uniqueId = mountCount;
+                        assert.step(`mounted ${this.__uniqueId} (legacy)`);
+                    });
+                    onWillUnmount(() => {
+                        assert.step(`willUnmount ${this.__uniqueId} (legacy)`);
+                    });
+                },
+            });
             const serverData = {
                 models: {
                     partner: {
@@ -147,12 +162,12 @@ odoo.define('stock.stock_traceability_report_backend_tests', function (require)
             destroy(webClient);
 
             assert.verifySteps([
-                'mounted 1',
-                'willUnmount 1',
+                'mounted 1 (legacy)',
+                'willUnmount 1 (legacy)',
                 'mounted 2',
                 'willUnmount 2',
-                'mounted 3',
-                'willUnmount 3',
+                'mounted 3 (legacy)',
+                'willUnmount 3 (legacy)',
             ]);
         });
     });
diff --git a/addons/test_mail/static/tests/activity_tests.js b/addons/test_mail/static/tests/activity_tests.js
index d163fe8671d..b6c07b1b96f 100644
--- a/addons/test_mail/static/tests/activity_tests.js
+++ b/addons/test_mail/static/tests/activity_tests.js
@@ -117,7 +117,7 @@ QUnit.test('activity view: simple activity rendering', async function (assert) {
         'should have a table');
     var $th1 = $activity.find('table thead tr:first th:nth-child(2)');
     assert.containsOnce($th1, 'span:first:contains(Email)', 'should contain "Email" in header of first column');
-    assert.containsOnce($th1, '.o_kanban_counter', 'should contain a progressbar in header of first column');
+    assert.containsOnce($th1, '.o_legacy_kanban_counter', 'should contain a progressbar in header of first column');
     assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:first'), 'data-original-title', '1 Planned',
         'the counter progressbars should be correctly displayed');
     assert.hasAttrValue($th1.find('.o_kanban_counter_progress .progress-bar:nth-child(2)'), 'data-original-title', '1 Today',
diff --git a/addons/utm/static/src/js/utm_campaign_kanban_examples.js b/addons/utm/static/src/js/utm_campaign_kanban_examples.js
index a18e740a66c..9188c2b957f 100644
--- a/addons/utm/static/src/js/utm_campaign_kanban_examples.js
+++ b/addons/utm/static/src/js/utm_campaign_kanban_examples.js
@@ -3,10 +3,11 @@ odoo.define('utm.campaing_kanban_examples', function (require) {
 
 var core = require('web.core');
 var kanbanExamplesRegistry = require('web.kanban_examples_registry');
+const { registry } = require("@web/core/registry");
 
 var _lt = core._lt;
 
-kanbanExamplesRegistry.add('utm_campaign', {
+const exampleData = {
     ghostColumns: [_lt('Ideas'), _lt('Design'), _lt('Review'), _lt('Send'), _lt('Done')],
     applyExamplesText: _lt("Use This For My Campaigns"),
     examples: [{
@@ -30,5 +31,8 @@ kanbanExamplesRegistry.add('utm_campaign', {
         columns: [_lt('To be Approved'), _lt('Approved'), _lt('Deployed')],
         description: _lt("Prepare Campaigns and get them approved before making them go live."),
     }],
-});
+};
+
+kanbanExamplesRegistry.add('utm_campaign', exampleData);
+registry.category("kanban_examples").add("utm_campaign", exampleData);
 });
diff --git a/addons/utm/static/src/scss/utm_views.scss b/addons/utm/static/src/scss/utm_views.scss
index 25c537c8a12..52bd0e9d916 100644
--- a/addons/utm/static/src/scss/utm_views.scss
+++ b/addons/utm/static/src/scss/utm_views.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_utm_kanban {
+.o_kanban_renderer.o_utm_kanban {
     .o_kanban_group {
         padding: 0 ($grid-gutter-width * .25) $grid-gutter-width;
 
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index e4a87367142..33470b177e6 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -1,5 +1,4 @@
-
-.o_kanban_view .o_kanban_dashboard {
+.o_kanban_dashboard {
     &:not(.o_kanban_grouped) {
         // correctly display the no_content_helper in dashboards
         flex-flow: row wrap;
diff --git a/addons/web_editor/static/src/js/backend/field_html.js b/addons/web_editor/static/src/js/backend/field_html.js
index e16baa6838a..c3c9e2d13fd 100644
--- a/addons/web_editor/static/src/js/backend/field_html.js
+++ b/addons/web_editor/static/src/js/backend/field_html.js
@@ -10,6 +10,8 @@ import {QWebPlugin} from '@web_editor/js/backend/QWebPlugin';
 import {getAdjacentPreviousSiblings, getAdjacentNextSiblings} from '../../../lib/odoo-editor/src/utils/utils';
 // must wait for web/ to add the default html widget, otherwise it would override the web_editor one
 import 'web._field_registry';
+import "@web/views/fields/text/text_field"; // make sure the text field file has first been executed.
+import { registry } from '@web/core/registry';
 
 var _lt = core._lt;
 var TranslatableFieldMixin = basic_fields.TranslatableFieldMixin;
@@ -604,5 +606,7 @@ var FieldHtml = basic_fields.DebouncedField.extend(TranslatableFieldMixin, {
 
 field_registry.add('html', FieldHtml);
 
+// Road to WOWL trick needed not to shadow the legacy html field in web editor.
+registry.category("fields").remove("html");
 
 export default FieldHtml;
diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss
index 874a9a728b4..c54b25f4513 100644
--- a/addons/website/static/src/scss/website.backend.scss
+++ b/addons/website/static/src/scss/website.backend.scss
@@ -221,7 +221,7 @@
     pointer-events: none;
 }
 
-.o_kanban_view.o_theme_kanban {
+.o_theme_kanban {
     $o-theme-kanban-gray: #fcfcfc;
     background-color: $o-theme-kanban-gray;
 
diff --git a/addons/website_sale/views/product_views.xml b/addons/website_sale/views/product_views.xml
index 4cd15540563..122bc864946 100644
--- a/addons/website_sale/views/product_views.xml
+++ b/addons/website_sale/views/product_views.xml
@@ -159,7 +159,7 @@
                     <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
                     <field name="website_sequence" groups="base.group_no_one"/>
                     <field name="public_categ_ids" widget="many2many_tags" string="Categories"/>
-                    <field name="website_ribbon_id" groups="base.group_no_one" options="{'no_quick_create': True'}"/>
+                    <field name="website_ribbon_id" groups="base.group_no_one" options="{'no_quick_create': True}"/>
                 </group>
                 <group name="product_template_images" string="Extra Product Media" attrs="{'invisible': [('sale_ok','=',False)]}">
                     <field name="product_template_image_ids" class="o_website_sale_image_list" context="{'default_name': name}" mode="kanban" add-label="Add a Media" nolabel="1"/>
diff --git a/addons/website_slides/static/src/scss/slide_views.scss b/addons/website_slides/static/src/scss/slide_views.scss
index 6afd73e9423..daa68dc284c 100644
--- a/addons/website_slides/static/src/scss/slide_views.scss
+++ b/addons/website_slides/static/src/scss/slide_views.scss
@@ -1,6 +1,6 @@
 $o-kanban-large-record-width: 400px;
 
-.o_kanban_view.o_slide_kanban {
+.o_kanban_view .o_slide_kanban {
     .o_kanban_group:not(.o_column_folded) {
         width: $o-kanban-large-record-width + 2*$o-kanban-group-padding;
     }
diff --git a/odoo/addons/base/static/src/css/modules.css b/odoo/addons/base/static/src/css/modules.css
index b3a011708a2..5d69f55de13 100644
--- a/odoo/addons/base/static/src/css/modules.css
+++ b/odoo/addons/base/static/src/css/modules.css
@@ -17,13 +17,13 @@
     display: flex;
 }
 
-.o_modules_kanban.o_kanban_view .o_kanban_record .o_dropdown_kanban {
+.o_kanban_view .o_modules_kanban .o_kanban_record .o_dropdown_kanban {
     visibility: visible;
     opacity: 0.5;
 }
 
-.o_modules_kanban.o_kanban_view .o_kanban_record:hover .o_dropdown_kanban,
-.o_modules_kanban.o_kanban_view .o_kanban_record .o_dropdown_kanban.show {
+.o_kanban_view .o_modules_kanban .o_kanban_record:hover .o_dropdown_kanban,
+.o_kanban_view .o_modules_kanban .o_kanban_record .o_dropdown_kanban.show {
     opacity: 1;
 }
 
diff --git a/odoo/addons/base/static/src/scss/res_partner.scss b/odoo/addons/base/static/src/scss/res_partner.scss
index 5f71dd08814..054804c547a 100644
--- a/odoo/addons/base/static/src/scss/res_partner.scss
+++ b/odoo/addons/base/static/src/scss/res_partner.scss
@@ -1,4 +1,4 @@
-.o_kanban_view.o_res_partner_kanban {
+.o_kanban_view .o_res_partner_kanban {
 
     .ribbon {
         &::before, &::after {
diff --git a/odoo/addons/base/static/tests/base_settings_tests.js b/odoo/addons/base/static/tests/base_settings_tests.js
index dda68f60ddf..1016f8c8420 100644
--- a/odoo/addons/base/static/tests/base_settings_tests.js
+++ b/odoo/addons/base/static/tests/base_settings_tests.js
@@ -198,8 +198,6 @@ QUnit.module('base_settings_tests', {
     QUnit.test(
         "settings views does not read existing id when coming back in breadcrumbs",
         async function (assert) {
-            assert.expect(8);
-
             serverData.actions = {
                 1: {
                     id: 1,
@@ -249,7 +247,7 @@ QUnit.module('base_settings_tests', {
                 "create", // when we click on action button => save
                 "read", // with save, we have a reload... (not necessary actually)
                 "get_views", // for other action in breadcrumb,
-                // with a searchread (not shown here since it is a route)
+                "web_search_read", // same
                 "onchange", // when we come back, we want to restart from scratch
             ]);
         }

From 6982b4c5c52b5ad85f9ec575ffe4f7f99f5065cc Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Thu, 23 Jun 2022 07:30:39 +0000
Subject: [PATCH 27/50] [REF] web: scrolling: better handling of action scroll

This commit refactors the way actions restore their scrolling
positions (when coming back). By default, in desktop, we want the
o_content div of the action to scroll. In mobile, we want the
whole action to scroll (including the ControlPanel). With this
commit, the logic is handled at the concerned level: in the
action hook for the desktop case, and in the action service for
the mobile case.

Part-of: odoo/odoo#92475
---
 .../src/webclient/actions/action_hook.js      | 104 ++++++++++++++----
 .../static/src/webclient/actions/scrolling.js |  50 ---------
 2 files changed, 80 insertions(+), 74 deletions(-)
 delete mode 100644 addons/web/static/src/webclient/actions/scrolling.js

diff --git a/addons/web/static/src/webclient/actions/action_hook.js b/addons/web/static/src/webclient/actions/action_hook.js
index 1c6e79e0dce..43a7112abff 100644
--- a/addons/web/static/src/webclient/actions/action_hook.js
+++ b/addons/web/static/src/webclient/actions/action_hook.js
@@ -1,12 +1,7 @@
 /** @odoo-module **/
 
-import { getScrollPosition, setScrollPosition } from "./scrolling";
+const { onMounted, useComponent, useEffect, useExternalListener } = owl;
 
-const { useComponent, useEffect } = owl;
-
-// -----------------------------------------------------------------------------
-// Action hook
-// -----------------------------------------------------------------------------
 const scrollSymbol = Symbol("scroll");
 
 export class CallbackRecorder {
@@ -66,32 +61,93 @@ export function useSetupAction(params = {}) {
         __getContext__,
     } = component.env;
 
-    if (__beforeLeave__ && params.beforeLeave) {
-        useCallbackRecorder(__beforeLeave__, params.beforeLeave);
+    const { beforeUnload, beforeLeave, getGlobalState, getLocalState, rootRef } = params;
+
+    if (beforeUnload) {
+        useExternalListener(window, "beforeunload", beforeUnload);
     }
-    if (__getGlobalState__ && params.getGlobalState) {
-        useCallbackRecorder(__getGlobalState__, params.getGlobalState);
+    if (__beforeLeave__ && beforeLeave) {
+        useCallbackRecorder(__beforeLeave__, beforeLeave);
     }
-    if (__getLocalState__) {
-        useCallbackRecorder(__getLocalState__, () => {
+    if (__getGlobalState__ && (getGlobalState || rootRef)) {
+        useCallbackRecorder(__getGlobalState__, () => {
             const state = {};
-            state[scrollSymbol] = getScrollPosition(component.env);
-            if (params.getLocalState) {
-                Object.assign(state, params.getLocalState());
+            if (getGlobalState) {
+                Object.assign(state, getGlobalState());
+            }
+            if (rootRef) {
+                const searchPanelEl = rootRef.el.querySelector(".o_content .o_search_panel");
+                if (searchPanelEl) {
+                    state[scrollSymbol] = {
+                        searchPanel: {
+                            left: searchPanelEl.scrollLeft,
+                            top: searchPanelEl.scrollTop,
+                        },
+                    };
+                }
             }
             return state;
         });
+
+        if (rootRef) {
+            onMounted(() => {
+                const { globalState } = component.props;
+                const scrolling = globalState && globalState[scrollSymbol];
+                if (scrolling) {
+                    const searchPanelEl = rootRef.el.querySelector(".o_content .o_search_panel");
+                    if (searchPanelEl) {
+                        searchPanelEl.scrollLeft =
+                            (scrolling.searchPanel && scrolling.searchPanel.left) || 0;
+                        searchPanelEl.scrollTop =
+                            (scrolling.searchPanel && scrolling.searchPanel.top) || 0;
+                    }
+                }
+            });
+        }
+    }
+    if (__getLocalState__ && (getLocalState || rootRef)) {
+        useCallbackRecorder(__getLocalState__, () => {
+            const state = {};
+            if (getLocalState) {
+                Object.assign(state, getLocalState());
+            }
+            if (rootRef) {
+                if (component.env.isSmall) {
+                    state[scrollSymbol] = {
+                        root: { left: rootRef.el.scrollLeft, top: rootRef.el.scrollTop },
+                    };
+                } else {
+                    const contentEl = rootRef.el.querySelector(".o_content");
+                    if (contentEl) {
+                        state[scrollSymbol] = {
+                            content: { left: contentEl.scrollLeft, top: contentEl.scrollTop },
+                        };
+                    }
+                }
+            }
+            return state;
+        });
+
+        if (rootRef) {
+            onMounted(() => {
+                const { state } = component.props;
+                const scrolling = state && state[scrollSymbol];
+                if (scrolling) {
+                    if (component.env.isSmall) {
+                        rootRef.el.scrollTop = (scrolling.root && scrolling.root.top) || 0;
+                        rootRef.el.scrollLeft = (scrolling.root && scrolling.root.left) || 0;
+                    } else if (scrolling.content) {
+                        const contentEl = rootRef.el.querySelector(".o_content");
+                        if (contentEl) {
+                            contentEl.scrollTop = scrolling.content.top || 0;
+                            contentEl.scrollLeft = scrolling.content.left || 0;
+                        }
+                    }
+                }
+            });
+        }
     }
     if (__getContext__ && params.getContext) {
         useCallbackRecorder(__getContext__, params.getContext);
     }
-
-    useEffect(
-        () => {
-            if (component.props.state && component.props.state[scrollSymbol]) {
-                setScrollPosition(component.env, component.props.state[scrollSymbol]);
-            }
-        },
-        () => []
-    );
 }
diff --git a/addons/web/static/src/webclient/actions/scrolling.js b/addons/web/static/src/webclient/actions/scrolling.js
deleted file mode 100644
index 9a8ca4c5116..00000000000
--- a/addons/web/static/src/webclient/actions/scrolling.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/** @odoo-module **/
-
-/*
- * Returns the main scrollable element relevant in a context of an action.
- * In desktop, the relevant element is the .o_content of the action.
- * In mobile, it is the html node itself, provided no other children is scrollable
- *   Most of the times in mobile, we don't want to scroll individual elements, so every bit
- *   of code should enforce that html is the scrollable element.
- *
- * @param {OdooEnv} env
- * @return {Element}
- */
-function getScrollableElement(env) {
-    if (env.isSmall) {
-        return document.firstElementChild; // aka html node;
-    } else {
-        return document.querySelector(".o_web_client > .o_action_manager > .o_action > .o_content");
-    }
-}
-
-/**
- * Retrieves the current top and left scroll position. By default, the scrolling
- * area is the '.o_content' main div. In mobile, it is the body.
- *
- * @param {OdooEnv} env
- */
-export function getScrollPosition(env) {
-    const scrollingEl = getScrollableElement(env);
-    return {
-        left: scrollingEl ? scrollingEl.scrollLeft : 0,
-        top: scrollingEl ? scrollingEl.scrollTop : 0,
-    };
-}
-
-/**
- * Sets top and left scroll positions to the given values. By default, the
- * scrolling area is the '.o_content' main div. In mobile, it is the body.
- *
- * @param {OdooEnv} env
- * @param {Object} offset
- * @param {number} [offset.left=0]
- * @param {number} [offset.top=0]
- */
-export function setScrollPosition(env, offset) {
-    const scrollingEl = getScrollableElement(env);
-    if (scrollingEl) {
-        scrollingEl.scrollLeft = offset.left || 0;
-        scrollingEl.scrollTop = offset.top || 0;
-    }
-}

From 3c782440ab6bbe6a36e46fbf6b2b7f9645b65584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Thu, 23 Jun 2022 06:23:31 +0000
Subject: [PATCH 28/50] [REF] board: rewrite board action in owl

This commit rewrites the board action in owl. Legacy actions are
still supported inside this new board thanks to a compatibility
layer.

Part-of: odoo/odoo#92475
---
 .../{src/legacy => }/img/layout_1-1-1.png     |  Bin
 .../{src/legacy => }/img/layout_1-1.png       |  Bin
 .../{src/legacy => }/img/layout_1-2.png       |  Bin
 .../static/{src/legacy => }/img/layout_1.png  |  Bin
 .../{src/legacy => }/img/layout_2-1.png       |  Bin
 .../{src/legacy => }/img/view_todo_arrow.png  |  Bin
 .../legacy_add_to_board.js}                   |   50 +-
 addons/board/static/src/board_action.js       |   68 +
 addons/board/static/src/board_action.xml      |   12 +
 addons/board/static/src/board_controller.js   |  118 ++
 addons/board/static/src/board_controller.scss |   46 +
 addons/board/static/src/board_controller.xml  |   88 +
 addons/board/static/src/board_view.js         |   77 +
 .../board/static/src/legacy/js/board_view.js  |  482 ------
 .../static/src/legacy/scss/dashboard.scss     |  183 ---
 addons/board/static/src/legacy/xml/board.xml  |   92 --
 .../static/tests/add_to_dashboard_tests.js    |  432 +++++
 addons/board/static/tests/board_test.js       |  723 +++++++++
 addons/board/static/tests/dashboard_tests.js  | 1424 -----------------
 addons/web/tooling/_eslintignore              |    4 +-
 addons/web/tooling/_prettierignore            |    4 +-
 21 files changed, 1600 insertions(+), 2203 deletions(-)
 rename addons/board/static/{src/legacy => }/img/layout_1-1-1.png (100%)
 rename addons/board/static/{src/legacy => }/img/layout_1-1.png (100%)
 rename addons/board/static/{src/legacy => }/img/layout_1-2.png (100%)
 rename addons/board/static/{src/legacy => }/img/layout_1.png (100%)
 rename addons/board/static/{src/legacy => }/img/layout_2-1.png (100%)
 rename addons/board/static/{src/legacy => }/img/view_todo_arrow.png (100%)
 rename addons/board/static/src/{legacy/js/add_to_board_menu.js => add_to_board/legacy_add_to_board.js} (75%)
 create mode 100644 addons/board/static/src/board_action.js
 create mode 100644 addons/board/static/src/board_action.xml
 create mode 100644 addons/board/static/src/board_controller.js
 create mode 100644 addons/board/static/src/board_controller.scss
 create mode 100644 addons/board/static/src/board_controller.xml
 create mode 100644 addons/board/static/src/board_view.js
 delete mode 100644 addons/board/static/src/legacy/js/board_view.js
 delete mode 100644 addons/board/static/src/legacy/scss/dashboard.scss
 delete mode 100644 addons/board/static/src/legacy/xml/board.xml
 create mode 100644 addons/board/static/tests/add_to_dashboard_tests.js
 create mode 100644 addons/board/static/tests/board_test.js
 delete mode 100644 addons/board/static/tests/dashboard_tests.js

diff --git a/addons/board/static/src/legacy/img/layout_1-1-1.png b/addons/board/static/img/layout_1-1-1.png
similarity index 100%
rename from addons/board/static/src/legacy/img/layout_1-1-1.png
rename to addons/board/static/img/layout_1-1-1.png
diff --git a/addons/board/static/src/legacy/img/layout_1-1.png b/addons/board/static/img/layout_1-1.png
similarity index 100%
rename from addons/board/static/src/legacy/img/layout_1-1.png
rename to addons/board/static/img/layout_1-1.png
diff --git a/addons/board/static/src/legacy/img/layout_1-2.png b/addons/board/static/img/layout_1-2.png
similarity index 100%
rename from addons/board/static/src/legacy/img/layout_1-2.png
rename to addons/board/static/img/layout_1-2.png
diff --git a/addons/board/static/src/legacy/img/layout_1.png b/addons/board/static/img/layout_1.png
similarity index 100%
rename from addons/board/static/src/legacy/img/layout_1.png
rename to addons/board/static/img/layout_1.png
diff --git a/addons/board/static/src/legacy/img/layout_2-1.png b/addons/board/static/img/layout_2-1.png
similarity index 100%
rename from addons/board/static/src/legacy/img/layout_2-1.png
rename to addons/board/static/img/layout_2-1.png
diff --git a/addons/board/static/src/legacy/img/view_todo_arrow.png b/addons/board/static/img/view_todo_arrow.png
similarity index 100%
rename from addons/board/static/src/legacy/img/view_todo_arrow.png
rename to addons/board/static/img/view_todo_arrow.png
diff --git a/addons/board/static/src/legacy/js/add_to_board_menu.js b/addons/board/static/src/add_to_board/legacy_add_to_board.js
similarity index 75%
rename from addons/board/static/src/legacy/js/add_to_board_menu.js
rename to addons/board/static/src/add_to_board/legacy_add_to_board.js
index 507a2df8f37..01f4dee4abd 100644
--- a/addons/board/static/src/legacy/js/add_to_board_menu.js
+++ b/addons/board/static/src/add_to_board/legacy_add_to_board.js
@@ -1,11 +1,11 @@
-odoo.define('board.AddToBoardMenu', function (require) {
+odoo.define("board.AddToBoardMenu", function (require) {
     "use strict";
 
-    const Context = require('web.Context');
-    const Domain = require('web.Domain');
-    const { Dropdown } = require('@web/core/dropdown/dropdown');
-    const FavoriteMenu = require('web.FavoriteMenu');
-    const { sprintf } = require('web.utils');
+    const Context = require("web.Context");
+    const Domain = require("web.Domain");
+    const { Dropdown } = require("@web/core/dropdown/dropdown");
+    const FavoriteMenu = require("web.FavoriteMenu");
+    const { sprintf } = require("web.utils");
     const { useAutofocus } = require("@web/core/utils/hooks");
 
     const { Component, useState } = owl;
@@ -44,20 +44,23 @@ odoo.define('board.AddToBoardMenu', function (require) {
          * @private
          */
         async addToBoard() {
-            const searchQuery = this.env.searchModel.get('query');
+            const searchQuery = this.env.searchModel.get("query");
             const context = new Context(this.env.action.context);
             context.add(searchQuery.context);
             context.add({
                 group_by: searchQuery.groupBy,
                 orderedBy: searchQuery.orderedBy,
             });
-            if (searchQuery.timeRanges && searchQuery.timeRanges.hasOwnProperty('fieldName')) {
+            if (
+                searchQuery.timeRanges &&
+                Object.prototype.hasOwnProperty.call(searchQuery.timeRanges, "fieldName")
+            ) {
                 context.add({
                     comparison: searchQuery.timeRanges,
                 });
             }
             let controllerQueryParams;
-            this.env.searchModel.trigger('get-controller-query-params', params => {
+            this.env.searchModel.trigger("get-controller-query-params", (params) => {
                 controllerQueryParams = params || {};
             });
             controllerQueryParams.context = controllerQueryParams.context || {};
@@ -66,11 +69,16 @@ odoo.define('board.AddToBoardMenu', function (require) {
             context.add(Object.assign(controllerQueryParams, queryContext));
 
             const domainArray = new Domain(this.env.action.domain || []);
-            const domain = Domain.prototype.normalizeArray(domainArray.toArray().concat(searchQuery.domain));
+            const domain = Domain.prototype.normalizeArray(
+                domainArray.toArray().concat(searchQuery.domain)
+            );
 
             const evalutatedContext = context.eval();
             for (const key in evalutatedContext) {
-                if (evalutatedContext.hasOwnProperty(key) && /^search_default_/.test(key)) {
+                if (
+                    Object.prototype.hasOwnProperty.call(evalutatedContext, key) &&
+                    /^search_default_/.test(key)
+                ) {
                     delete evalutatedContext[key];
                 }
             }
@@ -82,7 +90,7 @@ odoo.define('board.AddToBoardMenu', function (require) {
             });
 
             const result = await this.env.services.rpc({
-                route: '/board/add_to_dashboard',
+                route: "/board/add_to_dashboard",
                 params: {
                     action_id: this.env.action.id || false,
                     context_to_save: evalutatedContext,
@@ -94,13 +102,15 @@ odoo.define('board.AddToBoardMenu', function (require) {
             if (result) {
                 this.env.services.notification.notify({
                     title: sprintf(this.env._t("'%s' added to dashboard"), this.state.name),
-                    message: this.env._t("Please refresh your browser for the changes to take effect."),
-                    type: 'warning',
+                    message: this.env._t(
+                        "Please refresh your browser for the changes to take effect."
+                    ),
+                    type: "warning",
                 });
             } else {
                 this.env.services.notification.notify({
                     message: this.env._t("Could not add filter to dashboard"),
-                    type: 'danger',
+                    type: "danger",
                 });
             }
         }
@@ -115,11 +125,11 @@ odoo.define('board.AddToBoardMenu', function (require) {
          */
         onInputKeydown(ev) {
             switch (ev.key) {
-                case 'Enter':
+                case "Enter":
                     ev.preventDefault();
                     this.addToBoard();
                     break;
-                case 'Escape':
+                case "Escape":
                     // Gives the focus back to the component.
                     ev.preventDefault();
                     ev.target.blur();
@@ -136,15 +146,15 @@ odoo.define('board.AddToBoardMenu', function (require) {
          * @returns {boolean}
          */
         static shouldBeDisplayed(env) {
-            return env.action.type === 'ir.actions.act_window';
+            return env.action.type === "ir.actions.act_window";
         }
     }
 
     AddToBoardMenu.props = {};
-    AddToBoardMenu.template = 'board.AddToBoard';
+    AddToBoardMenu.template = "board.AddToBoard";
     AddToBoardMenu.components = { Dropdown };
 
-    FavoriteMenu.registry.add('add-to-board-menu', AddToBoardMenu, 10);
+    FavoriteMenu.registry.add("add-to-board-menu", AddToBoardMenu, 10);
 
     return AddToBoardMenu;
 });
diff --git a/addons/board/static/src/board_action.js b/addons/board/static/src/board_action.js
new file mode 100644
index 00000000000..edf4663d14b
--- /dev/null
+++ b/addons/board/static/src/board_action.js
@@ -0,0 +1,68 @@
+/** @odoo-module **/
+
+import { useService } from "@web/core/utils/hooks";
+import { View } from "@web/views/view";
+import { makeContext } from "@web/core/context";
+
+const { Component, onWillStart } = owl;
+
+export class BoardAction extends Component {
+    setup() {
+        const rpc = useService("rpc");
+        const userService = useService("user");
+        this.actionService = useService("action");
+        const action = this.props.action;
+        this.formViewId = false;
+        this.isValid = true;
+        onWillStart(async () => {
+            let result = BoardAction.cache[action.actionId];
+            if (!result) {
+                result = await rpc("/web/action/load", { action_id: action.actionId });
+                BoardAction.cache[action.actionId] = result;
+            }
+            if (!result) {
+                // action does not exist
+                this.isValid = false;
+                return;
+            }
+            const viewMode = action.viewMode || result.views[0][1];
+            const formView = result.views.find((v) => v[1] === "form");
+            if (formView) {
+                this.formViewId = formView[0];
+            }
+            this.viewProps = {
+                resModel: result.res_model,
+                type: viewMode,
+                display: { controlPanel: false },
+                selectRecord: (resId) => this.selectRecord(result.res_model, resId),
+            };
+            if (action.context) {
+                this.viewProps.context = makeContext([
+                    action.context,
+                    { lang: userService.context.lang },
+                ]);
+                if ("group_by" in this.viewProps.context) {
+                    const groupBy = this.viewProps.context.group_by;
+                    this.viewProps.groupBy = typeof groupBy === "string" ? [groupBy] : groupBy;
+                }
+            }
+            if (action.domain) {
+                this.viewProps.domain = action.domain;
+            }
+            if (viewMode === "list") {
+                this.viewProps.hasSelectors = false;
+            }
+        });
+    }
+    selectRecord(resModel, resId) {
+        this.actionService.doAction({
+            type: "ir.actions.act_window",
+            res_model: resModel,
+            views: [[this.formViewId, "form"]],
+            res_id: resId,
+        });
+    }
+}
+BoardAction.template = "board.BoardAction";
+BoardAction.components = { View };
+BoardAction.cache = {};
diff --git a/addons/board/static/src/board_action.xml b/addons/board/static/src/board_action.xml
new file mode 100644
index 00000000000..9f6ba28378c
--- /dev/null
+++ b/addons/board/static/src/board_action.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="board.BoardAction" owl="1">
+        <t t-if="isValid">
+            <View t-props="viewProps"/>
+        </t>
+        <t t-else="">
+            <div class="text-center text-warning m-1">Invalid action</div>
+        </t>
+    </t>
+</templates>
diff --git a/addons/board/static/src/board_controller.js b/addons/board/static/src/board_controller.js
new file mode 100644
index 00000000000..367038267e1
--- /dev/null
+++ b/addons/board/static/src/board_controller.js
@@ -0,0 +1,118 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+import { useService } from "@web/core/utils/hooks";
+import { renderToString } from "@web/core/utils/render";
+import { useSortable } from "@web/core/utils/sortable";
+import { standardViewProps } from "@web/views/standard_view_props";
+import { BoardAction } from "./board_action";
+
+const { Component, useState, useRef } = owl;
+
+export class BoardController extends Component {
+    setup() {
+        this.board = useState(this.props.board);
+        this.rpc = useService("rpc");
+        this.dialogService = useService("dialog");
+        const mainRef = useRef("main");
+        useSortable({
+            ref: mainRef,
+            elements: ".o-dashboard-action",
+            handle: ".o-dashboard-action-header",
+            cursor: "move",
+            groups: ".o-dashboard-column",
+            connectGroups: true,
+            onDrop: ({ element, previous, parent }) => {
+                const fromColIdx = parseInt(element.parentElement.dataset.idx, 10);
+                const fromActionIdx = parseInt(element.dataset.idx, 10);
+                const toColIdx = parseInt(parent.dataset.idx, 10);
+                const toActionIdx = previous ? parseInt(previous.dataset.idx, 10) + 1 : 0;
+                if (fromColIdx !== toColIdx) {
+                    // to reduce visual flickering
+                    element.classList.add("d-none");
+                }
+                this.moveAction(fromColIdx, fromActionIdx, toColIdx, toActionIdx);
+            },
+        });
+    }
+
+    moveAction(fromColIdx, fromActionIdx, toColIdx, toActionIdx) {
+        const action = this.board.columns[fromColIdx].actions[fromActionIdx];
+        if (fromColIdx !== toColIdx) {
+            // action moving from a column to another
+            this.board.columns[fromColIdx].actions.splice(fromActionIdx, 1);
+            this.board.columns[toColIdx].actions.splice(toActionIdx, 0, action);
+        } else {
+            // move inside a column
+            if (fromActionIdx === toActionIdx) {
+                return;
+            }
+            const actions = this.board.columns[fromColIdx].actions;
+            if (fromActionIdx < toActionIdx) {
+                actions.splice(toActionIdx + 1, 0, action);
+                actions.splice(fromActionIdx, 1);
+            } else {
+                actions.splice(fromActionIdx, 1);
+                actions.splice(toActionIdx, 0, action);
+            }
+        }
+        this.saveBoard();
+    }
+
+    selectLayout(layout) {
+        const currentColNbr = this.board.colNumber;
+        const nextColNbr = layout.split("-").length;
+        if (nextColNbr < currentColNbr) {
+            // need to move all actions in last cols in the last visible col
+            const cols = this.board.columns;
+            const lastVisibleCol = cols[nextColNbr - 1];
+            for (let i = nextColNbr; i < currentColNbr; i++) {
+                lastVisibleCol.actions.push(...cols[i].actions);
+                cols[i].actions = [];
+            }
+        }
+        this.board.layout = layout;
+        this.board.colNumber = nextColNbr;
+        this.saveBoard();
+        if (document.querySelector("canvas")) {
+            // horrible hack to force charts to be recreated so they pick up the
+            // proper size. also, no idea why raf is needed :(
+            browser.requestAnimationFrame(() => this.render(true));
+        }
+    }
+
+    closeAction(column, action) {
+        this.dialogService.add(ConfirmationDialog, {
+            body: this.env._t("Are you sure that you want to remove this item?"),
+            confirm: () => {
+                const index = column.actions.indexOf(action);
+                column.actions.splice(index, 1);
+                this.saveBoard();
+            },
+            cancel: () => {},
+        });
+    }
+
+    toggleAction(action) {
+        action.isFolded = !action.isFolded;
+        this.saveBoard();
+    }
+
+    saveBoard() {
+        this.rpc("/web/view/edit_custom", {
+            custom_id: this.board.customViewId,
+            arch: renderToString("board.arch", this.board),
+        });
+        this.env.bus.trigger("CLEAR-CACHES");
+    }
+}
+
+BoardController.template = "board.BoardView";
+BoardController.components = { BoardAction, Dropdown, DropdownItem };
+BoardController.props = {
+    ...standardViewProps,
+    board: Object,
+};
diff --git a/addons/board/static/src/board_controller.scss b/addons/board/static/src/board_controller.scss
new file mode 100644
index 00000000000..705821800e2
--- /dev/null
+++ b/addons/board/static/src/board_controller.scss
@@ -0,0 +1,46 @@
+.o_dashboard {
+    height: 100%;
+    overflow: auto;
+}
+
+.o-dashboard-layout {
+    display: grid;
+}
+.o-dashboard-layout-1 {
+    grid-template-columns: 1fr;
+}
+.o-dashboard-layout-1-1 {
+    grid-template-columns: 1fr 1fr;
+}
+.o-dashboard-layout-1-1-1 {
+    grid-template-columns: 1fr 1fr 1fr;
+}
+.o-dashboard-layout-2-1 {
+    grid-template-columns: 2fr 1fr;
+}
+.o-dashboard-layout-1-2 {
+    grid-template-columns: 1fr 2fr;
+}
+
+.o-dashboard-column {
+    overflow-x: scroll;
+}
+
+.o-dashboard-action {
+    background-color: white;
+    align-self: start;
+    border: 1px solid;
+    border-color: #e5e5e5 #dbdbdb #d2d2d2;
+
+    > .o_view_controller {
+        padding: 0 12px 12px 12px;
+    }
+
+    .o_column_quick_create {
+        display: none;
+    }
+}
+
+.o-dashboard-action > h3 > span > i {
+    font-size: 12px;
+}
diff --git a/addons/board/static/src/board_controller.xml b/addons/board/static/src/board_controller.xml
new file mode 100644
index 00000000000..6bcedfd3f85
--- /dev/null
+++ b/addons/board/static/src/board_controller.xml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="board.BoardView" owl="1">
+        <div class="o_dashboard d-flex flex-column">
+            <t t-if="board.isEmpty">
+                <t t-call="board.NoContent"/>
+            </t>
+            <t t-else="">
+                <t t-call="board.Content"/>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="board.Content" owl="1">
+        <!-- Note: need to add mobile support that i just removed for now -->
+        <div class="o-dashboard-header d-flex justify-content-end">
+            <Dropdown togglerClass="'btn btn-secondary m-2 p-2'">
+                <t t-set-slot="toggler">
+                    <img t-attf-src="/board/static/img/layout_{{board.layout}}.png" width="16" height="16" alt=""/>
+                    Change Layout
+                </t>
+                <t t-foreach="'1 1-1 1-1-1 1-2 2-1'.split(' ')" t-as="layout" t-key="layout">
+                    <DropdownItem onSelected="() => this.selectLayout(layout)">
+                        <img t-attf-src="/board/static/img/layout_{{layout}}.png" alt=""/>
+                        <i t-if="layout == board.layout" class="fa fa-check fa-lg text-success" aria-label='Layout' role="img" title="Layout"/>
+                    </DropdownItem>
+                </t>
+            </Dropdown>
+        </div>
+        <div class="o-dashboard-layout flex-grow-1" t-attf-class="o-dashboard-layout-{{board.layout}}" t-ref="main">
+            <t t-foreach="board.columns" t-as="column" t-key="column_index">
+                <div t-if="column_index lt board.colNumber" class="o-dashboard-column h-100" t-att-data-idx="column_index">
+                    <t t-foreach="column.actions" t-as="action" t-key="action.id">
+                        <div class="o-dashboard-action mx-3 my-1" t-att-data-idx="action_index">
+                            <h3 t-attf-class="o-dashboard-action-header {{action.title ? '' : 'oe_header_empty'}} p-2 m-2">
+                                <span> <t t-esc="action.title"/> </span>
+                                <span class="btn float-right p-1 text-muted" t-on-click="() => this.closeAction(column, action)"><i class="fa fa-close"/></span>
+                                <span class="btn float-right p-1 text-muted" t-if="!action.isFolded" t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-minimize"/></span>
+                                <span class="btn float-right p-1 text-muted" t-if="action.isFolded"  t-on-click="() => this.toggleAction(action)"><i class="fa fa-window-maximize"/></span>
+                            </h3>
+                            <BoardAction t-if="!action.isFolded" action="action" />
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="board.NoContent" owl="1">
+        <div class="o_view_nocontent">
+            <div class="o_nocontent_help">
+                <p class="o_view_nocontent_neutral_face">
+                  Your personal dashboard is empty
+                </p>
+                <p>
+                  To add your first report into this dashboard, go to any
+                  menu, switch to list or graph view, and click <i>"Add to
+                  Dashboard"</i> in the extended search options.
+                </p>
+                <p>
+                  You can filter and group data before inserting into the
+                  dashboard using the search options.
+                </p>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="board.arch" owl="1">
+        <form t-att-string="title">
+            <board t-att-style="layout">
+                <column t-foreach="columns" t-as="column" t-key="column_index">
+                    <t t-foreach="column.actions" t-as="action" t-key="action_index">
+                        <action
+                            t-att-name="action.actionId"
+                            t-att-string="action.title"
+                            t-att-view_mode="action.viewMode"
+                            t-att-context="action.context"
+                            t-att-domain="action.domain"
+                            t-att-fold="action.isFolded ? 1 : 0"/>
+                    </t>
+                </column>
+            </board>
+        </form>
+    </t>
+
+
+</templates>
diff --git a/addons/board/static/src/board_view.js b/addons/board/static/src/board_view.js
new file mode 100644
index 00000000000..8cddfc62631
--- /dev/null
+++ b/addons/board/static/src/board_view.js
@@ -0,0 +1,77 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { BoardController } from "./board_controller";
+import { XMLParser } from "@web/core/utils/xml";
+import { Domain } from "@web/core/domain";
+
+export class BoardArchParser extends XMLParser {
+    parse(arch, customViewId) {
+        let nextId = 1;
+        const archInfo = {
+            title: null,
+            layout: null,
+            colNumber: 0,
+            isEmpty: true,
+            columns: [{ actions: [] }, { actions: [] }, { actions: [] }],
+            customViewId,
+        };
+        let currentIndex = -1;
+
+        this.visitXML(arch, (node) => {
+            switch (node.tagName) {
+                case "form":
+                    archInfo.title = node.getAttribute("string");
+                    break;
+                case "board":
+                    archInfo.layout = node.getAttribute("style");
+                    archInfo.colNumber = archInfo.layout.split("-").length;
+                    break;
+                case "column":
+                    currentIndex++;
+                    break;
+                case "action": {
+                    archInfo.isEmpty = false;
+                    const isFolded = Boolean(
+                        node.hasAttribute("fold") ? parseInt(node.getAttribute("fold"), 10) : 0
+                    );
+                    let action = {
+                        id: nextId++,
+                        title: node.getAttribute("string"),
+                        actionId: parseInt(node.getAttribute("name"), 10),
+                        viewMode: node.getAttribute("view_mode"),
+                        context: node.getAttribute("context"),
+                        isFolded,
+                    };
+                    if (node.hasAttribute("domain")) {
+                        action.domain = new Domain(node.getAttribute("domain")).toList();
+                        // so it can be serialized when reexporting board xml
+                        action.domain.toString = () => node.getAttribute("domain");
+                    }
+                    archInfo.columns[currentIndex].actions.push(action);
+                    break;
+                }
+            }
+        });
+        return archInfo;
+    }
+}
+
+export const boardView = {
+    type: "form",
+    display_name: _lt("Board"),
+    Controller: BoardController,
+
+    props: (genericProps, view) => {
+        const { arch, info } = genericProps;
+        const board = new BoardArchParser().parse(arch, info.customViewId);
+        return {
+            ...genericProps,
+            className: "o_dashboard",
+            board,
+        };
+    },
+};
+
+registry.category("views").add("board", boardView);
diff --git a/addons/board/static/src/legacy/js/board_view.js b/addons/board/static/src/legacy/js/board_view.js
deleted file mode 100644
index f414fc03ad2..00000000000
--- a/addons/board/static/src/legacy/js/board_view.js
+++ /dev/null
@@ -1,482 +0,0 @@
-odoo.define('board.BoardView', function (require) {
-"use strict";
-
-var Context = require('web.Context');
-var config = require('web.config');
-var core = require('web.core');
-var dataManager = require('web.data_manager');
-var Dialog = require('web.Dialog');
-var Domain = require('web.Domain');
-var FormController = require('web.FormController');
-var FormRenderer = require('web.FormRenderer');
-var FormView = require('web.FormView');
-var pyUtils = require('web.py_utils');
-var session  = require('web.session');
-var viewRegistry = require('web.view_registry');
-const { loadLegacyViews } = require("@web/legacy/legacy_views");
-
-var _t = core._t;
-var _lt = core._lt;
-var QWeb = core.qweb;
-
-var BoardController = FormController.extend({
-    custom_events: _.extend({}, FormController.prototype.custom_events, {
-        change_layout: '_onChangeLayout',
-        enable_dashboard: '_onEnableDashboard',
-        save_dashboard: '_saveDashboard',
-        switch_view: '_onSwitchView',
-    }),
-
-    /**
-     * @override
-     */
-    init: function (parent, model, renderer, params) {
-        this._super.apply(this, arguments);
-        this.customViewID = params.customViewID;
-    },
-
-    async willStart() {
-        const _super = this._super.bind(this, ...arguments);
-        await loadLegacyViews({ rpc: this._rpc.bind(this) });
-        return _super();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getTitle: function () {
-        return _t("My Dashboard");
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Actually save a dashboard
-     *
-     * @returns {Promise}
-     */
-    _saveDashboard: function () {
-        var board = this.renderer.getBoard();
-        var arch = QWeb.render('DashBoard.xml', _.extend({}, board));
-        return this._rpc({
-                route: '/web/view/edit_custom',
-                params: {
-                    custom_id: this.customViewID,
-                    arch: arch,
-                }
-            }).then(dataManager.invalidate.bind(dataManager));
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {OdooEvent} event
-     */
-    _onChangeLayout: function (event) {
-        var self = this;
-        var dialog = new Dialog(this, {
-            title: _t("Edit Layout"),
-            $content: QWeb.render('DashBoard.layouts', _.clone(event.data))
-        });
-        dialog.opened().then(function () {
-            dialog.$('li').click(function () {
-                var layout = $(this).attr('data-layout');
-                self.renderer.changeLayout(layout);
-                self._saveDashboard();
-                dialog.close();
-            });
-        });
-        dialog.open();
-    },
-    /**
-     * We need to intercept switch_view event coming from sub views, because we
-     * don't actually want to switch view in dashboard, we want to do a
-     * do_action (which will open the record in a different breadcrumb).
-     *
-     * @private
-     * @param {OdooEvent} event
-     */
-    _onSwitchView: function (event) {
-        event.stopPropagation();
-        this.do_action({
-            type: 'ir.actions.act_window',
-            res_model: event.data.model,
-            views: [[event.data.formViewID || false, 'form']],
-            res_id: event.data.res_id,
-        });
-    },
-});
-
-var BoardRenderer = FormRenderer.extend({
-    custom_events: _.extend({}, FormRenderer.prototype.custom_events, {
-        update_filters: '_onUpdateFilters',
-        switch_view: '_onSwitchView',
-    }),
-    events: _.extend({}, FormRenderer.prototype.events, {
-        'click .oe_dashboard_column .oe_fold': '_onFoldClick',
-        'click .oe_dashboard_link_change_layout': '_onChangeLayout',
-        'click .oe_dashboard_column .oe_close': '_onCloseAction',
-    }),
-
-    /**
-     * @override
-     */
-    init: function (parent, state, params) {
-        this._super.apply(this, arguments);
-        this.noContentHelp = params.noContentHelp;
-        this.actionsDescr = {};
-        this._boardSubcontrollers = []; // for board: controllers of subviews
-        this._boardFormViewIDs = {}; // for board: mapping subview controller to form view id
-    },
-    /**
-     * Call `on_attach_callback` for each subview
-     *
-     * @override
-     */
-    on_attach_callback: function () {
-        _.each(this._boardSubcontrollers, function (controller) {
-            if ('on_attach_callback' in controller) {
-                controller.on_attach_callback();
-            }
-        });
-    },
-    /**
-     * Call `on_detach_callback` for each subview
-     *
-     * @override
-     */
-    on_detach_callback: function () {
-        _.each(this._boardSubcontrollers, function (controller) {
-            if ('on_detach_callback' in controller) {
-                controller.on_detach_callback();
-            }
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {string} layout
-     */
-    changeLayout: function (layout) {
-        var $dashboard = this.$('.oe_dashboard');
-        var current_layout = $dashboard.attr('data-layout');
-        if (current_layout !== layout) {
-            var clayout = current_layout.split('-').length,
-                nlayout = layout.split('-').length,
-                column_diff = clayout - nlayout;
-            if (column_diff > 0) {
-                var $last_column = $();
-                $dashboard.find('.oe_dashboard_column').each(function (k, v) {
-                    if (k >= nlayout) {
-                        $(v).find('.oe_action').appendTo($last_column);
-                    } else {
-                        $last_column = $(v);
-                    }
-                });
-            }
-            $dashboard.toggleClass('oe_dashboard_layout_' + current_layout + ' oe_dashboard_layout_' + layout);
-            $dashboard.attr('data-layout', layout);
-        }
-    },
-    /**
-     * Returns a representation of the current dashboard
-     *
-     * @returns {Object}
-     */
-    getBoard: function () {
-        var self = this;
-        var board = {
-            form_title : this.arch.attrs.string,
-            style : this.$('.oe_dashboard').attr('data-layout'),
-            columns : [],
-        };
-        this.$('.oe_dashboard_column').each(function () {
-            var actions = [];
-            $(this).find('.oe_action').each(function () {
-                var actionID = $(this).attr('data-id');
-                var newAttrs = _.clone(self.actionsDescr[actionID]);
-
-                /* prepare attributes as they should be saved */
-                if (newAttrs.modifiers) {
-                    newAttrs.modifiers = JSON.stringify(newAttrs.modifiers);
-                }
-                actions.push(newAttrs);
-            });
-            board.columns.push(actions);
-        });
-        return board;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Object} params
-     * @param {jQueryElement} params.$node
-     * @param {integer} params.actionID
-     * @param {Object} params.context
-     * @param {any[]} params.domain
-     * @param {string} params.viewType
-     * @returns {Promise}
-     */
-    _createController: function (params) {
-        var self = this;
-        return this._rpc({
-                route: '/web/action/load',
-                params: {action_id: params.actionID}
-            })
-            .then(function (action) {
-                if (!action) {
-                    // the action does not exist anymore
-                    return Promise.resolve();
-                }
-                var evalContext = new Context(params.context).eval();
-                if (evalContext.group_by && evalContext.group_by.length === 0) {
-                    delete evalContext.group_by;
-                }
-                // tz and lang are saved in the custom view
-                // override the language to take the current one
-                var rawContext = new Context(action.context, evalContext, {lang: session.user_context.lang});
-                var context = pyUtils.eval('context', rawContext, evalContext);
-                var domain = params.domain || pyUtils.eval('domain', action.domain || '[]', action.context);
-
-                action.context = context;
-                action.domain = domain;
-
-                // When creating a view, `action.views` is expected to be an array of dicts, while
-                // '/web/action/load' returns an array of arrays.
-                action._views = action.views;
-                action.views = $.map(action.views, function (view) { return {viewID: view[0], type: view[1]}});
-
-                var viewType = params.viewType || action._views[0][1];
-                var view = _.find(action._views, function (descr) {
-                    return descr[1] === viewType;
-                }) || [false, viewType];
-                return self.loadViews(action.res_model, context, [view])
-                           .then(function (viewsInfo) {
-                    var viewInfo = viewsInfo[viewType];
-                    var xml = new DOMParser().parseFromString(viewInfo.arch, "text/xml")
-                    var key = xml.documentElement.getAttribute("js_class");
-                    var View = viewRegistry.get(key || viewType);
-
-                    const searchQuery = {
-                        context: context,
-                        domain: domain,
-                        groupBy: typeof context.group_by === 'string' && context.group_by ?
-                                    [context.group_by] :
-                                    context.group_by || [],
-                        orderedBy: context.orderedBy || [],
-                    };
-
-                    if (View.prototype.searchMenuTypes.includes('comparison')) {
-                        searchQuery.timeRanges = context.comparison || {};
-                    }
-
-                    var view = new View(viewInfo, {
-                        action: action,
-                        hasSelectors: false,
-                        modelName: action.res_model,
-                        searchQuery,
-                        withControlPanel: false,
-                        withSearchPanel: false,
-                    });
-                    return view.getController(self).then(function (controller) {
-                        self._boardFormViewIDs[controller.handle] = _.first(
-                            _.find(action._views, function (descr) {
-                                return descr[1] === 'form';
-                            })
-                        );
-                        self._boardSubcontrollers.push(controller);
-                        return controller.appendTo(params.$node);
-                    });
-                });
-            });
-    },
-    /**
-     * @private
-     * @param {Object} node
-     * @returns {jQueryElement}
-     */
-    _renderTagBoard: function (node) {
-        var self = this;
-        // we add the o_dashboard class to the renderer's $el. This means that
-        // this function has a side effect.  This is ok because we assume that
-        // once we have a '<board>' tag, we are in a special dashboard mode.
-        this.$el.addClass('o_dashboard');
-
-        var hasAction = _.detect(node.children, function (column) {
-            return _.detect(column.children,function (element){
-                return element.tag === "action"? element: false;
-            });
-        });
-        if (!hasAction) {
-            return $(QWeb.render('DashBoard.NoContent'));
-        }
-
-        // We should start with three columns available
-        node = $.extend(true, {}, node);
-
-        // no idea why master works without this, but whatever
-        if (!('layout' in node.attrs)) {
-            node.attrs.layout = node.attrs.style;
-        }
-        for (var i = node.children.length; i < 3; i++) {
-            node.children.push({
-                tag: 'column',
-                attrs: {},
-                children: []
-            });
-        }
-
-        // register actions, alongside a generated unique ID
-        _.each(node.children, function (column, column_index) {
-            _.each(column.children, function (action, action_index) {
-                action.attrs.id = 'action_' + column_index + '_' + action_index;
-                self.actionsDescr[action.attrs.id] = action.attrs;
-            });
-        });
-
-        var $html = $('<div>').append($(QWeb.render('DashBoard', {node: node, isMobile: config.device.isMobile})));
-        this._boardSubcontrollers = []; // dashboard controllers are reset on re-render
-
-        // render each view
-        _.each(this.actionsDescr, function (action) {
-            self.defs.push(self._createController({
-                $node: $html.find('.oe_action[data-id=' + action.id + '] .oe_content'),
-                actionID: _.str.toNumber(action.name),
-                context: action.context,
-                domain: Domain.prototype.stringToArray(action.domain, {}),
-                viewType: action.view_mode,
-            }));
-        });
-        $html.find('.oe_dashboard_column').sortable({
-            connectWith: '.oe_dashboard_column',
-            handle: '.oe_header',
-            scroll: false
-        }).bind('sortstop', function () {
-            self.trigger_up('save_dashboard');
-        });
-
-        return $html;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onChangeLayout: function () {
-        var currentLayout = this.$('.oe_dashboard').attr('data-layout');
-        this.trigger_up('change_layout', {currentLayout: currentLayout});
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onCloseAction: function (event) {
-        var self = this;
-        var $container = $(event.currentTarget).parents('.oe_action:first');
-        Dialog.confirm(this, (_t("Are you sure you want to remove this item?")), {
-            confirm_callback: function () {
-                $container.remove();
-                self.trigger_up('save_dashboard');
-            },
-        });
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onFoldClick: function (event) {
-        var $e = $(event.currentTarget);
-        var $action = $e.closest('.oe_action');
-        var id = $action.data('id');
-        var actionAttrs = this.actionsDescr[id];
-
-        if ($e.is('.oe_minimize')) {
-            actionAttrs.fold = '1';
-        } else {
-            delete(actionAttrs.fold);
-        }
-        $e.toggleClass('oe_minimize oe_maximize');
-        $action.find('.oe_content').toggle();
-        this.trigger_up('save_dashboard');
-    },
-    /**
-     * Let FormController know which form view it should display based on the
-     * window action of the sub controller that is switching view
-     *
-     * @private
-     * @param {OdooEvent} event
-     */
-    _onSwitchView: function (event) {
-        event.data.formViewID = this._boardFormViewIDs[event.target.handle];
-    },
-    /**
-     * Stops the propagation of 'update_filters' events triggered by the
-     * controllers instantiated by the dashboard to prevent them from
-     * interfering with the ActionManager.
-     *
-     * @private
-     * @param {OdooEvent} event
-     */
-    _onUpdateFilters: function (event) {
-        event.stopPropagation();
-    },
-});
-
-var BoardView = FormView.extend({
-    config: _.extend({}, FormView.prototype.config, {
-        Controller: BoardController,
-        Renderer: BoardRenderer,
-    }),
-    display_name: _lt('Board'),
-
-    /**
-     * @override
-     */
-    init: function (viewInfo) {
-        this._super.apply(this, arguments);
-        this.controllerParams.customViewID = viewInfo.custom_view_id;
-    },
-    /**
-     * @override
-     */
-    _extractParamsFromAction(action) {
-        action.target = "inline";
-        action.flags = action.flags || {};
-        return this._super.apply(this, arguments);
-    },
-});
-
-return BoardView;
-
-});
-
-
-odoo.define('board.viewRegistry', function (require) {
-"use strict";
-
-var BoardView = require('board.BoardView');
-
-var viewRegistry = require('web.view_registry');
-
-viewRegistry.add('board', BoardView);
-
-});
diff --git a/addons/board/static/src/legacy/scss/dashboard.scss b/addons/board/static/src/legacy/scss/dashboard.scss
deleted file mode 100644
index 56a3dd6d03d..00000000000
--- a/addons/board/static/src/legacy/scss/dashboard.scss
+++ /dev/null
@@ -1,183 +0,0 @@
-.o_dashboard {
-
-    // Dashboard layout
-    .oe_dashboard_layout_1 .oe_dashboard_column {
-        &.index_0 {
-            width: 100%;
-        }
-        &.index_1, &.index_2 {
-            display: none;
-        }
-    }
-    .oe_dashboard_layout_1-1 .oe_dashboard_column {
-        width: 50%;
-        &.index_2 {
-            display: none;
-        }
-    }
-    .oe_dashboard_layout_1-1-1 .oe_dashboard_column {
-        width: 33%;
-    }
-    .oe_dashboard_layout_2-1 .oe_dashboard_column {
-        &.index_0 {
-            width: 70%;
-        }
-        &.index_1 {
-            width: 30%;
-        }
-        &.index_2 {
-            display: none;
-        }
-    }
-    .oe_dashboard_layout_1-2 .oe_dashboard_column {
-        &.index_0 {
-            width: 30%;
-        }
-        &.index_1 {
-            width: 70%;
-        }
-        &.index_2 {
-            display: none;
-        }
-    }
-    .oe_dashboard_column {
-        vertical-align: top;
-    }
-
-    // Layout selector
-    .oe_dashboard_links {
-        text-align: right;
-        margin: 0 4px 6px 0;
-    }
-
-    // Dashboard content
-    .oe_dashboard {
-        width: 100%;
-        .oe_action {
-            margin: 0 8px 8px 0;
-            background-color: white;
-            border: 1px solid;
-            border-color: #e5e5e5 #dbdbdb #d2d2d2;
-            margin: 0 8px 8px 0;
-           .oe_header {
-                font-size: 16px;
-                vertical-align: middle;
-                margin: 0;
-                padding: 12px;
-                &:hover {
-                    cursor: move;
-                }
-                .oe_icon {
-                    float: right;
-                    cursor: pointer;
-                    color: #b3b3b3;
-                    &:hover {
-                        color: #666;
-                        text-decoration: none;
-                    }
-                }
-                .oe_close:after {
-                    content: "×";
-                    margin-left: 4px;
-                }
-                .oe_minimize:after {
-                    content: "-";
-                    margin-left: 4px;
-                }
-                .oe_maximize:after {
-                    content: "+";
-                    margin-left: 4px;
-                }
-                .oe_header_text {
-                    width: auto;
-                    visibility: hidden;
-                    display: inline-block;
-                    cursor: text;
-                }
-                span {
-                    cursor: pointer;
-                }
-            }
-            .oe_header_empty {
-                padding-top: 0;
-                padding-bottom: 2px;
-            }
-            .oe_button_create {
-                margin-left: 4px;
-                padding: 0 4px 0 4px;
-                height: 16px !important;
-            }
-            .oe_content {
-                padding: 0 12px 12px 12px;
-                &.oe_folded {
-                    display: none;
-                }
-                .o_view_nocontent {
-                    display: none; // we don't have a create button on the dashboard, so no need to display that
-                }
-            }
-
-            // Override border of many2manytags defined for form_views
-            .o_kanban_view .o_kanban_record .oe_kanban_list_many2many .o_field_many2manytags {
-                border: none;
-            }
-
-            // Override height of graph. min-height doesn't do the trick
-            .o_legacy_graph_renderer canvas {
-                height: 300px;
-            }
-
-            // Override height for calendar view to be displayed properly
-            .o_calendar_view {
-                height: 100vh;
-            }
-
-            // Override height for map view to be displayed properly
-            .o_map_view {
-                .o_map_container, .o_pin_list_container {
-                    height: calc(100vh - #{$o-navbar-height});
-                }
-            }
-
-            //Add padding to the old dashboard view (To remove when board is converted to OWL)
-            .o_dashboard_view {
-                padding: $o-sheet-vpadding 0;
-            }
-        }
-    }
-}
-
-// Layout selector modal
-.oe_dashboard_layout_selector {
-    ul {
-        white-space: nowrap;
-    }
-    li {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-        float: left;
-    }
-    .oe_dashboard_selected_layout {
-        margin-left: -30px;
-        vertical-align: bottom;
-        margin-bottom: 10px;
-    }
-}
-
-// Favorites menu in control panel
-.o_add_to_dashboard {
-    display: none; // hidden by default
-    max-width: 250px;
-    width: auto;
-}
-
-@include media-breakpoint-down(sm) {
-    .o_dashboard .oe_dashboard {
-        table-layout: fixed;
-
-        .oe_action .oe_header .oe_header_text {
-            display: none;
-        }
-    }
-}
diff --git a/addons/board/static/src/legacy/xml/board.xml b/addons/board/static/src/legacy/xml/board.xml
deleted file mode 100644
index 2a43bf20e12..00000000000
--- a/addons/board/static/src/legacy/xml/board.xml
+++ /dev/null
@@ -1,92 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<template>
-<t t-name="DashBoard">
-    <t t-if="isMobile">
-        <t t-set="node.attrs.layout" t-value="1"/>
-    </t>
-    <t t-if="!isMobile">
-        <div class="oe_dashboard_links">
-            <button type="button" class="button oe_dashboard_link_change_layout btn btn-secondary"
-                title="Change Layout..">
-                <img src="/board/static/src/legacy/img/layout_1-1-1.png" width="16" height="16" alt=""/>
-                <span> Change Layout </span>
-            </button>
-        </div>
-    </t>
-    <table t-att-data-layout="node.attrs.layout" t-attf-class="oe_dashboard oe_dashboard_layout_#{node.attrs.layout}" cellspacing="0" cellpadding="0" border="0">
-    <tr>
-        <td t-foreach="node.children" t-as="column" t-if="column.tag == 'column'"
-             t-att-id="'column_' + column_index" t-attf-class="oe_dashboard_column index_#{column_index}">
-
-            <t t-foreach="column.children" t-as="action" t-if="action.tag == 'action'" t-call="DashBoard.action"/>
-        </td>
-    </tr>
-    </table>
-</t>
-<t t-name="DashBoard.action">
-    <div t-att-data-id="action.attrs.id" class="oe_action">
-        <h2 t-attf-class="oe_header #{action.attrs.string ? '' : 'oe_header_empty'}">
-            <span class="oe_header_txt"> <t t-esc="action.attrs.string"/> </span>
-            <input class = "oe_header_text" type="text"/>
-            <t t-if="!action.attrs.string">&amp;nbsp;</t>
-            <span class='oe_icon oe_close'></span>
-            <span class='oe_icon oe_minimize oe_fold' t-if="!action.attrs.fold"></span>
-            <span class='oe_icon oe_maximize oe_fold' t-if="action.attrs.fold"></span>
-        </h2>
-        <div t-att-class="'oe_content' + (action.attrs.fold ? ' oe_folded' : '')"/>
-    </div>
-</t>
-<t t-name="DashBoard.layouts">
-    <div class="oe_dashboard_layout_selector">
-        <p>
-            <strong>Choose dashboard layout</strong>
-        </p>
-        <ul>
-            <li t-foreach="'1 1-1 1-1-1 1-2 2-1'.split(' ')" t-as="layout" t-att-data-layout="layout">
-                <img t-attf-src="/board/static/src/legacy/img/layout_#{layout}.png" alt=""/>
-                <i t-if="layout == currentLayout" class="oe_dashboard_selected_layout fa fa-check fa-lg text-success" aria-label='Layout' role="img" title="Layout"/>
-            </li>
-        </ul>
-    </div>
-</t>
-<t t-name="DashBoard.NoContent">
-    <div class="o_view_nocontent">
-        <div class="o_nocontent_help">
-            <p class="o_view_nocontent_neutral_face">
-                Your personal dashboard is empty
-            </p><p>
-                To add your first report into this dashboard, go to any
-                menu, switch to list or graph view, and click <i>"Add to
-                Dashboard"</i> in the extended search options.
-            </p><p>
-                You can filter and group data before inserting into the
-                dashboard using the search options.
-            </p>
-        </div>
-    </div>
-</t>
-<t t-name="DashBoard.xml">
-    <form t-att-string="form_title">
-        <board t-att-style="style">
-            <column t-foreach="columns" t-as="column">
-                <action t-foreach="column" t-as="action" t-att="action"/>
-            </column>
-        </board>
-    </form>
-</t>
-<div t-name="HomeWidget" class="oe_dashboard_home_widget"/>
-<t t-name="HomeWidget.content">
-    <h3><t t-esc="widget.title"/></h3>
-    <iframe width="100%" frameborder="0" t-att-src="url"/>
-</t>
-
-<t t-name="SearchView.addtodashboard">
-    <a href="#" class="dropdown-item o_add_to_dashboard_link o_closed_menu">Add to my Dashboard</a>
-    <div class="dropdown-item-text o_add_to_dashboard">
-        <input class="o_input o_add_to_dashboard_input" type="text"/>
-    </div>
-    <div class="dropdown-item-text o_add_to_dashboard">
-        <button type="button" class="btn btn-primary o_add_to_dashboard_button">Add</button>
-    </div>
-</t>
-</template>
diff --git a/addons/board/static/tests/add_to_dashboard_tests.js b/addons/board/static/tests/add_to_dashboard_tests.js
new file mode 100644
index 00000000000..298d93798e5
--- /dev/null
+++ b/addons/board/static/tests/add_to_dashboard_tests.js
@@ -0,0 +1,432 @@
+/** @odoo-module **/
+
+import { AddToBoard } from "@board/add_to_board/add_to_board";
+import {
+    click,
+    getFixture,
+    patchWithCleanup,
+    mouseEnter,
+    triggerEvent,
+} from "@web/../tests/helpers/utils";
+import {
+    applyFilter,
+    applyGroup,
+    editConditionValue,
+    toggleAddCustomFilter,
+    toggleAddCustomGroup,
+    toggleComparisonMenu,
+    toggleFavoriteMenu,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+} from "@web/../tests/search/helpers";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { browser } from "@web/core/browser/browser";
+import { registry } from "@web/core/registry";
+import LegacyAddToBoard from "board.AddToBoardMenu";
+import LegacyFavoriteMenu from "web.FavoriteMenu";
+import testUtils from "web.test_utils";
+import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
+
+const patchDate = testUtils.mock.patchDate;
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+let serverData;
+let target;
+
+QUnit.module("Board", (hooks) => {
+    hooks.beforeEach(() => {
+        const models = {
+            board: {
+                fields: {},
+                records: [],
+            },
+            partner: {
+                fields: {
+                    display_name: { string: "Displayed name", type: "char", searchable: true },
+                    foo: {
+                        string: "Foo",
+                        type: "char",
+                        default: "My little Foo Value",
+                        searchable: true,
+                    },
+                    bar: { string: "Bar", type: "boolean" },
+                    int_field: {
+                        string: "Integer field",
+                        type: "integer",
+                        group_operator: "sum",
+                    },
+                },
+                records: [
+                    {
+                        id: 1,
+                        display_name: "first record",
+                        foo: "yop",
+                        int_field: 3,
+                    },
+                    {
+                        id: 2,
+                        display_name: "second record",
+                        foo: "lalala",
+                        int_field: 5,
+                    },
+                    {
+                        id: 4,
+                        display_name: "aaa",
+                        foo: "abc",
+                        int_field: 2,
+                    },
+                ],
+            },
+        };
+
+        LegacyFavoriteMenu.registry.add("add-to-board-menu", LegacyAddToBoard, 10);
+        favoriteMenuRegistry.add(
+            "add-to-board",
+            {
+                Component: AddToBoard,
+                groupNumber: 4,
+                isDisplayed: ({ config }) => config.actionType === "ir.actions.act_window",
+            },
+            { sequence: 10 }
+        );
+        serverData = { models };
+        target = getFixture();
+    });
+
+    QUnit.module("Add to dashboard");
+
+    QUnit.test("save actions to dashboard", async function (assert) {
+        assert.expect(5);
+
+        serverData.models.partner.fields.foo.sortable = true;
+
+        serverData.views = {
+            "partner,false,list": '<list><field name="foo"/></list>',
+            "partner,false,search": "<search></search>",
+        };
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
+
+        const mockRPC = (route, args) => {
+            if (route === "/board/add_to_dashboard") {
+                assert.deepEqual(
+                    args.context_to_save.group_by,
+                    ["foo"],
+                    "The group_by should have been saved"
+                );
+                // FIXME WOWL
+                // skip this assertion for now, because the list view does not
+                // keep the order after grouping (not yet, this is a bug)
+                // assert.deepEqual(
+                //     args.context_to_save.orderedBy,
+                //     [
+                //         {
+                //             name: "foo",
+                //             asc: true,
+                //         },
+                //     ],
+                //     "The orderedBy should have been saved"
+                // );
+                assert.strictEqual(
+                    args.context_to_save.fire,
+                    "on the bayou",
+                    "The context of a controller should be passed and flattened"
+                );
+                assert.strictEqual(args.action_id, 1, "should save the correct action");
+                assert.strictEqual(args.view_mode, "list", "should save the correct view type");
+                return Promise.resolve(true);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            id: 1,
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            context: { fire: "on the bayou" },
+            views: [[false, "list"]],
+        });
+
+        assert.containsOnce(target, ".o_list_view", "should display the list view");
+
+        // Sort the list
+        await click(document.querySelector(".o_column_sortable"));
+
+        // Group It
+        await toggleGroupByMenu(target);
+        await toggleAddCustomGroup(target);
+        await applyGroup(target);
+
+        // add this action to dashboard
+        await toggleFavoriteMenu(target);
+
+        await testUtils.dom.triggerEvent($(".o_add_to_board button.dropdown-toggle"), "mouseenter");
+        await testUtils.fields.editInput($(".o_add_to_board input"), "a name");
+        await testUtils.dom.click($(".o_add_to_board .dropdown-menu button"));
+    });
+
+    QUnit.test("save two searches to dashboard", async function (assert) {
+        // the second search saved should not be influenced by the first
+        assert.expect(2);
+
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
+        serverData.views = {
+            "partner,false,list": '<list><field name="foo"/></list>',
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (route === "/board/add_to_dashboard") {
+                if (filter_count === 0) {
+                    assert.deepEqual(
+                        args.domain,
+                        [["display_name", "ilike", "a"]],
+                        "the correct domain should be sent"
+                    );
+                }
+                if (filter_count === 1) {
+                    assert.deepEqual(
+                        args.domain,
+                        [["display_name", "ilike", "b"]],
+                        "the correct domain should be sent"
+                    );
+                }
+
+                filter_count += 1;
+                return Promise.resolve(true);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            id: 1,
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "list"]],
+        });
+
+        var filter_count = 0;
+        // Add a first filter
+        await toggleFilterMenu(target);
+        await toggleAddCustomFilter(target);
+        await editConditionValue(target, 0, "a");
+        await applyFilter(target);
+
+        // Add it to dashboard
+        await toggleFavoriteMenu(target);
+        await testUtils.dom.triggerEvent($(".o_add_to_board button.dropdown-toggle"), "mouseenter");
+        await testUtils.dom.click($(".o_add_to_board .dropdown-menu button"));
+
+        // Remove it
+        await testUtils.dom.click(target.querySelector(".o_facet_remove"));
+
+        // Add the second filter
+        await toggleFilterMenu(target);
+        await toggleAddCustomFilter(target);
+        await editConditionValue(target, 0, "b");
+        await applyFilter(target);
+        // Add it to dashboard
+        await toggleFavoriteMenu(target);
+        await testUtils.dom.triggerEvent(
+            target.querySelector(".o_add_to_board button.dropdown-toggle"),
+            "mouseenter"
+        );
+        await testUtils.dom.click(target.querySelector(".o_add_to_board .dropdown-menu button"));
+    });
+
+    QUnit.test("save a action domain to dashboard", async function (assert) {
+        // View domains are to be added to the dashboard domain
+        assert.expect(1);
+
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
+        var view_domain = ["display_name", "ilike", "a"];
+        var filter_domain = ["display_name", "ilike", "b"];
+
+        var expected_domain = ["&", view_domain, filter_domain];
+
+        serverData.views = {
+            "partner,false,list": '<list><field name="foo"/></list>',
+            "partner,false,search": "<search></search>",
+        };
+
+        const mockRPC = (route, args) => {
+            if (route === "/board/add_to_dashboard") {
+                assert.deepEqual(args.domain, expected_domain, "the correct domain should be sent");
+                return Promise.resolve(true);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            id: 1,
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "list"]],
+            domain: [view_domain],
+        });
+
+        // Add a filter
+        await toggleFilterMenu(target);
+        await toggleAddCustomFilter(target);
+        await editConditionValue(target, 0, "b");
+        await applyFilter(target);
+        // Add it to dashboard
+        await toggleFavoriteMenu(target);
+        await testUtils.dom.triggerEvent(
+            target.querySelector(".o_add_to_board button.dropdown-toggle"),
+            "mouseenter"
+        );
+        // add
+        await testUtils.dom.click(target.querySelector(".o_add_to_board .dropdown-menu button"));
+    });
+
+    QUnit.test(
+        "correctly save the time ranges of a reporting view in comparison mode",
+        async function (assert) {
+            assert.expect(1);
+
+            const unpatchDate = patchDate(2020, 6, 1, 11, 0, 0);
+
+            serverData.models.partner.fields.date = {
+                string: "Date",
+                type: "date",
+                sortable: true,
+            };
+
+            serverData.views = {
+                "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
+                "partner,false,search": '<search><filter name="Date" date="date"/></search>',
+            };
+
+            const mockRPC = (route, args) => {
+                if (route === "/board/add_to_dashboard") {
+                    assert.deepEqual(args.context_to_save.comparison, {
+                        comparisonId: "previous_period",
+                        fieldName: "date",
+                        fieldDescription: "Date",
+                        rangeDescription: "July 2020",
+                        range: ["&", ["date", ">=", "2020-07-01"], ["date", "<=", "2020-07-31"]],
+                        comparisonRange: [
+                            "&",
+                            ["date", ">=", "2020-06-01"],
+                            ["date", "<=", "2020-06-30"],
+                        ],
+                        comparisonRangeDescription: "June 2020",
+                    });
+                    return Promise.resolve(true);
+                }
+            };
+
+            registry.category("services").add("user", makeFakeUserService());
+
+            patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
+
+            const webClient = await createWebClient({ serverData, mockRPC });
+
+            await doAction(webClient, {
+                id: 1,
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "pivot"]],
+            });
+
+            // filter on July 2020
+            await toggleFilterMenu(target);
+            await toggleMenuItem(target, "Date");
+            await toggleMenuItemOption(target, "Date", "July");
+
+            // compare July 2020 to June 2020
+            await toggleComparisonMenu(target);
+            await toggleMenuItem(target, 0);
+
+            // add the view to the dashboard
+            await toggleFavoriteMenu(target);
+
+            await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
+            const input = target.querySelector(".o_add_to_board .dropdown-menu input");
+            await testUtils.fields.editInput(input, "Pipeline");
+            await testUtils.dom.click($(".o_add_to_board div button"));
+
+            unpatchDate();
+        }
+    );
+
+    QUnit.test("Add a view to dashboard (keynav)", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
+            "partner,false,search": "<search/>",
+        };
+
+        registry.category("services").add("user", makeFakeUserService());
+
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
+
+        const mockRPC = (route) => {
+            if (route === "/board/add_to_dashboard") {
+                assert.step("add to board");
+                return Promise.resolve(true);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            id: 1,
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+        });
+
+        await toggleFavoriteMenu(target);
+        await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
+        const input = target.querySelector(".o_add_to_board .dropdown-menu input");
+        await testUtils.fields.editInput(input, "Pipeline");
+        await triggerEvent(input, null, "keydown", { key: "Enter" });
+
+        assert.verifySteps(["add to board"]);
+    });
+
+    QUnit.test("Add a view with dynamic domain", async function (assert) {
+        assert.expect(1);
+
+        serverData.views = {
+            "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
+            "partner,false,search": `
+                <search>
+                    <filter name="filter" domain="[('user_id','=',uid)]"/>
+                </search>`,
+        };
+
+        registry.category("services").add("user", makeFakeUserService());
+
+        patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
+
+        const mockRPC = (route, args) => {
+            if (route === "/board/add_to_dashboard") {
+                assert.deepEqual(args.domain, ["&", ["int_field", "<=", 3], ["user_id", "=", 7]]);
+                return Promise.resolve(true);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            id: 1,
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+            domain: [["int_field", "<=", 3]],
+            context: { search_default_filter: 1 },
+        });
+
+        await toggleFavoriteMenu(target);
+        await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
+        const input = target.querySelector(".o_add_to_board .dropdown-menu input");
+        await testUtils.fields.editInput(input, "Pipeline");
+        await triggerEvent(input, null, "keydown", { key: "Enter" });
+    });
+});
diff --git a/addons/board/static/tests/board_test.js b/addons/board/static/tests/board_test.js
new file mode 100644
index 00000000000..4b03b8c700c
--- /dev/null
+++ b/addons/board/static/tests/board_test.js
@@ -0,0 +1,723 @@
+/** @odoo-module **/
+
+import { BoardAction } from "@board/board_action";
+import { click, dragAndDrop, getFixture, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+let target;
+
+QUnit.module("Board", (hooks) => {
+    hooks.beforeEach(async () => {
+        target = getFixture();
+        BoardAction.cache = {};
+
+        serverData = {
+            models: {
+                board: {
+                    fields: {},
+                    records: [],
+                },
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                        foo: {
+                            string: "Foo",
+                            type: "char",
+                            default: "My little Foo Value",
+                            searchable: true,
+                        },
+                        bar: { string: "Bar", type: "boolean" },
+                        int_field: {
+                            string: "Integer field",
+                            type: "integer",
+                            group_operator: "sum",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "first record",
+                            foo: "yop",
+                            int_field: 3,
+                        },
+                        {
+                            id: 2,
+                            display_name: "second record",
+                            foo: "lalala",
+                            int_field: 5,
+                        },
+                        {
+                            id: 4,
+                            display_name: "aaa",
+                            foo: "abc",
+                            int_field: 2,
+                        },
+                    ],
+                },
+            },
+            views: {
+                "partner,100000001,form": "<form/>",
+                "partner,100000002,search": "<search/>",
+            },
+        };
+        setupViewRegistries();
+    });
+
+    QUnit.module("BoardView");
+
+    QUnit.test("display the no content helper", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column></column>
+                    </board>
+                </form>`,
+        });
+        assert.containsOnce(target, ".o_view_nocontent");
+    });
+
+    QUnit.test("basic functionality, with one sub action", async function (assert) {
+        assert.expect(21);
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    assert.step("load action");
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+                if (route === "/web/dataset/call_kw/partner/web_search_read") {
+                    assert.deepEqual(
+                        args.kwargs.domain,
+                        [["foo", "!=", "False"]],
+                        "the domain should be passed"
+                    );
+                    assert.deepEqual(
+                        args.kwargs.context.orderedBy,
+                        [
+                            {
+                                name: "foo",
+                                asc: true,
+                            },
+                        ],
+                        "orderedBy is present in the search read when specified on the custom action"
+                    );
+                }
+                if (route === "/web/view/edit_custom") {
+                    assert.step("edit custom");
+                    return Promise.resolve(true);
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o-dashboard-header", "should have rendered a header");
+        assert.containsOnce(
+            target,
+            "div.o-dashboard-layout-2-1",
+            "should have rendered a div with layout"
+        );
+        assert.containsNone(
+            target,
+            "td.o_list_record_selector",
+            "td should not have a list selector"
+        );
+        assert.containsOnce(
+            target,
+            "h3 span:contains(ABC)",
+            "should have rendered a header with action string"
+        );
+        assert.containsN(target, "tr.o_data_row", 3, "should have rendered 3 data rows");
+
+        assert.containsOnce(target, ".o-dashboard-action .o_list_view");
+
+        await click(target, "h3 i.fa-window-minimize");
+
+        assert.containsNone(target, ".o-dashboard-action .o_list_view");
+
+        await click(target, "h3 i.fa-window-maximize");
+
+        // content is visible again
+        assert.containsOnce(target, ".o-dashboard-action .o_list_view");
+        assert.verifySteps(["load action", "edit custom", "edit custom"]);
+
+        // header should have dropdown with correct image
+        assert.containsOnce(
+            target,
+            ".o-dashboard-header .dropdown img[data-src='/board/static/img/layout_2-1.png']"
+        );
+
+        // change layout to 1-1
+        await click(target, ".o-dashboard-header .dropdown img");
+        await click(target, ".o-dashboard-header .dropdown-item:nth-child(2)");
+        assert.containsOnce(
+            target,
+            ".o-dashboard-header .dropdown img[data-src='/board/static/img/layout_1-1.png']"
+        );
+        assert.containsOnce(
+            target,
+            "div.o-dashboard-layout-1-1",
+            "should have rendered a div with layout"
+        );
+
+        assert.verifySteps(["edit custom"]);
+    });
+
+    QUnit.test("views in the dashboard do not have a control panel", async function (assert) {
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [
+                            [4, "list"],
+                            [5, "form"],
+                        ],
+                    });
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o-dashboard-action .o_list_view");
+        assert.containsNone(target, ".o-dashboard-action .o_control_panel");
+    });
+
+    QUnit.test("can render an action without view_mode attribute", async function (assert) {
+        // The view_mode attribute is automatically set to the 'action' nodes when
+        // the action is added to the dashboard using the 'Add to dashboard' button
+        // in the searchview. However, other dashboard views can be written by hand
+        // (see openacademy tutorial), and in this case, we don't want hardcode
+        // action's params (like context or domain), as the dashboard can directly
+        // retrieve them from the action. Same applies for the view_type, as the
+        // first view of the action can be used, by default.
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [
+                            [4, "list"],
+                            [false, "form"],
+                        ],
+                    });
+                }
+            },
+        });
+
+        assert.containsOnce(target, ".o-dashboard-action .o_list_view");
+    });
+
+    QUnit.test("can sort a sub list", async function (assert) {
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+        serverData.models.partner.fields.foo.sortable = true;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+            },
+        });
+
+        assert.strictEqual(
+            $("tr.o_data_row").text(),
+            "yoplalalaabc",
+            "should have correct initial data"
+        );
+
+        await click($(target).find("th.o_column_sortable:contains(Foo)")[0]);
+        assert.strictEqual(
+            $("tr.o_data_row").text(),
+            "abclalalayop",
+            "data should have been sorted"
+        );
+    });
+
+    QUnit.test("can open a record", async function (assert) {
+        assert.expect(1);
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction(action) {
+                        assert.deepEqual(action, {
+                            res_id: 1,
+                            res_model: "partner",
+                            type: "ir.actions.act_window",
+                            views: [[false, "form"]],
+                        });
+                        return Promise.resolve(true);
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+        serverData.models.partner.fields.foo.sortable = true;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+            },
+        });
+
+        await click($(target).find("tr.o_data_row td:contains(yop)")[0]);
+    });
+
+    QUnit.test("can open record using action form view", async function (assert) {
+        assert.expect(1);
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction(action) {
+                        assert.deepEqual(action, {
+                            res_id: 1,
+                            res_model: "partner",
+                            type: "ir.actions.act_window",
+                            views: [[5, "form"]],
+                        });
+                        return Promise.resolve(true);
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+        serverData.views["partner,5,form"] =
+            '<form string="Partner"><field name="display_name"/></form>';
+
+        serverData.models.partner.fields.foo.sortable = true;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [
+                            [4, "list"],
+                            [5, "form"],
+                        ],
+                    });
+                }
+            },
+        });
+
+        await click($(target).find("tr.o_data_row td:contains(yop)")[0]);
+    });
+
+    QUnit.skip("can drag and drop a view", async function (assert) {
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+                if (route === "/web/view/edit_custom") {
+                    assert.step("edit custom");
+                    return Promise.resolve(true);
+                }
+            },
+        });
+
+        assert.strictEqual(
+            target.querySelectorAll('.o-dashboard-column[data-idx="0"] .o-dashboard-action').length,
+            1
+        );
+        assert.strictEqual(
+            target.querySelectorAll('.o-dashboard-column[data-idx="1"] .o-dashboard-action').length,
+            0
+        );
+
+        await dragAndDrop(
+            '.o-dashboard-column[data-idx="0"] .o-dashboard-action-header',
+            '.o-dashboard-column[data-idx="1"]'
+        );
+
+        assert.strictEqual(
+            target.querySelectorAll('.o-dashboard-column[data-idx="0"] .o-dashboard-action').length,
+            0
+        );
+        assert.strictEqual(
+            target.querySelectorAll('.o-dashboard-column[data-idx="1"] .o-dashboard-action').length,
+            1
+        );
+        assert.verifySteps(["edit custom"]);
+    });
+
+    QUnit.test("twice the same action in a dashboard", async function (assert) {
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+        serverData.views["partner,5,kanban"] = `
+            <kanban>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div><field name="foo"/></div>
+                    </t>
+                </templates>
+            </kanban>`;
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>
+                            <action context="{}" view_mode="kanban" string="DEF" name="51" domain="[]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [
+                            [4, "list"],
+                            [5, "kanban"],
+                        ],
+                    });
+                }
+                if (route === "/web/view/edit_custom") {
+                    assert.step("edit custom");
+                    return Promise.resolve(true);
+                }
+            },
+        });
+
+        var $firstAction = $(".o-dashboard-action:eq(0)");
+        assert.strictEqual(
+            $firstAction.find(".o_list_view").length,
+            1,
+            "list view should be displayed in 'ABC' block"
+        );
+        var $secondAction = $(".o-dashboard-action:eq(1)");
+        assert.strictEqual(
+            $secondAction.find(".o_kanban_view").length,
+            1,
+            "kanban view should be displayed in 'DEF' block"
+        );
+    });
+
+    QUnit.test("clicking on a kanban's button should trigger the action", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[['foo', '!=', 'False']]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    // server answer if the action doesn't exist anymore
+                    return Promise.resolve(false);
+                }
+            },
+        });
+
+        assert.containsOnce(target, "h3 span:contains(ABC)");
+        assert.containsOnce(target, "div.text-center:contains(Invalid action)");
+    });
+
+    QUnit.test("twice the same action in a dashboard", async function (assert) {
+        assert.expect(4);
+        serverData.views["partner,false,kanban"] = `
+            <kanban>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div>
+                            <div><field name="foo"/></div>
+                            <button name="sitting_on_a_park_bench" type="object">Eying little girls with bad intent</button>
+                        </div>
+                    </t>
+                </templates>
+            </kanban>`;
+
+        const view = await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action name="149" string="Partner" view_mode="kanban" id="action_0_1"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        view_mode: "kanban",
+                        views: [[false, "kanban"]],
+                    });
+                }
+                if (route === "/web/dataset/search_read") {
+                    return Promise.resolve({ records: [{ foo: "aqualung" }] });
+                }
+            },
+        });
+
+        patchWithCleanup(view.env.services.action, {
+            doActionButton(params) {
+                assert.strictEqual(params.resModel, "partner");
+                assert.strictEqual(params.resId, 1);
+                assert.strictEqual(params.name, "sitting_on_a_park_bench");
+                assert.strictEqual(params.type, "object");
+            },
+        });
+
+        await click(document.querySelector(".btn.oe_kanban_action"));
+    });
+
+    QUnit.test("Views should be loaded in the user's language", async function (assert) {
+        assert.expect(2);
+        patchWithCleanup(session.user_context, { lang: "fr_FR" });
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                        <action context="{'lang': 'en_US'}" view_mode="list" string="ABC" name="51" domain="[]"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+                if (args.method === "get_views") {
+                    assert.strictEqual(args.kwargs.context.lang, "fr_FR");
+                }
+            },
+        });
+    });
+
+    QUnit.test("Dashboard should use correct groupby", async function (assert) {
+        assert.expect(1);
+        serverData.views["partner,4,list"] = '<tree string="Partner"><field name="foo"/></tree>';
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{'group_by': ['bar']}" string="ABC" name="51"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "list"]],
+                    });
+                }
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(args.kwargs.groupby, ["bar"]);
+                }
+            },
+        });
+    });
+
+    QUnit.test(
+        "Dashboard should use correct groupby when defined as a string of one field",
+        async function (assert) {
+            assert.expect(1);
+            serverData.views["partner,4,list"] =
+                '<tree string="Partner"><field name="foo"/></tree>';
+
+            await makeView({
+                serverData,
+                type: "form",
+                resModel: "board",
+                arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                            <action context="{'group_by': 'bar'}" string="ABC" name="51"></action>
+                        </column>
+                    </board>
+                </form>`,
+                mockRPC(route, args) {
+                    if (route === "/web/action/load") {
+                        return Promise.resolve({
+                            res_model: "partner",
+                            views: [[4, "list"]],
+                        });
+                    }
+                    if (args.method === "web_read_group") {
+                        assert.deepEqual(args.kwargs.groupby, ["bar"]);
+                    }
+                },
+            });
+        }
+    );
+
+    QUnit.test("click on a cell of pivot view inside dashboard", async function (assert) {
+        serverData.views["partner,4,pivot"] =
+            '<pivot><field name="int_field" type="measure"/></pivot>';
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction(action) {
+                        assert.step("do action");
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "board",
+            arch: `
+                <form string="My Dashboard" js_class="board">
+                    <board style="2-1">
+                        <column>
+                        <action view_mode="pivot" string="ABC" name="51"></action>
+                        </column>
+                    </board>
+                </form>`,
+            mockRPC(route, args) {
+                if (route === "/web/action/load") {
+                    return Promise.resolve({
+                        res_model: "partner",
+                        views: [[4, "pivot"]],
+                    });
+                }
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(args.kwargs.groupby, ["bar"]);
+                }
+            },
+        });
+
+        assert.verifySteps([]);
+
+        await click(document.querySelector(".o_pivot_view .o_pivot_cell_value"));
+
+        assert.verifySteps(["do action"]);
+    });
+});
diff --git a/addons/board/static/tests/dashboard_tests.js b/addons/board/static/tests/dashboard_tests.js
deleted file mode 100644
index 43a0d72e9d8..00000000000
--- a/addons/board/static/tests/dashboard_tests.js
+++ /dev/null
@@ -1,1424 +0,0 @@
-odoo.define("board.dashboard_tests", function (require) {
-    "use strict";
-
-    var BoardView = require("board.BoardView");
-
-    var ListController = require("web.ListController");
-    var testUtils = require("web.test_utils");
-    var ListRenderer = require("web.ListRenderer");
-    var pyUtils = require("web.py_utils");
-    const { browser } = require("@web/core/browser/browser");
-    const { getFixture, patchWithCleanup } = require("@web/../tests/helpers/utils");
-    const { registry } = require("@web/core/registry");
-    const { makeFakeUserService } = require("@web/../tests/helpers/mock_services");
-    const {
-        applyFilter,
-        applyGroup,
-        editConditionValue,
-        toggleAddCustomFilter,
-        toggleAddCustomGroup,
-        toggleFilterMenu,
-        toggleGroupByMenu,
-        toggleMenuItem,
-        toggleMenuItemOption,
-        toggleComparisonMenu,
-        toggleFavoriteMenu,
-    } = require("@web/../tests/search/helpers");
-    const { mouseEnter, triggerEvent } = require("@web/../tests/helpers/utils");
-    const LegacyFavoriteMenu = require("web.FavoriteMenu");
-    const LegacyAddToBoard = require("board.AddToBoardMenu");
-    const { AddToBoard } = require("@board/add_to_board/add_to_board");
-
-    const { createWebClient, doAction } = require("@web/../tests/webclient/helpers");
-    var createView = testUtils.createView;
-
-    const patchDate = testUtils.mock.patchDate;
-    const favoriteMenuRegistry = registry.category("favoriteMenu");
-
-    const { markup } = owl;
-
-    let serverData;
-    let target;
-    QUnit.module("Dashboard", {
-        beforeEach: function () {
-            this.data = {
-                board: {
-                    fields: {},
-                    records: [],
-                },
-                partner: {
-                    fields: {
-                        display_name: { string: "Displayed name", type: "char", searchable: true },
-                        foo: {
-                            string: "Foo",
-                            type: "char",
-                            default: "My little Foo Value",
-                            searchable: true,
-                        },
-                        bar: { string: "Bar", type: "boolean" },
-                        int_field: {
-                            string: "Integer field",
-                            type: "integer",
-                            group_operator: "sum",
-                        },
-                    },
-                    records: [
-                        {
-                            id: 1,
-                            display_name: "first record",
-                            foo: "yop",
-                            int_field: 3,
-                        },
-                        {
-                            id: 2,
-                            display_name: "second record",
-                            foo: "lalala",
-                            int_field: 5,
-                        },
-                        {
-                            id: 4,
-                            display_name: "aaa",
-                            foo: "abc",
-                            int_field: 2,
-                        },
-                    ],
-                },
-            };
-
-            LegacyFavoriteMenu.registry.add("add-to-board-menu", LegacyAddToBoard, 10);
-            favoriteMenuRegistry.add(
-                "add-to-board",
-                {
-                    Component: AddToBoard,
-                    groupNumber: 4,
-                    isDisplayed: ({ config }) => config.actionType === "ir.actions.act_window",
-                },
-                { sequence: 10 }
-            );
-            serverData = { models: this.data };
-            target = getFixture();
-        },
-    });
-
-    QUnit.test("dashboard basic rendering", async function (assert) {
-        assert.expect(4);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch: '<form string="My Dashboard">' + "</form>",
-        });
-
-        assert.doesNotHaveClass(
-            form.renderer.$el,
-            "o_dashboard",
-            "should not have the o_dashboard css class"
-        );
-
-        form.destroy();
-
-        form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column></column>" +
-                "</board>" +
-                "</form>",
-        });
-
-        assert.hasClass(
-            form.renderer.$el,
-            "o_dashboard",
-            "with a dashboard, the renderer should have the proper css class"
-        );
-        assert.containsOnce(
-            form,
-            ".o_dashboard .o_view_nocontent",
-            "should have a no content helper"
-        );
-        assert.strictEqual(form.getTitle(), "My Dashboard", "should have the correct title");
-        form.destroy();
-    });
-
-    QUnit.test("display the no content helper", async function (assert) {
-        assert.expect(1);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column></column>" +
-                "</board>" +
-                "</form>",
-            viewOptions: {
-                action: {
-                    help: markup('<p class="hello">click to add a partner</p>'),
-                },
-            },
-        });
-
-        assert.containsOnce(
-            form,
-            ".o_dashboard .o_view_nocontent",
-            "should have a no content helper with action help"
-        );
-        form.destroy();
-    });
-
-    QUnit.test("basic functionality, with one sub action", async function (assert) {
-        assert.expect(26);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{&quot;orderedBy&quot;: [{&quot;name&quot;: &quot;foo&quot;, &quot;asc&quot;: True}]}" view_mode="list" string="ABC" name="51" domain="[[\'foo\', \'!=\', \'False\']]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route, args) {
-                if (route === "/web/action/load") {
-                    assert.step("load action");
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                if (route === "/web/dataset/search_read") {
-                    assert.deepEqual(
-                        args.domain,
-                        [["foo", "!=", "False"]],
-                        "the domain should be passed"
-                    );
-                    assert.deepEqual(
-                        args.context.orderedBy,
-                        [
-                            {
-                                name: "foo",
-                                asc: true,
-                            },
-                        ],
-                        "orderedBy is present in the search read when specified on the custom action"
-                    );
-                }
-                if (route === "/web/view/edit_custom") {
-                    assert.step("edit custom");
-                    return Promise.resolve(true);
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-        });
-
-        assert.containsOnce(form, ".oe_dashboard_links", "should have rendered a link div");
-        assert.containsOnce(
-            form,
-            'table.oe_dashboard[data-layout="2-1"]',
-            "should have rendered a table"
-        );
-        assert.containsNone(
-            form,
-            "td.o_list_record_selector",
-            "td should not have a list selector"
-        );
-        assert.strictEqual(
-            form.$("h2 span.oe_header_txt:contains(ABC)").length,
-            1,
-            "should have rendered a header with action string"
-        );
-        assert.containsN(form, "tr.o_data_row", 3, "should have rendered 3 data rows");
-
-        assert.ok(form.$(".oe_content").is(":visible"), "content is visible");
-
-        await testUtils.dom.click(form.$(".oe_fold"));
-
-        assert.notOk(form.$(".oe_content").is(":visible"), "content is no longer visible");
-
-        await testUtils.dom.click(form.$(".oe_fold"));
-
-        assert.ok(form.$(".oe_content").is(":visible"), "content is visible again");
-        assert.verifySteps(["load action", "edit custom", "edit custom"]);
-
-        assert.strictEqual($(".modal").length, 0, "should have no modal open");
-
-        await testUtils.dom.click(form.$("button.oe_dashboard_link_change_layout"));
-
-        assert.strictEqual($(".modal").length, 1, "should have opened a modal");
-        assert.strictEqual(
-            $('.modal li[data-layout="2-1"] i.oe_dashboard_selected_layout').length,
-            1,
-            "should mark currently selected layout"
-        );
-
-        await testUtils.dom.click($('.modal .oe_dashboard_layout_selector li[data-layout="1-1"]'));
-
-        assert.strictEqual($(".modal").length, 0, "should have no modal open");
-        assert.containsOnce(
-            form,
-            'table.oe_dashboard[data-layout="1-1"]',
-            "should have rendered a table with correct layout"
-        );
-
-        assert.containsOnce(form, ".oe_action", "should have one displayed action");
-        await testUtils.dom.click(form.$("span.oe_close"));
-
-        assert.strictEqual($(".modal").length, 1, "should have opened a modal");
-
-        // confirm the close operation
-        await testUtils.dom.click($(".modal button.btn-primary"));
-
-        assert.strictEqual($(".modal").length, 0, "should have no modal open");
-        assert.containsNone(form, ".oe_action", "should have no displayed action");
-
-        assert.verifySteps(["edit custom", "edit custom"]);
-        form.destroy();
-    });
-
-    QUnit.test("views in the dashboard do not have a control panel", async function (assert) {
-        assert.expect(2);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                "<form>" +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [
-                            [4, "list"],
-                            [5, "form"],
-                        ],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-        });
-
-        assert.containsOnce(form, ".o_action .o_list_view");
-        assert.containsNone(form, ".o_action .o_control_panel");
-
-        form.destroy();
-    });
-
-    QUnit.test("can render an action without view_mode attribute", async function (assert) {
-        // The view_mode attribute is automatically set to the 'action' nodes when
-        // the action is added to the dashboard using the 'Add to dashboard' button
-        // in the searchview. However, other dashboard views can be written by hand
-        // (see openacademy tutorial), and in this case, we don't want hardcode
-        // action's params (like context or domain), as the dashboard can directly
-        // retrieve them from the action. Same applies for the view_type, as the
-        // first view of the action can be used, by default.
-        assert.expect(3);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action string="ABC" name="51" context="{\'a\': 1}"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-            mockRPC: function (route, args) {
-                if (route === "/board/static/src/img/layout_1-1-1.png") {
-                    return Promise.resolve();
-                }
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        context: '{"b": 2}',
-                        domain: '[["foo", "=", "yop"]]',
-                        res_model: "partner",
-                        views: [
-                            [4, "list"],
-                            [false, "form"],
-                        ],
-                    });
-                }
-                if (args.method === "get_views") {
-                    assert.deepEqual(
-                        args.kwargs.context,
-                        { a: 1, b: 2 },
-                        "should have mixed both contexts"
-                    );
-                }
-                if (route === "/web/dataset/search_read") {
-                    assert.deepEqual(
-                        args.domain,
-                        [["foo", "=", "yop"]],
-                        "should use the domain of the action"
-                    );
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        assert.strictEqual(
-            form.$(".oe_action:contains(ABC) .o_list_view").length,
-            1,
-            "the list view (first view of action) should have been rendered correctly"
-        );
-
-        form.destroy();
-    });
-
-    QUnit.test("can sort a sub list", async function (assert) {
-        assert.expect(2);
-
-        this.data.partner.fields.foo.sortable = true;
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-        });
-
-        assert.strictEqual(
-            $("tr.o_data_row").text(),
-            "yoplalalaabc",
-            "should have correct initial data"
-        );
-
-        await testUtils.dom.click(form.$("th.o_column_sortable:contains(Foo)"));
-
-        assert.strictEqual(
-            $("tr.o_data_row").text(),
-            "abclalalayop",
-            "data should have been sorted"
-        );
-        form.destroy();
-    });
-
-    QUnit.test("can open a record", async function (assert) {
-        assert.expect(1);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-            intercepts: {
-                do_action: function (event) {
-                    assert.deepEqual(
-                        event.data.action,
-                        {
-                            res_id: 1,
-                            res_model: "partner",
-                            type: "ir.actions.act_window",
-                            views: [[false, "form"]],
-                        },
-                        "should do a do_action with correct parameters"
-                    );
-                },
-            },
-        });
-
-        await testUtils.dom.click(form.$("tr.o_data_row td:contains(yop)"));
-        form.destroy();
-    });
-
-    QUnit.test("can open record using action form view", async function (assert) {
-        assert.expect(1);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [
-                            [4, "list"],
-                            [5, "form"],
-                        ],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-                "partner,5,form": '<form string="Partner"><field name="display_name"/></form>',
-            },
-            intercepts: {
-                do_action: function (event) {
-                    assert.deepEqual(
-                        event.data.action,
-                        {
-                            res_id: 1,
-                            res_model: "partner",
-                            type: "ir.actions.act_window",
-                            views: [[5, "form"]],
-                        },
-                        "should do a do_action with correct parameters"
-                    );
-                },
-            },
-        });
-
-        await testUtils.dom.click(form.$("tr.o_data_row td:contains(yop)"));
-        form.destroy();
-    });
-
-    QUnit.test("can drag and drop a view", async function (assert) {
-        assert.expect(5);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                if (route === "/web/view/edit_custom") {
-                    assert.step("edit custom");
-                    return Promise.resolve(true);
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-            },
-        });
-
-        assert.containsOnce(form, "td.index_0 .oe_action", "initial action is in column 0");
-
-        await testUtils.dom.dragAndDrop(
-            form.$(".oe_dashboard_column.index_0 .oe_header"),
-            form.$(".oe_dashboard_column.index_1")
-        );
-        assert.containsNone(form, "td.index_0 .oe_action", "initial action is not in column 0");
-        assert.containsOnce(form, "td.index_1 .oe_action", "initial action is in in column 1");
-        assert.verifySteps(["edit custom"]);
-
-        form.destroy();
-    });
-
-    QUnit.test("twice the same action in a dashboard", async function (assert) {
-        assert.expect(2);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                '<action context="{}" view_mode="kanban" string="DEF" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [
-                            [4, "list"],
-                            [5, "kanban"],
-                        ],
-                    });
-                }
-                if (route === "/web/view/edit_custom") {
-                    assert.step("edit custom");
-                    return Promise.resolve(true);
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<tree string="Partner"><field name="foo"/></tree>',
-                "partner,5,kanban":
-                    '<kanban><templates><t t-name="kanban-box">' +
-                    '<div><field name="foo"/></div>' +
-                    "</t></templates></kanban>",
-            },
-        });
-
-        var $firstAction = form.$(".oe_action:contains(ABC)");
-        assert.strictEqual(
-            $firstAction.find(".o_list_view").length,
-            1,
-            "list view should be displayed in 'ABC' block"
-        );
-        var $secondAction = form.$(".oe_action:contains(DEF)");
-        assert.strictEqual(
-            $secondAction.find(".o_kanban_view").length,
-            1,
-            "kanban view should be displayed in 'DEF' block"
-        );
-
-        form.destroy();
-    });
-
-    QUnit.test("non-existing action in a dashboard", async function (assert) {
-        assert.expect(1);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="kanban" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            intercepts: {
-                get_views: function () {
-                    throw new Error("get_views should not be called");
-                },
-            },
-            mockRPC: function (route) {
-                if (route === "/board/static/src/img/layout_1-1-1.png") {
-                    return Promise.resolve();
-                }
-                if (route === "/web/action/load") {
-                    // server answer if the action doesn't exist anymore
-                    return Promise.resolve(false);
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        assert.strictEqual(
-            form.$(".oe_action:contains(ABC)").length,
-            1,
-            "there should be a box for the non-existing action"
-        );
-
-        form.destroy();
-    });
-
-    QUnit.test("clicking on a kanban's button should trigger the action", async function (assert) {
-        assert.expect(2);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action name="149" string="Partner" view_mode="kanban" id="action_0_1"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            archs: {
-                "partner,false,kanban":
-                    '<kanban class="o_kanban_test"><templates><t t-name="kanban-box">' +
-                    "<div>" +
-                    '<field name="foo"/>' +
-                    "</div>" +
-                    '<div><button name="sitting_on_a_park_bench" type="object">Eying little girls with bad intent</button>' +
-                    "</div>" +
-                    "</t></templates></kanban>",
-            },
-            intercepts: {
-                execute_action: function (event) {
-                    var data = event.data;
-                    assert.strictEqual(data.env.model, "partner", "should have correct model");
-                    assert.strictEqual(
-                        data.action_data.name,
-                        "sitting_on_a_park_bench",
-                        "should call correct method"
-                    );
-                },
-            },
-
-            mockRPC: function (route) {
-                if (route === "/board/static/src/img/layout_1-1-1.png") {
-                    return Promise.resolve();
-                }
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        view_mode: "kanban",
-                        views: [[false, "kanban"]],
-                    });
-                }
-                if (route === "/web/dataset/search_read") {
-                    return Promise.resolve({ records: [{ foo: "aqualung" }] });
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await testUtils.dom.click(form.$(".o_kanban_test").find("button:first"));
-
-        form.destroy();
-    });
-
-    QUnit.test("subviews are aware of attach in or detach from the DOM", async function (assert) {
-        assert.expect(2);
-
-        // patch list renderer `on_attach_callback` for the test only
-        testUtils.mock.patch(ListRenderer, {
-            on_attach_callback: function () {
-                assert.step("subview on_attach_callback");
-            },
-        });
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<list string="Partner"><field name="foo"/></list>',
-            },
-        });
-
-        assert.verifySteps(["subview on_attach_callback"]);
-
-        // restore on_attach_callback of ListRenderer
-        testUtils.mock.unpatch(ListRenderer);
-
-        form.destroy();
-    });
-
-    QUnit.test(
-        "dashboard intercepts custom events triggered by sub controllers",
-        async function (assert) {
-            assert.expect(1);
-
-            // we patch the ListController to force it to trigger the custom events that
-            // we want the dashboard to intercept (to stop them or to tweak their data)
-            testUtils.mock.patch(ListController, {
-                start: function () {
-                    this.trigger_up("update_filters");
-                    return this._super.apply(this, arguments);
-                },
-            });
-
-            var board = await createView({
-                View: BoardView,
-                model: "board",
-                data: this.data,
-                arch:
-                    '<form string="My Dashboard">' +
-                    '<board style="2-1">' +
-                    "<column>" +
-                    '<action context="{}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                    "</column>" +
-                    "</board>" +
-                    "</form>",
-                mockRPC: function (route) {
-                    if (route === "/web/action/load") {
-                        return Promise.resolve({ res_model: "partner", views: [[false, "list"]] });
-                    }
-                    return this._super.apply(this, arguments);
-                },
-                archs: {
-                    "partner,false,list": '<tree string="Partner"/>',
-                },
-                intercepts: {
-                    update_filters: assert.step.bind(assert, "update_filters"),
-                },
-            });
-
-            assert.verifySteps([]);
-
-            testUtils.mock.unpatch(ListController);
-            board.destroy();
-        }
-    );
-
-    QUnit.test("save actions to dashboard", async function (assert) {
-        assert.expect(6);
-
-        testUtils.mock.patch(ListController, {
-            getOwnedQueryParams: function () {
-                var result = this._super.apply(this, arguments);
-                result.context = {
-                    fire: "on the bayou",
-                };
-                return result;
-            },
-        });
-
-        serverData.models.partner.fields.foo.sortable = true;
-
-        serverData.views = {
-            "partner,false,list": '<list><field name="foo"/></list>',
-            "partner,false,search": "<search></search>",
-        };
-        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
-
-        const mockRPC = (route, args) => {
-            if (route === "/board/add_to_dashboard") {
-                assert.deepEqual(
-                    args.context_to_save.group_by,
-                    ["foo"],
-                    "The group_by should have been saved"
-                );
-                assert.deepEqual(
-                    args.context_to_save.orderedBy,
-                    [
-                        {
-                            name: "foo",
-                            asc: true,
-                        },
-                    ],
-                    "The orderedBy should have been saved"
-                );
-                assert.strictEqual(
-                    args.context_to_save.fire,
-                    "on the bayou",
-                    "The context of a controller should be passed and flattened"
-                );
-                assert.strictEqual(args.action_id, 1, "should save the correct action");
-                assert.strictEqual(args.view_mode, "list", "should save the correct view type");
-                return Promise.resolve(true);
-            }
-        };
-
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, {
-            id: 1,
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "list"]],
-        });
-
-        assert.containsOnce(target, ".o_list_view", "should display the list view");
-
-        // Sort the list
-        await testUtils.dom.click($(".o_column_sortable"));
-
-        // Group It
-        await toggleGroupByMenu(target);
-        await toggleAddCustomGroup(target);
-        await applyGroup(target);
-
-        // add this action to dashboard
-        await toggleFavoriteMenu(target);
-
-        await testUtils.dom.triggerEvent($(".o_add_to_board button.dropdown-toggle"), "mouseenter");
-        await testUtils.fields.editInput($(".o_add_to_board input"), "a name");
-        await testUtils.dom.click($(".o_add_to_board .dropdown-menu button"));
-
-        testUtils.mock.unpatch(ListController);
-    });
-
-    QUnit.test("save two searches to dashboard", async function (assert) {
-        // the second search saved should not be influenced by the first
-        assert.expect(2);
-
-        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
-        serverData.views = {
-            "partner,false,list": '<list><field name="foo"/></list>',
-            "partner,false,search": "<search></search>",
-        };
-
-        const mockRPC = (route, args) => {
-            if (route === "/board/add_to_dashboard") {
-                if (filter_count === 0) {
-                    assert.deepEqual(
-                        args.domain,
-                        [["display_name", "ilike", "a"]],
-                        "the correct domain should be sent"
-                    );
-                }
-                if (filter_count === 1) {
-                    assert.deepEqual(
-                        args.domain,
-                        [["display_name", "ilike", "b"]],
-                        "the correct domain should be sent"
-                    );
-                }
-
-                filter_count += 1;
-                return Promise.resolve(true);
-            }
-        };
-
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, {
-            id: 1,
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "list"]],
-        });
-
-        var filter_count = 0;
-        // Add a first filter
-        await toggleFilterMenu(target);
-        await toggleAddCustomFilter(target);
-        await editConditionValue(target, 0, "a");
-        await applyFilter(target);
-
-        // Add it to dashboard
-        await toggleFavoriteMenu(target);
-        await testUtils.dom.triggerEvent($(".o_add_to_board button.dropdown-toggle"), "mouseenter");
-        await testUtils.dom.click($(".o_add_to_board .dropdown-menu button"));
-
-        // Remove it
-        await testUtils.dom.click(target.querySelector(".o_facet_remove"));
-
-        // Add the second filter
-        await toggleFilterMenu(target);
-        await toggleAddCustomFilter(target);
-        await editConditionValue(target, 0, "b");
-        await applyFilter(target);
-        // Add it to dashboard
-        await toggleFavoriteMenu(target);
-        await testUtils.dom.triggerEvent(
-            target.querySelector(".o_add_to_board button.dropdown-toggle"),
-            "mouseenter"
-        );
-        await testUtils.dom.click(
-            target.querySelector(".o_add_to_board .dropdown-menu button")
-        );
-    });
-
-    QUnit.test("save a action domain to dashboard", async function (assert) {
-        // View domains are to be added to the dashboard domain
-        assert.expect(1);
-
-        patchWithCleanup(browser, { setTimeout: (fn) => fn() });
-        var view_domain = ["display_name", "ilike", "a"];
-        var filter_domain = ["display_name", "ilike", "b"];
-
-        // The filter domain already contains the view domain, but is always added by dashboard..,
-        var expected_domain = ["&", view_domain, "&", view_domain, filter_domain];
-
-        serverData.views = {
-            "partner,false,list": '<list><field name="foo"/></list>',
-            "partner,false,search": "<search></search>",
-        };
-
-        const mockRPC = (route, args) => {
-            if (route === "/board/add_to_dashboard") {
-                assert.deepEqual(args.domain, expected_domain, "the correct domain should be sent");
-                return Promise.resolve(true);
-            }
-        };
-
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, {
-            id: 1,
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "list"]],
-            domain: [view_domain],
-        });
-
-        // Add a filter
-        await toggleFilterMenu(target);
-        await toggleAddCustomFilter(target);
-        await editConditionValue(target, 0, "b");
-        await applyFilter(target);
-        // Add it to dashboard
-        await toggleFavoriteMenu(target);
-        await testUtils.dom.triggerEvent(
-            target.querySelector(".o_add_to_board button.dropdown-toggle"),
-            "mouseenter"
-        );
-        // add
-        await testUtils.dom.click(
-            target.querySelector(".o_add_to_board .dropdown-menu button")
-        );
-    });
-
-    QUnit.test("Views should be loaded in the user's language", async function (assert) {
-        assert.expect(2);
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            session: { user_context: { lang: "fr_FR" } },
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{\'lang\': \'en_US\'}" view_mode="list" string="ABC" name="51" domain="[]"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route, args) {
-                if (args.method === "get_views") {
-                    assert.deepEqual(
-                        pyUtils.eval("context", args.kwargs.context),
-                        { lang: "fr_FR" },
-                        "The views should be loaded with the correct context"
-                    );
-                }
-                if (route === "/web/dataset/search_read") {
-                    assert.equal(
-                        args.context.lang,
-                        "fr_FR",
-                        "The data should be loaded with the correct context"
-                    );
-                }
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "list"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<list string="Partner"><field name="foo"/></list>',
-            },
-        });
-
-        form.destroy();
-    });
-
-    QUnit.test("Dashboard should use correct groupby", async function (assert) {
-        assert.expect(1);
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                '<form string="My Dashboard">' +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action context="{\'group_by\': [\'bar\']}" string="ABC" name="51"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route, args) {
-                if (args.method === "web_read_group") {
-                    assert.deepEqual(
-                        args.kwargs.groupby,
-                        ["bar"],
-                        "user defined groupby should have precedence on action groupby"
-                    );
-                }
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        context: {
-                            group_by: "some_field",
-                        },
-                        views: [[4, "list"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,list": '<list string="Partner"><field name="foo"/></list>',
-            },
-        });
-
-        form.destroy();
-    });
-
-    QUnit.test(
-        "Dashboard should use correct groupby when defined as a string of one field",
-        async function (assert) {
-            assert.expect(1);
-            var form = await createView({
-                View: BoardView,
-                model: "board",
-                data: this.data,
-                arch:
-                    '<form string="My Dashboard">' +
-                    '<board style="2-1">' +
-                    "<column>" +
-                    '<action context="{\'group_by\': \'bar\'}" string="ABC" name="51"></action>' +
-                    "</column>" +
-                    "</board>" +
-                    "</form>",
-                mockRPC: function (route, args) {
-                    if (args.method === "web_read_group") {
-                        assert.deepEqual(
-                            args.kwargs.groupby,
-                            ["bar"],
-                            "user defined groupby should have precedence on action groupby"
-                        );
-                    }
-                    if (route === "/web/action/load") {
-                        return Promise.resolve({
-                            res_model: "partner",
-                            context: {
-                                group_by: "some_field",
-                            },
-                            views: [[4, "list"]],
-                        });
-                    }
-                    return this._super.apply(this, arguments);
-                },
-                archs: {
-                    "partner,4,list": '<list string="Partner"><field name="foo"/></list>',
-                },
-            });
-
-            form.destroy();
-        }
-    );
-
-    QUnit.test("click on a cell of pivot view inside dashboard", async function (assert) {
-        assert.expect(3);
-
-        var form = await createView({
-            View: BoardView,
-            model: "board",
-            data: this.data,
-            arch:
-                "<form>" +
-                '<board style="2-1">' +
-                "<column>" +
-                '<action view_mode="pivot" string="ABC" name="51"></action>' +
-                "</column>" +
-                "</board>" +
-                "</form>",
-            mockRPC: function (route) {
-                if (route === "/web/action/load") {
-                    return Promise.resolve({
-                        res_model: "partner",
-                        views: [[4, "pivot"]],
-                    });
-                }
-                return this._super.apply(this, arguments);
-            },
-            archs: {
-                "partner,4,pivot": '<pivot><field name="int_field" type="measure"/></pivot>',
-            },
-            intercepts: {
-                do_action: function () {
-                    assert.step("do action");
-                },
-            },
-        });
-
-        assert.verifySteps([]);
-
-        await testUtils.dom.click(form.$(".o_legacy_pivot .o_pivot_cell_value"));
-
-        assert.verifySteps(["do action"]);
-
-        form.destroy();
-    });
-
-    QUnit.test(
-        "correctly save the time ranges of a reporting view in comparison mode",
-        async function (assert) {
-            assert.expect(1);
-
-            const unpatchDate = patchDate(2020, 6, 1, 11, 0, 0);
-
-            serverData.models.partner.fields.date = {
-                string: "Date",
-                type: "date",
-                sortable: true,
-            };
-
-            serverData.views = {
-                "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
-                "partner,false,search": '<search><filter name="Date" date="date"/></search>',
-            };
-
-            const mockRPC = (route, args) => {
-                if (route === "/board/add_to_dashboard") {
-                    assert.deepEqual(args.context_to_save.comparison, {
-                        comparisonId: "previous_period",
-                        fieldName: "date",
-                        fieldDescription: "Date",
-                        rangeDescription: "July 2020",
-                        range: ["&", ["date", ">=", "2020-07-01"], ["date", "<=", "2020-07-31"]],
-                        comparisonRange: [
-                            "&",
-                            ["date", ">=", "2020-06-01"],
-                            ["date", "<=", "2020-06-30"],
-                        ],
-                        comparisonRangeDescription: "June 2020",
-                    });
-                    return Promise.resolve(true);
-                }
-            };
-
-            registry.category("services").add("user", makeFakeUserService());
-
-            patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
-
-            const webClient = await createWebClient({ serverData, mockRPC });
-
-            await doAction(webClient, {
-                id: 1,
-                res_model: "partner",
-                type: "ir.actions.act_window",
-                views: [[false, "pivot"]],
-            });
-
-            // filter on July 2020
-            await toggleFilterMenu(target);
-            await toggleMenuItem(target, "Date");
-            await toggleMenuItemOption(target, "Date", "July");
-
-            // compare July 2020 to June 2020
-            await toggleComparisonMenu(target);
-            await toggleMenuItem(target, 0);
-
-            // add the view to the dashboard
-            await toggleFavoriteMenu(target);
-
-            await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
-            const input = target.querySelector(".o_add_to_board .dropdown-menu input");
-            await testUtils.fields.editInput(input, "Pipeline");
-            await testUtils.dom.click($(".o_add_to_board div button"));
-
-            unpatchDate();
-        }
-    );
-
-    QUnit.test("Add a view to dashboard (key nav)", async function (assert) {
-        assert.expect(2);
-
-        serverData.views = {
-            "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
-            "partner,false,search": '<search/>',
-        };
-
-        registry.category("services").add("user", makeFakeUserService());
-
-        patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
-
-        const mockRPC = (route) => {
-            if (route === "/board/add_to_dashboard") {
-                assert.step("add to board")
-                return Promise.resolve(true);
-            }
-        };
-
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, {
-            id: 1,
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "pivot"]],
-        });
-
-        await toggleFavoriteMenu(target);
-        await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
-        const input = target.querySelector(".o_add_to_board .dropdown-menu input");
-        await testUtils.fields.editInput(input, "Pipeline");
-        await triggerEvent(input, null, "keydown", { key: "Enter" });
-
-        assert.verifySteps(["add to board"]);
-    });
-
-    QUnit.test(
-        "correctly display the time range descriptions of a reporting view in comparison mode",
-        async function (assert) {
-            assert.expect(1);
-
-            this.data.partner.fields.date = { string: "Date", type: "date", sortable: true };
-            this.data.partner.records[0].date = "2020-07-15";
-
-            const form = await createView({
-                View: BoardView,
-                model: "board",
-                data: this.data,
-                arch: `<form string="My Dashboard">
-                <board style="2-1">
-                    <column>
-                        <action string="ABC" name="51"></action>
-                    </column>
-                </board>
-            </form>`,
-                archs: {
-                    "partner,1,pivot": '<pivot string="Partner"></pivot>',
-                },
-                mockRPC: function (route, args) {
-                    if (route === "/board/static/src/img/layout_1-1-1.png") {
-                        return Promise.resolve();
-                    }
-                    if (route === "/web/action/load") {
-                        return Promise.resolve({
-                            context: JSON.stringify({
-                                comparison: {
-                                    comparisonId: "previous_period",
-                                    fieldName: "date",
-                                    fieldDescription: "Date",
-                                    rangeDescription: "July 2020",
-                                    range: [
-                                        "&",
-                                        ["date", ">=", "2020-07-01"],
-                                        ["date", "<=", "2020-07-31"],
-                                    ],
-                                    comparisonRange: [
-                                        "&",
-                                        ["date", ">=", "2020-06-01"],
-                                        ["date", "<=", "2020-06-30"],
-                                    ],
-                                    comparisonRangeDescription: "June 2020",
-                                },
-                            }),
-                            domain: "[]",
-                            res_model: "partner",
-                            views: [[1, "pivot"]],
-                        });
-                    }
-                    return this._super.apply(this, arguments);
-                },
-            });
-
-            assert.deepEqual(
-                [...form.el.querySelectorAll("div.o_legacy_pivot th.o_pivot_origin_row")].map(
-                    (el) => el.innerText
-                ),
-                ["June 2020", "July 2020", "Variation"]
-            );
-
-            form.destroy();
-        }
-    );
-
-    QUnit.test("Add a view with dynamic domain", async function (assert) {
-        assert.expect(1);
-
-        serverData.views = {
-            "partner,false,pivot": '<pivot><field name="foo"/></pivot>',
-            "partner,false,search": `
-                <search>
-                    <filter name="filter" domain="[('user_id','=',uid)]"/>
-                </search>
-            `,
-        };
-
-        registry.category("services").add("user", makeFakeUserService());
-
-        patchWithCleanup(browser, { setTimeout: (fn) => fn() }); // makes mouseEnter work
-
-        const mockRPC = (route, args) => {
-            if (route === "/board/add_to_dashboard") {
-                assert.deepEqual(args.domain, 	["&", ["int_field", "<=", 3], ["user_id", "=", 7]]);
-                return Promise.resolve(true);
-            }
-        };
-
-        const webClient = await createWebClient({ serverData, mockRPC });
-
-        await doAction(webClient, {
-            id: 1,
-            res_model: "partner",
-            type: "ir.actions.act_window",
-            views: [[false, "pivot"]],
-            domain: [["int_field", "<=", 3]],
-            context: { search_default_filter: 1 },
-        });
-
-        await toggleFavoriteMenu(target);
-        await mouseEnter(target.querySelector(".o_add_to_board .dropdown-toggle"));
-        const input = target.querySelector(".o_add_to_board .dropdown-menu input");
-        await testUtils.fields.editInput(input, "Pipeline");
-        await triggerEvent(input, null, "keydown", { key: "Enter" });
-    });
-});
diff --git a/addons/web/tooling/_eslintignore b/addons/web/tooling/_eslintignore
index 12ec8652c06..5dec290d945 100644
--- a/addons/web/tooling/_eslintignore
+++ b/addons/web/tooling/_eslintignore
@@ -1,11 +1,13 @@
 # Ignore everything
 *
 
-# Whitelist web
+# Whitelist web and board
 !addons
 addons/*
 !addons/web
 !addons/web/**/*
+!addons/board
+!addons/board/**/*
 
 # Whitelist web_enterprise
 !web_enterprise
diff --git a/addons/web/tooling/_prettierignore b/addons/web/tooling/_prettierignore
index 12ec8652c06..5dec290d945 100644
--- a/addons/web/tooling/_prettierignore
+++ b/addons/web/tooling/_prettierignore
@@ -1,11 +1,13 @@
 # Ignore everything
 *
 
-# Whitelist web
+# Whitelist web and board
 !addons
 addons/*
 !addons/web
 !addons/web/**/*
+!addons/board
+!addons/board/**/*
 
 # Whitelist web_enterprise
 !web_enterprise

From 53595b93267c29ddea812751be8a12080632dec9 Mon Sep 17 00:00:00 2001
From: "Simon Genin (ges)" <ges@odoo.com>
Date: Thu, 23 Jun 2022 11:40:15 +0000
Subject: [PATCH 29/50] [IMP] web: number parsers: fallback on english
 localization

With this commit, if the user types something in a numeric field
input that doesn't match its localization, we try to parse it with
the english localization. If it works, we considerer that value.
Otherwise, we throw an error.

al request

Part-of: odoo/odoo#92475
---
 addons/web/static/src/views/fields/parsers.js | 19 +++++++++++++++++++
 .../tests/search/custom_filter_item_tests.js  |  4 ++--
 .../tests/views/fields/parsers_tests.js       | 10 ++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/views/fields/parsers.js b/addons/web/static/src/views/fields/parsers.js
index 32238b9e4cf..2fe442b27e3 100644
--- a/addons/web/static/src/views/fields/parsers.js
+++ b/addons/web/static/src/views/fields/parsers.js
@@ -72,6 +72,15 @@ export function parseFloat(value) {
         thousandsSep: thousandsSepRegex,
         decimalPoint: decimalPointRegex,
     });
+    if (isNaN(parsed)) {
+        parsed = parseNumber(value, {
+            thousandsSep: ",",
+            decimalPoint: ".",
+        });
+        if (isNaN(parsed)) {
+            throw new InvalidNumberError(`"${value}" is not a correct number`);
+        }
+    }
     return parsed;
 }
 
@@ -114,6 +123,16 @@ export function parseInteger(value) {
         decimalPoint: decimalPointRegex,
         truncate: true,
     });
+    if (!Number.isInteger(parsed)) {
+        parsed = parseNumber(value, {
+            thousandsSep: ",",
+            decimalPoint: ".",
+            truncate: true,
+        });
+        if (!Number.isInteger(parsed)) {
+            throw new InvalidNumberError(`"${value}" is not a correct number`);
+        }
+    }
     return parsed;
 }
 
diff --git a/addons/web/static/tests/search/custom_filter_item_tests.js b/addons/web/static/tests/search/custom_filter_item_tests.js
index 32355bf3890..694683ebf5b 100644
--- a/addons/web/static/tests/search/custom_filter_item_tests.js
+++ b/addons/web/static/tests/search/custom_filter_item_tests.js
@@ -622,12 +622,12 @@ QUnit.module("Search", (hooks) => {
         assert.strictEqual(floatInput.value, "4,2");
 
         await editConditionValue(target, 0, "4,2,");
-        assert.strictEqual(floatInput.value, "4,2");
+        assert.strictEqual(floatInput.value, "42,0"); // because of the en localization fallback in parsers.
 
         await editConditionValue(target, 0, "DefinitelyValidFloat");
 
         // The input here is a string, resulting in a parsing error instead of 0
-        assert.strictEqual(floatInput.value, "4,2");
+        assert.strictEqual(floatInput.value, "42,0");
     });
 
     QUnit.test("add custom filter with multiple values", async function (assert) {
diff --git a/addons/web/static/tests/views/fields/parsers_tests.js b/addons/web/static/tests/views/fields/parsers_tests.js
index 530d1ec67d6..2662fb02db7 100644
--- a/addons/web/static/tests/views/fields/parsers_tests.js
+++ b/addons/web/static/tests/views/fields/parsers_tests.js
@@ -127,4 +127,14 @@ QUnit.module("Fields", (hooks) => {
         assert.throws(() => parseMonetary("1$\u00a01", { currencyId: 1 }));
         assert.throws(() => parseMonetary("$\u00a012.00\u00a034", { currencyId: 3 }));
     });
+
+    QUnit.test("parsers fallback on english localisation", function (assert) {
+        patchWithCleanup(localization, {
+            decimalPoint: ",",
+            thousandsSep: ".",
+        });
+
+        assert.strictEqual(parseInteger("1,000,000"), 1000000);
+        assert.strictEqual(parseFloat("1,000,000.50"), 1000000.5);
+    });
 });

From 2f9c34697468cd898f6ae9f19feab0e58e2968be Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Tue, 28 Jun 2022 07:53:56 +0000
Subject: [PATCH 30/50] [IMP] web: group statusbar buttons on mobile

This commit modifies the statusbar's buttons to render
them in a dropdown when the user is on a small screen.

Part-of: odoo/odoo#92475
---
 .../static/src/views/form/form_compiler.js    |  29 +-
 .../static/src/views/form/form_renderer.js    |   2 +
 .../status_bar_buttons/status_bar_buttons.js  |  21 +
 .../status_bar_buttons.scss                   |   9 +
 .../status_bar_buttons/status_bar_buttons.xml |  25 ++
 .../tests/mobile/mobile_form_view_tests.js    | 394 ++++++++++++++++++
 6 files changed, 470 insertions(+), 10 deletions(-)
 create mode 100644 addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.js
 create mode 100644 addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.scss
 create mode 100644 addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
 create mode 100644 addons/web/static/tests/mobile/mobile_form_view_tests.js

diff --git a/addons/web/static/src/views/form/form_compiler.js b/addons/web/static/src/views/form/form_compiler.js
index 214233d58b0..5683314e02b 100644
--- a/addons/web/static/src/views/form/form_compiler.js
+++ b/addons/web/static/src/views/form/form_compiler.js
@@ -335,20 +335,29 @@ export class FormCompiler extends ViewCompiler {
             if (!compiled || isTextNode(compiled)) {
                 continue;
             }
-            if (getTag(child, true) === "button") {
-                buttons.push(compiled);
-            } else {
-                if (getTag(child, true) === "field") {
-                    compiled.setAttribute("showTooltip", true);
-                }
+            if (getTag(child, true) === "field") {
+                compiled.setAttribute("showTooltip", true);
                 others.push(compiled);
+            } else {
+                buttons.push(compiled);
             }
         }
         if (buttons.length) {
-            const divButtons = createElement("div");
-            divButtons.className = "o_statusbar_buttons";
-            append(divButtons, buttons);
-            append(statusBar, divButtons);
+            let slotId = 0;
+            const statusBarButtons = createElement("StatusBarButtons");
+            statusBarButtons.setAttribute("readonly", "!props.record.isInEdition");
+            for (const button of buttons) {
+                const slot = createElement("t", {
+                    "t-set-slot": `button_${slotId++}`,
+                    isVisible: button.getAttribute("t-if") || true,
+                    displayInReadOnly:
+                        button.hasAttribute("className") &&
+                        button.getAttribute("className").includes("oe_read_only"),
+                });
+                append(slot, button);
+                append(statusBarButtons, slot);
+            }
+            append(statusBar, statusBarButtons);
         }
         append(statusBar, others);
         return statusBar;
diff --git a/addons/web/static/src/views/form/form_renderer.js b/addons/web/static/src/views/form/form_renderer.js
index f59d30a3f72..b60176448cb 100644
--- a/addons/web/static/src/views/form/form_renderer.js
+++ b/addons/web/static/src/views/form/form_renderer.js
@@ -10,6 +10,7 @@ import { useBounceButton } from "@web/views/view_hook";
 import { Widget } from "@web/views/widgets/widget";
 import { FormCompiler } from "./form_compiler";
 import { FormLabel } from "./form_label";
+import { StatusBarButtons } from "./status_bar_buttons/status_bar_buttons";
 
 const { Component, useSubEnv, useRef, useState, xml } = owl;
 
@@ -39,4 +40,5 @@ FormRenderer.components = {
     Notebook,
     OuterGroup,
     InnerGroup,
+    StatusBarButtons,
 };
diff --git a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.js b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.js
new file mode 100644
index 00000000000..e810ab75ca1
--- /dev/null
+++ b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.js
@@ -0,0 +1,21 @@
+/** @odoo-module **/
+
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { DropdownItem } from "@web/core/dropdown/dropdown_item";
+
+const { Component } = owl;
+
+export class StatusBarButtons extends Component {
+    get visibleSlotNames() {
+        return Object.entries(this.props.slots)
+            .filter(
+                (entry) => entry[1].isVisible && (entry[1].displayInReadOnly ? this.props.readonly : true)
+            )
+            .map((entry) => entry[0]);
+    }
+}
+StatusBarButtons.template = "web.StatusBarButtons";
+StatusBarButtons.components = {
+    Dropdown,
+    DropdownItem,
+};
diff --git a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.scss b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.scss
new file mode 100644
index 00000000000..f903df27b79
--- /dev/null
+++ b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.scss
@@ -0,0 +1,9 @@
+
+.o_statusbar_button_dropdown_item {
+    padding: 0;
+    margin-bottom: 3px;
+
+    button {
+        width: 100%;
+    }
+}
diff --git a/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
new file mode 100644
index 00000000000..e6d760bf136
--- /dev/null
+++ b/addons/web/static/src/views/form/status_bar_buttons/status_bar_buttons.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.StatusBarButtons" owl="1">
+        <div class="o_statusbar_buttons">
+            <t t-set="slots" t-value="visibleSlotNames" />
+            <t t-if="env.isSmall and slots.length > 1">
+                <Dropdown togglerClass="'btn btn-primary'">
+                    <t t-set-slot="toggler">Action</t>
+                    <t t-foreach="slots" t-as="slot" t-key="slot">
+                        <DropdownItem class="'o_statusbar_button_dropdown_item'">
+                            <t t-slot="{{ slot }}" />
+                        </DropdownItem>
+                    </t>
+                </Dropdown>
+            </t>
+            <t t-else="">
+                <t t-foreach="slots" t-as="slot" t-key="slot">
+                    <t t-slot="{{ slot }}" />
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/mobile/mobile_form_view_tests.js b/addons/web/static/tests/mobile/mobile_form_view_tests.js
new file mode 100644
index 00000000000..c6c4f994b4c
--- /dev/null
+++ b/addons/web/static/tests/mobile/mobile_form_view_tests.js
@@ -0,0 +1,394 @@
+/** @odoo-module **/
+
+import {
+    click,
+    clickEdit,
+    clickSave,
+    editInput,
+    getFixture,
+    makeDeferred,
+    nextTick,
+} from "../helpers/utils";
+import { makeView, setupViewRegistries } from "../views/helpers";
+
+let fixture;
+let serverData;
+
+QUnit.module("Mobile Views", ({ beforeEach }) => {
+    beforeEach(() => {
+        setupViewRegistries();
+        fixture = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { type: "char", string: "Display Name" },
+                        trululu: { type: "many2one", string: "Trululu", relation: "partner" },
+                    },
+                    records: [
+                        { id: 1, display_name: "first record", trululu: 4 },
+                        { id: 2, display_name: "second record", trululu: 1 },
+                        { id: 4, display_name: "aaa" },
+                    ],
+                },
+            },
+        };
+    });
+
+    QUnit.module("FormView");
+
+    QUnit.test(`statusbar buttons are correctly rendered in mobile`, async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <button string="Confirm" />
+                        <button string="Do it" />
+                    </header>
+                    <sheet>
+                        <group>
+                            <button name="display_name" />
+                        </group>
+                    </sheet>
+                </form>
+            `,
+        });
+
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_buttons .dropdown",
+            "statusbar should contain a button 'Action'"
+        );
+        assert.containsNone(
+            fixture,
+            ".o_statusbar_buttons .dropdown-menu",
+            "statusbar should contain a dropdown"
+        );
+        assert.containsNone(
+            fixture,
+            ".o_statusbar_buttons .dropdown-menu:visible",
+            "dropdown should be hidden"
+        );
+
+        // open the dropdown
+        await click(fixture, ".o_statusbar_buttons .dropdown-toggle");
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_buttons .dropdown-menu:visible",
+            "dropdown should be visible"
+        );
+        assert.containsN(
+            fixture,
+            ".o_statusbar_buttons .dropdown-menu button",
+            2,
+            "dropdown should contain 2 buttons"
+        );
+    });
+
+    QUnit.test(
+        `statusbar "Action" button should be displayed only if there are multiple visible buttons`,
+        async (assert) => {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 1,
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button string="Confirm" attrs="{'invisible': [['display_name', '=', 'first record']]}" />
+                            <button string="Do it" attrs="{'invisible': [['display_name', '=', 'first record']]}" />
+                        </header>
+                        <sheet>
+                            <group>
+                                <field name="display_name" />
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            // if all buttons are invisible then there should be no action button
+            assert.containsNone(
+                fixture,
+                ".o_statusbar_buttons > btn-group > .dropdown-toggle",
+                "'Action' dropdown is not displayed as there are no visible buttons"
+            );
+
+            // change display_name to update buttons modifiers and make it visible
+            await clickEdit(fixture);
+            await editInput(fixture, ".o_field_widget[name=display_name] input", "test");
+            await clickSave(fixture);
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "statusbar should contain a dropdown"
+            );
+        }
+    );
+
+    QUnit.test(
+        `statusbar "Action" button not displayed in edit mode with .oe_read_only button`,
+        async (assert) => {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button string="Share" type="action" class="oe_highlight oe_read_only" />
+                            <button string="Email" type="action" class="oe_highlight oe_read_only" />
+                        </header>
+                        <sheet>
+                            <group>
+                                <field name="display_name" />
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            assert.containsNone(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "dropdown should not be there"
+            );
+
+            await clickSave(fixture);
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "dropdown should not be there"
+            );
+        }
+    );
+
+    QUnit.test(
+        `statusbar "Action" button shouldn't be displayed for only one visible button`,
+        async (assert) => {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                resId: 1,
+                arch: `
+                    <form>
+                        <header>
+                            <button string="Hola" attrs="{'invisible': [['display_name', '=', 'first record']]}" />
+                            <button string="Ciao" />
+                        </header>
+                        <sheet>
+                            <group>
+                                <field name="display_name" />
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            await clickEdit(fixture);
+
+            // There should be a simple statusbar button and no action dropdown
+            assert.containsNone(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "should have no 'Action' dropdown"
+            );
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons > button",
+                "should have a simple statusbar button"
+            );
+
+            // change display_name to update buttons modifiers and make both buttons visible
+            await editInput(fixture, ".o_field_widget[name=display_name] input", "test");
+
+            // Now there should an action dropdown, because there are two visible buttons
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "should have no 'Action' dropdown"
+            );
+        }
+    );
+
+    QUnit.test(
+        `statusbar widgets should appear in the statusbar dropdown only if there are multiple items`,
+        async (assert) => {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                resId: 2,
+                arch: `
+                    <form>
+                        <header>
+                            <widget name="attach_document" string="Attach document" />
+                            <button string="Ciao" attrs="{'invisible': [['display_name', '=', 'first record']]}" />
+                        </header>
+                        <sheet>
+                            <group>
+                                <field name="display_name" />
+                            </group>
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            await clickEdit(fixture);
+            // Now there should an action dropdown, because there are two visible buttons
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "should have 'Action' dropdown"
+            );
+
+            await click(fixture, ".o_statusbar_buttons .dropdown-toggle");
+            assert.containsN(
+                fixture,
+                ".o_statusbar_buttons .dropdown-menu button",
+                2,
+                "should have 2 buttons in the dropdown"
+            );
+
+            // change display_name to update buttons modifiers and make one button visible
+            await editInput(fixture, ".o_field_widget[name=display_name] input", "first record");
+
+            // There should be a simple statusbar button and no action dropdown
+            assert.containsNone(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "shouldn't have 'Action' dropdown"
+            );
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons button:visible",
+                "should have 1 button visible in the statusbar"
+            );
+        }
+    );
+
+    QUnit.test(
+        `statusbar "Action" dropdown should keep its open/close state`,
+        async function (assert) {
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button string="Just more than one" />
+                            <button string="Confirm" attrs="{'invisible': [['display_name', '=', '']]}" />
+                            <button string="Do it" attrs="{'invisible': [['display_name', '!=', '']]}" />
+                        </header>
+                        <sheet>
+                            <field name="display_name" />
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "statusbar should contain a dropdown"
+            );
+            assert.doesNotHaveClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should be closed"
+            );
+
+            // open the dropdown
+            await click(fixture, ".o_statusbar_buttons .dropdown-toggle");
+            assert.hasClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should be opened"
+            );
+
+            // change display_name to update buttons' modifiers
+            await editInput(fixture, ".o_field_widget[name=display_name] input", "test");
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "statusbar should contain a dropdown"
+            );
+            assert.hasClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should still be opened"
+            );
+        }
+    );
+
+    QUnit.test(
+        `statusbar "Action" dropdown's open/close state shouldn't be modified after 'onchange'`,
+        async function (assert) {
+            serverData.models.partner.onchanges = {
+                display_name: async () => {},
+            };
+
+            const onchangeDef = makeDeferred();
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <form>
+                        <header>
+                            <button name="create" string="Create Invoice" type="action" />
+                            <button name="send" string="Send by Email" type="action" />
+                        </header>
+                        <sheet>
+                            <field name="display_name" />
+                        </sheet>
+                    </form>
+                `,
+                mockRPC(route, { method, args: [, , changedField] }) {
+                    if (method === "onchange" && changedField === "display_name") {
+                        return onchangeDef;
+                    }
+                },
+            });
+
+            assert.containsOnce(
+                fixture,
+                ".o_statusbar_buttons .dropdown",
+                "statusbar should contain a dropdown"
+            );
+            assert.doesNotHaveClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should be closed"
+            );
+
+            await editInput(fixture, ".o_field_widget[name=display_name] input", "before onchange");
+            await click(fixture, ".o_statusbar_buttons .dropdown-toggle");
+            assert.hasClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should be opened"
+            );
+
+            onchangeDef.resolve({ value: { display_name: "after onchange" } });
+            await nextTick();
+            assert.strictEqual(
+                fixture.querySelector(".o_field_widget[name=display_name] input").value,
+                "after onchange"
+            );
+            assert.hasClass(
+                fixture.querySelector(".o_statusbar_buttons .dropdown"),
+                "show",
+                "dropdown should still be opened"
+            );
+        }
+    );
+});

From 466cfbfb42a1c1c51b71187f7f512212b44f5011 Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Tue, 28 Jun 2022 07:55:20 +0000
Subject: [PATCH 31/50] [IMP] web: fold statusbar field  on mobile

This commit modifies the statusbar field to render all
its buttons in a dropdown when the user is on a small screen.

Part-of: odoo/odoo#92475
---
 .../views/fields/statusbar/statusbar_field.js |  36 +++-
 .../fields/statusbar/statusbar_field.xml      |   8 +-
 .../mobile/mobile_statusbar_field_tests.js    | 204 ++++++++++++++++++
 3 files changed, 236 insertions(+), 12 deletions(-)
 create mode 100644 addons/web/static/tests/mobile/mobile_statusbar_field_tests.js

diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.js b/addons/web/static/src/views/fields/statusbar/statusbar_field.js
index 0a4bac3adb2..dbcdabacf21 100644
--- a/addons/web/static/src/views/fields/statusbar/statusbar_field.js
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.js
@@ -19,9 +19,18 @@ export class StatusBarField extends Component {
         }
     }
 
-    get dropdownClassNames() {
-        const classNames = ["btn", "btn-secondary", "o_arrow_button"];
-        if (this.props.isDisabled) {
+    get currentName() {
+        const item = this.props.options.find((item) => item.isSelected);
+        return item ? item.name : "";
+    }
+
+    getDropdownItemClassNames(item) {
+        const classNames = [
+            "btn",
+            item.isSelected ? "btn-primary" : "btn-secondary",
+            "o_arrow_button",
+        ];
+        if (item.isSelected || this.props.isDisabled) {
             classNames.push("disabled");
         }
         return classNames.join(" ");
@@ -67,11 +76,18 @@ export class StatusBarField extends Component {
             items = this.getVisibleSelection();
         }
 
-        const groups = groupBy(items, (item) => item.isSelected || !item.isFolded);
-        return {
-            folded: groups.false || [],
-            unfolded: groups.true || [],
-        };
+        if (this.env.isSmall) {
+            return {
+                folded: items,
+                unfolded: [],
+            };
+        } else {
+            const groups = groupBy(items, (item) => item.isSelected || !item.isFolded);
+            return {
+                folded: groups.false || [],
+                unfolded: groups.true || [],
+            };
+        }
     }
 
     selectItem(item) {
@@ -140,7 +156,9 @@ StatusBarField.components = {
 StatusBarField.displayName = _lt("Status");
 StatusBarField.supportedTypes = ["many2one", "selection"];
 
-StatusBarField.isEmpty = () => false;
+StatusBarField.isEmpty = (record, fieldName) => {
+    return record.model.env.isSmall ? !record.data[fieldName] : false;
+};
 StatusBarField.extractProps = (fieldName, record, attrs) => {
     const getOptions = () => {
         switch (record.fields[fieldName].type) {
diff --git a/addons/web/static/src/views/fields/statusbar/statusbar_field.xml b/addons/web/static/src/views/fields/statusbar/statusbar_field.xml
index 4511d32b4c0..a52ae93b92d 100644
--- a/addons/web/static/src/views/fields/statusbar/statusbar_field.xml
+++ b/addons/web/static/src/views/fields/statusbar/statusbar_field.xml
@@ -9,14 +9,16 @@
                 <button type="button" class="btn o_arrow_button btn-secondary dropdown-toggle">
                     <Dropdown toggler="'parent'">
                         <t t-foreach="items.folded" t-as="item" t-key="item.id">
-                            <DropdownItem class="dropdownClassNames" onSelected="() => this.selectItem(item)">
+                            <DropdownItem class="getDropdownItemClassNames(item)" onSelected="() => this.selectItem(item)">
                                 <t t-esc="item.name" />
                             </DropdownItem>
                         </t>
                     </Dropdown>
-                    More
+                    <t t-if="env.isSmall">
+                        <t t-esc="currentName" />
+                    </t>
+                    <t t-else="">More</t>
                 </button>
-                
             </t>
 
             <t t-foreach="items.unfolded.reverse()" t-as="item" t-key="item.id">
diff --git a/addons/web/static/tests/mobile/mobile_statusbar_field_tests.js b/addons/web/static/tests/mobile/mobile_statusbar_field_tests.js
new file mode 100644
index 00000000000..03254bb08e9
--- /dev/null
+++ b/addons/web/static/tests/mobile/mobile_statusbar_field_tests.js
@@ -0,0 +1,204 @@
+/** @odoo-module **/
+
+import { click, getFixture } from "../helpers/utils";
+import { makeView, setupViewRegistries } from "../views/helpers";
+
+let fixture;
+let serverData;
+
+QUnit.module("Mobile Fields", ({ beforeEach }) => {
+    beforeEach(() => {
+        setupViewRegistries();
+        fixture = getFixture();
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char" },
+                        trululu: { string: "Trululu", type: "many2one", relation: "partner" },
+                    },
+                    records: [
+                        { id: 1, display_name: "first record", trululu: 4 },
+                        { id: 2, display_name: "second record", trululu: 1 },
+                        { id: 4, display_name: "aaa" },
+                    ],
+                },
+            },
+        };
+    });
+
+    QUnit.module("StatusBarField");
+
+    QUnit.test("statusbar is rendered correclty on small devices", async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" />
+                    </header>
+                    <field name="display_name" />
+                </form>
+            `,
+        });
+
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_status > button",
+            "should have only one visible status in mobile, the active one"
+        );
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_status .dropdown",
+            "should have a dropdown containing all status"
+        );
+        assert.containsNone(
+            fixture,
+            ".o_statusbar_status .dropdown-menu",
+            "dropdown should be hidden"
+        );
+
+        // open the dropdown
+        await click(fixture, ".o_statusbar_status > button");
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_status .dropdown-menu",
+            "dropdown should be visible"
+        );
+        assert.containsN(
+            fixture,
+            ".o_statusbar_status .dropdown-menu .btn",
+            3,
+            "should have 3 status"
+        );
+        assert.containsN(
+            fixture,
+            ".o_statusbar_status .btn.disabled",
+            3,
+            "all status should be disabled"
+        );
+        assert.hasClass(
+            fixture.querySelector(".o_statusbar_status .btn:nth-child(3)"),
+            "btn-primary",
+            "active status should be btn-primary"
+        );
+    });
+
+    QUnit.test("statusbar with no status on extra small screens", async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 4,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" />
+                    </header>
+                </form>
+            `,
+        });
+
+        assert.hasClass(
+            fixture.querySelector(".o_field_statusbar"),
+            "o_field_empty",
+            "statusbar widget should have class o_field_empty"
+        );
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_status button.dropdown-toggle",
+            "statusbar widget should have a button"
+        );
+        assert.strictEqual(
+            fixture.querySelector(".o_statusbar_status button.dropdown-toggle").textContent.trim(),
+            "",
+            "statusbar button has no text"
+        ); // Behavior as of saas-15, might be improved
+
+        await click(fixture, ".o_statusbar_status button.dropdown-toggle");
+        assert.containsOnce(
+            fixture,
+            ".o_statusbar_status .dropdown-menu",
+            "statusbar widget should have a dropdown menu"
+        );
+        assert.containsN(
+            fixture,
+            ".o_statusbar_status .dropdown-menu .btn",
+            3,
+            "statusbar widget dropdown menu should have 3 buttons"
+        );
+        assert.strictEqual(
+            fixture
+                .querySelectorAll(".o_statusbar_status .dropdown-menu .btn")[0]
+                .textContent.trim(),
+            "first record",
+            "statusbar widget dropdown first button should display the first record display_name"
+        );
+        assert.strictEqual(
+            fixture
+                .querySelectorAll(".o_statusbar_status .dropdown-menu .btn")[1]
+                .textContent.trim(),
+            "second record",
+            "statusbar widget dropdown second button should display the second record display_name"
+        );
+        assert.strictEqual(
+            fixture
+                .querySelectorAll(".o_statusbar_status .dropdown-menu .btn")[2]
+                .textContent.trim(),
+            "aaa",
+            "statusbar widget dropdown third button should display the third record display_name"
+        );
+    });
+
+    QUnit.test("clickable statusbar widget on mobile view", async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <header>
+                        <field name="trululu" widget="statusbar" options="{'clickable': '1'}" />
+                    </header>
+                </form>
+            `,
+        });
+
+        await click(fixture, ".o_statusbar_status .dropdown-toggle");
+        assert.hasClass(
+            fixture.querySelector(".o_statusbar_status .dropdown-menu .btn:nth-child(3)"),
+            "btn-primary"
+        );
+        assert.hasClass(
+            fixture.querySelector(".o_statusbar_status .dropdown-menu .btn:nth-child(3)"),
+            "disabled"
+        );
+
+        assert.containsN(
+            fixture,
+            ".o_statusbar_status .btn-secondary:not(.dropdown-toggle):not(.disabled)",
+            2,
+            "other status should be btn-secondary and not disabled"
+        );
+
+        await click(
+            fixture.querySelector(
+                ".o_statusbar_status .btn-secondary:not(.dropdown-toggle):not(.disabled)"
+            )
+        );
+
+        await click(fixture, ".o_statusbar_status .dropdown-toggle");
+        assert.hasClass(
+            fixture.querySelector(".o_statusbar_status .dropdown-menu .btn:nth-child(1)"),
+            "btn-primary"
+        );
+        assert.hasClass(
+            fixture.querySelector(".o_statusbar_status .dropdown-menu .btn:nth-child(1)"),
+            "disabled"
+        );
+    });
+});

From b1f072cba4bfd18a196c5d9177187b70ace5b4e5 Mon Sep 17 00:00:00 2001
From: "Michael (mcm)" <mcm@odoo.com>
Date: Tue, 28 Jun 2022 07:57:14 +0000
Subject: [PATCH 32/50] [IMP] web: adapt dialog for mobile

This commit modifies the dialog to make it more user
friendly on small screen. On small screen, the dialog
opens in fullscreen and saves the scroll position when
opening to restore it on close.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/dialog/dialog.js   | 10 +++
 addons/web/static/src/core/dialog/dialog.xml  |  9 ++-
 .../static/src/core/dialog/dialog_service.js  | 16 +++-
 .../tests/core/errors/error_service_tests.js  |  2 +
 .../tests/mobile/mobile_form_view_tests.js    | 76 +++++++++++++++++++
 5 files changed, 109 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index 0f2d75a0a44..f9bbefbc757 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -15,6 +15,16 @@ export class Dialog extends Component {
         });
         this.id = `dialog_${this.data.id}`;
         useChildSubEnv({ inDialog: true, dialogId: this.id });
+
+        owl.onWillDestroy(() => {
+            if (this.env.isSmall) {
+                this.data.scrollToOrigin();
+            }
+        });
+    }
+
+    get isFullscreen() {
+        return this.props.fullscreen || this.env.isSmall;
     }
 }
 Dialog.template = "web.Dialog";
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 048a104399f..9925618ea71 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -5,16 +5,21 @@
         <div class="o_dialog" t-att-id="id" t-att-class="{ o_inactive_modal: !data.isActive }">
             <div role="dialog" class="modal d-block"
                 tabindex="-1"
-                t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
+                t-att-class="{ o_technical_modal: props.technical, o_modal_full: isFullscreen }"
                 t-ref="modalRef"
                 >
                 <div class="modal-dialog" t-attf-class="modal-{{props.size}}">
                     <div class="modal-content" t-att-class="props.contentClass">
                         <header t-if="props.header" class="modal-header">
+                            <t t-if="isFullscreen">
+                                <button class="btn fa fa-arrow-left" data-dismiss="modal" aria-label="Close" t-on-click="data.close" />
+                            </t>
                             <h4 class="modal-title text-break">
                                 <t t-esc="props.title"/>
                             </h4>
-                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="data.close">×</button>
+                            <t t-if="!isFullscreen">
+                                <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="data.close">×</button>
+                            </t>
                         </header>
                         <!-- FIXME: WOWL there is a bug on t-portal on owl, in which t-portal don't work on multinode.
                         To avoid this we place the footer before the body -->
diff --git a/addons/web/static/src/core/dialog/dialog_service.js b/addons/web/static/src/core/dialog/dialog_service.js
index 0d6cbc23e71..34dc5f3bd57 100644
--- a/addons/web/static/src/core/dialog/dialog_service.js
+++ b/addons/web/static/src/core/dialog/dialog_service.js
@@ -22,7 +22,7 @@ const { markRaw, reactive } = owl;
 
 export const dialogService = {
     /** @returns {DialogServiceInterface} */
-    start() {
+    start(env) {
         const dialogs = reactive({});
         let dialogId = 0;
 
@@ -52,8 +52,20 @@ export const dialogService = {
                 id,
                 class: dialogClass,
                 props: markRaw({ ...props, close }),
-                dialogData: { isActive: true, close, id },
+                dialogData: {
+                    isActive: true,
+                    close,
+                    id,
+                },
             };
+            if (env.isSmall) {
+                const scrollOrigin = { top: window.scrollY, left: window.scrollX };
+                dialog.dialogData.scrollToOrigin = () => {
+                    if (!Object.keys(dialogs).length) {
+                        window.scrollTo(scrollOrigin);
+                    }
+                };
+            }
             dialogs[id] = dialog;
 
             return close;
diff --git a/addons/web/static/tests/core/errors/error_service_tests.js b/addons/web/static/tests/core/errors/error_service_tests.js
index 9c2826c948f..f70bf75a310 100644
--- a/addons/web/static/tests/core/errors/error_service_tests.js
+++ b/addons/web/static/tests/core/errors/error_service_tests.js
@@ -11,6 +11,7 @@ import { errorService } from "@web/core/errors/error_service";
 import { ConnectionLostError, RPCError } from "@web/core/network/rpc_service";
 import { notificationService } from "@web/core/notifications/notification_service";
 import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
 import { registerCleanup } from "../../helpers/cleanup";
 import { makeTestEnv } from "../../helpers/mock_env";
 import {
@@ -36,6 +37,7 @@ QUnit.module("Error Service", {
         serviceRegistry.add("notification", notificationService);
         serviceRegistry.add("rpc", makeFakeRPCService());
         serviceRegistry.add("localization", makeFakeLocalizationService());
+        serviceRegistry.add("ui", uiService);
         const windowAddEventListener = browser.addEventListener;
         browser.addEventListener = (type, cb) => {
             if (type === "unhandledrejection") {
diff --git a/addons/web/static/tests/mobile/mobile_form_view_tests.js b/addons/web/static/tests/mobile/mobile_form_view_tests.js
index c6c4f994b4c..28931cf6aec 100644
--- a/addons/web/static/tests/mobile/mobile_form_view_tests.js
+++ b/addons/web/static/tests/mobile/mobile_form_view_tests.js
@@ -8,6 +8,7 @@ import {
     getFixture,
     makeDeferred,
     nextTick,
+    patchWithCleanup,
 } from "../helpers/utils";
 import { makeView, setupViewRegistries } from "../views/helpers";
 
@@ -391,4 +392,79 @@ QUnit.module("Mobile Views", ({ beforeEach }) => {
             );
         }
     );
+
+    QUnit.test(
+        `preserve current scroll position on form view while closing dialog`,
+        async function (assert) {
+            serverData.views = {
+                "partner,false,kanban": `
+                    <kanban>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div class="oe_kanban_global_click">
+                                    <field name="display_name" />
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>
+                `,
+                "partner,false,search": `
+                    <search />
+                `,
+            };
+
+            await makeView({
+                type: "form",
+                resModel: "partner",
+                resId: 2,
+                serverData,
+                arch: `
+                    <form>
+                        <sheet>
+                            <p style="height:500px" />
+                            <field name="trululu" />
+                            <p style="height:500px" />
+                        </sheet>
+                    </form>
+                `,
+            });
+
+            let position = { top: 0, left: 0 };
+            patchWithCleanup(window, {
+                scrollTo(newPosition) {
+                    position = newPosition;
+                },
+                get scrollX() {
+                    return position.left;
+                },
+                get scrollY() {
+                    return position.top;
+                },
+            });
+
+            await clickEdit(fixture);
+
+            window.scrollTo({ top: 265, left: 0 });
+            assert.strictEqual(window.scrollY, 265, "Should have scrolled 265 px vertically");
+            assert.strictEqual(window.screenLeft, 0, "Should be 0 px from left as it is");
+
+            // click on m2o field
+            await click(fixture, ".o_field_many2one input");
+            // assert.strictEqual(window.scrollY, 0, "Should have scrolled to top (0) px");
+            assert.containsOnce(
+                fixture,
+                ".modal.o_modal_full",
+                "there should be a many2one modal opened in full screen"
+            );
+
+            // click on back button
+            await click(fixture, ".modal .modal-header .fa-arrow-left");
+            assert.strictEqual(
+                window.scrollY,
+                265,
+                "Should have scrolled back to 265 px vertically"
+            );
+            assert.strictEqual(window.screenLeft, 0, "Should be 0 px from left as it is");
+        }
+    );
 });

From 8e32e1dace1bf57ee9ff01219f95a91c2b7f5b0c Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 23 Jun 2022 12:52:49 +0000
Subject: [PATCH 33/50] [FIX] web: ViewButton supports styling set on anchors
 tags

Part-of: odoo/odoo#92475
---
 .../src/views/view_button/view_button.js      |  1 +
 .../src/views/view_button/view_button.xml     |  1 +
 .../static/tests/views/kanban_view_tests.js   | 33 +++++++++++++++++++
 3 files changed, 35 insertions(+)

diff --git a/addons/web/static/src/views/view_button/view_button.js b/addons/web/static/src/views/view_button/view_button.js
index 7f293ef529c..66d19e53761 100644
--- a/addons/web/static/src/views/view_button/view_button.js
+++ b/addons/web/static/src/views/view_button/view_button.js
@@ -124,6 +124,7 @@ ViewButton.props = [
     "size?",
     "tabindex?",
     "title?",
+    "style?",
     "string?",
     "slots?",
 ];
diff --git a/addons/web/static/src/views/view_button/view_button.xml b/addons/web/static/src/views/view_button/view_button.xml
index 5a80c9a68e7..04178d1346c 100644
--- a/addons/web/static/src/views/view_button/view_button.xml
+++ b/addons/web/static/src/views/view_button/view_button.xml
@@ -8,6 +8,7 @@
         t-att-name="props.clickParams.name"
         t-att-special="props.clickParams.special"
         t-att-href="props.tag === 'a' and '#'"
+        t-att-style="props.style"
         t-att-type="clickParams.type"
         t-att-data-tooltip-template="hasBigTooltip ? 'views.ViewButtonTooltip' : false"
         t-att-data-tooltip-info="hasBigTooltip ? tooltip : false"
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index c4fb0de1dca..e574a00ecaf 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -6386,6 +6386,39 @@ QUnit.module("Views", (hooks) => {
         assert.containsN(target, ".o_btn_test_2", 3, "kanban should have three buttons of type 2");
     });
 
+    QUnit.test("support styling of anchor tags with action type", async function (assert) {
+        assert.expect(3);
+
+        const actionService = {
+            start() {
+                return {
+                    doActionButton: (action) => assert.strictEqual(action.name, "42"),
+                };
+            },
+        };
+        registry.category("services").add("action", actionService, { force: true });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo"/>
+                            <a type="action" name="42" class="btn-primary" style="margin-left: 10px"><i class="fa fa-arrow-right"/> Click me !</a>
+                        </div>
+                    </templates>
+                </kanban>`,
+            resId: 1,
+        });
+
+        await click(target.querySelector("a[type='action']"));
+        assert.hasClass(target.querySelector("a[type='action']"), "btn-primary");
+        assert.strictEqual(target.querySelector("a[type='action']").style.marginLeft, "10px");
+    });
+
     QUnit.test("button executes action and reloads", async (assert) => {
         const kanban = await makeView({
             type: "kanban",

From f9b692e452042040953bf279e46701ebcab3411b Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Thu, 23 Jun 2022 13:32:41 +0000
Subject: [PATCH 34/50] [FIX] web: kanban: problem with several groupbys

The kanban view is not supposed to be grouped by more than one groupby.
In this commit, we make sure that the param groupBy is correctly process at
the first level to only keep the first groupby (if any)

Part-of: odoo/odoo#92475
---
 .../static/src/views/kanban/kanban_model.js   |  2 ++
 .../static/tests/views/kanban_view_tests.js   | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/addons/web/static/src/views/kanban/kanban_model.js b/addons/web/static/src/views/kanban/kanban_model.js
index 8b2036b39a4..acf5ec79519 100644
--- a/addons/web/static/src/views/kanban/kanban_model.js
+++ b/addons/web/static/src/views/kanban/kanban_model.js
@@ -328,6 +328,8 @@ export class KanbanDynamicGroupList extends DynamicGroupList {
     setup() {
         super.setup(...arguments);
 
+        this.groupBy = this.groupBy.slice(0, 1);
+
         this.model.addEventListener("group-updated", ({ detail }) => {
             if (this.groups.some((g) => g.id === detail.group.id)) {
                 this.updateGroupProgressData([detail.group], detail.withProgressBars);
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index e574a00ecaf..7e1e5e5d4b9 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9558,4 +9558,32 @@ QUnit.module("Views", (hooks) => {
 
         assert.containsN(target, ".o_kanban_record", 3);
     });
+
+    QUnit.test("basic rendering with 2 groupbys", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["bar", "product_id"],
+            async mockRPC(route, args) {
+                assert.step(args.method);
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsOnce(target, ".o_kanban_group:first-child .o_kanban_record");
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
+        assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
+    });
 });

From dcbf2119fcc130d25f9d43a04929516e71102df9 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Thu, 23 Jun 2022 14:15:20 +0000
Subject: [PATCH 35/50] [FIX] web: kanban: problem with date/datetime
 granularity

The call to web_read_group done in _loadGroups was incorrect when the first groupby
was of the form date_field:granularity (e.g. "create_date:day"). The groupby was
sent as a mesure and interpreded as such, leading to an error of the form
"Invalid aggregation function ...".
This was not detected before by lack of manual testing: the mock server used in tests
checks the read group parameters in a different way from what is done server side.
So the error was not visible in the testing environment.

In this commit, we remove the error in web_read_group and improve the mock server
(a bit) so as to make such errors be detected.

Part-of: odoo/odoo#92475
---
 .../web/static/src/views/relational_model.js  |  5 ++-
 .../web/static/tests/helpers/mock_server.js   | 23 +++++++++--
 addons/web/static/tests/mock_server_tests.js  | 38 ++++++++++++++++++-
 .../static/tests/views/kanban_view_tests.js   | 33 ++++++++++++++++
 4 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/addons/web/static/src/views/relational_model.js b/addons/web/static/src/views/relational_model.js
index d72b391c54d..7886a780f2c 100644
--- a/addons/web/static/src/views/relational_model.js
+++ b/addons/web/static/src/views/relational_model.js
@@ -2145,11 +2145,12 @@ export class DynamicGroupList extends DynamicList {
 
     async _loadGroups() {
         const orderby = orderByToString(this.orderBy);
+        const firstGroupByName = this.firstGroupBy.split(":")[0];
         const { groups, length } = await this.model.orm.webReadGroup(
             this.resModel,
             this.domain,
-            unique([...this.fieldNames, this.groupBy[0]]),
-            this.groupBy,
+            unique([...this.fieldNames, firstGroupByName]),
+            [this.firstGroupBy],
             {
                 orderby,
                 lazy: true,
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index c68e273e7a1..49029c5dbef 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -16,6 +16,20 @@ const serviceRegistry = registry.category("services");
 const domParser = new DOMParser();
 const xmlSerializer = new XMLSerializer();
 
+const regex_field_agg = /(\w+)(?::(\w+)(?:\((\w+)\))?)?/;
+// valid SQL aggregation functions
+const VALID_AGGREGATE_FUNCTIONS = [
+    "array_agg",
+    "count",
+    "count_distinct",
+    "bool_and",
+    "bool_or",
+    "max",
+    "min",
+    "avg",
+    "sum",
+];
+
 // -----------------------------------------------------------------------------
 // Utils
 // -----------------------------------------------------------------------------
@@ -818,8 +832,11 @@ export class MockServer {
             );
         } else {
             kwargs.fields.forEach((field) => {
-                var split = field.split(":");
-                var fieldName = split[0];
+                const [, name, func, fname] = field.match(regex_field_agg);
+                const fieldName = func ? fname || name : name;
+                if (func && !VALID_AGGREGATE_FUNCTIONS.includes(func)) {
+                    throw new Error(`Invalid aggregation function ${func}.`);
+                }
                 if (!fields[fieldName]) {
                     return;
                 }
@@ -830,7 +847,7 @@ export class MockServer {
                 if (
                     fields[fieldName] &&
                     fields[fieldName].type === "many2one" &&
-                    split[1] !== "count_distinct"
+                    func !== "count_distinct"
                 ) {
                     return;
                 }
diff --git a/addons/web/static/tests/mock_server_tests.js b/addons/web/static/tests/mock_server_tests.js
index 9b0cdd10328..e0634083bd3 100644
--- a/addons/web/static/tests/mock_server_tests.js
+++ b/addons/web/static/tests/mock_server_tests.js
@@ -300,7 +300,7 @@ QUnit.module("MockServer", (hooks) => {
     });
 
     QUnit.test("performRPC: search_count with domain", async function (assert) {
-        data.models.partner.records.push({ id: 4, name: "José" })
+        data.models.partner.records.push({ id: 4, name: "José" });
         const server = new MockServer(data, {});
         const result = await server.performRPC("", {
             model: "partner",
@@ -770,6 +770,42 @@ QUnit.module("MockServer", (hooks) => {
         ]);
     });
 
+    QUnit.test(
+        "performRPC: read_group with special measure specifications",
+        async function (assert) {
+            data.models.bar.fields.float = { string: "Float", type: "float" };
+            data.models.bar.records[0].float = 2;
+            const server = new MockServer(data, {});
+            const result = await server.performRPC("", {
+                model: "bar",
+                method: "read_group",
+                args: [[]],
+                kwargs: {
+                    fields: ["float:sum", "foo_sum:sum(foo)"],
+                    domain: [],
+                    groupby: ["bool"],
+                    lazy: false,
+                },
+            });
+            assert.deepEqual(result, [
+                {
+                    __count: 2,
+                    __domain: [["bool", "=", false]],
+                    bool: false,
+                    float: 0,
+                    foo: 17,
+                },
+                {
+                    __count: 4,
+                    __domain: [["bool", "=", true]],
+                    bool: true,
+                    float: 2,
+                    foo: 57,
+                },
+            ]);
+        }
+    );
+
     QUnit.test("many2one_ref should auto fill inverse field", async function (assert) {
         data.models.bar.records = [{ id: 1 }];
         data.models.foo.records = [
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 7e1e5e5d4b9..cf97e4a68e2 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9586,4 +9586,37 @@ QUnit.module("Views", (hooks) => {
         assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
         assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
     });
+
+    QUnit.test("basic rendering with a date groupby with a granularity", async (assert) => {
+        serverData.models.partner.records[0].date = "2022-06-23";
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo" />
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["date:day"],
+            async mockRPC(route, args) {
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(args.kwargs.fields, ["foo", "date"]);
+                    assert.deepEqual(args.kwargs.groupby, ["date:day"]);
+                }
+                assert.step(args.method);
+            },
+        });
+
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.containsN(target, ".o_kanban_group", 2);
+        assert.containsN(target, ".o_kanban_group:first-child .o_kanban_record", 3);
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
+        assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
+    });
 });

From be8472c8510e3584b09628287e7d2830505bbfb4 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Fri, 24 Jun 2022 15:58:16 +0000
Subject: [PATCH 36/50] [FIX] kanban: click outside of a quick create record

When on click outside of a quick create record, one wants
    - to remove the quick create record if it is not dirty
    - not to remove it if it is dirty with some exceptions:
        if the click is on a "Create", "Load more" or "+" (quick add) button

This fix makes the external listener of KanbanRecordQuickCreate work as
expected.

Part-of: odoo/odoo#92475
---
 .../kanban/kanban_record_quick_create.js      |  20 +-
 .../static/tests/views/kanban_view_tests.js   | 178 ++++++++++++++++++
 2 files changed, 195 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_record_quick_create.js b/addons/web/static/src/views/kanban/kanban_record_quick_create.js
index fcb85a69d0d..2bf2d1912b4 100644
--- a/addons/web/static/src/views/kanban/kanban_record_quick_create.js
+++ b/addons/web/static/src/views/kanban/kanban_record_quick_create.js
@@ -5,6 +5,12 @@ import { FormRenderer } from "@web/views/form/form_renderer";
 
 const { Component, onMounted, useExternalListener, useState, useRef } = owl;
 
+const ACTION_SELECTORS = [
+    ".o_kanban_quick_add",
+    ".o_kanban_load_more button",
+    ".o-kanban-button-new",
+];
+
 export class KanbanRecordQuickCreate extends Component {
     setup() {
         this.uiService = useService("ui");
@@ -28,9 +34,17 @@ export class KanbanRecordQuickCreate extends Component {
                     return;
                 }
                 const target = this.mousedownTarget || ev.target;
-                const gotClickedInside = this.rootRef.el.contains(target);
-                if (!gotClickedInside) {
-                    this.cancel(false);
+                const gotClickedOutside = !this.rootRef.el.contains(target);
+                if (gotClickedOutside) {
+                    let force = false;
+                    for (const selector of ACTION_SELECTORS) {
+                        const closestEl = target.closest(selector);
+                        if (closestEl) {
+                            force = true;
+                            break;
+                        }
+                    }
+                    this.cancel(force);
                 }
                 this.mousedownTarget = null;
             },
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index cf97e4a68e2..e2532a37b86 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9619,4 +9619,182 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_record");
         assert.verifySteps(["get_views", "web_read_group", "web_search_read", "web_search_read"]);
     });
+
+    QUnit.test("quick create record and click outside (no dirty input)", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban limit="2">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["bar"],
+            createRecord: () => {
+                assert.step("create record");
+            },
+        });
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+
+        await click(target, ".o_control_panel");
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+
+        await quickCreateRecord(1);
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
+
+        await click(target, ".o_kanban_load_more button");
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+
+        assert.verifySteps([]);
+
+        await click(target, ".o-kanban-button-new");
+
+        assert.verifySteps(["create record"]);
+        assert.containsNone(target, ".o_kanban_quick_create");
+    });
+
+    QUnit.test("quick create record and click outside (with dirty input)", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban limit="2">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["bar"],
+            createRecord: () => {
+                assert.step("create record");
+            },
+        });
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+
+        await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
+
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
+            "ABC"
+        );
+
+        await click(target, ".o_control_panel");
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
+            "ABC"
+        );
+
+        await quickCreateRecord(1);
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
+            ""
+        );
+
+        await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
+
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
+            "ABC"
+        );
+
+        await click(target, ".o_kanban_load_more button");
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord();
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(1) .o_kanban_quick_create");
+
+        await editInput(target, ".o_kanban_quick_create [name=display_name] input", "ABC");
+
+        assert.strictEqual(
+            target.querySelector(".o_kanban_quick_create [name=display_name] input").value,
+            "ABC"
+        );
+        assert.verifySteps([]);
+
+        await click(target, ".o-kanban-button-new");
+
+        assert.verifySteps(["create record"]);
+        assert.containsNone(target, ".o_kanban_quick_create");
+    });
+
+    QUnit.test("quick create record and click on 'Load more'", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban limit="2">
+                    <field name="bar"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+            groupBy: ["bar"],
+        });
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+
+        await quickCreateRecord(1);
+
+        assert.containsOnce(target, ".o_kanban_quick_create");
+        assert.containsOnce(target, ".o_kanban_group:nth-child(2) .o_kanban_quick_create");
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 2);
+
+        await click(target, ".o_kanban_load_more button");
+        await nextTick();
+
+        assert.containsNone(target, ".o_kanban_quick_create");
+        assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
+    });
 });

From a7be88cd91ef86895218e7b72d5fed6c70b64069 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 27 Jun 2022 06:05:20 +0000
Subject: [PATCH 37/50] [REF] hr_contract, web: give tooltip info as
 t-call-context

Previously, we would use t-set to add the tooltip info under the key
"info" in the rendering context, while this works fine, it was mostly
just a workaround for the lack of support in owl for passing a rendering
context to be used by the t-call directly. Since this is now supported
in owl, the commit uses this feature for the tooltips and adapts the
call sites.

Part-of: odoo/odoo#92475
---
 .../static/src/xml/hr_contract_templates.xml  |  2 +-
 .../web/static/src/core/tooltip/tooltip.xml   |  4 +-
 .../static/src/views/fields/field_tooltip.xml | 60 +++++++++----------
 .../src/views/fields/image/image_field.xml    |  2 +-
 .../src/views/kanban/kanban_renderer.js       |  2 +-
 .../src/views/kanban/kanban_renderer.xml      |  2 +-
 .../src/views/view_button/view_button.xml     | 42 ++++++-------
 .../core/tooltip/tooltip_service_tests.js     |  6 +-
 .../static/tests/views/kanban_view_tests.js   |  2 +-
 9 files changed, 60 insertions(+), 62 deletions(-)

diff --git a/addons/hr_contract/static/src/xml/hr_contract_templates.xml b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
index c2c1eeb17f1..7f2f04aa538 100644
--- a/addons/hr_contract/static/src/xml/hr_contract_templates.xml
+++ b/addons/hr_contract/static/src/xml/hr_contract_templates.xml
@@ -3,7 +3,7 @@
     <t t-name="hr_contract.CalendarMismatch" owl="1">
         <div class="o-tooltip px-1 py-2">
             <p style="font-size: 12px;" class="text-danger"
-                t-esc="info.text"/>
+                t-esc="text"/>
         </div>
     </t>
 </templates>
diff --git a/addons/web/static/src/core/tooltip/tooltip.xml b/addons/web/static/src/core/tooltip/tooltip.xml
index f1c83547117..bff6a9f28c7 100644
--- a/addons/web/static/src/core/tooltip/tooltip.xml
+++ b/addons/web/static/src/core/tooltip/tooltip.xml
@@ -3,9 +3,7 @@
 
     <t t-name="web.Tooltip" owl="1">
         <div class="o-tooltip px-2 py-1">
-            <t t-if="props.template" t-call="{{props.template}}">
-                 <t t-set="info" t-value="props.info"/>
-            </t>
+            <t t-if="props.template" t-call="{{props.template}}" t-call-context="props.info"/>
             <small t-else="" t-esc="props.tooltip"/>
         </div>
     </t>
diff --git a/addons/web/static/src/views/fields/field_tooltip.xml b/addons/web/static/src/views/fields/field_tooltip.xml
index b6241b848da..89fc7fe0e9b 100644
--- a/addons/web/static/src/views/fields/field_tooltip.xml
+++ b/addons/web/static/src/views/fields/field_tooltip.xml
@@ -3,63 +3,63 @@
 
     <t t-name="web.FieldTooltip" owl="1">
 
-        <div t-if="info.field.label" class="o-tooltip--string" role="tooltip">
-            <t t-esc="info.field.label"/> <t t-if="info.field.noLabel and info.viewMode === 'form'">(nolabel)</t>
+        <div t-if="field.label" class="o-tooltip--string" role="tooltip">
+            <t t-esc="field.label"/> <t t-if="field.noLabel and viewMode === 'form'">(nolabel)</t>
         </div>
 
-        <p t-if="info.field.help" class="o-tooltip--help" role="tooltip">
-            <t t-esc="info.field.help"/>
+        <p t-if="field.help" class="o-tooltip--help" role="tooltip">
+            <t t-esc="field.help"/>
         </p>
 
-        <ul class="o-tooltip--technical" t-if="info.debug" role="tooltip">
-            <li data-item="field" t-if="info.field and info.field.name">
+        <ul class="o-tooltip--technical" t-if="debug" role="tooltip">
+            <li data-item="field" t-if="field and field.name">
                 <span class="o-tooltip--technical--title">Field:</span>
-                <t t-esc="info.field.name"/>
+                <t t-esc="field.name"/>
             </li>
-            <li data-item="object" t-if="info.resModel">
+            <li data-item="object" t-if="resModel">
                 <span class="o-tooltip--technical--title">Model:</span>
-                <t t-esc="info.resModel"/>
+                <t t-esc="resModel"/>
             </li>
-            <t t-if="info.field">
-                <li t-if="info.field.type" data-item="type" >
+            <t t-if="field">
+                <li t-if="field.type" data-item="type" >
                     <span class="o-tooltip--technical--title">Type:</span>
-                    <t t-esc="info.field.type"/>
+                    <t t-esc="field.type"/>
                 </li>
-                <li t-if="info.field.widget" data-item="widget">
+                <li t-if="field.widget" data-item="widget">
                     <span class="o-tooltip--technical--title">Widget:</span>
-                    <t t-if="info.field.widgetDescription" t-esc="info.field.widgetDescription"/>
-                    <t t-if="info.field.widgetDescription"> (</t>
-                    <t t-esc="info.field.widget"/>
-                    <t t-if="info.field.widgetDescription">)</t>
+                    <t t-if="field.widgetDescription" t-esc="field.widgetDescription"/>
+                    <t t-if="field.widgetDescription"> (</t>
+                    <t t-esc="field.widget"/>
+                    <t t-if="field.widgetDescription">)</t>
                 </li>
-                <li t-if="info.field.context" data-item="context">
+                <li t-if="field.context" data-item="context">
                     <span class="o-tooltip--technical--title">Context:</span>
-                    <t t-esc="info.field.context"/>
+                    <t t-esc="field.context"/>
                 </li>
-                <li t-if="info.field.domain" data-item="domain">
+                <li t-if="field.domain" data-item="domain">
                     <span class="o-tooltip--technical--title">Domain:</span>
-                    <t t-esc="info.field.domain"/>
+                    <t t-esc="field.domain"/>
                 </li>
-                <li t-if="info.field.modifiers" data-item="modifiers">
+                <li t-if="field.modifiers" data-item="modifiers">
                     <span class="o-tooltip--technical--title">Modifiers:</span>
-                    <t t-esc="info.field.modifiers"/>
+                    <t t-esc="field.modifiers"/>
                 </li>
-                <li t-if="info.field.default" data-item="default">
+                <li t-if="field.default" data-item="default">
                     <span class="o-tooltip--technical--title">Default:</span>
-                    <t t-esc="info.field.default"/>
+                    <t t-esc="field.default"/>
                 </li>
-                <li t-if="info.field.changeDefault" data-item="changeDefault">
+                <li t-if="field.changeDefault" data-item="changeDefault">
                     <span class="o-tooltip--technical--title">Change default:</span>
                     Yes
                 </li>
-                <li t-if="info.field.relation" data-item="relation">
+                <li t-if="field.relation" data-item="relation">
                     <span class="o-tooltip--technical--title">Relation:</span>
-                    <t t-esc="info.field.relation"/>
+                    <t t-esc="field.relation"/>
                 </li>
-                <li t-if="info.field.selection" data-item="selection">
+                <li t-if="field.selection" data-item="selection">
                     <span class="o-tooltip--technical--title">Selection:</span>
                     <ul class="o-tooltip--technical">
-                        <li t-foreach="info.field.selection" t-as="option" t-key="option_index">
+                        <li t-foreach="field.selection" t-as="option" t-key="option_index">
                             [<t t-esc="option[0]"/>]
                             <t t-if="option[1]"> - </t>
                             <t t-esc="option[1]"/>
diff --git a/addons/web/static/src/views/fields/image/image_field.xml b/addons/web/static/src/views/fields/image/image_field.xml
index 8f6d149e115..9b2bc4bd90a 100644
--- a/addons/web/static/src/views/fields/image/image_field.xml
+++ b/addons/web/static/src/views/fields/image/image_field.xml
@@ -46,7 +46,7 @@
 
     <t t-name="web.ImageZoomTooltip" owl="1">
         <div class="o_image_zoom">
-            <img t-att-src="info.url" />
+            <img t-att-src="url" />
         </div>
     </t>
 
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.js b/addons/web/static/src/views/kanban/kanban_renderer.js
index ee8b58c2b49..4543be3ecdb 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.js
+++ b/addons/web/static/src/views/kanban/kanban_renderer.js
@@ -543,7 +543,7 @@ export class KanbanRenderer extends Component {
         }
         return {
             "data-tooltip-template": "web.KanbanGroupTooltip",
-            "data-tooltip-info": JSON.stringify(group.tooltip),
+            "data-tooltip-info": JSON.stringify({ entries: group.tooltip }),
         };
     }
 }
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index 29d146f867a..35a53c5cae3 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -184,7 +184,7 @@
 
     <t t-name="web.KanbanGroupTooltip" owl="1">
         <div>
-            <t t-foreach="info" t-as="entry" t-key="entry_index">
+            <t t-foreach="entries" t-as="entry" t-key="entry_index">
                 <t t-esc="entry.title"/>
                 <br/>
                 <t t-esc="entry.value"/>
diff --git a/addons/web/static/src/views/view_button/view_button.xml b/addons/web/static/src/views/view_button/view_button.xml
index 04178d1346c..536bd6450dc 100644
--- a/addons/web/static/src/views/view_button/view_button.xml
+++ b/addons/web/static/src/views/view_button/view_button.xml
@@ -22,50 +22,50 @@
   </t>
 
   <t t-name="views.ViewButtonTooltip" owl="1">
-      <t t-if="info.debug || info.button.help">
-        <div class="o-tooltip--string" t-if="info.debug || info.button.string" role="tooltip">
-            <t t-if="info.debug">
+      <t t-if="debug || button.help">
+        <div class="o-tooltip--string" t-if="debug || button.string" role="tooltip">
+            <t t-if="debug">
                 Button
-                <t t-if="info.button.string">: </t>
-                <t t-if="!info.button.string"> (no string)</t>
+                <t t-if="button.string">: </t>
+                <t t-if="!button.string"> (no string)</t>
             </t>
-            <t t-esc="info.button.string"/>
+            <t t-esc="button.string"/>
         </div>
-        <p t-if="info.button.title" class="o-tooltip--help" role="tooltip">
-            <t t-esc="info.button.title"/>
+        <p t-if="button.title" class="o-tooltip--help" role="tooltip">
+            <t t-esc="button.title"/>
         </p>
-        <p t-if="info.button.help" class="o-tooltip--help" role="tooltip">
-            <t t-esc="info.button.help"/>
+        <p t-if="button.help" class="o-tooltip--help" role="tooltip">
+            <t t-esc="button.help"/>
         </p>
-        <ul t-if="info.debug" class="o-tooltip--technical" role="tooltip">
+        <ul t-if="debug" class="o-tooltip--technical" role="tooltip">
             <li data-item="object">
                 <span class="o-tooltip--technical--title">Object:</span>
-                <t t-esc="info.model"/>
+                <t t-esc="model"/>
             </li>
-            <li t-if="info.button.context" data-item="context">
+            <li t-if="button.context" data-item="context">
                 <span class="o-tooltip--technical--title">Context:</span>
-                <t t-esc="info.button.context || info.context"/>
+                <t t-esc="button.context || context"/>
             </li>
-            <li t-if="info.button.modifiers" data-item="modifiers">
+            <li t-if="button.modifiers" data-item="modifiers">
                 <span class="o-tooltip--technical--title">Modifiers:</span>
-                <t t-esc="info.button.modifiers"/>
+                <t t-esc="button.modifiers"/>
             </li>
-            <li t-if="info.button.special" data-item="special">
+            <li t-if="button.special" data-item="special">
                 <span class="o-tooltip--technical--title">Special:</span>
-                <t t-esc="info.button.special"/>
+                <t t-esc="button.special"/>
             </li>
-            <t t-set="button_type" t-value="info.button.type"/>
+            <t t-set="button_type" t-value="button.type"/>
             <li t-if="button_type" data-item="button_type">
                 <span class="o-tooltip--technical--title">Button Type:</span>
                 <t t-esc="button_type"/>
             </li>
             <li t-if="button_type === 'object'" data-item="button_method">
                 <span class="o-tooltip--technical--title">Method:</span>
-                <t t-esc="info.button.name"/>
+                <t t-esc="button.name"/>
             </li>
             <li t-if="button_type === 'action'" data-item="button_action">
                 <span class="o-tooltip--technical--title">Action ID:</span>
-                <t t-esc="info.button.name"/>
+                <t t-esc="button.name"/>
             </li>
         </ul>
       </t>
diff --git a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
index 247ce04c321..d8a3e47cac5 100644
--- a/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
+++ b/addons/web/static/tests/core/tooltip/tooltip_service_tests.js
@@ -151,7 +151,7 @@ QUnit.module("Tooltip service", (hooks) => {
         await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
 
         assert.containsNone(target, ".o_popover_container .o_popover");
-        let [outerSpan, innerSpan] = target.querySelectorAll("span.our_span");
+        const [outerSpan, innerSpan] = target.querySelectorAll("span.our_span");
         outerSpan.dispatchEvent(new Event("mouseenter"));
         innerSpan.dispatchEvent(new Event("mouseenter"));
         await nextTick();
@@ -327,8 +327,8 @@ QUnit.module("Tooltip service", (hooks) => {
         const templates = {
             my_tooltip_template: `
                 <ul>
-                    <li>X: <t t-esc="info.x"/></li>
-                    <li>Y: <t t-esc="info.y"/></li>
+                    <li>X: <t t-esc="x"/></li>
+                    <li>Y: <t t-esc="y"/></li>
                 </ul>
             `,
         };
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index e2532a37b86..662f719bdd8 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -7042,7 +7042,7 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(
             target.querySelector(".o_kanban_group:nth-child(2) .o_kanban_header_title").dataset
                 .tooltipInfo,
-            `[{"title":"Kikou","value":"hello"}]`,
+            `{"entries":[{"title":"Kikou","value":"hello"}]}`,
             "second column should have a tooltip with the group_by_tooltip title and many2one field value"
         );
         assert.strictEqual(

From 0e6481f359e2e4dd4f5b5147a1754bb3cca57311 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Mon, 27 Jun 2022 08:18:10 +0000
Subject: [PATCH 38/50] [FIX] web: add support for kanban-tooltip in kanban
 arch

This commit re-adds support for the kanban-tooltip template in kanban
view arch, to do this, it also refactors the tooltip service to give it
a programmatic API, so that we are not constrained to only giving
tooltip info in serialized form, but can instead give the same context
to the tooltip template as to the kanban record's template.

One current limitation is that components that are available in the
kanban record cannot be used in the tooltip, as these are mostly used
for interactive content and one cannot interact with the contents of the
tooltip, we have decided to not work around this issue until needed.

Part-of: odoo/odoo#92475
---
 .../static/src/core/tooltip/tooltip_hook.js   | 14 +++
 .../src/core/tooltip/tooltip_service.js       | 86 +++++++++++++------
 .../src/views/kanban/kanban_arch_parser.js    |  1 +
 .../src/views/kanban/kanban_compiler.js       | 13 ++-
 .../static/src/views/kanban/kanban_record.js  | 23 ++++-
 .../static/tests/views/kanban_view_tests.js   | 69 +++++++++++++++
 6 files changed, 175 insertions(+), 31 deletions(-)
 create mode 100644 addons/web/static/src/core/tooltip/tooltip_hook.js

diff --git a/addons/web/static/src/core/tooltip/tooltip_hook.js b/addons/web/static/src/core/tooltip/tooltip_hook.js
new file mode 100644
index 00000000000..25618a21664
--- /dev/null
+++ b/addons/web/static/src/core/tooltip/tooltip_hook.js
@@ -0,0 +1,14 @@
+/** @odoo-module */
+
+import { useService } from "@web/core/utils/hooks";
+
+const { useEffect, useRef } = owl;
+
+export function useTooltip(refName, params) {
+    const tooltip = useService("tooltip");
+    const ref = useRef(refName);
+    useEffect(
+        (el) => tooltip.add(el, params),
+        () => [ref.el]
+    );
+}
diff --git a/addons/web/static/src/core/tooltip/tooltip_service.js b/addons/web/static/src/core/tooltip/tooltip_service.js
index 1aa80452a63..90ca17af804 100644
--- a/addons/web/static/src/core/tooltip/tooltip_service.js
+++ b/addons/web/static/src/core/tooltip/tooltip_service.js
@@ -47,6 +47,7 @@ export const tooltipService = {
         let target = null;
         let positionX;
         let positionY;
+        const elementsWithTooltips = new Map();
 
         /**
          * Closes the currently opened tooltip if any, or prevent it from opening.
@@ -64,10 +65,10 @@ export const tooltipService = {
          */
         function shouldCleanup() {
             if (!target) {
-                return;
+                return false;
             }
             if (!document.body.contains(target)) {
-                return cleanup(); // target is no longer in the DOM
+                return true; // target is no longer in the DOM
             }
             const targetRect = target.getBoundingClientRect();
             if (
@@ -82,42 +83,32 @@ export const tooltipService = {
         }
 
         /**
-         * Opens the tooltip after a delay, if the event's target has a data-tooltip
-         * attribute.
+         * Checks whether there is a tooltip registered on the event target, and
+         * if there is, creates a timeout to open the corresponding tooltip
+         * after a delay.
          *
-         * @param {MouseEvent} ev a "mouseenter" event
+         * @param {HTMLElement} el the element on which to add the tooltip
+         * @param {object} param1
+         * @param {string} [param1.tooltip] the string to add as a tooltip, if
+         *  no tooltip template is specified
+         * @param {string} [param1.template] the name of the template to use for
+         *  tooltip, if any
+         * @param {object} [param1.info] info for the tooltip template
+         * @param {'top'|'bottom'|'left'|'right'} param1.position
+         * @param {number} [param1.delay] delay after which the popover should
+         *  open
          */
-        function onMouseenter(ev) {
-            let el = ev.target;
-            if (!el.matches("[data-tooltip], [data-tooltip-template]")) {
-                return;
-            }
+        function openTooltip(el, { tooltip = "", template, info, position, delay = OPEN_DELAY }) {
             target = el;
-            const dataset = el.dataset;
-            const tooltip = dataset.tooltip;
-            let template, info;
-            if ("tooltipTemplate" in dataset) {
-                template = dataset.tooltipTemplate;
-                info = dataset.tooltipInfo ? JSON.parse(dataset.tooltipInfo) : null;
-            }
             cleanup();
-            if (tooltip === "" && !template) {
+            if (!tooltip && !template) {
                 return;
             }
 
-            // register mouse position first in case the target
-            // contains disabled elements which would prevent
-            // to track mousemove. The position is needed to check
-            // whether the element is hovered or not
-            positionX = ev.x;
-            positionY = ev.y;
-
-            const delay = dataset.tooltipDelay ? JSON.parse(dataset.tooltipDelay) : OPEN_DELAY;
             openTooltipTimeout = browser.setTimeout(() => {
                 if (shouldCleanup()) {
                     cleanup();
                 } else {
-                    const position = dataset.tooltipPosition;
                     closeTooltip = popover.add(
                         target,
                         Tooltip,
@@ -128,6 +119,35 @@ export const tooltipService = {
             }, delay);
         }
 
+        /**
+         * Checks whether there is a tooltip registered on the event target, and
+         * if there is, creates a timeout to open the corresponding tooltip
+         * after a delay.
+         *
+         * @param {MouseEvent} ev a "mouseenter" event
+         */
+        function onMouseenter(ev) {
+            // set mouse position in case the target contains disabled elements which won't trigger mousemove
+            positionX = ev.x;
+            positionY = ev.y;
+            /** @type {HTMLElement} */
+            const el = ev.target;
+            if (elementsWithTooltips.has(el)) {
+                openTooltip(el, elementsWithTooltips.get(el));
+            } else if (el.matches("[data-tooltip], [data-tooltip-template]")) {
+                const {
+                    tooltip,
+                    tooltipInfo,
+                    tooltipDelay,
+                    tooltipTemplate: template,
+                    tooltipPosition: position,
+                } = el.dataset;
+                const delay = parseInt(tooltipDelay);
+                const info = tooltipInfo ? JSON.parse(tooltipInfo) : null;
+                openTooltip(el, { tooltip, template, delay, info, position });
+            }
+        }
+
         whenReady(() => {
             // Regularly check that the target is still in the DOM and we're still
             // hovering it, because if not, we have to close the tooltipd
@@ -148,6 +168,18 @@ export const tooltipService = {
             // the "data-tooltip" or "data-tooltip-template" attribute, to open the tooltip.
             document.body.addEventListener("mouseenter", onMouseenter, { capture: true });
         });
+
+        return {
+            add(el, params) {
+                elementsWithTooltips.set(el, params);
+                return () => {
+                    elementsWithTooltips.delete(el);
+                    if (target === el) {
+                        cleanup();
+                    }
+                };
+            },
+        };
     },
 };
 
diff --git a/addons/web/static/src/views/kanban/kanban_arch_parser.js b/addons/web/static/src/views/kanban/kanban_arch_parser.js
index b92ddb15eff..4d8fe0ec24d 100644
--- a/addons/web/static/src/views/kanban/kanban_arch_parser.js
+++ b/addons/web/static/src/views/kanban/kanban_arch_parser.js
@@ -20,6 +20,7 @@ import { Widget } from "@web/views/widgets/widget";
  */
 
 export const KANBAN_BOX_ATTRIBUTE = "kanban-box";
+export const KANBAN_TOOLTIP_ATTRIBUTE = "kanban-tooltip";
 
 export class KanbanArchParser extends XMLParser {
     parse(arch, models, modelName) {
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index b405cf83a44..df19bc174f7 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -9,7 +9,7 @@ import {
 } from "@web/core/utils/xml";
 import { toStringExpression } from "@web/views/utils";
 import { isTextNode, ViewCompiler } from "@web/views/view_compiler";
-import { KANBAN_BOX_ATTRIBUTE } from "./kanban_arch_parser";
+import { KANBAN_BOX_ATTRIBUTE, KANBAN_TOOLTIP_ATTRIBUTE } from "./kanban_arch_parser";
 
 const INTERP_REGEXP = /\{\{.*?\}\}|#\{.*?\}/g;
 
@@ -135,11 +135,22 @@ export class KanbanCompiler extends ViewCompiler {
             .flat(Infinity)
             .filter((card) => card && !isTextNode(card));
 
+        // Add a root ref if we need to use it to add tooltips on the cards
+        // This means that multi-root kanban-box templates cannot have tooltips
+        // WOWL FIXME: always define ref post merge and expose whether the kanban
+        // is grouped or not so that kanban-box can use t-if t-else to avoid
+        // multi-root scenarios in "kanban list" templates.
+        const shouldDefineRef =
+            el.ownerDocument.querySelector(`[t-name='${KANBAN_TOOLTIP_ATTRIBUTE}']`) !== null;
+
         for (const card of cards) {
             card.setAttribute("t-att-tabindex", `props.record.model.useSampleModel?-1:0`);
             card.setAttribute("role", `article`);
             card.setAttribute("t-att-data-id", `props.canResequence and props.record.id`);
             card.setAttribute("t-on-click", `onGlobalClick`);
+            if (shouldDefineRef) {
+                card.setAttribute("t-ref", "root");
+            }
 
             combineAttributes(card, "t-att-class", "getRecordClasses()", "+' '+");
         }
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index 02c6363a147..a2bfeede376 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -13,7 +13,8 @@ import { fileTypeMagicWordMap } from "@web/views/fields/image/image_field";
 import { ViewButton } from "@web/views/view_button/view_button";
 import { evalDomainFromRecord, useViewCompiler } from "@web/views/view_compiler";
 import { Widget } from "@web/views/widgets/widget";
-import { KANBAN_BOX_ATTRIBUTE } from "./kanban_arch_parser";
+import { useTooltip } from "@web/core/tooltip/tooltip_hook";
+import { KANBAN_BOX_ATTRIBUTE, KANBAN_TOOLTIP_ATTRIBUTE } from "./kanban_arch_parser";
 import { KanbanCompiler } from "./kanban_compiler";
 import { KanbanCoverImageDialog } from "./kanban_cover_image_dialog";
 
@@ -158,10 +159,12 @@ export class KanbanRecord extends Component {
         const ViewCompiler = Compiler || KanbanCompiler;
 
         const subTemplateKeys = {};
-        let cardTemplate;
+        let cardTemplate, tooltipTemplate;
         for (const tname in templates) {
             if (tname === KANBAN_BOX_ATTRIBUTE) {
                 cardTemplate = templates[tname];
+            } else if (tname === KANBAN_TOOLTIP_ATTRIBUTE) {
+                tooltipTemplate = templates[tname];
             } else {
                 subTemplateKeys[tname] = useViewCompiler(
                     ViewCompiler,
@@ -171,9 +174,23 @@ export class KanbanRecord extends Component {
                 );
             }
         }
-        this.templateId = useViewCompiler(ViewCompiler, arch, cardTemplate, {
+        this.templateId = useViewCompiler(ViewCompiler, arch + KANBAN_BOX_ATTRIBUTE, cardTemplate, {
             subTemplateKeys,
         });
+        if (tooltipTemplate) {
+            const compiled = useViewCompiler(
+                ViewCompiler,
+                arch + KANBAN_TOOLTIP_ATTRIBUTE,
+                tooltipTemplate,
+                {
+                    subTemplateKeys,
+                }
+            );
+            useTooltip("root", {
+                info: this,
+                template: compiled,
+            });
+        }
 
         this.createRecordAndWidget(this.props);
         onWillUpdateProps(this.createRecordAndWidget);
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 662f719bdd8..f9cda0dbcb0 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -24,6 +24,7 @@ import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
 import { browser } from "@web/core/browser/browser";
 import { dialogService } from "@web/core/dialog/dialog_service";
+import { tooltipService } from "@web/core/tooltip/tooltip_service";
 import { makeErrorFromResponse } from "@web/core/network/rpc_service";
 import { registry } from "@web/core/registry";
 import { nbsp } from "@web/core/utils/strings";
@@ -834,6 +835,74 @@ QUnit.module("Views", (hooks) => {
         ]);
     });
 
+    QUnit.test("kanban with kanban-tooltip template", async (assert) => {
+        serviceRegistry.add("tooltip", tooltipService);
+        let simulateTimeout;
+        let simulateInterval;
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => {
+                simulateTimeout = fn;
+            },
+            setInterval: (fn) => {
+                simulateInterval = fn;
+            },
+        });
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-tooltip">
+                            <ul class="oe_kanban_tooltip">
+                                <li><t t-esc="record.foo.value" /></li>
+                            </ul>
+                        </t>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>`,
+        });
+
+        assert.deepEqual(
+            getNodesTextContent(target.querySelectorAll(".o_kanban_record:not(.o_kanban_ghost)")),
+            ["yop", "blip", "gnap", "blip"]
+        );
+
+        assert.containsNone(target, ".o_popover_container .o_popover");
+        target.querySelector(".o_kanban_record").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsNone(target, ".o_popover_container .o_popover");
+
+        simulateTimeout();
+        await nextTick();
+        assert.containsOnce(target, ".o_popover_container .o_popover");
+        assert.strictEqual(
+            target.querySelector(".o_popover_container .o_popover").innerText,
+            "yop"
+        );
+
+        const recordRect = target.querySelector(".o_kanban_record").getBoundingClientRect();
+        const x = recordRect.right + 10;
+        const y = recordRect.bottom + 10;
+        await triggerEvent(target.querySelector(".o_kanban_record"), null, "mousemove", {
+            pageX: x,
+            layerX: x,
+            screenX: x,
+            pageY: y,
+            layerY: y,
+            screenY: y,
+        });
+        assert.containsOnce(target, ".o_popover_container .o_popover");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(target, ".o_popover_container .o_popover");
+    });
+
     QUnit.test("pager should be hidden in grouped mode", async (assert) => {
         await makeView({
             type: "kanban",

From 7e86933d94fbbfbaea57742abbbcf6409a39c357 Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Mon, 27 Jun 2022 10:05:38 +0000
Subject: [PATCH 39/50] [FIX] web: evaluate string domain in modifiers

Before this commit, in `getModifier` method when a modifier contains a
domain in a string, the domain is not evaluated and just converted into
a boolean value that is if the string is not empty then the method will
return `true` and `false` otherwise.
Also, the `applyInvisible` method does not take into account an invisible
domain in a string. That is if the `invisible` variable contains a domain
in an `Array` then  the domain is evaluated otherwise the domain is
considered as a boolean value.

This commit checks if the modifier contains a boolean value as value to
evaluate it as a boolean and return it otherwise the modifier value is
returned in the `getModifier` method.
In the `applyInvisible`, this commit allows to evaluate the domain if
the domain is containing in a string.

Part-of: odoo/odoo#92475
Co-authored-by: Xavier BOL (xbo) <xbo@odoo.com>
---
 .../static/src/views/form/form_renderer.js    |  7 ++--
 .../static/src/views/kanban/kanban_record.js  |  7 ++--
 addons/web/static/src/views/utils.js          |  2 +-
 addons/web/static/src/views/view_compiler.js  | 15 +------
 .../tests/views/form/form_compiler_tests.js   | 41 ++++++++++++++++++-
 5 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/addons/web/static/src/views/form/form_renderer.js b/addons/web/static/src/views/form/form_renderer.js
index b60176448cb..cf6a769efb2 100644
--- a/addons/web/static/src/views/form/form_renderer.js
+++ b/addons/web/static/src/views/form/form_renderer.js
@@ -5,9 +5,10 @@ import { Field } from "@web/views/fields/field";
 import { ButtonBox } from "@web/views/form/button_box/button_box";
 import { InnerGroup, OuterGroup } from "@web/views/form/form_group/form_group";
 import { ViewButton } from "@web/views/view_button/view_button";
-import { evalDomainFromRecord, useViewCompiler } from "@web/views/view_compiler";
+import { useViewCompiler } from "@web/views/view_compiler";
 import { useBounceButton } from "@web/views/view_hook";
 import { Widget } from "@web/views/widgets/widget";
+import { evalDomain } from "../utils";
 import { FormCompiler } from "./form_compiler";
 import { FormLabel } from "./form_label";
 import { StatusBarButtons } from "./status_bar_buttons/status_bar_buttons";
@@ -25,8 +26,8 @@ export class FormRenderer extends Component {
         });
     }
 
-    evalDomainFromRecord() {
-        return evalDomainFromRecord(...arguments);
+    evalDomainFromRecord(record, expr) {
+        return evalDomain(expr, record.evalContext);
     }
 }
 
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index a2bfeede376..b741369e4a5 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -11,9 +11,10 @@ import { url } from "@web/core/utils/urls";
 import { Field } from "@web/views/fields/field";
 import { fileTypeMagicWordMap } from "@web/views/fields/image/image_field";
 import { ViewButton } from "@web/views/view_button/view_button";
-import { evalDomainFromRecord, useViewCompiler } from "@web/views/view_compiler";
+import { useViewCompiler } from "@web/views/view_compiler";
 import { Widget } from "@web/views/widgets/widget";
 import { useTooltip } from "@web/core/tooltip/tooltip_hook";
+import { evalDomain } from "../utils";
 import { KANBAN_BOX_ATTRIBUTE, KANBAN_TOOLTIP_ATTRIBUTE } from "./kanban_arch_parser";
 import { KanbanCompiler } from "./kanban_compiler";
 import { KanbanCoverImageDialog } from "./kanban_cover_image_dialog";
@@ -228,8 +229,8 @@ export class KanbanRecord extends Component {
         };
     }
 
-    evalDomainFromRecord() {
-        return evalDomainFromRecord(...arguments);
+    evalDomainFromRecord(record, expr) {
+        return evalDomain(expr, record.evalContext);
     }
 
     getRecordClasses() {
diff --git a/addons/web/static/src/views/utils.js b/addons/web/static/src/views/utils.js
index 74c0a7efb1a..88b5bff104c 100644
--- a/addons/web/static/src/views/utils.js
+++ b/addons/web/static/src/views/utils.js
@@ -89,7 +89,7 @@ export const computeReportMeasures = (
  * @returns {boolean}
  */
 export function evalDomain(modifier, evalContext) {
-    if (Array.isArray(modifier)) {
+    if (modifier && typeof modifier !== "boolean") {
         modifier = new Domain(modifier).contains(evalContext);
     }
     return Boolean(modifier);
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index fa41b3ea459..5d13c7ebe99 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -1,6 +1,5 @@
 /** @odoo-module **/
 
-import { Domain } from "@web/core/domain";
 import {
     append,
     combineAttributes,
@@ -142,10 +141,6 @@ export function encodeObjectForTemplate(obj) {
     return `"${encodeURI(JSON.stringify(obj))}"`;
 }
 
-export function evalDomainFromRecord(record, expr) {
-    return new Domain(expr).contains(record.evalContext);
-}
-
 /**
  * @param {Element} el
  * @param {string} modifierName
@@ -156,7 +151,7 @@ export function getModifier(el, modifierName) {
     // modifiers' string are evaluated to their boolean or array form
     const modifiers = JSON.parse(el.getAttribute("modifiers") || "{}");
     const mod = modifierName in modifiers ? modifiers[modifierName] : false;
-    return Array.isArray(mod) ? mod : !!mod;
+    return typeof mod !== "boolean" ? mod : !!mod;
 }
 
 /**
@@ -251,13 +246,7 @@ export class ViewCompiler {
                 " and "
             );
         } else {
-            let expr;
-            if (Array.isArray(invisible)) {
-                expr = `evalDomainFromRecord(props.record,${JSON.stringify(invisible)})`;
-            } else {
-                expr = invisible;
-            }
-            appendAttr(compiled, "class", `o_invisible_modifier:${expr}`);
+            appendAttr(compiled, "class", `o_invisible_modifier:${invisible}`);
         }
         return compiled;
     }
diff --git a/addons/web/static/tests/views/form/form_compiler_tests.js b/addons/web/static/tests/views/form/form_compiler_tests.js
index 5e5a3287cfc..89023e91967 100644
--- a/addons/web/static/tests/views/form/form_compiler_tests.js
+++ b/addons/web/static/tests/views/form/form_compiler_tests.js
@@ -3,6 +3,7 @@ import { makeView } from "../helpers";
 import { setupViewRegistries } from "@web/../tests/views/helpers";
 import { FormCompiler } from "@web/views/form/form_compiler";
 import { registry } from "@web/core/registry";
+import { click, getFixture } from "../../helpers/utils";
 
 function compileTemplate(arch) {
     const parser = new DOMParser();
@@ -141,12 +142,28 @@ QUnit.module("Form Compiler", () => {
 
         assert.areContentEquivalent(compileTemplate(arch), expected);
     });
+
+    QUnit.test("compile invisible containing string as domain", async (assert) => {
+        const arch = /*xml*/ `
+            <form>
+                <field name="display_name" modifiers="{&quot;invisible&quot;: true}" />
+                <div class="visible3" modifiers="{&quot;invisible&quot;: false}"/>
+                <div modifiers="{&quot;invisible&quot;: &quot;[['display_name', '=', 'take']]&quot;}"/>
+            </form>`;
+
+        const expected = /*xml*/ `
+            <div class="visible3" />
+            <div t-if="!evalDomainFromRecord(props.record,&quot;[['display_name','=','take']]&quot;)" />
+        `;
+        assert.areContentEquivalent(compileTemplate(arch), expected);
+    });
 });
 
 QUnit.module("Form Renderer", (hooks) => {
-    let serverData;
+    let target, serverData;
 
     hooks.beforeEach(() => {
+        target = getFixture();
         setupViewRegistries();
         serverData = {
             models: {
@@ -163,6 +180,28 @@ QUnit.module("Form Renderer", (hooks) => {
         };
     });
 
+    QUnit.test("compile form with modifiers and attrs - string as domain", async (assert) => {
+        serverData.views = {
+            "partner,1,form": /*xml*/ `
+                <form>
+                    <div modifiers="{&quot;invisible&quot;: &quot;[['display_name', '=', uid]]&quot;}">
+                        <field name="charfield"/>
+                    </div>
+                    <field name="display_name" attrs="{'readonly': &quot;[['display_name', '=', uid]]&quot;}"/>
+                </form>`,
+        };
+
+        await makeView({
+            serverData,
+            resModel: "partner",
+            type: "form",
+            resId: 1,
+        });
+
+        await click(target.querySelector(".o_form_button_edit"));
+        assert.containsN(target, ".o_form_editable input", 2);
+    });
+
     QUnit.test("compile notebook with modifiers", async (assert) => {
         assert.expect(0);
 

From 0196c052f17742b4a3fcae6a1fc41d56a9e9e426 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Tue, 28 Jun 2022 06:22:57 +0000
Subject: [PATCH 40/50] [FIX] mail: check existence of record in
 FollowerListMenu

This commit fixes a race condition that makes several tours crash.
The reason is that the underlying record is removed from the model
which produces a re-rendering. At the end of that re-rendering,
a component is unmounted. At that point, we remove an handler
relying on the existence of the record. As a consequence, there
was a short time window during which the handler would crash if it
was called.

Part-of: odoo/odoo#92475
---
 .../src/components/follower_list_menu/follower_list_menu.js    | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
index b68c9a44c8f..e19ae239544 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
@@ -57,6 +57,9 @@ export class FollowerListMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickCaptureGlobal(ev) {
+        if (!this.followerListMenuView.exists()) {
+            return;
+        }
         // since dropdown is conditionally shown based on state, dropdownRef can be null
         if (this._dropdownRef.el && !this._dropdownRef.el.contains(ev.target)) {
             this.followerListMenuView.hide();

From 38710465a903c71e6ae6d701604520a39818260a Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 28 Jun 2022 10:35:53 +0000
Subject: [PATCH 41/50] [IMP] web: Update to FileInput API

This commit changes the prop names of the FileInput component to bring
them in line with the current naming conventions. Also the default
route has been changed from '/web/binary/upload' to
'/web/binary/upload_attachment' since the latter is used more often.

Part-of: odoo/odoo#92475
---
 .../static/src/core/file_input/file_input.js  | 61 +++++++++--------
 .../static/src/core/file_input/file_input.xml | 11 ++--
 .../web/static/tests/core/file_input_tests.js | 66 ++++++++++---------
 3 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/addons/web/static/src/core/file_input/file_input.js b/addons/web/static/src/core/file_input/file_input.js
index 70cb4d29489..522968920a0 100644
--- a/addons/web/static/src/core/file_input/file_input.js
+++ b/addons/web/static/src/core/file_input/file_input.js
@@ -2,7 +2,7 @@
 
 import { useService } from "@web/core/utils/hooks";
 
-const { Component, useRef } = owl;
+const { Component, onMounted, useRef } = owl;
 
 /**
  * Custom file input
@@ -13,19 +13,25 @@ const { Component, useRef } = owl;
  * @extends Component
  *
  * Props:
- * @param {string} [props.accepted_file_extensions='*'] Comma-separated
+ * @param {string} [props.acceptedFileExtensions='*'] Comma-separated
  *      list of authorized file extensions (default to all).
- * @param {string} [props.action='/web/binary/upload'] Route called when
+ * @param {string} [props.route='/web/binary/upload'] Route called when
  *      a file is uploaded in the input.
- * @param {string} [props.id]
- * @param {string} [props.model]
- * @param {string} [props.multi_upload=false] Whether the input should allow
+ * @param {string} [props.resId]
+ * @param {string} [props.resModel]
+ * @param {string} [props.multiUpload=false] Whether the input should allow
  *      to upload multiple files at once.
  */
 export class FileInput extends Component {
     setup() {
         this.http = useService("http");
         this.fileInputRef = useRef("file-input");
+
+        onMounted(() => {
+            if (this.props.autoOpen) {
+                this.onTriggerClicked();
+            }
+        });
     }
 
     //--------------------------------------------------------------------------
@@ -33,26 +39,25 @@ export class FileInput extends Component {
     //--------------------------------------------------------------------------
 
     /**
-     * Upload an attachment to the given action with the given parameters:
+     * Upload an attachment to the given route with the given parameters:
      * - ufile: list of files contained in the file input
      * - csrf_token: CSRF token provided by the odoo global object
-     * - model: a specific model which will be given when creating the attachment
-     * - id: the id of the model target instance
-     * @private
+     * - resModel: a specific model which will be given when creating the attachment
+     * - resId: the id of the resModel target instance
      */
     async onFileInputChange() {
-        const { action, model, id } = this.props;
+        const { resId, resModel, route } = this.props;
         const params = {
             csrf_token: odoo.csrf_token,
             ufile: [...this.fileInputRef.el.files],
         };
-        if (model) {
-            params.model = model;
+        if (resModel) {
+            params.model = resModel;
         }
-        if (id) {
-            params.id = id;
+        if (resId) {
+            params.id = resId;
         }
-        const fileData = await this.http.post(action, params, "text");
+        const fileData = await this.http.post(route, params, "text");
         const parsedFileData = JSON.parse(fileData);
         if (parsedFileData.error) {
             throw new Error(parsedFileData.error);
@@ -62,7 +67,6 @@ export class FileInput extends Component {
 
     /**
      * Redirect clicks from the trigger element to the input.
-     * @private
      */
     onTriggerClicked() {
         this.fileInputRef.el.click();
@@ -70,18 +74,21 @@ export class FileInput extends Component {
 }
 
 FileInput.defaultProps = {
-    accepted_file_extensions: "*",
-    action: "/web/binary/upload",
-    multi_upload: false,
+    acceptedFileExtensions: "*",
+    hidden: false,
+    multiUpload: false,
     onUpload: () => {},
+    route: "/web/binary/upload_attachment",
 };
 FileInput.props = {
-    accepted_file_extensions: { type: String, optional: 1 },
-    action: { type: String, optional: 1 },
-    id: { type: Number, optional: 1 },
-    model: { type: String, optional: 1 },
-    multi_upload: { type: Boolean, optional: 1 },
-    onUpload: { type: Function, optional: 1 },
-    slots: { type: Object, optional: 1 },
+    acceptedFileExtensions: { type: String, optional: true },
+    autoOpen: { type: Boolean, optional: true },
+    hidden: { type: Boolean, optional: true },
+    multiUpload: { type: Boolean, optional: true },
+    onUpload: { type: Function, optional: true },
+    resId: { type: Number, optional: true },
+    resModel: { type: String, optional: true },
+    route: { type: String, optional: true },
+    "*": true,
 };
 FileInput.template = "web.FileInput";
diff --git a/addons/web/static/src/core/file_input/file_input.xml b/addons/web/static/src/core/file_input/file_input.xml
index cb94c5d790d..e8322906704 100644
--- a/addons/web/static/src/core/file_input/file_input.xml
+++ b/addons/web/static/src/core/file_input/file_input.xml
@@ -2,14 +2,17 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FileInput" owl="1">
-        <span class="o_file_input" aria-atomic="true">
-            <span class="o_file_input_trigger" t-on-click.prevent="onTriggerClicked">
+        <span class="o_file_input" t-att-class="{ 'd-none': props.hidden }" aria-atomic="true">
+            <span t-if="!props.hidden" class="o_file_input_trigger" t-on-click.prevent="onTriggerClicked">
                 <t t-slot="default">
                     <button class="btn btn-primary">Choose File</button>
                 </t>
             </span>
-            <input type="file" name="ufile" class="o_input_file d-none"
-                t-att-multiple="props.multi_upload" t-att-accept="props.accepted_file_extensions"
+            <input type="file"
+                name="ufile"
+                class="o_input_file d-none"
+                t-att-multiple="props.multiUpload"
+                t-att-accept="props.acceptedFileExtensions"
                 t-ref="file-input"
                 t-on-change="onFileInputChange"
             />
diff --git a/addons/web/static/tests/core/file_input_tests.js b/addons/web/static/tests/core/file_input_tests.js
index ca4ced7e835..4d50bd9caa1 100644
--- a/addons/web/static/tests/core/file_input_tests.js
+++ b/addons/web/static/tests/core/file_input_tests.js
@@ -1,10 +1,9 @@
 /** @odoo-module **/
 
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { getFixture, mount, patchWithCleanup, triggerEvent } from "@web/../tests/helpers/utils";
 import { FileInput } from "@web/core/file_input/file_input";
 import { registry } from "@web/core/registry";
-import testUtils from "web.test_utils";
-import { makeTestEnv } from "../helpers/mock_env";
-import { getFixture, mount } from "../helpers/utils";
 
 const serviceRegistry = registry.category("services");
 
@@ -14,23 +13,14 @@ let target;
 // Helpers
 // -----------------------------------------------------------------------------
 
-async function createFileInput(config) {
-    const fakeHTTPService = {
-        start() {
-            return {
-                post: config.mockPost || (() => {}),
-            };
-        },
-    };
-    serviceRegistry.add("http", fakeHTTPService);
-
-    const env = await makeTestEnv();
-
-    const fileInput = await mount(FileInput, target, {
-        env,
-        props: config.props,
+async function createFileInput({ mockPost, props }) {
+    serviceRegistry.add("http", {
+        start: () => ({
+            post: mockPost || (() => {}),
+        }),
     });
-    return fileInput;
+    const env = await makeTestEnv();
+    await mount(FileInput, target, { env, props });
 }
 
 // -----------------------------------------------------------------------------
@@ -39,6 +29,8 @@ async function createFileInput(config) {
 
 QUnit.module("Components", ({ beforeEach }) => {
     beforeEach(() => {
+        patchWithCleanup(odoo, { csrf_token: "dummy" });
+
         target = getFixture();
     });
 
@@ -53,7 +45,7 @@ QUnit.module("Components", ({ beforeEach }) => {
         await createFileInput({
             mockPost: (route, params) => {
                 assert.deepEqual(params, {
-                    csrf_token: odoo.csrf_token,
+                    csrf_token: "dummy",
                     ufile: [],
                 });
                 assert.step(route);
@@ -61,7 +53,7 @@ QUnit.module("Components", ({ beforeEach }) => {
             },
             props: {},
         });
-        const input = target.querySelector("input");
+        const input = target.querySelector(".o_file_input input");
 
         assert.strictEqual(
             target.querySelector(".o_file_input").innerText.trim().toUpperCase(),
@@ -70,10 +62,10 @@ QUnit.module("Components", ({ beforeEach }) => {
         );
         assert.strictEqual(input.accept, "*", "Input should accept all files by default");
 
-        await testUtils.dom.triggerEvent(input, "change");
+        await triggerEvent(input, null, "change", {}, { skipVisibilityCheck: true });
 
         assert.notOk(input.multiple, "'multiple' attribute should not be set");
-        assert.verifySteps(["/web/binary/upload"]);
+        assert.verifySteps(["/web/binary/upload_attachment"]);
     });
 
     QUnit.test("Upload a file: custom attachment", async function (assert) {
@@ -81,11 +73,11 @@ QUnit.module("Components", ({ beforeEach }) => {
 
         await createFileInput({
             props: {
-                accepted_file_extensions: ".png",
-                action: "/web/binary/upload_attachment",
-                id: 5,
-                model: "res.model",
-                multi_upload: true,
+                acceptedFileExtensions: ".png",
+                multiUpload: true,
+                resId: 5,
+                resModel: "res.model",
+                route: "/web/binary/upload",
                 onUpload(files) {
                     assert.strictEqual(
                         files.length,
@@ -98,20 +90,30 @@ QUnit.module("Components", ({ beforeEach }) => {
                 assert.deepEqual(params, {
                     id: 5,
                     model: "res.model",
-                    csrf_token: odoo.csrf_token,
+                    csrf_token: "dummy",
                     ufile: [],
                 });
                 assert.step(route);
                 return "[]";
             },
         });
-        const input = target.querySelector("input");
+        const input = target.querySelector(".o_file_input input");
 
         assert.strictEqual(input.accept, ".png", "Input should now only accept pngs");
 
-        await testUtils.dom.triggerEvent(input, "change");
+        await triggerEvent(input, null, "change", {}, { skipVisibilityCheck: true });
 
         assert.ok(input.multiple, "'multiple' attribute should be set");
-        assert.verifySteps(["/web/binary/upload_attachment"]);
+        assert.verifySteps(["/web/binary/upload"]);
+    });
+
+    QUnit.test("Hidden file input", async (assert) => {
+        assert.expect(1);
+
+        await createFileInput({
+            props: { hidden: true },
+        });
+
+        assert.isNotVisible(target.querySelector(".o_file_input"));
     });
 });

From 5d0a28d0f523b74bdae8ffd5a42863ab89e2fdba Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 28 Jun 2022 10:36:48 +0000
Subject: [PATCH 42/50] [FIX] web: Fix KanbanCoverImageDialog

This commit removes the SimpleDialog class and adapts the
KanbanCoverImageDialog to use the Dialog component instead.

It also makes sure that the KanbanCoverImageDialog uses the FileInput
component to use a more centralized way of calling the HTTP
'upload_attachment' route.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/core/dialog/dialog.js   | 16 ------
 addons/web/static/src/core/dialog/dialog.xml  |  4 +-
 .../static/src/core/dialog/simple_dialog.xml  | 29 -----------
 .../src/views/kanban/kanban_compiler.js       |  6 +--
 .../views/kanban/kanban_cover_image_dialog.js | 39 ++++++++++-----
 .../kanban/kanban_cover_image_dialog.xml      | 49 +++++++++++--------
 .../static/src/views/kanban/kanban_record.js  |  4 +-
 .../static/tests/views/kanban_view_tests.js   | 18 +++++--
 8 files changed, 74 insertions(+), 91 deletions(-)
 delete mode 100644 addons/web/static/src/core/dialog/simple_dialog.xml

diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index f9bbefbc757..a501adf19a8 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -54,19 +54,3 @@ Dialog.defaultProps = {
     technical: true,
     title: "Odoo",
 };
-
-export class SimpleDialog extends Component {
-    setup() {
-        useActiveElement("modal");
-        useHotkey("escape", () => {
-            this.props.close();
-        });
-        useChildSubEnv({ inDialog: true });
-    }
-}
-SimpleDialog.template = "web.SimpleDialog";
-SimpleDialog.props = {
-    close: Function,
-    isActive: { optional: true },
-    "*": true,
-};
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 9925618ea71..cb900b1d1d9 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -24,14 +24,14 @@
                         <!-- FIXME: WOWL there is a bug on t-portal on owl, in which t-portal don't work on multinode.
                         To avoid this we place the footer before the body -->
                         <footer t-if="props.footer" class="modal-footer justify-content-around justify-content-sm-start flex-wrap gap-1" style="order:2">
-                            <t t-slot="footer">
+                            <t t-slot="footer" close="data.close">
                                 <button class="btn btn-primary o-default-button" t-on-click="data.close">
                                     <t>Ok</t>
                                 </button>
                             </t>
                         </footer>
                         <main class="modal-body">
-                            <t t-slot="default"/>
+                            <t t-slot="default" close="data.close" />
                         </main>
                     </div>
                 </div>
diff --git a/addons/web/static/src/core/dialog/simple_dialog.xml b/addons/web/static/src/core/dialog/simple_dialog.xml
deleted file mode 100644
index 127b7d2da39..00000000000
--- a/addons/web/static/src/core/dialog/simple_dialog.xml
+++ /dev/null
@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-    <t t-name="web.SimpleDialog" owl="1">
-        <div class="o_dialog" t-att-class="{ o_inactive_modal: !props.isActive }" t-on-dialog-closed="props.close">
-            <div role="dialog" class="modal d-block"
-                tabindex="-1"
-                t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
-                t-ref="modal"
-                >
-                <div class="modal-dialog" t-att-class="props.size">
-                    <div class="modal-content" t-att-class="props.contentClass">
-                        <header t-if="!props.hideHeader" class="modal-header">
-                            <h4 class="modal-title text-break">
-                                <t t-esc="props.title"/>
-                            </h4>
-                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="props.close">×</button>
-                        </header>
-                        <main class="modal-body">
-                            <t t-slot="default"/>
-                        </main>
-                        <footer t-if="props.slots.footer" class="modal-footer justify-content-start">
-                            <t t-slot="footer" close="props.close"/>
-                        </footer>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </t>
-</templates>
diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index df19bc174f7..94c70bb2ef9 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -99,11 +99,11 @@ export class KanbanCompiler extends ViewCompiler {
 
         const nodeParams = extractAttributes(el, ["type"]);
         if (type === "set_cover") {
-            const { "data-field": fieldName, "auto-open": autoOpen } = extractAttributes(el, [
-                "data-field",
+            const { "auto-open": autoOpen, "data-field": fieldName } = extractAttributes(el, [
                 "auto-open",
+                "data-field",
             ]);
-            Object.assign(nodeParams, { fieldName, autoOpen });
+            Object.assign(nodeParams, { autoOpen, fieldName });
         }
         const strParams = Object.entries(nodeParams)
             .map(([k, v]) => [k, toStringExpression(v)].join(":"))
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
index a138518122d..e4fb3fde054 100644
--- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.js
@@ -1,9 +1,10 @@
 /** @odoo-module **/
 
-import { SimpleDialog } from "@web/core/dialog/dialog";
+import { Dialog } from "@web/core/dialog/dialog";
+import { FileInput } from "@web/core/file_input/file_input";
 import { useService } from "@web/core/utils/hooks";
 
-const { Component, useState, useRef, onWillStart, onMounted } = owl;
+const { Component, useState, onWillStart } = owl;
 
 let nextDialogId = 1;
 
@@ -11,12 +12,13 @@ export class KanbanCoverImageDialog extends Component {
     setup() {
         this.id = `o_cover_image_upload_${nextDialogId++}`;
         this.orm = useService("orm");
+        this.http = useService("http");
         const { record, fieldName } = this.props;
-        this.coverId = record && record.data[fieldName];
+        const attachment = (record && record.data[fieldName]) || [];
         this.state = useState({
-            selectedAttachmentId: this.coverId,
+            selectFile: false,
+            selectedAttachmentId: attachment[0],
         });
-        this.fileInput = useRef("fileInput");
         onWillStart(async () => {
             this.attachments = await this.orm.searchRead(
                 "ir.attachment",
@@ -25,22 +27,29 @@ export class KanbanCoverImageDialog extends Component {
                     ["res_id", "=", record.resId],
                     ["mimetype", "ilike", "image"],
                 ],
-                ["id", "name"]
+                ["id"]
             );
-        });
-        onMounted(() => {
-            if (!this.props.autoOpen && this.attachments.length === 0) {
-                this.fileInput.el.click();
-            }
+            this.state.selectFile = this.props.autoOpen && this.attachments.length;
         });
     }
 
-    selectAttachment(attachment) {
+    onUpload([attachment]) {
+        if (!attachment) {
+            return;
+        }
+        this.state.selectFile = false;
+        this.selectAttachment(attachment, true);
+    }
+
+    selectAttachment(attachment, setSelected) {
         if (this.state.selectedAttachmentId !== attachment.id) {
             this.state.selectedAttachmentId = attachment.id;
         } else {
             this.state.selectedAttachmentId = null;
         }
+        if (setSelected) {
+            this.setCover();
+        }
     }
 
     removeCover() {
@@ -54,7 +63,11 @@ export class KanbanCoverImageDialog extends Component {
         await this.props.record.save();
         this.props.close();
     }
+
+    uploadImage() {
+        this.state.selectFile = true;
+    }
 }
 
 KanbanCoverImageDialog.template = "web.KanbanCoverImageDialog";
-KanbanCoverImageDialog.components = { SimpleDialog };
+KanbanCoverImageDialog.components = { Dialog, FileInput };
diff --git a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
index 8f49e283be1..f0f72c52228 100644
--- a/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
+++ b/addons/web/static/src/views/kanban/kanban_cover_image_dialog.xml
@@ -2,38 +2,45 @@
 <templates xml:space="preserve">
 
     <t t-name="web.KanbanCoverImageDialog" owl="1">
-        <SimpleDialog t-props="props" title="'Set a Cover Image'" size="'modal-lg'">
+        <Dialog title="'Set a Cover Image'" size="'lg'">
             <div t-if="attachments.length" class="o_kanban_cover_container bg-100">
                 <t t-foreach="attachments" t-as="attachment" t-key="attachment.id">
                     <div class="o_kanban_cover_image position-relative d-inline-block m-2 bg-white" t-att-class="{
                         o_selected: state.selectedAttachmentId === attachment.id,
                     }">
-                        <img t-attf-src="/web/image/{{attachment.id}}?unique=1" t-att-data-id="attachment.id" t-att-data-name="attachment.name" class="m-auto mw-100" alt="Attachment" t-on-click="() => this.selectAttachment(attachment)" t-on-dblclick="() => {this.selectAttachment(attachment); this.setCover();}"/>
+                        <img t-attf-src="/web/image/{{attachment.id}}?unique=1"
+                            class="m-auto mw-100"
+                            alt="Attachment"
+                            t-on-click="() => this.selectAttachment(attachment, false)"
+                            t-on-dblclick="() => this.selectAttachment(attachment, true)"
+                        />
                     </div>
                 </t>
             </div>
             <t t-else="">There is no available image to be set as cover.</t>
-            <div t-attf-class="d-none o_hidden_input_file {{fileupload_class}}" t-att-style="fileupload_style" aria-atomic="true">
-                <form class="o_form_binary_form" t-att-target="id"
-                    method="post" enctype="multipart/form-data" t-att-action="'/web/binary/upload_attachment'">
-                    <input type="hidden" name="csrf_token" t-att-value="csrf_token"/>
-                    <input type="hidden" name="callback" t-att-value="id"/>
-                    <input type="file" class="o_input_file" name="ufile "
-                        t-att-multiple="multi_upload ? 'multiple' : null" accept="image/*" t-ref="fileInput" t-on-change="upload"/>
-                    <input type="hidden" name="model" t-att-value="props.record.resModel" />
-                    <input type="hidden" name="id" t-att-value="props.record.resId" />
-                </form>
-                <iframe t-att-id="id" t-att-name="id" style="display: none"/>
-            </div>
+            <FileInput t-if="state.selectFile"
+                acceptedFileExtensions="'image/*'"
+                autoOpen="true"
+                hidden="true"
+                onUpload.bind="onUpload"
+                resModel="props.record.resModel"
+                resId="props.record.resId"
+            />
             <t t-set-slot="footer" t-slot-scope="dialog">
-                <t t-if="attachments.length">
-                    <button class="btn btn-primary" t-on-click="setCover" t-att-disabled="!state.selectedAttachmentId">Select</button>
-                    <button class="btn btn-primary" t-on-click="uploadImage">Upload and Set</button>
-                </t>
-                <button t-if="coverId" class="btn btn-secondary" t-on-click="removeCover">Remove Cover Image</button>
-                <button class="btn btn-secondary" t-on-click="dialog.close">Discard</button>
+                <button t-if="attachments.length" class="btn btn-primary" t-on-click="setCover" t-att-disabled="!state.selectedAttachmentId">
+                    Select
+                </button>
+                <button class="btn btn-primary" t-on-click="uploadImage">
+                    Upload and Set
+                </button>
+                <button t-if="coverId" class="btn btn-secondary" t-on-click="removeCover">
+                    Remove Cover Image
+                </button>
+                <button class="btn btn-secondary" t-on-click="dialog.close">
+                    Discard
+                </button>
             </t>
-        </SimpleDialog>
+        </Dialog>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index b741369e4a5..ef64b30c91b 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -317,7 +317,7 @@ export class KanbanRecord extends Component {
                 return;
             }
             case "set_cover": {
-                const { fieldName, autoOpen } = params;
+                const { autoOpen, fieldName } = params;
                 const { widget } = archInfo.fieldNodes[fieldName];
                 const field = record.fields[fieldName];
                 if (
@@ -325,7 +325,7 @@ export class KanbanRecord extends Component {
                     field.relation === "ir.attachment" &&
                     widget === "attachment_image"
                 ) {
-                    this.dialog.add(KanbanCoverImageDialog, { record, fieldName, autoOpen });
+                    this.dialog.add(KanbanCoverImageDialog, { autoOpen, fieldName, record });
                 } else {
                     const warning = sprintf(
                         env._t(
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index f9cda0dbcb0..b628120a0ab 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -8723,9 +8723,12 @@ QUnit.module("Views", (hooks) => {
     });
 
     QUnit.test("set cover image", async (assert) => {
-        assert.expect(7);
+        assert.expect(10);
 
         serviceRegistry.add("dialog", dialogService, { force: true });
+        serviceRegistry.add("http", {
+            start: () => ({}),
+        });
         const kanban = await makeView({
             type: "kanban",
             resModel: "partner",
@@ -8778,8 +8781,8 @@ QUnit.module("Views", (hooks) => {
 
         assert.containsNone(getCard(0), "img", "Initially there is no image.");
 
-        await click(document.body, ".modal img[data-id='1']", true);
-        await click(document.body.querySelector(".modal .btn-primary"));
+        await click(document.body, ".modal .o_kanban_cover_image img", true);
+        await click(document.body, ".modal .btn-primary:first-child");
 
         assert.containsOnce(target, 'img[data-src*="/web/image/1"]');
 
@@ -8787,11 +8790,16 @@ QUnit.module("Views", (hooks) => {
         const coverButton = getCard(1).querySelector("a");
         assert.strictEqual(coverButton.innerText.trim(), "Set Cover Image");
         await click(coverButton);
+
+        assert.containsOnce(document.body, ".modal .o_kanban_cover_image");
+        assert.containsOnce(document.body, ".modal .btn:contains(Select)");
+        assert.containsOnce(document.body, ".modal .btn:contains(Discard)");
+
         await triggerEvent(
             document.body,
-            ".modal img[data-id='2']",
+            ".modal .o_kanban_cover_image img",
             "dblclick",
-            {},
+            { bubbles: true },
             { skipVisibilityCheck: true }
         );
 

From a5bfa266929accb215747f56e266194146ce704c Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 28 Jun 2022 08:42:06 +0000
Subject: [PATCH 43/50] [FIX] web: kanban: attributes of card dropdowns

Some attributes of the elements determining the "ellipsis" dropdown menu
of a kanban card were invalidly reported on the main Dropdown node
created during the compilation. This could cause crashes (during the
props validation) or broke the CSS.

In this commit:
    - we fix the above mentioned problem
    - we put the class o_drowdown_kanban on all "ellipsis" dropdowns
      generated by the kanban compiler in order to get the appropriate CSS
    - we make sure that those dropdowns are visible in kanban dashboards
      by default

Part-of: odoo/odoo#92475
---
 .../src/views/kanban/kanban_compiler.js       | 14 ++-
 .../src/views/kanban/kanban_dashboard.scss    |  4 +
 addons/web/static/src/views/view_compiler.js  |  9 +-
 .../static/tests/views/kanban_view_tests.js   | 93 +++++++++++++++++++
 4 files changed, 112 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 94c70bb2ef9..b1c431da086 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -30,12 +30,21 @@ export class KanbanCompiler extends ViewCompiler {
         this.compilers.push(
             { selector: `[t-name='${KANBAN_BOX_ATTRIBUTE}']`, fn: this.compileCard },
             { selector: ".oe_kanban_colorpicker", fn: this.compileColorPicker },
-            { selector: ".dropdown,.o_kanban_manage_button_section", fn: this.compileDropdown },
+            {
+                selector: ".dropdown,.o_kanban_manage_button_section",
+                fn: this.compileDropdown,
+                doNotCopyAttributes: true,
+            },
             {
                 selector: ".dropdown-toggle,.o_kanban_manage_toggle_button",
                 fn: this.compileDropdownButton,
+                doNotCopyAttributes: true,
+            },
+            {
+                selector: ".dropdown-menu",
+                fn: this.compileDropdownMenu,
+                doNotCopyAttributes: true,
             },
-            { selector: ".dropdown-menu", fn: this.compileDropdownMenu },
             { selector: "t[t-call]", fn: this.compileTCall }
         );
         this.dropdown = null;
@@ -55,6 +64,7 @@ export class KanbanCompiler extends ViewCompiler {
         this.dropdown = createElement("Dropdown", {
             position: toStringExpression("bottom-end"),
         });
+        this.dropdown.setAttribute("class", "'o_dropdown_kanban'");
         return this.dropdown;
     }
 
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index 33470b177e6..29164928d5b 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -23,6 +23,10 @@
         // ------- Dropdown toggle & menu -------
         $o-kanban-manage-toggle-height: 35px;
 
+        .o_dropdown_kanban {
+            visibility: visible;
+        }
+
         .o_kanban_manage_toggle_button {
             @include o-kanban-dropdown($o-kanban-dashboard-hpadding);
             @include o-position-absolute(0, 0);
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 5d13c7ebe99..f8f277721d5 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -97,10 +97,6 @@ export function assignOwlDirectives(target, ...sources) {
  * @param {Element} compiled
  */
 export function copyAttributes(el, compiled) {
-    if (getTag(el, true) === "button") {
-        return;
-    }
-
     const isComponent = isComponentNode(compiled);
     const classes = el.className;
     if (classes) {
@@ -215,7 +211,8 @@ export class ViewCompiler {
         this.id = 1;
         /** @type {Compiler[]} */
         this.compilers = [
-            { selector: "a[type],a[data-type],button", fn: this.compileButton },
+            { selector: "a[type],a[data-type]", fn: this.compileButton },
+            { selector: "button", fn: this.compileButton, doNotCopyAttributes: true },
             { selector: "field", fn: this.compileField },
             { selector: "widget", fn: this.compileWidget },
         ];
@@ -287,7 +284,7 @@ export class ViewCompiler {
         let compiledNode;
         if (compiler) {
             compiledNode = compiler.fn.call(this, node, params);
-            if (compiledNode) {
+            if (!compiler.doNotCopyAttributes && compiledNode) {
                 copyAttributes(node, compiledNode);
             }
         } else {
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index b628120a0ab..9f1c9b4cc32 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9874,4 +9874,97 @@ QUnit.module("Views", (hooks) => {
         assert.containsNone(target, ".o_kanban_quick_create");
         assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
     });
+
+    QUnit.test("classes on dropdown menu do not end on dropdown main div", async (assert) => {
+        serverData.models.partner.records.splice(1, 3); // keep one record only
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <kanban>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="foo"/>
+                                    <ul class="o_kanban_card_manage_pane dropdown-menu" role="menu">
+                                        <li>Hello</li>
+                                    </ul>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>
+                `,
+        });
+
+        const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+        assert.isVisible(dropdown);
+        assert.hasClass(dropdown, "o_dropdown_kanban");
+        assert.doesNotHaveClass(dropdown, "dropdown-menu");
+        assert.doesNotHaveClass(dropdown, "o_kanban_card_manage_pane");
+        await click(dropdown, "button.dropdown-toggle");
+        assert.containsOnce(dropdown, ".o_kanban_card_manage_pane.dropdown-menu");
+    });
+
+    QUnit.test("classes on toggler do not end on dropdown main div", async (assert) => {
+        serverData.models.partner.records.splice(1, 3); // keep one record only
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                    <kanban>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="foo"/>
+                                    <a class="o_kanban_manage_toggle_button o_left" href="#">
+                                        <i class="fa fa-ellipsis-v" role="img" aria-label="Manage" title="Manage"/>
+                                    </a>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>
+                `,
+        });
+
+        const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+        assert.isVisible(dropdown);
+        assert.hasClass(dropdown, "o_dropdown_kanban");
+        assert.doesNotHaveClass(dropdown, "o_kanban_manage_toggle_button");
+        assert.doesNotHaveClass(dropdown, "o_left");
+        assert.containsOnce(dropdown, ".o_kanban_manage_toggle_button.o_left");
+    });
+
+    QUnit.test(
+        "classes on dropdown are on dropdown main div but not the other attributes",
+        async (assert) => {
+            serverData.models.partner.records.splice(1, 3); // keep one record only
+            await makeView({
+                type: "kanban",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <kanban>
+                        <templates>
+                            <t t-name="kanban-box">
+                                <div>
+                                    <field name="foo"/>
+                                    <div class="o_kanban_manage_button_section my_class" placeholder="Bouh"/>
+                                </div>
+                            </t>
+                        </templates>
+                    </kanban>
+                `,
+            });
+
+            const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+            assert.isVisible(dropdown);
+            assert.strictEqual(
+                dropdown.className,
+                "o-dropdown dropdown o_dropdown_kanban o_kanban_manage_button_section my_class o-dropdown--no-caret"
+            );
+            assert.notOk(dropdown.hasAttribute("placeholder"));
+        }
+    );
 });

From 6cdd91b614e33bd1f8bb37ca5b83fb4a7163fe00 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Wed, 29 Jun 2022 12:59:54 +0000
Subject: [PATCH 44/50] [FIX] web: kanban: add JSON to the rendering context

In legacy kanban views, one could use JSON in the arch to, e.g.
parse text field values encoding data. This was no longer the case
in the new implementation. This commit fixes the issue by adding
it to the kanban record rendering context. However, we'll consider
adding it in owl directly.

Part-of: odoo/odoo#92475
---
 .../static/src/views/kanban/kanban_record.js  |  4 ++++
 .../static/tests/views/kanban_view_tests.js   | 24 +++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index ef64b30c91b..c61ac3a0bcb 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -360,6 +360,10 @@ export class KanbanRecord extends Component {
         return luxon;
     }
 
+    get JSON() {
+        return JSON;
+    }
+
     get read_only_mode() {
         return this.props.readonly;
     }
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 9f1c9b4cc32..032285fcd46 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9967,4 +9967,28 @@ QUnit.module("Views", (hooks) => {
             assert.notOk(dropdown.hasAttribute("placeholder"));
         }
     );
+
+    QUnit.test("can use JSON in kanban template", async (assert) => {
+        serverData.models.partner.records = [{ id: 1, foo: '["g", "e", "d"]' }];
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <field name="foo"/>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <span t-foreach="JSON.parse(record.foo.raw_value)" t-as="v" t-key="v_index" t-esc="v"/>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+        });
+        assert.containsOnce(target, ".o_kanban_record:not(.o_kanban_ghost)");
+        assert.containsN(target, ".o_kanban_record span", 3);
+        assert.strictEqual(target.querySelector(".o_kanban_record").innerText, "ged");
+    });
 });

From 2b7f49744201b847a87101ea7904ccdf727f6fe8 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 29 Jun 2022 10:12:44 +0000
Subject: [PATCH 45/50] [FIX] web: Support multiple dropdowns in kanban

This commit allows multiple declarations of a dropdown menu in a kanban
card to generate a dropdown component for each definition.

Part-of: odoo/odoo#92475
---
 .../src/views/kanban/kanban_compiler.js       | 130 +++++++++++------
 .../static/tests/views/kanban_view_tests.js   | 132 ++++++++++++++----
 2 files changed, 187 insertions(+), 75 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index b1c431da086..1baaed77ac0 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -11,6 +11,14 @@ import { toStringExpression } from "@web/views/utils";
 import { isTextNode, ViewCompiler } from "@web/views/view_compiler";
 import { KANBAN_BOX_ATTRIBUTE, KANBAN_TOOLTIP_ATTRIBUTE } from "./kanban_arch_parser";
 
+/**
+ * @typedef {Object} DropdownDef
+ * @property {Element} el
+ * @property {boolean} inserted
+ * @property {boolean} shouldInsert
+ * @property {("dropdown" | "toggler" | "menu")[]} parts
+ */
+
 const INTERP_REGEXP = /\{\{.*?\}\}|#\{.*?\}/g;
 
 const ACTION_TYPES = ["action", "object"];
@@ -24,6 +32,7 @@ function isValidCard(el) {
     return getTag(el, true) !== "t" || el.hasAttribute("t-component");
 }
 
+let currentDropdownId = 1;
 export class KanbanCompiler extends ViewCompiler {
     setup() {
         this.ctx.readonly = "read_only_mode";
@@ -35,37 +44,66 @@ export class KanbanCompiler extends ViewCompiler {
                 fn: this.compileDropdown,
                 doNotCopyAttributes: true,
             },
-            {
-                selector: ".dropdown-toggle,.o_kanban_manage_toggle_button",
-                fn: this.compileDropdownButton,
-                doNotCopyAttributes: true,
-            },
             {
                 selector: ".dropdown-menu",
                 fn: this.compileDropdownMenu,
                 doNotCopyAttributes: true,
             },
+            {
+                selector: ".dropdown-toggle,.o_kanban_manage_toggle_button",
+                fn: this.compileDropdownToggler,
+                doNotCopyAttributes: true,
+            },
             { selector: "t[t-call]", fn: this.compileTCall }
         );
-        this.dropdown = null;
+        /** @type {Record<number, DropdownDef>} */
+        this.dropdowns = {};
     }
 
     /**
-     * Renders a Dropdown component node, or nothing if one has already been rendered.
-     * This means that the first method to define a dropdown, dropdown toggler or
-     * dropdown menu will be the place the dropdown component will be inserted.
+     * Renders a Dropdown component node definition object. It works as follows:
      *
-     * @returns {Element | null}
+     * The first time a node defining a dropdown component or component slot (dropdown
+     * root, toggler or default=menu), a new dropdown object will be generated,
+     * taking note of what parts have already been defined.
+     *
+     * It also creates the Dropdown component node that will be inserted in the
+     * template, at the position of the first node defining either the root dropdown
+     * or the dropdown toggler.
+     *
+     * Each next component or slot still not defined on the current dropdown object
+     * will be added to it.
+     *
+     * If a duplicate part or component is found, a new dropdown object is created
+     * and set as the new current dropdown.
+     *
+     * @param {"dropdown" | "toggler" | "menu"} part
+     * @returns {DropdownDef}
      */
-    renderDropdown() {
-        if (this.dropdown) {
-            return null;
+    renderDropdown(part) {
+        if (!this.dropdowns[currentDropdownId]) {
+            this.dropdowns[currentDropdownId] = {
+                parts: [],
+                inserted: false,
+                shouldInsert: false,
+                el: createElement("Dropdown", {
+                    class: toStringExpression("o_dropdown_kanban"),
+                    position: toStringExpression("bottom-end"),
+                }),
+            };
         }
-        this.dropdown = createElement("Dropdown", {
-            position: toStringExpression("bottom-end"),
-        });
-        this.dropdown.setAttribute("class", "'o_dropdown_kanban'");
-        return this.dropdown;
+        const dropdown = this.dropdowns[currentDropdownId];
+        if (dropdown.parts.includes(part)) {
+            // Duplicate part: generate new dropdown
+            currentDropdownId++;
+            return this.renderDropdown(part);
+        }
+        dropdown.parts.push(part);
+        if (part !== "menu") {
+            dropdown.shouldInsert = !dropdown.inserted;
+            dropdown.inserted = true;
+        }
+        return dropdown;
     }
 
     //-----------------------------------------------------------------------------
@@ -181,36 +219,16 @@ export class KanbanCompiler extends ViewCompiler {
      * @returns {Element | null}
      */
     compileDropdown(el, params) {
-        const dropdownEl = this.renderDropdown();
+        const { shouldInsert, el: dropdownEl } = this.renderDropdown("dropdown");
         const classes = [...el.classList].filter((cls) => cls && cls !== "dropdown").join(" ");
 
-        combineAttributes(this.dropdown, "class", toStringExpression(classes), "+' '+");
+        combineAttributes(dropdownEl, "class", toStringExpression(classes), "+' '+");
 
         for (const child of el.childNodes) {
-            append(this.dropdown, this.compileNode(child, params));
+            append(dropdownEl, this.compileNode(child, params));
         }
 
-        return dropdownEl;
-    }
-
-    /**
-     * @param {Element} el
-     * @param {Object} params
-     * @returns {Element | null}
-     */
-    compileDropdownButton(el, params) {
-        const dropdownEl = this.renderDropdown();
-        const classes = ["btn", ...el.classList].filter(Boolean).join(" ");
-        const togglerSlot = createElement("t", { "t-set-slot": "toggler" });
-
-        combineAttributes(this.dropdown, "togglerClass", toStringExpression(classes), "+' '+");
-
-        for (const child of el.childNodes) {
-            append(togglerSlot, this.compileNode(child, params));
-        }
-        append(this.dropdown, togglerSlot);
-
-        return dropdownEl;
+        return shouldInsert && dropdownEl;
     }
 
     /**
@@ -219,16 +237,36 @@ export class KanbanCompiler extends ViewCompiler {
      * @returns {Element | null}
      */
     compileDropdownMenu(el, params) {
-        const dropdownEl = this.renderDropdown();
+        const { shouldInsert, el: dropdownEl } = this.renderDropdown("menu");
         const cls = el.getAttribute("class") || "";
 
-        combineAttributes(this.dropdown, "menuClass", toStringExpression(cls), "+' '+");
+        combineAttributes(dropdownEl, "menuClass", toStringExpression(cls), "+' '+");
 
         for (const child of el.childNodes) {
-            append(this.dropdown, this.compileNode(child, params));
+            append(dropdownEl, this.compileNode(child, params));
         }
 
-        return dropdownEl;
+        return shouldInsert && dropdownEl;
+    }
+
+    /**
+     * @param {Element} el
+     * @param {Object} params
+     * @returns {Element | null}
+     */
+    compileDropdownToggler(el, params) {
+        const { shouldInsert, el: dropdownEl } = this.renderDropdown("toggler");
+        const classes = ["btn", ...el.classList].filter(Boolean).join(" ");
+        const togglerSlot = createElement("t", { "t-set-slot": "toggler" });
+
+        combineAttributes(dropdownEl, "togglerClass", toStringExpression(classes), "+' '+");
+
+        for (const child of el.childNodes) {
+            append(togglerSlot, this.compileNode(child, params));
+        }
+        append(dropdownEl, togglerSlot);
+
+        return shouldInsert && dropdownEl;
     }
 
     /**
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 032285fcd46..e875685517f 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9881,20 +9881,21 @@ QUnit.module("Views", (hooks) => {
             type: "kanban",
             resModel: "partner",
             serverData,
-            arch: `
-                    <kanban>
-                        <templates>
-                            <t t-name="kanban-box">
-                                <div>
-                                    <field name="foo"/>
-                                    <ul class="o_kanban_card_manage_pane dropdown-menu" role="menu">
-                                        <li>Hello</li>
-                                    </ul>
-                                </div>
-                            </t>
-                        </templates>
-                    </kanban>
-                `,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                                <div class="dropdown" />
+                                <ul class="o_kanban_card_manage_pane dropdown-menu" role="menu">
+                                    <li>Hello</li>
+                                </ul>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
         });
 
         const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
@@ -9912,20 +9913,20 @@ QUnit.module("Views", (hooks) => {
             type: "kanban",
             resModel: "partner",
             serverData,
-            arch: `
-                    <kanban>
-                        <templates>
-                            <t t-name="kanban-box">
-                                <div>
-                                    <field name="foo"/>
-                                    <a class="o_kanban_manage_toggle_button o_left" href="#">
-                                        <i class="fa fa-ellipsis-v" role="img" aria-label="Manage" title="Manage"/>
-                                    </a>
-                                </div>
-                            </t>
-                        </templates>
-                    </kanban>
-                `,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                                <a class="o_kanban_manage_toggle_button o_left" href="#">
+                                    <i class="fa fa-ellipsis-v" role="img" aria-label="Manage" title="Manage"/>
+                                </a>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
         });
 
         const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
@@ -9944,7 +9945,7 @@ QUnit.module("Views", (hooks) => {
                 type: "kanban",
                 resModel: "partner",
                 serverData,
-                arch: `
+                arch: /* xml */ `
                     <kanban>
                         <templates>
                             <t t-name="kanban-box">
@@ -9968,6 +9969,79 @@ QUnit.module("Views", (hooks) => {
         }
     );
 
+    QUnit.test("declaring only the menu does not insert a dropdown", async (assert) => {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban>
+                    <templates>
+                        <t t-name="kanban-box">
+                            <div>
+                                <field name="foo"/>
+                                <ul class="o_kanban_card_manage_pane dropdown-menu" role="menu">
+                                    <li>Hello</li>
+                                </ul>
+                            </div>
+                        </t>
+                    </templates>
+                </kanban>
+            `,
+        });
+
+        assert.containsNone(target, ".o_kanban_record .o-dropdown");
+    });
+
+    QUnit.test("support multiple dropdowns", async (assert) => {
+        assert.expect(4);
+
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: /* xml */ `
+                <kanban>
+                    <field name="bar" />
+                    <templates>
+                        <div t-name="kanban-box">
+                            <field name="foo" />
+                            <t t-if="record.bar.raw_value">
+                                <div class="dropdown dropdown-true">
+                                    <div class="dropdown-toggle">
+                                        <span class="toggler-true">TOGGLER TRUE</span>
+                                    </div>
+                                    <div class="dropdown-menu">
+                                        <span class="menu-true">MENU TRUE</span>
+                                    </div>
+                                </div>
+                            </t>
+                            <t t-else="">
+                                <div class="dropdown-toggle">
+                                    <span class="toggler-false">TOGGLER FALSE</span>
+                                </div>
+                                <div class="dropdown-menu">
+                                    <span class="menu-false">MENU FALSE</span>
+                                </div>
+                            </t>
+                        </div>
+                    </templates>
+                </kanban>
+            `,
+        });
+
+        assert.containsN(target, ".o_kanban_renderer .dropdown-true", 3);
+        assert.containsN(target, ".o_kanban_renderer .dropdown", 4);
+
+        await toggleRecordDropdown(2);
+
+        assert.strictEqual(getCardTexts()[2], "gnap\nTOGGLER TRUE\nMENU TRUE");
+
+        await toggleRecordDropdown(3);
+
+        assert.strictEqual(getCardTexts()[3], "blip\nTOGGLER FALSE\nMENU FALSE");
+    });
+
     QUnit.test("can use JSON in kanban template", async (assert) => {
         serverData.models.partner.records = [{ id: 1, foo: '["g", "e", "d"]' }];
         await makeView({

From f5f65f26bebf6aff457b41980b4aee08d1ddf758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Wed, 29 Jun 2022 16:10:06 +0000
Subject: [PATCH 46/50] [FIX] web: scope legacy indicator to debug mode

With this commit, we only display the "legacy" indicator (red/pink
background color to indicate old widgets in new views) in debug mode.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/legacy/legacy_fields.scss | 2 +-
 addons/web/static/src/legacy/scss/views.scss    | 2 +-
 addons/web/static/src/start.js                  | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/legacy/legacy_fields.scss b/addons/web/static/src/legacy/legacy_fields.scss
index 33d9188634f..8224d205d8f 100644
--- a/addons/web/static/src/legacy/legacy_fields.scss
+++ b/addons/web/static/src/legacy/legacy_fields.scss
@@ -1,3 +1,3 @@
-.o_legacy_field_widget > * {
+.o_debug .o_legacy_field_widget > * {
     background-color: rgba(255, 0, 0, 0.1);
 }
diff --git a/addons/web/static/src/legacy/scss/views.scss b/addons/web/static/src/legacy/scss/views.scss
index 5cc5407cc75..0f3bfa1b1a8 100644
--- a/addons/web/static/src/legacy/scss/views.scss
+++ b/addons/web/static/src/legacy/scss/views.scss
@@ -3,7 +3,7 @@
  * all renderers. For field default rules, see the fields.scss file.
  */
 
-.o_legacy_kanban_view {
+.o_debug .o_legacy_kanban_view {
     border-top: 2px solid red;
 }
 
diff --git a/addons/web/static/src/start.js b/addons/web/static/src/start.js
index f0b3361cd30..89e04c8bbec 100644
--- a/addons/web/static/src/start.js
+++ b/addons/web/static/src/start.js
@@ -56,6 +56,9 @@ export async function startWebClient(Webclient) {
     if (env.services.user.userId === 1) {
         classList.add("o_is_superuser");
     }
+    if (env.debug) {
+        classList.add("o_debug");
+    }
     // delete odoo.debug; // FIXME: some legacy code rely on this
     odoo.__WOWL_DEBUG__ = { root };
     odoo.isReady = true;

From fde1ca963ccd2539d5852b86d6eefe5b0b8a6689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Wed, 29 Jun 2022 18:38:22 +0000
Subject: [PATCH 47/50] [IMP] web, project: introduce and use renderToMarkup

Part-of: odoo/odoo#92475
---
 .../src/js/project_task_kanban_examples.js    | 26 +++++++++----------
 addons/web/static/src/core/utils/render.js    | 18 ++++++++++---
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/addons/project/static/src/js/project_task_kanban_examples.js b/addons/project/static/src/js/project_task_kanban_examples.js
index 2ae2f87445e..2125ea4868e 100644
--- a/addons/project/static/src/js/project_task_kanban_examples.js
+++ b/addons/project/static/src/js/project_task_kanban_examples.js
@@ -3,7 +3,7 @@
 import { _lt } from 'web.core';
 import kanbanExamplesRegistry from 'web.kanban_examples_registry';
 import { registry } from "@web/core/registry";
-import { renderToString } from '@web/core/utils/render';
+import { renderToMarkup } from '@web/core/utils/render';
 
 const { markup } = owl;
 const greenBullet = markup(`<span class="o_status d-inline-block o_status_green"></span>`);
@@ -18,83 +18,83 @@ const exampleData = {
         name: _lt('Software Development'),
         columns: [_lt('Backlog'), _lt('Specifications'), _lt('Development'), _lt('Tests'), _lt('Delivered')],
         get description() {
-            return markup(renderToString("project.example.generic"));
+            return renderToMarkup("project.example.generic");
         },
         bullets: [greenBullet, redBullet, star],
     }, {
         name: _lt('Agile Scrum'),
         columns: [_lt('Backlog'), _lt('Sprint Backlog'), _lt('Sprint in Progress'), _lt('Sprint Complete'), _lt('Old Completed Sprint')],
         get description() {
-            return markup(renderToString("project.example.agilescrum"));
+            return renderToMarkup("project.example.agilescrum");
         },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Digital Marketing'),
         columns: [_lt('Ideas'), _lt('Researching'), _lt('Writing'), _lt('Editing'), _lt('Done')],
         get description() {
-            return markup(renderToString("project.example.digitalmarketing"));
+            return renderToMarkup("project.example.digitalmarketing");
         },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Customer Feedback'),
         columns: [_lt('New'), _lt('In development'), _lt('Done'), _lt('Refused')],
         get description() {
-            return markup(renderToString("project.example.customerfeedback"));
+            return renderToMarkup("project.example.customerfeedback");
         },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Consulting'),
         columns: [_lt('New Projects'), _lt('Resources Allocation'), _lt('In Progress'), _lt('Done')],
         get description() {
-            return markup(renderToString("project.example.consulting"));
+            return renderToMarkup("project.example.consulting");
         },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Research Project'),
         columns: [_lt('Brainstorm'), _lt('Research'), _lt('Draft'), _lt('Final Document')],
         get description() {
-            return markup(renderToString("project.example.researchproject"));
+            return renderToMarkup("project.example.researchproject");
         },
         bullets: [greenBullet, redBullet],
     }, {
         name: _lt('Website Redesign'),
         columns: [_lt('Page Ideas'), _lt('Copywriting'), _lt('Design'), _lt('Live')],
         get description() {
-            return markup(renderToString("project.example.researchproject"));
+            return renderToMarkup("project.example.researchproject");
         },
     }, {
         name: _lt('T-shirt Printing'),
         columns: [_lt('New Orders'), _lt('Logo Design'), _lt('To Print'), _lt('Done')],
         get description() {
-            return markup(renderToString("project.example.tshirtprinting"));
+            return renderToMarkup("project.example.tshirtprinting");
         },
         bullets: [star],
     }, {
         name: _lt('Design'),
         columns: [_lt('New Request'), _lt('Design'), _lt('Client Review'), _lt('Handoff')],
         get description() {
-            return markup(renderToString("project.example.generic"));
+            return renderToMarkup("project.example.generic");
         },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Publishing'),
         columns: [_lt('Ideas'), _lt('Writing'), _lt('Editing'), _lt('Published')],
         get description() {
-            return markup(renderToString("project.example.generic"));
+            return renderToMarkup("project.example.generic");
         },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Manufacturing'),
         columns: [_lt('New Orders'), _lt('Material Sourcing'), _lt('Manufacturing'), _lt('Assembling'), _lt('Delivered')],
         get description() {
-            return markup(renderToString("project.example.generic"));
+            return renderToMarkup("project.example.generic");
         },
         bullets: [greenBullet, redBullet, star, clock],
     }, {
         name: _lt('Podcast and Video Production'),
         columns: [_lt('Research'), _lt('Script'), _lt('Recording'), _lt('Mixing'), _lt('Published')],
         get description() {
-            return markup(renderToString("project.example.generic"));
+            return renderToMarkup("project.example.generic");
         },
         bullets: [greenBullet, redBullet, star, clock],
     }],
diff --git a/addons/web/static/src/core/utils/render.js b/addons/web/static/src/core/utils/render.js
index 42820e40b24..d5ff1c1a90d 100644
--- a/addons/web/static/src/core/utils/render.js
+++ b/addons/web/static/src/core/utils/render.js
@@ -1,15 +1,15 @@
 /** @odoo-module **/
 
-const { blockDom } = owl;
+const { blockDom, markup } = owl;
 
 /**
- * loads a template using getTemplate, and render the template immediately;
+ * renders a template with an (optional) context and returns a Markup string,
+ * suitable to be inserted in a template with a t-out directive
  *
  * @param {string} template
  * @param {Object} context
  * @returns string: the html of the template
  */
-
 export function renderToString(template, context = {}) {
     const app = renderToString.app;
     if (!app) {
@@ -21,3 +21,15 @@ export function renderToString(template, context = {}) {
     blockDom.mount(bdom, div);
     return div.innerHTML;
 }
+
+/**
+ * renders a template with an (optional) context and returns a Markup string,
+ * suitable to be inserted in a template with a t-out directive
+ *
+ * @param {string} template
+ * @param {Object} context
+ * @returns string: the html of the template, as a markup string
+ */
+export function renderToMarkup(template, context = {}) {
+    return markup(renderToString(template, context));
+}

From 827960748887b2ddeaa848707fadcfd59c0f6665 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Wed, 29 Jun 2022 14:53:38 +0000
Subject: [PATCH 48/50] [FIX] web: list: keep list orderBy when (un)grouping

When (un)grouping a (new) list view, the list orderBy (if any) was not
kept. We fix that.

Part-of: odoo/odoo#92475
---
 .../web/static/src/views/relational_model.js  |  4 +-
 .../tests/views/form/form_view_tests.js       |  7 ++-
 .../web/static/tests/views/list_view_tests.js | 46 +++++++++++++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/addons/web/static/src/views/relational_model.js b/addons/web/static/src/views/relational_model.js
index 7886a780f2c..1679d5e6e4c 100644
--- a/addons/web/static/src/views/relational_model.js
+++ b/addons/web/static/src/views/relational_model.js
@@ -1322,7 +1322,8 @@ class DynamicList extends DataPoint {
     setup(params, state) {
         this.groupBy = params.groupBy || [];
         this.domain = markRaw(params.domain || []);
-        this.orderBy = params.orderBy || []; // rename orderBy + get back from state
+        this.orderBy =
+            params.orderBy && params.orderBy.length ? params.orderBy : state.orderBy || []; // rename orderBy
         this.offset = state.offset || 0;
         this.count = 0;
         this.limit = params.limit || state.limit || this.constructor.DEFAULT_LIMIT;
@@ -1425,6 +1426,7 @@ class DynamicList extends DataPoint {
         return {
             limit: this.limit,
             loadedCount: this.records.length,
+            orderBy: this.orderBy,
             previousParams: this.currentParams,
         };
     }
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 6734abecd58..1e167f2b532 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -8852,7 +8852,7 @@ QUnit.module("Views", (hooks) => {
     });
 
     QUnit.test("coming to a form view from a grouped and sorted list", async function (assert) {
-        assert.expect(21);
+        assert.expect(22);
         serverData.actions = {
             1: {
                 id: 1,
@@ -8918,15 +8918,18 @@ QUnit.module("Views", (hooks) => {
             "blip",
             "yop",
         ]);
+
         await toggleGroupByMenu(target);
         await toggleMenuItem(target, "bar");
         assert.containsN(target, ".o_group_header", 2);
+        assert.containsNone(target, ".o_data_row");
 
         await click(target.querySelectorAll(".o_group_header")[1]);
         assert.containsN(target, ".o_group_header", 2);
         assert.containsN(target, ".o_data_row", 2);
 
-        await click(target.querySelector(".o_data_cell"));
+        const secondDataRow = target.querySelectorAll(".o_data_row")[1];
+        await click(secondDataRow.querySelector(".o_data_cell"));
         assert.containsOnce(target, ".o_form_view");
         assert.deepEqual(getNodesTextContent(target.querySelectorAll(".o_data_cell")), [
             "gold",
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 811a5915d4d..6f8ee81afa6 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -13919,4 +13919,50 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_group_open");
         assert.containsN(target, ".o_data_row", 3);
     });
+
+    QUnit.test("keep order after grouping", async (assert) => {
+        serverData.models.foo.fields.foo.sortable = true;
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree>
+                    <field name="foo"/>
+                </tree>`,
+            searchViewArch: `
+                <search>
+                    <filter name="group_by_foo" string="Foo" context="{'group_by':'foo'}"/>
+                </search>`,
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row td[name=foo]")].map((r) => r.innerText),
+            ["yop", "blip", "gnap", "blip"]
+        );
+
+        // Descending order on Bar
+        await click(target, "th.o_column_sortable[data-name=foo]");
+        await click(target, "th.o_column_sortable[data-name=foo]");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row td[name=foo]")].map((r) => r.innerText),
+            ["yop", "gnap", "blip", "blip"]
+        );
+
+        await toggleGroupByMenu(target);
+        await toggleMenuItem(target, "Foo");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_group_name")].map((r) => r.innerText),
+            ["yop (1)", "gnap (1)", "blip (2)"]
+        );
+
+        await toggleMenuItem(target, "Foo");
+
+        assert.deepEqual(
+            [...target.querySelectorAll(".o_data_row td[name=foo]")].map((r) => r.innerText),
+            ["yop", "gnap", "blip", "blip"]
+        );
+    });
 });

From dc6834b21652df0e2284c92eff410a85c3edde6c Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Wed, 29 Jun 2022 12:34:11 +0000
Subject: [PATCH 49/50] [FIX] web: list: save list orderBy in favorite

When creating a favorite in a (new) list view, the list orderBy (if any)
was not saved with the favorite. We fix that.

Part-of: odoo/odoo#92475
---
 addons/web/static/src/search/search_model.js  |  7 +++-
 .../src/search/with_search/with_search.js     |  3 ++
 .../static/src/views/list/list_controller.js  |  3 ++
 .../src/webclient/actions/action_hook.js      |  4 ++
 .../web/static/tests/views/list_view_tests.js | 41 +++++++++----------
 5 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/addons/web/static/src/search/search_model.js b/addons/web/static/src/search/search_model.js
index 72e1704ca0a..7e5f83341e5 100644
--- a/addons/web/static/src/search/search_model.js
+++ b/addons/web/static/src/search/search_model.js
@@ -1738,6 +1738,11 @@ export class SearchModel extends EventBus {
         const { description, isDefault, isShared } = params;
         const fns = this.env.__getContext__.callbacks;
         const localContext = Object.assign({}, ...fns.map((fn) => fn()));
+        const gs = this.env.__getOrderBy__.callbacks;
+        let localOrderBy;
+        if (gs.length) {
+            localOrderBy = gs.flatMap((g) => g());
+        }
         const context = makeContext([this._getContext(), localContext]);
         const userContext = this.userService.context;
         for (const key in context) {
@@ -1749,7 +1754,7 @@ export class SearchModel extends EventBus {
         const domain = this._getDomain({ raw: true, withGlobal: false }).toString();
         const groupBys = this._getGroupBy();
         const comparison = this.getFullComparison();
-        const orderBy = this._getOrderBy();
+        const orderBy = localOrderBy || this._getOrderBy();
         const userId = isShared ? false : this.userService.userId;
 
         const preFavorite = {
diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js
index b371ff93a51..1c7b3367d19 100644
--- a/addons/web/static/src/search/with_search/with_search.js
+++ b/addons/web/static/src/search/with_search/with_search.js
@@ -13,6 +13,9 @@ export class WithSearch extends Component {
         if (!this.env.__getContext__) {
             useSubEnv({ __getContext__: new CallbackRecorder() });
         }
+        if (!this.env.__getOrderBy__) {
+            useSubEnv({ __getOrderBy__: new CallbackRecorder() });
+        }
 
         const SearchModelClass = this.props.SearchModel || SearchModel;
         this.searchModel = new SearchModelClass(this.env, {
diff --git a/addons/web/static/src/views/list/list_controller.js b/addons/web/static/src/views/list/list_controller.js
index 1d4a585fd12..3d0a1f4a196 100644
--- a/addons/web/static/src/views/list/list_controller.js
+++ b/addons/web/static/src/views/list/list_controller.js
@@ -104,6 +104,9 @@ export class ListController extends Component {
                     rootState: this.model.root.exportState(),
                 };
             },
+            getOrderBy: () => {
+                return this.model.root.orderBy;
+            },
         });
 
         usePager(() => {
diff --git a/addons/web/static/src/webclient/actions/action_hook.js b/addons/web/static/src/webclient/actions/action_hook.js
index 43a7112abff..bb4e96d8c08 100644
--- a/addons/web/static/src/webclient/actions/action_hook.js
+++ b/addons/web/static/src/webclient/actions/action_hook.js
@@ -59,6 +59,7 @@ export function useSetupAction(params = {}) {
         __getGlobalState__,
         __getLocalState__,
         __getContext__,
+        __getOrderBy__,
     } = component.env;
 
     const { beforeUnload, beforeLeave, getGlobalState, getLocalState, rootRef } = params;
@@ -150,4 +151,7 @@ export function useSetupAction(params = {}) {
     if (__getContext__ && params.getContext) {
         useCallbackRecorder(__getContext__, params.getContext);
     }
+    if (__getOrderBy__ && params.getOrderBy) {
+        useCallbackRecorder(__getOrderBy__, params.getOrderBy);
+    }
 }
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 6f8ee81afa6..536d732c972 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -36,6 +36,7 @@ import {
     triggerHotkey,
 } from "../helpers/utils";
 import {
+    editFavoriteName,
     getButtons,
     getFacetTexts,
     getPagerLimit,
@@ -43,11 +44,13 @@ import {
     groupByMenu,
     pagerNext,
     pagerPrevious,
+    saveFavorite,
     toggleActionMenu,
     toggleFavoriteMenu,
     toggleFilterMenu,
     toggleGroupByMenu,
     toggleMenuItem,
+    toggleSaveFavorite,
     validateSearch,
 } from "../search/helpers";
 import { createWebClient, doAction, loadState } from "../webclient/helpers";
@@ -1520,40 +1523,36 @@ QUnit.module("Views", (hooks) => {
     );
 
     QUnit.test("ordered target, sort attribute in context", async function (assert) {
-        // Equivalent to saving a custom filter
-        // FIXME WOWL: no it isn't
-
         serverData.models.foo.fields.foo.sortable = true;
         serverData.models.foo.fields.date.sortable = true;
 
-        const list = await makeView({
+        await makeView({
             type: "list",
             resModel: "foo",
             serverData,
             arch: '<tree><field name="foo"/><field name="date"/></tree>',
+            mockRPC: (route, args) => {
+                if (args.method === "create_or_replace") {
+                    const favorite = args.args[0];
+                    assert.step(favorite.sort);
+                    return 7;
+                }
+            },
         });
 
         // Descending order on Foo
-        await click($(target).find('th.o_column_sortable:contains("Foo")')[0]);
-        await click($(target).find('th.o_column_sortable:contains("Foo")')[0]);
+        await click(target, "th.o_column_sortable[data-name=foo]");
+        await click(target, "th.o_column_sortable[data-name=foo]");
 
         // Ascending order on Date
-        await click($(target).find('th.o_column_sortable:contains("Date")')[0]);
+        await click(target, "th.o_column_sortable[data-name=date]");
 
-        assert.deepEqual(
-            list.model.root.orderBy,
-            [
-                {
-                    name: "date",
-                    asc: true,
-                },
-                {
-                    name: "foo",
-                    asc: false,
-                },
-            ],
-            "the list should have the right orderedBy"
-        );
+        await toggleFavoriteMenu(target);
+        await toggleSaveFavorite(target);
+        await editFavoriteName(target, "My favorite");
+        await saveFavorite(target);
+
+        assert.verifySteps(['["date","foo desc"]']);
     });
 
     QUnit.test("Loading a filter with a sort attribute", async function (assert) {

From fb5815edfd811e619fc3a08c9021c29768a5d86f Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Wed, 29 Jun 2022 14:54:01 +0000
Subject: [PATCH 50/50] [FIX] web,board: remember list orderBy

When adding a (new) list view to the Dashboard app, the list orderBy (if
any) was lost. We fix that.

Part-of: odoo/odoo#92475
---
 .../static/src/add_to_board/add_to_board.js   | 11 ++++++--
 .../static/tests/add_to_dashboard_tests.js    | 25 ++++++++-----------
 addons/web/static/src/search/search_model.js  |  5 ++++
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/addons/board/static/src/add_to_board/add_to_board.js b/addons/board/static/src/add_to_board/add_to_board.js
index f7a777e5f0d..2d4cf715199 100644
--- a/addons/board/static/src/add_to_board/add_to_board.js
+++ b/addons/board/static/src/add_to_board/add_to_board.js
@@ -36,11 +36,18 @@ export class AddToBoard extends Component {
 
     async addToBoard() {
         const { domain, globalContext } = this.env.searchModel;
-        const { context } = this.env.searchModel.getIrFilterValues();
+        const {
+            comparison,
+            context,
+            groupBys,
+            orderBy,
+        } = this.env.searchModel.getPreFavoriteValues();
         const contextToSave = {
             ...globalContext,
             ...context,
-            orderedBy: this.env.searchModel.orderBy,
+            comparison,
+            orderedBy: orderBy,
+            group_by: groupBys,
             dashboard_merge_domains_contexts: false,
         };
 
diff --git a/addons/board/static/tests/add_to_dashboard_tests.js b/addons/board/static/tests/add_to_dashboard_tests.js
index 298d93798e5..6167d7227d0 100644
--- a/addons/board/static/tests/add_to_dashboard_tests.js
+++ b/addons/board/static/tests/add_to_dashboard_tests.js
@@ -98,7 +98,7 @@ QUnit.module("Board", (hooks) => {
     QUnit.module("Add to dashboard");
 
     QUnit.test("save actions to dashboard", async function (assert) {
-        assert.expect(5);
+        assert.expect(6);
 
         serverData.models.partner.fields.foo.sortable = true;
 
@@ -115,19 +115,16 @@ QUnit.module("Board", (hooks) => {
                     ["foo"],
                     "The group_by should have been saved"
                 );
-                // FIXME WOWL
-                // skip this assertion for now, because the list view does not
-                // keep the order after grouping (not yet, this is a bug)
-                // assert.deepEqual(
-                //     args.context_to_save.orderedBy,
-                //     [
-                //         {
-                //             name: "foo",
-                //             asc: true,
-                //         },
-                //     ],
-                //     "The orderedBy should have been saved"
-                // );
+                assert.deepEqual(
+                    args.context_to_save.orderedBy,
+                    [
+                        {
+                            name: "foo",
+                            asc: true,
+                        },
+                    ],
+                    "The orderedBy should have been saved"
+                );
                 assert.strictEqual(
                     args.context_to_save.fire,
                     "on the bayou",
diff --git a/addons/web/static/src/search/search_model.js b/addons/web/static/src/search/search_model.js
index 7e5f83341e5..6007b95b831 100644
--- a/addons/web/static/src/search/search_model.js
+++ b/addons/web/static/src/search/search_model.js
@@ -747,6 +747,11 @@ export class SearchModel extends EventBus {
         return irFilter;
     }
 
+    getPreFavoriteValues(params) {
+        const { preFavorite } = this._getIrFilterDescription(params);
+        return preFavorite;
+    }
+
     /**
      * Return an array containing enriched copies of all searchElements or of those
      * satifying the given predicate if any