diff --git a/.changeset/dirty-ducks-juggle.md b/.changeset/dirty-ducks-juggle.md new file mode 100644 index 000000000..f98278b7e --- /dev/null +++ b/.changeset/dirty-ducks-juggle.md @@ -0,0 +1,5 @@ +--- +'@lion/switch': patch +--- + +Fire model-value-changed event with isTriggeredByUser: true when clicking the switch-button. diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index 8d70b6fd4..b5b755eb0 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -122,7 +122,9 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) /** @private */ __handleButtonSwitchCheckedChanged() { + this._isHandlingUserInput = true; this.checked = this._inputNode.checked; + this._isHandlingUserInput = false; } /** @protected */ diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index 37cd55abb..c1bbdd232 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -69,6 +69,29 @@ describe('lion-switch', () => { expect(document.activeElement).to.not.equal(_inputNode); }); + it('clicking the switch or the label should fire the model-value-changed event with isTriggeredByUser: true', async () => { + let isTriggeredByUser = false; + + /** @param {CustomEvent} ev */ + const modelValueChanged = ev => { + isTriggeredByUser = ev.detail.isTriggeredByUser; + }; + + const el = await fixture( + html``, + ); + const { _inputNode, _labelNode } = getSwitchMembers(el); + + _inputNode.click(); + expect(isTriggeredByUser).to.be.true; + isTriggeredByUser = false; + _labelNode.click(); + expect(isTriggeredByUser).to.be.true; + }); + it('should sync its "disabled" state to child button', async () => { const el = await fixture(html``); const { _inputNode } = getSwitchMembers(el);