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

vaadin · Sep 13, 2023 · f7fcc7a · f7fcc7a
1 parent 88ff9ce
commit f7fcc7a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/number-field/src/vaadin-number-field.js b/packages/number-field/src/vaadin-number-field.js
@@ -341,6 +341,7 @@ export class NumberField extends InputFieldMixin(ThemableMixin(ElementMixin(Poly
   /** @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.test.js b/packages/number-field/test/validation.test.js
@@ -8,9 +8,14 @@ describe('validation', () => {
   let field, input;
 
   describe('basic', () => {
+    let validateSpy, changeSpy;
+
     beforeEach(() => {
       field = fixtureSync('<vaadin-number-field></vaadin-number-field>');
       input = field.inputElement;
+      validateSpy = sinon.spy(field, 'validate');
+      changeSpy = sinon.spy().named('changeSpy');
+      field.addEventListener('change', changeSpy);
     });
 
     it('should pass validation by default', () => {
@@ -34,6 +39,22 @@ describe('validation', () => {
       expect(field.invalid).to.be.false;
     });
 
+    it('should validate before change event on ArrowDown', async () => {
+      field.focus();
+      await sendKeys({ press: 'ArrowDown' });
+      expect(validateSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledAfter(validateSpy)).to.be.true;
+    });
+
+    it('should validate before change event on ArrowUp', async () => {
+      field.focus();
+      await sendKeys({ press: 'ArrowUp' });
+      expect(validateSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledOnce).to.be.true;
+      expect(changeSpy.calledAfter(validateSpy)).to.be.true;
+    });
+
     it('should be valid with numeric values', () => {
       field.value = '1';
       expect(input.value).to.be.equal('1');
@@ -97,8 +118,6 @@ describe('validation', () => {
     });
 
     it('should dispatch change event after validation', () => {
-      const validateSpy = sinon.spy(field, 'validate');
-      const changeSpy = sinon.spy();
       field.required = true;
       field.addEventListener('change', changeSpy);
       field.value = '123';