fix(core): do not disable step input increment/decrement when value i…

…s null (#8840)

* fix(core): step input increment/decrement buttons should not disable when input is empty

* fix(core): account for min/max

* fix(core): test new functionality and fix old test

* fix(core): fix unit tests

* fix(core): reduce duplicate code

libs/core/src/lib/step-input/step-input.component.spec.ts

@@ -169,7 +169,7 @@ describe('StepInputComponent', () => {
         expect(component.focused).toBeTrue();
         expect(focusInEventSpy).toHaveBeenCalled();
 
-        component.handleFocusOut();
+        component.handleFocusOut(new FocusEvent('blur'));
 
         expect(component.focused).toBeFalse();
         expect(focusOutEventSpy).toHaveBeenCalled();
@@ -379,4 +379,24 @@ describe('StepInputComponent', () => {
         component.handleKeyDown.call(context, keyDownEvent);
         expect(decrementSpy).toHaveBeenCalled();
     });
+
+    it('should handle the increment/decrement buttons when the input is set to null', () => {
+        component.writeValue(null);
+        component.increment();
+        expect(component.value).toBe(101);
+        component.writeValue(null);
+        component.decrement();
+        expect(component.value).toBe(99);
+    });
+
+    it('should handle increment/decrement when initial value is max value and input is cleared', () => {
+        component.max = 100;
+        component.min = 100;
+        component.writeValue(null);
+        component.increment();
+        expect(component.value).toBe(100);
+        component.writeValue(null);
+        component.decrement();
+        expect(component.value).toBe(100);
+    });
 });

libs/core/src/lib/step-input/step-input.component.ts

@@ -124,6 +124,9 @@ export class StepInputComponent implements OnInit, AfterViewInit, OnDestroy, Con
             this._value = this._checkValueLimits(value);
         }
         this.lastEmittedValue = this._value;
+        if (!this._firstEmittedValue && this._value) {
+            this._firstEmittedValue = this._value;
+        }
         if (this._numberFormat) {
             this._updateViewValue();
         }
@@ -264,6 +267,9 @@ export class StepInputComponent implements OnInit, AfterViewInit, OnDestroy, Con
     /** @hidden */
     private _index: any;
 
+    /** @hidden */
+    private _firstEmittedValue: number;
+
     /** @hidden */
     onChange: (value: Nullable<number>) => void = () => {};
 
@@ -318,18 +324,12 @@ export class StepInputComponent implements OnInit, AfterViewInit, OnDestroy, Con
 
     /** @hidden */
     get canIncrement(): boolean {
-        if (this.value == null) {
-            return false;
-        }
-        return this.value + this.step <= this._max;
+        return this.value == null || this.value + this.step <= this._max;
     }
 
     /** @hidden */
     get canDecrement(): boolean {
-        if (this.value == null) {
-            return false;
-        }
-        return this.value - this.step >= this._min;
+        return this.value == null || this.value - this.step >= this._min;
     }
 
     /** @hidden */
@@ -339,17 +339,33 @@ export class StepInputComponent implements OnInit, AfterViewInit, OnDestroy, Con
 
     /** Increment input value by step value */
     increment(): void {
-        if (this.canIncrement) {
-            this._value = this._cutFloatingNumberDistortion(this.value!, this.step);
-            this._emitChangedValue();
-            this._updateViewValue();
-        }
+        this._incrementOrDecrement('increment');
     }
 
     /** Decrement input value by step value */
     decrement(): void {
-        if (this.canDecrement) {
-            this._value = this._cutFloatingNumberDistortion(this.value!, -this.step);
+        this._incrementOrDecrement('decrement');
+    }
+
+    /** @hidden */
+    private _incrementOrDecrement(direction: 'increment' | 'decrement'): void {
+        if ((direction === 'increment' && this.canIncrement) || (direction === 'decrement' && this.canDecrement)) {
+            let _shouldChange = true;
+            if (this.value == null && this._firstEmittedValue) {
+                this._value = this._firstEmittedValue;
+                let _limit: number;
+                direction === 'increment' ? (_limit = this.max) : (_limit = this.min);
+                if (this._firstEmittedValue === _limit) {
+                    this._value = _limit;
+                    _shouldChange = false;
+                }
+            }
+            if (_shouldChange) {
+                this._value =
+                    direction === 'increment'
+                        ? this._cutFloatingNumberDistortion(this.value!, this.step)
+                        : this._cutFloatingNumberDistortion(this.value!, -this.step);
+            }
             this._emitChangedValue();
             this._updateViewValue();
         }