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

chore(combobox): clicking label focuses toggle button

Browse source
This commit is contained in:
Thijs Louisse 2021-04-08 13:02:56 +02:00
parent 0dc706b6f9
commit d4dcb7c1fb
3 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/famous-wolves-notice.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/switch': patch
---
**switch**: clicking label focuses button

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

@ -130,4 +130,15 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
_syncButtonSwitch() { _syncButtonSwitch() {
this._inputNode.disabled = this.disabled; this._inputNode.disabled = this.disabled;
} }
/**
* @configure FormControlMixin
* @protected
*/
_onLabelClick() {
if (this.disabled) {
return;
}
this._inputNode.focus();
}
} }

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

@ -39,6 +39,18 @@ describe('lion-switch', () => {
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
}); });
it('clicking the label should focus the toggle button', async () => {
const el = await fixture(html`<lion-switch label="Enable Setting"></lion-switch>`);
el._labelNode.click();
expect(document.activeElement).to.equal(el._inputNode);
});
it('clicking the label should not focus the toggle button when disabled', async () => {
const el = await fixture(html`<lion-switch disabled label="Enable Setting"></lion-switch>`);
el._labelNode.click();
expect(document.activeElement).to.not.equal(el._inputNode);
});
it('should sync its "disabled" state to child button', async () => { it('should sync its "disabled" state to child button', async () => {
const el = await fixture(html`<lion-switch disabled></lion-switch>`); const el = await fixture(html`<lion-switch disabled></lion-switch>`);
const { inputNode } = getProtectedMembers(el); const { inputNode } = getProtectedMembers(el);