[FIX] web: x2many list: edit and long click 'Add a line'

Assume an x2many editable list where the user edits a record (input
field), and then clicks on 'Add a line' (and keeps it pressed for a
while, before releasing the click).

When the 'mousedown' event occurs, the 'change' event is triggered
on the edited field, and (once potential onchanges have been
applied), the list is updated, i.e. all rows except for the one
being edited a re-rendered.

However, the 'Add a line' handler listens to the 'click' event,
which never occurs if we release the click after the rows have been
re-rendered.

This is an issue for every rows, not only 'Add a line', but for
data rows, the issue is already present in former versions, and is
not that easy to fix). The 'Add a line' case is a consequence of
the recent work on list views (see 234d92c4f0c0), so we can fix it
independently.

Task 1915702

1 files changed, 12 insertions, 10 deletions

diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js
index 818739c6f48..9f7cbba8696 100644
--- a/addons/web/static/src/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/js/views/list/list_editable_renderer.js
@@ -162,7 +162,7 @@ ListRenderer.include({
      * This is a specialized version of confirmChange, meant to be called when
      * the change may have affected more than one line (so, for example, an
      * onchange which add/remove a few lines in a x2many.  This does not occur
-     * in a normal list view)
+     * in a normal list view).
      *
      * The update is more difficult when other rows could have been changed. We
      * need to potentially remove some lines, add some other lines, update some
@@ -172,6 +172,9 @@ ListRenderer.include({
      * except the 'main' one (the row which caused the update), then rerender
      * every new row and add them before/after the main one.
      *
+     * Note that this function assumes that the list isn't grouped, which is
+     * fine as it's never the case for x2many lists.
+     *
      * @param {Object} state
      * @param {string} id
      * @param {string[]} fields
@@ -226,18 +229,17 @@ ListRenderer.include({
                     }
                 }
 
-                // remove all rows except the one being edited, and insert rows
-                // of the re-rendered body before and after it
+                // remove all data rows except the one being edited, and insert
+                // data rows of the re-rendered body before and after it
                 var $editedRow = self._getRow(id);
-                $editedRow.nextAll().remove();
-                $editedRow.prevAll().remove();
+                $editedRow.nextAll('.o_data_row').remove();
+                $editedRow.prevAll('.o_data_row').remove();
                 var $newRow = $newBody.find('.o_data_row[data-id="' + id + '"]');
-                var $tbody = self.$('tbody');
-                $newRow.prevAll().each(function (i, prevRow) {
-                    $tbody.prepend($(prevRow));
+                $newRow.prevAll('.o_data_row').get().reverse().forEach(function (row) {
+                    $(row).insertBefore($editedRow);
                 });
-                $newRow.nextAll().each(function (i, nextRow) {
-                    $tbody.append($(nextRow));
+                $newRow.nextAll('.o_data_row').get().reverse().forEach(function (row) {
+                    $(row).insertAfter($editedRow);
                 });
 
                 if (self.currentRow !== null) {