fix: force the validation to check for bad user input

packages/integer-field/test/validation.test.js

@@ -1,5 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../src/vaadin-integer-field.js';
 
@@ -66,4 +67,33 @@ describe('validation', () => {
       expect(event.detail.valid).to.be.false;
     });
   });
+
+  describe('bad input', () => {
+    let input;
+
+    beforeEach(() => {
+      integerField = fixtureSync('<vaadin-integer-field></vaadin-integer-field>');
+      input = integerField.inputElement;
+      input.focus();
+    });
+
+    it('should be valid when committing a valid number', async () => {
+      await sendKeys({ type: '1' });
+      input.blur();
+      expect(integerField.invalid).to.be.false;
+    });
+
+    it('should be invalid when trying to commit a not valid number', async () => {
+      await sendKeys({ type: '1--' });
+      input.blur();
+      expect(integerField.invalid).to.be.true;
+    });
+
+    it('should set an empty value when trying to commit a not valid number', async () => {
+      integerField.value = '1';
+      await sendKeys({ type: '1--' });
+      await sendKeys({ type: 'Enter' });
+      expect(integerField.value).to.equal('');
+    });
+  });
 });

packages/number-field/src/vaadin-number-field.js

@@ -233,6 +233,20 @@ export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(E
     this.addController(new LabelledInputController(this.inputElement, this._labelController));
   }
 
+  /**
+   * Override a method from `InputConstraintsMixin`
+   * to additionally check for bad user input.
+   *
+   * @override
+   */
+  checkValidity() {
+    if (this.inputElement && this.inputElement.validity.badInput) {
+      return false;
+    }
+
+    return super.checkValidity();
+  }
+
   /** @private */
   _decreaseButtonTouchend(e) {
     // Cancel the following click and focus events

packages/number-field/test/validation.test.js

@@ -1,5 +1,6 @@
 import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../src/vaadin-number-field.js';
 
@@ -137,6 +138,33 @@ describe('validation', () => {
     });
   });
 
+  describe('bad input', () => {
+    beforeEach(() => {
+      field = fixtureSync('<vaadin-number-field></vaadin-number-field>');
+      input = field.inputElement;
+      input.focus();
+    });
+
+    it('should be valid when committing a valid number', async () => {
+      await sendKeys({ type: '1' });
+      input.blur();
+      expect(field.invalid).to.be.false;
+    });
+
+    it('should be invalid when trying to commit a not valid number', async () => {
+      await sendKeys({ type: '1--' });
+      input.blur();
+      expect(field.invalid).to.be.true;
+    });
+
+    it('should set an empty value when trying to commit a not valid number', async () => {
+      field.value = '1';
+      await sendKeys({ type: '1--' });
+      await sendKeys({ type: 'Enter' });
+      expect(field.value).to.equal('');
+    });
+  });
+
   describe('initial', () => {
     let validateSpy;