vaadin/flow-components

Login form regression cause components outside of it to require two clicks to work

davidef opened this issue · 3 comments

davidef commented

Description

Components added outside of a view which include a LoginForm require two click to be triggered.
This is a regression since 24.1.0. It was working as expected both in 24.0.x and 23.x.x

Expected outcome

A click on a link or button outside the LoginForm should be trigger the corresponding action at first click.

Minimal reproducible example

@Route(value = "login")
public class LoginView extends VerticalLayout {
	public LoginView() {
		LoginForm form = new LoginForm();
		add(form);

		RouterLink a = new RouterLink(OtherView.class);
		a.add("Privacy policy");
		add(a);
	}
}

Steps to reproduce

  1. Open the view
  2. Click on the link out side of the LoginForm (doesn't work)
  3. Click again (it now follow the link)

Environment

Vaadin version(s): 24.1.0 up to 24.4.12

Browsers

Issue is not browser related

web-padawan commented

Confirmed also in the web component using the following code example:

<vaadin-login-form></vaadin-login-form>

<a href="example.com">Example</a>

<script type="module">
  import '@vaadin/login/vaadin-login-form.js';
</script>

This problem is caused by adding error messages for login fields in 24.1.0: vaadin/web-components#5836:

  1. Once the focus leaves the login form on link mousedown, the error message shows and the form height increases,
  2. As a result, on mouseup event the click is no longer on the link (but the empty space it) so it doesn't get activated.

One possible workaround is to set explicit height on the login form to ensure it doesn't auto-grow.

UPD: see also similar issue where showing error messages causes button clicks to not fire.

web-padawan commented

BTW, this also affects built-in logic e.g. in some cases "Forgot password" button can't be clicked if focus is in any of the fields (the visual "active" state is applied on mousedown but there is no forgot-password event fired).

I'll see if we can postpone setting errorMessage until the field focusout (or global click if mouse was used for blur).