Dialog box from Dropdown menu selection.

[sathish-a]

I would like to open appropriate dialog boxes for items present in the Dropdown menu. Assume I have menus like share, delete, download, etc. On selecting these items should open its corresponding dialog box.

Please guide me on how to implement this
Thanks a ton.

[sathish-a]

Hi guys, can someone share at least any link to guide me?

[masenf]

Try something like this

import reflex as rx


class State(rx.State):
    which_dialog_open: str = ""

    def delete(self):
        print("Deleted item")

    def save_settings(self):
        print("Saved settings")


def delete_dialog():
    return rx.alert_dialog.root(
        rx.alert_dialog.content(
            rx.alert_dialog.title("Are you Sure?"),
            rx.alert_dialog.description(
                rx.text(
                    "This action cannot be undone. Are you sure you want to delete this item?",
                ),
                margin_bottom="20px",
            ),
            rx.hstack(
                rx.alert_dialog.action(
                    rx.button(
                        "Delete",
                        color_scheme="red",
                        on_click=State.delete,
                    ),
                ),
                rx.spacer(),
                rx.alert_dialog.cancel(rx.button("Cancel")),
            ),
        ),
        open=State.which_dialog_open == "delete",
        on_open_change=State.set_which_dialog_open(""),
    )


def settings_dialog():
    return rx.dialog.root(
        rx.dialog.content(
            rx.dialog.title("Settings"),
            rx.dialog.description(
                rx.text("Set your settings in this settings dialog."),
                margin_bottom="20px",
            ),
            rx.dialog.close(
                rx.button("Close", on_click=State.save_settings),
            ),
        ),
        open=State.which_dialog_open == "settings",
        on_open_change=State.set_which_dialog_open(""),
    )


def index() -> rx.Component:
    return rx.vstack(
        rx.menu.root(
            rx.menu.trigger(rx.icon("menu")),
            rx.menu.content(
                rx.menu.item(
                    "Delete",
                    on_click=State.set_which_dialog_open("delete"),
                ),
                rx.menu.item(
                    "Settings",
                    on_click=State.set_which_dialog_open("settings"),
                ),
            ),
        ),
        rx.cond(
            State.which_dialog_open,
            rx.heading(f"{State.which_dialog_open} dialog is open"),
        ),
        delete_dialog(),
        settings_dialog(),
        height="100vh",
        align="center",
    )


app = rx.App()
app.add_page(index)

You cannot use the triggers because the context menu items are ephemeral, so a dialog cannot be "inside" of them. To get around this, I use a state var to control whether or not the dialog is open.

[hragbalian]

@masenf Thanks for this response. It's very helpful. One follow up, as I'm running into some issues using this as a component for a series of distinct objects each with a different uuid. When I try to set the value for which_dialog_open with a uuid, such that it sets and conditions the dialog open on the value f"delete_{item.uuid}" instead of just "delete", it appears to set the value fine but the dialog fails to open when that value is set. So this line works:

on_click=State.set_which_dialog_open(f"delete_{item.uuid}"), ... in the index()

but this doesn't

open=State.which_dialog_open == f"delete_{item.uuid}", ... in the delete_dialog().

The dialog is not opening when the value is set and matches the set value.

Any thoughts on why? Thanks!

[hragbalian]

@masenf Here is a gist of the issue, adapted from your example above:

import reflex as rx
import uuid


class MyItem(rx.Base):
    uuid: str
    
    
class State(rx.State):
    which_dialog_open: str = ""
    items_list: list[MyItem] = [MyItem(uuid=str(uuid.uuid4())) for x in range(10)]
    
    @rx.var
    def check(self):
        print(self.which_dialog_open)
        
    def delete(self):
        print("Deleted item")

    def save_settings(self):
        print("Saved settings")


def delete_dialog(item):
    return rx.alert_dialog.root(
        rx.alert_dialog.content(
            rx.alert_dialog.title(f"Are you sure you want to delete {item.uuid}"),
            rx.alert_dialog.description(
                rx.text(
                    "This action cannot be undone. Are you sure you want to delete this item?",
                ),
                margin_bottom="20px",
            ),
            rx.hstack(
                rx.alert_dialog.action(
                    rx.button(
                        "Delete",
                        color_scheme="red",
                        on_click=State.delete,
                    ),
                ),
                rx.spacer(),
                rx.alert_dialog.cancel(rx.button("Cancel")),
            ),
        ),
        open=State.which_dialog_open == f"delete_{item.uuid}",
        on_open_change=State.set_which_dialog_open(""),
    )


def settings_dialog(item):
    return rx.dialog.root(
        rx.dialog.content(
            rx.dialog.title(f"Settings for {item.uuid}"),
            rx.dialog.description(
                rx.text("Set your settings in this settings dialog."),
                margin_bottom="20px",
            ),
            rx.dialog.close(
                rx.button("Close", on_click=State.save_settings),
            ),
        ),
        open=State.which_dialog_open == f"settings_{item.uuid}",
        on_open_change=State.set_which_dialog_open(""),
    )


def index(item) -> rx.Component:
    return rx.vstack(
        rx.menu.root(
            rx.menu.trigger(rx.button(rx.icon("menu"), item.uuid)),
            rx.menu.content(
                rx.menu.item(
                    "Delete",
                    on_click=State.set_which_dialog_open(f"delete_{item.uuid}"),
                ),
                rx.menu.item(
                    "Settings",
                    on_click=State.set_which_dialog_open(f"settings_{item.uuid}"),
                ),
            ),
        ),
        # rx.cond(
        #     State.which_dialog_open,
        #     rx.heading(f"{State.which_dialog_open} dialog is open"),
        # ),
        delete_dialog(item),
        settings_dialog(item),
        align="center",
    )

def list_of_items() -> rx.Component:
    
    return rx.vstack(
        rx.foreach(
            State.items_list,
            lambda item: index(item)
            
        )
    )

[hragbalian]

Quick follow-up here: so f-strings don't appear to be working in the open statement but are fine in the on_open_change / set_ statements. Switching the f-string to "delete_" + item.uuid resolved the issue. I suspect this is a bug?