fix: validate on value change triggered by arrow key (#6476)

vaadin · Sep 13, 2023 · d9485be · d9485be
1 parent 0cd1fe7
commit d9485be
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/number-field/src/vaadin-number-field-mixin.js b/packages/number-field/src/vaadin-number-field-mixin.js
@@ -217,6 +217,7 @@ export const NumberFieldMixin = (superClass) =>
     /** @private */
     _setValue(value) {
       this.value = this.inputElement.value = String(parseFloat(value));
+      this.validate();
       this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
     }
 

diff --git a/packages/number-field/test/validation.common.js b/packages/number-field/test/validation.common.js
@@ -7,10 +7,15 @@ describe('validation', () => {
   let field, input;
 
   describe('basic', () => {
+    let validateSpy, changeSpy;
+
     beforeEach(async () => {
       field = fixtureSync('<vaadin-number-field></vaadin-number-field>');
       await nextRender();
       input = field.inputElement;
+      validateSpy = sinon.spy(field, 'validate');
+      changeSpy = sinon.spy().named('changeSpy');
+      field.addEventListener('change', changeSpy);
     });
 
     it('should pass validation by default', () => {
@@ -36,6 +41,24 @@ describe('validation', () => {
       expect(field.invalid).to.be.false;
     });
 
+    it('should validate before change event on ArrowDown', async () => {
+      field.focus();
+      await sendKeys({ press: 'ArrowDown' });
+      await nextUpdate(field);
+      expect(validateSpy).to.be.calledOnce;
+      expect(changeSpy).to.be.calledOnce;
+      expect(changeSpy).to.be.calledAfter(validateSpy);
+    });
+
+    it('should validate before change event on ArrowUp', async () => {
+      field.focus();
+      await sendKeys({ press: 'ArrowUp' });
+      await nextUpdate(field);
+      expect(validateSpy).to.be.calledOnce;
+      expect(changeSpy).to.be.calledOnce;
+      expect(changeSpy).to.be.calledAfter(validateSpy);
+    });
+
     it('should be valid with numeric values', async () => {
       field.value = '1';
       await nextFrame();
@@ -112,8 +135,6 @@ describe('validation', () => {
     });
 
     it('should dispatch change event after validation', async () => {
-      const validateSpy = sinon.spy(field, 'validate');
-      const changeSpy = sinon.spy();
       field.required = true;
       field.addEventListener('change', changeSpy);
       input.value = '123';