[FIX] web: add display:contents to wrapper div in fields

With the new views in owl, we wrapped every field in a div with the
class o_field_widget. This is a good thing in general, but it has the
issue that before this commit, the display property was set to
inline-block, in all cases.

With this commit, we set it to 'contents', which means that it will
simply get the correct display value from its content.

Part-of: odoo/odoo#96865

addons/web/static/src/legacy/js/fields/abstract_field.js

@@ -221,7 +221,7 @@ var AbstractField = Widget.extend({
         var self = this;
         return this._super.apply(this, arguments).then(function () {
             self.$el.attr('name', self.name);
-            self.$el.addClass('o_field_widget');
+            self.$el.addClass('o_field_widget').addClass("o_legacy_field_widget");
             self.$el.toggleClass('o_quick_editable', self._canQuickEdit);
             if (self.viewType === 'form') {
                 self.$el.on('click', self._onClick.bind(self));

addons/web/static/src/legacy/scss/fields.scss

@@ -61,7 +61,12 @@
 
 .o_field_widget {
     // Default display and alignment of widget and internal <input/>
-    &, input.o_input {
+    text-align: inherit;
+
+    &.o_legacy_field_widget {
+        display: inline-block;
+    }
+    input.o_input {
         display: inline-block;
         text-align: inherit;
     }

addons/web/static/src/legacy/xml/base.xml

@@ -1053,7 +1053,7 @@
 <t t-name="FieldReference" t-extend="FieldMany2One">
     <t t-jquery=".o_input_dropdown" t-operation="before">
         <t t-if="!widget.nodeOptions.model_field">
-            <select t-att-class="'o_input o_field_widget' + (widget.nodeOptions.hide_model and ' d-none' or '')">
+            <select t-att-class="'o_input o_field_widget o_legacy_field_widget' + (widget.nodeOptions.hide_model and ' d-none' or '')">
                 <option/>
                 <option t-foreach="widget.field.selection" t-as="model" t-key="model_index" t-att-value="model[0]"><t t-esc="model[1]"/></option>
             </select>

addons/web/static/src/views/fields/fields.scss

@@ -1,3 +1,8 @@
 .o_field_cursor_disabled {
     cursor: not-allowed;
 }
+
+// TODO: remove legacy selector when there are no remaining legacy fields in codebase
+div.o_field_widget:not(.o_legacy_field_widget) {
+    display: contents;
+}

addons/web/static/tests/views/fields/text_field_tests.js

@@ -292,11 +292,12 @@ QUnit.module("Fields", (hooks) => {
 
             // switch to edit mode to ensure that autoresize is correctly done
             await click(target.querySelector(".o_form_button_edit"));
-            let height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+            let height = target.querySelector(".o_field_widget[name=text_field] textarea")
+                .offsetHeight;
             // focus the field to manually trigger autoresize
             await triggerEvent(target, ".o_field_widget[name=text_field] textarea", "focus");
             assert.strictEqual(
-                target.querySelector(".o_field_widget[name=text_field]").offsetHeight,
+                target.querySelector(".o_field_widget[name=text_field] textarea").offsetHeight,
                 height,
                 "autoresize should have been done automatically at rendering"
             );
@@ -307,11 +308,11 @@ QUnit.module("Fields", (hooks) => {
             // save and create a new record to ensure that autoresize is correctly done
             await click(target.querySelector(".o_form_button_save"));
             await click(target.querySelector(".o_form_button_create"));
-            height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+            height = target.querySelector(".o_field_widget[name=text_field] textarea").offsetHeight;
             // focus the field to manually trigger autoresize
             await triggerEvent(target, ".o_field_widget[name=text_field] textarea", "focus");
             assert.strictEqual(
-                target.querySelector(".o_field_widget[name=text_field]").offsetHeight,
+                target.querySelector(".o_field_widget[name=text_field] textarea").offsetHeight,
                 height,
                 "autoresize should have been done automatically at rendering"
             );
@@ -357,13 +358,13 @@ QUnit.module("Fields", (hooks) => {
         await click(target.querySelectorAll(".o_notebook .nav .nav-link")[1]);
         assert.hasClass(target.querySelectorAll(".o_notebook .nav .nav-link")[1], "active");
 
-        let height = target.querySelector(".o_field_widget[name=text_field]").offsetHeight;
+        let height = target.querySelector(".o_field_widget[name=text_field] textarea").offsetHeight;
         assert.ok(height > 80, "textarea should have an height of at least 80px");
 
         await click(target.querySelectorAll(".o_notebook .nav .nav-link")[2]);
         assert.hasClass(target.querySelectorAll(".o_notebook .nav .nav-link")[2], "active");
 
-        height = target.querySelector(".o_field_widget[name=text_field_empty]").offsetHeight;
+        height = target.querySelector(".o_field_widget[name=text_field_empty] textarea").offsetHeight;
         assert.strictEqual(height, 50, "empty textarea should have height of 50px");
     });
 

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

@@ -9145,7 +9145,7 @@ QUnit.module("Views", (hooks) => {
 
         assert.containsN(target, ".o_kanban_record:not(.o_kanban_ghost)", 4);
 
-        await click(target.querySelector(".o_field_image"));
+        await click(target.querySelector(".o_field_image"), null, { skipVisibilityCheck: true });
     });
 
     QUnit.test("kanban view with boolean field", async (assert) => {