reflex 0.8.4a1__py3-none-any.whl → 0.8.5__py3-none-any.whl

reflex/components/core/auto_scroll.py

@@ -52,11 +52,12 @@ class AutoScroll(Div):
             The hooks required for the component.
         """
         ref_name = self.get_ref()
+        unique_id = ref_name
         return [
-            "const wasNearBottom = useRef(false);",
-            "const hadScrollbar = useRef(false);",
+            f"const wasNearBottom_{unique_id} = useRef(false);",
+            f"const hadScrollbar_{unique_id} = useRef(false);",
             f"""
-const checkIfNearBottom = () => {{
+const checkIfNearBottom_{unique_id} = () => {{
     if (!{ref_name}.current) return;
 
     const container = {ref_name}.current;
@@ -64,14 +65,14 @@ const checkIfNearBottom = () => {{
 
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
 
-    wasNearBottom.current = distanceFromBottom <= nearBottomThreshold;
+    wasNearBottom_{unique_id}.current = distanceFromBottom <= nearBottomThreshold;
 
     // Track if container had a scrollbar
-    hadScrollbar.current = container.scrollHeight > container.clientHeight;
+    hadScrollbar_{unique_id}.current = container.scrollHeight > container.clientHeight;
 }};
 """,
             f"""
-const scrollToBottomIfNeeded = () => {{
+const scrollToBottomIfNeeded_{unique_id} = () => {{
     if (!{ref_name}.current) return;
 
     const container = {ref_name}.current;
@@ -80,12 +81,12 @@ const scrollToBottomIfNeeded = () => {{
     // Scroll if:
     // 1. User was near bottom, OR
     // 2. Container didn't have scrollbar before but does now
-    if (wasNearBottom.current || (!hadScrollbar.current && hasScrollbarNow)) {{
+    if (wasNearBottom_{unique_id}.current || (!hadScrollbar_{unique_id}.current && hasScrollbarNow)) {{
       container.scrollTop = container.scrollHeight;
     }}
 
     // Update scrollbar state for next check
-    hadScrollbar.current = hasScrollbarNow;
+    hadScrollbar_{unique_id}.current = hasScrollbarNow;
 }};
 """,
             f"""
@@ -93,24 +94,24 @@ useEffect(() => {{
     const container = {ref_name}.current;
     if (!container) return;
 
-    scrollToBottomIfNeeded();
+    scrollToBottomIfNeeded_{unique_id}();
 
     // Create ResizeObserver to detect height changes
     const resizeObserver = new ResizeObserver(() => {{
-        scrollToBottomIfNeeded();
+        scrollToBottomIfNeeded_{unique_id}();
     }});
 
     // Track scroll position before height changes
-    container.addEventListener('scroll', checkIfNearBottom);
+    container.addEventListener('scroll', checkIfNearBottom_{unique_id});
 
     // Initial check
-    checkIfNearBottom();
+    checkIfNearBottom_{unique_id}();
 
     // Observe container for size changes
     resizeObserver.observe(container);
 
     return () => {{
-        container.removeEventListener('scroll', checkIfNearBottom);
+        container.removeEventListener('scroll', checkIfNearBottom_{unique_id});
         resizeObserver.disconnect();
     }};
 }});

reflex/components/core/auto_scroll.pyi

@@ -204,7 +204,6 @@ class AutoScroll(Div):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -249,7 +248,6 @@ class AutoScroll(Div):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/core/banner.pyi

@@ -57,7 +57,6 @@ class ConnectionToaster(Fragment):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -86,7 +85,6 @@ class ConnectionToaster(Fragment):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -108,7 +106,6 @@ class ConnectionBanner(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -151,7 +148,6 @@ class ConnectionModal(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -195,7 +191,6 @@ class WifiOffPulse(Icon):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -225,7 +220,6 @@ class WifiOffPulse(Icon):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -427,7 +421,6 @@ class ConnectionPulser(Div):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -471,7 +464,6 @@ class ConnectionPulser(Div):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -671,7 +663,6 @@ class BackendDisabled(Div):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -715,7 +706,6 @@ class BackendDisabled(Div):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/core/client_side_routing.pyi

@@ -29,7 +29,6 @@ class ClientSideRouting(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -58,7 +57,6 @@ class ClientSideRouting(Component):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/core/clipboard.py

@@ -56,10 +56,8 @@ class Clipboard(Fragment):
 
     def _render(self) -> Tag:
         tag = super()._render()
-        tag.remove_props("targets")
         # Ensure a different Fragment component is created whenever targets differ
-        tag.add_props(key=self.targets)
-        return tag
+        return tag.remove_props("targets").add_props(key=self.targets)
 
     def add_imports(self) -> dict[str, ImportVar]:
         """Add the imports for the Clipboard component.

reflex/components/core/clipboard.pyi

@@ -30,7 +30,6 @@ class Clipboard(Fragment):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -63,7 +62,6 @@ class Clipboard(Fragment):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/core/cond.py

@@ -80,8 +80,6 @@ class Cond(Component):
                 sx=self.style,
                 id=self.id,
                 class_name=self.class_name,
-            ).set(
-                props=tag.format_props(),
             ),
             cond_state=str(self.cond),
         )

reflex/components/core/debounce.pyi

@@ -34,7 +34,6 @@ class DebounceInput(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_change: EventType[()] | None = None,

reflex/components/core/helmet.pyi

@@ -25,7 +25,6 @@ class Helmet(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -54,7 +53,6 @@ class Helmet(Component):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/core/html.pyi

@@ -204,7 +204,6 @@ class Html(Div):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -250,7 +249,6 @@ class Html(Div):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 

reflex/components/core/match.py

@@ -256,8 +256,7 @@ class Match(MemoizationLeaf):
             The dictionary for template of component.
         """
         tag = self._render()
-        tag.name = "match"
-        return dict(tag)
+        return dict(tag.set(name="match"))
 
     def add_imports(self) -> ImportDict:
         """Add imports for the Match component.

reflex/components/core/sticky.pyi

@@ -209,7 +209,6 @@ class StickyLogo(Svg):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -561,7 +560,6 @@ class StickyLabel(Text):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -816,7 +814,6 @@ class StickyBadge(A):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -1073,7 +1070,6 @@ class StickyNamespace(ComponentNamespace):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,

reflex/components/core/upload.pyi

@@ -53,7 +53,6 @@ class UploadFilesProvider(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -82,7 +81,6 @@ class UploadFilesProvider(Component):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -104,7 +102,6 @@ class GhostUpload(Fragment):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -135,7 +132,6 @@ class GhostUpload(Fragment):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -169,7 +165,6 @@ class Upload(MemoizationLeaf):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -210,7 +205,6 @@ class Upload(MemoizationLeaf):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -242,7 +236,6 @@ class StyledUpload(Upload):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -283,7 +276,6 @@ class StyledUpload(Upload):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 
@@ -316,7 +308,6 @@ class UploadNamespace(ComponentNamespace):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -357,7 +348,6 @@ class UploadNamespace(ComponentNamespace):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The properties of the component.
 

reflex/components/core/window_events.pyi

@@ -26,7 +26,6 @@ class WindowEventListener(Fragment):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_before_unload: EventType[()] | None = None,
         on_blur: EventType[()] | None = None,
@@ -73,7 +72,6 @@ class WindowEventListener(Fragment):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/datadisplay/code.py

@@ -500,12 +500,14 @@ class CodeBlock(Component, MarkdownComponentMap):
 
         theme = self.theme
 
-        out.add_props(style=theme).remove_props("theme", "code").add_props(
-            children=self.code,
+        return (
+            out.add_props(style=theme)
+            .remove_props("theme", "code")
+            .add_props(
+                children=self.code,
+            )
         )
 
-        return out
-
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

reflex/components/datadisplay/code.pyi

@@ -938,7 +938,6 @@ class CodeBlock(Component, MarkdownComponentMap):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -977,7 +976,6 @@ class CodeBlock(Component, MarkdownComponentMap):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -1576,7 +1574,6 @@ class CodeblockNamespace(ComponentNamespace):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -1615,7 +1612,6 @@ class CodeblockNamespace(ComponentNamespace):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 

reflex/components/datadisplay/dataeditor.pyi

@@ -174,7 +174,6 @@ class DataEditor(NoSSRComponent):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_cell_activated: EventType[()] | EventType[tuple[int, int]] | None = None,
@@ -287,7 +286,6 @@ class DataEditor(NoSSRComponent):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the data editor.
 

reflex/components/datadisplay/shiki_code_block.pyi

@@ -920,7 +920,6 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -955,7 +954,6 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -1538,7 +1536,6 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -1577,7 +1574,6 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 
@@ -2160,7 +2156,6 @@ class CodeblockNamespace(ComponentNamespace):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -2199,7 +2194,6 @@ class CodeblockNamespace(ComponentNamespace):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props to pass to the component.
 

reflex/components/el/element.pyi

@@ -25,7 +25,6 @@ class Element(Component):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -54,7 +53,6 @@ class Element(Component):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/el/elements/base.pyi

@@ -281,7 +281,6 @@ class BaseHTML(Element):
         id: Any | None = None,
         ref: Var | None = None,
         class_name: Any | None = None,
-        autofocus: bool | None = None,
         custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: EventType[()] | None = None,
         on_click: EventType[()] | EventType[PointerEventInfo] | None = None,
@@ -326,7 +325,6 @@ class BaseHTML(Element):
             id: The id for the component.
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/el/elements/forms.py

@@ -12,6 +12,7 @@ from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
 from reflex.event import (
+    FORM_DATA,
     EventChain,
     EventHandler,
     checked_input_event,
@@ -19,6 +20,8 @@ from reflex.event import (
     input_event,
     int_input_event,
     key_event,
+    on_submit_event,
+    on_submit_string_event,
     prevent_default,
 )
 from reflex.utils.imports import ImportDict
@@ -28,7 +31,6 @@ from reflex.vars.number import ternary_operation
 
 from .base import BaseHTML
 
-FORM_DATA = Var(_js_expr="form_data")
 HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
     """
     const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {
@@ -110,24 +112,6 @@ class Fieldset(Element):
     name: Var[str]
 
 
-def on_submit_event_spec() -> tuple[Var[dict[str, Any]]]:
-    """Event handler spec for the on_submit event.
-
-    Returns:
-        The event handler spec.
-    """
-    return (FORM_DATA,)
-
-
-def on_submit_string_event_spec() -> tuple[Var[dict[str, str]]]:
-    """Event handler spec for the on_submit event.
-
-    Returns:
-        The event handler spec.
-    """
-    return (FORM_DATA,)
-
-
 class Form(BaseHTML):
     """Display the form element."""
 
@@ -167,7 +151,7 @@ class Form(BaseHTML):
     handle_submit_unique_name: Var[str]
 
     # Fired when the form is submitted
-    on_submit: EventHandler[on_submit_event_spec, on_submit_string_event_spec]
+    on_submit: EventHandler[on_submit_event, on_submit_string_event]
 
     @classmethod
     def create(cls, *children, **props):
@@ -228,7 +212,7 @@ class Form(BaseHTML):
     def _render(self) -> Tag:
         render_tag = super()._render()
         if EventTriggers.ON_SUBMIT in self.event_triggers:
-            render_tag.add_props(
+            render_tag = render_tag.add_props(
                 **{
                     EventTriggers.ON_SUBMIT: Var(
                         _js_expr=f"handleSubmit_{self.handle_submit_unique_name}",