Merge pull request #2798 from ing-bank/fix/implement-readonly-on-label-click

Fix toggleable readonly switch on label click

Author: ing-athirlwall

.changeset/fifty-corners-juggle.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Fixes toggleable readonly switch on label click

packages/ui/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -238,7 +238,7 @@ const ChoiceInputMixinImplementation = superclass =>
      */
     // eslint-disable-next-line no-unused-vars
     _toggleChecked(ev) {
-      if (this.disabled) {
+      if (this.disabled || this.readOnly) {
         return;
       }
       this._isHandlingUserInput = true;

packages/ui/components/switch/src/LionSwitch.js

@@ -148,7 +148,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
    * @protected
    */
   _onLabelClick() {
-    if (this.disabled) {
+    if (this.disabled || this.readOnly) {
       return;
     }
     this._inputNode.focus();

packages/ui/components/switch/test/lion-switch.test.js

@@ -72,6 +72,13 @@ describe('lion-switch', () => {
     expect(isActiveElement(_inputNode)).to.be.false;
   });
 
+  it('clicking the label should not toggle the checked state when readonly', async () => {
+    const el = await fixture(html`<lion-switch readonly label="Enable Setting"></lion-switch>`);
+    const { _labelNode } = getFormControlMembers(el);
+    _labelNode.click();
+    expect(el.checked).to.be.false;
+  });
+
   it('should sync its "disabled" state to child button', async () => {
     const el = await fixture(html`<lion-switch disabled></lion-switch>`);
     const { _inputNode } = getSwitchMembers(el);