From 718ce0146a2ae860362a3e519e1aecab59daeda8 Mon Sep 17 00:00:00 2001 From: Riovir Date: Tue, 5 Jul 2022 10:58:26 +0200 Subject: [PATCH] fix(switch): fix error caused by setting role in constructor (#1741) Co-authored-by: jorenbroekema Co-authored-by: jorenbroekema --- .changeset/wise-carrots-mix.md | 5 +++++ packages/switch/src/LionSwitch.js | 4 +++- packages/switch/test/lion-switch.test.js | 7 +++++++ 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/wise-carrots-mix.md 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'); + }); });