Merge pull request #1467 from ing-bank/fix/stepper-btn-leave

fix(input-stepper): redispatch btn blurs on stepper

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

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));
+  }
 }

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;