[FIX] web: boolean_toggle widget ignores readonly attribute

The boolean_toggle should only be disabled when there is a readonly
modifier, not when the view is in readonly mode.

Cause of the issue

  The input was disabled but the `_onClick` was registered on the
  widget root node.

Solution

  - Listen for clicks on the input element
  - Override the render method to set the disabled prop according to the
    readonly modifier.

opw-2739468

closes odoo/odoo#91601

X-original-commit: 29a2402153dc95414dad8c833487e7dd18c8a222
Signed-off-by: Michaël Mattiello <mcm@odoo.com>
Signed-off-by: Hubert Van De Walle <huvw@odoo.com>

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

@@ -3007,6 +3007,9 @@ var BooleanToggle = FieldBoolean.extend({
      * Adds the icon fa-check-circle if value is true else adds icon
      * fa-times-circle
      *
+     * The boolean_toggle should only be disabled when there is a readonly modifier
+     * not when the view is in readonly mode
+     *
      * @override
      */
     async _render() {
@@ -3018,6 +3021,8 @@ var BooleanToggle = FieldBoolean.extend({
         const i = document.createElement("i");
         i.setAttribute('class', `fa ${classToApply}`);
         this.el.querySelector('label').appendChild(i);
+        const isReadonly = this.record.evalModifiers(this.attrs.modifiers).readonly || false;
+        this.$input.prop('disabled', isReadonly);
     },
 
     //--------------------------------------------------------------------------
@@ -3032,8 +3037,10 @@ var BooleanToggle = FieldBoolean.extend({
      */
     _onClick: async function (event) {
         event.stopPropagation();
-        await this._setValue(!this.value);
-        this._render();
+        if (!this.$input.prop('disabled')) {
+            await this._setValue(!this.value);
+            this._render();
+        }
     },
 });
 

addons/web/static/tests/legacy/fields/basic_fields_tests.js

@@ -421,6 +421,63 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('boolean toggle widget is not disabled in readonly mode', async function (assert) {
+        assert.expect(3);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
+            res_id: 5,
+        });
+
+        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
+        await testUtils.dom.click(form.$('.o_boolean_toggle'));
+        assert.ok(form.$('.o_boolean_toggle input')[0].checked);
+        form.destroy();
+    });
+
+    QUnit.test('boolean toggle widget is disabled with a readonly attribute', async function (assert) {
+        assert.expect(3);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form><field name="bar" widget="boolean_toggle" readonly="1"/></form>',
+            res_id: 5,
+        });
+
+        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        await testUtils.dom.click(form.$buttons.find('.o_form_button_edit'));
+        assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
+        await testUtils.dom.click(form.$('.o_boolean_toggle'));
+        assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
+        form.destroy();
+    });
+
+    QUnit.test('boolean toggle widget is enabled in edit mode', async function (assert) {
+        assert.expect(3);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form><field name="bar" widget="boolean_toggle"/></form>',
+            res_id: 5,
+        });
+
+        assert.containsOnce(form, ".custom-checkbox.o_boolean_toggle", "Boolean toggle widget applied to boolean field");
+        await testUtils.dom.click(form.$buttons.find('.o_form_button_edit'));
+
+        assert.notOk(form.$('.o_boolean_toggle input')[0].checked);
+        await testUtils.dom.click(form.$('.o_boolean_toggle'));
+        assert.ok(form.$('.o_boolean_toggle input')[0].checked);
+        form.destroy();
+    });
+
     QUnit.module('FieldToggleButton');
 
     QUnit.test('use toggle_button in list view', async function (assert) {