diff --git a/.changeset/rare-glasses-collect.md b/.changeset/rare-glasses-collect.md
new file mode 100644
index 000000000..7846094ab
--- /dev/null
+++ b/.changeset/rare-glasses-collect.md
@@ -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.
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index 801ced191..bbdc37185 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -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 = [];
diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js
index e9e8bf713..b39341ae4 100644
--- a/packages/select-rich/src/LionSelectRich.js
+++ b/packages/select-rich/src/LionSelectRich.js
@@ -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
*/
diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js
index 470724fa3..74d1729f7 100644
--- a/packages/select-rich/test/lion-select-rich.test.js
+++ b/packages/select-rich/test/lion-select-rich.test.js
@@ -109,13 +109,24 @@ describe('lion-select-rich', () => {
expect(el1.fieldName).to.equal(el1._labelNode.textContent);
const el2 = await fixture(html`
-
+
+
+
`);
expect(el2.fieldName).to.equal(el2._labelNode.textContent);
});
+ it('clicking the label should focus the invoker', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ 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`