From 3b388c1d0d06edd994e69f5659201bcc49c06f21 Mon Sep 17 00:00:00 2001
From: Maarten Stolte <maarten.stolte@gmail.com>
Date: Fri, 2 Jul 2021 19:31:38 +0200
Subject: [PATCH] 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('<lion-input-stepper>', () => {
       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', () => {