[FIX] web: correctly redraw x2m list after onchange

When an onchange is set on an x2many field displayed as an editable
list in a form view, and the user updates one of the subrecords,
the updated subrecord is kept in the DOM and updated, and all other
subrecords in the relation are re-rendered and re-inserted at their
correct place in the list (because the onchange might have changed
them).

Before this rev., the order of the subrecords after the edited one
was reversed.

addons/web/static/src/js/views/list/list_editable_renderer.js

@@ -160,6 +160,7 @@ ListRenderer.include({
                 }
             });
             var newRowIndex = _.findIndex(state.data, {id: id});
+            var $lastRow = $row;
             _.each(state.data, function (record, index) {
                 if (index === newRowIndex) {
                     return;
@@ -168,7 +169,8 @@ ListRenderer.include({
                 if (index < newRowIndex) {
                     $newRow.insertBefore($row);
                 } else {
-                    $newRow.insertAfter($row);
+                    $newRow.insertAfter($lastRow);
+                    $lastRow = $newRow;
                 }
             });
             if (self.currentRow !== null) {

addons/web/static/tests/fields/relational_fields_tests.js

@@ -3689,6 +3689,44 @@ QUnit.module('relational_fields', {
         AbstractField.prototype.destroy = oldDestroy;
     });
 
+    QUnit.test('one2many editable list with onchange keeps the order', function (assert) {
+        assert.expect(2);
+
+        this.data.partner.records[0].p = [1, 2, 4];
+        this.data.partner.onchanges = {
+            p: function () {},
+        };
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch:'<form string="Partners">' +
+                    '<field name="p">' +
+                        '<tree editable="bottom">' +
+                            '<field name="display_name"/>' +
+                        '</tree>' +
+                    '</field>' +
+                '</form>',
+            res_id: 1,
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+        assert.strictEqual(form.$('.o_data_cell').text(), 'first recordsecond recordaaa',
+            "records should be display in the correct order");
+
+        form.$('.o_data_row:first .o_data_cell').click();
+        form.$('.o_selected_row .o_field_widget[name=display_name]').val('new').trigger('input');
+        form.$el.click(); // click outside to validate the row
+
+        assert.strictEqual(form.$('.o_data_cell').text(), 'newsecond recordaaa',
+            "records should be display in the correct order");
+
+        form.destroy();
+    });
+
     QUnit.test('one2many list (editable): readonly domain is evaluated', function (assert) {
         assert.expect(2);