chore(core): prevent click on disabled elements
This commit is contained in:
parent
5dc2205d7d
commit
3d49a4100b
3 changed files with 33 additions and 1 deletions
5
.changeset/tasty-fishes-occur.md
Normal file
5
.changeset/tasty-fishes-occur.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@lion/ui': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
prevent click on disabled elements
|
||||||
|
|
@ -74,6 +74,12 @@ const DisabledMixinImplementation = superclass =>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
click() {
|
||||||
|
if (this.disabled) return;
|
||||||
|
|
||||||
|
super.click();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);
|
export const DisabledMixin = dedupeMixin(DisabledMixinImplementation);
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue