The Popup Menu jumps to the bottom of the page instead of hiding

I am newbie to WT, however after reading this page: https://www.webtoolkit.eu/wt/doc/reference/html/classWt_1_1WPopupMenu.html i tried to create a popup menu as follow:

#include <Wt/WApplication.h>
#include <Wt/WLineEdit.h>
#include <Wt/WPushButton.h>
#include <Wt/WPopupMenu.h>
#include <Wt/WMessageBox.h>

using namespace Wt;

class test : public WApplication
{
private:
    /* data */
public:
    test(const WEnvironment &env) : WApplication(env)
    {

        root()->resize (500, 500);
        root()->decorationStyle().setBorder (WBorder(BorderStyle::Solid, 2, StandardColor::Red));
        auto btn = root()->addNew<WPushButton>("testPopUp");
        auto txt = root()->addNew<WLineEdit>();
        txt->setWidth (WLength (30, LengthUnit::FontEm));
        txt->setPlaceholderText("selected item will show here ...");
        auto popup = std::make_unique<WPopupMenu>();
        popup->addItem("item1")->triggered().connect ([=]{txt->setText("item1 selected.");});
        popup->addItem("item2")->triggered().connect ([=]{txt->setText("item2 selected.");});
        popup->addItem("item3")->triggered().connect ([=]{txt->setText("item3 selected.");});
        popup->addItem("item4")->triggered().connect ([=]{txt->setText("item4 selected.");});
        btn->setMenu (std::move (popup));
    }    
    ~test();
};

test ::~test()
{
}

int main(int argc, char **argv)
{

    return WRun(argc, argv, [](const WEnvironment &env)
                { return std::make_unique<test>(env); });
}

After loading, the popup menu is hidden and will be displayed by selecting the button, but after selecting an item or canceling the menu, it jumps to the bottom of the page instead of hiding.

The build environment is :

Operating System: Ubuntu 22.04.5 LTS
Kernel: Linux 6.8.0-49-generic
Architecture: x86-64
gcc version 11.4.0 (Ubuntu 11.4.0-1ubuntu1~22.04)

I built and ran the program whit this command:

g++ -std=c++14 -o test.wt main.c++ -lwthttp -lwt
./test.wt --docroot . --http-address 0.0.0.0 --http-port 9090 -c ../resources/wt_config.xml

error.png (11.3 KB) error.png

Replies (8)

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Hi again

Can anyone help me figure out if my code is wrong or if it's a bug?

Thanks

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Mark Travis about 2 months ago

I haven't tested this locally, but I'm fairly certain that you are missing a WContainerWidget to put the button and popup into.

try this at the opening of test::test


auto appWindow = addNew<WContainerWidget>();
appWindow->resize(500,500);

"root()" in this instance is the WApplication. You still need a WContainerWidget to put all of this into. It's what creates the sections of a webpage.

Otherwise, I think you are experiencing undefined behavior.

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Thanks for your time.
I think it's best to test it yourself. This Popup is a responsive navigation menu and is actually inside the header container in my actual project.
Anyway, I modified the above test code as you suggested, but the problem still persists.

auto appWindow = root()->addNew<WContainerWidget>();
appWindow->resize(500,500);
appWindow->decorationStyle().setBorder (WBorder(BorderStyle::Solid, 2, StandardColor::Red));
auto btn = appWindow->addNew<WPushButton>("testPopUp");
auto txt = appWindow->addNew<WLineEdit>();

If I use ‍‍‍popup->setAutoHide (true);, after selecting items, the menu jumps to the bottom of the screen and then hides, but canceling the menu still causes the menu to jump to the bottom of the screen.
I also used pop->setHidden (true); in the item selection callback, but it didn't help.

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Hi again

Can anyone help me figure out if my code is wrong or if it's a bug?

Thanks

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Matthias Van Ceulebroeck about 2 months ago

Hello Ali,

my apologies, with the holiday I lost track of this item in my inbox.

It seems I am only able to reproduce this issue if:

I have developer tools open, and active
I do not have a theme/resources set

So, I think that you can simply fix this with adding an additional argument to your command: --resources-dir /path/to/wt/resources. This resource directory is the same from the Wt repository, so if you run an application from Wt's root, this would become --resources-dir ./resources/.

Now, I do see that there is a weird interaction in JS. The display is set to 'none', but the JavaScript setHidden() resets this to '', which counts as invalid.
I believe that this should either not set display or indeed use 'none'.

So, it seems like a bug, but also can be quickly countered by setting the --resources-dir.

Does that resolve the issue for you, Ali?
If not, let me know!

Best,
Matthias

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Thanks for your answer

Your answer solved the problem but I didn't see anywhere in the docs that it was mandatory to use a theme.

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Ali Ali wrote in RE: The Popup Menu jumps to the bottom of the page instea...:

Thanks for your answer

Your answer solved the problem but I didn't see anywhere in the docs that it was mandatory to use a theme.

So I missed this: https://www.webtoolkit.eu/wt/doc/reference/html/overview.html#deployment

Thanks again

RE: The Popup Menu jumps to the bottom of the page instead of hiding - Added by Ali Ali about 2 months ago

Hello again

I tested it on iOS 18.1.1, pop-up cancellation does not work in any browser(Firefox, Chrome, Safari).

(1-8/8)

Project

General

Profile

Wt