Imgui: Popup without input blocking?

[harold-b]

Hello, fantastic library!

I'm trying to implement an autocomplete popup, but I've not been able to find a way to create a popup that can received mouse input and not block input from flowing through the underlying windows.

To be more specific of the context in which I'm trying to use it. I'd like to create an autocomplete popup a la google search. In which the popup does not close when you click elsewhere, you can hover and click it's items, and the input box ( or other widget ) retains keyboard input throughout.

_Example:_

Is it possible to do currently with the public API?

Thank you.

[harold-b]

I got it working... The biggest issues was that I wanted the helper window to show on top of the console, which is why I was having a hard time... Since by using a popup, whatever is underneath it loses input. I ended up managing to get it to work by having the console window use the ImGuiWindowFlags_NoBringToFrontOnFocus flag while the history window is showing. Then drawing the popup as a regular window after the console. This ensures that it's always on top of it and I still retain keyboard input on the console. I then hacked around listening to the keyboard events on the input box to control the selection and scrolling on the history window. Had I opted for having it pop-up below the console window, it would have been simple... But I really wanted it above! :)

_Results:_

[ocornut]

Nice! Sorry I hadn't had time to look into this in details. I was thinking about ChildWindow would provide something close to what you want but haven't looked at all the input details yet.
Have you had to make a change to imgui.cpp to get it working?

[harold-b]

No worries at all!

I didn't have to make any changes whatsoever to imgui.cpp, managed to get it functioning with just the public API, thankfully. Though I'm eager to dig into the internals I'm in a rush to get back to another task and was hoping to avoid it for the time being.

Here's another little gif showing mouse interaction with the windows as well, since I forgot it on the other gif.

A ChildWindow or some sort of per-window z-layering (which I guess itself a child window of sorts) would certainly be useful for these types of situations.

[ocornut]

@harold-b Could you clarify your description and maybe provide pseudo-code? I am interested in this and investigating if it can be made easier to the end-user.

I got it working... The biggest issues was that I wanted the helper window to show on top of the console, which is why I was having a hard time... Since by using a popup, whatever is underneath it loses input. I ended up managing to get it to work by having the console window use the ImGuiWindowFlags_NoBringToFrontOnFocus flag while the history window is showing. Then drawing the popup as a regular window after the console. This ensures that it's always on top of it and I still retain keyboard input on the console. I then hacked around listening to the keyboard events on the input box to control the selection and scrolling on the history window. Had I opted for having it pop-up below the console window, it would have been simple... But I really wanted it above! :)

[ocornut]

The dumb version that you can't interact with is to use a tooltip (created within the calback because we love living dangerously!)

if (data->EventFlag == ImGuiInputTextFlags_CallbackAlways && candidates.Size > 0)
{
    ImGui::SetNextWindowPos(ImVec2(ImGui::GetItemRectMin().x, ImGui::GetItemRectMax().y));
    ImGui::SetNextWindowSize(ImVec2(200,400));
    ImGui::BeginTooltip();
    for (int i = 0; i < candidates.Size; i++)
        ImGui::TextUnformatted(candidates[i]);
    ImGui::EndTooltip();
}

[harold-b]

The dumb version that you can't interact with is to use a tooltip (created within the calback because we love living dangerously!)

Why you daredevil! :rage2:

Here's an image to facilitate explaining more specifically what I wanted to achieve, realizing now my initial description was lacking:

What I wanted to do was open an arbitrary #popup window that shows on top of the current #window but does not block mouse input to the bottom window. ( I wanted to maintain keyboard input on the #input box however.

_I think the best working example would be Google's search box as per my initial post. If you leave an auto-suggest popup open and click around the page, etc. The popup remains open and unaltered. This what I wanted to mimic._

With a regular imgui popup the input below the popup gets blocked. I wanted my #popup to stay up as long as I wanted and I wanted it to be able to take mouse input and not block mouse input of the underlying window. So if I selected text, or clicked a button, etc. on the main #window, the #popup would be unaffected and still be drawn on top.

I managed to fake that by having the popup be a regular window and using the ImGuiWindowFlags_NoBringToFrontOnFocus flag on the main window as mentioned above.

It went something like this:

ImGuiWindowFlags winFlags = ImGuiWindowFlags_MenuBar;

if( isPopupVisible )
    winFlags |= ImGuiWindowFlags_NoBringToFrontOnFocus;

if( !ImGui::Begin( "Developer Console", &isWinOpen, winFlags ) )
{
    ImGui::End();
    return;
}

// Draw arbitrary stuff...

// Done drawing window
ImGui::End();

