chore(core): prevent click on disabled elements

This commit is contained in:
Thijs Louisse 2024-12-01 17:03:08 +01:00 committed by Thijs Louisse
parent 5dc2205d7d
commit 3d49a4100b
3 changed files with 33 additions and 1 deletions

View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
prevent click on disabled elements

View file

@ -74,6 +74,12 @@ const DisabledMixinImplementation = superclass =>
} }
} }
} }
click() {
if (this.disabled) return;
super.click();
}
}; };
export const DisabledMixin = dedupeMixin(DisabledMixinImplementation); export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);

View file

@ -1,7 +1,8 @@
import { expect, fixture } from '@open-wc/testing'; import { expect, fixture } from '@open-wc/testing';
import { DisabledMixin } from '@lion/ui/core.js';
import { html } from 'lit/static-html.js'; import { html } from 'lit/static-html.js';
import { LitElement } from 'lit'; import { LitElement } from 'lit';
import { DisabledMixin } from '@lion/ui/core.js'; import sinon from 'sinon';
describe('DisabledMixin', () => { describe('DisabledMixin', () => {
class CanBeDisabled extends DisabledMixin(LitElement) {} class CanBeDisabled extends DisabledMixin(LitElement) {}
@ -84,4 +85,24 @@ describe('DisabledMixin', () => {
el.retractRequestToBeDisabled(); el.retractRequestToBeDisabled();
expect(el.disabled).to.be.false; expect(el.disabled).to.be.false;
}); });
it('will not perform click when disabled', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
const spy = sinon.spy();
el.addEventListener('click', spy);
el.click();
expect(spy.callCount).to.equal(1);
el.disabled = true;
el.click();
expect(spy.callCount).to.equal(1);
el.disabled = false;
el.click();
expect(spy.callCount).to.equal(2);
});
}); });