How to Autofocus new Compnent?

Flow
1

Hi, I am fairly new so this question might sound stupid, but anyway:
I have a container with 48 elements in them. Those 48 Elements have a textfield, 2 buttons each.

Now, whenever I press enter, I want to Autofocus the next Textfield. How do I do that?

This is the method in the "container that holds my 48 Elements:

   void focusNext (){
        for (ModuleView m: modules) {
            if (m.getContainerName().isEmpty()){
                m.focusContainerName ();
                return;
            }}}

And this is the method within my Element.

void focusContainerName() {
	containerName.focus();
	containerName.setValue("xxx");
}

Whenever those two methods get invoked, it doesnt do much… so what do I do wrong?

2

Hi, you can add an addKeyPressListener() to each component in which you give the focus to the next component.

Example using two textfields:

TextField textOne = new TextField("Field One");
TextField textTwo = new TextField("Field Two");
textOne.focus();
textOne.addKeyPressListener(Key.ENTER, e -> textTwo.focus());
3

Hey, thanks for the help, but that is exactly the thing that is not working. I will post the full code I have here.

I have two Views. The first one is my Element, which already has a Keylistener attached to it.

    containerName.addKeyPressListener(Key.ENTER, event -> {
        log.debug("Input found, beginning to create module with scanned input");
        setAndLoadContainerData(current);
        tray.focusNext();
    });
4

And the other one (Tray) Holds 48 of My elements. And now, whenever I press the Enter button, I want to iterate through my tray and select the next empty textfield, which gets identiefied, but it doesnt get focused.

public TrayView() {
// vaadinVerticalLayoutTrays.getChildren().forEachOrdered(component → {if (component instanceof ModuleView) modules.add((ModuleView) component);} );
modules.add(module1);
modules.add(module2);
modules.add(module3);
modules.add(module4);
modules.add(module5);
modules.add(module6);
modules.add(module7);
modules.add(module8);
modules.add(module9);
modules.add(module10);
modules.add(module11);
modules.add(module12);
modules.add(module13);
modules.add(module14);
modules.add(module15);
modules.add(module16);
modules.add(module17);
modules.add(module18);
modules.add(module19);
modules.add(module20);
modules.add(module21);
modules.add(module22);
modules.add(module23);
modules.add(module24);
modules.add(module25);
modules.add(module26);
modules.add(module27);
modules.add(module28);
modules.add(module29);
modules.add(module30);
modules.add(module31);
modules.add(module32);
modules.add(module33);
modules.add(module34);
modules.add(module35);
modules.add(module36);
modules.add(module37);
modules.add(module38);
modules.add(module39);
modules.add(module40);
modules.add(module40);
modules.add(module41);
modules.add(module42);
modules.add(module43);
modules.add(module44);
modules.add(module45);
modules.add(module46);
modules.add(module47);
modules.add(module48);

    numModules = modules.size();
    vaadinVerticalLayoutTrays.setMargin(false);
    vaadinVerticalLayoutTrays.setPadding(false);

}

//blablabla

    void focusNext (){
    for (ModuleView m: modules) {
        if (m.getContainerName().isEmpty()){
            m.focusContainerName();
            return;
        }
    }
}
5

Hello again! Could you provide the complete code/example? Those are needed to figure out how you define your views and components.