[BUG] Cannot write in dialogue modal when drawer is open

[theripnono]

Hi, does anyone know why I can't write in a dialogue modal when I open from a drawer component?

Here is my code:

def form_field(
    label: str, placeholder: str, type: str, name: str) -> rx.Component:
    return rx.form.field(
        rx.flex(
            rx.form.label(label),
            rx.form.control(
                rx.input(
                    placeholder=placeholder, type=type,
                ),
                as_child=True,
            ),
            direction="column",
            spacing="1",
        ),
        name=name,
        width="100%",
    )


def event_form() -> rx.Component:
    return rx.card(
        rx.flex(
            rx.hstack(
                rx.badge(
                    rx.icon(tag="calendar-plus", size=32),
                    color_scheme="mint",
                    radius="full",
                    padding="0.65rem",
                ),
                rx.vstack(
                    rx.heading(
                        "Create an event",
                        size="4",
                        weight="bold",
                    ),
                    rx.text(
                        "Fill the form to create a custom event",
                        size="2",
                    ),
                    spacing="1",
                    height="100%",
                    align_items="start",
                ),
                height="100%",
                spacing="4",
                align_items="center",
                width="100%",
            ),
            rx.form.root(
                rx.flex(
                    form_field(
                        "Event Name",
                        "Event Name",
                        "text",
                        "event_name",
                    ),
                    rx.flex(
                        form_field(
                            "Date", "", "date", "event_date"
                        ),
                        form_field(
                            "Time", "", "time", "event_time"
                        ),
                        spacing="3",
                        flex_direction="row",
                    ),
                    form_field(
                        "Description",
                        "Optional",
                        "text",
                        "description",
                    ),
                    direction="column",
                    spacing="2",
                ),
                rx.form.submit(
                    rx.button("Create"),
                    as_child=True,
                    width="100%",
                ),
                on_submit=lambda form_data: rx.window_alert(
                    form_data.to_string()
                ),
                reset_on_submit=False,
            ),
            width="100%",
            direction="column",
            spacing="4",
        ),
        size="3",
    )
#####


def open_dialog(button:rx.Component,date:str)->rx.Component:

    return rx.dialog.root(
            rx.dialog.trigger(button),
            rx.dialog.content(
                event_form()
                ),
            # rx.dialog.close(
            #     rx.button("Add", size="3",color_scheme="mint",padding_top="2px"),
            # ),
            spacing="3",
            justify="end",
        ),


def open_drawer(link:rx.Component, day:int)->rx.Component:

    render_text = rx.text(f'{day}-{State.current_month}-{State.current_year}')

    return rx.drawer.root(
                rx.drawer.trigger(link),
                rx.drawer.overlay(z_index="5"),
                rx.drawer.portal(
                    rx.drawer.content(                 
                            rx.vstack(
                                rx.box(
                                    rx.drawer.close(
                                        rx.button("Close",color_scheme="mint")
                                    )
                                ),
                                rx.box(open_dialog(rx.button(
                                                    "+ Add Schedule",
                                                    color_scheme="mint",
                                                    width="10em"),render_text)
                                    ),
                            ),
      
                        top="auto",
                        right="auto",
                        height="100%",
                        width="15em",
                        padding="2em",
                        background_color="#F7F9F2"
                    ),
                    
                ),
                direction="left",
            )

[linear]

ENG-4622 [BUG] Cannot write on dialog-modal when open in a drawer

[rajendrakrshaw]

import reflex as rx

# State (if needed for dynamic data)
class State(rx.State):
    current_month: int = 2  # Example month
    current_year: int = 2025  # Example year

# Helper function for form fields
def form_field(label: str, placeholder: str, type: str, name: str) -> rx.Component:
    return rx.form.field(
        rx.flex(
            rx.form.label(label),
            rx.form.control(
                rx.input(placeholder=placeholder, type=type),
                as_child=True,
            ),
            direction="column",
            spacing="1",
        ),
        name=name,
        width="100%",
    )

# Event Form Component
def event_form() -> rx.Component:
    return rx.card(
        rx.flex(
            rx.hstack(
                rx.badge(rx.icon(tag="calendar-plus", size=32), color_scheme="mint", radius="full", padding="0.65rem"),
                rx.vstack(
                    rx.heading("Create an event", size="4", weight="bold"),
                    rx.text("Fill the form to create a custom event", size="2"),
                    spacing="1",
                    height="100%",
                    align_items="start",
                ),
                height="100%",
                spacing="4",
                align_items="center",
                width="100%",
            ),
            rx.form.root(
                rx.flex(
                    form_field("Event Name", "Enter event name", "text", "event_name"),
                    rx.flex(
                        form_field("Date", "", "date", "event_date"),
                        form_field("Time", "", "time", "event_time"),
                        spacing="3",
                        flex_direction="row",
                    ),
                    form_field("Description", "Optional", "text", "description"),
                    direction="column",
                    spacing="2",
                ),
                rx.form.submit(rx.button("Create"), as_child=True, width="100%"),
                on_submit=lambda form_data: rx.window_alert(form_data.to_string()),
                reset_on_submit=False,
            ),
            width="100%",
            direction="column",
            spacing="4",
        ),
        size="3",
    )

# Function to handle input focus when dialog opens
def focus_on_open():
    return rx.script("""
        setTimeout(() => {
            document.querySelector('input')?.focus();
        }, 50);
    """)

# Dialog Component (Outside Drawer to avoid focus issues)
def open_dialog(button: rx.Component) -> rx.Component:
    return rx.portal(  # Ensures dialog renders correctly
        rx.dialog.root(
            rx.dialog.trigger(button),
            rx.dialog.content(
                event_form(),
                focus_on_open(),  # Auto-focus input field
            ),
            spacing="3",
            justify="end",
        ),
    )

# Drawer Component
def open_drawer(link: rx.Component, day: int) -> rx.Component:
    render_text = rx.text(f'{day}-{State.current_month}-{State.current_year}')
    
    return rx.drawer.root(
        rx.drawer.trigger(link),
        rx.drawer.overlay(z_index="5"),
        rx.drawer.portal(
            rx.drawer.content(
                rx.vstack(
                    rx.box(rx.drawer.close(rx.button("Close", color_scheme="mint"))),
                    rx.box(open_dialog(rx.button("+ Add Schedule", color_scheme="mint", width="10em"))),
                ),
                top="auto",
                right="auto",
                height="100%",
                width="15em",
                padding="2em",
                background_color="#F7F9F2"
            ),
        ),
        direction="left",
    )

# Main Component
def main_component():
    return rx.vstack(
        open_drawer(rx.button("Open Drawer", color_scheme="mint"), 15),  # Drawer
        open_dialog(rx.button("Open Dialog", color_scheme="blue")),  # Separate Dialog
    )

# Render App
app = rx.App()
app.add_page(main_component)

try this