Shortcut Keys in Vaadin 10+?

Flow
1

Vaadin 8 had the Shortcut Keys available: [docs]
(https://vaadin.com/docs/v8/framework/advanced/advanced-shortcuts.html)

Is there/will there be support for this in Flow?

2

Hi Tori. We are currently working on the keyboard shortcuts API for Flow https://github.com/vaadin/flow/issues/2449, and it will be included in the next Vaadin platform version, 13 which is shipped as beta in early February and final on March.

For V10-V12 versions there is only low-level Element API for this, and it is not really that convenient to use.

3

You could also look at this add-on for the time being: https://vaadin.com/directory/component/shortcut

4

Hello! I wanted to follow up on this question.

With 13.0.0.alpha4, .addClickShortcut was added. I have tried it out a little bit, but noticed something:

TextField username = new TextField("Email");
PasswordField password = new PasswordField("Password", "********");
Button submit = new Button("Log In", new Icon(VaadinIcon.SIGN_IN), e -> login());

username.setAutofocus(true);
password.setRevealButtonVisible(false);
submit.addClickShortcut(Key.ENTER);

If I fill in a username/password and try the shortcut right after, I noticed that the button will be clicked, but the Value for password won’t get updated, so the login attempt will be considered a failure. In other words, I have to press the “Enter” key twice for the login to take. Is there a way to modify the shortcut in some way so that the TextFields get updated before the shortcut activates?

5

Hi Tori!

By default the shortcuts will prevent default browser event behavior (such as Ctrl+P opening printing view on Windows). This is a sensible default in most cases but for this particular situation, it seems to break the intended functionality.

The PasswordField relies on the same Enter keydown to synchronize its value to the server. However, the click shortcut will prevent this default behavior.

In order to get around this, the click shortcut will have to take the form

submit.addClickShortcut(Key.ENTER).allowBrowserDefault();

at least in Vaadin 13.

6

This is perfect. Thank you for the help!