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

.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.

.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 = [];

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
    */

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`
-      <lion-select-rich
+      <lion-select-rich>
-        ><label slot="label">bar</label><lion-options slot="input"></lion-options
+        <label slot="label">bar</label><lion-options slot="input"></lion-options>
-      ></lion-select-rich>
+      </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>