[FIX] web: list editable create then escape

Have an editable list that begins with a date/time field
create a line.
The first field is focused and the datetimepicker is popped up

Now, stroke ESC key

Before this commit, there was a traceback because the datetimepicker received an erroneous
BLUR/INPUT event

After this commit, there is no traceback as we detroy the widgets of the line
(including the datetimepicker) before removing the row from the DOM

OPW 1932409

closes odoo/odoo#31342

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

@@ -278,6 +278,8 @@ ListRenderer.include({
             this.currentRow = null;
         }
 
+        // destroy widgets first
+        this._destroyFieldWidgets(recordID);
         // remove the row
         var $row = this.$('.o_data_row:nth(' + rowIndex + ')');
         if (this.state.count >= 4) {
@@ -285,8 +287,6 @@ ListRenderer.include({
         } else {
             $row.replaceWith(this._renderEmptyRow());
         }
-
-        this._destroyFieldWidgets(recordID);
     },
     /**
      * Updates the already rendered row associated to the given recordID so that

addons/web/static/tests/views/list_tests.js

@@ -10,6 +10,7 @@ var ListView = require('web.ListView');
 var mixins = require('web.mixins');
 var NotificationService = require('web.NotificationService');
 var testUtils = require('web.test_utils');
+var testUtilsDom = require('web.test_utils_dom');
 var widgetRegistry = require('web.widget_registry');
 var Widget = require('web.Widget');
 
@@ -277,6 +278,51 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('editable list datetimepicker destroy widget', function (assert) {
+        assert.expect(7);
+        var done = assert.async();
+
+        var list = createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: '<tree editable="top">' +
+                    '<field name="date"/>' +
+                '</tree>',
+        });
+        list.$el.on({
+            'show.datetimepicker': function () {
+                assert.equal($('.bootstrap-datetimepicker-widget').length, 1,
+                    'The datetimepicker is open');
+
+                assert.equal(list.$('.o_data_row').length, 5,
+                    'There should be 5 rows');
+
+                assert.equal(list.$('.o_selected_row').length, 1,
+                    'One row in edit mode');
+
+                list.$('input.o_datepicker_input').trigger($.Event('keydown', {which: $.ui.keyCode.ESCAPE}));
+
+                assert.equal(list.$('.o_data_row').length, 4,
+                    'There should be 4 rows');
+
+                assert.equal(list.$('.o_selected_row').length, 0,
+                    'No row should be in edit mode');
+
+                done();
+            }
+        });
+        assert.equal(list.$('.o_data_row').length, 4,
+            'There should be 4 rows');
+
+        assert.equal(list.$('.o_selected_row').length, 0,
+            'No row should be in edit mode');
+
+        testUtilsDom.click(list.$buttons.find('.o_list_button_add'));
+
+        list.destroy();
+    });
+
     QUnit.test('at least 4 rows are rendered, even if less data', function (assert) {
         assert.expect(1);