diff --git a/.changeset/wise-carrots-mix.md b/.changeset/wise-carrots-mix.md new file mode 100644 index 000000000..6a49add9c --- /dev/null +++ b/.changeset/wise-carrots-mix.md @@ -0,0 +1,5 @@ +--- +'@lion/switch': patch +--- + +Fix switch to set role in connectedCallback instead of constructor (throws error). diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index d38ee116a..8deaf8783 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -72,7 +72,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) constructor() { super(); - this.role = 'switch'; this.checked = false; /** @private */ this.__handleButtonSwitchCheckedChanged = this.__handleButtonSwitchCheckedChanged.bind(this); @@ -80,6 +79,9 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) connectedCallback() { super.connectedCallback(); + if (!this.role) { + this.role = 'switch'; + } this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); if (this._labelNode) { this._labelNode.addEventListener('click', this._toggleChecked); diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index bef68b91f..bd6998908 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -213,4 +213,11 @@ describe('lion-switch', () => { ); expect(el.showsFeedbackFor).to.eql(['info']); }); + + it('should not cause error by setting an attribute in the constructor', async () => { + const div = await fixture(html`
`); + const el = /** @type {LionSwitch} */ (document.createElement('lion-switch')); + div.appendChild(el); + expect(el.role).to.equal('switch'); + }); });