fix(number-field): added a variable to track last committed value in …

…input

packages/number-field/src/NumberField.ts

@@ -160,10 +160,11 @@ export class NumberField extends TextfieldBase {
         }
         const oldValue = this._value;
         this._value = value;
-        if (!this.managedInput) {
+        if (!this.managedInput && this.lastCommitedValue != this.value) {
             this.dispatchEvent(
                 new Event('change', { bubbles: true, composed: true })
             );
+            this.lastCommitedValue = this.value;
         }
         this.requestUpdate('value', oldValue);
     }
@@ -180,6 +181,7 @@ export class NumberField extends TextfieldBase {
 
     public override _value = NaN;
     private _trackingValue = '';
+    private lastCommitedValue = NaN;
 
     /**
      * Retreive the value of the element parsed to a Number.
@@ -285,9 +287,12 @@ export class NumberField extends TextfieldBase {
         this.buttons.releasePointerCapture(event.pointerId);
         cancelAnimationFrame(this.nextChange);
         clearTimeout(this.safty);
-        this.dispatchEvent(
-            new Event('change', { bubbles: true, composed: true })
-        );
+        if (this.lastCommitedValue != this.value) {
+            this.dispatchEvent(
+                new Event('change', { bubbles: true, composed: true })
+            );
+            this.lastCommitedValue = this.value;
+        }
         this.managedInput = false;
     }
 
@@ -357,6 +362,7 @@ export class NumberField extends TextfieldBase {
                 this.dispatchEvent(
                     new Event('change', { bubbles: true, composed: true })
                 );
+                this.lastCommitedValue = this.value;
             }, CHANGE_DEBOUNCE_MS) as unknown as number;
         }
         this.managedInput = false;
@@ -400,7 +406,10 @@ export class NumberField extends TextfieldBase {
         }
         this.value = value;
         this.inputElement.value = this.formattedValue;
-        super.handleChange();
+        if (this.lastCommitedValue != this.value) {
+            this.lastCommitedValue = this.value;
+            super.handleChange();
+        }
     }
 
     protected handleCompositionStart(): void {

packages/number-field/test/number-field.test.ts

@@ -566,7 +566,7 @@ describe('NumberField', () => {
                 ],
             });
             expect(inputSpy.callCount).to.equal(4);
-            expect(changeSpy.callCount).to.equal(1);
+            expect(changeSpy.callCount).to.equal(0); // the actual value hasn't changed so changespy won't be called
         });
     });
     it('accepts pointer interactions with the stepper UI', async () => {
@@ -751,7 +751,7 @@ describe('NumberField', () => {
             await sendKeys({ press: 'Enter' });
             await elementUpdated(el);
             expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(10);
+            expect(lastChangeValue, 'last change value').to.equal(0); // value wouldn't go beyond max, so it remains unchanged after pressing enter and thus no changeSpy called
             expect(el.formattedValue).to.equal('10');
             expect(el.valueAsString).to.equal('10');
             expect(el.value).to.equal(10);
@@ -811,7 +811,7 @@ describe('NumberField', () => {
             await sendKeys({ press: 'Enter' });
             await elementUpdated(el);
             expect(lastInputValue, 'last input value').to.equal(10);
-            expect(lastChangeValue, 'last change value').to.equal(10);
+            expect(lastChangeValue, 'last change value').to.equal(0);
             expect(el.formattedValue).to.equal('10');
             expect(el.valueAsString).to.equal('10');
             expect(el.value).to.equal(10);