Change focus between two components

Hallo,

I’ve got two components:
-one textField
-one passwordField

These are for a loginscreen. The whole time the loginscreen is visible, one of the components should be focused and there shouldn’t be a possibility to lose the focus of these two.
I’ve allready tried it whit FocusListener and BlurListener, but coudn’t change from textField to passwordField and from passwordField to textField, because I didn’t found a possibility to allow a focuschange for these two components.

Hope you can help me :wink:

Max

Interesting question, which I have been thinking about earlier as well, although in a bit different use cases. There is a similar issue with multiple fields, where you want to have a focus sequence or ring between the fields, such as in a Table row with editable fields. You can set tab index to define the tab order, but after the last field, the focus can jump somewhere else, even to the location bar of the browser.

It’s possible to do it by defining Tab as a shortcut key, as is done in
this example
, but the server round-trip takes some time, so changing fields can become become noticeably unresponsive. Well, it works just fine with two fields, but not so nicely if there’s many.

With two fields it is possible to handle alternating the focus with blur listeners. I made a
quick test
, but there’s also some problems with that. For example, if you press the Tab key continuously, they come too fast and you end up with the two fields getting stuck in alternating forever. Etc.

I’m not sure if the issue has been discussed previously on the forum, but I think it’s only possible to properly solve it with client-side code. Perhaps the nicest solution would be a component extension that you could add to multiple components, which would then became a focus sequence or ring. I’m not sure how it should handle the events on the client-side, but the possibilities there are probably much better than on the server-side.

The next version of the
Animator
add-on, which currently also consists of the next version of the
Snappy
add-on, would allow you to achieve this behavior with the following server-side code:

new Snappy(username).on(ClientEvent.keydown(Key.TAB)).focus(password);
new Snappy(password).on(ClientEvent.keydown(Key.TAB)).focus(username);

It’s not published yet, but you can get the add-on sources from
http://github.com/jounik/Animator

Thanks for the quick answers. Your solutions are easy and simple and they do what I was looking for.