// Draw the popup as a new regular window on top of the last one
if( isPopupVisible )
{
    // Draw popup window
    ImGuiWindowFlags popupFlags = 
        ImGuiWindowFlags_NoTitleBar          | 
        ImGuiWindowFlags_NoResize            |
        ImGuiWindowFlags_NoMove              |
        ImGuiWindowFlags_HorizontalScrollbar |
        ImGuiWindowFlags_NoSavedSettings     |
        ImGuiWindowFlags_ShowBorders;

    bool isOpenDummy = true;

    ImGui::Begin( "history_popup", &isOpenDummy, popupFlags );
    ImGui::PushAllowKeyboardFocus( false );

    // Draw arbitrary popup content...

    ImGui::PopAllowKeyboardFocus();
    ImGui::End();
}

There was some tricky focus checking stuff I had to do too if I recall, but nothing fancy.

Perhaps the simplest way to facilitate this kind of behavior would be to have some kind of z-layering per root window, allowing each window to have it's own stack of regular windows drawn on top of it (but not intersecting other root windows and their z-layered stack)?

[inflex]

@harold-b I'm trying to implement the same sort of thing, though I'm fine with it being a popup/window that is located underneath/below the position of the input text field (in fact, that is how I need it).

I can partially get what I want using BeginPopup(), but like your initial attempts the keyboard focus stealing keeps getting in the way.

Do you have a functional outline handy? I've tried to replicate based on your work above without success (right now soon as I press the first key it just closes the modal popup I have where I have my search fields ) and the single character I pressed is all that gets put in to the said field.

Regards,
Paul.

[harold-b]

If I recall, there was no way to do it with the regular Popup, because whatever is underneath is simply loses input. This is why I went hunting for workarounds.

If you don't need mouse interaction with the popup, you can use the technique @ocornut presented above which uses the Tooltip instead. You can then listen to the keyboard events on the text input's callbacks and change the current selection on the popup.

If you need mouse interaction with the popup, I'm afraid you're probably stuck the workaround I used with the regular window on top, by using the ImGuiWindowFlags_NoBringToFrontOnFocus flag on the base window while the pseudo-popup is up. If you need it to act like a regular popup you can probably just check if the input lost keyboard focus or the mouse was pressed anywhere outside the input box or the popup.

I'll strip out the bloat from my implementation and post in a few minutes so you can have a functional example.

[inflex]

Thanks for that @harold-b . Ideally what I'd be trying to do is have the popup of candidates respond to up/down/enter (to select a candidate) or mouseclick, which then collapses the popup giving the main dialog full keyboard control again.

At the moment I'm doing a real "hack job" and simply building a list of small buttons under the field, only downside is that they have no keyboard control (ie, I can't pick a specific one with up/down->enter).

[harold-b]

For some reason I'm not getting some events fired on the popup window now in the stripped down version... It's very late here so unfortunately I'm going to have to pause it for tonight. But I can fix it up and post it tomorrow. Please bare with me.

[inflex]

That's fine, no rush. I'm only looking to improve the usability of things here, it's not 'critical'
Just was happy that there was an issue-thread with similar requirement.

:+1:

[harold-b]

@inflex Thanks for your patience.
Here's the gist for the example, I tried to keep it fairly simply:

https://gist.github.com/harold-b/7dcc02557c2b15d76c61fde1186e31d0

[inflex]

@harold-b simply brilliant, many thanks for that block of code, certainly an item to come in great use with many people I think :+1:

[harold-b]

My pleasure :)

[rokups]

static char input[32]{""};
ImGui::InputText("##input", input, sizeof(input));
ImGui::SameLine();
static bool isOpen = false;
bool isFocused = ImGui::IsItemFocused();
isOpen |= ImGui::IsItemActive();
if (isOpen)
{
    ImGui::SetNextWindowPos({ImGui::GetItemRectMin().x, ImGui::GetItemRectMax().y});
    ImGui::SetNextWindowSize({ImGui::GetItemRectSize().x, 0});
    if (ImGui::Begin("##popup", &isOpen, ImGuiWindowFlags_NoTitleBar|ImGuiWindowFlags_NoMove|ImGuiWindowFlags_NoResize|ImGuiWindowFlags_Tooltip))
    {
        ImGui::BringWindowToDisplayFront(ImGui::GetCurrentWindow());
        isFocused |= ImGui::IsWindowFocused();
        static const char* autocomplete[] = {"cats", "dogs", "rabbits", "turtles"};
        for (int i = 0; i < IM_ARRAYSIZE(autocomplete); i++)
        {
            if (strstr(autocomplete[i], input) == NULL)
                continue;
            if (ImGui::Selectable(autocomplete[i]) || (ImGui::IsItemFocused() && ImGui::IsKeyPressedMap(ImGuiKey_Enter)))
            {
                strcpy(input, autocomplete[i]);
                isOpen = false;
            }
        }
    }
    ImGui::End();
    isOpen &= isFocused;
}

