[FIX] web: display of timezone mismatch select widget

On the user's preference, change the timezone to one that is different
from the browser.
Save the form.

Go back to the user's preferences.

Before this commit, every timezone was displayed inside the span that contain
the warning icon, and leaked everywhere on the form view.

This was because of the joint action effects of commits:
86897ca167338ca434e62827fa09f44ddbce324c
4dfabb8f7adde06a7936502af61534c9958ed4f7

Which provoked the field to be re-rendered in edit mode,
but with an $el on which a span was added. `<option/>` elements
were then added to both `<select>` and `<span>`
This did not happen before v12.0

After this commit, there is no display glitch

OPW 1895088

closes odoo/odoo#28108

2 files changed, 61 insertions, 0 deletions

diff --git a/addons/web/static/src/js/fields/special_fields.js b/addons/web/static/src/js/fields/special_fields.js
index 5a6aa8cfd28..90c4f589989 100644
--- a/addons/web/static/src/js/fields/special_fields.js
+++ b/addons/web/static/src/js/fields/special_fields.js
@@ -100,6 +100,25 @@ var FieldTimezoneMismatch = FieldSelection.extend({
             this._renderDateTimeTimezone();
         }
     },
+    /**
+     * @override
+     * @private
+     * this.$el can have other elements than select
+     * that should not be touched
+     */
+    _renderEdit: function () {
+        // FIXME: hack to handle multiple root elements
+        // in this.$el , which is a bad idea
+        // In master we should make this.$el a wrapper
+        // around multiple subelements
+        var $otherEl = this.$el.not('select');
+        this.$el = this.$el.first();
+
+        this._super.apply(this, arguments);
+
+        $otherEl.insertAfter(this.$el);
+        this.$el = this.$el.add($otherEl);
+    },
 });
 
 var FieldReportLayout = relational_fields.FieldMany2One.extend({
diff --git a/addons/web/static/tests/fields/special_fields.js b/addons/web/static/tests/fields/special_fields.js
index 3592f813fae..8a605458546 100644
--- a/addons/web/static/tests/fields/special_fields.js
+++ b/addons/web/static/tests/fields/special_fields.js
@@ -213,6 +213,48 @@ QUnit.module('special_fields', {
         form.destroy();
     });
 
+    QUnit.test('widget timezone_mismatch in a form view edit mode with mismatch', function (assert) {
+        assert.expect(3);
+
+        this.data.partner.fields.tz_offset = {
+            string: "tz_offset",
+            type: "char"
+        };
+        this.data.partner.fields.tz = {
+            type: "selection",
+            selection: [['Europe/Brussels', "Europe/Brussels"], ['America/Los_Angeles', "America/Los_Angeles"]],
+        };
+        this.data.partner.records[0].tz = 'America/Los_Angeles';
+        this.data.partner.records[0].tz_offset = '+4800';
+
+        var form = createView({
+            debug:true,
+            View: FormView,
+            model: 'partner',
+            res_id: 1,
+            data: this.data,
+            arch: '<form>' +
+                    '<field name="tz_offset" invisible="True"/>' +
+                    '<field name="tz" widget="timezone_mismatch" options="{\'tz_offset_field\': \'tz_offset\'}"/>' +
+                '</form>',
+            viewOptions: {
+                mode: 'edit',
+            },
+        });
+
+        var $timezoneEl = form.$('select[name="tz"]');
+        assert.strictEqual($timezoneEl.children().length, 3,
+            'The select element should have 3 children');
+
+        var $timezoneMismatch = form.$('.o_tz_warning');
+        assert.strictEqual($timezoneMismatch.length, 1,
+            'timezone mismatch is present');
+
+        assert.notOk($timezoneMismatch.children().length,
+            'The mismatch element should not have children');
+        form.destroy();
+    });
+
     QUnit.module('FieldReportLayout');
 
     QUnit.test('report_layout widget in form view', function (assert) {