customer_data_app: Form submission canceled because the form is not connected

[hkws]

When the rx.dialog.close component, which has a button with type=submit as its child, is clicked, the dialog successfully closes, but the form submission is canceled. The following message appears in the browser console:

Form submission canceled because the form is not connected

Current Behavior

• The on_submit event handler is not executed when the submit button is used within rx.dialog.close.

Expected Behavior

• The on_submit event handler should be executed when the submit button is used within rx.dialog.close.

Reproducible Example

• https://customer-data-app.reflex.run/
  • Click Add Customer.
  • Fill out the form.
  • Click Submit Customer.
  • The above message appears in the browser console.
• Below is the minimum reproducible code:

import reflex as rx

def ng() -> rx.Component:
    return rx.dialog.root(
        rx.dialog.trigger(
            rx.button(
                rx.text("Add"),
            ),
        ),
        rx.dialog.content(
            rx.dialog.title(
                "Add New Item",
            ),
            rx.dialog.description(
                "Fill the form with the item's info",
            ),
            rx.form.root(
                rx.radio(
                    ["a", "b", "c"],
                    name="status",
                    direction="row",
                    as_child=True,
                    required=True,
                ),
                rx.form.submit(
                    rx.dialog.close(
                        rx.button("Submit"),
                    ),
                    as_child=True,
                ),
                on_submit=rx.console_log("on_submit fired!"),
            ),
        ),
    )


def ok() -> rx.Component:
    return rx.dialog.root(
        rx.dialog.trigger(
            rx.button(
                rx.text("Add"),
            ),
        ),
        rx.dialog.content(
            rx.dialog.title(
                "Add New Item",
            ),
            rx.dialog.description(
                "Fill the form with the item's info",
            ),
            rx.form.root(
                rx.radio(
                    ["a", "b", "c"],
                    name="status",
                    direction="row",
                    as_child=True,
                    required=True,
                ),
                rx.form.submit(
                    rx.button("Submit"),
                    as_child=True,
                ),
                on_submit=rx.console_log("on_submit fired!"),
            ),
        ),
    )


app = rx.App()

app.add_page(ok, route="/ok")
app.add_page(ng, route="/ng")

Suggested Solution

• The issue occurs because the dialog containing the form is unmounted before the submission is completed.
  • A similar issue: https://github.com/radix-ui/primitives/issues/1109
  • Also reported in #help-short: https://discord.com/channels/1029853095527727165/1061874061250150441/1260648141598888020
• This can be fixed by using the open state and the on_open_change event to toggle the dialog after form submission.

Environment

• Python Version: 3.12.4
• Reflex Version: 0.5.9
• OS: macOS Sonoma v14.5
• Browser (Optional): Chrome 127.0.6533.100