diff --git a/.changeset/afraid-snakes-bake.md b/.changeset/afraid-snakes-bake.md index fb605a94f..5969374e1 100644 --- a/.changeset/afraid-snakes-bake.md +++ b/.changeset/afraid-snakes-bake.md @@ -2,4 +2,5 @@ '@lion/input-stepper': patch --- -fixed the button toggling so it is always toggled if relevant values change +- fixed the button toggling so it is always toggled if relevant values change +- fires user-input-changed only on increment/decrement diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 711069496..7c554e08f 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -171,11 +171,6 @@ export class LionInputStepper extends LionInput { decrementButton[disableDecrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true'); incrementButton[disableIncrementor ? 'setAttribute' : 'removeAttribute']('disabled', 'true'); this.setAttribute('aria-valuenow', `${this.currentValue}`); - this.dispatchEvent( - new CustomEvent('user-input-changed', { - bubbles: true, - }), - ); } /** @@ -202,6 +197,7 @@ export class LionInputStepper extends LionInput { if (newValue <= max || max === Infinity) { this.value = `${newValue}`; this.__toggleSpinnerButtonsState(); + this._proxyInputEvent(); } } @@ -215,6 +211,7 @@ export class LionInputStepper extends LionInput { if (newValue >= min || min === Infinity) { this.value = `${newValue}`; this.__toggleSpinnerButtonsState(); + this._proxyInputEvent(); } } diff --git a/packages/input-stepper/test/lion-input-stepper.test.js b/packages/input-stepper/test/lion-input-stepper.test.js index f875ae3cb..402399c85 100644 --- a/packages/input-stepper/test/lion-input-stepper.test.js +++ b/packages/input-stepper/test/lion-input-stepper.test.js @@ -37,6 +37,40 @@ describe('', () => { expect(el.value).to.equal('-1'); }); + it('fires one "user-input-changed" event on + button click', async () => { + let counter = 0; + const el = await fixture(html` + + + `); + const incrementButton = el.querySelector('[slot=suffix]'); + incrementButton?.dispatchEvent(new Event('click')); + expect(counter).to.equal(1); + }); + + it('fires one "user-input-changed" event on - button click', async () => { + let counter = 0; + const el = await fixture(html` + + + `); + const decrementButton = el.querySelector('[slot=prefix]'); + decrementButton?.dispatchEvent(new Event('click')); + expect(counter).to.equal(1); + }); + it('should update min and max attributes when min and max property change', async () => { const el = await fixture(inputStepperWithAttrs); el.min = 100;