From 69acea996bb2367f2bbfa79cc27b27e13e51825c Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Fri, 22 Jul 2022 17:26:27 +0300
Subject: [PATCH] fix: validate number-field for bad user input

---
 .../integer-field/test/validation.test.js     | 30 +++++++++++++++++++
 .../number-field/src/vaadin-number-field.js   | 14 +++++++++
 packages/number-field/test/validation.test.js | 28 +++++++++++++++++
 3 files changed, 72 insertions(+)

diff --git a/packages/integer-field/test/validation.test.js b/packages/integer-field/test/validation.test.js
index e559abed49..d71d7812b6 100644
--- a/packages/integer-field/test/validation.test.js
+++ b/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('');
+    });
+  });
 });
diff --git a/packages/number-field/src/vaadin-number-field.js b/packages/number-field/src/vaadin-number-field.js
index 6d66e36bdc..8ff9ff89e6 100644
--- a/packages/number-field/src/vaadin-number-field.js
+++ b/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
diff --git a/packages/number-field/test/validation.test.js b/packages/number-field/test/validation.test.js
index 849133d46c..849e7182c1 100644
--- a/packages/number-field/test/validation.test.js
+++ b/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;