Vaadin: Auto click button after on return key

Question

As the LoginForm is no longer present in Vaadin 7, what is the best approach to handle a basic login page consisting of a single username/password input and a "login" button.

How can I make sure that when hitting the return key the form is submitted? I can think of ways of doing this, but figured there must be a more common approach.

score 9 · Answer 1 · edited Jul 03 '18 at 00:28

One simple way would be to use the LoginForm add on. https://vaadin.com/directory#addon/loginform

The other way would be to just display a form with login&password fields and set the Login button as the default action.

In Vaadin 7:

// Have an Login button and set it as the default button
Button login = new Button("Login");
login.setClickShortcut(ShortcutAction.KeyCode.ENTER);  // Bind ENTER key to this button.
login.addStyleName(Reindeer.BUTTON_DEFAULT);           // Add styling as visual cue this button is the default button (has Enter key bound to it).

Vaadin 8 uses a different theme by default, Valo instead of Reindeer, using a different style name:

// Have an Login button and set it as the default button
Button login = new Button("Login");
login.setClickShortcut(ShortcutAction.KeyCode.ENTER); // Bind ENTER key to this button.
login.addStyleName(ValoTheme.BUTTON_PRIMARY);         // Add styling as visual cue this button is the default button (has Enter key bound to it).

See documentation on Shortcut Keys for Vaadin 7 and for Vaadin 8. Note that some web browsers may not support some keyboard shortcuts.

Yes, it is. It adds styling for the button to show what is the default button/action — André Schild, Apr 26 '18 at 16:53

score 3 · Accepted Answer · edited Jan 03 '20 at 21:44

Vaadin 13+

In Vaadin Flow versions 13 and later, use Button::addClickShortcut. The method in defined in the interface com.vaadin.flow.component.ClickNotifier.

This addClickShortcut method replaces the setClickShortcut (add vs set) in Vaadin 7 & 8 as seen in other correct Answer.

Button login = new Button("Login");  
login.addClickListener(click -> {
    //do your things here 
});       
login.addClickShortcut(Key.ENTER);  //  Bind keyboard shortcut.

This code binds your ENTER key to the event listener.

Vaadin: Auto click button after on return key

2 Answers2

Vaadin 13+