customer_data_app: Form submission canceled because the form is not connected

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](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

reflex-dev / reflex-examples