-
-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popup without input blocking? #718
Comments
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 |
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. |
@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.
|
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! 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 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 I managed to fake that by having the popup be a regular window and using the 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)? |
@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, |
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 I'll strip out the bloat from my implementation and post in a few minutes so you can have a functional example. |
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). |
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. |
That's fine, no rush. I'm only looking to improve the usability of things here, it's not 'critical' 👍 |
@inflex Thanks for your patience. https://gist.github.com/harold-b/7dcc02557c2b15d76c61fde1186e31d0 |
@harold-b simply brilliant, many thanks for that block of code, certainly an item to come in great use with many people I think 👍 |
My pleasure :) |
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:
|
@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
Any other way, you can think of, I can hack to get this working? Here is a picture.
Code:
|
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. |
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. 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. |
Don’t use a popup then?
|
Yes!! |
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... |
It would be great if this would be a built in component/behavior for drop down lists. |
I spent all day messing with this and I think I finally figured out a hack/workaround that works for me - maybe someone else will benefit. I was unable to use the above "fake" popup implementation because when the item was selected, it would close my parent window, which happened to be a different popup. After much messing around and reading how menus are done,I figured out that if I pass the ImGuiWindowFlags_ChildWindow to the BeginPopup function, everything works as expected!. Here is my code (edited to remove my actual list contents):
|
I got it working by creating a new flag for the TextInput item, called
And the code at the end of
This allows the popup window to display over the console, without taking the keyboard input away from the text input widget. |
Moving here from duplicate issue #5513.
The big question is - and I know I’m going to sound like an echo in here, but maybe something has emerged since this thread started - is there any Correct™ way to implement this? |
I had a better look at this thread today. I'll try to do a recap, with comments and fixes.
Rokups' suggestion ( #718 (comment) ) EricStancliff's suggestion ( #718 (comment) ) Here's what a believe is a decent solution based on the later: (reminder: need 1dd964f) // State
static char input[32]{ "" };
// Code
const bool is_input_text_enter_pressed = ImGui::InputText("##input", input, sizeof(input), ImGuiInputTextFlags_EnterReturnsTrue);
const bool is_input_text_active = ImGui::IsItemActive();
const bool is_input_text_activated = ImGui::IsItemActivated();
if (is_input_text_activated)
ImGui::OpenPopup("##popup");
{
ImGui::SetNextWindowPos(ImVec2(ImGui::GetItemRectMin().x, ImGui::GetItemRectMax().y));
//ImGui::SetNextWindowSize({ ImGui::GetItemRectSize().x, 0 });
if (ImGui::BeginPopup("##popup", ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_ChildWindow))
{
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::ClearActiveID();
strcpy(input, autocomplete[i]);
}
}
if (is_input_text_enter_pressed || (!is_input_text_active && !ImGui::IsWindowFocused()))
ImGui::CloseCurrentPopup();
ImGui::EndPopup();
}
} It's not ideal but seemingly does the job decently. It does work better with
I'll try to massage that, add regression tests for it, and see if some of it can be standardized or demoed. |
…ed. (useful for e.g. ocornut#718, ocornut#4461 and probably other things)
…ior (useful for e.g. ocornut#718, ocornut#4461 and probably other things) (broken by 1c4066c)
I have a somewhat related question. How can I make a popup (using any of the methods in #718 (comment)) be positioned where the text cursor currently is? Especially for |
I managed to hack something together:
Is there a better way? |
#718 (comment) Anything I can follow to resolve this? |
EDIT Original Comment:Posting to confirm I also have encountered this bug. If the auto-complete popup is open when you click the 'X' button of the window, you'll get the failed assertion, mentioned by @damian-kos Here is a minimal reproduction, using 1.90 WIP imgui-docking branch (viewports enabled) void MinimalBug()
{
static bool open = true;
if (!open) return;
if (ImGui::Begin("Bug Window", &open))
{
// State
static char input[32]{ "" };
// Code
const bool is_input_text_enter_pressed = ImGui::InputText("##input", input, sizeof(input), ImGuiInputTextFlags_EnterReturnsTrue);
const bool is_input_text_active = ImGui::IsItemActive();
const bool is_input_text_activated = ImGui::IsItemActivated();
if (is_input_text_activated)
ImGui::OpenPopup("##popup");
{
ImGui::SetNextWindowPos(ImVec2(ImGui::GetItemRectMin().x, ImGui::GetItemRectMax().y));
//ImGui::SetNextWindowSize({ ImGui::GetItemRectSize().x, 0 });
if (ImGui::BeginPopup("##popup", ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_ChildWindow))
{
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::ClearActiveID();
strcpy(input, autocomplete[i]);
}
}
if (is_input_text_enter_pressed || (!is_input_text_active && !ImGui::IsWindowFocused()))
ImGui::CloseCurrentPopup();
ImGui::EndPopup();
}
}
}
ImGui::End();
} |
You can use Was named this way as I initially envisioned is for history of e.g. a console input. I'll spend some time now working on this and #2057 and see if I can come up with canonical or out-of-box code. |
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.
The text was updated successfully, but these errors were encountered: