Expanding width of combobox popup when selectable is used within group

[HasibuddinShaikh]

Version/Branch of Dear ImGui:

Version 1.91, Branch: master (master/docking/etc.)

Back-ends:

imgui_impl_sdl3.cpp + imgui_impl_dx12.cpp

Compiler, OS:

Windows 10 + MSVC 2022

Full config/build information:

No response

Details:

I am using selectable within group. This is displayed in combobox popup. The issue is that the popup window width keeps on increasing each successive frame until it becomes equal to width of main window. The issue can be reproduced from imgui_demo.cpp file.

    if (ImGui::BeginCombo("combo 1", combo_preview_value, flags))
    {
        for (int n = 0; n < IM_ARRAYSIZE(items); n++)
        {
            ImGui::BeginGroup();
            const bool is_selected = (item_selected_idx == n);
            if (ImGui::Selectable(items[n], is_selected))
                item_selected_idx = n;

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

            ImGui::EndGroup();
        }
        ImGui::EndCombo();
    }

The only line I added is BeginGroup and EndGroup. Please let me know what is wrong with the code. When I was using earlier version, the selectable within group was working fine but now the issue is since I am using the latest commit.

I have also tried by pushing and poping id at group but with no positive outcome.

Thanks for your support.

Screenshots/Video:

selectable_group_issue_1.mp4

Minimal, Complete and Verifiable Example code:

    if (ImGui::BeginCombo("combo 1", combo_preview_value, flags))
    {
        for (int n = 0; n < IM_ARRAYSIZE(items); n++)
        {
            ImGui::BeginGroup();
            const bool is_selected = (item_selected_idx == n);
            if (ImGui::Selectable(items[n], is_selected))
                item_selected_idx = n;

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

            ImGui::EndGroup();
        }
        ImGui::EndCombo();
    }

[ocornut]

I'll need to explain/discuss the reason more in details later, but you can use ImGuiSelectableFlags_SpanAllColumns or ImGuiSelectableFlags_NoPadWithHalfSpacing to workaround the issue.

The extra half-ItemSpace padding submitted by Selectable() has been the bane of my life for a while, hey :)

[yuvashrikarunakaran]

ImGui::SetNextWindowSizeConstraints(ImVec2(100, 0), ImVec2(300, FLT_MAX)); // Adjust min/max width
if (ImGui::BeginCombo("combo 1", combo_preview_value, flags))
{
// Your code
ImGui::EndCombo();
}

[yuvashrikarunakaran]

cpp
if (ImGui::BeginCombo("combo 1", combo_preview_value, flags))
{
for (int n = 0; n < IM_ARRAYSIZE(items); n++)
{
// Create a unique ID for each selectable item within the combo box
ImGui::PushID(n);

    // Custom layout: Use columns or spacers instead of BeginGroup/EndGroup
    const bool is_selected = (item_selected_idx == n);
    if (ImGui::Selectable(items[n], is_selected))
    {
        item_selected_idx = n;
    }

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

    ImGui::PopID();
}
ImGui::EndCombo();

}

Removed BeginGroup/EndGroup:

These aren't necessary for basic selectable items and can interfere with size calculations.
Unique Identifiers (PushID/PopID):

Ensures each selectable has a unique context, preventing ID conflicts.
Simplified Layout:

If you need advanced layouts (e.g., multi-column selectable), consider using ImGui::Columns or custom widgets instead of BeginGroup.