InputComponent.group is not implicitly invoked by TextModeLayout

[jsfan3]

In the following code, the InputComponents are aligned correctly (the credentials container is added to a BoxLayout.y Form):

        TextModeLayout tl = new TextModeLayout(2, 1);
        Container credentials = new Container(tl);
        credentials.setUIID("MyContainer01");
        TextComponent email = new TextComponent().label("Email");
        TextComponent password = new TextComponent().label("Password");
        Validator val = new Validator();
        val.addConstraint(email, RegexConstraint.validEmail());
        val.addConstraint(password, new LengthConstraint(8));
        InputComponent.group(email, password);
        credentials.add(email);
        credentials.add(password);

But... if I remove the InputComponent.group(email, password); the components are not aligned properly. According to the Javadocs, InputComponent.group(email, password); should be invoked implicitly when using TextModeLayout, so... is this a bug?

[codenameone]

I just tried this and it was aligned perfectly:

Form hi = new Form("Alignment", BoxLayout.y());

TextModeLayout tl = new TextModeLayout(2, 1);
Container credentials = new Container(tl);
credentials.setUIID("MyContainer01");
TextComponent email = new TextComponent().label("Email");
TextComponent password = new TextComponent().label("Password");
Validator val = new Validator();
val.addConstraint(email, RegexConstraint.validEmail());
val.addConstraint(password, new LengthConstraint(8));
credentials.add(email);
credentials.add(password);
hi.add(credentials);

hi.show();

[jsfan3]

You're right. However, the following more complete code doesn't align properly, as you can see in my screenshot.

Form hi = new Form("Alignment", BoxLayout.y());

        SpanLabel introText = new SpanLabel("Intro text on multiple lines... this is a long sentence");

        // Login button (disabled until the user inputs validates)
        Label logo = new Label(FontImage.createMaterial(FontImage.MATERIAL_ACCOUNT_BALANCE_WALLET, "Label", 50));

        // Login button (disabled until the user inputs validates)
        Button loginButton = new Button("ButtonLogin", "MyButton01");
        loginButton.addActionListener(l -> {
            Log.p("loginButton pressed");
        });

        TextModeLayout tl = new TextModeLayout(2, 1);
        Container credentials = new Container(tl);
        credentials.setUIID("MyContainer01");
        TextComponent email = new TextComponent().label("Email");
        TextComponent password = new TextComponent().label("Password");
        password.getField().setDoneListener(l -> {
            if (loginButton.isEnabled()) {
                loginButton.pressed();
                loginButton.released();
            }
        });
        Validator val = new Validator();
        val.addConstraint(email, RegexConstraint.validEmail());
        val.addConstraint(password, new LengthConstraint(8));
        val.addSubmitButtons(loginButton);
        email.getField().setConstraint(TextField.EMAILADDR);
        password.getField().setConstraint(TextField.PASSWORD);
        // InputComponent.group(email, password);
        credentials.add(email);
        credentials.add(password);

        Button lostPassword = new Button("LostPassword");

        hi.add(FlowLayout.encloseCenter(introText));
        hi.add(FlowLayout.encloseCenter(logo));
        hi.add(credentials);
        hi.add(loginButton);

        hi.show();

[codenameone]

Open the component inspector and look at the preferred size of the Email/Password labels. If both have identical width it means the code works as expected.

I'm guessing the email/password text fields have different preferred sizes which cause this issue as the layout takes that into consideration. If this is indeed the case we need to think about the "right thing" to do here.