How to arrange Components (Input, maybe others) in nested Containers?

[nmarks99]

I often encounter an issue where the cursor of an Input Component doesn't show visually when nested in several Containers. Here is a minimal example:

#include <string>
#include <ftxui/component/captured_mouse.hpp>
#include <ftxui/component/component.hpp>
#include <ftxui/component/component_base.hpp>
#include <ftxui/component/screen_interactive.hpp>
#include <ftxui/dom/elements.hpp>

using namespace ftxui;

int main() {
    std::string s1, s2, s3, s4;

    auto inp1 = Input(&s1, "Input 1: ");
    auto inp2 = Input(&s2, "Input 2: ");
    auto inp3 = Input(&s3, "Input 3: ");
    auto inp4 = Input(&s4, "Input 4: ");

    auto main_container = Container::Vertical({
	Container::Horizontal({inp1, inp2}),
	Container::Horizontal({inp3, inp4}),
    });

    auto main_renderer = Renderer(main_container, [&] {
        return vbox({
            hbox({
                inp1->Render(),
                separator(),
                inp2->Render(),
            }),
            separator(),
            hbox({
                inp3->Render(),
                separator(),
                inp4->Render(),
            }),
        });
    });

    auto screen = ScreenInteractive::Fullscreen();
    screen.Loop(main_renderer);

}

In this example I have 4 Input Components which I want to lay out in two rows of two. My motivation for using a Vertical container with two Horizontal containers inside is so keyboard navigation works as you'd expect. For example if focus is on inp1, then right arrow should move to inp2, and down arrow should move to inp3. Everything works as is except the Input cursor is not visible in many instances. Interestingly, if you focus and type something in inp1 or inp2 first before trying any other inputs, the cursor will show in all the inputs from then on as it should. However, if you use the inp3 or inp4 first, the cursor will not be shown.

Is this a bug or user error with how I am building my main_container with Inputs in nested Containers?

[ArthurSonzogni]

Hi @nmarks99,

Maybe you can bind the same variable to be the index of both container?

This would force both to share the same "index", navigating in one would impact the other, causing the user to stay within the "same column".

E.g turning:

auto main_container = Container::Vertical({
  Container::Horizontal({inp1, inp2}),
  Container::Horizontal({inp3, inp4}),
});

into:

int column = 0;
auto main_container = Container::Vertical({
  Container::Horizontal({inp1, inp2}, &column),
  Container::Horizontal({inp3, inp4}, &column),
});

[ArthurSonzogni]

If you want, you can also use this extension:
https://github.com/mingsheng13/grid-container-ftxui

[nmarks99]

Thanks, the GridContainer seems pretty nice, though it has the same issue for me. However, I see that problem is fixed if I call render on the container, but that isn't a good solution for me.

This works (cursor is shown an all inputs when focused):

    auto main_container = GridContainer({
	{inp1, inp2},
	{inp3, inp4}
    });

    auto main_renderer = Renderer(main_container, [&] {
        return vbox({
	    main_container->Render(),
        });
    });
    screen.Loop(main_renderer);

This does not (issue with cursor visibility I previously described):

    auto main_container = GridContainer({
	{inp1, inp2},
	{inp3, inp4}
    });

    auto main_renderer = Renderer(main_container, [&] {
        return vbox({
	    hbox({
		inp1->Render(),
		separator(),
		inp2->Render(),
	    }),
	    separator(),
	    hbox({
		inp3->Render(),
		separator(),
		inp4->Render(),
	    }),
        });
    });

    screen.Loop(main_renderer);

The reason I want to do the second option here is so that I can easily apply modifications to how each Component is rendered such as adding | color(...) to each Component. If I render the main_container directly, it is much more difficult to modify the rendering of components inside it. At least that is my current understanding.