ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(switch): fix error caused by setting role in constructor (#1741)

Browse source 
Co-authored-by: jorenbroekema <joren.broekema@gmail.com>

Co-authored-by: jorenbroekema <joren.broekema@gmail.com>
This commit is contained in:
Riovir 2022-07-05 10:58:26 +02:00 committed by GitHub
parent 5be7776e1e
commit 718ce0146a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wise-carrots-mix.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/switch': patch
---
Fix switch to set role in connectedCallback instead of constructor (throws error).

4
packages/switch/src/LionSwitch.js
View file

@ -72,7 +72,6 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
constructor() { constructor() {
super(); super();
this.role = 'switch';
this.checked = false; this.checked = false;
/** @private */ /** @private */
this.__handleButtonSwitchCheckedChanged = this.__handleButtonSwitchCheckedChanged.bind(this); this.__handleButtonSwitchCheckedChanged = this.__handleButtonSwitchCheckedChanged.bind(this);
@ -80,6 +79,9 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
if (!this.role) {
this.role = 'switch';
}
this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged); this.addEventListener('checked-changed', this.__handleButtonSwitchCheckedChanged);
if (this._labelNode) { if (this._labelNode) {
this._labelNode.addEventListener('click', this._toggleChecked); this._labelNode.addEventListener('click', this._toggleChecked);

7
packages/switch/test/lion-switch.test.js
View file

@ -213,4 +213,11 @@ describe('lion-switch', () => {
); );
expect(el.showsFeedbackFor).to.eql(['info']); expect(el.showsFeedbackFor).to.eql(['info']);
}); });
it('should not cause error by setting an attribute in the constructor', async () => {
const div = await fixture(html`<div></div>`);
const el = /** @type {LionSwitch} */ (document.createElement('lion-switch'));
div.appendChild(el);
expect(el.role).to.equal('switch');
});
}); });