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

fix: checked-changed event is no longer fired on element initialization when checked is set through attribute

Browse source
This commit is contained in:
Danny Moerkerke 2023-03-15 10:59:04 +01:00 committed by GitHub
parent 183c86af26
commit 3256892ce9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/mean-plants-rush.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
lion-switch: checked-changed event is no longer fired on element initialization when checked is set through attribute

15
packages/ui/components/switch/src/LionSwitchButton.js
View file

@ -78,6 +78,7 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
this.role = 'switch';
this.checked = false;
this.__initialized = false;
/** @protected */
this._toggleChecked = this._toggleChecked.bind(this);
/** @private */
@ -158,8 +159,20 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
*/
requestUpdate(name, oldValue, options) {
super.requestUpdate(name, oldValue, options);
if (this.isConnected && name === 'checked' && this.checked !== oldValue && !this.disabled) {
if (
this.__initialized &&
this.isConnected &&
name === 'checked' &&
this.checked !== oldValue &&
!this.disabled
) {
this.__checkedStateChange();
}
}
/** @param {import('lit').PropertyValues } changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties);
this.__initialized = true;
}
}

16
packages/ui/components/switch/test/lion-switch-button.test.js
View file

@ -1,4 +1,4 @@
import { expect, fixture as _fixture } from '@open-wc/testing';
import { expect, fixture as _fixture, fixtureSync, elementUpdated } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import sinon from 'sinon';
import '@lion/ui/define/lion-switch-button.js';
@ -126,6 +126,20 @@ describe('lion-switch-button', () => {
expect(handlerSpy.called).to.be.false;
});
it('should not dispatch "checked-changed" event if not initialized on update', async () => {
const handlerSpy = sinon.spy();
const elSync = /** @type {LionSwitchButton} */ (
fixtureSync(html`<lion-switch-button @checked-changed="${handlerSpy}" .checked=${true} />`)
);
expect(elSync.__initialized).to.be.false;
await elementUpdated(elSync);
expect(elSync.__initialized).to.be.true;
expect(handlerSpy.called).to.be.false;
elSync.checked = !elSync.checked;
await elementUpdated(elSync);
expect(handlerSpy.called).to.be.true;
});
describe('a11y', () => {
it('should manage "aria-checked"', async () => {
expect(el.hasAttribute('aria-checked')).to.be.true;