From 3b388c1d0d06edd994e69f5659201bcc49c06f21 Mon Sep 17 00:00:00 2001 From: Maarten Stolte Date: Fri, 2 Jul 2021 19:31:38 +0200 Subject: [PATCH 1/2] fix(input-stepper): buttons are now toggled for all changes --- .changeset/afraid-snakes-bake.md | 5 ++ .../input-stepper/src/LionInputStepper.js | 6 ++ .../test/lion-input-stepper.test.js | 55 +++++++++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 .changeset/afraid-snakes-bake.md diff --git a/.changeset/afraid-snakes-bake.md b/.changeset/afraid-snakes-bake.md new file mode 100644 index 000000000..fb605a94f --- /dev/null +++ b/.changeset/afraid-snakes-bake.md @@ -0,0 +1,5 @@ +--- +'@lion/input-stepper': patch +--- + +fixed the button toggling so it is always toggled if relevant values change diff --git a/packages/input-stepper/src/LionInputStepper.js b/packages/input-stepper/src/LionInputStepper.js index 28348ae64..711069496 100644 --- a/packages/input-stepper/src/LionInputStepper.js +++ b/packages/input-stepper/src/LionInputStepper.js @@ -88,14 +88,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')) { diff --git a/packages/input-stepper/test/lion-input-stepper.test.js b/packages/input-stepper/test/lion-input-stepper.test.js index 1712a71ef..f875ae3cb 100644 --- a/packages/input-stepper/test/lion-input-stepper.test.js +++ b/packages/input-stepper/test/lion-input-stepper.test.js @@ -45,6 +45,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', () => { From 93035755ed6f1fa6bc5d3333efb55142adebc83b Mon Sep 17 00:00:00 2001 From: qa46hx Date: Mon, 5 Jul 2021 11:24:42 +0200 Subject: [PATCH 2/2] fix(input-stepper): fires user-input-changed only on increment/decrement --- .changeset/afraid-snakes-bake.md | 3 +- .../input-stepper/src/LionInputStepper.js | 7 ++-- .../test/lion-input-stepper.test.js | 34 +++++++++++++++++++ 3 files changed, 38 insertions(+), 6 deletions(-) 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;