[FIX] web: boolean widgets in list views

Before this commit, pointer events were prevented on all checkboxes in readonly
list views. That meant that the boolean_toggle widget for instance could not be
properly toggled in a non-editable list (which was the purpose of such a widget).

Now, pointer events are enabled only if the checkbox :
- is in a selected row AND does not have a readonly modifier
    OR
- has a widget applied on the field.

Also ensured that the field widgets in the list view multi edition confirmation
modal are not interactive.

We cannot test the `pointer-events` property interactions as it does not affect
manual event triggering used in tests.

Task 2154055

closes odoo/odoo#42848

X-original-commit: c7ee164d572e01fcb565001fd5e62fe1278b5cd8
Signed-off-by: Julien Mougenot (JUM) <Arcasias@users.noreply.github.com>

3 files changed, 18 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/list/list_confirm_dialog.js b/addons/web/static/src/js/views/list/list_confirm_dialog.js
index 8ed07a73ca0..ea0a3191f9e 100644
--- a/addons/web/static/src/js/views/list/list_confirm_dialog.js
+++ b/addons/web/static/src/js/views/list/list_confirm_dialog.js
@@ -69,6 +69,7 @@ const ListConfirmDialog = Dialog.extend({
      */
     start: function () {
         this.$content.find('.o_changes_widget').replaceWith(this.fieldWidget.$el);
+        this.fieldWidget.el.style.pointerEvents = 'none';
         return this._super.apply(this, arguments);
     },
 });
diff --git a/addons/web/static/src/scss/list_view.scss b/addons/web/static/src/scss/list_view.scss
index d6237f0e7ee..951730f1569 100644
--- a/addons/web/static/src/scss/list_view.scss
+++ b/addons/web/static/src/scss/list_view.scss
@@ -206,13 +206,23 @@
             width: 32px;
         }
 
-        // checkboxes in editable lists should be clickable and activate the row
         .o_data_row:not(.o_selected_row) .o_data_cell {
-            &.o_toggle_button_cell:not(.o_readonly_modifier) button, // registry: toggle_button
-            &.o_boolean_favorite_cell:not(.o_readonly_modifier) .o_favorite, // registry: boolean_favorite
-            .custom-checkbox:not(.o_readonly_modifier) {
+
+            // Boolean fields in non-selected rows completely disabled.
+            .custom-checkbox {
                 pointer-events: none;
             }
+
+            // These widgets enable the checkbox if there is no readonly modifier.
+            &.o_boolean_button_cell,
+            &.o_boolean_favorite_cell,
+            &.o_boolean_toggle_cell,
+            &.o_toggle_button_cell {
+
+                &:not(.o_readonly_modifier) .custom-checkbox {
+                    pointer-events: auto;
+                }
+            }
         }
 
         .o_data_row:not(.o_selected_row) {
diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js
index 2e2235306d1..8c815e334d0 100644
--- a/addons/web/static/tests/views/list_tests.js
+++ b/addons/web/static/tests/views/list_tests.js
@@ -5816,7 +5816,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('editable list view: multi edition with readonly modifiers', async function (assert) {
-        assert.expect(4);
+        assert.expect(5);
 
         var list = await createView({
             View: ListView,
@@ -5849,6 +5849,8 @@ QUnit.module('Views', {
         assert.strictEqual(modalText,
             "Among the 4 selected records, 2 are valid for this update. Are you sure you want to " +
             "perform the following update on those 2 records ? Field: int_field Update to: 666");
+        assert.strictEqual(document.querySelector('.modal .o_modal_changes .o_field_widget').style.pointerEvents, 'none',
+            "pointer events should be deactivated on the demo widget");
 
         await testUtils.dom.click($('.modal .btn-primary'));
         assert.strictEqual(list.$('.o_data_row:eq(0) .o_data_cell').text(), "1yop666",