[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:
86897ca167
4dfabb8f7a

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

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({

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) {