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

fix(select-rich): clicking on the label should focus the invoker button

Browse source
This commit is contained in:
Thomas Allmer 2020-08-03 14:25:04 +02:00
parent d94a83a92d
commit 7742e2eaf4
4 changed files with 43 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rare-glasses-collect.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/select-rich': patch
---
Clicking on a label of a rich select should focus the invoker button. This behavior is to mimic the native select.

6
.lintstagedrc.js
View file

@ -2,7 +2,11 @@
module.exports = {
'*': ['eclint fix', 'git add'],
'*.js': ['eslint --fix', 'prettier --write', 'git add'],
'{*!(.changeset)/**/*.md,*.md}': ['prettier --write', 'markdownlint', 'git add'],
'*.md': [
'prettier --write',
"markdownlint --ignore '{.changeset/*.md,**/CHANGELOG.md}'",
'git add',
],
'yarn.lock': ['node ./scripts/yarn-lock-scan.js'],
'*package.json': absolutePaths => {
const sortPackages = [];

19
packages/select-rich/src/LionSelectRich.js
View file

@ -190,6 +190,8 @@ export class LionSelectRich extends ScopedElementsMixin(
this.__hasInitialSelectedFormElement = false;
this.hasNoDefaultSelected = false;
this._repropagationRole = 'choice-group'; // configures FormControlMixin
this.__focusInvokerOnLabelClick = this.__focusInvokerOnLabelClick.bind(this);
}
connectedCallback() {
@ -204,6 +206,10 @@ export class LionSelectRich extends ScopedElementsMixin(
this.__toggleInvokerDisabled();
if (this._labelNode) {
this._labelNode.addEventListener('click', this.__focusInvokerOnLabelClick);
}
this.registrationComplete.then(() => {
this.__initInteractionStates();
});
@ -213,6 +219,15 @@ export class LionSelectRich extends ScopedElementsMixin(
});
}
disconnectedCallback() {
if (super.disconnectedCallback) {
super.disconnectedCallback();
}
if (this._labelNode) {
this._labelNode.removeEventListener('click', this.__toggleChecked);
}
}
_requestUpdate(name, oldValue) {
super._requestUpdate(name, oldValue);
if (name === 'interactionMode') {
@ -694,6 +709,10 @@ export class LionSelectRich extends ScopedElementsMixin(
}
}
__focusInvokerOnLabelClick() {
this._invokerNode.focus();
}
/**
* @override Configures OverlayMixin
*/

17
packages/select-rich/test/lion-select-rich.test.js
View file

@ -109,13 +109,24 @@ describe('lion-select-rich', () => {
expect(el1.fieldName).to.equal(el1._labelNode.textContent);
const el2 = await fixture(html`
<lion-select-rich
><label slot="label">bar</label><lion-options slot="input"></lion-options
></lion-select-rich>
<lion-select-rich>
<label slot="label">bar</label><lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(el2.fieldName).to.equal(el2._labelNode.textContent);
});
it('clicking the label should focus the invoker', async () => {
const el = await fixture(html`
<lion-select-rich label="foo">
<lion-options slot="input"></lion-options>
</lion-select-rich>
`);
expect(document.activeElement === document.body).to.be.true;
el._labelNode.click();
expect(document.activeElement === el._invokerNode).to.be.true;
});
it(`has a fieldName based on the name if no label exists`, async () => {
const el = await fixture(html`
<lion-select-rich name="foo"><lion-options slot="input"></lion-options></lion-select-rich>