diff --git a/.changeset/afraid-snakes-bake.md b/.changeset/afraid-snakes-bake.md new file mode 100644 index 000000000..5969374e1 --- /dev/null +++ b/.changeset/afraid-snakes-bake.md @@ -0,0 +1,6 @@ +--- +'@lion/input-stepper': patch +--- + +- 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 92a45e1f2..9cf0153a2 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -96,14 +96,20 @@ export class LionInputStepper extends LionInput { updated(changedProperties) { super.updated(changedProperties); + if (changedProperties.has('modelValue')) { + this.__toggleSpinnerButtonsState(); + } + if (changedProperties.has('min')) { this._inputNode.min = `${this.min}`; this.values.min = this.min; + this.__toggleSpinnerButtonsState(); } if (changedProperties.has('max')) { this._inputNode.max = `${this.max}`; this.values.max = this.max; + this.__toggleSpinnerButtonsState(); } if (changedProperties.has('step')) { @@ -173,11 +179,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, - }), - ); } /** @@ -204,6 +205,7 @@ export class LionInputStepper extends LionInput { if (newValue <= max || max === Infinity) { this.value = `${newValue}`; this.__toggleSpinnerButtonsState(); + this._proxyInputEvent(); } } @@ -217,6 +219,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 09df7f797..1c21deddc 100644 --- a/packages/input-stepper/test/lion-input-stepper.test.js +++ b/packages/input-stepper/test/lion-input-stepper.test.js @@ -38,6 +38,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; @@ -46,6 +80,61 @@ describe('', () => { expect(el._inputNode.min).to.equal(el.min.toString()); expect(el._inputNode.max).to.equal(el.max.toString()); }); + + it('should remove the disabled attribute of the decrement button when the min property changes to below the modelvalue', async () => { + const el = await fixture(inputStepperWithAttrs); + const decrementButton = el.querySelector('[slot=prefix]'); + el.modelValue = 100; + await nextFrame(); + expect(decrementButton?.getAttribute('disabled')).to.equal('true'); + el.min = 99; + await nextFrame(); + expect(decrementButton?.getAttribute('disabled')).to.equal(null); + }); + + it('should add the disabled attribute of the decrement button when the min property changes to the modelvalue', async () => { + const el = await fixture(inputStepperWithAttrs); + const decrementButton = el.querySelector('[slot=prefix]'); + el.modelValue = 101; + await nextFrame(); + expect(decrementButton?.getAttribute('disabled')).to.equal(null); + el.min = 101; + await nextFrame(); + expect(decrementButton?.getAttribute('disabled')).to.equal('true'); + }); + + it('should remove the disabled attribute of the increment button when the max property changes to above the modelvalue', async () => { + const el = await fixture(inputStepperWithAttrs); + const incrementButton = el.querySelector('[slot=suffix]'); + el.modelValue = 200; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal('true'); + el.max = 201; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal(null); + }); + + it('should add the disabled attribute of the increment button when the max property changes to the modelvalue', async () => { + const el = await fixture(inputStepperWithAttrs); + const incrementButton = el.querySelector('[slot=suffix]'); + el.modelValue = 199; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal(null); + el.max = 199; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal('true'); + }); + + it('should react to changes in the modelValue by adjusting the disabled state of the button', async () => { + const el = await fixture(inputStepperWithAttrs); + const incrementButton = el.querySelector('[slot=suffix]'); + el.modelValue = 199; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal(null); + el.modelValue = 200; + await nextFrame(); + expect(incrementButton?.getAttribute('disabled')).to.equal('true'); + }); }); describe('Accessibility', () => {