From 168a72795219d24113f5d57a5c142fab0a7896ba Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Tue, 3 Dec 2024 04:08:28 -0800
Subject: [PATCH 01/50] Client side form handler

---
 src/js/src/index.tsx | 46 ++++++++++++++++++++++++++++++++++++++++++++
 src/js/src/types.ts  |  5 +++++
 2 files changed, 51 insertions(+)

diff --git a/src/js/src/index.tsx b/src/js/src/index.tsx
index 51a387f3..bde9fac8 100644
--- a/src/js/src/index.tsx
+++ b/src/js/src/index.tsx
@@ -2,6 +2,21 @@ import { ReactPyDjangoClient } from "./client";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Layout } from "@reactpy/client/src/components";
+import { DjangoFormProps } from "./types";
+
+/**
+ * Interface used to bind a ReactPy node to React.
+ */
+export function bind(node) {
+  return {
+    create: (type, props, children) =>
+      React.createElement(type, props, ...children),
+    render: (element) => {
+      ReactDOM.render(element, node);
+    },
+    unmount: () => ReactDOM.unmountComponentAtNode(node),
+  };
+}
 
 export function mountComponent(
   mountElement: HTMLElement,
@@ -79,3 +94,34 @@ export function mountComponent(
   // Start rendering the component
   ReactDOM.render(<Layout client={client} />, client.mountElement);
 }
+
+export function DjangoForm({
+  onSubmitCallback,
+  formId,
+}: DjangoFormProps): null {
+  React.useEffect(() => {
+    const form = document.getElementById(formId) as HTMLFormElement;
+
+    // Submission event function
+    const onSubmitEvent = (event) => {
+      event.preventDefault();
+      const formData = new FormData(form);
+      console.log(Object.fromEntries(formData));
+      onSubmitCallback(Object.fromEntries(formData));
+    };
+
+    // Bind the event listener
+    if (form) {
+      form.addEventListener("submit", onSubmitEvent);
+    }
+
+    // Unbind the event listener when the component dismounts
+    return () => {
+      if (form) {
+        form.removeEventListener("submit", onSubmitEvent);
+      }
+    };
+  }, []);
+
+  return null;
+}
diff --git a/src/js/src/types.ts b/src/js/src/types.ts
index eea8a866..79b06375 100644
--- a/src/js/src/types.ts
+++ b/src/js/src/types.ts
@@ -18,3 +18,8 @@ export type ReactPyDjangoClientProps = {
   prerenderElement: HTMLElement | null;
   offlineElement: HTMLElement | null;
 };
+
+export interface DjangoFormProps {
+  onSubmitCallback: (data: Object) => void;
+  formId: string;
+}

From 98ba450e9dcb78a4d354b8eed4152752b630841b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Tue, 3 Dec 2024 04:08:49 -0800
Subject: [PATCH 02/50] misc changelog bump

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8c848e4..e9228ff0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,7 +25,7 @@ Don't forget to remove deprecated code on each major release!
 
 ### Fixed
 
--   Fixed regression in v5.1.0 where components would sometimes not output debug messages when `settings.py:DEBUG` is enabled.
+-   Fixed bregression from the previous release where components would sometimes not output debug messages when `settings.py:DEBUG` is enabled.
 
 ### Changed
 

From 14c9ddebd021a80f8482d42a215063b83c527e91 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Wed, 4 Dec 2024 22:32:51 -0800
Subject: [PATCH 03/50] Functional client code

---
 src/js/src/index.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/js/src/index.tsx b/src/js/src/index.tsx
index bde9fac8..742ca79f 100644
--- a/src/js/src/index.tsx
+++ b/src/js/src/index.tsx
@@ -106,8 +106,25 @@ export function DjangoForm({
     const onSubmitEvent = (event) => {
       event.preventDefault();
       const formData = new FormData(form);
-      console.log(Object.fromEntries(formData));
-      onSubmitCallback(Object.fromEntries(formData));
+
+      // Convert the FormData object to a plain object by iterating through it
+      // If duplicate keys are present, convert the value into an array of values
+      const entries = formData.entries();
+      const formDataArray = Array.from(entries);
+      const formDataObject = formDataArray.reduce((acc, [key, value]) => {
+        if (acc[key]) {
+          if (Array.isArray(acc[key])) {
+            acc[key].push(value);
+          } else {
+            acc[key] = [acc[key], value];
+          }
+        } else {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+
+      onSubmitCallback(formDataObject);
     };
 
     // Bind the event listener

From ebd87bf954e9d92bd509cd307aa8b4a48879b66b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:10:45 -0800
Subject: [PATCH 04/50] First draft of form conversion

---
 src/reactpy_django/components.py | 136 +++++++-
 src/reactpy_django/transforms.py | 515 +++++++++++++++++++++++++++++++
 tests/test_app/components.py     |  10 +-
 tests/test_app/forms.py          |  38 +++
 4 files changed, 696 insertions(+), 3 deletions(-)
 create mode 100644 src/reactpy_django/transforms.py
 create mode 100644 tests/test_app/forms.py

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index d9ed0e6a..1c0f0592 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -2,19 +2,28 @@
 
 import json
 import os
-from typing import TYPE_CHECKING, Any, Callable, Union, cast
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, Callable, Type, Union, cast
 from urllib.parse import urlencode
 from uuid import uuid4
 
 from django.contrib.staticfiles.finders import find
 from django.core.cache import caches
+from django.forms import BooleanField, ChoiceField, Form, MultipleChoiceField
 from django.http import HttpRequest
 from django.urls import reverse
 from reactpy import component, hooks, html, utils
 from reactpy.types import ComponentType, Key, VdomDict
+from reactpy.web import export, module_from_file
 
 from reactpy_django.exceptions import ViewNotRegisteredError
 from reactpy_django.html import pyscript
+from reactpy_django.transforms import (
+    convert_option_props,
+    convert_textarea_children_to_prop,
+    ensure_controlled_inputs,
+    standardize_prop_names,
+)
 from reactpy_django.utils import (
     generate_obj_name,
     import_module,
@@ -28,6 +37,11 @@
 
     from django.views import View
 
+DjangoForm = export(
+    module_from_file("reactpy-django", file=Path(__file__).parent / "static" / "reactpy_django" / "client.js"),
+    ("DjangoForm"),
+)
+
 
 def view_to_component(
     view: Callable | View | str,
@@ -114,6 +128,25 @@ def django_js(static_path: str, key: Key | None = None):
     return _django_js(static_path=static_path, key=key)
 
 
+def django_form(
+    form: Type[Form],
+    *,
+    top_children: Sequence = (),
+    bottom_children: Sequence = (),
+    auto_submit: bool = False,
+    auto_submit_wait: int = 3,
+    key: Key | None = None,
+):
+    return _django_form(
+        form=form,
+        top_children=top_children,
+        bottom_children=bottom_children,
+        auto_submit=auto_submit,
+        auto_submit_wait=auto_submit_wait,
+        key=key,
+    )
+
+
 def pyscript_component(
     *file_paths: str,
     initial: str | VdomDict | ComponentType = "",
@@ -230,6 +263,102 @@ def _django_js(static_path: str):
     return html.script(_cached_static_contents(static_path))
 
 
+@component
+def _django_form(
+    form: Type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
+):
+    # TODO: Implement form restoration on page reload. Probably want to create a new setting called
+    # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
+    # Or maybe just recommend pre-rendering to have the browser handle it.
+    # Be clear that URL mode will limit you to one form per page.
+    # TODO: Test this with django-bootstrap forms and see how errors behave
+    # TODO: Test this with django-colorfield and django-ace
+    # TODO: Add pre-submit and post-submit hooks
+    # TODO: Add auto-save option for database-backed forms
+    uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
+    top_children_count = hooks.use_ref(len(top_children))
+    bottom_children_count = hooks.use_ref(len(bottom_children))
+    submitted_data, set_submitted_data = hooks.use_state({} or None)
+
+    uuid = uuid_ref.current
+
+    # Don't allow the count of top and bottom children to change
+    if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
+        raise ValueError("Dynamically changing the number of top or bottom children is not allowed.")
+
+    # Try to initialize the form with the provided data
+    try:
+        initialized_form = form(data=submitted_data)
+    except Exception as e:
+        if not isinstance(form, type(Form)):
+            raise ValueError(
+                "The provided form must be an uninitialized Django Form. "
+                "Do NOT initialize your form by calling it (ex. `MyForm()`)."
+            ) from e
+        raise e
+
+    # Run the form validation, if data was provided
+    if submitted_data:
+        initialized_form.full_clean()
+
+    def on_submit_callback(new_data: dict[str, Any]):
+        choice_field_map = {
+            field_name: {choice_value: choice_key for choice_key, choice_value in field.choices}
+            for field_name, field in initialized_form.fields.items()
+            if isinstance(field, ChoiceField)
+        }
+        multi_choice_fields = {
+            field_name
+            for field_name, field in initialized_form.fields.items()
+            if isinstance(field, MultipleChoiceField)
+        }
+        boolean_fields = {
+            field_name for field_name, field in initialized_form.fields.items() if isinstance(field, BooleanField)
+        }
+
+        # Choice fields submit their values as text, but Django choice keys are not always equal to their values.
+        # Due to this, we need to convert the text into keys that Django would be happy with
+        for choice_field_name, choice_map in choice_field_map.items():
+            if choice_field_name in new_data:
+                submitted_value = new_data[choice_field_name]
+                if isinstance(submitted_value, list):
+                    new_data[choice_field_name] = [
+                        choice_map.get(submitted_value_item, submitted_value_item)
+                        for submitted_value_item in submitted_value
+                    ]
+                elif choice_field_name in multi_choice_fields:
+                    new_data[choice_field_name] = [choice_map.get(submitted_value, submitted_value)]
+                else:
+                    new_data[choice_field_name] = choice_map.get(submitted_value, submitted_value)
+
+        # Convert boolean field text into actual booleans
+        for boolean_field_name in boolean_fields:
+            new_data[boolean_field_name] = boolean_field_name in new_data
+
+        # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
+        if submitted_data != new_data:
+            set_submitted_data(new_data)
+
+    async def on_change(event): ...
+
+    rendered_form = utils.html_to_vdom(
+        initialized_form.render(),
+        standardize_prop_names,
+        convert_textarea_children_to_prop,
+        convert_option_props,
+        ensure_controlled_inputs(on_change),
+        strict=False,
+    )
+
+    return html.form(
+        {"id": f"reactpy-{uuid}"},
+        DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
+        *top_children,
+        html.div({"key": uuid4().hex}, rendered_form),
+        *bottom_children,
+    )
+
+
 def _cached_static_contents(static_path: str) -> str:
     from reactpy_django.config import REACTPY_CACHE
 
@@ -238,6 +367,8 @@ def _cached_static_contents(static_path: str) -> str:
     if not abs_path:
         msg = f"Could not find static file {static_path} within Django's static files."
         raise FileNotFoundError(msg)
+    if isinstance(abs_path, (list, tuple)):
+        abs_path = abs_path[0]
 
     # Fetch the file from cache, if available
     last_modified_time = os.stat(abs_path).st_mtime
@@ -259,7 +390,8 @@ def _pyscript_component(
     root: str = "root",
 ):
     rendered, set_rendered = hooks.use_state(False)
-    uuid = uuid4().hex.replace("-", "")
+    uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
+    uuid = uuid_ref.current
     initial = vdom_or_component_to_string(initial, uuid=uuid)
     executor = render_pyscript_template(file_paths, uuid, root)
 
diff --git a/src/reactpy_django/transforms.py b/src/reactpy_django/transforms.py
new file mode 100644
index 00000000..f53498a8
--- /dev/null
+++ b/src/reactpy_django/transforms.py
@@ -0,0 +1,515 @@
+from __future__ import annotations
+
+from typing import Callable
+
+from reactpy.core.events import EventHandler, to_event_handler_function
+from reactpy.core.types import VdomDict
+
+# TODO: Move all this logic to `reactpy.utils._mutate_vdom()` and remove this file.
+
+UNSUPPORTED_PROPS = {"children", "ref", "aria-*", "data-*"}
+
+
+def standardize_prop_names(vdom_tree: VdomDict) -> VdomDict:
+    """Transformation that standardizes the prop names to be used in the component."""
+
+    if not isinstance(vdom_tree, dict):
+        return vdom_tree
+
+    # On each node, replace the 'attributes' key names with the standardized names.
+    if "attributes" in vdom_tree:
+        vdom_tree["attributes"] = {_normalize_prop_name(k): v for k, v in vdom_tree["attributes"].items()}
+
+    for child in vdom_tree.get("children", []):
+        standardize_prop_names(child)
+
+    return vdom_tree
+
+
+def convert_textarea_children_to_prop(vdom_tree: VdomDict) -> VdomDict:
+    """Transformation that converts the text content of a <textarea> to the 'value' prop."""
+    if not isinstance(vdom_tree, dict):
+        return vdom_tree
+
+    # On each node, if the 'tagName' is 'textarea', move the text content to the 'value' prop.
+    if vdom_tree["tagName"] == "textarea" and "children" in vdom_tree and vdom_tree["children"]:
+        text_content = vdom_tree.pop("children")
+        text_content = "".join([child for child in text_content if isinstance(child, str)])
+        default_value = vdom_tree["attributes"].pop("defaultValue", "")
+        vdom_tree["attributes"]["value"] = text_content or default_value
+
+    for child in vdom_tree.get("children", []):
+        convert_textarea_children_to_prop(child)
+
+    return vdom_tree
+
+
+def _find_selected_options(vdom_tree: VdomDict, mutation: Callable) -> list[VdomDict]:
+    """Recursively iterate through the tree of dictionaries to find an <option> with the 'selected' prop."""
+    selected_options = []
+
+    if not isinstance(vdom_tree, dict):
+        return selected_options
+
+    if vdom_tree["tagName"] == "option" and "attributes" in vdom_tree and "selected" in vdom_tree["attributes"]:
+        mutation(vdom_tree)
+        selected_options.append(vdom_tree)
+
+    for child in vdom_tree.get("children", []):
+        selected_options.extend(_find_selected_options(child, mutation))
+
+    return selected_options
+
+
+def convert_option_props(vdom_tree: VdomDict) -> VdomDict:
+    """Use the `value` prop on <select> instead of setting `selected` on <option>."""
+
+    if not isinstance(vdom_tree, dict):
+        return vdom_tree
+
+    # If the current tag is <select>, remove 'selected' prop from any <option> children and
+    # instead set the 'value' prop on the <select> tag.
+    if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
+        vdom_tree.setdefault("eventHandlers", {})
+        vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(do_nothing_event))
+        selected_options = _find_selected_options(vdom_tree, lambda option: option["attributes"].pop("selected"))
+        multiple_choice = vdom_tree["attributes"].get("multiple")
+        if selected_options and not multiple_choice:
+            vdom_tree["attributes"]["value"] = selected_options[0]["children"][0]
+        if selected_options and multiple_choice:
+            vdom_tree["attributes"]["value"] = [option["children"][0] for option in selected_options]
+
+    for child in vdom_tree.get("children", []):
+        convert_option_props(child)
+
+    return vdom_tree
+
+
+def _normalize_prop_name(prop_name: str) -> str:
+    """Standardizes the prop name to be used in the component."""
+    return REACT_PROP_SUBSTITUTIONS.get(prop_name, prop_name)
+
+
+def react_props_set(string: str) -> set[str]:
+    """Extracts the props from a string of React props."""
+    lines = string.strip().split("\n")
+    props = set()
+
+    for line in lines:
+        parts = line.split(":", maxsplit=1)
+        if len(parts) == 2 and parts[0] not in UNSUPPORTED_PROPS:
+            key, value = parts
+            key = key.strip()
+            value = value.strip()
+            props.add(key)
+
+    return props
+
+
+def _add_on_change_event(event_func, vdom_tree: VdomDict) -> VdomDict:
+    """Recursively adds an onChange event handler to all elements in the tree."""
+    if not isinstance(vdom_tree, dict):
+        return vdom_tree
+
+    vdom_tree.setdefault("eventHandlers", {})
+    if vdom_tree["tagName"] in ["input", "textarea"]:
+        if "onChange" in vdom_tree["eventHandlers"]:
+            pass
+        elif isinstance(event_func, EventHandler):
+            vdom_tree["eventHandlers"]["onChange"] = event_func
+        else:
+            vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(event_func))
+
+    if "children" in vdom_tree:
+        for child in vdom_tree["children"]:
+            _add_on_change_event(event_func, child)
+
+    return vdom_tree
+
+
+def ensure_controlled_inputs(event_func: Callable | None = None) -> Callable:
+    """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
+
+    def mutation(vdom_tree: VdomDict) -> VdomDict:
+        """Adds an onChange event handler to all input elements."""
+        if not isinstance(vdom_tree, dict):
+            return vdom_tree
+
+        vdom_tree.setdefault("eventHandlers", {})
+        if vdom_tree["tagName"] in ["input", "textarea"]:
+            if "onChange" in vdom_tree["eventHandlers"]:
+                pass
+            elif isinstance(event_func, EventHandler):
+                vdom_tree["eventHandlers"]["onChange"] = event_func
+            else:
+                vdom_tree["eventHandlers"]["onChange"] = EventHandler(
+                    to_event_handler_function(event_func or do_nothing_event)
+                )
+
+        if "children" in vdom_tree:
+            for child in vdom_tree["children"]:
+                mutation(child)
+
+        return vdom_tree
+
+    return mutation
+
+
+def do_nothing_event(*args, **kwargs):
+    pass
+
+
+# TODO: Create some kind of script that will generate this during build time, rather than hardcoding it.
+# https://react.dev/reference/react-dom/components/common#common-props
+
+SPECIAL_PROPS = r"""
+children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like <div><span /></div>.
+dangerouslySetInnerHTML: An object of the form { __html: '<p>some html</p>' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.
+ref: A ref object from useRef or createRef, or a ref callback function, or a string for legacy refs. Your ref will be filled with the DOM element for this node. Read more about manipulating the DOM with refs.
+suppressContentEditableWarning: A boolean. If true, suppresses the warning that React shows for elements that both have children and contentEditable={true} (which normally do not work together). Use this if you’re building a text input library that manages the contentEditable content manually.
+suppressHydrationWarning: A boolean. If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read more about suppressing hydration errors.
+style: An object with CSS styles, for example { fontWeight: 'bold', margin: 20 }. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example fontWeight instead of font-weight. You can pass strings or numbers as values. If you pass a number, like width: 100, React will automatically append px (“pixels”) to the value unless it’s a unitless property. We recommend using style only for dynamic styles where you don’t know the style values ahead of time. In other cases, applying plain CSS classes with className is more efficient. Read more about applying CSS with className and styles.
+"""  # noqa: E501
+
+STANDARD_PROPS = r"""
+accessKey: A string. Specifies a keyboard shortcut for the element. Not generally recommended.
+aria-*: ARIA attributes let you specify the accessibility tree information for this element. See ARIA attributes for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
+autoCapitalize: A string. Specifies whether and how the user input should be capitalized.
+className: A string. Specifies the element’s CSS class name. Read more about applying CSS styles.
+contentEditable: A boolean. If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with contentEditable={true} because React will not be able to update its content after user edits.
+data-*: Data attributes let you attach some string data to the element, for example data-fruit="banana". In React, they are not commonly used because you would usually read data from props or state instead.
+dir: Either 'ltr' or 'rtl'. Specifies the text direction of the element.
+draggable: A boolean. Specifies whether the element is draggable. Part of HTML Drag and Drop API.
+enterKeyHint: A string. Specifies which action to present for the enter key on virtual keyboards.
+htmlFor: A string. For <label> and <output>, lets you associate the label with some control. Same as for HTML attribute. React uses the standard DOM property names (htmlFor) instead of HTML attribute names.
+hidden: A boolean or a string. Specifies whether the element should be hidden.
+id: A string. Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with useId to avoid clashes between multiple instances of the same component.
+is: A string. If specified, the component will behave like a custom element.
+inputMode: A string. Specifies what kind of keyboard to display (for example, text, number or telephone).
+itemProp: A string. Specifies which property the element represents for structured data crawlers.
+lang: A string. Specifies the language of the element.
+onAnimationEnd: An AnimationEvent handler function. Fires when a CSS animation completes.
+onAnimationEndCapture: A version of onAnimationEnd that fires in the capture phase.
+onAnimationIteration: An AnimationEvent handler function. Fires when an iteration of a CSS animation ends, and another one begins.
+onAnimationIterationCapture: A version of onAnimationIteration that fires in the capture phase.
+onAnimationStart: An AnimationEvent handler function. Fires when a CSS animation starts.
+onAnimationStartCapture: onAnimationStart, but fires in the capture phase.
+onAuxClick: A MouseEvent handler function. Fires when a non-primary pointer button was clicked.
+onAuxClickCapture: A version of onAuxClick that fires in the capture phase.
+onBeforeInput: An InputEvent handler function. Fires before the value of an editable element is modified. React does not yet use the native beforeinput event, and instead attempts to polyfill it using other events.
+onBeforeInputCapture: A version of onBeforeInput that fires in the capture phase.
+onBlur: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser blur event, in React the onBlur event bubbles.
+onBlurCapture: A version of onBlur that fires in the capture phase.
+onClick: A MouseEvent handler function. Fires when the primary button was clicked on the pointing device.
+onClickCapture: A version of onClick that fires in the capture phase.
+onCompositionStart: A CompositionEvent handler function. Fires when an input method editor starts a new composition session.
+onCompositionStartCapture: A version of onCompositionStart that fires in the capture phase.
+onCompositionEnd: A CompositionEvent handler function. Fires when an input method editor completes or cancels a composition session.
+onCompositionEndCapture: A version of onCompositionEnd that fires in the capture phase.
+onCompositionUpdate: A CompositionEvent handler function. Fires when an input method editor receives a new character.
+onCompositionUpdateCapture: A version of onCompositionUpdate that fires in the capture phase.
+onContextMenu: A MouseEvent handler function. Fires when the user tries to open a context menu.
+onContextMenuCapture: A version of onContextMenu that fires in the capture phase.
+onCopy: A ClipboardEvent handler function. Fires when the user tries to copy something into the clipboard.
+onCopyCapture: A version of onCopy that fires in the capture phase.
+onCut: A ClipboardEvent handler function. Fires when the user tries to cut something into the clipboard.
+onCutCapture: A version of onCut that fires in the capture phase.
+onDoubleClick: A MouseEvent handler function. Fires when the user clicks twice. Corresponds to the browser dblclick event.
+onDoubleClickCapture: A version of onDoubleClick that fires in the capture phase.
+onDrag: A DragEvent handler function. Fires while the user is dragging something.
+onDragCapture: A version of onDrag that fires in the capture phase.
+onDragEnd: A DragEvent handler function. Fires when the user stops dragging something.
+onDragEndCapture: A version of onDragEnd that fires in the capture phase.
+onDragEnter: A DragEvent handler function. Fires when the dragged content enters a valid drop target.
+onDragEnterCapture: A version of onDragEnter that fires in the capture phase.
+onDragOver: A DragEvent handler function. Fires on a valid drop target while the dragged content is dragged over it. You must call e.preventDefault() here to allow dropping.
+onDragOverCapture: A version of onDragOver that fires in the capture phase.
+onDragStart: A DragEvent handler function. Fires when the user starts dragging an element.
+onDragStartCapture: A version of onDragStart that fires in the capture phase.
+onDrop: A DragEvent handler function. Fires when something is dropped on a valid drop target.
+onDropCapture: A version of onDrop that fires in the capture phase.
+onFocus: A FocusEvent handler function. Fires when an element lost focus. Unlike the built-in browser focus event, in React the onFocus event bubbles.
+onFocusCapture: A version of onFocus that fires in the capture phase.
+onGotPointerCapture: A PointerEvent handler function. Fires when an element programmatically captures a pointer.
+onGotPointerCaptureCapture: A version of onGotPointerCapture that fires in the capture phase.
+onKeyDown: A KeyboardEvent handler function. Fires when a key is pressed.
+onKeyDownCapture: A version of onKeyDown that fires in the capture phase.
+onKeyPress: A KeyboardEvent handler function. Deprecated. Use onKeyDown or onBeforeInput instead.
+onKeyPressCapture: A version of onKeyPress that fires in the capture phase.
+onKeyUp: A KeyboardEvent handler function. Fires when a key is released.
+onKeyUpCapture: A version of onKeyUp that fires in the capture phase.
+onLostPointerCapture: A PointerEvent handler function. Fires when an element stops capturing a pointer.
+onLostPointerCaptureCapture: A version of onLostPointerCapture that fires in the capture phase.
+onMouseDown: A MouseEvent handler function. Fires when the pointer is pressed down.
+onMouseDownCapture: A version of onMouseDown that fires in the capture phase.
+onMouseEnter: A MouseEvent handler function. Fires when the pointer moves inside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
+onMouseLeave: A MouseEvent handler function. Fires when the pointer moves outside an element. Does not have a capture phase. Instead, onMouseLeave and onMouseEnter propagate from the element being left to the one being entered.
+onMouseMove: A MouseEvent handler function. Fires when the pointer changes coordinates.
+onMouseMoveCapture: A version of onMouseMove that fires in the capture phase.
+onMouseOut: A MouseEvent handler function. Fires when the pointer moves outside an element, or if it moves into a child element.
+onMouseOutCapture: A version of onMouseOut that fires in the capture phase.
+onMouseUp: A MouseEvent handler function. Fires when the pointer is released.
+onMouseUpCapture: A version of onMouseUp that fires in the capture phase.
+onPointerCancel: A PointerEvent handler function. Fires when the browser cancels a pointer interaction.
+onPointerCancelCapture: A version of onPointerCancel that fires in the capture phase.
+onPointerDown: A PointerEvent handler function. Fires when a pointer becomes active.
+onPointerDownCapture: A version of onPointerDown that fires in the capture phase.
+onPointerEnter: A PointerEvent handler function. Fires when a pointer moves inside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
+onPointerLeave: A PointerEvent handler function. Fires when a pointer moves outside an element. Does not have a capture phase. Instead, onPointerLeave and onPointerEnter propagate from the element being left to the one being entered.
+onPointerMove: A PointerEvent handler function. Fires when a pointer changes coordinates.
+onPointerMoveCapture: A version of onPointerMove that fires in the capture phase.
+onPointerOut: A PointerEvent handler function. Fires when a pointer moves outside an element, if the pointer interaction is cancelled, and a few other reasons.
+onPointerOutCapture: A version of onPointerOut that fires in the capture phase.
+onPointerUp: A PointerEvent handler function. Fires when a pointer is no longer active.
+onPointerUpCapture: A version of onPointerUp that fires in the capture phase.
+onPaste: A ClipboardEvent handler function. Fires when the user tries to paste something from the clipboard.
+onPasteCapture: A version of onPaste that fires in the capture phase.
+onScroll: An Event handler function. Fires when an element has been scrolled. This event does not bubble.
+onScrollCapture: A version of onScroll that fires in the capture phase.
+onSelect: An Event handler function. Fires after the selection inside an editable element like an input changes. React extends the onSelect event to work for contentEditable={true} elements as well. In addition, React extends it to fire for empty selection and on edits (which may affect the selection).
+onSelectCapture: A version of onSelect that fires in the capture phase.
+onTouchCancel: A TouchEvent handler function. Fires when the browser cancels a touch interaction.
+onTouchCancelCapture: A version of onTouchCancel that fires in the capture phase.
+onTouchEnd: A TouchEvent handler function. Fires when one or more touch points are removed.
+onTouchEndCapture: A version of onTouchEnd that fires in the capture phase.
+onTouchMove: A TouchEvent handler function. Fires one or more touch points are moved.
+onTouchMoveCapture: A version of onTouchMove that fires in the capture phase.
+onTouchStart: A TouchEvent handler function. Fires when one or more touch points are placed.
+onTouchStartCapture: A version of onTouchStart that fires in the capture phase.
+onTransitionEnd: A TransitionEvent handler function. Fires when a CSS transition completes.
+onTransitionEndCapture: A version of onTransitionEnd that fires in the capture phase.
+onWheel: A WheelEvent handler function. Fires when the user rotates a wheel button.
+onWheelCapture: A version of onWheel that fires in the capture phase.
+role: A string. Specifies the element role explicitly for assistive technologies. nt.
+slot: A string. Specifies the slot name when using shadow DOM. In React, an equivalent pattern is typically achieved by passing JSX as props, for example <Layout left={<Sidebar />} right={<Content />} />.
+spellCheck: A boolean or null. If explicitly set to true or false, enables or disables spellchecking.
+tabIndex: A number. Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
+title: A string. Specifies the tooltip text for the element.
+translate: Either 'yes' or 'no'. Passing 'no' excludes the element content from being translated.
+"""  # noqa: E501
+
+FORM_PROPS = r"""
+onReset: An Event handler function. Fires when a form gets reset.
+onResetCapture: A version of onReset that fires in the capture phase.
+onSubmit: An Event handler function. Fires when a form gets submitted.
+onSubmitCapture: A version of onSubmit that fires in the capture phase.
+"""
+
+DIALOG_PROPS = r"""
+onCancel: An Event handler function. Fires when the user tries to dismiss the dialog.
+onCancelCapture: A version of onCancel that fires in the capture phase. capture-phase-events)
+onClose: An Event handler function. Fires when a dialog has been closed.
+onCloseCapture: A version of onClose that fires in the capture phase.
+"""  # noqa: E501
+
+DETAILS_PROPS = r"""
+onToggle: An Event handler function. Fires when the user toggles the details.
+onToggleCapture: A version of onToggle that fires in the capture phase. capture-phase-events)
+"""  # noqa: E501
+
+IMG_IFRAME_OBJECT_EMBED_LINK_IMAGE_PROPS = r"""
+onLoad: An Event handler function. Fires when the resource has loaded.
+onLoadCapture: A version of onLoad that fires in the capture phase.
+onError: An Event handler function. Fires when the resource could not be loaded.
+onErrorCapture: A version of onError that fires in the capture phase.
+"""  # noqa: E501
+
+AUDIO_VIDEO_PROPS = r"""
+onAbort: An Event handler function. Fires when the resource has not fully loaded, but not due to an error.
+onAbortCapture: A version of onAbort that fires in the capture phase.
+onCanPlay: An Event handler function. Fires when there’s enough data to start playing, but not enough to play to the end without buffering.
+onCanPlayCapture: A version of onCanPlay that fires in the capture phase.
+onCanPlayThrough: An Event handler function. Fires when there’s enough data that it’s likely possible to start playing without buffering until the end.
+onCanPlayThroughCapture: A version of onCanPlayThrough that fires in the capture phase.
+onDurationChange: An Event handler function. Fires when the media duration has updated.
+onDurationChangeCapture: A version of onDurationChange that fires in the capture phase.
+onEmptied: An Event handler function. Fires when the media has become empty.
+onEmptiedCapture: A version of onEmptied that fires in the capture phase.
+onEncrypted: An Event handler function. Fires when the browser encounters encrypted media.
+onEncryptedCapture: A version of onEncrypted that fires in the capture phase.
+onEnded: An Event handler function. Fires when the playback stops because there’s nothing left to play.
+onEndedCapture: A version of onEnded that fires in the capture phase.
+onError: An Event handler function. Fires when the resource could not be loaded.
+onErrorCapture: A version of onError that fires in the capture phase.
+onLoadedData: An Event handler function. Fires when the current playback frame has loaded.
+onLoadedDataCapture: A version of onLoadedData that fires in the capture phase.
+onLoadedMetadata: An Event handler function. Fires when metadata has loaded.
+onLoadedMetadataCapture: A version of onLoadedMetadata that fires in the capture phase.
+onLoadStart: An Event handler function. Fires when the browser started loading the resource.
+onLoadStartCapture: A version of onLoadStart that fires in the capture phase.
+onPause: An Event handler function. Fires when the media was paused.
+onPauseCapture: A version of onPause that fires in the capture phase.
+onPlay: An Event handler function. Fires when the media is no longer paused.
+onPlayCapture: A version of onPlay that fires in the capture phase.
+onPlaying: An Event handler function. Fires when the media starts or restarts playing.
+onPlayingCapture: A version of onPlaying that fires in the capture phase.
+onProgress: An Event handler function. Fires periodically while the resource is loading.
+onProgressCapture: A version of onProgress that fires in the capture phase.
+onRateChange: An Event handler function. Fires when playback rate changes.
+onRateChangeCapture: A version of onRateChange that fires in the capture phase.
+onResize: An Event handler function. Fires when video changes size.
+onResizeCapture: A version of onResize that fires in the capture phase.
+onSeeked: An Event handler function. Fires when a seek operation completes.
+onSeekedCapture: A version of onSeeked that fires in the capture phase.
+onSeeking: An Event handler function. Fires when a seek operation starts.
+onSeekingCapture: A version of onSeeking that fires in the capture phase.
+onStalled: An Event handler function. Fires when the browser is waiting for data but it keeps not loading.
+onStalledCapture: A version of onStalled that fires in the capture phase.
+onSuspend: An Event handler function. Fires when loading the resource was suspended.
+onSuspendCapture: A version of onSuspend that fires in the capture phase.
+onTimeUpdate: An Event handler function. Fires when the current playback time updates.
+onTimeUpdateCapture: A version of onTimeUpdate that fires in the capture phase.
+onVolumeChange: An Event handler function. Fires when the volume has changed.
+onVolumeChangeCapture: A version of onVolumeChange that fires in the capture phase.
+onWaiting: An Event handler function. Fires when the playback stopped due to temporary lack of data.
+onWaitingCapture: A version of onWaiting that fires in the capture phase.
+"""  # noqa: E501
+
+INPUT_PROPS = r"""
+checked: A boolean. For a checkbox input or a radio button, controls whether it is selected.
+value: A string. For a text input, controls its text. (For a radio button, specifies its form data.)
+defaultChecked: A boolean. Specifies the initial value for type="checkbox" and type="radio" inputs.
+defaultValue: A string. Specifies the initial value for a text input.
+accept: A string. Specifies which filetypes are accepted by a type="file" input.
+alt: A string. Specifies the alternative image text for a type="image" input.
+capture: A string. Specifies the media (microphone, video, or camera) captured by a type="file" input.
+autoComplete: A string. Specifies one of the possible autocomplete behaviors.
+autoFocus: A boolean. If true, React will focus the element on mount.
+dirname: A string. Specifies the form field name for the element’s directionality.
+disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
+children: <input> does not accept children.
+form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
+formAction: A string. Overrides the parent <form action> for type="submit" and type="image".
+formEnctype: A string. Overrides the parent <form enctype> for type="submit" and type="image".
+formMethod: A string. Overrides the parent <form method> for type="submit" and type="image".
+formNoValidate: A string. Overrides the parent <form noValidate> for type="submit" and type="image".
+formTarget: A string. Overrides the parent <form target> for type="submit" and type="image".
+height: A string. Specifies the image height for type="image".
+list: A string. Specifies the id of the <datalist> with the autocomplete options.
+max: A number. Specifies the maximum value of numerical and datetime inputs.
+maxLength: A number. Specifies the maximum length of text and other inputs.
+min: A number. Specifies the minimum value of numerical and datetime inputs.
+minLength: A number. Specifies the minimum length of text and other inputs.
+multiple: A boolean. Specifies whether multiple values are allowed for <type="file" and type="email".
+name: A string. Specifies the name for this input that’s submitted with the form.
+onChange: An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
+onChangeCapture: A version of onChange that fires in the capture phase.
+onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
+onInputCapture: A version of onInput that fires in the capture phase.
+onInvalid: An Event handler function. Fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles.
+onInvalidCapture: A version of onInvalid that fires in the capture phase.
+onSelect: An Event handler function. Fires after the selection inside the <input> changes. React extends the onSelect event to also fire for empty selection and on edits (which may affect the selection).
+onSelectCapture: A version of onSelect that fires in the capture phase.
+pattern: A string. Specifies the pattern that the value must match.
+placeholder: A string. Displayed in a dimmed color when the input value is empty.
+readOnly: A boolean. If true, the input is not editable by the user.
+required: A boolean. If true, the value must be provided for the form to submit.
+size: A number. Similar to setting width, but the unit depends on the control.
+src: A string. Specifies the image source for a type="image" input.
+step: A positive number or an 'any' string. Specifies the distance between valid values.
+type: A string. One of the input types.
+width: A string. Specifies the image width for a type="image" input.
+"""  # noqa: E501
+
+SELECT_PROPS = r"""
+value: A string (or an array of strings for multiple={true}). Controls which option is selected. Every value string match the value of some <option> nested inside the <select>.
+defaultValue: A string (or an array of strings for multiple={true}). Specifies the initially selected option.
+autoComplete: A string. Specifies one of the possible autocomplete behaviors.
+autoFocus: A boolean. If true, React will focus the element on mount.
+children: <select> accepts <option>, <optgroup>, and <datalist> components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render <option> tags, each <option> you render must have a value.
+disabled: A boolean. If true, the select box will not be interactive and will appear dimmed.
+form: A string. Specifies the id of the <form> this select box belongs to. If omitted, it’s the closest parent form.
+multiple: A boolean. If true, the browser allows multiple selection.
+name: A string. Specifies the name for this select box that’s submitted with the form.
+onChange: An Event handler function. Required for controlled select boxes. Fires immediately when the user picks a different option. Behaves like the browser input event.
+onChangeCapture: A version of onChange that fires in the capture phase.
+onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
+onInputCapture: A version of onInput that fires in the capture phase.
+onInvalid: An Event handler function. Fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles.
+onInvalidCapture: A version of onInvalid that fires in the capture phase.
+required: A boolean. If true, the value must be provided for the form to submit.
+size: A number. For multiple={true} selects, specifies the preferred number of initially visible items.
+"""  # noqa: E501
+
+TEXTAREA_PROPS = r"""
+autoComplete: Either 'on' or 'off'. Specifies the autocomplete behavior.
+autoFocus: A boolean. If true, React will focus the element on mount.
+children: <textarea> does not accept children. To set the initial value, use defaultValue.
+cols: A number. Specifies the default width in average character widths. Defaults to 20.
+disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
+form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
+maxLength: A number. Specifies the maximum length of text.
+minLength: A number. Specifies the minimum length of text.
+name: A string. Specifies the name for this input that’s submitted with the form.
+onChange: An Event handler function. Required for controlled text areas. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
+onChangeCapture: A version of onChange that fires in the capture phase.
+onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
+onInputCapture: A version of onInput that fires in the capture phase.
+onInvalid: An Event handler function. Fires if an input fails validation on form submit. Unlike the built-in invalid event, the React onInvalid event bubbles.
+onInvalidCapture: A version of onInvalid that fires in the capture phase.
+onSelect: An Event handler function. Fires after the selection inside the <textarea> changes. React extends the onSelect event to also fire for empty selection and on edits (which may affect the selection).
+onSelectCapture: A version of onSelect that fires in the capture phase.
+placeholder: A string. Displayed in a dimmed color when the text area value is empty.
+readOnly: A boolean. If true, the text area is not editable by the user.
+required: A boolean. If true, the value must be provided for the form to submit.
+rows: A number. Specifies the default height in average character heights. Defaults to 2.
+wrap: Either 'hard', 'soft', or 'off'. Specifies how the text should be wrapped when submitting a form.
+"""  # noqa: E501
+
+LINK_PROPS = r"""
+disabled: a boolean. Disables the stylesheet.
+onError: a function. Called when the stylesheet fails to load.
+onLoad: a function. Called when the stylesheet finishes being loaded.
+as: a string. The type of resource. Its possible values are audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
+imageSrcSet: a string. Applicable only when as="image". Specifies the source set of the image.
+imageSizes: a string. Applicable only when as="image". Specifies the sizes of the image.
+sizes: a string. The sizes of the icon.
+href: a string. The URL of the linked resource.
+crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials. It is required when as is set to "fetch".
+referrerPolicy: a string. The Referrer header to send when fetching. Its possible values are no-referrer-when-downgrade (the default), no-referrer, origin, origin-when-cross-origin, and unsafe-url.
+fetchPriority: a string. Suggests a relative priority for fetching the resource. The possible values are auto (the default), high, and low.
+hrefLang: a string. The language of the linked resource.
+integrity: a string. A cryptographic hash of the resource, to verify its authenticity.
+type: a string. The MIME type of the linked resource.
+"""  # noqa: E501
+
+META_PROPS = r"""
+name: a string. Specifies the kind of metadata to be attached to the document.
+charset: a string. Specifies the character set used by the document. The only valid value is "utf-8".
+httpEquiv: a string. Specifies a directive for processing the document.
+itemProp: a string. Specifies metadata about a particular item within the document rather than the document as a whole.
+content: a string. Specifies the metadata to be attached when used with the name or itemProp props or the behavior of the directive when used with the httpEquiv prop.
+"""  # noqa: E501
+
+SCRIPT_PROPS = r"""
+async: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.
+crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials.
+fetchPriority: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be "high", "low", or "auto" (the default).
+integrity: a string. A cryptographic hash of the script, to verify its authenticity.
+noModule: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not.
+nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.
+referrer: a string. Says what Referer header to send when fetching the script and any resources that the script fetches in turn.
+type: a string. Says whether the script is a classic script, ES module, or import map.
+"""  # noqa: E501
+
+KNOWN_REACT_PROPS = react_props_set(
+    SPECIAL_PROPS
+    + STANDARD_PROPS
+    + FORM_PROPS
+    + DETAILS_PROPS
+    + IMG_IFRAME_OBJECT_EMBED_LINK_IMAGE_PROPS
+    + AUDIO_VIDEO_PROPS
+    + INPUT_PROPS
+    + SELECT_PROPS
+    + TEXTAREA_PROPS
+    + LINK_PROPS
+    + META_PROPS
+    + SCRIPT_PROPS
+)
+
+# lowercase the prop name as the key, and have values be the original react prop name
+REACT_PROP_SUBSTITUTIONS = {prop.lower(): prop for prop in KNOWN_REACT_PROPS} | {
+    "for": "htmlFor",
+    "class": "className",
+    "checked": "defaultChecked",
+}
diff --git a/tests/test_app/components.py b/tests/test_app/components.py
index ad13ac30..fe9fb61c 100644
--- a/tests/test_app/components.py
+++ b/tests/test_app/components.py
@@ -9,7 +9,7 @@
 from reactpy import component, hooks, html, web
 
 import reactpy_django
-from reactpy_django.components import view_to_component, view_to_iframe
+from reactpy_django.components import django_form, view_to_component, view_to_iframe
 from test_app.models import (
     AsyncForiegnChild,
     AsyncRelationalChild,
@@ -22,6 +22,7 @@
 )
 
 from . import views
+from .forms import BasicForm
 from .types import TestObject
 
 
@@ -692,3 +693,10 @@ async def on_submit(event):
         html.div(f"Mutation State: (loading={user_data_mutation.loading}, error={user_data_mutation.error})"),
         html.div(html.input({"on_key_press": on_submit, "placeholder": "Type here to add data"})),
     )
+
+
+@component
+def basic_form():
+    return django_form(
+        BasicForm, bottom_children=(html.input({"type": "submit"}),), auto_submit=True, auto_submit_wait=0
+    )
diff --git a/tests/test_app/forms.py b/tests/test_app/forms.py
new file mode 100644
index 00000000..e6bd9900
--- /dev/null
+++ b/tests/test_app/forms.py
@@ -0,0 +1,38 @@
+from django import forms
+
+
+class BasicForm(forms.Form):
+    # Render one of every Django field type
+    # https://docs.djangoproject.com/en/stable/ref/forms/fields/#field-types
+    boolean_field = forms.BooleanField(label="boolean", initial=True)
+    char_field = forms.CharField(label="chars", max_length=7, initial="Example")
+    choice_field = forms.ChoiceField(label="choice", initial="2", choices=[("1", "One"), ("2", "Two")])
+    date_field = forms.DateField(label="date", initial="2000-01-01")
+    date_time_field = forms.DateTimeField(label="date time", initial="2000-01-01 00:00:00")
+    decimal_field = forms.DecimalField(label="decimal", initial=0.0)
+    duration_field = forms.DurationField(label="duration", initial=0)
+    email_field = forms.EmailField(label="email", initial="example@gmail.com")
+    file_path_field = forms.FilePathField("./", label="file path")
+    float_field = forms.FloatField(label="float", initial=0.0)
+    generic_ip_address_field = forms.GenericIPAddressField(label="Generic IP", initial="127.0.0.1")
+    integer_field = forms.IntegerField(label="integer", initial=0)
+    json_field = forms.JSONField(label="JSON", initial={"key": "value"})
+    multiple_choice_field = forms.MultipleChoiceField(
+        label="multiple choice", initial=["1", "2"], choices=[("1", "One"), ("2", "Two"), ("3", "Three")]
+    )
+    null_boolean_field = forms.NullBooleanField(label="null boolean", initial=True)
+    regex_field = forms.RegexField(label="regex", regex=r"^\d{1,2}$", initial="12")
+    slug_field = forms.SlugField(label="slug", initial="your-slug")
+    time_field = forms.TimeField(label="time", initial="00:00:00")
+    typed_choice_field = forms.TypedChoiceField(
+        label="typed choice field", initial="1", choices=[("1", "One"), ("2", "Two")]
+    )
+    typed_multiple_choice_field = forms.TypedMultipleChoiceField(
+        label="typed multiple choice", initial="1", choices=[("1", "One"), ("2", "Two")]
+    )
+    url_field = forms.URLField(label="URL", initial="https://example.com")
+    uuid_field = forms.UUIDField(label="UUID", initial="550e8400-e29b-41d4-a716-446655440000")
+    combo_field = forms.ComboField(
+        label="combo", fields=[forms.CharField(), forms.EmailField()], initial="example@gmail.com"
+    )
+    password_field = forms.CharField(label="password", widget=forms.PasswordInput)

From 164e3a3b5e305fbf357741014b82ae787036f6b7 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:18:37 -0800
Subject: [PATCH 05/50] format

---
 CHANGELOG.md                     |  2 +-
 src/reactpy_django/components.py | 16 ++++----
 src/reactpy_django/transforms.py | 68 ++++++++++++++++----------------
 3 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9228ff0..9c2a1635 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,7 +25,7 @@ Don't forget to remove deprecated code on each major release!
 
 ### Fixed
 
--   Fixed bregression from the previous release where components would sometimes not output debug messages when `settings.py:DEBUG` is enabled.
+-   Fixed regression from the previous release where components would sometimes not output debug messages when `settings.py:DEBUG` is enabled.
 
 ### Changed
 
diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 1c0f0592..b2a11a7c 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -3,7 +3,7 @@
 import json
 import os
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Type, Union, cast
+from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from urllib.parse import urlencode
 from uuid import uuid4
 
@@ -129,7 +129,7 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: Type[Form],
+    form: type[Form],
     *,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -265,7 +265,7 @@ def _django_js(static_path: str):
 
 @component
 def _django_form(
-    form: Type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
+    form: type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
 ):
     # TODO: Implement form restoration on page reload. Probably want to create a new setting called
     # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
@@ -284,18 +284,20 @@ def _django_form(
 
     # Don't allow the count of top and bottom children to change
     if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
-        raise ValueError("Dynamically changing the number of top or bottom children is not allowed.")
+        msg = "Dynamically changing the number of top or bottom children is not allowed."
+        raise ValueError(msg)
 
     # Try to initialize the form with the provided data
     try:
         initialized_form = form(data=submitted_data)
     except Exception as e:
         if not isinstance(form, type(Form)):
-            raise ValueError(
+            msg = (
                 "The provided form must be an uninitialized Django Form. "
                 "Do NOT initialize your form by calling it (ex. `MyForm()`)."
-            ) from e
-        raise e
+            )
+            raise TypeError(msg) from e
+        raise
 
     # Run the form validation, if data was provided
     if submitted_data:
diff --git a/src/reactpy_django/transforms.py b/src/reactpy_django/transforms.py
index f53498a8..4879cbae 100644
--- a/src/reactpy_django/transforms.py
+++ b/src/reactpy_django/transforms.py
@@ -1,9 +1,11 @@
 from __future__ import annotations
 
-from typing import Callable
+from typing import TYPE_CHECKING, Callable
 
 from reactpy.core.events import EventHandler, to_event_handler_function
-from reactpy.core.types import VdomDict
+
+if TYPE_CHECKING:
+    from reactpy.core.types import VdomDict
 
 # TODO: Move all this logic to `reactpy.utils._mutate_vdom()` and remove this file.
 
@@ -112,7 +114,7 @@ def _add_on_change_event(event_func, vdom_tree: VdomDict) -> VdomDict:
         return vdom_tree
 
     vdom_tree.setdefault("eventHandlers", {})
-    if vdom_tree["tagName"] in ["input", "textarea"]:
+    if vdom_tree["tagName"] in {"input", "textarea"}:
         if "onChange" in vdom_tree["eventHandlers"]:
             pass
         elif isinstance(event_func, EventHandler):
@@ -136,7 +138,7 @@ def mutation(vdom_tree: VdomDict) -> VdomDict:
             return vdom_tree
 
         vdom_tree.setdefault("eventHandlers", {})
-        if vdom_tree["tagName"] in ["input", "textarea"]:
+        if vdom_tree["tagName"] in {"input", "textarea"}:
             if "onChange" in vdom_tree["eventHandlers"]:
                 pass
             elif isinstance(event_func, EventHandler):
@@ -164,18 +166,18 @@ def do_nothing_event(*args, **kwargs):
 
 SPECIAL_PROPS = r"""
 children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like <div><span /></div>.
-dangerouslySetInnerHTML: An object of the form { __html: '<p>some html</p>' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.
+dangerouslySetInnerHTML: An object of the form { __html: '<p>some html</p>' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.
 ref: A ref object from useRef or createRef, or a ref callback function, or a string for legacy refs. Your ref will be filled with the DOM element for this node. Read more about manipulating the DOM with refs.
-suppressContentEditableWarning: A boolean. If true, suppresses the warning that React shows for elements that both have children and contentEditable={true} (which normally do not work together). Use this if you’re building a text input library that manages the contentEditable content manually.
-suppressHydrationWarning: A boolean. If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read more about suppressing hydration errors.
-style: An object with CSS styles, for example { fontWeight: 'bold', margin: 20 }. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example fontWeight instead of font-weight. You can pass strings or numbers as values. If you pass a number, like width: 100, React will automatically append px (“pixels”) to the value unless it’s a unitless property. We recommend using style only for dynamic styles where you don’t know the style values ahead of time. In other cases, applying plain CSS classes with className is more efficient. Read more about applying CSS with className and styles.
-"""  # noqa: E501
+suppressContentEditableWarning: A boolean. If true, suppresses the warning that React shows for elements that both have children and contentEditable={true} (which normally do not work together). Use this if you're building a text input library that manages the contentEditable content manually.
+suppressHydrationWarning: A boolean. If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. Read more about suppressing hydration errors.
+style: An object with CSS styles, for example { fontWeight: 'bold', margin: 20 }. Similarly to the DOM style property, the CSS property names need to be written as camelCase, for example fontWeight instead of font-weight. You can pass strings or numbers as values. If you pass a number, like width: 100, React will automatically append px (“pixels”) to the value unless it's a unitless property. We recommend using style only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with className is more efficient. Read more about applying CSS with className and styles.
+"""
 
 STANDARD_PROPS = r"""
 accessKey: A string. Specifies a keyboard shortcut for the element. Not generally recommended.
 aria-*: ARIA attributes let you specify the accessibility tree information for this element. See ARIA attributes for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML.
 autoCapitalize: A string. Specifies whether and how the user input should be capitalized.
-className: A string. Specifies the element’s CSS class name. Read more about applying CSS styles.
+className: A string. Specifies the element's CSS class name. Read more about applying CSS styles.
 contentEditable: A boolean. If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with contentEditable={true} because React will not be able to update its content after user edits.
 data-*: Data attributes let you attach some string data to the element, for example data-fruit="banana". In React, they are not commonly used because you would usually read data from props or state instead.
 dir: Either 'ltr' or 'rtl'. Specifies the text direction of the element.
@@ -286,7 +288,7 @@ def do_nothing_event(*args, **kwargs):
 tabIndex: A number. Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
 title: A string. Specifies the tooltip text for the element.
 translate: Either 'yes' or 'no'. Passing 'no' excludes the element content from being translated.
-"""  # noqa: E501
+"""
 
 FORM_PROPS = r"""
 onReset: An Event handler function. Fires when a form gets reset.
@@ -300,26 +302,26 @@ def do_nothing_event(*args, **kwargs):
 onCancelCapture: A version of onCancel that fires in the capture phase. capture-phase-events)
 onClose: An Event handler function. Fires when a dialog has been closed.
 onCloseCapture: A version of onClose that fires in the capture phase.
-"""  # noqa: E501
+"""
 
 DETAILS_PROPS = r"""
 onToggle: An Event handler function. Fires when the user toggles the details.
 onToggleCapture: A version of onToggle that fires in the capture phase. capture-phase-events)
-"""  # noqa: E501
+"""
 
 IMG_IFRAME_OBJECT_EMBED_LINK_IMAGE_PROPS = r"""
 onLoad: An Event handler function. Fires when the resource has loaded.
 onLoadCapture: A version of onLoad that fires in the capture phase.
 onError: An Event handler function. Fires when the resource could not be loaded.
 onErrorCapture: A version of onError that fires in the capture phase.
-"""  # noqa: E501
+"""
 
 AUDIO_VIDEO_PROPS = r"""
 onAbort: An Event handler function. Fires when the resource has not fully loaded, but not due to an error.
 onAbortCapture: A version of onAbort that fires in the capture phase.
-onCanPlay: An Event handler function. Fires when there’s enough data to start playing, but not enough to play to the end without buffering.
+onCanPlay: An Event handler function. Fires when there's enough data to start playing, but not enough to play to the end without buffering.
 onCanPlayCapture: A version of onCanPlay that fires in the capture phase.
-onCanPlayThrough: An Event handler function. Fires when there’s enough data that it’s likely possible to start playing without buffering until the end.
+onCanPlayThrough: An Event handler function. Fires when there's enough data that it's likely possible to start playing without buffering until the end.
 onCanPlayThroughCapture: A version of onCanPlayThrough that fires in the capture phase.
 onDurationChange: An Event handler function. Fires when the media duration has updated.
 onDurationChangeCapture: A version of onDurationChange that fires in the capture phase.
@@ -327,7 +329,7 @@ def do_nothing_event(*args, **kwargs):
 onEmptiedCapture: A version of onEmptied that fires in the capture phase.
 onEncrypted: An Event handler function. Fires when the browser encounters encrypted media.
 onEncryptedCapture: A version of onEncrypted that fires in the capture phase.
-onEnded: An Event handler function. Fires when the playback stops because there’s nothing left to play.
+onEnded: An Event handler function. Fires when the playback stops because there's nothing left to play.
 onEndedCapture: A version of onEnded that fires in the capture phase.
 onError: An Event handler function. Fires when the resource could not be loaded.
 onErrorCapture: A version of onError that fires in the capture phase.
@@ -363,7 +365,7 @@ def do_nothing_event(*args, **kwargs):
 onVolumeChangeCapture: A version of onVolumeChange that fires in the capture phase.
 onWaiting: An Event handler function. Fires when the playback stopped due to temporary lack of data.
 onWaitingCapture: A version of onWaiting that fires in the capture phase.
-"""  # noqa: E501
+"""
 
 INPUT_PROPS = r"""
 checked: A boolean. For a checkbox input or a radio button, controls whether it is selected.
@@ -375,10 +377,10 @@ def do_nothing_event(*args, **kwargs):
 capture: A string. Specifies the media (microphone, video, or camera) captured by a type="file" input.
 autoComplete: A string. Specifies one of the possible autocomplete behaviors.
 autoFocus: A boolean. If true, React will focus the element on mount.
-dirname: A string. Specifies the form field name for the element’s directionality.
+dirname: A string. Specifies the form field name for the element's directionality.
 disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
 children: <input> does not accept children.
-form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
+form: A string. Specifies the id of the <form> this input belongs to. If omitted, it's the closest parent form.
 formAction: A string. Overrides the parent <form action> for type="submit" and type="image".
 formEnctype: A string. Overrides the parent <form enctype> for type="submit" and type="image".
 formMethod: A string. Overrides the parent <form method> for type="submit" and type="image".
@@ -391,8 +393,8 @@ def do_nothing_event(*args, **kwargs):
 min: A number. Specifies the minimum value of numerical and datetime inputs.
 minLength: A number. Specifies the minimum length of text and other inputs.
 multiple: A boolean. Specifies whether multiple values are allowed for <type="file" and type="email".
-name: A string. Specifies the name for this input that’s submitted with the form.
-onChange: An Event handler function. Required for controlled inputs. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
+name: A string. Specifies the name for this input that's submitted with the form.
+onChange: An Event handler function. Required for controlled inputs. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
 onChangeCapture: A version of onChange that fires in the capture phase.
 onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
 onInputCapture: A version of onInput that fires in the capture phase.
@@ -409,7 +411,7 @@ def do_nothing_event(*args, **kwargs):
 step: A positive number or an 'any' string. Specifies the distance between valid values.
 type: A string. One of the input types.
 width: A string. Specifies the image width for a type="image" input.
-"""  # noqa: E501
+"""
 
 SELECT_PROPS = r"""
 value: A string (or an array of strings for multiple={true}). Controls which option is selected. Every value string match the value of some <option> nested inside the <select>.
@@ -418,9 +420,9 @@ def do_nothing_event(*args, **kwargs):
 autoFocus: A boolean. If true, React will focus the element on mount.
 children: <select> accepts <option>, <optgroup>, and <datalist> components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render <option> tags, each <option> you render must have a value.
 disabled: A boolean. If true, the select box will not be interactive and will appear dimmed.
-form: A string. Specifies the id of the <form> this select box belongs to. If omitted, it’s the closest parent form.
+form: A string. Specifies the id of the <form> this select box belongs to. If omitted, it's the closest parent form.
 multiple: A boolean. If true, the browser allows multiple selection.
-name: A string. Specifies the name for this select box that’s submitted with the form.
+name: A string. Specifies the name for this select box that's submitted with the form.
 onChange: An Event handler function. Required for controlled select boxes. Fires immediately when the user picks a different option. Behaves like the browser input event.
 onChangeCapture: A version of onChange that fires in the capture phase.
 onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
@@ -429,7 +431,7 @@ def do_nothing_event(*args, **kwargs):
 onInvalidCapture: A version of onInvalid that fires in the capture phase.
 required: A boolean. If true, the value must be provided for the form to submit.
 size: A number. For multiple={true} selects, specifies the preferred number of initially visible items.
-"""  # noqa: E501
+"""
 
 TEXTAREA_PROPS = r"""
 autoComplete: Either 'on' or 'off'. Specifies the autocomplete behavior.
@@ -437,11 +439,11 @@ def do_nothing_event(*args, **kwargs):
 children: <textarea> does not accept children. To set the initial value, use defaultValue.
 cols: A number. Specifies the default width in average character widths. Defaults to 20.
 disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
-form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
+form: A string. Specifies the id of the <form> this input belongs to. If omitted, it's the closest parent form.
 maxLength: A number. Specifies the maximum length of text.
 minLength: A number. Specifies the minimum length of text.
-name: A string. Specifies the name for this input that’s submitted with the form.
-onChange: An Event handler function. Required for controlled text areas. Fires immediately when the input’s value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
+name: A string. Specifies the name for this input that's submitted with the form.
+onChange: An Event handler function. Required for controlled text areas. Fires immediately when the input's value is changed by the user (for example, it fires on every keystroke). Behaves like the browser input event.
 onChangeCapture: A version of onChange that fires in the capture phase.
 onInput: An Event handler function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use onChange instead which works similarly.
 onInputCapture: A version of onInput that fires in the capture phase.
@@ -454,7 +456,7 @@ def do_nothing_event(*args, **kwargs):
 required: A boolean. If true, the value must be provided for the form to submit.
 rows: A number. Specifies the default height in average character heights. Defaults to 2.
 wrap: Either 'hard', 'soft', or 'off'. Specifies how the text should be wrapped when submitting a form.
-"""  # noqa: E501
+"""
 
 LINK_PROPS = r"""
 disabled: a boolean. Disables the stylesheet.
@@ -471,7 +473,7 @@ def do_nothing_event(*args, **kwargs):
 hrefLang: a string. The language of the linked resource.
 integrity: a string. A cryptographic hash of the resource, to verify its authenticity.
 type: a string. The MIME type of the linked resource.
-"""  # noqa: E501
+"""
 
 META_PROPS = r"""
 name: a string. Specifies the kind of metadata to be attached to the document.
@@ -479,7 +481,7 @@ def do_nothing_event(*args, **kwargs):
 httpEquiv: a string. Specifies a directive for processing the document.
 itemProp: a string. Specifies metadata about a particular item within the document rather than the document as a whole.
 content: a string. Specifies the metadata to be attached when used with the name or itemProp props or the behavior of the directive when used with the httpEquiv prop.
-"""  # noqa: E501
+"""
 
 SCRIPT_PROPS = r"""
 async: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.
@@ -490,7 +492,7 @@ def do_nothing_event(*args, **kwargs):
 nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.
 referrer: a string. Says what Referer header to send when fetching the script and any resources that the script fetches in turn.
 type: a string. Says whether the script is a classic script, ES module, or import map.
-"""  # noqa: E501
+"""
 
 KNOWN_REACT_PROPS = react_props_set(
     SPECIAL_PROPS

From cf08add5754491fe6259bb000b5168cdcba9f493 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:51:15 -0800
Subject: [PATCH 06/50] Move code to forms module

---
 src/reactpy_django/components.py             | 114 +------------------
 src/reactpy_django/forms/__init__.py         |   0
 src/reactpy_django/forms/components.py       | 107 +++++++++++++++++
 src/reactpy_django/{ => forms}/transforms.py |  11 +-
 src/reactpy_django/forms/utils.py            |  39 +++++++
 5 files changed, 154 insertions(+), 117 deletions(-)
 create mode 100644 src/reactpy_django/forms/__init__.py
 create mode 100644 src/reactpy_django/forms/components.py
 rename src/reactpy_django/{ => forms}/transforms.py (99%)
 create mode 100644 src/reactpy_django/forms/utils.py

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index b2a11a7c..7c372c64 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -2,28 +2,20 @@
 
 import json
 import os
-from pathlib import Path
 from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from urllib.parse import urlencode
 from uuid import uuid4
 
 from django.contrib.staticfiles.finders import find
 from django.core.cache import caches
-from django.forms import BooleanField, ChoiceField, Form, MultipleChoiceField
 from django.http import HttpRequest
 from django.urls import reverse
 from reactpy import component, hooks, html, utils
 from reactpy.types import ComponentType, Key, VdomDict
-from reactpy.web import export, module_from_file
 
 from reactpy_django.exceptions import ViewNotRegisteredError
+from reactpy_django.forms.components import _django_form
 from reactpy_django.html import pyscript
-from reactpy_django.transforms import (
-    convert_option_props,
-    convert_textarea_children_to_prop,
-    ensure_controlled_inputs,
-    standardize_prop_names,
-)
 from reactpy_django.utils import (
     generate_obj_name,
     import_module,
@@ -35,13 +27,9 @@
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
+    from django.forms import Form
     from django.views import View
 
-DjangoForm = export(
-    module_from_file("reactpy-django", file=Path(__file__).parent / "static" / "reactpy_django" / "client.js"),
-    ("DjangoForm"),
-)
-
 
 def view_to_component(
     view: Callable | View | str,
@@ -263,104 +251,6 @@ def _django_js(static_path: str):
     return html.script(_cached_static_contents(static_path))
 
 
-@component
-def _django_form(
-    form: type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
-):
-    # TODO: Implement form restoration on page reload. Probably want to create a new setting called
-    # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
-    # Or maybe just recommend pre-rendering to have the browser handle it.
-    # Be clear that URL mode will limit you to one form per page.
-    # TODO: Test this with django-bootstrap forms and see how errors behave
-    # TODO: Test this with django-colorfield and django-ace
-    # TODO: Add pre-submit and post-submit hooks
-    # TODO: Add auto-save option for database-backed forms
-    uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
-    top_children_count = hooks.use_ref(len(top_children))
-    bottom_children_count = hooks.use_ref(len(bottom_children))
-    submitted_data, set_submitted_data = hooks.use_state({} or None)
-
-    uuid = uuid_ref.current
-
-    # Don't allow the count of top and bottom children to change
-    if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
-        msg = "Dynamically changing the number of top or bottom children is not allowed."
-        raise ValueError(msg)
-
-    # Try to initialize the form with the provided data
-    try:
-        initialized_form = form(data=submitted_data)
-    except Exception as e:
-        if not isinstance(form, type(Form)):
-            msg = (
-                "The provided form must be an uninitialized Django Form. "
-                "Do NOT initialize your form by calling it (ex. `MyForm()`)."
-            )
-            raise TypeError(msg) from e
-        raise
-
-    # Run the form validation, if data was provided
-    if submitted_data:
-        initialized_form.full_clean()
-
-    def on_submit_callback(new_data: dict[str, Any]):
-        choice_field_map = {
-            field_name: {choice_value: choice_key for choice_key, choice_value in field.choices}
-            for field_name, field in initialized_form.fields.items()
-            if isinstance(field, ChoiceField)
-        }
-        multi_choice_fields = {
-            field_name
-            for field_name, field in initialized_form.fields.items()
-            if isinstance(field, MultipleChoiceField)
-        }
-        boolean_fields = {
-            field_name for field_name, field in initialized_form.fields.items() if isinstance(field, BooleanField)
-        }
-
-        # Choice fields submit their values as text, but Django choice keys are not always equal to their values.
-        # Due to this, we need to convert the text into keys that Django would be happy with
-        for choice_field_name, choice_map in choice_field_map.items():
-            if choice_field_name in new_data:
-                submitted_value = new_data[choice_field_name]
-                if isinstance(submitted_value, list):
-                    new_data[choice_field_name] = [
-                        choice_map.get(submitted_value_item, submitted_value_item)
-                        for submitted_value_item in submitted_value
-                    ]
-                elif choice_field_name in multi_choice_fields:
-                    new_data[choice_field_name] = [choice_map.get(submitted_value, submitted_value)]
-                else:
-                    new_data[choice_field_name] = choice_map.get(submitted_value, submitted_value)
-
-        # Convert boolean field text into actual booleans
-        for boolean_field_name in boolean_fields:
-            new_data[boolean_field_name] = boolean_field_name in new_data
-
-        # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
-        if submitted_data != new_data:
-            set_submitted_data(new_data)
-
-    async def on_change(event): ...
-
-    rendered_form = utils.html_to_vdom(
-        initialized_form.render(),
-        standardize_prop_names,
-        convert_textarea_children_to_prop,
-        convert_option_props,
-        ensure_controlled_inputs(on_change),
-        strict=False,
-    )
-
-    return html.form(
-        {"id": f"reactpy-{uuid}"},
-        DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
-        *top_children,
-        html.div({"key": uuid4().hex}, rendered_form),
-        *bottom_children,
-    )
-
-
 def _cached_static_contents(static_path: str) -> str:
     from reactpy_django.config import REACTPY_CACHE
 
diff --git a/src/reactpy_django/forms/__init__.py b/src/reactpy_django/forms/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
new file mode 100644
index 00000000..12fc767c
--- /dev/null
+++ b/src/reactpy_django/forms/components.py
@@ -0,0 +1,107 @@
+from __future__ import annotations
+
+from pathlib import Path
+from typing import TYPE_CHECKING, Any
+from uuid import uuid4
+
+from django.forms import Form
+from django.utils import timezone
+from reactpy import component, hooks, html, utils
+from reactpy.core.events import event
+from reactpy.web import export, module_from_file
+
+from reactpy_django.forms.transforms import (
+    convert_html_props_to_reactjs,
+    convert_textarea_children_to_prop,
+    ensure_input_elements_are_controlled,
+    set_value_prop_on_select_element,
+)
+from reactpy_django.forms.utils import convert_boolean_fields, convert_choice_fields
+
+if TYPE_CHECKING:
+    from collections.abc import Sequence
+
+DjangoForm = export(
+    module_from_file("reactpy-django", file=Path(__file__).parent.parent / "static" / "reactpy_django" / "client.js"),
+    ("DjangoForm"),
+)
+
+
+# DjangoFormAutoSubmit = export(
+#     module_from_file("reactpy-django", file=Path(__file__).parent / "static" / "reactpy_django" / "client.js"),
+#     ("DjangoFormAutoSubmit"),
+# )
+
+
+@component
+def _django_form(
+    form: type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
+):
+    # TODO: Implement form restoration on page reload. Probably want to create a new setting called
+    # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
+    # Or maybe just recommend pre-rendering to have the browser handle it.
+    # Be clear that URL mode will limit you to one form per page.
+    # TODO: Test this with django-bootstrap, django-colorfield, django-ace, django-crispy-forms
+    # TODO: Add pre-submit and post-submit hooks
+    # TODO: Add auto-save option for database-backed forms
+    uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
+    top_children_count = hooks.use_ref(len(top_children))
+    bottom_children_count = hooks.use_ref(len(bottom_children))
+    submitted_data, set_submitted_data = hooks.use_state({} or None)
+    last_changed = hooks.use_ref(timezone.now())
+
+    uuid = uuid_ref.current
+
+    # Don't allow the count of top and bottom children to change
+    if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
+        msg = "Dynamically changing the number of top or bottom children is not allowed."
+        raise ValueError(msg)
+
+    # Try to initialize the form with the provided data
+    try:
+        initialized_form = form(data=submitted_data)
+    except Exception as e:
+        if not isinstance(form, type(Form)):
+            msg = (
+                "The provided form must be an uninitialized Django Form. "
+                "Do NOT initialize your form by calling it (ex. `MyForm()`)."
+            )
+            raise TypeError(msg) from e
+        raise
+
+    # Run the form validation, if data was provided
+    if submitted_data:
+        initialized_form.full_clean()
+
+    @event(prevent_default=True)
+    def on_submit(_event):
+        """The server was notified that a form was submitted. Note that actual submission behavior is handled by `on_submit_callback`."""
+        last_changed.set_current(timezone.now())
+
+    def on_submit_callback(new_data: dict[str, Any]):
+        convert_choice_fields(new_data, initialized_form)
+        convert_boolean_fields(new_data, initialized_form)
+
+        # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
+        if submitted_data != new_data:
+            set_submitted_data(new_data)
+
+    async def on_change(_event):
+        last_changed.set_current(timezone.now())
+
+    rendered_form = utils.html_to_vdom(
+        initialized_form.render(),
+        convert_html_props_to_reactjs,
+        convert_textarea_children_to_prop,
+        set_value_prop_on_select_element,
+        ensure_input_elements_are_controlled(on_change),
+        strict=False,
+    )
+
+    return html.form(
+        {"id": f"reactpy-{uuid}", "onSubmit": on_submit},
+        DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
+        *top_children,
+        rendered_form,
+        *bottom_children,
+    )
diff --git a/src/reactpy_django/transforms.py b/src/reactpy_django/forms/transforms.py
similarity index 99%
rename from src/reactpy_django/transforms.py
rename to src/reactpy_django/forms/transforms.py
index 4879cbae..69c29fb0 100644
--- a/src/reactpy_django/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -12,7 +12,7 @@
 UNSUPPORTED_PROPS = {"children", "ref", "aria-*", "data-*"}
 
 
-def standardize_prop_names(vdom_tree: VdomDict) -> VdomDict:
+def convert_html_props_to_reactjs(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that standardizes the prop names to be used in the component."""
 
     if not isinstance(vdom_tree, dict):
@@ -23,7 +23,7 @@ def standardize_prop_names(vdom_tree: VdomDict) -> VdomDict:
         vdom_tree["attributes"] = {_normalize_prop_name(k): v for k, v in vdom_tree["attributes"].items()}
 
     for child in vdom_tree.get("children", []):
-        standardize_prop_names(child)
+        convert_html_props_to_reactjs(child)
 
     return vdom_tree
 
@@ -63,7 +63,7 @@ def _find_selected_options(vdom_tree: VdomDict, mutation: Callable) -> list[Vdom
     return selected_options
 
 
-def convert_option_props(vdom_tree: VdomDict) -> VdomDict:
+def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
     """Use the `value` prop on <select> instead of setting `selected` on <option>."""
 
     if not isinstance(vdom_tree, dict):
@@ -71,6 +71,7 @@ def convert_option_props(vdom_tree: VdomDict) -> VdomDict:
 
     # If the current tag is <select>, remove 'selected' prop from any <option> children and
     # instead set the 'value' prop on the <select> tag.
+    # TODO: Fix this, is broken
     if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
         vdom_tree.setdefault("eventHandlers", {})
         vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(do_nothing_event))
@@ -82,7 +83,7 @@ def convert_option_props(vdom_tree: VdomDict) -> VdomDict:
             vdom_tree["attributes"]["value"] = [option["children"][0] for option in selected_options]
 
     for child in vdom_tree.get("children", []):
-        convert_option_props(child)
+        set_value_prop_on_select_element(child)
 
     return vdom_tree
 
@@ -129,7 +130,7 @@ def _add_on_change_event(event_func, vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def ensure_controlled_inputs(event_func: Callable | None = None) -> Callable:
+def ensure_input_elements_are_controlled(event_func: Callable | None = None) -> Callable:
     """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
 
     def mutation(vdom_tree: VdomDict) -> VdomDict:
diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
new file mode 100644
index 00000000..1634d883
--- /dev/null
+++ b/src/reactpy_django/forms/utils.py
@@ -0,0 +1,39 @@
+from typing import Any
+
+from django.forms import BooleanField, ChoiceField, Form, MultipleChoiceField
+
+
+def convert_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
+    choice_field_map = {
+        field_name: {choice_value: choice_key for choice_key, choice_value in field.choices}
+        for field_name, field in initialized_form.fields.items()
+        if isinstance(field, ChoiceField)
+    }
+    multi_choice_fields = {
+        field_name for field_name, field in initialized_form.fields.items() if isinstance(field, MultipleChoiceField)
+    }
+
+    # Choice fields submit their values as text, but Django choice keys are not always equal to their values.
+    # Due to this, we need to convert the text into keys that Django would be happy with
+    for choice_field_name, choice_map in choice_field_map.items():
+        if choice_field_name in data:
+            submitted_value = data[choice_field_name]
+            if isinstance(submitted_value, list):
+                data[choice_field_name] = [
+                    choice_map.get(submitted_value_item, submitted_value_item)
+                    for submitted_value_item in submitted_value
+                ]
+            elif choice_field_name in multi_choice_fields:
+                data[choice_field_name] = [choice_map.get(submitted_value, submitted_value)]
+            else:
+                data[choice_field_name] = choice_map.get(submitted_value, submitted_value)
+
+
+def convert_boolean_fields(data: dict[str, Any], initialized_form: Form) -> None:
+    boolean_fields = {
+        field_name for field_name, field in initialized_form.fields.items() if isinstance(field, BooleanField)
+    }
+
+    # Convert boolean field text into actual booleans
+    for boolean_field_name in boolean_fields:
+        data[boolean_field_name] = boolean_field_name in data

From f0702d0945f21c0f9f36c2ceaf96f99c1268c8ff Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 19:51:41 -0800
Subject: [PATCH 07/50] Squash some bugs with multi choice and boolean fields

---
 src/reactpy_django/forms/components.py |   6 +-
 src/reactpy_django/forms/transforms.py | 133 ++++++++++++++-----------
 src/reactpy_django/forms/utils.py      |  31 ++----
 3 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 12fc767c..e468b362 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -14,9 +14,10 @@
     convert_html_props_to_reactjs,
     convert_textarea_children_to_prop,
     ensure_input_elements_are_controlled,
+    intercept_anchor_links,
     set_value_prop_on_select_element,
 )
-from reactpy_django.forms.utils import convert_boolean_fields, convert_choice_fields
+from reactpy_django.forms.utils import convert_boolean_fields, convert_multiple_choice_fields
 
 if TYPE_CHECKING:
     from collections.abc import Sequence
@@ -79,7 +80,7 @@ def on_submit(_event):
         last_changed.set_current(timezone.now())
 
     def on_submit_callback(new_data: dict[str, Any]):
-        convert_choice_fields(new_data, initialized_form)
+        convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
         # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
@@ -95,6 +96,7 @@ async def on_change(_event):
         convert_textarea_children_to_prop,
         set_value_prop_on_select_element,
         ensure_input_elements_are_controlled(on_change),
+        intercept_anchor_links,
         strict=False,
     )
 
diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 69c29fb0..47822a97 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -9,12 +9,9 @@
 
 # TODO: Move all this logic to `reactpy.utils._mutate_vdom()` and remove this file.
 
-UNSUPPORTED_PROPS = {"children", "ref", "aria-*", "data-*"}
-
 
 def convert_html_props_to_reactjs(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that standardizes the prop names to be used in the component."""
-
     if not isinstance(vdom_tree, dict):
         return vdom_tree
 
@@ -38,7 +35,7 @@ def convert_textarea_children_to_prop(vdom_tree: VdomDict) -> VdomDict:
         text_content = vdom_tree.pop("children")
         text_content = "".join([child for child in text_content if isinstance(child, str)])
         default_value = vdom_tree["attributes"].pop("defaultValue", "")
-        vdom_tree["attributes"]["value"] = text_content or default_value
+        vdom_tree["attributes"]["defaultValue"] = text_content or default_value
 
     for child in vdom_tree.get("children", []):
         convert_textarea_children_to_prop(child)
@@ -46,61 +43,105 @@ def convert_textarea_children_to_prop(vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def _find_selected_options(vdom_tree: VdomDict, mutation: Callable) -> list[VdomDict]:
-    """Recursively iterate through the tree of dictionaries to find an <option> with the 'selected' prop."""
-    selected_options = []
-
+def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
+    """Use the `value` prop on <select> instead of setting `selected` on <option>."""
     if not isinstance(vdom_tree, dict):
-        return selected_options
+        return vdom_tree
 
-    if vdom_tree["tagName"] == "option" and "attributes" in vdom_tree and "selected" in vdom_tree["attributes"]:
-        mutation(vdom_tree)
-        selected_options.append(vdom_tree)
+    # If the current tag is <select>, remove 'selected' prop from any <option> children and
+    # instead set the 'value' prop on the <select> tag.
+    if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
+        selected_options = _find_selected_options(vdom_tree)
+        multiple_choice = vdom_tree["attributes"]["multiple"] = bool(vdom_tree["attributes"].get("multiple"))
+        if selected_options and not multiple_choice:
+            vdom_tree["attributes"]["defaultValue"] = selected_options[0]
+        if selected_options and multiple_choice:
+            vdom_tree["attributes"]["defaultValue"] = selected_options
 
     for child in vdom_tree.get("children", []):
-        selected_options.extend(_find_selected_options(child, mutation))
+        set_value_prop_on_select_element(child)
 
-    return selected_options
+    return vdom_tree
 
 
-def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
-    """Use the `value` prop on <select> instead of setting `selected` on <option>."""
+def ensure_input_elements_are_controlled(event_func: Callable | None = None) -> Callable:
+    """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
+
+    def mutation(vdom_tree: VdomDict) -> VdomDict:
+        """Adds an onChange event handler to all input elements."""
+        if not isinstance(vdom_tree, dict):
+            return vdom_tree
+
+        vdom_tree.setdefault("eventHandlers", {})
+        if vdom_tree["tagName"] in {"input", "textarea"}:
+            if "onChange" in vdom_tree["eventHandlers"]:
+                pass
+            elif isinstance(event_func, EventHandler):
+                vdom_tree["eventHandlers"]["onChange"] = event_func
+            else:
+                vdom_tree["eventHandlers"]["onChange"] = EventHandler(
+                    to_event_handler_function(event_func or _do_nothing_event)
+                )
+
+        if "children" in vdom_tree:
+            for child in vdom_tree["children"]:
+                mutation(child)
+
+        return vdom_tree
+
+    return mutation
+
 
+def intercept_anchor_links(vdom_tree: VdomDict) -> VdomDict:
+    """Intercepts anchor links and prevents the default behavior.
+    This allows ReactPy-Router to handle the navigation instead of the browser."""
     if not isinstance(vdom_tree, dict):
         return vdom_tree
 
-    # If the current tag is <select>, remove 'selected' prop from any <option> children and
-    # instead set the 'value' prop on the <select> tag.
-    # TODO: Fix this, is broken
-    if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
+    if vdom_tree["tagName"] == "a":
         vdom_tree.setdefault("eventHandlers", {})
-        vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(do_nothing_event))
-        selected_options = _find_selected_options(vdom_tree, lambda option: option["attributes"].pop("selected"))
-        multiple_choice = vdom_tree["attributes"].get("multiple")
-        if selected_options and not multiple_choice:
-            vdom_tree["attributes"]["value"] = selected_options[0]["children"][0]
-        if selected_options and multiple_choice:
-            vdom_tree["attributes"]["value"] = [option["children"][0] for option in selected_options]
+        vdom_tree["eventHandlers"]["onClick"] = EventHandler(
+            to_event_handler_function(_do_nothing_event), prevent_default=True
+        )
 
     for child in vdom_tree.get("children", []):
-        set_value_prop_on_select_element(child)
+        intercept_anchor_links(child)
 
     return vdom_tree
 
 
+def _find_selected_options(vdom_tree: VdomDict) -> list[str]:
+    """Recursively iterate through the tree of dictionaries to find an <option> with the 'selected' prop."""
+    if not isinstance(vdom_tree, dict):
+        return []
+
+    selected_options = []
+    if vdom_tree["tagName"] == "option" and "attributes" in vdom_tree:
+        value = vdom_tree["attributes"].setdefault("value", vdom_tree["children"][0])
+
+        if "selected" in vdom_tree["attributes"]:
+            vdom_tree["attributes"].pop("selected")
+            selected_options.append(value)
+
+    for child in vdom_tree.get("children", []):
+        selected_options.extend(_find_selected_options(child))
+
+    return selected_options
+
+
 def _normalize_prop_name(prop_name: str) -> str:
     """Standardizes the prop name to be used in the component."""
     return REACT_PROP_SUBSTITUTIONS.get(prop_name, prop_name)
 
 
-def react_props_set(string: str) -> set[str]:
+def _react_props_set(string: str) -> set[str]:
     """Extracts the props from a string of React props."""
     lines = string.strip().split("\n")
     props = set()
 
     for line in lines:
         parts = line.split(":", maxsplit=1)
-        if len(parts) == 2 and parts[0] not in UNSUPPORTED_PROPS:
+        if len(parts) == 2 and parts[0] not in {"children", "ref", "aria-*", "data-*"}:
             key, value = parts
             key = key.strip()
             value = value.strip()
@@ -130,35 +171,7 @@ def _add_on_change_event(event_func, vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def ensure_input_elements_are_controlled(event_func: Callable | None = None) -> Callable:
-    """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
-
-    def mutation(vdom_tree: VdomDict) -> VdomDict:
-        """Adds an onChange event handler to all input elements."""
-        if not isinstance(vdom_tree, dict):
-            return vdom_tree
-
-        vdom_tree.setdefault("eventHandlers", {})
-        if vdom_tree["tagName"] in {"input", "textarea"}:
-            if "onChange" in vdom_tree["eventHandlers"]:
-                pass
-            elif isinstance(event_func, EventHandler):
-                vdom_tree["eventHandlers"]["onChange"] = event_func
-            else:
-                vdom_tree["eventHandlers"]["onChange"] = EventHandler(
-                    to_event_handler_function(event_func or do_nothing_event)
-                )
-
-        if "children" in vdom_tree:
-            for child in vdom_tree["children"]:
-                mutation(child)
-
-        return vdom_tree
-
-    return mutation
-
-
-def do_nothing_event(*args, **kwargs):
+def _do_nothing_event(*args, **kwargs):
     pass
 
 
@@ -495,7 +508,7 @@ def do_nothing_event(*args, **kwargs):
 type: a string. Says whether the script is a classic script, ES module, or import map.
 """
 
-KNOWN_REACT_PROPS = react_props_set(
+KNOWN_REACT_PROPS = _react_props_set(
     SPECIAL_PROPS
     + STANDARD_PROPS
     + FORM_PROPS
diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
index 1634d883..f19b168f 100644
--- a/src/reactpy_django/forms/utils.py
+++ b/src/reactpy_django/forms/utils.py
@@ -1,37 +1,24 @@
 from typing import Any
 
-from django.forms import BooleanField, ChoiceField, Form, MultipleChoiceField
+from django.forms import BooleanField, Form, MultipleChoiceField, NullBooleanField
 
 
-def convert_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
-    choice_field_map = {
-        field_name: {choice_value: choice_key for choice_key, choice_value in field.choices}
-        for field_name, field in initialized_form.fields.items()
-        if isinstance(field, ChoiceField)
-    }
+def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
     multi_choice_fields = {
         field_name for field_name, field in initialized_form.fields.items() if isinstance(field, MultipleChoiceField)
     }
 
-    # Choice fields submit their values as text, but Django choice keys are not always equal to their values.
-    # Due to this, we need to convert the text into keys that Django would be happy with
-    for choice_field_name, choice_map in choice_field_map.items():
-        if choice_field_name in data:
-            submitted_value = data[choice_field_name]
-            if isinstance(submitted_value, list):
-                data[choice_field_name] = [
-                    choice_map.get(submitted_value_item, submitted_value_item)
-                    for submitted_value_item in submitted_value
-                ]
-            elif choice_field_name in multi_choice_fields:
-                data[choice_field_name] = [choice_map.get(submitted_value, submitted_value)]
-            else:
-                data[choice_field_name] = choice_map.get(submitted_value, submitted_value)
+    # Convert multiple choice field text into a list of values
+    for choice_field_name in multi_choice_fields:
+        if choice_field_name in data and not isinstance(data[choice_field_name], list):
+            data[choice_field_name] = [data[choice_field_name]]
 
 
 def convert_boolean_fields(data: dict[str, Any], initialized_form: Form) -> None:
     boolean_fields = {
-        field_name for field_name, field in initialized_form.fields.items() if isinstance(field, BooleanField)
+        field_name
+        for field_name, field in initialized_form.fields.items()
+        if isinstance(field, BooleanField) and not isinstance(field, NullBooleanField)
     }
 
     # Convert boolean field text into actual booleans

From 63e23d5e1bca974f5b53aaf817a680e376f55939 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:02:37 -0800
Subject: [PATCH 08/50] Remove auto submit from the base form

---
 src/reactpy_django/components.py       | 17 ++---------------
 src/reactpy_django/forms/components.py | 13 +++----------
 2 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 7c372c64..abb9a721 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -117,22 +117,9 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: type[Form],
-    *,
-    top_children: Sequence = (),
-    bottom_children: Sequence = (),
-    auto_submit: bool = False,
-    auto_submit_wait: int = 3,
-    key: Key | None = None,
+    form: type[Form], *, top_children: Sequence = (), bottom_children: Sequence = (), key: Key | None = None
 ):
-    return _django_form(
-        form=form,
-        top_children=top_children,
-        bottom_children=bottom_children,
-        auto_submit=auto_submit,
-        auto_submit_wait=auto_submit_wait,
-        key=key,
-    )
+    return _django_form(form=form, top_children=top_children, bottom_children=bottom_children, key=key)
 
 
 def pyscript_component(
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index e468b362..ac8e5bfa 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from pathlib import Path
+from pprint import pprint
 from typing import TYPE_CHECKING, Any
 from uuid import uuid4
 
@@ -28,16 +29,8 @@
 )
 
 
-# DjangoFormAutoSubmit = export(
-#     module_from_file("reactpy-django", file=Path(__file__).parent / "static" / "reactpy_django" / "client.js"),
-#     ("DjangoFormAutoSubmit"),
-# )
-
-
 @component
-def _django_form(
-    form: type[Form], top_children: Sequence, bottom_children: Sequence, auto_submit: bool, auto_submit_wait: int
-):
+def _django_form(form: type[Form], top_children: Sequence, bottom_children: Sequence):
     # TODO: Implement form restoration on page reload. Probably want to create a new setting called
     # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
     # Or maybe just recommend pre-rendering to have the browser handle it.
@@ -87,7 +80,7 @@ def on_submit_callback(new_data: dict[str, Any]):
         if submitted_data != new_data:
             set_submitted_data(new_data)
 
-    async def on_change(_event):
+    def on_change(_event):
         last_changed.set_current(timezone.now())
 
     rendered_form = utils.html_to_vdom(

From 66fa334f42f488fd96da9df492278498582001f4 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 20:45:25 -0800
Subject: [PATCH 09/50] Create form test

---
 tests/test_app/components.py        | 10 +---------
 tests/test_app/forms/__init__.py    |  0
 tests/test_app/forms/components.py  | 10 ++++++++++
 tests/test_app/{ => forms}/forms.py |  1 +
 tests/test_app/forms/urls.py        |  7 +++++++
 tests/test_app/forms/views.py       |  5 +++++
 tests/test_app/templates/form.html  | 26 ++++++++++++++++++++++++++
 tests/test_app/urls.py              |  1 +
 8 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 tests/test_app/forms/__init__.py
 create mode 100644 tests/test_app/forms/components.py
 rename tests/test_app/{ => forms}/forms.py (99%)
 create mode 100644 tests/test_app/forms/urls.py
 create mode 100644 tests/test_app/forms/views.py
 create mode 100644 tests/test_app/templates/form.html

diff --git a/tests/test_app/components.py b/tests/test_app/components.py
index fe9fb61c..ad13ac30 100644
--- a/tests/test_app/components.py
+++ b/tests/test_app/components.py
@@ -9,7 +9,7 @@
 from reactpy import component, hooks, html, web
 
 import reactpy_django
-from reactpy_django.components import django_form, view_to_component, view_to_iframe
+from reactpy_django.components import view_to_component, view_to_iframe
 from test_app.models import (
     AsyncForiegnChild,
     AsyncRelationalChild,
@@ -22,7 +22,6 @@
 )
 
 from . import views
-from .forms import BasicForm
 from .types import TestObject
 
 
@@ -693,10 +692,3 @@ async def on_submit(event):
         html.div(f"Mutation State: (loading={user_data_mutation.loading}, error={user_data_mutation.error})"),
         html.div(html.input({"on_key_press": on_submit, "placeholder": "Type here to add data"})),
     )
-
-
-@component
-def basic_form():
-    return django_form(
-        BasicForm, bottom_children=(html.input({"type": "submit"}),), auto_submit=True, auto_submit_wait=0
-    )
diff --git a/tests/test_app/forms/__init__.py b/tests/test_app/forms/__init__.py
new file mode 100644
index 00000000..e69de29b
diff --git a/tests/test_app/forms/components.py b/tests/test_app/forms/components.py
new file mode 100644
index 00000000..210fe135
--- /dev/null
+++ b/tests/test_app/forms/components.py
@@ -0,0 +1,10 @@
+from reactpy import component, html
+
+from reactpy_django.components import django_form
+
+from .forms import BasicForm
+
+
+@component
+def basic_form(form_template=None):
+    return django_form(BasicForm, form_template=form_template, bottom_children=(html.input({"type": "submit"}),))
diff --git a/tests/test_app/forms.py b/tests/test_app/forms/forms.py
similarity index 99%
rename from tests/test_app/forms.py
rename to tests/test_app/forms/forms.py
index e6bd9900..b8202960 100644
--- a/tests/test_app/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -36,3 +36,4 @@ class BasicForm(forms.Form):
         label="combo", fields=[forms.CharField(), forms.EmailField()], initial="example@gmail.com"
     )
     password_field = forms.CharField(label="password", widget=forms.PasswordInput)
+
diff --git a/tests/test_app/forms/urls.py b/tests/test_app/forms/urls.py
new file mode 100644
index 00000000..abccaff2
--- /dev/null
+++ b/tests/test_app/forms/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+
+from .views import form
+
+urlpatterns = [
+    path("form/", form),
+]
diff --git a/tests/test_app/forms/views.py b/tests/test_app/forms/views.py
new file mode 100644
index 00000000..d085d097
--- /dev/null
+++ b/tests/test_app/forms/views.py
@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def form(request):
+    return render(request, "form.html", {})
diff --git a/tests/test_app/templates/form.html b/tests/test_app/templates/form.html
new file mode 100644
index 00000000..67ae0074
--- /dev/null
+++ b/tests/test_app/templates/form.html
@@ -0,0 +1,26 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Forms Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.basic_form" %}
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/urls.py b/tests/test_app/urls.py
index 070b74f1..65672cdc 100644
--- a/tests/test_app/urls.py
+++ b/tests/test_app/urls.py
@@ -34,6 +34,7 @@
     path("", include("test_app.pyscript.urls")),
     path("", include("test_app.offline.urls")),
     path("", include("test_app.channel_layers.urls")),
+    path("", include("test_app.forms.urls")),
     path("reactpy/", include("reactpy_django.http.urls")),
     path("admin/", admin.site.urls),
 ]

From 3863eb2682e6213a873236662549cccdaaac4a3c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 22:56:59 -0800
Subject: [PATCH 10/50] Add bootstrap form

---
 pyproject.toml                                |  8 ++-
 src/reactpy_django/components.py              | 17 +++++-
 src/reactpy_django/forms/components.py        | 57 ++++++++-----------
 tests/test_app/forms/components.py            | 13 ++++-
 tests/test_app/forms/urls.py                  |  5 +-
 tests/test_app/forms/views.py                 |  4 ++
 tests/test_app/settings_multi_db.py           |  1 +
 tests/test_app/settings_single_db.py          |  1 +
 tests/test_app/templates/bootstrap_form.html  | 31 ++++++++++
 .../templates/bootstrap_form_template.html    |  6 ++
 10 files changed, 103 insertions(+), 40 deletions(-)
 create mode 100644 tests/test_app/templates/bootstrap_form.html
 create mode 100644 tests/test_app/templates/bootstrap_form_template.html

diff --git a/pyproject.toml b/pyproject.toml
index 6366a2f5..c25929bf 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -94,6 +94,7 @@ extra-dependencies = [
   "twisted",
   "tblib",
   "servestatic",
+  "django-bootstrap5",
 ]
 matrix-name-format = "{variable}-{value}"
 
@@ -140,7 +141,12 @@ pythonpath = [".", "tests/"]
 ################################
 
 [tool.hatch.envs.django]
-extra-dependencies = ["channels[daphne]>=4.0.0", "twisted", "servestatic"]
+extra-dependencies = [
+  "channels[daphne]>=4.0.0",
+  "twisted",
+  "servestatic",
+  "django-bootstrap5",
+]
 
 [tool.hatch.envs.django.scripts]
 runserver = [
diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index abb9a721..75f3d093 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -117,9 +117,22 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: type[Form], *, top_children: Sequence = (), bottom_children: Sequence = (), key: Key | None = None
+    form: type[Form],
+    *,
+    extra_props: dict[str, Any] | None = None,
+    form_template: str | None = None,
+    top_children: Sequence = (),
+    bottom_children: Sequence = (),
+    key: Key | None = None,
 ):
-    return _django_form(form=form, top_children=top_children, bottom_children=bottom_children, key=key)
+    return _django_form(
+        form=form,
+        extra_props=extra_props or {},
+        form_template=form_template,
+        top_children=top_children,
+        bottom_children=bottom_children,
+        key=key,
+    )
 
 
 def pyscript_component(
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index ac8e5bfa..c69ec4f8 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,12 +1,10 @@
 from __future__ import annotations
 
 from pathlib import Path
-from pprint import pprint
 from typing import TYPE_CHECKING, Any
 from uuid import uuid4
 
 from django.forms import Form
-from django.utils import timezone
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
 from reactpy.web import export, module_from_file
@@ -30,20 +28,20 @@
 
 
 @component
-def _django_form(form: type[Form], top_children: Sequence, bottom_children: Sequence):
-    # TODO: Implement form restoration on page reload. Probably want to create a new setting called
-    # form_restoration_method that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
-    # Or maybe just recommend pre-rendering to have the browser handle it.
-    # Be clear that URL mode will limit you to one form per page.
-    # TODO: Test this with django-bootstrap, django-colorfield, django-ace, django-crispy-forms
-    # TODO: Add pre-submit and post-submit hooks
+def _django_form(
+    form: type[Form], extra_props: dict, form_template: str | None, top_children: Sequence, bottom_children: Sequence
+):
+    # TODO: Implement form restoration on page reload. Maybe this involves creating a new setting called
+    # `form_restoration_method` that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
+    # Perhaps pre-rendering is robust enough already handle this scenario?
+    # Additionaly, "URL" mode would limit the user to one form per page.
+    # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
+    # TODO: Add pre-submit, post-submit, error, and success hooks
     # TODO: Add auto-save option for database-backed forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
     submitted_data, set_submitted_data = hooks.use_state({} or None)
-    last_changed = hooks.use_ref(timezone.now())
-
     uuid = uuid_ref.current
 
     # Don't allow the count of top and bottom children to change
@@ -61,42 +59,35 @@ def _django_form(form: type[Form], top_children: Sequence, bottom_children: Sequ
                 "Do NOT initialize your form by calling it (ex. `MyForm()`)."
             )
             raise TypeError(msg) from e
-        raise
+        raise e
 
     # Run the form validation, if data was provided
     if submitted_data:
         initialized_form.full_clean()
-
-    @event(prevent_default=True)
-    def on_submit(_event):
-        """The server was notified that a form was submitted. Note that actual submission behavior is handled by `on_submit_callback`."""
-        last_changed.set_current(timezone.now())
+        print("Form errors:", initialized_form.errors.as_data())
 
     def on_submit_callback(new_data: dict[str, Any]):
+        """Callback function provided directly to the client side listener. This is responsible for transmitting
+        the submitted form data to the server for processing."""
         convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
-        # TODO: ReactPy's use_state hook really should be de-duplicating this by itself. Needs upstream fix.
+        # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
             set_submitted_data(new_data)
 
-    def on_change(_event):
-        last_changed.set_current(timezone.now())
-
-    rendered_form = utils.html_to_vdom(
-        initialized_form.render(),
-        convert_html_props_to_reactjs,
-        convert_textarea_children_to_prop,
-        set_value_prop_on_select_element,
-        ensure_input_elements_are_controlled(on_change),
-        intercept_anchor_links,
-        strict=False,
-    )
-
     return html.form(
-        {"id": f"reactpy-{uuid}", "onSubmit": on_submit},
+        {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True)} | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
-        rendered_form,
+        utils.html_to_vdom(
+            initialized_form.render(form_template),
+            convert_html_props_to_reactjs,
+            convert_textarea_children_to_prop,
+            set_value_prop_on_select_element,
+            ensure_input_elements_are_controlled(),
+            intercept_anchor_links,
+            strict=False,
+        ),
         *bottom_children,
     )
diff --git a/tests/test_app/forms/components.py b/tests/test_app/forms/components.py
index 210fe135..1f5afb1d 100644
--- a/tests/test_app/forms/components.py
+++ b/tests/test_app/forms/components.py
@@ -6,5 +6,14 @@
 
 
 @component
-def basic_form(form_template=None):
-    return django_form(BasicForm, form_template=form_template, bottom_children=(html.input({"type": "submit"}),))
+def basic_form():
+    return django_form(BasicForm, bottom_children=(html.input({"type": "submit"}),))
+
+
+@component
+def bootstrap_form():
+    return django_form(
+        BasicForm,
+        extra_props={"style": {"maxWidth": "600px", "margin": "auto"}},
+        form_template="bootstrap_form_template.html",
+    )
diff --git a/tests/test_app/forms/urls.py b/tests/test_app/forms/urls.py
index abccaff2..adbde3eb 100644
--- a/tests/test_app/forms/urls.py
+++ b/tests/test_app/forms/urls.py
@@ -1,7 +1,8 @@
 from django.urls import path
 
-from .views import form
+from . import views
 
 urlpatterns = [
-    path("form/", form),
+    path("form/", views.form),
+    path("form/bootstrap/", views.bootstrap_form),
 ]
diff --git a/tests/test_app/forms/views.py b/tests/test_app/forms/views.py
index d085d097..b26c1b02 100644
--- a/tests/test_app/forms/views.py
+++ b/tests/test_app/forms/views.py
@@ -3,3 +3,7 @@
 
 def form(request):
     return render(request, "form.html", {})
+
+
+def bootstrap_form(request):
+    return render(request, "bootstrap_form.html", {})
diff --git a/tests/test_app/settings_multi_db.py b/tests/test_app/settings_multi_db.py
index 76e20789..514ca1be 100644
--- a/tests/test_app/settings_multi_db.py
+++ b/tests/test_app/settings_multi_db.py
@@ -27,6 +27,7 @@
     "django.contrib.staticfiles",
     "reactpy_django",  # Django compatiblity layer for ReactPy
     "test_app",  # This test application
+    "django_bootstrap5",
 ]
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
diff --git a/tests/test_app/settings_single_db.py b/tests/test_app/settings_single_db.py
index 21112086..2f7f3e00 100644
--- a/tests/test_app/settings_single_db.py
+++ b/tests/test_app/settings_single_db.py
@@ -27,6 +27,7 @@
     "django.contrib.staticfiles",
     "reactpy_django",  # Django compatiblity layer for ReactPy
     "test_app",  # This test application
+    "django_bootstrap5",
 ]
 MIDDLEWARE = [
     "django.middleware.security.SecurityMiddleware",
diff --git a/tests/test_app/templates/bootstrap_form.html b/tests/test_app/templates/bootstrap_form.html
new file mode 100644
index 00000000..35329fed
--- /dev/null
+++ b/tests/test_app/templates/bootstrap_form.html
@@ -0,0 +1,31 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+        crossorigin="anonymous"></script>
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Bootstrap Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.bootstrap_form" %}
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/templates/bootstrap_form_template.html b/tests/test_app/templates/bootstrap_form_template.html
new file mode 100644
index 00000000..bdb002da
--- /dev/null
+++ b/tests/test_app/templates/bootstrap_form_template.html
@@ -0,0 +1,6 @@
+{% load django_bootstrap5 %}
+
+{% csrf_token %}
+{% bootstrap_form form %}
+{% bootstrap_button button_type="submit" content="OK" %}
+{% bootstrap_button button_type="reset" content="Cancel" %}

From 4565df0ef487703be5da7d03b6c87037ea141c0c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Thu, 5 Dec 2024 23:27:44 -0800
Subject: [PATCH 11/50] add events for form component

---
 src/reactpy_django/components.py       |  8 ++++++++
 src/reactpy_django/forms/components.py | 26 ++++++++++++++++++++------
 src/reactpy_django/types.py            | 10 ++++++++++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 75f3d093..0b521bee 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -30,6 +30,8 @@
     from django.forms import Form
     from django.views import View
 
+    from reactpy_django.types import FormEvent
+
 
 def view_to_component(
     view: Callable | View | str,
@@ -120,6 +122,9 @@ def django_form(
     form: type[Form],
     *,
     extra_props: dict[str, Any] | None = None,
+    on_success: Callable[[FormEvent], None] | None = None,
+    on_error: Callable[[FormEvent], None] | None = None,
+    on_submit: Callable[[FormEvent], None] | None = None,
     form_template: str | None = None,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -128,6 +133,9 @@ def django_form(
     return _django_form(
         form=form,
         extra_props=extra_props or {},
+        on_success=on_success,
+        on_error=on_error,
+        on_submit=on_submit,
         form_template=form_template,
         top_children=top_children,
         bottom_children=bottom_children,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index c69ec4f8..2d887b0d 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,7 +1,7 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import TYPE_CHECKING, Any
+from typing import TYPE_CHECKING, Any, Callable
 from uuid import uuid4
 
 from django.forms import Form
@@ -17,6 +17,7 @@
     set_value_prop_on_select_element,
 )
 from reactpy_django.forms.utils import convert_boolean_fields, convert_multiple_choice_fields
+from reactpy_django.types import FormEvent
 
 if TYPE_CHECKING:
     from collections.abc import Sequence
@@ -29,14 +30,20 @@
 
 @component
 def _django_form(
-    form: type[Form], extra_props: dict, form_template: str | None, top_children: Sequence, bottom_children: Sequence
+    form: type[Form],
+    extra_props: dict,
+    on_success: Callable[[FormEvent], None] | None,
+    on_error: Callable[[FormEvent], None] | None,
+    on_submit: Callable[[FormEvent], None] | None,
+    form_template: str | None,
+    top_children: Sequence,
+    bottom_children: Sequence,
 ):
     # TODO: Implement form restoration on page reload. Maybe this involves creating a new setting called
     # `form_restoration_method` that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
     # Perhaps pre-rendering is robust enough already handle this scenario?
-    # Additionaly, "URL" mode would limit the user to one form per page.
+    # Additionally, "URL" mode would limit the user to one form per page.
     # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
-    # TODO: Add pre-submit, post-submit, error, and success hooks
     # TODO: Add auto-save option for database-backed forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
@@ -59,12 +66,17 @@ def _django_form(
                 "Do NOT initialize your form by calling it (ex. `MyForm()`)."
             )
             raise TypeError(msg) from e
-        raise e
+        raise
 
     # Run the form validation, if data was provided
     if submitted_data:
         initialized_form.full_clean()
-        print("Form errors:", initialized_form.errors.as_data())
+        success = not initialized_form.errors.as_data()
+        form_event = FormEvent(form=initialized_form, data=submitted_data or {})
+        if success and on_success:
+            on_success(form_event)
+        if not success and on_error:
+            on_error(form_event)
 
     def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
@@ -74,6 +86,8 @@ def on_submit_callback(new_data: dict[str, Any]):
 
         # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
+            if on_submit:
+                on_submit(FormEvent(form=initialized_form, data=new_data))
             set_submitted_data(new_data)
 
     return html.form(
diff --git a/src/reactpy_django/types.py b/src/reactpy_django/types.py
index 75aa1d64..3f39e0ab 100644
--- a/src/reactpy_django/types.py
+++ b/src/reactpy_django/types.py
@@ -19,6 +19,8 @@
 if TYPE_CHECKING:
     from collections.abc import MutableMapping, Sequence
 
+    from django.forms import Form
+
     from reactpy_django.websocket.consumer import ReactpyAsyncWebsocketConsumer
 
 
@@ -51,6 +53,14 @@ def __call__(self, *args: FuncParams.args, **kwargs: FuncParams.kwargs) -> None:
         self.execute(*args, **kwargs)
 
 
+@dataclass
+class FormEvent:
+    """State of a form provided to Form custom events."""
+
+    form: Form
+    data: dict[str, Any]
+
+
 class AsyncPostprocessor(Protocol):
     async def __call__(self, data: Any) -> Any: ...
 

From 24cc64b1a7eb19f3fd563b07355824aa5ecb60c1 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:02:43 -0800
Subject: [PATCH 12/50] Add on_change event

---
 src/reactpy_django/components.py       | 2 ++
 src/reactpy_django/forms/components.py | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 0b521bee..6913747a 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -125,6 +125,7 @@ def django_form(
     on_success: Callable[[FormEvent], None] | None = None,
     on_error: Callable[[FormEvent], None] | None = None,
     on_submit: Callable[[FormEvent], None] | None = None,
+    on_change: Callable[[FormEvent], None] | None = None,
     form_template: str | None = None,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -136,6 +137,7 @@ def django_form(
         on_success=on_success,
         on_error=on_error,
         on_submit=on_submit,
+        on_change=on_change,
         form_template=form_template,
         top_children=top_children,
         bottom_children=bottom_children,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 2d887b0d..6c3d164f 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -35,6 +35,7 @@ def _django_form(
     on_success: Callable[[FormEvent], None] | None,
     on_error: Callable[[FormEvent], None] | None,
     on_submit: Callable[[FormEvent], None] | None,
+    on_change: Callable[[FormEvent], None] | None,
     form_template: str | None,
     top_children: Sequence,
     bottom_children: Sequence,
@@ -78,6 +79,10 @@ def _django_form(
         if not success and on_error:
             on_error(form_event)
 
+    def _on_change(_event):
+        if on_change:
+            on_change(FormEvent(form=initialized_form, data=submitted_data or {}))
+
     def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
         the submitted form data to the server for processing."""
@@ -91,7 +96,8 @@ def on_submit_callback(new_data: dict[str, Any]):
             set_submitted_data(new_data)
 
     return html.form(
-        {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True)} | extra_props,
+        {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True), "onChange": _on_change}
+        | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
         utils.html_to_vdom(

From edca217ceae1ee4a11b73a858ec19c770ac68305 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:07:37 -0800
Subject: [PATCH 13/50] simplify ensure_input_elements_are_controlled

---
 src/reactpy_django/forms/components.py |  2 +-
 src/reactpy_django/forms/transforms.py | 32 ++++++++------------------
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 6c3d164f..5b99524f 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -105,7 +105,7 @@ def on_submit_callback(new_data: dict[str, Any]):
             convert_html_props_to_reactjs,
             convert_textarea_children_to_prop,
             set_value_prop_on_select_element,
-            ensure_input_elements_are_controlled(),
+            ensure_input_elements_are_controlled,
             intercept_anchor_links,
             strict=False,
         ),
diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 47822a97..b0264485 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -64,32 +64,20 @@ def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def ensure_input_elements_are_controlled(event_func: Callable | None = None) -> Callable:
+def ensure_input_elements_are_controlled(vdom_tree: VdomDict) -> VdomDict:
     """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
+    if not isinstance(vdom_tree, dict):
+        return vdom_tree
 
-    def mutation(vdom_tree: VdomDict) -> VdomDict:
-        """Adds an onChange event handler to all input elements."""
-        if not isinstance(vdom_tree, dict):
-            return vdom_tree
-
-        vdom_tree.setdefault("eventHandlers", {})
-        if vdom_tree["tagName"] in {"input", "textarea"}:
-            if "onChange" in vdom_tree["eventHandlers"]:
-                pass
-            elif isinstance(event_func, EventHandler):
-                vdom_tree["eventHandlers"]["onChange"] = event_func
-            else:
-                vdom_tree["eventHandlers"]["onChange"] = EventHandler(
-                    to_event_handler_function(event_func or _do_nothing_event)
-                )
-
-        if "children" in vdom_tree:
-            for child in vdom_tree["children"]:
-                mutation(child)
+    vdom_tree.setdefault("eventHandlers", {})
+    if vdom_tree["tagName"] in {"input"} and "onChange" not in vdom_tree["eventHandlers"]:
+        vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
 
-        return vdom_tree
+    if "children" in vdom_tree:
+        for child in vdom_tree["children"]:
+            ensure_input_elements_are_controlled(child)
 
-    return mutation
+    return vdom_tree
 
 
 def intercept_anchor_links(vdom_tree: VdomDict) -> VdomDict:

From 8e2913f8b7b05e3e7ade1c8661fe17e1fec7d4b4 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:34:45 -0800
Subject: [PATCH 14/50] Support model choice fields

---
 src/reactpy_django/forms/components.py | 41 +++++++++++++++++---------
 src/reactpy_django/forms/utils.py      |  6 ++--
 tests/test_app/forms/forms.py          |  6 ++++
 3 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 5b99524f..a02c0008 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,9 +1,10 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable
+from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from uuid import uuid4
 
+from channels.db import database_sync_to_async
 from django.forms import Form
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
@@ -50,6 +51,7 @@ def _django_form(
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
     submitted_data, set_submitted_data = hooks.use_state({} or None)
+    rendered_form, set_rendered_form = hooks.use_state(cast(Union[str, None], None))
     uuid = uuid_ref.current
 
     # Don't allow the count of top and bottom children to change
@@ -69,19 +71,26 @@ def _django_form(
             raise TypeError(msg) from e
         raise
 
-    # Run the form validation, if data was provided
-    if submitted_data:
-        initialized_form.full_clean()
-        success = not initialized_form.errors.as_data()
-        form_event = FormEvent(form=initialized_form, data=submitted_data or {})
-        if success and on_success:
-            on_success(form_event)
-        if not success and on_error:
-            on_error(form_event)
+    # Set up the form event object
+    form_event = FormEvent(form=initialized_form, data=submitted_data or {})
+
+    # Validate and render the form
+    @hooks.use_effect
+    async def render_form():
+        """Forms must be rendered in an async loop to allow database fields to execute."""
+        if submitted_data:
+            await database_sync_to_async(initialized_form.full_clean)()
+            success = not initialized_form.errors.as_data()
+            if success and on_success:
+                on_success(form_event)
+            if not success and on_error:
+                on_error(form_event)
+
+        set_rendered_form(await database_sync_to_async(initialized_form.render)(form_template))
 
     def _on_change(_event):
         if on_change:
-            on_change(FormEvent(form=initialized_form, data=submitted_data or {}))
+            on_change(form_event)
 
     def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
@@ -89,19 +98,23 @@ def on_submit_callback(new_data: dict[str, Any]):
         convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
+        if on_submit:
+            on_submit(FormEvent(form=initialized_form, data=new_data))
+
         # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
-            if on_submit:
-                on_submit(FormEvent(form=initialized_form, data=new_data))
             set_submitted_data(new_data)
 
+    if not rendered_form:
+        return None
+
     return html.form(
         {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True), "onChange": _on_change}
         | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
         utils.html_to_vdom(
-            initialized_form.render(form_template),
+            rendered_form,
             convert_html_props_to_reactjs,
             convert_textarea_children_to_prop,
             set_value_prop_on_select_element,
diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
index f19b168f..5fecc998 100644
--- a/src/reactpy_django/forms/utils.py
+++ b/src/reactpy_django/forms/utils.py
@@ -1,11 +1,13 @@
 from typing import Any
 
-from django.forms import BooleanField, Form, MultipleChoiceField, NullBooleanField
+from django.forms import BooleanField, Form, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
 
 
 def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
     multi_choice_fields = {
-        field_name for field_name, field in initialized_form.fields.items() if isinstance(field, MultipleChoiceField)
+        field_name
+        for field_name, field in initialized_form.fields.items()
+        if isinstance(field, (MultipleChoiceField, ModelMultipleChoiceField))
     }
 
     # Convert multiple choice field text into a list of values
diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index b8202960..78de63f0 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -36,4 +36,10 @@ class BasicForm(forms.Form):
         label="combo", fields=[forms.CharField(), forms.EmailField()], initial="example@gmail.com"
     )
     password_field = forms.CharField(label="password", widget=forms.PasswordInput)
+    model_choice_field = forms.ModelChoiceField(
+        label="model choice field", initial="1", queryset=models.TodoItem.objects.all()
+    )
+    model_multiple_choice_field = forms.ModelMultipleChoiceField(
+        label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
+    )
 

From cc4fd2253bccde7797ff9bcc345a3690b5ba0de1 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:38:09 -0800
Subject: [PATCH 15/50] Prep work for DB backed form

---
 src/reactpy_django/forms/transforms.py |  4 ++--
 tests/test_app/forms/forms.py          | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index b0264485..590f05a8 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Callable
+from typing import TYPE_CHECKING
 
 from reactpy.core.events import EventHandler, to_event_handler_function
 
@@ -70,7 +70,7 @@ def ensure_input_elements_are_controlled(vdom_tree: VdomDict) -> VdomDict:
         return vdom_tree
 
     vdom_tree.setdefault("eventHandlers", {})
-    if vdom_tree["tagName"] in {"input"} and "onChange" not in vdom_tree["eventHandlers"]:
+    if vdom_tree["tagName"] == "input" and "onChange" not in vdom_tree["eventHandlers"]:
         vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
 
     if "children" in vdom_tree:
diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index 78de63f0..b9e44d4d 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -1,4 +1,7 @@
 from django import forms
+from django.forms import ModelForm
+
+from .. import models
 
 
 class BasicForm(forms.Form):
@@ -43,3 +46,14 @@ class BasicForm(forms.Form):
         label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
     )
 
+    # Currently unsupported fields
+    # multi_value_field = MultiValueField(label="multi value", initial="example@gmail.com")
+    # split_datetime_field = forms.SplitDateTimeField(label="split datetime")
+    # file_field = forms.FileField(label="file")
+    # image_field = forms.ImageField(label="image")
+
+
+class DatabaseBackedForm(ModelForm):
+    class Meta:
+        model = models.TodoItem
+        fields = "__all__"

From f0b21c76bcd8b0eed7aac392d925b266c0fdf748 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 00:58:30 -0800
Subject: [PATCH 16/50] Full support for database backed forms

---
 src/reactpy_django/components.py              |  6 ++--
 src/reactpy_django/forms/components.py        | 34 +++++++++----------
 src/reactpy_django/forms/utils.py             |  8 +++--
 src/reactpy_django/types.py                   |  5 +--
 tests/test_app/forms/components.py            |  7 +++-
 tests/test_app/forms/urls.py                  |  1 +
 tests/test_app/forms/views.py                 |  4 +++
 .../templates/database_backed_form.html       | 26 ++++++++++++++
 8 files changed, 66 insertions(+), 25 deletions(-)
 create mode 100644 tests/test_app/templates/database_backed_form.html

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 6913747a..e7af47e9 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -27,7 +27,7 @@
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
-    from django.forms import Form
+    from django.forms import Form, ModelForm
     from django.views import View
 
     from reactpy_django.types import FormEvent
@@ -119,13 +119,14 @@ def django_js(static_path: str, key: Key | None = None):
 
 
 def django_form(
-    form: type[Form],
+    form: type[Form | ModelForm],
     *,
     extra_props: dict[str, Any] | None = None,
     on_success: Callable[[FormEvent], None] | None = None,
     on_error: Callable[[FormEvent], None] | None = None,
     on_submit: Callable[[FormEvent], None] | None = None,
     on_change: Callable[[FormEvent], None] | None = None,
+    auto_save: bool = True,
     form_template: str | None = None,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -138,6 +139,7 @@ def django_form(
         on_error=on_error,
         on_submit=on_submit,
         on_change=on_change,
+        auto_save=auto_save,
         form_template=form_template,
         top_children=top_children,
         bottom_children=bottom_children,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index a02c0008..952ebb94 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -5,7 +5,7 @@
 from uuid import uuid4
 
 from channels.db import database_sync_to_async
-from django.forms import Form
+from django.forms import Form, ModelForm
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
 from reactpy.web import export, module_from_file
@@ -31,12 +31,13 @@
 
 @component
 def _django_form(
-    form: type[Form],
+    form: type[Form | ModelForm],
     extra_props: dict,
     on_success: Callable[[FormEvent], None] | None,
     on_error: Callable[[FormEvent], None] | None,
     on_submit: Callable[[FormEvent], None] | None,
     on_change: Callable[[FormEvent], None] | None,
+    auto_save: bool,
     form_template: str | None,
     top_children: Sequence,
     bottom_children: Sequence,
@@ -46,7 +47,6 @@ def _django_form(
     # Perhaps pre-rendering is robust enough already handle this scenario?
     # Additionally, "URL" mode would limit the user to one form per page.
     # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
-    # TODO: Add auto-save option for database-backed forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
@@ -59,20 +59,17 @@ def _django_form(
         msg = "Dynamically changing the number of top or bottom children is not allowed."
         raise ValueError(msg)
 
+    # Ensure the provided form is a Django Form
+    if not isinstance(form, (type(Form), type(ModelForm))):
+        msg = (
+            "The provided form must be an uninitialized Django Form. "
+            "Do NOT initialize your form by calling it (ex. `MyForm()`)."
+        )
+        raise TypeError(msg)
+
     # Try to initialize the form with the provided data
-    try:
-        initialized_form = form(data=submitted_data)
-    except Exception as e:
-        if not isinstance(form, type(Form)):
-            msg = (
-                "The provided form must be an uninitialized Django Form. "
-                "Do NOT initialize your form by calling it (ex. `MyForm()`)."
-            )
-            raise TypeError(msg) from e
-        raise
-
-    # Set up the form event object
-    form_event = FormEvent(form=initialized_form, data=submitted_data or {})
+    initialized_form = form(data=submitted_data)
+    form_event = FormEvent(form=initialized_form, data=submitted_data or {}, set_data=set_submitted_data)
 
     # Validate and render the form
     @hooks.use_effect
@@ -85,6 +82,9 @@ async def render_form():
                 on_success(form_event)
             if not success and on_error:
                 on_error(form_event)
+            if success and auto_save and isinstance(initialized_form, ModelForm):
+                await database_sync_to_async(initialized_form.save)()
+                set_submitted_data(None)
 
         set_rendered_form(await database_sync_to_async(initialized_form.render)(form_template))
 
@@ -99,7 +99,7 @@ def on_submit_callback(new_data: dict[str, Any]):
         convert_boolean_fields(new_data, initialized_form)
 
         if on_submit:
-            on_submit(FormEvent(form=initialized_form, data=new_data))
+            on_submit(FormEvent(form=initialized_form, data=new_data, set_data=set_submitted_data))
 
         # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
index 5fecc998..2213bed5 100644
--- a/src/reactpy_django/forms/utils.py
+++ b/src/reactpy_django/forms/utils.py
@@ -1,9 +1,11 @@
+from __future__ import annotations
+
 from typing import Any
 
-from django.forms import BooleanField, Form, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
+from django.forms import BooleanField, Form, ModelForm, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
 
 
-def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
+def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form | ModelForm) -> None:
     multi_choice_fields = {
         field_name
         for field_name, field in initialized_form.fields.items()
@@ -16,7 +18,7 @@ def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form)
             data[choice_field_name] = [data[choice_field_name]]
 
 
-def convert_boolean_fields(data: dict[str, Any], initialized_form: Form) -> None:
+def convert_boolean_fields(data: dict[str, Any], initialized_form: Form | ModelForm) -> None:
     boolean_fields = {
         field_name
         for field_name, field in initialized_form.fields.items()
diff --git a/src/reactpy_django/types.py b/src/reactpy_django/types.py
index 3f39e0ab..a825f138 100644
--- a/src/reactpy_django/types.py
+++ b/src/reactpy_django/types.py
@@ -19,7 +19,7 @@
 if TYPE_CHECKING:
     from collections.abc import MutableMapping, Sequence
 
-    from django.forms import Form
+    from django.forms import Form, ModelForm
 
     from reactpy_django.websocket.consumer import ReactpyAsyncWebsocketConsumer
 
@@ -57,8 +57,9 @@ def __call__(self, *args: FuncParams.args, **kwargs: FuncParams.kwargs) -> None:
 class FormEvent:
     """State of a form provided to Form custom events."""
 
-    form: Form
+    form: Form | ModelForm
     data: dict[str, Any]
+    set_data: Callable[[dict[str, Any] | None], None]
 
 
 class AsyncPostprocessor(Protocol):
diff --git a/tests/test_app/forms/components.py b/tests/test_app/forms/components.py
index 1f5afb1d..e78cf36b 100644
--- a/tests/test_app/forms/components.py
+++ b/tests/test_app/forms/components.py
@@ -2,7 +2,7 @@
 
 from reactpy_django.components import django_form
 
-from .forms import BasicForm
+from .forms import BasicForm, DatabaseBackedForm
 
 
 @component
@@ -17,3 +17,8 @@ def bootstrap_form():
         extra_props={"style": {"maxWidth": "600px", "margin": "auto"}},
         form_template="bootstrap_form_template.html",
     )
+
+
+@component
+def database_backed_form():
+    return django_form(DatabaseBackedForm, bottom_children=(html.input({"type": "submit"}),))
diff --git a/tests/test_app/forms/urls.py b/tests/test_app/forms/urls.py
index adbde3eb..c20d971e 100644
--- a/tests/test_app/forms/urls.py
+++ b/tests/test_app/forms/urls.py
@@ -5,4 +5,5 @@
 urlpatterns = [
     path("form/", views.form),
     path("form/bootstrap/", views.bootstrap_form),
+    path("form/database/", views.databased_backed_form),
 ]
diff --git a/tests/test_app/forms/views.py b/tests/test_app/forms/views.py
index b26c1b02..f3ece2e8 100644
--- a/tests/test_app/forms/views.py
+++ b/tests/test_app/forms/views.py
@@ -7,3 +7,7 @@ def form(request):
 
 def bootstrap_form(request):
     return render(request, "bootstrap_form.html", {})
+
+
+def databased_backed_form(request):
+    return render(request, "database_backed_form.html", {})
diff --git a/tests/test_app/templates/database_backed_form.html b/tests/test_app/templates/database_backed_form.html
new file mode 100644
index 00000000..611b3293
--- /dev/null
+++ b/tests/test_app/templates/database_backed_form.html
@@ -0,0 +1,26 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Database Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.database_backed_form" %}
+    <hr>
+</body>
+
+</html>

From 851b11348f74d358c4a7c4cf4f714741f3a09165 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 01:30:09 -0800
Subject: [PATCH 17/50] Fix render loop bug

---
 src/reactpy_django/forms/components.py | 8 +++-----
 tests/test_app/forms/forms.py          | 4 +---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 952ebb94..50b9bc10 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -42,10 +42,6 @@ def _django_form(
     top_children: Sequence,
     bottom_children: Sequence,
 ):
-    # TODO: Implement form restoration on page reload. Maybe this involves creating a new setting called
-    # `form_restoration_method` that can be set to "URL", "CLIENT_STORAGE", "SERVER_SESSION", or None.
-    # Perhaps pre-rendering is robust enough already handle this scenario?
-    # Additionally, "URL" mode would limit the user to one form per page.
     # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
@@ -86,7 +82,9 @@ async def render_form():
                 await database_sync_to_async(initialized_form.save)()
                 set_submitted_data(None)
 
-        set_rendered_form(await database_sync_to_async(initialized_form.render)(form_template))
+        new_form = await database_sync_to_async(initialized_form.render)(form_template)
+        if new_form != rendered_form:
+            set_rendered_form(new_form)
 
     def _on_change(_event):
         if on_change:
diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index b9e44d4d..6a0e06b3 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -1,5 +1,4 @@
 from django import forms
-from django.forms import ModelForm
 
 from .. import models
 
@@ -45,7 +44,6 @@ class BasicForm(forms.Form):
     model_multiple_choice_field = forms.ModelMultipleChoiceField(
         label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
     )
-
     # Currently unsupported fields
     # multi_value_field = MultiValueField(label="multi value", initial="example@gmail.com")
     # split_datetime_field = forms.SplitDateTimeField(label="split datetime")
@@ -53,7 +51,7 @@ class BasicForm(forms.Form):
     # image_field = forms.ImageField(label="image")
 
 
-class DatabaseBackedForm(ModelForm):
+class DatabaseBackedForm(forms.ModelForm):
     class Meta:
         model = models.TodoItem
         fields = "__all__"

From 6bf8c246631395fafe00018e3493ce66a0585937 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 01:58:33 -0800
Subject: [PATCH 18/50] quick self review

---
 src/reactpy_django/forms/components.py | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 50b9bc10..441c98ce 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -42,7 +42,6 @@ def _django_form(
     top_children: Sequence,
     bottom_children: Sequence,
 ):
-    # TODO: Test this with django-colorfield, django-ace, django-crispy-forms
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
@@ -50,18 +49,19 @@ def _django_form(
     rendered_form, set_rendered_form = hooks.use_state(cast(Union[str, None], None))
     uuid = uuid_ref.current
 
-    # Don't allow the count of top and bottom children to change
+    # Check the provided arguments
     if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
         msg = "Dynamically changing the number of top or bottom children is not allowed."
         raise ValueError(msg)
-
-    # Ensure the provided form is a Django Form
     if not isinstance(form, (type(Form), type(ModelForm))):
         msg = (
             "The provided form must be an uninitialized Django Form. "
             "Do NOT initialize your form by calling it (ex. `MyForm()`)."
         )
         raise TypeError(msg)
+    if "id" in extra_props:
+        msg = "The `extra_props` argument cannot contain an `id` key."
+        raise ValueError(msg)
 
     # Try to initialize the form with the provided data
     initialized_form = form(data=submitted_data)
@@ -86,10 +86,6 @@ async def render_form():
         if new_form != rendered_form:
             set_rendered_form(new_form)
 
-    def _on_change(_event):
-        if on_change:
-            on_change(form_event)
-
     def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
         the submitted form data to the server for processing."""
@@ -99,7 +95,6 @@ def on_submit_callback(new_data: dict[str, Any]):
         if on_submit:
             on_submit(FormEvent(form=initialized_form, data=new_data, set_data=set_submitted_data))
 
-        # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
             set_submitted_data(new_data)
 
@@ -107,7 +102,11 @@ def on_submit_callback(new_data: dict[str, Any]):
         return None
 
     return html.form(
-        {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True), "onChange": _on_change}
+        {
+            "id": f"reactpy-{uuid}",
+            "onSubmit": event(lambda _: None, prevent_default=True),
+            "onChange": on_change(form_event) if on_change else lambda _: None,
+        }
         | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,

From 4077a06b0c2ecaa849075c418863ad5327498e5c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Fri, 6 Dec 2024 02:00:44 -0800
Subject: [PATCH 19/50] Add changelog

---
 CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c2a1635..f819750b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,9 @@ Don't forget to remove deprecated code on each major release!
 
 ## [Unreleased]
 
--   Nothing (yet)!
+### Added
+
+-   Automatically convert Django forms to ReactPy forms via the new `reactpy_django.components.django_form` component!
 
 ## [5.1.1] - 2024-12-02
 

From 08034fadaae9c069d56cda002d31e4fe01d0bf5c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:53:51 -0800
Subject: [PATCH 20/50] Simplify transforms

---
 src/reactpy_django/forms/transforms.py | 72 ++++----------------------
 1 file changed, 10 insertions(+), 62 deletions(-)

diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 590f05a8..5bdfbea6 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING
+from typing import TYPE_CHECKING, Any
 
 from reactpy.core.events import EventHandler, to_event_handler_function
 
@@ -12,42 +12,27 @@
 
 def convert_html_props_to_reactjs(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that standardizes the prop names to be used in the component."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
     # On each node, replace the 'attributes' key names with the standardized names.
     if "attributes" in vdom_tree:
         vdom_tree["attributes"] = {_normalize_prop_name(k): v for k, v in vdom_tree["attributes"].items()}
 
-    for child in vdom_tree.get("children", []):
-        convert_html_props_to_reactjs(child)
-
     return vdom_tree
 
 
 def convert_textarea_children_to_prop(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that converts the text content of a <textarea> to the 'value' prop."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
-    # On each node, if the 'tagName' is 'textarea', move the text content to the 'value' prop.
+    # If the current tag is <textarea>, move the text content to the 'value' prop.
     if vdom_tree["tagName"] == "textarea" and "children" in vdom_tree and vdom_tree["children"]:
         text_content = vdom_tree.pop("children")
         text_content = "".join([child for child in text_content if isinstance(child, str)])
         default_value = vdom_tree["attributes"].pop("defaultValue", "")
         vdom_tree["attributes"]["defaultValue"] = text_content or default_value
 
-    for child in vdom_tree.get("children", []):
-        convert_textarea_children_to_prop(child)
-
     return vdom_tree
 
 
 def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
     """Use the `value` prop on <select> instead of setting `selected` on <option>."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
     # If the current tag is <select>, remove 'selected' prop from any <option> children and
     # instead set the 'value' prop on the <select> tag.
     if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
@@ -58,48 +43,33 @@ def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
         if selected_options and multiple_choice:
             vdom_tree["attributes"]["defaultValue"] = selected_options
 
-    for child in vdom_tree.get("children", []):
-        set_value_prop_on_select_element(child)
-
     return vdom_tree
 
 
 def ensure_input_elements_are_controlled(vdom_tree: VdomDict) -> VdomDict:
     """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
     vdom_tree.setdefault("eventHandlers", {})
     if vdom_tree["tagName"] == "input" and "onChange" not in vdom_tree["eventHandlers"]:
         vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
 
-    if "children" in vdom_tree:
-        for child in vdom_tree["children"]:
-            ensure_input_elements_are_controlled(child)
-
     return vdom_tree
 
 
 def intercept_anchor_links(vdom_tree: VdomDict) -> VdomDict:
     """Intercepts anchor links and prevents the default behavior.
     This allows ReactPy-Router to handle the navigation instead of the browser."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
     if vdom_tree["tagName"] == "a":
         vdom_tree.setdefault("eventHandlers", {})
         vdom_tree["eventHandlers"]["onClick"] = EventHandler(
             to_event_handler_function(_do_nothing_event), prevent_default=True
         )
 
-    for child in vdom_tree.get("children", []):
-        intercept_anchor_links(child)
-
     return vdom_tree
 
 
-def _find_selected_options(vdom_tree: VdomDict) -> list[str]:
-    """Recursively iterate through the tree of dictionaries to find an <option> with the 'selected' prop."""
+def _find_selected_options(vdom_tree: VdomDict | Any) -> list[str]:
+    """Recursively iterate through the tree to find all <option> tags with the 'selected' prop.
+    Removes the 'selected' prop and returns a list of the 'value' prop of each selected <option>."""
     if not isinstance(vdom_tree, dict):
         return []
 
@@ -122,8 +92,8 @@ def _normalize_prop_name(prop_name: str) -> str:
     return REACT_PROP_SUBSTITUTIONS.get(prop_name, prop_name)
 
 
-def _react_props_set(string: str) -> set[str]:
-    """Extracts the props from a string of React props."""
+def _parse_react_props(string: str) -> set[str]:
+    """Extracts the props from a string of React props (copy-pasted from ReactJS docs)."""
     lines = string.strip().split("\n")
     props = set()
 
@@ -138,34 +108,12 @@ def _react_props_set(string: str) -> set[str]:
     return props
 
 
-def _add_on_change_event(event_func, vdom_tree: VdomDict) -> VdomDict:
-    """Recursively adds an onChange event handler to all elements in the tree."""
-    if not isinstance(vdom_tree, dict):
-        return vdom_tree
-
-    vdom_tree.setdefault("eventHandlers", {})
-    if vdom_tree["tagName"] in {"input", "textarea"}:
-        if "onChange" in vdom_tree["eventHandlers"]:
-            pass
-        elif isinstance(event_func, EventHandler):
-            vdom_tree["eventHandlers"]["onChange"] = event_func
-        else:
-            vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(event_func))
-
-    if "children" in vdom_tree:
-        for child in vdom_tree["children"]:
-            _add_on_change_event(event_func, child)
-
-    return vdom_tree
-
-
 def _do_nothing_event(*args, **kwargs):
-    pass
+    """A placeholder event function that does nothing."""
 
 
-# TODO: Create some kind of script that will generate this during build time, rather than hardcoding it.
+# TODO: Create some kind of script that will generate the react docs copy-pasta during build time, rather than hardcoding it.
 # https://react.dev/reference/react-dom/components/common#common-props
-
 SPECIAL_PROPS = r"""
 children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like <div><span /></div>.
 dangerouslySetInnerHTML: An object of the form { __html: '<p>some html</p>' } with a raw HTML string inside. Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn't trusted (for example, if it's based on user data), you risk introducing an XSS vulnerability. Read more about using dangerouslySetInnerHTML.
@@ -496,7 +444,7 @@ def _do_nothing_event(*args, **kwargs):
 type: a string. Says whether the script is a classic script, ES module, or import map.
 """
 
-KNOWN_REACT_PROPS = _react_props_set(
+KNOWN_REACT_PROPS = _parse_react_props(
     SPECIAL_PROPS
     + STANDARD_PROPS
     + FORM_PROPS

From 24ad84cef8a79e391b703ea8c9dc5c75b0b5aeb1 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:54:11 -0800
Subject: [PATCH 21/50] Add extra transforms arg

---
 src/reactpy_django/components.py       | 2 ++
 src/reactpy_django/forms/components.py | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index e7af47e9..ba3c7b5e 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -127,6 +127,7 @@ def django_form(
     on_submit: Callable[[FormEvent], None] | None = None,
     on_change: Callable[[FormEvent], None] | None = None,
     auto_save: bool = True,
+    extra_transforms: Sequence[Callable[[VdomDict], Any]] | None = None,
     form_template: str | None = None,
     top_children: Sequence = (),
     bottom_children: Sequence = (),
@@ -140,6 +141,7 @@ def django_form(
         on_submit=on_submit,
         on_change=on_change,
         auto_save=auto_save,
+        extra_transforms=extra_transforms or [],
         form_template=form_template,
         top_children=top_children,
         bottom_children=bottom_children,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 441c98ce..0bc7a654 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -8,6 +8,7 @@
 from django.forms import Form, ModelForm
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
+from reactpy.core.types import VdomDict
 from reactpy.web import export, module_from_file
 
 from reactpy_django.forms.transforms import (
@@ -38,6 +39,7 @@ def _django_form(
     on_submit: Callable[[FormEvent], None] | None,
     on_change: Callable[[FormEvent], None] | None,
     auto_save: bool,
+    extra_transforms: Sequence[Callable[[VdomDict], Any]],
     form_template: str | None,
     top_children: Sequence,
     bottom_children: Sequence,
@@ -117,6 +119,7 @@ def on_submit_callback(new_data: dict[str, Any]):
             set_value_prop_on_select_element,
             ensure_input_elements_are_controlled,
             intercept_anchor_links,
+            *extra_transforms,
             strict=False,
         ),
         *bottom_children,

From 9360e515e1011cacfda39645f4ab19157b146e59 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 00:56:41 -0800
Subject: [PATCH 22/50] REACTPY_DEFAULT_FORM_TEMPLATE

---
 src/reactpy_django/config.py           | 5 +++++
 src/reactpy_django/forms/components.py | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/config.py b/src/reactpy_django/config.py
index 3f46c48b..f4434c4f 100644
--- a/src/reactpy_django/config.py
+++ b/src/reactpy_django/config.py
@@ -126,3 +126,8 @@
     "REACTPY_CLEAN_USER_DATA",
     True,
 )
+REACTPY_DEFAULT_FORM_TEMPLATE: str | None = getattr(
+    settings,
+    "REACTPY_DEFAULT_FORM_TEMPLATE",
+    None,
+)
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 0bc7a654..8e41ae1e 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -8,7 +8,6 @@
 from django.forms import Form, ModelForm
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
-from reactpy.core.types import VdomDict
 from reactpy.web import export, module_from_file
 
 from reactpy_django.forms.transforms import (
@@ -24,6 +23,8 @@
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
+    from reactpy.core.types import VdomDict
+
 DjangoForm = export(
     module_from_file("reactpy-django", file=Path(__file__).parent.parent / "static" / "reactpy_django" / "client.js"),
     ("DjangoForm"),
@@ -44,6 +45,8 @@ def _django_form(
     top_children: Sequence,
     bottom_children: Sequence,
 ):
+    from reactpy_django import config
+
     uuid_ref = hooks.use_ref(uuid4().hex.replace("-", ""))
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
@@ -84,7 +87,9 @@ async def render_form():
                 await database_sync_to_async(initialized_form.save)()
                 set_submitted_data(None)
 
-        new_form = await database_sync_to_async(initialized_form.render)(form_template)
+        new_form = await database_sync_to_async(initialized_form.render)(
+            form_template or config.REACTPY_DEFAULT_FORM_TEMPLATE
+        )
         if new_form != rendered_form:
             set_rendered_form(new_form)
 

From 7371a45fb137be0a1a9b1706056ac56e2c0cc383 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:10:34 -0800
Subject: [PATCH 23/50] better input transform

---
 src/reactpy_django/forms/components.py |  4 ++--
 src/reactpy_django/forms/transforms.py | 14 ++++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 8e41ae1e..4f60d3db 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -13,9 +13,9 @@
 from reactpy_django.forms.transforms import (
     convert_html_props_to_reactjs,
     convert_textarea_children_to_prop,
-    ensure_input_elements_are_controlled,
     intercept_anchor_links,
     set_value_prop_on_select_element,
+    transform_value_prop_on_input_element,
 )
 from reactpy_django.forms.utils import convert_boolean_fields, convert_multiple_choice_fields
 from reactpy_django.types import FormEvent
@@ -122,7 +122,7 @@ def on_submit_callback(new_data: dict[str, Any]):
             convert_html_props_to_reactjs,
             convert_textarea_children_to_prop,
             set_value_prop_on_select_element,
-            ensure_input_elements_are_controlled,
+            transform_value_prop_on_input_element,
             intercept_anchor_links,
             *extra_transforms,
             strict=False,
diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 5bdfbea6..2cc6d7c1 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -46,11 +46,17 @@ def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def ensure_input_elements_are_controlled(vdom_tree: VdomDict) -> VdomDict:
+def transform_value_prop_on_input_element(vdom_tree: VdomDict) -> VdomDict:
     """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
-    vdom_tree.setdefault("eventHandlers", {})
-    if vdom_tree["tagName"] == "input" and "onChange" not in vdom_tree["eventHandlers"]:
-        vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
+    # vdom_tree.setdefault("eventHandlers", {})
+    # vdom_tree.setdefault("attributes", {})
+    # if vdom_tree["tagName"] == "input" and "onChange" not in vdom_tree["eventHandlers"]:
+    #     vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
+    #     vdom_tree["attributes"].setdefault("value", "")
+
+    vdom_tree.setdefault("attributes", {})
+    if vdom_tree["tagName"] == "input":
+        vdom_tree["attributes"].setdefault("defaultValue", vdom_tree["attributes"].pop("value", ""))
 
     return vdom_tree
 

From 8c9990fe7abb12c4fa5fe1e5e7ebeb94bce2e460 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:12:23 -0800
Subject: [PATCH 24/50] var name cleanup for _find_selected_options

---
 src/reactpy_django/forms/transforms.py | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 2cc6d7c1..866af3f9 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -73,21 +73,21 @@ def intercept_anchor_links(vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
-def _find_selected_options(vdom_tree: VdomDict | Any) -> list[str]:
+def _find_selected_options(vdom_node: Any) -> list[str]:
     """Recursively iterate through the tree to find all <option> tags with the 'selected' prop.
     Removes the 'selected' prop and returns a list of the 'value' prop of each selected <option>."""
-    if not isinstance(vdom_tree, dict):
+    if not isinstance(vdom_node, dict):
         return []
 
     selected_options = []
-    if vdom_tree["tagName"] == "option" and "attributes" in vdom_tree:
-        value = vdom_tree["attributes"].setdefault("value", vdom_tree["children"][0])
+    if vdom_node["tagName"] == "option" and "attributes" in vdom_node:
+        value = vdom_node["attributes"].setdefault("value", vdom_node["children"][0])
 
-        if "selected" in vdom_tree["attributes"]:
-            vdom_tree["attributes"].pop("selected")
+        if "selected" in vdom_node["attributes"]:
+            vdom_node["attributes"].pop("selected")
             selected_options.append(value)
 
-    for child in vdom_tree.get("children", []):
+    for child in vdom_node.get("children", []):
         selected_options.extend(_find_selected_options(child))
 
     return selected_options

From a54f0350a2ab1970cbc98ffa62c6d20e14927814 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:12:30 -0800
Subject: [PATCH 25/50] cleanup in transform_value_prop_on_input_element

---
 src/reactpy_django/forms/transforms.py | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 866af3f9..eca815a1 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -48,14 +48,8 @@ def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
 
 def transform_value_prop_on_input_element(vdom_tree: VdomDict) -> VdomDict:
     """Adds an onChange handler on form <input> elements, since ReactJS doesn't like uncontrolled inputs."""
-    # vdom_tree.setdefault("eventHandlers", {})
-    # vdom_tree.setdefault("attributes", {})
-    # if vdom_tree["tagName"] == "input" and "onChange" not in vdom_tree["eventHandlers"]:
-    #     vdom_tree["eventHandlers"]["onChange"] = EventHandler(to_event_handler_function(_do_nothing_event))
-    #     vdom_tree["attributes"].setdefault("value", "")
-
-    vdom_tree.setdefault("attributes", {})
     if vdom_tree["tagName"] == "input":
+        vdom_tree.setdefault("attributes", {})
         vdom_tree["attributes"].setdefault("defaultValue", vdom_tree["attributes"].pop("value", ""))
 
     return vdom_tree

From 78fdbed7ed3b3d75298a1800abdb58ae8491ab1c Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:31:02 -0800
Subject: [PATCH 26/50] simplify convert_multiple_choice_fields

---
 src/reactpy_django/forms/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
index 2213bed5..b79ff07a 100644
--- a/src/reactpy_django/forms/utils.py
+++ b/src/reactpy_django/forms/utils.py
@@ -14,7 +14,7 @@ def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form
 
     # Convert multiple choice field text into a list of values
     for choice_field_name in multi_choice_fields:
-        if choice_field_name in data and not isinstance(data[choice_field_name], list):
+        if not isinstance(data.get(choice_field_name), list):
             data[choice_field_name] = [data[choice_field_name]]
 
 

From c8c71c47b4bb7d8cab3b8113e6af0dc0b55d0edc Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:31:26 -0800
Subject: [PATCH 27/50] Remove unsupported fields comment

---
 tests/test_app/forms/forms.py | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index 6a0e06b3..0f29427b 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -44,11 +44,6 @@ class BasicForm(forms.Form):
     model_multiple_choice_field = forms.ModelMultipleChoiceField(
         label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
     )
-    # Currently unsupported fields
-    # multi_value_field = MultiValueField(label="multi value", initial="example@gmail.com")
-    # split_datetime_field = forms.SplitDateTimeField(label="split datetime")
-    # file_field = forms.FileField(label="file")
-    # image_field = forms.ImageField(label="image")
 
 
 class DatabaseBackedForm(forms.ModelForm):

From 282e542328a921e5ad6b9bf27355ca65ffee62db Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:33:37 -0800
Subject: [PATCH 28/50] Rename cancel btn to reset

---
 tests/test_app/templates/bootstrap_form_template.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test_app/templates/bootstrap_form_template.html b/tests/test_app/templates/bootstrap_form_template.html
index bdb002da..997c19fd 100644
--- a/tests/test_app/templates/bootstrap_form_template.html
+++ b/tests/test_app/templates/bootstrap_form_template.html
@@ -3,4 +3,4 @@
 {% csrf_token %}
 {% bootstrap_form form %}
 {% bootstrap_button button_type="submit" content="OK" %}
-{% bootstrap_button button_type="reset" content="Cancel" %}
+{% bootstrap_button button_type="reset" content="Reset" %}

From bd58a1b2144401d5bd0b3a6826398f4292af8a73 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:34:01 -0800
Subject: [PATCH 29/50] Move extra props arg

---
 src/reactpy_django/components.py       | 4 ++--
 src/reactpy_django/forms/components.py | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index ba3c7b5e..95dca489 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -121,12 +121,12 @@ def django_js(static_path: str, key: Key | None = None):
 def django_form(
     form: type[Form | ModelForm],
     *,
-    extra_props: dict[str, Any] | None = None,
     on_success: Callable[[FormEvent], None] | None = None,
     on_error: Callable[[FormEvent], None] | None = None,
     on_submit: Callable[[FormEvent], None] | None = None,
     on_change: Callable[[FormEvent], None] | None = None,
     auto_save: bool = True,
+    extra_props: dict[str, Any] | None = None,
     extra_transforms: Sequence[Callable[[VdomDict], Any]] | None = None,
     form_template: str | None = None,
     top_children: Sequence = (),
@@ -135,12 +135,12 @@ def django_form(
 ):
     return _django_form(
         form=form,
-        extra_props=extra_props or {},
         on_success=on_success,
         on_error=on_error,
         on_submit=on_submit,
         on_change=on_change,
         auto_save=auto_save,
+        extra_props=extra_props or {},
         extra_transforms=extra_transforms or [],
         form_template=form_template,
         top_children=top_children,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 4f60d3db..ae35a596 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -34,12 +34,12 @@
 @component
 def _django_form(
     form: type[Form | ModelForm],
-    extra_props: dict,
     on_success: Callable[[FormEvent], None] | None,
     on_error: Callable[[FormEvent], None] | None,
     on_submit: Callable[[FormEvent], None] | None,
     on_change: Callable[[FormEvent], None] | None,
     auto_save: bool,
+    extra_props: dict,
     extra_transforms: Sequence[Callable[[VdomDict], Any]],
     form_template: str | None,
     top_children: Sequence,

From d44616147d1aa29878ff27ee5ff517081ccfba97 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 01:38:54 -0800
Subject: [PATCH 30/50] Set default attributes in transforms

---
 src/reactpy_django/forms/transforms.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index eca815a1..37017e9a 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -23,6 +23,7 @@ def convert_textarea_children_to_prop(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that converts the text content of a <textarea> to the 'value' prop."""
     # If the current tag is <textarea>, move the text content to the 'value' prop.
     if vdom_tree["tagName"] == "textarea" and "children" in vdom_tree and vdom_tree["children"]:
+        vdom_tree.setdefault("attributes", {})
         text_content = vdom_tree.pop("children")
         text_content = "".join([child for child in text_content if isinstance(child, str)])
         default_value = vdom_tree["attributes"].pop("defaultValue", "")
@@ -36,6 +37,7 @@ def set_value_prop_on_select_element(vdom_tree: VdomDict) -> VdomDict:
     # If the current tag is <select>, remove 'selected' prop from any <option> children and
     # instead set the 'value' prop on the <select> tag.
     if vdom_tree["tagName"] == "select" and "children" in vdom_tree:
+        vdom_tree.setdefault("attributes", {})
         selected_options = _find_selected_options(vdom_tree)
         multiple_choice = vdom_tree["attributes"]["multiple"] = bool(vdom_tree["attributes"].get("multiple"))
         if selected_options and not multiple_choice:

From aee08da8e6a220b520a19d379fd054ce2dd1bfd6 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:59:00 -0800
Subject: [PATCH 31/50] Fix edge case where error is thrown on empty choice
 field

---
 src/reactpy_django/forms/utils.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/forms/utils.py b/src/reactpy_django/forms/utils.py
index b79ff07a..59e43d14 100644
--- a/src/reactpy_django/forms/utils.py
+++ b/src/reactpy_django/forms/utils.py
@@ -14,8 +14,9 @@ def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form
 
     # Convert multiple choice field text into a list of values
     for choice_field_name in multi_choice_fields:
-        if not isinstance(data.get(choice_field_name), list):
-            data[choice_field_name] = [data[choice_field_name]]
+        value = data.get(choice_field_name)
+        if value is not None and not isinstance(value, list):
+            data[choice_field_name] = [value]
 
 
 def convert_boolean_fields(data: dict[str, Any], initialized_form: Form | ModelForm) -> None:

From 9c28f97e35dca763bfb90c448b92d000570f7cf4 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:45:59 -0800
Subject: [PATCH 32/50] First cut at docs

---
 docs/examples/html/django_form_bootstrap.html |  11 ++
 docs/examples/python/django_form.py           |  10 ++
 docs/examples/python/django_form_bootstrap.py |   9 ++
 docs/examples/python/django_form_class.py     |   5 +
 .../examples/python/django_form_on_success.py |  20 ++++
 docs/examples/python/example/forms.py         |   4 +
 docs/src/dictionary.txt                       |   1 +
 docs/src/reference/components.md              | 105 +++++++++++++++++-
 docs/src/reference/settings.md                |  16 ++-
 9 files changed, 175 insertions(+), 6 deletions(-)
 create mode 100644 docs/examples/html/django_form_bootstrap.html
 create mode 100644 docs/examples/python/django_form.py
 create mode 100644 docs/examples/python/django_form_bootstrap.py
 create mode 100644 docs/examples/python/django_form_class.py
 create mode 100644 docs/examples/python/django_form_on_success.py
 create mode 100644 docs/examples/python/example/forms.py

diff --git a/docs/examples/html/django_form_bootstrap.html b/docs/examples/html/django_form_bootstrap.html
new file mode 100644
index 00000000..6aba84ca
--- /dev/null
+++ b/docs/examples/html/django_form_bootstrap.html
@@ -0,0 +1,11 @@
+{% load django_bootstrap5 %}
+
+<!-- Note: CSS/JS is loaded here only for demonstration purposes.
+You should load this CSS/JS in your HTML <head> instead. -->
+{% bootstrap_css %}
+{% bootstrap_javascript %}
+
+<!-- The actual form that is rendered by ReactPy -->
+{% bootstrap_form form %}
+{% bootstrap_button button_type="submit" content="OK" %}
+{% bootstrap_button button_type="reset" content="Reset" %}
diff --git a/docs/examples/python/django_form.py b/docs/examples/python/django_form.py
new file mode 100644
index 00000000..51960db1
--- /dev/null
+++ b/docs/examples/python/django_form.py
@@ -0,0 +1,10 @@
+from reactpy import component, html
+
+from example.forms import MyForm
+from reactpy_django.components import django_form
+
+
+@component
+def basic_form():
+    children = [html.input({"type": "submit"})]
+    return django_form(MyForm, bottom_children=children)
diff --git a/docs/examples/python/django_form_bootstrap.py b/docs/examples/python/django_form_bootstrap.py
new file mode 100644
index 00000000..449e1cc4
--- /dev/null
+++ b/docs/examples/python/django_form_bootstrap.py
@@ -0,0 +1,9 @@
+from reactpy import component
+
+from example.forms import MyForm
+from reactpy_django.components import django_form
+
+
+@component
+def basic_form():
+    return django_form(MyForm, form_template="bootstrap_form.html")
diff --git a/docs/examples/python/django_form_class.py b/docs/examples/python/django_form_class.py
new file mode 100644
index 00000000..e556295e
--- /dev/null
+++ b/docs/examples/python/django_form_class.py
@@ -0,0 +1,5 @@
+from django import forms
+
+
+class MyForm(forms.Form):
+    username = forms.CharField(label="Username")
diff --git a/docs/examples/python/django_form_on_success.py b/docs/examples/python/django_form_on_success.py
new file mode 100644
index 00000000..f403d249
--- /dev/null
+++ b/docs/examples/python/django_form_on_success.py
@@ -0,0 +1,20 @@
+from reactpy import component, hooks, html
+from reactpy_router import navigate
+
+from example.forms import MyForm
+from reactpy_django.components import django_form
+from reactpy_django.types import FormEventData
+
+
+@component
+def basic_form():
+    success, set_success = hooks.use_state(False)
+
+    def on_success(event: FormEventData):
+        set_success(True)
+
+    if not success:
+        children = [html.input({"type": "submit"})]
+        return django_form(MyForm, on_success=on_success, bottom_children=children)
+
+    return navigate("/homepage")
diff --git a/docs/examples/python/example/forms.py b/docs/examples/python/example/forms.py
new file mode 100644
index 00000000..8d3eefc0
--- /dev/null
+++ b/docs/examples/python/example/forms.py
@@ -0,0 +1,4 @@
+from django import forms
+
+
+class MyForm(forms.Form): ...
diff --git a/docs/src/dictionary.txt b/docs/src/dictionary.txt
index 1b4ce080..d2ff722d 100644
--- a/docs/src/dictionary.txt
+++ b/docs/src/dictionary.txt
@@ -48,3 +48,4 @@ linter
 linters
 linting
 formatters
+bootstrap_form
diff --git a/docs/src/reference/components.md b/docs/src/reference/components.md
index 4186af42..2db07b53 100644
--- a/docs/src/reference/components.md
+++ b/docs/src/reference/components.md
@@ -156,7 +156,7 @@ Compatible with sync or async [Function Based Views](https://docs.djangoproject.
 
 ??? info "Existing limitations"
 
-    There are currently several limitations of using `#!python view_to_component` that may be resolved in a future version.
+    There are currently several limitations of using `#!python view_to_component` that will be [resolved in a future version](https://github.com/reactive-python/reactpy-django/issues/269).
 
     - Requires manual intervention to change HTTP methods to anything other than `GET`.
     - ReactPy events cannot conveniently be attached to converted view HTML.
@@ -292,12 +292,12 @@ Compatible with sync or async [Function Based Views](https://docs.djangoproject.
 
 ??? info "Existing limitations"
 
-    There are currently several limitations of using `#!python view_to_iframe` that may be resolved in a future version.
+    There are currently several limitations of using `#!python view_to_iframe` which may be [resolved in a future version](https://github.com/reactive-python/reactpy-django/issues/268).
 
     - No built-in method of signalling events back to the parent component.
-    - All provided `#!python *args` and `#!python *kwargs` must be serializable values, since they are encoded into the URL.
+    - All provided `#!python args` and `#!python kwargs` must be serializable values, since they are encoded into the URL.
     - The `#!python iframe` will always load **after** the parent component.
-    - CSS styling for `#!python iframe` elements tends to be awkward/difficult.
+    - CSS styling for `#!python iframe` elements tends to be awkward.
 
 ??? question "How do I use this for Class Based Views?"
 
@@ -381,6 +381,103 @@ Compatible with sync or async [Function Based Views](https://docs.djangoproject.
 
 ---
 
+## Django Form
+
+Automatically convert a Django form into a ReactPy component.
+
+Compatible with both [standard Django forms](https://docs.djangoproject.com/en/stable/topics/forms/#building-a-form) and [ModelForms](https://docs.djangoproject.com/en/stable/topics/forms/modelforms/).
+
+=== "components.py"
+
+    ```python
+    {% include "../../examples/python/django_form.py" %}
+    ```
+
+=== "forms.py"
+
+    ```python
+    {% include "../../examples/python/django_form_class.py" %}
+    ```
+
+??? example "See Interface"
+
+    <font size="4">**Parameters**</font>
+
+    | Name | Type | Description | Default |
+    | --- | --- | --- | --- |
+    | `#!python form` | `#!python type[Form | ModelForm]` | The form instance to convert. | N/A |
+    | `#!python on_success` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is successfully submitted. | `#!python None` |
+    | `#!python on_error` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form submission fails. | `#!python None` |
+    | `#!python on_receive_data` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called before newly submitted form data is rendered. | `#!python None` |
+    | `#!python on_change` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is changed. | `#!python None` |
+    | `#!python auto_save` | `#!python bool` | If `#!python True`, the form will automatically call `#!python save` on successful submission of a `#!python ModelForm`. This has no effect on regular `#!python Form` instances. | `#!python False` |
+    | `#!python extra_props` | `#!python dict[str, Any] | None` | Additional properties to add to the `#!html <form>` element. | `#!python None` |
+    | `#!python extra_transforms` | `#!python Sequence[Callable[[VdomDict], Any]] | None` | A list of functions that transforms the newly generated VDOM. The functions will be repeatedly called on each VDOM node. | `#!python None` |
+    | `#!python form_template` | `#!python str | None` | The template to use for the form. If `#!python None`, Django's default template is used. | `#!python None` |
+    | `#!python top_children` | `#!python Sequence[Any]` | Additional elements to add to the top of the form. | `#!python tuple` |
+    | `#!python bottom_children` | `#!python Sequence[Any]` | Additional elements to add to the bottom of the form. | `#!python tuple` |
+    | `#!python key` | `#!python Key | None` | A key to uniquely identify this component which is unique amongst a component's immediate siblings. | `#!python None` |
+
+    <font size="4">**Returns**</font>
+
+    | Type | Description |
+    | --- | --- |
+    | `#!python Component` | A ReactPy component. |
+
+??? info "Existing limitations"
+
+    The following fields are currently incompatible with `#!python django_form`: `#!python FileField`, `#!python ImageField`, `#!python SplitDateTimeField`, and `#!python MultiValueField`.
+
+    Compatibility for these fields will be [added in a future version](https://github.com/reactive-python/reactpy-django/issues/270).
+
+??? question "How do I style these forms with Bootstrap?"
+
+    You can style these forms by using a form styling library. In the example below, it is assumed that you have already installed [`django-bootstrap5`](https://pypi.org/project/django-bootstrap5/).
+
+    After installing a form styling library, you can then provide ReactPy a custom `#!python form_template` parameter. This parameter allows you to specify a custom HTML template to use to render this the form.
+
+    Note that you can also set a global default for `form_template` by using [`settings.py:REACTPY_DEFAULT_FORM_TEMPLATE`](./settings.md#reactpy_default_form_template).
+
+    === "components.py"
+
+        ```python
+        {% include "../../examples/python/django_form_bootstrap.py" %}
+        ```
+
+    === "forms.py"
+
+        ```python
+        {% include "../../examples/python/django_form_class.py" %}
+        ```
+
+    === "bootstrap_form.html"
+
+        ```jinja
+        {% include "../../examples/html/django_form_bootstrap.html" %}
+        ```
+
+??? question "How do I handle form success/errors?"
+
+    You can react to form state by providing a callback function to any of the following parameters: `#!python on_success`, `#!python on_error`, `#!python on_receive_data`, and `#!python on_change`.
+
+    These functions will be called when the form is submitted.
+
+    In the example below, we will use the `#!python on_success` parameter to change the URL upon successful submission.
+
+    === "components.py"
+
+        ```python
+        {% include "../../examples/python/django_form_on_success.py" %}
+        ```
+
+    === "forms.py"
+
+        ```python
+        {% include "../../examples/python/django_form_class.py" %}
+        ```
+
+---
+
 ## Django CSS
 
 Allows you to defer loading a CSS stylesheet until a component begins rendering. This stylesheet must be stored within [Django's static files](https://docs.djangoproject.com/en/stable/howto/static-files/).
diff --git a/docs/src/reference/settings.md b/docs/src/reference/settings.md
index 6b1c78c4..94c9d8b6 100644
--- a/docs/src/reference/settings.md
+++ b/docs/src/reference/settings.md
@@ -34,7 +34,7 @@ The prefix used for all ReactPy WebSocket and HTTP URLs.
 
 **Example Value(s):** `#!python "example_project.postprocessor"`, `#!python None`
 
-Dotted path to the default `#!python reactpy_django.hooks.use_query` postprocessor function.
+Dotted path to the default postprocessor function used by the [`use_query`](./hooks.md#use-query) hook.
 
 Postprocessor functions can be async or sync. Here is an example of a sync postprocessor function:
 
@@ -48,6 +48,18 @@ Set `#!python REACTPY_DEFAULT_QUERY_POSTPROCESSOR` to `#!python None` to disable
 
 ---
 
+### `#!python REACTPY_DEFAULT_FORM_TEMPLATE`
+
+**Default:** `#!python None`
+
+**Example Value(s):** `#!python "my_templates/bootstrap_form.html"`
+
+File path to the default form template used by the [`django_form`](./components.md#django-form) component.
+
+This file path must be valid to Django's [template finder](https://docs.djangoproject.com/en/stable/topics/templates/#support-for-template-engines).
+
+---
+
 ### `#!python REACTPY_AUTH_BACKEND`
 
 **Default:** `#!python "django.contrib.auth.backends.ModelBackend"`
@@ -131,7 +143,7 @@ This setting is incompatible with [`daphne`](https://github.com/django/daphne).
 
 Configures whether to use an async ReactPy rendering queue. When enabled, large renders will no longer block smaller renders from taking place. Additionally, prevents the rendering queue from being blocked on waiting for async effects to startup/shutdown (which is typically a relatively slow operation).
 
-This setting is currently experimental, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.
+This setting is currently in early release, and currently no effort is made to de-duplicate renders. For example, if parent and child components are scheduled to render at the same time, both renders will take place even though a single render of the parent component would have been sufficient.
 
 ---
 

From 88ba295094d5a1180974528ba85327968195e33f Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:51:05 -0800
Subject: [PATCH 33/50] Refactoring related to new docs

---
 src/reactpy_django/components.py       | 38 +++++++++++++----
 src/reactpy_django/forms/components.py | 58 ++++++++++++++++++--------
 src/reactpy_django/types.py            | 14 +++++--
 3 files changed, 81 insertions(+), 29 deletions(-)

diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index 95dca489..f036642f 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -30,7 +30,7 @@
     from django.forms import Form, ModelForm
     from django.views import View
 
-    from reactpy_django.types import FormEvent
+    from reactpy_django.types import AsyncFormEvent, SyncFormEvent
 
 
 def view_to_component(
@@ -121,23 +121,45 @@ def django_js(static_path: str, key: Key | None = None):
 def django_form(
     form: type[Form | ModelForm],
     *,
-    on_success: Callable[[FormEvent], None] | None = None,
-    on_error: Callable[[FormEvent], None] | None = None,
-    on_submit: Callable[[FormEvent], None] | None = None,
-    on_change: Callable[[FormEvent], None] | None = None,
+    on_success: AsyncFormEvent | SyncFormEvent | None = None,
+    on_error: AsyncFormEvent | SyncFormEvent | None = None,
+    on_receive_data: AsyncFormEvent | SyncFormEvent | None = None,
+    on_change: AsyncFormEvent | SyncFormEvent | None = None,
     auto_save: bool = True,
     extra_props: dict[str, Any] | None = None,
     extra_transforms: Sequence[Callable[[VdomDict], Any]] | None = None,
     form_template: str | None = None,
-    top_children: Sequence = (),
-    bottom_children: Sequence = (),
+    top_children: Sequence[Any] = (),
+    bottom_children: Sequence[Any] = (),
     key: Key | None = None,
 ):
+    """Converts a Django form to a ReactPy component.
+
+    Args:
+        form: The form instance to convert.
+
+    Keyword Args:
+        on_success: A callback function that is called when the form is successfully submitted.
+        on_error: A callback function that is called when the form submission fails.
+        on_receive_data: A callback function that is called before newly submitted form data is rendered.
+        on_change: A callback function that is called when the form is changed.
+        auto_save: If `True`, the form will automatically call `save` on successful submission of \
+            a `ModelForm`. This has no effect on regular `Form` instances.
+        extra_props: Additional properties to add to the `html.form` element.
+        extra_transforms: A list of functions that transforms the newly generated VDOM. \
+            The functions will be repeatedly called on each VDOM node.
+        form_template: The template to use for the form. If `None`, Django's default template is used.
+        top_children: Additional elements to add to the top of the form.
+        bottom_children: Additional elements to add to the bottom of the form.
+        key: A key to uniquely identify this component which is unique amongst a component's \
+            immediate siblings.
+    """
+
     return _django_form(
         form=form,
         on_success=on_success,
         on_error=on_error,
-        on_submit=on_submit,
+        on_receive_data=on_receive_data,
         on_change=on_change,
         auto_save=auto_save,
         extra_props=extra_props or {},
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index ae35a596..7b7daefa 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,5 +1,6 @@
 from __future__ import annotations
 
+import asyncio
 from pathlib import Path
 from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from uuid import uuid4
@@ -18,7 +19,7 @@
     transform_value_prop_on_input_element,
 )
 from reactpy_django.forms.utils import convert_boolean_fields, convert_multiple_choice_fields
-from reactpy_django.types import FormEvent
+from reactpy_django.types import AsyncFormEvent, FormEventData, SyncFormEvent
 
 if TYPE_CHECKING:
     from collections.abc import Sequence
@@ -31,13 +32,14 @@
 )
 
 
+# TODO: Create types for AsyncFormEvent and FormEvent
 @component
 def _django_form(
     form: type[Form | ModelForm],
-    on_success: Callable[[FormEvent], None] | None,
-    on_error: Callable[[FormEvent], None] | None,
-    on_submit: Callable[[FormEvent], None] | None,
-    on_change: Callable[[FormEvent], None] | None,
+    on_success: AsyncFormEvent | SyncFormEvent | None,
+    on_error: AsyncFormEvent | SyncFormEvent | None,
+    on_receive_data: AsyncFormEvent | SyncFormEvent | None,
+    on_change: AsyncFormEvent | SyncFormEvent | None,
     auto_save: bool,
     extra_props: dict,
     extra_transforms: Sequence[Callable[[VdomDict], Any]],
@@ -64,13 +66,12 @@ def _django_form(
             "Do NOT initialize your form by calling it (ex. `MyForm()`)."
         )
         raise TypeError(msg)
-    if "id" in extra_props:
-        msg = "The `extra_props` argument cannot contain an `id` key."
-        raise ValueError(msg)
 
     # Try to initialize the form with the provided data
     initialized_form = form(data=submitted_data)
-    form_event = FormEvent(form=initialized_form, data=submitted_data or {}, set_data=set_submitted_data)
+    form_event = FormEventData(
+        form=initialized_form, submitted_data=submitted_data or {}, set_submitted_data=set_submitted_data
+    )
 
     # Validate and render the form
     @hooks.use_effect
@@ -80,9 +81,15 @@ async def render_form():
             await database_sync_to_async(initialized_form.full_clean)()
             success = not initialized_form.errors.as_data()
             if success and on_success:
-                on_success(form_event)
+                if asyncio.iscoroutinefunction(on_success):
+                    await on_success(form_event)
+                else:
+                    on_success(form_event)
             if not success and on_error:
-                on_error(form_event)
+                if asyncio.iscoroutinefunction(on_error):
+                    await on_error(form_event)
+                else:
+                    on_error(form_event)
             if success and auto_save and isinstance(initialized_form, ModelForm):
                 await database_sync_to_async(initialized_form.save)()
                 set_submitted_data(None)
@@ -93,28 +100,43 @@ async def render_form():
         if new_form != rendered_form:
             set_rendered_form(new_form)
 
-    def on_submit_callback(new_data: dict[str, Any]):
+    async def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
         the submitted form data to the server for processing."""
         convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
-        if on_submit:
-            on_submit(FormEvent(form=initialized_form, data=new_data, set_data=set_submitted_data))
+        if on_receive_data:
+            new_form_event = FormEventData(
+                form=initialized_form, submitted_data=new_data, set_submitted_data=set_submitted_data
+            )
+            if asyncio.iscoroutinefunction(on_receive_data):
+                await on_receive_data(new_form_event)
+            else:
+                on_receive_data(new_form_event)
 
         if submitted_data != new_data:
             set_submitted_data(new_data)
 
+    async def _on_change(_event):
+        """Event that exist solely to allow the user to detect form changes."""
+        if on_change:
+            if asyncio.iscoroutinefunction(on_change):
+                await on_change(form_event)
+            else:
+                on_change(form_event)
+
     if not rendered_form:
         return None
 
     return html.form(
-        {
+        extra_props
+        | {
             "id": f"reactpy-{uuid}",
+            # Intercept the form submission to prevent the browser from navigating
             "onSubmit": event(lambda _: None, prevent_default=True),
-            "onChange": on_change(form_event) if on_change else lambda _: None,
-        }
-        | extra_props,
+            "onChange": _on_change,
+        },
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
         utils.html_to_vdom(
diff --git a/src/reactpy_django/types.py b/src/reactpy_django/types.py
index a825f138..53e6e9ad 100644
--- a/src/reactpy_django/types.py
+++ b/src/reactpy_django/types.py
@@ -54,12 +54,20 @@ def __call__(self, *args: FuncParams.args, **kwargs: FuncParams.kwargs) -> None:
 
 
 @dataclass
-class FormEvent:
+class FormEventData:
     """State of a form provided to Form custom events."""
 
     form: Form | ModelForm
-    data: dict[str, Any]
-    set_data: Callable[[dict[str, Any] | None], None]
+    submitted_data: dict[str, Any]
+    set_submitted_data: Callable[[dict[str, Any] | None], None]
+
+
+class AsyncFormEvent(Protocol):
+    async def __call__(self, event: FormEventData) -> None: ...
+
+
+class SyncFormEvent(Protocol):
+    def __call__(self, event: FormEventData) -> None: ...
 
 
 class AsyncPostprocessor(Protocol):

From a44591f67a0696cad8f92f5af495d9544a097ecd Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:51:25 -0800
Subject: [PATCH 34/50] use local bootstrap for tests

---
 tests/test_app/templates/bootstrap_form.html | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/tests/test_app/templates/bootstrap_form.html b/tests/test_app/templates/bootstrap_form.html
index 35329fed..22ac51d1 100644
--- a/tests/test_app/templates/bootstrap_form.html
+++ b/tests/test_app/templates/bootstrap_form.html
@@ -7,11 +7,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
-        crossorigin="anonymous"></script>
+    {% bootstrap_css %}
+    {% bootstrap_javascript %}
     <title>ReactPy</title>
     <style>
         iframe {

From 16c04bcd8b2e895a896bf5418936feaf8e62a506 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 00:51:38 -0800
Subject: [PATCH 35/50] Remove default values from test form

---
 tests/test_app/forms/forms.py | 54 ++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index 0f29427b..fab8263b 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -6,43 +6,37 @@
 class BasicForm(forms.Form):
     # Render one of every Django field type
     # https://docs.djangoproject.com/en/stable/ref/forms/fields/#field-types
-    boolean_field = forms.BooleanField(label="boolean", initial=True)
-    char_field = forms.CharField(label="chars", max_length=7, initial="Example")
-    choice_field = forms.ChoiceField(label="choice", initial="2", choices=[("1", "One"), ("2", "Two")])
-    date_field = forms.DateField(label="date", initial="2000-01-01")
-    date_time_field = forms.DateTimeField(label="date time", initial="2000-01-01 00:00:00")
-    decimal_field = forms.DecimalField(label="decimal", initial=0.0)
-    duration_field = forms.DurationField(label="duration", initial=0)
-    email_field = forms.EmailField(label="email", initial="example@gmail.com")
+    boolean_field = forms.BooleanField(label="boolean")
+    char_field = forms.CharField(label="chars", max_length=7)
+    choice_field = forms.ChoiceField(label="choice", choices=[("1", "One"), ("2", "Two")])
+    date_field = forms.DateField(label="date")
+    date_time_field = forms.DateTimeField(label="date time")
+    decimal_field = forms.DecimalField(label="decimal")
+    duration_field = forms.DurationField(label="duration")
+    email_field = forms.EmailField(label="email")
     file_path_field = forms.FilePathField("./", label="file path")
-    float_field = forms.FloatField(label="float", initial=0.0)
-    generic_ip_address_field = forms.GenericIPAddressField(label="Generic IP", initial="127.0.0.1")
-    integer_field = forms.IntegerField(label="integer", initial=0)
-    json_field = forms.JSONField(label="JSON", initial={"key": "value"})
+    float_field = forms.FloatField(label="float")
+    generic_ip_address_field = forms.GenericIPAddressField(label="Generic IP")
+    integer_field = forms.IntegerField(label="integer")
+    json_field = forms.JSONField(label="JSON")
     multiple_choice_field = forms.MultipleChoiceField(
-        label="multiple choice", initial=["1", "2"], choices=[("1", "One"), ("2", "Two"), ("3", "Three")]
-    )
-    null_boolean_field = forms.NullBooleanField(label="null boolean", initial=True)
-    regex_field = forms.RegexField(label="regex", regex=r"^\d{1,2}$", initial="12")
-    slug_field = forms.SlugField(label="slug", initial="your-slug")
-    time_field = forms.TimeField(label="time", initial="00:00:00")
-    typed_choice_field = forms.TypedChoiceField(
-        label="typed choice field", initial="1", choices=[("1", "One"), ("2", "Two")]
+        label="multiple choice", choices=[("1", "One"), ("2", "Two"), ("3", "Three")]
     )
+    null_boolean_field = forms.NullBooleanField(label="null boolean")
+    regex_field = forms.RegexField(label="regex", regex=r"^\d{1,2}$")
+    slug_field = forms.SlugField(label="slug")
+    time_field = forms.TimeField(label="time")
+    typed_choice_field = forms.TypedChoiceField(label="typed choice field", choices=[("1", "One"), ("2", "Two")])
     typed_multiple_choice_field = forms.TypedMultipleChoiceField(
-        label="typed multiple choice", initial="1", choices=[("1", "One"), ("2", "Two")]
-    )
-    url_field = forms.URLField(label="URL", initial="https://example.com")
-    uuid_field = forms.UUIDField(label="UUID", initial="550e8400-e29b-41d4-a716-446655440000")
-    combo_field = forms.ComboField(
-        label="combo", fields=[forms.CharField(), forms.EmailField()], initial="example@gmail.com"
+        label="typed multiple choice", choices=[("1", "One"), ("2", "Two")]
     )
+    url_field = forms.URLField(label="URL")
+    uuid_field = forms.UUIDField(label="UUID")
+    combo_field = forms.ComboField(label="combo", fields=[forms.CharField(), forms.EmailField()])
     password_field = forms.CharField(label="password", widget=forms.PasswordInput)
-    model_choice_field = forms.ModelChoiceField(
-        label="model choice field", initial="1", queryset=models.TodoItem.objects.all()
-    )
+    model_choice_field = forms.ModelChoiceField(label="model choice field", queryset=models.TodoItem.objects.all())
     model_multiple_choice_field = forms.ModelMultipleChoiceField(
-        label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
+        label="model multiple choice field", queryset=models.TodoItem.objects.all()
     )
 
 

From d561c88b0d8f2268bb28b0b2c5b9227dda858f33 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:51:23 -0800
Subject: [PATCH 36/50] self review

---
 docs/examples/python/django_form_on_success.py | 15 ++++++++-------
 docs/src/reference/components.md               |  4 ++--
 src/reactpy_django/components.py               |  4 +++-
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/docs/examples/python/django_form_on_success.py b/docs/examples/python/django_form_on_success.py
index f403d249..d8b6927c 100644
--- a/docs/examples/python/django_form_on_success.py
+++ b/docs/examples/python/django_form_on_success.py
@@ -8,13 +8,14 @@
 
 @component
 def basic_form():
-    success, set_success = hooks.use_state(False)
+    submitted, set_submitted = hooks.use_state(False)
 
-    def on_success(event: FormEventData):
-        set_success(True)
+    def on_submit(event: FormEventData):
+        """This function will be called when the form is successfully submitted."""
+        set_submitted(True)
 
-    if not success:
-        children = [html.input({"type": "submit"})]
-        return django_form(MyForm, on_success=on_success, bottom_children=children)
+    if submitted:
+        return navigate("/homepage")
 
-    return navigate("/homepage")
+    children = [html.input({"type": "submit"})]
+    return django_form(MyForm, on_success=on_submit, bottom_children=children)
diff --git a/docs/src/reference/components.md b/docs/src/reference/components.md
index 2db07b53..bbf12c58 100644
--- a/docs/src/reference/components.md
+++ b/docs/src/reference/components.md
@@ -405,12 +405,12 @@ Compatible with both [standard Django forms](https://docs.djangoproject.com/en/s
 
     | Name | Type | Description | Default |
     | --- | --- | --- | --- |
-    | `#!python form` | `#!python type[Form | ModelForm]` | The form instance to convert. | N/A |
+    | `#!python form` | `#!python type[Form | ModelForm]` | The form to convert. | N/A |
     | `#!python on_success` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is successfully submitted. | `#!python None` |
     | `#!python on_error` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form submission fails. | `#!python None` |
     | `#!python on_receive_data` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called before newly submitted form data is rendered. | `#!python None` |
     | `#!python on_change` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is changed. | `#!python None` |
-    | `#!python auto_save` | `#!python bool` | If `#!python True`, the form will automatically call `#!python save` on successful submission of a `#!python ModelForm`. This has no effect on regular `#!python Form` instances. | `#!python False` |
+    | `#!python auto_save` | `#!python bool` | If `#!python True`, the form will automatically call `#!python save` on successful submission of a `#!python ModelForm`. This has no effect on regular `#!python Form` instances. | `#!python True` |
     | `#!python extra_props` | `#!python dict[str, Any] | None` | Additional properties to add to the `#!html <form>` element. | `#!python None` |
     | `#!python extra_transforms` | `#!python Sequence[Callable[[VdomDict], Any]] | None` | A list of functions that transforms the newly generated VDOM. The functions will be repeatedly called on each VDOM node. | `#!python None` |
     | `#!python form_template` | `#!python str | None` | The template to use for the form. If `#!python None`, Django's default template is used. | `#!python None` |
diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index f036642f..d0db240c 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -1,3 +1,5 @@
+"""This file contains Django related components. Most of these components utilize wrappers to fix type hints."""
+
 from __future__ import annotations
 
 import json
@@ -136,7 +138,7 @@ def django_form(
     """Converts a Django form to a ReactPy component.
 
     Args:
-        form: The form instance to convert.
+        form: The form to convert.
 
     Keyword Args:
         on_success: A callback function that is called when the form is successfully submitted.

From d9416d94b86a7349712b422609a5fbbf773763cd Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:46:34 -0800
Subject: [PATCH 37/50] Add tests

---
 tests/test_app/forms/urls.py                  |   2 +-
 tests/test_app/forms/views.py                 |   4 +-
 tests/test_app/templates/admin/login.html     |   6 +
 tests/test_app/templates/bootstrap_form.html  |   2 +-
 ...abase_backed_form.html => model_form.html} |   2 +-
 tests/test_app/tests/test_components.py       | 224 +++++++++++++++++-
 tests/test_app/tests/utils.py                 |   6 +
 7 files changed, 239 insertions(+), 7 deletions(-)
 create mode 100644 tests/test_app/templates/admin/login.html
 rename tests/test_app/templates/{database_backed_form.html => model_form.html} (92%)

diff --git a/tests/test_app/forms/urls.py b/tests/test_app/forms/urls.py
index c20d971e..34cad0e9 100644
--- a/tests/test_app/forms/urls.py
+++ b/tests/test_app/forms/urls.py
@@ -5,5 +5,5 @@
 urlpatterns = [
     path("form/", views.form),
     path("form/bootstrap/", views.bootstrap_form),
-    path("form/database/", views.databased_backed_form),
+    path("form/model/", views.model_form),
 ]
diff --git a/tests/test_app/forms/views.py b/tests/test_app/forms/views.py
index f3ece2e8..c49f1120 100644
--- a/tests/test_app/forms/views.py
+++ b/tests/test_app/forms/views.py
@@ -9,5 +9,5 @@ def bootstrap_form(request):
     return render(request, "bootstrap_form.html", {})
 
 
-def databased_backed_form(request):
-    return render(request, "database_backed_form.html", {})
+def model_form(request):
+    return render(request, "model_form.html", {})
diff --git a/tests/test_app/templates/admin/login.html b/tests/test_app/templates/admin/login.html
new file mode 100644
index 00000000..48d3096e
--- /dev/null
+++ b/tests/test_app/templates/admin/login.html
@@ -0,0 +1,6 @@
+{% extends "admin/login.html" %}
+
+{% block content %}
+{{ block.super }}
+<script>document.getElementById("id_username").value = "admin"; document.getElementById("id_password").value = "password";</script>
+{% endblock %}
diff --git a/tests/test_app/templates/bootstrap_form.html b/tests/test_app/templates/bootstrap_form.html
index 22ac51d1..e9e6738d 100644
--- a/tests/test_app/templates/bootstrap_form.html
+++ b/tests/test_app/templates/bootstrap_form.html
@@ -1,4 +1,4 @@
-{% load static %} {% load reactpy %}
+{% load static %} {% load reactpy %} {% load django_bootstrap5 %}
 <!DOCTYPE html>
 <html lang="en">
 
diff --git a/tests/test_app/templates/database_backed_form.html b/tests/test_app/templates/model_form.html
similarity index 92%
rename from tests/test_app/templates/database_backed_form.html
rename to tests/test_app/templates/model_form.html
index 611b3293..560452e0 100644
--- a/tests/test_app/templates/database_backed_form.html
+++ b/tests/test_app/templates/model_form.html
@@ -17,7 +17,7 @@
 </head>
 
 <body>
-    <h1>ReactPy Database Form Test Page</h1>
+    <h1>ReactPy Model Form Test Page</h1>
     <hr>
     {% component "test_app.forms.components.database_backed_form" %}
     <hr>
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index 81a8eabf..906ac016 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -4,12 +4,12 @@
 from time import sleep
 
 import pytest
-from playwright.sync_api import TimeoutError
+from playwright.sync_api import TimeoutError, expect
 
 from reactpy_django.models import ComponentSession
 from reactpy_django.utils import strtobool
 
-from .utils import GITHUB_ACTIONS, PlaywrightTestCase
+from .utils import GITHUB_ACTIONS, PlaywrightTestCase, navigate_to_page
 
 CLICK_DELAY = 250 if strtobool(GITHUB_ACTIONS) else 25  # Delay in miliseconds.
 
@@ -579,3 +579,223 @@ def test_offline_components(self):
         self._server_process.join()
         self.page.wait_for_selector("div:not([hidden]) > #offline")
         assert self.page.query_selector("div[hidden] > #online") is not None
+
+
+class FormTests(PlaywrightTestCase):
+    def test_basic_form(self):
+        navigate_to_page(self, "/form/")
+
+        try:
+            from test_app.models import TodoItem
+
+            os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"] = "true"
+
+            if TodoItem.objects.count() == 0:
+                TodoItem(done=False, text="First").save()
+                TodoItem(done=True, text="Second").save()
+                TodoItem(done=False, text="Third").save()
+        finally:
+            os.environ.pop("DJANGO_ALLOW_ASYNC_UNSAFE")
+
+        self.page.wait_for_selector("form")
+        self.page.wait_for_selector("#id_boolean_field")
+        self.page.wait_for_selector("#id_char_field")
+        self.page.wait_for_selector("#id_choice_field")
+        self.page.wait_for_selector("#id_date_field")
+        self.page.wait_for_selector("#id_date_time_field")
+        self.page.wait_for_selector("#id_decimal_field")
+        self.page.wait_for_selector("#id_duration_field")
+        self.page.wait_for_selector("#id_email_field")
+        self.page.wait_for_selector("#id_file_path_field")
+        self.page.wait_for_selector("#id_float_field")
+        self.page.wait_for_selector("#id_generic_ip_address_field")
+        self.page.wait_for_selector("#id_integer_field")
+        self.page.wait_for_selector("#id_float_field")
+        self.page.wait_for_selector("#id_json_field")
+        self.page.wait_for_selector("#id_multiple_choice_field")
+        self.page.wait_for_selector("#id_null_boolean_field")
+        self.page.wait_for_selector("#id_regex_field")
+        self.page.wait_for_selector("#id_slug_field")
+        self.page.wait_for_selector("#id_time_field")
+        self.page.wait_for_selector("#id_typed_choice_field")
+        self.page.wait_for_selector("#id_typed_multiple_choice_field")
+        self.page.wait_for_selector("#id_url_field")
+        self.page.wait_for_selector("#id_uuid_field")
+        self.page.wait_for_selector("#id_combo_field")
+        self.page.wait_for_selector("#id_password_field")
+        self.page.wait_for_selector("#id_model_choice_field")
+        self.page.wait_for_selector("#id_model_multiple_choice_field")
+
+        sleep(1)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+        self.page.wait_for_selector(".errorlist")
+
+        # Submitting an empty form should result in 22 error elements.
+        # The number of errors may change if/when new test form elements are created.
+        assert len(self.page.query_selector_all(".errorlist")) == 22
+
+        # Fill out the form
+        self.page.wait_for_selector("#id_boolean_field").click(delay=CLICK_DELAY)
+        expect(self.page.locator("#id_boolean_field")).to_be_checked()
+
+        self.page.locator("#id_char_field").type("test", delay=CLICK_DELAY)
+        self.page.locator("#id_choice_field").select_option("2")
+        self.page.locator("#id_date_field").type("2021-01-01", delay=CLICK_DELAY)
+        self.page.locator("#id_date_time_field").type("2021-01-01 01:01:00", delay=CLICK_DELAY)
+        self.page.locator("#id_decimal_field").type("0.123", delay=CLICK_DELAY)
+        self.page.locator("#id_duration_field").type("1", delay=CLICK_DELAY)
+        self.page.locator("#id_email_field").type("test@example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_file_path_field").select_option("manage.py")
+        self.page.locator("#id_float_field").type("1.2345", delay=CLICK_DELAY)
+        self.page.locator("#id_generic_ip_address_field").type("127.0.0.1", delay=CLICK_DELAY)
+        self.page.locator("#id_integer_field").type("123", delay=CLICK_DELAY)
+        self.page.locator("#id_json_field").clear()
+        self.page.locator("#id_json_field").type('{"key": "value"}', delay=CLICK_DELAY)
+        self.page.locator("#id_multiple_choice_field").select_option(["2", "3"])
+        self.page.locator("#id_null_boolean_field").select_option("false")
+        self.page.locator("#id_regex_field").type("12", delay=CLICK_DELAY)
+        self.page.locator("#id_slug_field").type("my-slug-text", delay=CLICK_DELAY)
+        self.page.locator("#id_time_field").type("01:01:00", delay=CLICK_DELAY)
+        self.page.locator("#id_typed_choice_field").select_option("2")
+        self.page.locator("#id_typed_multiple_choice_field").select_option(["1", "2"])
+        self.page.locator("#id_url_field").type("http://example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_uuid_field").type("550e8400-e29b-41d4-a716-446655440000", delay=CLICK_DELAY)
+        self.page.locator("#id_combo_field").type("test@example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_password_field").type("password", delay=CLICK_DELAY)
+
+        model_choice_field_options = self.page.query_selector_all("#id_model_multiple_choice_field option")
+        model_choice_field_values: list[str] = [option.get_attribute("value") for option in model_choice_field_options]
+        self.page.locator("#id_model_choice_field").select_option(model_choice_field_values[0])
+        self.page.locator("#id_model_multiple_choice_field").select_option([
+            model_choice_field_values[1],
+            model_choice_field_values[2],
+        ])
+
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # Wait for one of the error messages to disappear (indicating that the form has been re-rendered)
+        expect(self.page.locator(".errorlist").all()[0]).not_to_be_attached()
+        # Make sure no errors remain
+        assert len(self.page.query_selector_all(".errorlist")) == 0
+
+    def test_bootstrap_form(self):
+        navigate_to_page(self, "/form/bootstrap/")
+
+        try:
+            from test_app.models import TodoItem
+
+            os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"] = "true"
+
+            if TodoItem.objects.count() == 0:
+                TodoItem(done=False, text="First").save()
+                TodoItem(done=True, text="Second").save()
+                TodoItem(done=False, text="Third").save()
+        finally:
+            os.environ.pop("DJANGO_ALLOW_ASYNC_UNSAFE")
+
+        self.page.wait_for_selector("form")
+        self.page.wait_for_selector("#id_boolean_field")
+        self.page.wait_for_selector("#id_char_field")
+        self.page.wait_for_selector("#id_choice_field")
+        self.page.wait_for_selector("#id_date_field")
+        self.page.wait_for_selector("#id_date_time_field")
+        self.page.wait_for_selector("#id_decimal_field")
+        self.page.wait_for_selector("#id_duration_field")
+        self.page.wait_for_selector("#id_email_field")
+        self.page.wait_for_selector("#id_file_path_field")
+        self.page.wait_for_selector("#id_float_field")
+        self.page.wait_for_selector("#id_generic_ip_address_field")
+        self.page.wait_for_selector("#id_integer_field")
+        self.page.wait_for_selector("#id_float_field")
+        self.page.wait_for_selector("#id_json_field")
+        self.page.wait_for_selector("#id_multiple_choice_field")
+        self.page.wait_for_selector("#id_null_boolean_field")
+        self.page.wait_for_selector("#id_regex_field")
+        self.page.wait_for_selector("#id_slug_field")
+        self.page.wait_for_selector("#id_time_field")
+        self.page.wait_for_selector("#id_typed_choice_field")
+        self.page.wait_for_selector("#id_typed_multiple_choice_field")
+        self.page.wait_for_selector("#id_url_field")
+        self.page.wait_for_selector("#id_uuid_field")
+        self.page.wait_for_selector("#id_combo_field")
+        self.page.wait_for_selector("#id_password_field")
+        self.page.wait_for_selector("#id_model_choice_field")
+        self.page.wait_for_selector("#id_model_multiple_choice_field")
+
+        sleep(1)
+        self.page.wait_for_selector("button[type=submit]").click(delay=CLICK_DELAY)
+        self.page.wait_for_selector(".invalid-feedback")
+
+        # Submitting an empty form should result in 22 error elements.
+        # The number of errors may change if/when new test form elements are created.
+        assert len(self.page.query_selector_all(".invalid-feedback")) == 22
+
+        # Fill out the form
+        self.page.wait_for_selector("#id_boolean_field").click(delay=CLICK_DELAY)
+        expect(self.page.locator("#id_boolean_field")).to_be_checked()
+
+        self.page.locator("#id_char_field").type("test", delay=CLICK_DELAY)
+        self.page.locator("#id_choice_field").select_option("2")
+        self.page.locator("#id_date_field").type("2021-01-01", delay=CLICK_DELAY)
+        self.page.locator("#id_date_time_field").type("2021-01-01 01:01:00", delay=CLICK_DELAY)
+        self.page.locator("#id_decimal_field").type("0.123", delay=CLICK_DELAY)
+        self.page.locator("#id_duration_field").type("1", delay=CLICK_DELAY)
+        self.page.locator("#id_email_field").type("test@example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_file_path_field").select_option("manage.py")
+        self.page.locator("#id_float_field").type("1.2345", delay=CLICK_DELAY)
+        self.page.locator("#id_generic_ip_address_field").type("127.0.0.1", delay=CLICK_DELAY)
+        self.page.locator("#id_integer_field").type("123", delay=CLICK_DELAY)
+        self.page.locator("#id_json_field").clear()
+        self.page.locator("#id_json_field").type('{"key": "value"}', delay=CLICK_DELAY)
+        self.page.locator("#id_multiple_choice_field").select_option(["2", "3"])
+        self.page.locator("#id_null_boolean_field").select_option("false")
+        self.page.locator("#id_regex_field").type("12", delay=CLICK_DELAY)
+        self.page.locator("#id_slug_field").type("my-slug-text", delay=CLICK_DELAY)
+        self.page.locator("#id_time_field").type("01:01:00", delay=CLICK_DELAY)
+        self.page.locator("#id_typed_choice_field").select_option("2")
+        self.page.locator("#id_typed_multiple_choice_field").select_option(["1", "2"])
+        self.page.locator("#id_url_field").type("http://example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_uuid_field").type("550e8400-e29b-41d4-a716-446655440000", delay=CLICK_DELAY)
+        self.page.locator("#id_combo_field").type("test@example.com", delay=CLICK_DELAY)
+        self.page.locator("#id_password_field").type("password", delay=CLICK_DELAY)
+
+        model_choice_field_options = self.page.query_selector_all("#id_model_multiple_choice_field option")
+        model_choice_field_values: list[str] = [option.get_attribute("value") for option in model_choice_field_options]
+        self.page.locator("#id_model_choice_field").select_option(model_choice_field_values[0])
+        self.page.locator("#id_model_multiple_choice_field").select_option([
+            model_choice_field_values[1],
+            model_choice_field_values[2],
+        ])
+
+        self.page.wait_for_selector("button[type=submit]").click(delay=CLICK_DELAY)
+
+        # Wait for one of the error messages to disappear (indicating that the form has been re-rendered)
+        expect(self.page.locator(".invalid-feedback").all()[0]).not_to_be_attached()
+        # Make sure no errors remain
+        assert len(self.page.query_selector_all(".invalid-feedback")) == 0
+
+    def test_model_form(self):
+        navigate_to_page(self, "/form/model/")
+
+        self.page.wait_for_selector("form")
+
+        sleep(1)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+        self.page.wait_for_selector(".errorlist")
+
+        # Submitting an empty form should result in 1 error element.
+        assert len(self.page.query_selector_all(".errorlist")) == 1
+
+        # Fill out the form
+        self.page.locator("#id_text").type("test", delay=CLICK_DELAY)
+
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # Wait for the error message to disappear (indicating that the form has been re-rendered)
+        expect(self.page.locator(".errorlist").all()[0]).not_to_be_attached()
+
+        # Make sure no errors remain
+        assert len(self.page.query_selector_all(".errorlist")) == 0
+
+        # Make sure text field is empty
+        assert self.page.locator("#id_text").get_attribute("value") == ""
diff --git a/tests/test_app/tests/utils.py b/tests/test_app/tests/utils.py
index 64f0f60d..c96cc23a 100644
--- a/tests/test_app/tests/utils.py
+++ b/tests/test_app/tests/utils.py
@@ -87,3 +87,9 @@ def _post_teardown(self):
         """Handled manually in `tearDownClass` to prevent TransactionTestCase from doing
         database flushing. This is needed to prevent a `SynchronousOnlyOperation` from
         occurring due to a bug within `ChannelsLiveServerTestCase`."""
+
+
+def navigate_to_page(self: PlaywrightTestCase, path: str):
+    """Redirect the page's URL to the given link, if the page is not already there."""
+    if self.page.url != path:
+        self.page.goto(f"http://{self.host}:{self._port}/{path.lstrip('/')}")

From 208ec17949f684fc2335955fecc35fccbc136321 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:47:02 -0800
Subject: [PATCH 38/50] Add readme

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 89d1fb11..f60e7a2d 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,7 @@
 -   [Multiple root components](https://reactive-python.github.io/reactpy-django/latest/reference/template-tag/)
 -   [Cross-process communication/signaling](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-channel-layer)
 -   [Django view to ReactPy component conversion](https://reactive-python.github.io/reactpy-django/latest/reference/components/#view-to-component)
+-   [Django form to ReactPy component conversion](https://reactive-python.github.io/reactpy-django/latest/reference/components/#django-form)
 -   [Django static file access](https://reactive-python.github.io/reactpy-django/latest/reference/components/#django-css)
 -   [Django database access](https://reactive-python.github.io/reactpy-django/latest/reference/hooks/#use-query)
 

From 602be6bcd0a924a4a1282fdec416a878a7c6137d Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 16:53:16 -0800
Subject: [PATCH 39/50] Try dynamically selecting options for file_path_field

---
 tests/test_app/tests/test_components.py | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index 906ac016..ecb2444b 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -645,7 +645,9 @@ def test_basic_form(self):
         self.page.locator("#id_decimal_field").type("0.123", delay=CLICK_DELAY)
         self.page.locator("#id_duration_field").type("1", delay=CLICK_DELAY)
         self.page.locator("#id_email_field").type("test@example.com", delay=CLICK_DELAY)
-        self.page.locator("#id_file_path_field").select_option("manage.py")
+        file_path_field_options = self.page.query_selector_all("#id_file_path_field option")
+        file_path_field_values: list[str] = [option.get_attribute("value") for option in file_path_field_options]
+        self.page.locator("#id_file_path_field").select_option(file_path_field_values[1])
         self.page.locator("#id_float_field").type("1.2345", delay=CLICK_DELAY)
         self.page.locator("#id_generic_ip_address_field").type("127.0.0.1", delay=CLICK_DELAY)
         self.page.locator("#id_integer_field").type("123", delay=CLICK_DELAY)
@@ -662,7 +664,6 @@ def test_basic_form(self):
         self.page.locator("#id_uuid_field").type("550e8400-e29b-41d4-a716-446655440000", delay=CLICK_DELAY)
         self.page.locator("#id_combo_field").type("test@example.com", delay=CLICK_DELAY)
         self.page.locator("#id_password_field").type("password", delay=CLICK_DELAY)
-
         model_choice_field_options = self.page.query_selector_all("#id_model_multiple_choice_field option")
         model_choice_field_values: list[str] = [option.get_attribute("value") for option in model_choice_field_options]
         self.page.locator("#id_model_choice_field").select_option(model_choice_field_values[0])
@@ -741,7 +742,9 @@ def test_bootstrap_form(self):
         self.page.locator("#id_decimal_field").type("0.123", delay=CLICK_DELAY)
         self.page.locator("#id_duration_field").type("1", delay=CLICK_DELAY)
         self.page.locator("#id_email_field").type("test@example.com", delay=CLICK_DELAY)
-        self.page.locator("#id_file_path_field").select_option("manage.py")
+        file_path_field_options = self.page.query_selector_all("#id_file_path_field option")
+        file_path_field_values: list[str] = [option.get_attribute("value") for option in file_path_field_options]
+        self.page.locator("#id_file_path_field").select_option(file_path_field_values[1])
         self.page.locator("#id_float_field").type("1.2345", delay=CLICK_DELAY)
         self.page.locator("#id_generic_ip_address_field").type("127.0.0.1", delay=CLICK_DELAY)
         self.page.locator("#id_integer_field").type("123", delay=CLICK_DELAY)

From 1d3d0955dda17476ad719748394318a90c200fa3 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 21:50:11 -0800
Subject: [PATCH 40/50] Update todo comments

---
 src/reactpy_django/forms/components.py | 1 -
 src/reactpy_django/forms/transforms.py | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 7b7daefa..4f141902 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -32,7 +32,6 @@
 )
 
 
-# TODO: Create types for AsyncFormEvent and FormEvent
 @component
 def _django_form(
     form: type[Form | ModelForm],
diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 37017e9a..7a9e84f4 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -1,3 +1,4 @@
+# TODO: Almost everything in this module should be moved to `reactpy.utils._mutate_vdom()`.
 from __future__ import annotations
 
 from typing import TYPE_CHECKING, Any
@@ -7,8 +8,6 @@
 if TYPE_CHECKING:
     from reactpy.core.types import VdomDict
 
-# TODO: Move all this logic to `reactpy.utils._mutate_vdom()` and remove this file.
-
 
 def convert_html_props_to_reactjs(vdom_tree: VdomDict) -> VdomDict:
     """Transformation that standardizes the prop names to be used in the component."""
@@ -114,7 +113,8 @@ def _do_nothing_event(*args, **kwargs):
     """A placeholder event function that does nothing."""
 
 
-# TODO: Create some kind of script that will generate the react docs copy-pasta during build time, rather than hardcoding it.
+# TODO: After the bulk of this file to ReactPy core, we should create some kind of script that will
+# auto-generate this into a file dump. The current implementation of manually copy-pasting it isn't ideal.
 # https://react.dev/reference/react-dom/components/common#common-props
 SPECIAL_PROPS = r"""
 children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like <div><span /></div>.

From b6fb5c43133f8199cb7d3101025719c9985e7bf4 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:04:38 -0800
Subject: [PATCH 41/50] Increase sleep on async relational query test

---
 tests/test_app/components.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test_app/components.py b/tests/test_app/components.py
index ad13ac30..38b3f552 100644
--- a/tests/test_app/components.py
+++ b/tests/test_app/components.py
@@ -223,7 +223,7 @@ async def async_get_or_create_relational_parent():
 async def async_get_relational_parent_query():
     # Sleep to avoid race conditions in the test
     # Also serves as a good way of testing whether things are truly async
-    await asyncio.sleep(2)
+    await asyncio.sleep(3)
     return await async_get_or_create_relational_parent()
 
 

From 608acee1969deca735a5e60c5f4bcdb49e78e88b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Sun, 8 Dec 2024 22:04:57 -0800
Subject: [PATCH 42/50] Add another check in query tests

---
 tests/test_app/tests/test_components.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index ecb2444b..d744ddfa 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -73,9 +73,11 @@ def test_authorized_user(self):
         self.page.wait_for_selector("#authorized-user")
 
     def test_relational_query(self):
+        self.page.locator("#relational-query").wait_for()
         self.page.locator("#relational-query[data-success=true]").wait_for()
 
     def test_async_relational_query(self):
+        self.page.locator("#async-relational-query").wait_for()
         self.page.locator("#async-relational-query[data-success=true]").wait_for()
 
     def test_use_query_and_mutation(self):

From 3f834ca302b6a129f1849e2f4d7d84f6385b875d Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Mon, 9 Dec 2024 01:55:15 -0800
Subject: [PATCH 43/50] Fix default on admin middleware

---
 tests/test_app/middleware.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/test_app/middleware.py b/tests/test_app/middleware.py
index ff40c7c6..b2088d63 100644
--- a/tests/test_app/middleware.py
+++ b/tests/test_app/middleware.py
@@ -5,7 +5,7 @@
 
 class AutoCreateAdminMiddleware:
     async_capable = True
-    sync_capable = True
+    sync_capable = False
 
     def __init__(self, get_response):
         from django.contrib.auth.models import User

From 73967b42ddd1e273ef091350f0ccfdf5bb55ad8e Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:07:37 -0800
Subject: [PATCH 44/50] New ensure_async util function

---
 src/reactpy_django/forms/components.py | 22 +++++-----------------
 src/reactpy_django/utils.py            | 19 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 4f141902..f0be5398 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -1,6 +1,5 @@
 from __future__ import annotations
 
-import asyncio
 from pathlib import Path
 from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from uuid import uuid4
@@ -20,6 +19,7 @@
 )
 from reactpy_django.forms.utils import convert_boolean_fields, convert_multiple_choice_fields
 from reactpy_django.types import AsyncFormEvent, FormEventData, SyncFormEvent
+from reactpy_django.utils import ensure_async
 
 if TYPE_CHECKING:
     from collections.abc import Sequence
@@ -80,15 +80,9 @@ async def render_form():
             await database_sync_to_async(initialized_form.full_clean)()
             success = not initialized_form.errors.as_data()
             if success and on_success:
-                if asyncio.iscoroutinefunction(on_success):
-                    await on_success(form_event)
-                else:
-                    on_success(form_event)
+                await ensure_async(on_success)(form_event)
             if not success and on_error:
-                if asyncio.iscoroutinefunction(on_error):
-                    await on_error(form_event)
-                else:
-                    on_error(form_event)
+                await ensure_async(on_error)(form_event)
             if success and auto_save and isinstance(initialized_form, ModelForm):
                 await database_sync_to_async(initialized_form.save)()
                 set_submitted_data(None)
@@ -109,10 +103,7 @@ async def on_submit_callback(new_data: dict[str, Any]):
             new_form_event = FormEventData(
                 form=initialized_form, submitted_data=new_data, set_submitted_data=set_submitted_data
             )
-            if asyncio.iscoroutinefunction(on_receive_data):
-                await on_receive_data(new_form_event)
-            else:
-                on_receive_data(new_form_event)
+            await ensure_async(on_receive_data)(new_form_event)
 
         if submitted_data != new_data:
             set_submitted_data(new_data)
@@ -120,10 +111,7 @@ async def on_submit_callback(new_data: dict[str, Any]):
     async def _on_change(_event):
         """Event that exist solely to allow the user to detect form changes."""
         if on_change:
-            if asyncio.iscoroutinefunction(on_change):
-                await on_change(form_event)
-            else:
-                on_change(form_event)
+            await ensure_async(on_change)(form_event)
 
     if not rendered_form:
         return None
diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index 6d8b150d..fdd364f1 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -13,7 +13,7 @@
 from fnmatch import fnmatch
 from importlib import import_module
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable
+from typing import TYPE_CHECKING, Any, Awaitable, Callable
 from uuid import UUID, uuid4
 
 import dill
@@ -549,3 +549,20 @@ async def __aiter__(self):
         finally:
             if file_opened:
                 file_handle.close()
+
+
+def ensure_async(
+    func: Callable[FuncParams, Inferred], *, thread_sensitive: bool = True
+) -> Callable[FuncParams, Awaitable[Inferred]]:
+    """Ensure the provided function is always an async coroutine. If the provided function is
+    not async, it will be adapted."""
+
+    @wraps(func)
+    def wrapper(*args, **kwargs):
+        return (
+            func(*args, **kwargs)
+            if inspect.iscoroutinefunction(func)
+            else database_sync_to_async(func, thread_sensitive=thread_sensitive)(*args, **kwargs)
+        )
+
+    return wrapper

From e32fc670c3fb07c0b2c4b5bab89d28a472d1255f Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Mon, 9 Dec 2024 13:08:45 -0800
Subject: [PATCH 45/50] fix bad import

---
 src/reactpy_django/utils.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index fdd364f1..88272867 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -30,8 +30,8 @@
 from django.templatetags.static import static
 from django.utils.encoding import smart_str
 from reactpy import vdom_to_html
-from reactpy.backend.hooks import ConnectionContext
 from reactpy.backend.types import Connection, Location
+from reactpy.core.hooks import ConnectionContext
 from reactpy.core.layout import Layout
 
 from reactpy_django.exceptions import (

From 3ed84db2e6697c46b480533d5e3d5421bdbacae6 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:30:27 -0800
Subject: [PATCH 46/50] Add thread_sensitive arg to ensure_async func

---
 docs/src/reference/components.md       | 3 ++-
 docs/src/reference/hooks.md            | 4 ++--
 src/reactpy_django/components.py       | 7 ++++++-
 src/reactpy_django/forms/components.py | 9 +++++----
 src/reactpy_django/hooks.py            | 4 ++--
 src/reactpy_django/utils.py            | 4 ++++
 6 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/docs/src/reference/components.md b/docs/src/reference/components.md
index bbf12c58..26feda67 100644
--- a/docs/src/reference/components.md
+++ b/docs/src/reference/components.md
@@ -409,11 +409,12 @@ Compatible with both [standard Django forms](https://docs.djangoproject.com/en/s
     | `#!python on_success` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is successfully submitted. | `#!python None` |
     | `#!python on_error` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form submission fails. | `#!python None` |
     | `#!python on_receive_data` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called before newly submitted form data is rendered. | `#!python None` |
-    | `#!python on_change` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when the form is changed. | `#!python None` |
+    | `#!python on_change` | `#!python AsyncFormEvent | SyncFormEvent | None` | A callback function that is called when a form field is modified by the user. | `#!python None` |
     | `#!python auto_save` | `#!python bool` | If `#!python True`, the form will automatically call `#!python save` on successful submission of a `#!python ModelForm`. This has no effect on regular `#!python Form` instances. | `#!python True` |
     | `#!python extra_props` | `#!python dict[str, Any] | None` | Additional properties to add to the `#!html <form>` element. | `#!python None` |
     | `#!python extra_transforms` | `#!python Sequence[Callable[[VdomDict], Any]] | None` | A list of functions that transforms the newly generated VDOM. The functions will be repeatedly called on each VDOM node. | `#!python None` |
     | `#!python form_template` | `#!python str | None` | The template to use for the form. If `#!python None`, Django's default template is used. | `#!python None` |
+    | `#!python thread_sensitive` | `#!python bool` | Whether to run event callback functions in thread sensitive mode. This mode only applies to sync functions, and is turned on by default due to Django ORM limitations. | `#!python True` |
     | `#!python top_children` | `#!python Sequence[Any]` | Additional elements to add to the top of the form. | `#!python tuple` |
     | `#!python bottom_children` | `#!python Sequence[Any]` | Additional elements to add to the bottom of the form. | `#!python tuple` |
     | `#!python key` | `#!python Key | None` | A key to uniquely identify this component which is unique amongst a component's immediate siblings. | `#!python None` |
diff --git a/docs/src/reference/hooks.md b/docs/src/reference/hooks.md
index 65bf1727..5826a7b0 100644
--- a/docs/src/reference/hooks.md
+++ b/docs/src/reference/hooks.md
@@ -46,7 +46,7 @@ Query functions can be sync or async.
     | --- | --- | --- | --- |
     | `#!python query` | `#!python Callable[FuncParams, Awaitable[Inferred]] | Callable[FuncParams, Inferred]` | A function that executes a query and returns some data. | N/A |
     | `#!python kwargs` | `#!python dict[str, Any] | None` | Keyword arguments to passed into the `#!python query` function. | `#!python None` |
-    | `#!python thread_sensitive` | `#!python bool` | Whether to run your query function in thread sensitive mode. This mode only applies to sync query functions, and is turned on by default due to Django ORM limitations. | `#!python True` |
+    | `#!python thread_sensitive` | `#!python bool` | Whether to run your query function in thread sensitive mode. This setting only applies to sync functions, and is turned on by default due to Django ORM limitations. | `#!python True` |
     | `#!python postprocessor` | `#!python AsyncPostprocessor | SyncPostprocessor | None` | A callable that processes the query `#!python data` before it is returned. The first argument of postprocessor function must be the query `#!python data`. All proceeding arguments are optional `#!python postprocessor_kwargs`. This postprocessor function must return the modified `#!python data`. | `#!python None` |
     | `#!python postprocessor_kwargs` | `#!python dict[str, Any] | None` | Keyworded arguments passed into the `#!python postprocessor` function. | `#!python None` |
 
@@ -188,7 +188,7 @@ Mutation functions can be sync or async.
     | Name | Type | Description | Default |
     | --- | --- | --- | --- |
     | `#!python mutation` | `#!python Callable[FuncParams, bool | None] | Callable[FuncParams, Awaitable[bool | None]]` | A callable that performs Django ORM create, update, or delete functionality. If this function returns `#!python False`, then your `#!python refetch` function will not be used. | N/A |
-    | `#!python thread_sensitive` | `#!python bool` | Whether to run the mutation in thread sensitive mode. This mode only applies to sync mutation functions, and is turned on by default due to Django ORM limitations. | `#!python True` |
+    | `#!python thread_sensitive` | `#!python bool` | Whether to run the mutation in thread sensitive mode. This setting only applies to sync functions, and is turned on by default due to Django ORM limitations. | `#!python True` |
     | `#!python refetch` | `#!python Callable[..., Any] | Sequence[Callable[..., Any]] | None` | A query function (the function you provide to your `#!python use_query` hook) or a sequence of query functions that need a `#!python refetch` if the mutation succeeds. This is useful for refreshing data after a mutation has been performed. | `#!python None` |
 
     <font size="4">**Returns**</font>
diff --git a/src/reactpy_django/components.py b/src/reactpy_django/components.py
index d0db240c..7e821c1c 100644
--- a/src/reactpy_django/components.py
+++ b/src/reactpy_django/components.py
@@ -131,6 +131,7 @@ def django_form(
     extra_props: dict[str, Any] | None = None,
     extra_transforms: Sequence[Callable[[VdomDict], Any]] | None = None,
     form_template: str | None = None,
+    thread_sensitive: bool = True,
     top_children: Sequence[Any] = (),
     bottom_children: Sequence[Any] = (),
     key: Key | None = None,
@@ -144,13 +145,16 @@ def django_form(
         on_success: A callback function that is called when the form is successfully submitted.
         on_error: A callback function that is called when the form submission fails.
         on_receive_data: A callback function that is called before newly submitted form data is rendered.
-        on_change: A callback function that is called when the form is changed.
+        on_change: A callback function that is called when a form field is modified by the user.
         auto_save: If `True`, the form will automatically call `save` on successful submission of \
             a `ModelForm`. This has no effect on regular `Form` instances.
         extra_props: Additional properties to add to the `html.form` element.
         extra_transforms: A list of functions that transforms the newly generated VDOM. \
             The functions will be repeatedly called on each VDOM node.
         form_template: The template to use for the form. If `None`, Django's default template is used.
+        thread_sensitive: Whether to run event callback functions in thread sensitive mode. \
+            This mode only applies to sync functions, and is turned on by default due to Django \
+            ORM limitations.
         top_children: Additional elements to add to the top of the form.
         bottom_children: Additional elements to add to the bottom of the form.
         key: A key to uniquely identify this component which is unique amongst a component's \
@@ -167,6 +171,7 @@ def django_form(
         extra_props=extra_props or {},
         extra_transforms=extra_transforms or [],
         form_template=form_template,
+        thread_sensitive=thread_sensitive,
         top_children=top_children,
         bottom_children=bottom_children,
         key=key,
diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index f0be5398..157bed23 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -43,6 +43,7 @@ def _django_form(
     extra_props: dict,
     extra_transforms: Sequence[Callable[[VdomDict], Any]],
     form_template: str | None,
+    thread_sensitive: bool,
     top_children: Sequence,
     bottom_children: Sequence,
 ):
@@ -80,9 +81,9 @@ async def render_form():
             await database_sync_to_async(initialized_form.full_clean)()
             success = not initialized_form.errors.as_data()
             if success and on_success:
-                await ensure_async(on_success)(form_event)
+                await ensure_async(on_success, thread_sensitive=thread_sensitive)(form_event)
             if not success and on_error:
-                await ensure_async(on_error)(form_event)
+                await ensure_async(on_error, thread_sensitive=thread_sensitive)(form_event)
             if success and auto_save and isinstance(initialized_form, ModelForm):
                 await database_sync_to_async(initialized_form.save)()
                 set_submitted_data(None)
@@ -103,7 +104,7 @@ async def on_submit_callback(new_data: dict[str, Any]):
             new_form_event = FormEventData(
                 form=initialized_form, submitted_data=new_data, set_submitted_data=set_submitted_data
             )
-            await ensure_async(on_receive_data)(new_form_event)
+            await ensure_async(on_receive_data, thread_sensitive=thread_sensitive)(new_form_event)
 
         if submitted_data != new_data:
             set_submitted_data(new_data)
@@ -111,7 +112,7 @@ async def on_submit_callback(new_data: dict[str, Any]):
     async def _on_change(_event):
         """Event that exist solely to allow the user to detect form changes."""
         if on_change:
-            await ensure_async(on_change)(form_event)
+            await ensure_async(on_change, thread_sensitive=thread_sensitive)(form_event)
 
     if not rendered_form:
         return None
diff --git a/src/reactpy_django/hooks.py b/src/reactpy_django/hooks.py
index 9f76902f..ba3642f6 100644
--- a/src/reactpy_django/hooks.py
+++ b/src/reactpy_django/hooks.py
@@ -104,7 +104,7 @@ def use_query(
     Kwargs:
         kwargs: Keyword arguments to passed into the `query` function.
         thread_sensitive: Whether to run the query in thread sensitive mode. \
-            This mode only applies to sync query functions, and is turned on by default \
+            This setting only applies to sync functions, and is turned on by default \
             due to Django ORM limitations.
         postprocessor: A callable that processes the query `data` before it is returned. \
             The first argument of postprocessor function must be the query `data`. All \
@@ -219,7 +219,7 @@ def use_mutation(
 
     Kwargs:
         thread_sensitive: Whether to run the mutation in thread sensitive mode. \
-            This mode only applies to sync mutation functions, and is turned on by default \
+            This setting only applies to sync functions, and is turned on by default \
             due to Django ORM limitations.
         refetch:  A query function (the function you provide to your `use_query` \
             hook) or a sequence of query functions that need a `refetch` if the \
diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index 88272867..77dec277 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -11,6 +11,7 @@
 from concurrent.futures import ThreadPoolExecutor
 from copy import deepcopy
 from fnmatch import fnmatch
+from functools import wraps
 from importlib import import_module
 from pathlib import Path
 from typing import TYPE_CHECKING, Any, Awaitable, Callable
@@ -47,6 +48,9 @@
     from django.views import View
     from reactpy.types import ComponentConstructor
 
+    from reactpy_django.types import FuncParams, Inferred
+
+
 _logger = logging.getLogger(__name__)
 _TAG_PATTERN = r"(?P<tag>component)"
 _PATH_PATTERN = r"""(?P<path>"[^"'\s]+"|'[^"'\s]+')"""

From 55daaa2031e08a9becc90e14281ff610c04fd83b Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Mon, 9 Dec 2024 16:40:12 -0800
Subject: [PATCH 47/50] Add new tests for form events

---
 tests/test_app/forms/components.py            | 74 +++++++++++++++++-
 tests/test_app/forms/forms.py                 |  6 +-
 tests/test_app/forms/urls.py                  |  2 +
 tests/test_app/forms/views.py                 |  8 ++
 .../test_app/templates/async_event_form.html  | 26 +++++++
 tests/test_app/templates/form.html            |  2 +-
 tests/test_app/templates/sync_event_form.html | 26 +++++++
 tests/test_app/tests/test_components.py       | 76 ++++++++++++++++++-
 8 files changed, 215 insertions(+), 5 deletions(-)
 create mode 100644 tests/test_app/templates/async_event_form.html
 create mode 100644 tests/test_app/templates/sync_event_form.html

diff --git a/tests/test_app/forms/components.py b/tests/test_app/forms/components.py
index e78cf36b..26ab8704 100644
--- a/tests/test_app/forms/components.py
+++ b/tests/test_app/forms/components.py
@@ -1,8 +1,8 @@
-from reactpy import component, html
+from reactpy import component, hooks, html
 
 from reactpy_django.components import django_form
 
-from .forms import BasicForm, DatabaseBackedForm
+from .forms import BasicForm, DatabaseBackedForm, EventForm
 
 
 @component
@@ -22,3 +22,73 @@ def bootstrap_form():
 @component
 def database_backed_form():
     return django_form(DatabaseBackedForm, bottom_children=(html.input({"type": "submit"}),))
+
+
+@component
+def sync_event_form():
+    success, set_success = hooks.use_state(False)
+    error, set_error = hooks.use_state(False)
+    receive_data, set_receive_data = hooks.use_state(False)
+    change, set_change = hooks.use_state(False)
+
+    def on_success(event):
+        set_success(True)
+
+    def on_error(event):
+        set_error(True)
+
+    def on_receive_data(event):
+        set_receive_data(True)
+
+    def on_change(event):
+        set_change(True)
+
+    return django_form(
+        EventForm,
+        on_success=on_success,
+        on_error=on_error,
+        on_receive_data=on_receive_data,
+        on_change=on_change,
+        top_children=[
+            html.div({"id": "success", "data-value": success}, f"Success: {success}"),
+            html.div({"id": "error", "data-value": error}, f"Error: {error}"),
+            html.div({"id": "receive_data", "data-value": receive_data}, f"Receive Data: {receive_data}"),
+            html.div({"id": "change", "data-value": change}, f"Change: {change}"),
+        ],
+        bottom_children=[html.input({"type": "submit"})],
+    )
+
+
+@component
+def async_event_form():
+    success, set_success = hooks.use_state(False)
+    error, set_error = hooks.use_state(False)
+    receive_data, set_receive_data = hooks.use_state(False)
+    change, set_change = hooks.use_state(False)
+
+    async def on_success(event):
+        set_success(True)
+
+    async def on_error(event):
+        set_error(True)
+
+    async def on_receive_data(event):
+        set_receive_data(True)
+
+    async def on_change(event):
+        set_change(True)
+
+    return django_form(
+        EventForm,
+        on_success=on_success,
+        on_error=on_error,
+        on_receive_data=on_receive_data,
+        on_change=on_change,
+        top_children=[
+            html.div({"id": "success", "data-value": success}, f"Success: {success}"),
+            html.div({"id": "error", "data-value": error}, f"Error: {error}"),
+            html.div({"id": "receive_data", "data-value": receive_data}, f"Receive Data: {receive_data}"),
+            html.div({"id": "change", "data-value": change}, f"Change: {change}"),
+        ],
+        bottom_children=[html.input({"type": "submit"})],
+    )
diff --git a/tests/test_app/forms/forms.py b/tests/test_app/forms/forms.py
index fab8263b..6b8dedd6 100644
--- a/tests/test_app/forms/forms.py
+++ b/tests/test_app/forms/forms.py
@@ -7,7 +7,7 @@ class BasicForm(forms.Form):
     # Render one of every Django field type
     # https://docs.djangoproject.com/en/stable/ref/forms/fields/#field-types
     boolean_field = forms.BooleanField(label="boolean")
-    char_field = forms.CharField(label="chars", max_length=7)
+    char_field = forms.CharField(label="chars")
     choice_field = forms.ChoiceField(label="choice", choices=[("1", "One"), ("2", "Two")])
     date_field = forms.DateField(label="date")
     date_time_field = forms.DateTimeField(label="date time")
@@ -44,3 +44,7 @@ class DatabaseBackedForm(forms.ModelForm):
     class Meta:
         model = models.TodoItem
         fields = "__all__"
+
+
+class EventForm(forms.Form):
+    char_field = forms.CharField(label="chars")
diff --git a/tests/test_app/forms/urls.py b/tests/test_app/forms/urls.py
index 34cad0e9..ed93c587 100644
--- a/tests/test_app/forms/urls.py
+++ b/tests/test_app/forms/urls.py
@@ -6,4 +6,6 @@
     path("form/", views.form),
     path("form/bootstrap/", views.bootstrap_form),
     path("form/model/", views.model_form),
+    path("form/sync_event/", views.sync_event_form),
+    path("form/async_event/", views.async_event_form),
 ]
diff --git a/tests/test_app/forms/views.py b/tests/test_app/forms/views.py
index c49f1120..8ee7862f 100644
--- a/tests/test_app/forms/views.py
+++ b/tests/test_app/forms/views.py
@@ -11,3 +11,11 @@ def bootstrap_form(request):
 
 def model_form(request):
     return render(request, "model_form.html", {})
+
+
+def sync_event_form(request):
+    return render(request, "sync_event_form.html", {})
+
+
+def async_event_form(request):
+    return render(request, "async_event_form.html", {})
diff --git a/tests/test_app/templates/async_event_form.html b/tests/test_app/templates/async_event_form.html
new file mode 100644
index 00000000..ac98ade6
--- /dev/null
+++ b/tests/test_app/templates/async_event_form.html
@@ -0,0 +1,26 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Async Event Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.async_event_form" %}
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/templates/form.html b/tests/test_app/templates/form.html
index 67ae0074..749564b3 100644
--- a/tests/test_app/templates/form.html
+++ b/tests/test_app/templates/form.html
@@ -17,7 +17,7 @@
 </head>
 
 <body>
-    <h1>ReactPy Forms Test Page</h1>
+    <h1>ReactPy Form Test Page</h1>
     <hr>
     {% component "test_app.forms.components.basic_form" %}
     <hr>
diff --git a/tests/test_app/templates/sync_event_form.html b/tests/test_app/templates/sync_event_form.html
new file mode 100644
index 00000000..49badba2
--- /dev/null
+++ b/tests/test_app/templates/sync_event_form.html
@@ -0,0 +1,26 @@
+{% load static %} {% load reactpy %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
+    <title>ReactPy</title>
+    <style>
+        iframe {
+            width: 100%;
+            height: 45px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>ReactPy Sync Event Form Test Page</h1>
+    <hr>
+    {% component "test_app.forms.components.sync_event_form" %}
+    <hr>
+</body>
+
+</html>
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index d744ddfa..4c00b522 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -2,6 +2,7 @@
 import os
 import socket
 from time import sleep
+from uuid import uuid4
 
 import pytest
 from playwright.sync_api import TimeoutError, expect
@@ -782,6 +783,7 @@ def test_bootstrap_form(self):
     def test_model_form(self):
         navigate_to_page(self, "/form/model/")
 
+        uuid = uuid4().hex
         self.page.wait_for_selector("form")
 
         sleep(1)
@@ -792,8 +794,9 @@ def test_model_form(self):
         assert len(self.page.query_selector_all(".errorlist")) == 1
 
         # Fill out the form
-        self.page.locator("#id_text").type("test", delay=CLICK_DELAY)
+        self.page.locator("#id_text").type(uuid, delay=CLICK_DELAY)
 
+        # Submit the form
         self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
 
         # Wait for the error message to disappear (indicating that the form has been re-rendered)
@@ -803,4 +806,75 @@ def test_model_form(self):
         assert len(self.page.query_selector_all(".errorlist")) == 0
 
         # Make sure text field is empty
+        expect(self.page.locator("#id_text")).to_be_empty()
         assert self.page.locator("#id_text").get_attribute("value") == ""
+
+        # Check if `auto_save` created the TodoItem's database entry
+        try:
+            from test_app.models import TodoItem
+
+            os.environ["DJANGO_ALLOW_ASYNC_UNSAFE"] = "true"
+
+            assert TodoItem.objects.filter(text=uuid).exists()
+        finally:
+            os.environ.pop("DJANGO_ALLOW_ASYNC_UNSAFE")
+
+    def test_sync_form_events(self):
+        navigate_to_page(self, "/form/sync_event/")
+        self.page.wait_for_selector("form")
+
+        # Check initial state
+        self.page.wait_for_selector("#success[data-value='false']")
+        self.page.wait_for_selector("#error[data-value='false']")
+        self.page.wait_for_selector("#receive_data[data-value='false']")
+        self.page.wait_for_selector("#change[data-value='false']")
+
+        # Submit empty the form
+        sleep(1)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # The empty form was submitted, should result in an error
+        self.page.wait_for_selector("#success[data-value='false']")
+        self.page.wait_for_selector("#error[data-value='true']")
+        self.page.wait_for_selector("#receive_data[data-value='true']")
+        self.page.wait_for_selector("#change[data-value='false']")
+
+        # Fill out the form and re-submit
+        self.page.wait_for_selector("#id_char_field").type("test", delay=CLICK_DELAY)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # Form should have been successfully submitted
+        self.page.wait_for_selector("#success[data-value='true']")
+        self.page.wait_for_selector("#error[data-value='true']")
+        self.page.wait_for_selector("#receive_data[data-value='true']")
+        self.page.wait_for_selector("#change[data-value='true']")
+
+    def test_async_form_events(self):
+        navigate_to_page(self, "/form/async_event/")
+        self.page.wait_for_selector("form")
+
+        # Check initial state
+        self.page.wait_for_selector("#success[data-value='false']")
+        self.page.wait_for_selector("#error[data-value='false']")
+        self.page.wait_for_selector("#receive_data[data-value='false']")
+        self.page.wait_for_selector("#change[data-value='false']")
+
+        # Submit empty the form
+        sleep(1)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # The empty form was submitted, should result in an error
+        self.page.wait_for_selector("#success[data-value='false']")
+        self.page.wait_for_selector("#error[data-value='true']")
+        self.page.wait_for_selector("#receive_data[data-value='true']")
+        self.page.wait_for_selector("#change[data-value='false']")
+
+        # Fill out the form and re-submit
+        self.page.wait_for_selector("#id_char_field").type("test", delay=CLICK_DELAY)
+        self.page.wait_for_selector("input[type=submit]").click(delay=CLICK_DELAY)
+
+        # Form should have been successfully submitted
+        self.page.wait_for_selector("#success[data-value='true']")
+        self.page.wait_for_selector("#error[data-value='true']")
+        self.page.wait_for_selector("#receive_data[data-value='true']")
+        self.page.wait_for_selector("#change[data-value='true']")

From 5eb58182201493ea559da6938edc0f5ef0e4cd87 Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Tue, 10 Dec 2024 00:38:46 -0800
Subject: [PATCH 48/50] run formatter

---
 src/reactpy_django/utils.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/reactpy_django/utils.py b/src/reactpy_django/utils.py
index 77dec277..72fa5439 100644
--- a/src/reactpy_django/utils.py
+++ b/src/reactpy_django/utils.py
@@ -14,7 +14,7 @@
 from functools import wraps
 from importlib import import_module
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Awaitable, Callable
+from typing import TYPE_CHECKING, Any, Callable
 from uuid import UUID, uuid4
 
 import dill
@@ -43,7 +43,7 @@
 )
 
 if TYPE_CHECKING:
-    from collections.abc import Mapping, Sequence
+    from collections.abc import Awaitable, Mapping, Sequence
 
     from django.views import View
     from reactpy.types import ComponentConstructor

From 998041a35b4c93483a8c19a63f97b10a564a3c5e Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Tue, 10 Dec 2024 02:56:40 -0800
Subject: [PATCH 49/50] another simplification of middleware

---
 tests/test_app/middleware.py | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/tests/test_app/middleware.py b/tests/test_app/middleware.py
index b2088d63..fdd77434 100644
--- a/tests/test_app/middleware.py
+++ b/tests/test_app/middleware.py
@@ -18,12 +18,5 @@ def __init__(self, get_response):
         if iscoroutinefunction(self.get_response):
             markcoroutinefunction(self)
 
-    def __call__(self, request):
-        if iscoroutinefunction(self.get_response):
-
-            async def async_call():
-                return await self.get_response(request)
-
-            return async_call()
-
-        return self.get_response(request)
+    async def __call__(self, request):
+        return await self.get_response(request)

From 78d5f389868bd75676072338909a2fb9dced6b0e Mon Sep 17 00:00:00 2001
From: Archmonger <16909269+Archmonger@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:04:20 -0800
Subject: [PATCH 50/50] Fix bug where input elements were dismounted
 prematurely

---
 src/reactpy_django/forms/components.py  | 16 ++++++++--------
 src/reactpy_django/forms/transforms.py  | 17 +++++++++++++++++
 tests/test_app/tests/test_components.py |  4 ----
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/reactpy_django/forms/components.py b/src/reactpy_django/forms/components.py
index 157bed23..d19c0bbb 100644
--- a/src/reactpy_django/forms/components.py
+++ b/src/reactpy_django/forms/components.py
@@ -13,6 +13,7 @@
 from reactpy_django.forms.transforms import (
     convert_html_props_to_reactjs,
     convert_textarea_children_to_prop,
+    infer_key_from_attributes,
     intercept_anchor_links,
     set_value_prop_on_select_element,
     transform_value_prop_on_input_element,
@@ -56,7 +57,7 @@ def _django_form(
     rendered_form, set_rendered_form = hooks.use_state(cast(Union[str, None], None))
     uuid = uuid_ref.current
 
-    # Check the provided arguments
+    # Validate the provided arguments
     if len(top_children) != top_children_count.current or len(bottom_children) != bottom_children_count.current:
         msg = "Dynamically changing the number of top or bottom children is not allowed."
         raise ValueError(msg)
@@ -67,14 +68,14 @@ def _django_form(
         )
         raise TypeError(msg)
 
-    # Try to initialize the form with the provided data
+    # Initialize the form with the provided data
     initialized_form = form(data=submitted_data)
     form_event = FormEventData(
         form=initialized_form, submitted_data=submitted_data or {}, set_submitted_data=set_submitted_data
     )
 
     # Validate and render the form
-    @hooks.use_effect
+    @hooks.use_effect(dependencies=[str(submitted_data)])
     async def render_form():
         """Forms must be rendered in an async loop to allow database fields to execute."""
         if submitted_data:
@@ -85,14 +86,12 @@ async def render_form():
             if not success and on_error:
                 await ensure_async(on_error, thread_sensitive=thread_sensitive)(form_event)
             if success and auto_save and isinstance(initialized_form, ModelForm):
-                await database_sync_to_async(initialized_form.save)()
+                await ensure_async(initialized_form.save)()
                 set_submitted_data(None)
 
-        new_form = await database_sync_to_async(initialized_form.render)(
-            form_template or config.REACTPY_DEFAULT_FORM_TEMPLATE
+        set_rendered_form(
+            await ensure_async(initialized_form.render)(form_template or config.REACTPY_DEFAULT_FORM_TEMPLATE)
         )
-        if new_form != rendered_form:
-            set_rendered_form(new_form)
 
     async def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
@@ -134,6 +133,7 @@ async def _on_change(_event):
             set_value_prop_on_select_element,
             transform_value_prop_on_input_element,
             intercept_anchor_links,
+            infer_key_from_attributes,
             *extra_transforms,
             strict=False,
         ),
diff --git a/src/reactpy_django/forms/transforms.py b/src/reactpy_django/forms/transforms.py
index 7a9e84f4..2d527209 100644
--- a/src/reactpy_django/forms/transforms.py
+++ b/src/reactpy_django/forms/transforms.py
@@ -68,6 +68,23 @@ def intercept_anchor_links(vdom_tree: VdomDict) -> VdomDict:
     return vdom_tree
 
 
+def infer_key_from_attributes(vdom_tree: VdomDict) -> VdomDict:
+    """Infer the node's 'key' by looking at any attributes that should be unique."""
+    attributes = vdom_tree.get("attributes", {})
+
+    # Infer 'key' from 'id'
+    _id = attributes.get("id")
+
+    # Fallback: Infer 'key' from 'name'
+    if not _id and vdom_tree["tagName"] in {"input", "select", "textarea"}:
+        _id = attributes.get("name")
+
+    if _id:
+        vdom_tree["key"] = _id
+
+    return vdom_tree
+
+
 def _find_selected_options(vdom_node: Any) -> list[str]:
     """Recursively iterate through the tree to find all <option> tags with the 'selected' prop.
     Removes the 'selected' prop and returns a list of the 'value' prop of each selected <option>."""
diff --git a/tests/test_app/tests/test_components.py b/tests/test_app/tests/test_components.py
index 4c00b522..bd4507e1 100644
--- a/tests/test_app/tests/test_components.py
+++ b/tests/test_app/tests/test_components.py
@@ -805,10 +805,6 @@ def test_model_form(self):
         # Make sure no errors remain
         assert len(self.page.query_selector_all(".errorlist")) == 0
 
-        # Make sure text field is empty
-        expect(self.page.locator("#id_text")).to_be_empty()
-        assert self.page.locator("#id_text").get_attribute("value") == ""
-
         # Check if `auto_save` created the TodoItem's database entry
         try:
             from test_app.models import TodoItem