From d92a8b5ffdda1706d7a3fec012891e3d37dbb31d Mon Sep 17 00:00:00 2001
From: william <wan@odoo.com>
Date: Mon, 22 Aug 2022 14:46:35 +0000
Subject: [PATCH] [IMP] web: continue to edit lists when editable=top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous behavior
================

When `editable=bottom`, when we hit tab until the end of the line, the
user starts to create a new record.
But when `editable=top`, when hitting tab multiple until the end of the
line, the user starts to edit the first line that was existing before
instead of creating a new one.

New behavior
============

The behavior is consistent between both cases: the user can always
continue to edit lines one after the other.
The behavior for `editable=bottom` is not changed, but `editable=top`
continues to add lines on top one of each other.

linked to task-2879904

closes odoo/odoo#98603

Signed-off-by: Georis François (fge) <fge@odoo.com>
---
 .../static/src/views/list/list_renderer.js    |  7 ++++-
 .../web/static/tests/views/list_view_tests.js | 28 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index da45ebb672a..b0addd99383 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -1157,6 +1157,7 @@ export class ListRenderer extends Component {
         const { activeActions, cycleOnTab, list } = this.props;
         const row = cell.parentElement;
         const applyMultiEditBehavior = record && record.selected && list.model.multiEdit;
+        const topReCreate = this.props.editable === 'top' && record.isNew;
 
         if (
             applyMultiEditBehavior &&
@@ -1176,7 +1177,8 @@ export class ListRenderer extends Component {
         switch (hotkey) {
             case "tab": {
                 const index = list.records.indexOf(record);
-                if (index === list.records.length - 1) {
+                const lastIndex = topReCreate ? 0 : list.records.length - 1;
+                if (index === lastIndex) {
                     if (this.displayRowCreates) {
                         if (record.isNew && !record.isDirty) {
                             list.unselectRecord(true);
@@ -1243,6 +1245,9 @@ export class ListRenderer extends Component {
             case "enter": {
                 const index = list.records.indexOf(record);
                 let futureRecord = list.records[index + 1];
+                if (topReCreate && index === 0) {
+                    futureRecord = null;
+                }
 
                 if (!futureRecord) {
                     if (activeActions && activeActions.create === false) {
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index b5e08e2e8a6..c99a27a3f06 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -13641,6 +13641,34 @@ QUnit.module("Views", (hooks) => {
         assert.strictEqual(document.activeElement, intFieldInput);
     });
 
+    QUnit.test("continue creating new lines in editable=top on keyboard nav", async function (assert) {
+        await makeView({
+            type: "list",
+            resModel: "foo",
+            serverData,
+            arch: `
+                <tree editable="top">
+                    <field name="int_field"/>
+                </tree>`,
+        });
+
+        let initialRowCount = $('.o_data_cell[name=int_field]').length
+
+        // click on int_field cell of first row
+        await click(target, ".o_list_button_add");
+
+        await editInput(target, ".o_data_cell[name=int_field] input", "1");
+        triggerHotkey("Tab");
+        await nextTick();
+
+        await editInput(target, ".o_data_cell[name=int_field] input", "2");
+        triggerHotkey("Enter");
+        await nextTick();
+
+        // 3 new rows: the two created ("1" and "2", and a new still in edit mode)
+        assert.strictEqual($('.o_data_cell[name=int_field]').length , initialRowCount + 3);
+    });
+
     QUnit.test("Date in evaluation context works with date field", async function (assert) {
         patchDate(1997, 0, 9, 12, 0, 0);