From 60862650f3de091860859f9636bdbebfd8d914d8 Mon Sep 17 00:00:00 2001
From: jorenbroekema <joren.broekema@gmail.com>
Date: Wed, 21 Jul 2021 13:19:33 +0200
Subject: [PATCH] fix(input-stepper): redispatch btn blurs on stepper

---
 .changeset/tender-kangaroos-visit.md          |  5 ++++
 .../input-stepper/src/LionInputStepper.js     | 17 ++++++++++++
 .../test/lion-input-stepper.test.js           | 26 +++++++++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 .changeset/tender-kangaroos-visit.md

diff --git a/.changeset/tender-kangaroos-visit.md b/.changeset/tender-kangaroos-visit.md
new file mode 100644
index 000000000..6e56dbdf3
--- /dev/null
+++ b/.changeset/tender-kangaroos-visit.md
@@ -0,0 +1,5 @@
+---
+'@lion/input-stepper': patch
+---
+
+Redispatch leave events on input-stepper when leaving the increment/decrement buttons. This will consider entering and leaving the buttons as user interactions and result in the input-stepper "touched" property to be set to true, similar to when you would enter/leave the input field.
diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js
index 9cf0153a2..8eed0cbaf 100644
--- a/packages/input-stepper/src/LionInputStepper.js
+++ b/packages/input-stepper/src/LionInputStepper.js
@@ -67,6 +67,7 @@ export class LionInputStepper extends LionInput {
 
     this.__increment = this.__increment.bind(this);
     this.__decrement = this.__decrement.bind(this);
+    this.__boundOnLeaveButton = this._onLeaveButton.bind(this);
   }
 
   connectedCallback() {
@@ -299,6 +300,7 @@ export class LionInputStepper extends LionInput {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__decrement}
+        @blur=${this.__boundOnLeaveButton}
         tabindex="-1"
         type="button"
         aria-label="decrement"
@@ -318,6 +320,7 @@ export class LionInputStepper extends LionInput {
       <button
         ?disabled=${this.disabled || this.readOnly}
         @click=${this.__increment}
+        @blur=${this.__boundOnLeaveButton}
         tabindex="-1"
         type="button"
         aria-label="increment"
@@ -326,4 +329,18 @@ export class LionInputStepper extends LionInput {
       </button>
     `;
   }
+
+  /**
+   * Redispatch leave event on host when catching leave event
+   * on the incrementor and decrementor button.
+   *
+   * This redispatched leave event will be caught by
+   * InteractionStateMixin to set "touched" state to true.
+   *
+   * Interacting with the buttons is "user interactions"
+   * the same way as focusing + blurring the field (native input)
+   */
+  _onLeaveButton() {
+    this.dispatchEvent(new Event(this._leaveEvent));
+  }
 }
diff --git a/packages/input-stepper/test/lion-input-stepper.test.js b/packages/input-stepper/test/lion-input-stepper.test.js
index 1c21deddc..5c2285d49 100644
--- a/packages/input-stepper/test/lion-input-stepper.test.js
+++ b/packages/input-stepper/test/lion-input-stepper.test.js
@@ -1,5 +1,6 @@
 import { expect, fixture as _fixture, nextFrame } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+import sinon from 'sinon';
 import '@lion/input-stepper/define';
 
 /**
@@ -72,6 +73,31 @@ describe('<lion-input-stepper>', () => {
       expect(counter).to.equal(1);
     });
 
+    it('fires a leave event ("blur") on button clicks', async () => {
+      const blurSpy = sinon.spy();
+      const el = await fixture(html`
+        <lion-input-stepper @blur=${blurSpy} name="year" label="Years"></lion-input-stepper>
+      `);
+
+      expect(el.value).to.equal('');
+      const decrementButton = el.querySelector('[slot=prefix]');
+      decrementButton?.dispatchEvent(new Event('focus'));
+      decrementButton?.dispatchEvent(new Event('click'));
+      decrementButton?.dispatchEvent(new Event('blur'));
+      expect(el.value).to.equal('-1');
+      expect(blurSpy.calledOnce).to.be.true;
+      expect(el.touched).to.be.true;
+
+      el.touched = false;
+      const incrementButton = el.querySelector('[slot=suffix]');
+      incrementButton?.dispatchEvent(new Event('focus'));
+      incrementButton?.dispatchEvent(new Event('click'));
+      incrementButton?.dispatchEvent(new Event('blur'));
+      expect(el.value).to.equal('0');
+      expect(blurSpy.calledTwice).to.be.true;
+      expect(el.touched).to.be.true;
+    });
+
     it('should update min and max attributes when min and max property change', async () => {
       const el = await fixture(inputStepperWithAttrs);
       el.min = 100;