`ui.dialog` hidden when created inside a `ui.menu`

[tgbl-mk]

Description

I am trying to use ui.menu and ui.menu_item to create a dropdown menu (think file menu in most applications). If i try and create a dialog window from the function called by on_click, then I get an unexpected response when clicking the menu item.

This enough code to reproduce the issue:

from nicegui import ui


class MenuItemBug:

    def compose(self):
        with ui.row():
            with ui.button("Menu 1"):
                with ui.menu():
                    ui.menu_item("Item 1", on_click=self.on_item_click)
                    ui.menu_item("Item 2", on_click=self.on_item_click, auto_close=False)
            with ui.button("Menu 1"):
                with ui.menu():
                    ui.menu_item("Item 1", on_click=self.on_item_click, auto_close=False)
                    ui.menu_item("Item 2", on_click=self.on_item_click)
        return self

    def run(self):
        ui.run(port=1004)

    def dialog(self):
        with ui.dialog(value=True) as _, ui.card():
            with ui.column():
                ui.label("Bit of a journey to get here!")

    def on_item_click(self):
        print("click")
        self.dialog()


MenuItemBug().compose().run()

If you click a menu item that has auto_close set to False then the dialog opens as expected. However if you click a menu item with auto_close set to True(the default value), "click" is printed to the terminal and the menu closes without opening the dialog. If you reopen the menu then the dialog will then open. I have attached a video showing the behaviour below.

Screen.Recording.2024-12-17.123227.mp4

It seems that the dialog will only be displayed whilst the menu is open.

Is this expected behaviour? An acceptable solution for me would be to leave the menu open while the dialog is displayed, and to close the menu when the dialog is closed. I suspect this is already possible with the existing methods.

I am using python 3.11.0 and nicegui 2.8.1 have attached the requirements.txt from my .venv below

requirements.txt

Please let me know if any additional information is required! Thanks

[falkoschindler]

Thanks for reporting this issue, @tgbl-mk!

See #4092 (comment) for an explanation what is going on.

Since this behavior confuses quite some users, we should do something about it. Maybe we should always nest dialogs in the top-level page content, and not somewhere inside child elements. To prevent breaking changes, we could introduce a parameter local: bool = True to make the placement configurable. The default value could be changed to False in version 3.0.

[tgbl-mk]

Thanks for the quick response @falkoschindler!

After reviewing the link I can understanding whats happening a bit better. Creating the dialog within the context of ui.context.client.content fixes the issue for me so I'm happy to close this issue out.

The addition of a an additional parameter to ui.dialog sounds like a sensible future solution to me.

[falkoschindler]

I was just about to implement the new parameter, but noticed a problem with this approach:

Currently you can create a dialog within ui.refreshable functions, and it will be automatically removed from memory when clearing the UI container. But if it is globally added to the page content, the element might live forever if the user doesn't clean up. We had similar problems with creating layout elements like ui.header inside refreshables.

Therefore I tend to look for a different solution.

[falkoschindler]

We're still unsure how to avoid this unexpected behavior. Maybe ui.dialog should print a warning when it is created within ui.menu or other elements that can disappear from the DOM?