From 7742e2eaf482ff6ad61e2447d142f1f1de649408 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Mon, 3 Aug 2020 14:25:04 +0200
Subject: [PATCH] fix(select-rich): clicking on the label should focus the
 invoker button

---
 .changeset/rare-glasses-collect.md            |  5 +++++
 .lintstagedrc.js                              |  6 +++++-
 packages/select-rich/src/LionSelectRich.js    | 19 +++++++++++++++++++
 .../select-rich/test/lion-select-rich.test.js | 17 ++++++++++++++---
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/rare-glasses-collect.md

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