There are still problems:

• No idea how to avoid static bool isOpen. We want popup to remain open as long as either input or popup itself have focus. However we can not know if popup has focus before rendering it. Can use storage (same as for tree open state) maybe.
• Keyboard navigation does not work.
• Not sure how to limit popup height to some max value without making it permanently bigger than needed. Can calculate this from font size and suggestion count.
• So far i am unable to force window to remain above other windows. Clicking input widget twice moves popup behind active window. Can use ImGui::BringWindowToDisplayFront() for windows rendered in the main viewport and ImGuiWindowFlags_Tooltip when autocomplete is rendered in it's own viewport.

[gallickgunner]

@ocornut - Are there any plans to have a proper laid out solution for this? The above solutions don't work if you want the same functionality with popups or perhaps I might have missed something. For example in my case, my file dialog is a Popup Modal and an InputText is rendered inside it. I want to show another autocomplete popup like the OP when the user starts typing on the Input Bar but there is no way around it since,

1) As soon as the popup comes the Input loses focus, If you try to regain focus the Popup closes as intended.

2) I can't hack my autocomplete popup as an ImGui Window (ImGui::Begin not child) since I'm currently inside a Popup Modal. Opening a Window over the modal by using ImGuiWindowFlags_NoBringToFrontOnFocus on the main Modal window brings the autocomplete Window to the top of the modal but it's not interactable at all since the Popup Modal is supposed to block interaction with windows prolly.

Any other way, you can think of, I can hack to get this working? Here is a picture.

3) I tried using a child window ( ImGui::BeginChild ) for the autocomplete popup. While this does everything I want ( the input doesnt loses focus anymore) there seems to be a transparency issue which doesn't go away even after setting alpha to 1.0 by using ImGuiSetNextWindowBgAlpha()

Code:

if(ImGui::BeginPopupModal("Open File", nullptr, ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoScrollWithMouse))
{
    // Draw Top and Middle Region ...

    if(show_popup)
    {
        ImGuiWindowFlags popupFlags = ImGuiWindowFlags_NoTitleBar |
                                  ImGuiWindowFlags_NoResize   |
                                  ImGuiWindowFlags_NoMove     |
                                  ImGuiWindowFlags_NoFocusOnAppearing |
                                  ImGuiWindowFlags_NoScrollbar |
                                  ImGuiWindowFlags_NoSavedSettings;

        ImGui::PushClipRect(ImVec2(0,0), ImGui::GetIO().DisplaySize, false);
        ImGui::SetNextWindowBgAlpha(1.0);
        ImGui::SetNextWindowPos(popup_pos);
        ImGui::SetNextWindowSize(popup_sz);
        ImGui::BeginChild("##InputBarComboBox", popup_sz, true, popupFlags);

        //Draw List
        /*
        if(ImGui::ListBoxHeader("##InputBarComboBox", ImVec2(0,150))) ....
        */    

        ImGui::EndChild();
        ImGui::PopClipRect();
    }
    // Draw Checkbox, Buttons Inside Popup Modal
     ImGui::EndPopup() 
}

[gallickgunner]

Ok so I managed to solve the issue in 3. Apparently, either I misunderstood how the Z ordering works or there isn't proper support for it as the OP seems to be suggesting that as well.

The issue in 3 happened because I drew the child window first and then drew the bottom checkboxe and buttons in the parent window. I thought the child window should appear on top regardless of "when" it's drawn. Drawing the checkboxes and other things before drawing the child window solved the transparency issue.

[sonoro1234]

I need a Popup that let use mouse input outside it (without closing) because it is a mesh editor that uses parameters from the Popup but also mouse actions done outside the Popup.
Are the tips mentioned in this thread the only way to achieve it?

I think they are not applicable to my use case as I dont want to interactuate with other window but with the whole imgui viewport.

[ocornut]

Don’t use a popup then?

[sonoro1234]

Yes!!

[frink]

I've seen several solutions here. Is there agreed canonical way to do this yet? I saw the note referring to this issue from #2119 which seems like most people's use case and looked at #1658 as well. Seems like there are a lot of ways to provide similar results. Would be nice to have a correct way to do it...