fix: prevent default action of Enter key in login form (#12273) (#12283)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: vaadin-bot

packages/login/src/vaadin-login-form-mixin.js

@@ -189,6 +189,10 @@ export const LoginFormMixin = (superClass) =>
     /** @protected */
     _handleInputKeydown(e) {
       if (e.key === 'Enter') {
+        // Prevent default so that the browser does not apply the Enter activation
+        // behavior to an element that receives focus while this event is handled.
+        e.preventDefault();
+
         const { currentTarget: inputActive } = e;
         const nextInput = inputActive.id === 'vaadinLoginUsername' ? this._passwordField : this._userNameField;
         // eslint-disable-next-line no-restricted-syntax

packages/login/test/login-form.test.js

@@ -1,4 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
+import { sendKeys } from '@vaadin/test-runner-commands';
 import { enter, fixtureSync, nextRender, nextUpdate, tap } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../src/vaadin-login-form.js';
@@ -251,6 +252,33 @@ describe('no autofocus', () => {
   });
 });
 
+describe('Enter key default action', () => {
+  let login, button, vaadinLoginPassword;
+
+  beforeEach(async () => {
+    const wrapper = fixtureSync(`
+      <div>
+        <vaadin-login-form no-autofocus></vaadin-login-form>
+        <button></button>
+      </div>
+    `);
+    [login, button] = wrapper.children;
+    await nextRender();
+    vaadinLoginPassword = fillUsernameAndPassword(login).vaadinLoginPassword;
+  });
+
+  it('should not activate an element focused while handling Enter keydown', async () => {
+    const clickSpy = sinon.spy();
+    button.addEventListener('click', clickSpy);
+    login.addEventListener('login', () => button.focus());
+
+    vaadinLoginPassword.focus();
+    await sendKeys({ press: 'Enter' });
+
+    expect(clickSpy).to.be.not.called;
+  });
+});
+
 describe('error message', () => {
   let login, formWrapper;