How to have scrolling working with selected items in a listbox ?

[rtoumazet]

Version/Branch of Dear ImGui:

Version: 1.83
Branch: master

Back-end/Renderer/Compiler/OS

Back-ends: imgui_impl_opengl3.cpp
Operating System: Windows

Hi.

I'm trying to have scrolling working with selected items in a listbox, using the keyboard.
If no element is highlighted in the listbox, moving from element to element using up and down arrow of the keyboard works fine, but as you can see in the video scrolling doesn't follow the selection :

When one element is highlighted, the scrolling works following the current highlighted element. Unfortunately, when the up or down key is kept down, the selected and highlighted element are getting desynchronized :

What is the best way to have the scrolling in phase with the selected element, instead of the highlighted one ?

Thank you !

Standalone, minimal, complete and verifiable example: (see #2261)

// Here's the code used for both captures, 
        {
            // Draw list
            ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2());
            const auto child_size = ImVec2(310, 280);
            ImGui::BeginChild("ChildDrawList", child_size, true, window_flags | ImGuiWindowFlags_MenuBar);

            // ImGui::ChildWindowHeader(tr("Draw list"));
            if (ImGui::BeginMenuBar()) {
                ImGui::TextUnformatted(tr("Draw list").c_str());
                ImGui::EndMenuBar();
            }
            const auto  draw_list_size = ImVec2(310, 260);
            const char* items[] = {"AAAA",    "BBBB", "CCCC", "DDDD",  "EEEE", "FFFF",  "GGGG",  "HHHH", "IIII",   "JJJJ", "KKKK",
                                   "LLLLLLL", "MMMM", "NNNN", "OOOOO", "PPP",  "QQQQQ", "RRRRR", "SSSS", "TTTTTT", "UUU"};
            if (ImGui::BeginListBox("##draw_list", draw_list_size)) {
                if (ImGui::IsKeyPressed(ImGui::GetKeyIndex(ImGuiKey_DownArrow))) {
                    if (current_part_idx < draw_list.size() - 1) { ++current_part_idx; }
                }
                if (ImGui::IsKeyPressed(ImGui::GetKeyIndex(ImGuiKey_UpArrow))) {
                    if (current_part_idx > 0) { --current_part_idx; }
                }

                for (int n = 0; n < IM_ARRAYSIZE(items); ++n) {
                    const bool is_selected = (current_part_idx == n);
                    if (ImGui::Selectable(items[n], is_selected)) { current_part_idx = n; }

                    // Set the initial focus when opening the combo (scrolling + keyboard navigation focus)
                    if (is_selected) { ImGui::SetItemDefaultFocus(); }
                }
                ImGui::EndListBox();
            }

            ImGui::EndChild();
            ImGui::PopStyleVar();
        }

[ocornut]

Have you tried enabling keyboard navigation?
io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard;
You can move and select items with keyboard, and the movement already handle scroll tracking, so your key handling code could be removed and scrolling would work properly

There's currently no standalone function to force that scroll in the desirable way other than ScrollToBringRectIntoView() in imgui_internal.h. We have yet to design a public facing wrapper which would handle the fact that depending on context we want items to appear at the center or at the edge (in most situations we want items at the center when window appears, and follow the edge when manually altered afterwards).
More ref #3692 #3578 #3208

[rtoumazet]

Actually io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard is enabled in my app, but its default behaviour isn't working the way I want.
Using it, you can move the highlighted element up and down, with the scrolling following its position, but you still need to press the spacebar in order to select the highlighted element.
What I want to achieve is to have the keyboard navigation automatically select the highlighted element, without the need to press the spacebar ... ie you are on the first element of the listbox, you press the down arrow -> the second element is highlighted and selected directly.

[ocornut]

Actually io.ConfigFlags |= ImGuiConfigFlags_NavEnableKeyboard is enabled in my app,

Apologies: I had indeed skimmed through the first part of your initial message :(

What I want to achieve is to have the keyboard navigation automatically select the highlighted element, without the need to press the spacebar

I see. We have this feature in the range-select branch. I would like to investigate back-porting it to master.

However it's important to understand it only makes sense when the scopes are explicitly marked (otherwise there's no way to distinguish multiple selectable sets) + it needs a concept of restoring navigation id when reentering the scope. Let me investigate this.

[ocornut]

I have a pushed a few changes in the form of a ImGuiSelectableFlags_SelectOnNav flag (declared to imgui_internal.h) to auto-select when moved into.

It's a relatively simple change and can be used for single-selection.
It makes the moved-on Selectable() returns true and will ensure it is not clipped.

For multi-selection it's not usable as easily.

// Auto-select when moved into
// - This will be more fully fleshed in the range-select branch
// - This is not exposed as it won't nicely work with some user side handling of shift/control
// - We cannot "unselect other selectables" with e.g. 'if (g.NavJustMovedToId != id) { selected = false; pressed = was_selected; }' for two reasons
//   - (1) it would require focus scope to be set, need exposing PushFocusScope() or equivalent (e.g. BeginSelection() calling PushFocusScope())
//   - (2) usage will fail with clipped items
//   The multi-select API aim to fix those issues, e.g. may be replaced with a BeginSelection() API.

[rtoumazet]

Looks good to me 👍

[rtoumazet]

Just tested it in my app ... works like a charm !
Thanks again Omar ;)

[MacQuant]

Could you please provide an example that works for this please? I have tried but no luck. If you could past a simple example that would be great please

[rtoumazet]

Hi @MacQuant ,
Here's the relevant part of my code :

ImGuiIO&  io = ImGui::GetIO();
io.WantCaptureKeyboard = true;

...
      
const auto draw_list_size = ImVec2(310, 260);
if (ImGui::BeginListBox("##draw_list", draw_list_size)) {
    for (u32 n = 0; n < draw_list.size(); ++n) {
        const bool is_selected = (current_part_idx == n);
        if (ImGui::Selectable(format("{}##{}", draw_list[n].debugHeader(), n).c_str(), is_selected, ImGuiSelectableFlags_SelectOnNav)) {
                        current_part_idx = n;
        }

       // Set the initial focus when opening the combo (scrolling + keyboard navigation focus)
       if (is_selected) { ImGui::SetItemDefaultFocus(); }
     }
    ImGui::EndListBox();
}

Hope it helps :)

[MacQuant]

@rtoumazet
Works perfect, thanks so much!!