From c9b6b2caa9856f78f4a4a44853f8286c9f4436a3 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Mon, 29 Aug 2022 13:30:03 +0300
Subject: [PATCH 1/2] refactor!: ensure initial validation when the field has
 constraints

---
 .../email-field/src/vaadin-email-field.js     | 17 +++----
 packages/email-field/test/email-field.test.js | 45 +++++++++++++------
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/packages/email-field/src/vaadin-email-field.js b/packages/email-field/src/vaadin-email-field.js
index e2d21fe0ca..d8ebb8ff75 100644
--- a/packages/email-field/src/vaadin-email-field.js
+++ b/packages/email-field/src/vaadin-email-field.js
@@ -49,6 +49,15 @@ export class EmailField extends TextField {
     return 'vaadin-email-field';
   }
 
+  static get properties() {
+    return {
+      pattern: {
+        type: String,
+        value: '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$',
+      },
+    };
+  }
+
   constructor() {
     super();
     this._setType('email');
@@ -62,14 +71,6 @@ export class EmailField extends TextField {
       this.inputElement.autocapitalize = 'off';
     }
   }
-
-  /** @protected */
-  _createConstraintsObserver() {
-    // NOTE: pattern needs to be set before constraints observer is initialized
-    this.pattern = this.pattern || '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$';
-
-    super._createConstraintsObserver();
-  }
 }
 
 customElements.define('vaadin-email-field', EmailField);
diff --git a/packages/email-field/test/email-field.test.js b/packages/email-field/test/email-field.test.js
index 78c50ee8b8..97a4f9de2b 100644
--- a/packages/email-field/test/email-field.test.js
+++ b/packages/email-field/test/email-field.test.js
@@ -84,25 +84,44 @@ describe('email-field', () => {
       field.remove();
     });
 
-    it('should not validate by default', async () => {
+    it('should not validate without value', async () => {
       document.body.appendChild(field);
       await nextRender();
       expect(validateSpy.called).to.be.false;
     });
 
-    it('should not validate when the field has an initial value', async () => {
-      field.value = 'foo@example.com';
-      document.body.appendChild(field);
-      await nextRender();
-      expect(validateSpy.called).to.be.false;
-    });
+    describe('with value', () => {
+      beforeEach(() => {
+        field.value = 'foo@example.com';
+      });
 
-    it('should not validate when the field has an initial value and invalid', async () => {
-      field.value = 'foo@example.com';
-      field.invalid = true;
-      document.body.appendChild(field);
-      await nextRender();
-      expect(validateSpy.called).to.be.false;
+      it('should validate by default', async () => {
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.calledOnce).to.be.true;
+      });
+
+      it('should validate when using a custom pattern', async () => {
+        field.pattern = '.+@example.com';
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.calledOnce).to.be.true;
+      });
+
+      it('should not validate when pattern is unset', async () => {
+        field.pattern = '';
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.called).to.be.false;
+      });
+
+      it('should not validate when pattern is unset and the field has invalid', async () => {
+        field.pattern = '';
+        field.invalid = true;
+        document.body.appendChild(field);
+        await nextRender();
+        expect(validateSpy.called).to.be.false;
+      });
     });
   });
 

From f5c88e9f1c3a9d1258b364b278202f0497e04aee Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Mon, 29 Aug 2022 14:53:44 +0300
Subject: [PATCH 2/2] define pattern in the constructor

---
 packages/email-field/src/vaadin-email-field.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/email-field/src/vaadin-email-field.js b/packages/email-field/src/vaadin-email-field.js
index d8ebb8ff75..9b77858051 100644
--- a/packages/email-field/src/vaadin-email-field.js
+++ b/packages/email-field/src/vaadin-email-field.js
@@ -49,18 +49,10 @@ export class EmailField extends TextField {
     return 'vaadin-email-field';
   }
 
-  static get properties() {
-    return {
-      pattern: {
-        type: String,
-        value: '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$',
-      },
-    };
-  }
-
   constructor() {
     super();
     this._setType('email');
+    this.pattern = '^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9-.]+\\.[a-zA-Z0-9-]{2,}$';
   }
 
   /** @protected */