fix!: do not validate login form fields on blur (#8101)

vaadin · Nov 7, 2024 · b9c6590 · b9c6590
1 parent 9d96d20
commit b9c6590
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 0 deletions.
diff --git a/packages/login/src/vaadin-lit-login-form.js b/packages/login/src/vaadin-lit-login-form.js
@@ -64,6 +64,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
             autocorrect="off"
             spellcheck="false"
             autocomplete="username"
+            manual-validation
           >
             <input type="text" slot="input" @keyup="${this._handleInputKeyup}" />
           </vaadin-text-field>
@@ -77,6 +78,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
             @keydown="${this._handleInputKeydown}"
             spellcheck="false"
             autocomplete="current-password"
+            manual-validation
           >
             <input type="password" slot="input" @keyup="${this._handleInputKeyup}" />
           </vaadin-password-field>

diff --git a/packages/login/src/vaadin-login-form.js b/packages/login/src/vaadin-login-form.js
@@ -75,6 +75,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
             autocorrect="off"
             spellcheck="false"
             autocomplete="username"
+            manual-validation
           >
             <input type="text" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-text-field>
@@ -88,6 +89,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
             on-keydown="_handleInputKeydown"
             spellcheck="false"
             autocomplete="current-password"
+            manual-validation
           >
             <input type="password" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-password-field>

diff --git a/packages/login/test/dom/__snapshots__/login-form.test.snap.js b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -19,6 +19,7 @@ snapshots["vaadin-login-form host default"] =
         focused=""
         has-label=""
         id="vaadinLoginUsername"
+        manual-validation=""
         name="username"
         required=""
         spellcheck="false"
@@ -52,6 +53,7 @@ snapshots["vaadin-login-form host default"] =
         autocomplete="current-password"
         has-label=""
         id="vaadinLoginPassword"
+        manual-validation=""
         name="password"
         required=""
         spellcheck="false"
@@ -130,6 +132,7 @@ snapshots["vaadin-login-form host required"] =
         has-label=""
         id="vaadinLoginUsername"
         invalid=""
+        manual-validation=""
         name="username"
         required=""
         spellcheck="false"
@@ -168,6 +171,7 @@ snapshots["vaadin-login-form host required"] =
         has-label=""
         id="vaadinLoginPassword"
         invalid=""
+        manual-validation=""
         name="password"
         required=""
         spellcheck="false"
@@ -246,6 +250,7 @@ snapshots["vaadin-login-form host i18n"] =
         focused=""
         has-label=""
         id="vaadinLoginUsername"
+        manual-validation=""
         name="username"
         required=""
         spellcheck="false"
@@ -279,6 +284,7 @@ snapshots["vaadin-login-form host i18n"] =
         autocomplete="current-password"
         has-label=""
         id="vaadinLoginPassword"
+        manual-validation=""
         name="password"
         required=""
         spellcheck="false"
@@ -357,6 +363,7 @@ snapshots["vaadin-login-form host i18n-required"] =
         has-label=""
         id="vaadinLoginUsername"
         invalid=""
+        manual-validation=""
         name="username"
         required=""
         spellcheck="false"
@@ -395,6 +402,7 @@ snapshots["vaadin-login-form host i18n-required"] =
         has-label=""
         id="vaadinLoginPassword"
         invalid=""
+        manual-validation=""
         name="password"
         required=""
         spellcheck="false"
@@ -473,6 +481,7 @@ snapshots["vaadin-login-form host noForgotPassword"] =
         focused=""
         has-label=""
         id="vaadinLoginUsername"
+        manual-validation=""
         name="username"
         required=""
         spellcheck="false"
@@ -506,6 +515,7 @@ snapshots["vaadin-login-form host noForgotPassword"] =
         autocomplete="current-password"
         has-label=""
         id="vaadinLoginPassword"
+        manual-validation=""
         name="password"
         required=""
         spellcheck="false"

diff --git a/packages/login/test/dom/__snapshots__/login-overlay.test.snap.js b/packages/login/test/dom/__snapshots__/login-overlay.test.snap.js
@@ -33,6 +33,7 @@ snapshots["vaadin-login-overlay host default"] =
           focused=""
           has-label=""
           id="vaadinLoginUsername"
+          manual-validation=""
           name="username"
           required=""
           spellcheck="false"
@@ -66,6 +67,7 @@ snapshots["vaadin-login-overlay host default"] =
           autocomplete="current-password"
           has-label=""
           id="vaadinLoginPassword"
+          manual-validation=""
           name="password"
           required=""
           spellcheck="false"
@@ -157,6 +159,7 @@ snapshots["vaadin-login-overlay host i18n"] =
           focused=""
           has-label=""
           id="vaadinLoginUsername"
+          manual-validation=""
           name="username"
           required=""
           spellcheck="false"
@@ -190,6 +193,7 @@ snapshots["vaadin-login-overlay host i18n"] =
           autocomplete="current-password"
           has-label=""
           id="vaadinLoginPassword"
+          manual-validation=""
           name="password"
           required=""
           spellcheck="false"
@@ -282,6 +286,7 @@ snapshots["vaadin-login-overlay host overlay class"] =
           focused=""
           has-label=""
           id="vaadinLoginUsername"
+          manual-validation=""
           name="username"
           required=""
           spellcheck="false"
@@ -315,6 +320,7 @@ snapshots["vaadin-login-overlay host overlay class"] =
           autocomplete="current-password"
           has-label=""
           id="vaadinLoginPassword"
+          manual-validation=""
           name="password"
           required=""
           spellcheck="false"

diff --git a/packages/login/test/login-form.common.js b/packages/login/test/login-form.common.js
@@ -65,6 +65,24 @@ describe('login form', () => {
     expect(spy.calledOnce).to.be.true;
   });
 
+  it('should not validate username on blur', () => {
+    const { vaadinLoginUsername } = login.$;
+
+    vaadinLoginUsername.focus();
+    vaadinLoginUsername.blur();
+
+    expect(vaadinLoginUsername.invalid).to.be.false;
+  });
+
+  it('should not validate password on blur', () => {
+    const { vaadinLoginPassword } = login.$;
+
+    vaadinLoginPassword.focus();
+    vaadinLoginPassword.blur();
+
+    expect(vaadinLoginPassword.invalid).to.be.false;
+  });
+
   it('should mark only username as invalid if user hits ENTER when field is empty', () => {
     const { vaadinLoginUsername, vaadinLoginPassword } = login.$;