From fb0bebc6cff2374d0d5ee392d62af0279b885a92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Wed, 27 Jul 2022 11:47:20 +0000 Subject: [PATCH] [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 --- .../static/src/legacy/js/fields/abstract_field.js | 2 +- addons/web/static/src/legacy/scss/fields.scss | 7 ++++++- addons/web/static/src/legacy/xml/base.xml | 2 +- addons/web/static/src/views/fields/fields.scss | 5 +++++ .../static/tests/views/fields/text_field_tests.js | 13 +++++++------ addons/web/static/tests/views/kanban_view_tests.js | 2 +- 6 files changed, 21 insertions(+), 10 deletions(-) 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.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 @@ - 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) => {