diff --git a/addons/web/static/src/legacy/js/fields/abstract_field.js b/addons/web/static/src/legacy/js/fields/abstract_field.js
index 12d233bb386..d498ce878f1 100644
--- a/addons/web/static/src/legacy/js/fields/abstract_field.js
+++ b/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));
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 6a26b7bf8de..f36e8bb96b1 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/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;
     }
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index e6a9124025f..590a46b364c 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/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>
diff --git a/addons/web/static/src/views/fields/fields.scss b/addons/web/static/src/views/fields/fields.scss
index d877330e9e6..ee3a8e02383 100644
--- a/addons/web/static/src/views/fields/fields.scss
+++ b/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;
+}
diff --git a/addons/web/static/tests/views/fields/text_field_tests.js b/addons/web/static/tests/views/fields/text_field_tests.js
index a7211c5fa89..7ab0e117e45 100644
--- a/addons/web/static/tests/views/fields/text_field_tests.js
+++ b/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");
     });
 
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 3164299bc0d..70058fa86ad 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/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) => {