diff --git a/.changeset/curvy-waves-nail.md b/.changeset/curvy-waves-nail.md new file mode 100644 index 000000000..29e10ffca --- /dev/null +++ b/.changeset/curvy-waves-nail.md @@ -0,0 +1,5 @@ +--- +'@lion/switch': patch +--- + +Stop checked-changed event from propagating when caught by lion-switch element. diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index b018ff831..e03a3a289 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -84,9 +84,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) connectedCallback() { super.connectedCallback(); - if (this._inputNode) { - this._inputNode.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); - } + this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); if (this._labelNode) { this._labelNode.addEventListener('click', this._toggleChecked); } @@ -95,10 +93,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) disconnectedCallback() { if (this._inputNode) { - this._inputNode.removeEventListener( - 'checked-changed', - this.__handleButtonSwitchCheckedChanged, - ); + this.removeEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); } if (this._labelNode) { this._labelNode.removeEventListener('click', this._toggleChecked); @@ -120,8 +115,12 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) return false; } - /** @private */ - __handleButtonSwitchCheckedChanged() { + /** + * @private + * @param {Event} ev + */ + __handleButtonSwitchCheckedChanged(ev) { + ev.stopPropagation(); this._isHandlingUserInput = true; this.checked = this._inputNode.checked; this._isHandlingUserInput = false; diff --git a/packages/switch/src/LionSwitchButton.js b/packages/switch/src/LionSwitchButton.js index 612fcb9a1..93260fb79 100644 --- a/packages/switch/src/LionSwitchButton.js +++ b/packages/switch/src/LionSwitchButton.js @@ -114,7 +114,6 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) { __checkedStateChange() { this.dispatchEvent( new Event('checked-changed', { - composed: true, bubbles: true, }), ); diff --git a/packages/switch/test/lion-switch-button.test.js b/packages/switch/test/lion-switch-button.test.js index c03d3aa1a..dc442794b 100644 --- a/packages/switch/test/lion-switch-button.test.js +++ b/packages/switch/test/lion-switch-button.test.js @@ -76,7 +76,6 @@ describe('lion-switch-button', () => { const e = call.args[0]; expect(e).to.be.an.instanceof(Event); expect(e.bubbles).to.be.true; - expect(e.composed).to.be.true; }; checkCall(handlerSpy.getCall(0)); checkCall(handlerSpy.getCall(1)); @@ -93,7 +92,6 @@ describe('lion-switch-button', () => { const e = call.args[0]; expect(e).to.be.an.instanceof(Event); expect(e.bubbles).to.be.true; - expect(e.composed).to.be.true; }; checkCall(handlerSpy.getCall(0)); checkCall(handlerSpy.getCall(1)); diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index e23ed9e48..bef68b91f 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -142,7 +142,6 @@ describe('lion-switch', () => { const e = call.args[0]; expect(e).to.be.an.instanceof(Event); expect(e.bubbles).to.be.true; - expect(e.composed).to.be.true; }; checkCall(handlerSpy.getCall(0)); checkCall(handlerSpy.getCall(1)); @@ -157,6 +156,23 @@ describe('lion-switch', () => { expect(handlerSpy.callCount).to.equal(1); }); + it('should not propagate the "checked-changed" event further up when caught by switch', async () => { + const handlerSpy = sinon.spy(); + const parentHandlerSpy = sinon.spy(); + const el = await fixture( + html` +