reflex-dev
Free standing dialog
Describe the bug
A clear and concise description of what the bug is.
When creating a dialog, then has its open prop set to a state var, and its the state var is set by a button within a menu, the dialog behaves in an unexpected mannor
To Reproduce Steps to reproduce the behavior:
- Code/Link to Repo:
class DashboardState(rx.State):
@staticmethod
def obtain_categories() -> List:
cats = getAllCategories()
dcats = {cat[0]: cat[1] for cat in cats}
clean_cats = []
for cat in cats:
if cat[2] and cat[2] in dcats:
clean_cats.append((cat[0], cat[1], dcats[cat[2]], cat[3], cat[4]))
else:
clean_cats.append(cat)
return clean_cats
categories: List[Tuple[str]] = obtain_categories()
cat_map:Dict[str,str] = {cat[0]: cat[1] for cat in categories}
edit_category_dialog: bool = False
delete_category_dialog: bool = False
parent_value: str = ""
def activate_edit_category_dialog(self, value:bool):
self.edit_category_dialog = value
def show_category_row(category: tuple):
return rx.table.row(
rx.table.cell(category[1]),
rx.table.cell(category[3]),
rx.table.cell(category[2]),
rx.table.cell(category_menu(category)),
)
def category_menu(component) -> rx.Component:
return rx.box(
rx.menu.root(
rx.menu.trigger(rx.icon("ellipsis-vertical")),
rx.menu.content(rx.menu.item(edit_category_button(component))),
),
rx.dialog.root(
rx.dialog.content(
rx.vstack(
rx.dialog.title(f"Edit Category: "),
rx.dialog.description("Edit the categorys's info"),
),
rx.flex(
rx.form.root(
rx.flex(
form_field_filled("Name", component[1], "text", "name"),
form_field_filled("Description", component[3], "text", "description"),
rx.form.field(
rx.flex(
rx.form.label("id"),
rx.form.control(
rx.input(value=component[0]),
as_child=True,
),
direction="column",
spacing="1",
),
width="100%",
name="id",
hidden=True,
),
rx.form.field(
rx.form.label("Select Parent Category"),
rx.select.root(
rx.select.trigger(),
rx.select.content(
rx.select.group(
rx.foreach(
DashboardState.categories, show_select
),
),
),
default_value=component[2],
name="parent_id",
direction="column",
spacing=1,
),
width="100%",
),
direction="column",
),
rx.flex(
rx.dialog.close(rx.button("Cancel", on_click=DashboardState.activate_edit_category_dialog(False))),
rx.form.submit(
rx.dialog.close(rx.button("Update category")),
as_child=True,
),
),
on_submit=DashboardState.edit_category,
reset_on_submit=False,
),
),
),
open=DashboardState.edit_category_dialog,
# on_open_change=DashboardState.activate_edit_category_dialog,
)
)
def edit_category_button(component) -> rx.Component:
return rx.button(rx.text("Edit"), on_click=DashboardState.activate_edit_category_dialog(True))
Expected behavior A clear and concise description of what you expected to happen. The dialog should appear and work as normal (ie background visible; dialog intractable normally)
Screenshots If applicable, add screenshots to help explain your problem. https://github.com/user-attachments/assets/7b9b0405-4473-4742-9cea-58d71dae48ea
Specifics (please complete the following information):
- Python Version:Python 3.12.6
- Reflex Version: reflex-0.6.0a1 / reflex-0.5.10
- OS: macOS 14.6.1 (23G93)
- Browser (Optional): Safari / Brave (Chromium)
Additional context Add any other context about the problem here.
Hello @Kastier1 , I have some questions that relate to recreating the issue. In the DashBoard class definition, there is a function call for "getAllCategories()", however there is no such instance of this function being defined anywhere across the entirety of the reflex repository (which is the repository that I am working out of). I'm presuming this means that this function is a custom function that you have created. Are there some extra files or libraries that I may be missing in order to call this function?
Hello @Kastier1,
My team and I have recreated a reflex application resembling yours based on the video link you gave us. I included a README.md file for you to follow in order to recreate it on your own device. The Dialog and Form components work as intended. The categories are set up in a different fashion compared to yours, but I believe that adopting some of the elements we've decided to go with in your project will help you greatly.
Here is the link to our repo as we were not provided a link to yours to work out of: https://github.com/Wei-HaiMing/DialogApp
Hope this helps!