fix(forms): omit non-control ids from submissions

packages/reflex-base/news/7227.bugfix.md

@@ -0,0 +1 @@
+Form submissions preserve empty ID-backed values and their control refs across memoization, while omitting IDs from non-controls.

packages/reflex-base/src/reflex_base/.templates/web/utils/state.js

@@ -1508,9 +1508,8 @@ export const getRefValue = (ref) => {
   } else {
     //querySelector(":checked") is needed to get value from radio_group
     return (
-      ref.current.value ||
+      ref.current.value ??
       (ref.current.querySelector &&
-        ref.current.querySelector(":checked") &&
         ref.current.querySelector(":checked")?.value)
     );
   }

packages/reflex-base/src/reflex_base/components/memo.py

@@ -2082,6 +2082,13 @@ def passthrough(children: Var[Component]) -> Component:
         # empty ``field_ref_mapping``. Delegate ref collection back to the
         # source component so descendants behind the hole remain visible.
         object.__setattr__(new_component, "_get_all_refs", component._get_all_refs)
+        # Form submit handlers also need the original subtree to identify which
+        # of those refs belong to controls rather than structural ancestors.
+        get_form_control_refs = getattr(component, "_get_form_control_refs", None)
+        if get_form_control_refs is not None:
+            object.__setattr__(
+                new_component, "_get_form_control_refs", get_form_control_refs
+            )
         return new_component
 
     # Evaluate once to compute the tag from the rendered memo body shape.

packages/reflex-components-core/news/7227.bugfix.md

@@ -0,0 +1 @@
+Exclude IDs on forms and other non-controls from form submissions while preserving empty values and ID-backed controls.

packages/reflex-components-core/src/reflex_components_core/core/debounce.py

@@ -25,6 +25,7 @@ class DebounceInput(Component):
     library = "react-debounce-input@3.3.0"
     tag = "DebounceInput"
     is_default = True
+    _is_form_control = True
 
     # DebounceInput is a class component: a plain ``ref`` resolves to the
     # instance (``_render`` strips it), and the real ``<input>`` is exposed

packages/reflex-components-core/src/reflex_components_core/el/elements/forms.py

@@ -64,7 +64,12 @@ def _handle_submit_js_template(
     const handleSubmit_{handle_submit_unique_name} = useCallback((ev) => {{
         const $form = ev.target
         ev.preventDefault()
-        const {form_data} = {{...Object.fromEntries(new FormData($form).entries()), ...{field_ref_mapping}}};
+        const {form_data} = {{
+            ...Object.fromEntries(new FormData($form).entries()),
+            ...Object.fromEntries(
+                Object.entries({field_ref_mapping}).filter(([, value]) => value != null)
+            )
+        }};
 
         ({on_submit_event_chain}(ev));
 
@@ -135,6 +140,38 @@ def _get_static_string_prop(
     return None
 
 
+def _is_form_control_component(component: BaseComponent) -> bool:
+    """Return whether a component or its memoized type is a form control.
+
+    Args:
+        component: The component to inspect.
+
+    Returns:
+        Whether the component contributes a form field.
+    """
+    if getattr(component, "_is_form_control", False):
+        return True
+    wrapped_component_type = getattr(component, "_wrapped_component_type", None)
+    return getattr(wrapped_component_type, "_is_form_control", False)
+
+
+def _get_form_control_refs(component: BaseComponent) -> set[str]:
+    """Collect refs belonging to form controls in a component subtree.
+
+    Args:
+        component: The component tree to inspect.
+
+    Returns:
+        The refs owned by form controls.
+    """
+    return {
+        ref
+        for child in _iter_form_components(component)
+        if isinstance(child, Component) and _is_form_control_component(child)
+        if (ref := child.get_ref()) is not None
+    }
+
+
 def _get_required_typed_dict_fields(typed_dict_type: type[Any]) -> frozenset[str]:
     """Resolve required TypedDict keys across Python versions.
 
@@ -316,6 +353,18 @@ def create(cls, *children, **props):
         ).hexdigest()
         return form
 
+    def _get_form_control_refs(self) -> set[str]:
+        """Get refs for form controls in this form's component subtree.
+
+        Returns:
+            The refs owned by form controls.
+        """
+        refs = getattr(self, "_form_control_refs", None)
+        if refs is None:
+            refs = _get_form_control_refs(self)
+            object.__setattr__(self, "_form_control_refs", refs)
+        return refs
+
     def add_imports(self) -> ImportDict:
         """Add imports needed by the form component.
 
@@ -359,9 +408,11 @@ def _render(self) -> CommonTag:
         return render_tag
 
     def _get_form_refs(self) -> dict[str, Any]:
-        # Send all the input refs to the handler.
+        form_control_refs = self._get_form_control_refs()
         form_refs = {}
-        for ref in self._get_all_refs():
+        for ref in dict.fromkeys(self._get_all_refs()):
+            if ref not in form_control_refs:
+                continue
             # when ref start with refs_ it's an array of refs, so we need different method
             # to collect data
             if ref.startswith("refs_"):
@@ -388,7 +439,7 @@ def _get_static_form_field_keys(self) -> tuple[set[str], bool]:
         has_dynamic_identifiers = False
 
         for component in _iter_form_components(self):
-            if component is self or not getattr(component, "_is_form_control", False):
+            if component is self or not _is_form_control_component(component):
                 continue
 
             name = _get_static_string_prop(component, "name")

tests/integration/test_form_submit.py

@@ -12,12 +12,21 @@
 
 from reflex.testing import AppHarness
 
+FORM_CONTENT_WRAPPER_ID = "form_content_wrapper"
+FORM_ID = "form_id"
 
-def FormSubmit(form_component):
+
+def FormSubmit(
+    form_component,
+    form_id=FORM_ID,
+    form_content_wrapper_id=FORM_CONTENT_WRAPPER_ID,
+):
     """App with a form using on_submit.
 
     Args:
         form_component: The str name of the form component to use.
+        form_id: The form element ID.
+        form_content_wrapper_id: The non-control wrapper ID.
     """
     import reflex as rx
 
@@ -42,6 +51,7 @@ def index():
             eval(form_component)(
                 rx.vstack(
                     rx.input(id="name_input"),
+                    rx.input(id="empty_input"),
                     rx.checkbox(id="bool_input"),
                     rx.switch(id="bool_input2"),
                     rx.checkbox(id="bool_input3"),
@@ -62,21 +72,29 @@ def index():
                         on_change=rx.console_log,
                     ),
                     rx.button("Submit", type_="submit"),
+                    id=form_content_wrapper_id,
                 ),
                 on_submit=FormState.form_submit,
                 custom_attrs={"action": "/invalid"},
+                id=form_id,
             ),
             rx.text(FormState.form_data.to_string(), id="form-data"),
             rx.spacer(),
             height="100vh",
         )
 
 
-def FormSubmitName(form_component):
+def FormSubmitName(
+    form_component,
+    form_id=FORM_ID,
+    form_content_wrapper_id=FORM_CONTENT_WRAPPER_ID,
+):
     """App with a form using on_submit.
 
     Args:
         form_component: The str name of the form component to use.
+        form_id: The form element ID.
+        form_content_wrapper_id: The non-control wrapper ID.
     """
     import reflex as rx
 
@@ -101,6 +119,7 @@ def index():
             eval(form_component)(
                 rx.vstack(
                     rx.input(name="name_input"),
+                    rx.input(name="empty_input"),
                     rx.checkbox(name="bool_input"),
                     rx.switch(name="bool_input2"),
                     rx.checkbox(name="bool_input3"),
@@ -120,9 +139,11 @@ def index():
                     ),
                     rx.button("Submit", type_="submit"),
                     rx.icon_button(rx.icon(tag="plus")),
+                    id=form_content_wrapper_id,
                 ),
                 on_submit=FormState.form_submit,
                 custom_attrs={"action": "/invalid"},
+                id=form_id,
             ),
             rx.text(FormState.form_data.to_string(), id="form-data"),
             rx.spacer(),
@@ -238,7 +259,10 @@ async def test_submit(driver, form_submit: AppHarness):
 
     print(form_data)
 
+    assert FORM_ID not in form_data
+    assert FORM_CONTENT_WRAPPER_ID not in form_data
     assert form_data["name_input"] == "foo"
+    assert form_data["empty_input"] == ""
     assert form_data["bool_input"]
     assert form_data["bool_input2"]
     assert not form_data.get("bool_input3", False)

tests/units/components/forms/test_form.py

@@ -4,6 +4,7 @@
 from reflex_base.event import EventChain, prevent_default
 from reflex_base.utils.exceptions import EventHandlerValueError
 from reflex_base.vars.base import Var
+from reflex_components_core.core.debounce import DebounceInput
 from reflex_components_core.el.elements.forms import (
     AUTO_HEIGHT_JS,
     ENTER_KEY_SUBMIT_JS,
@@ -17,6 +18,14 @@
 import reflex as rx
 from reflex.compiler.utils import _root_only_custom_code
 
+EMAIL_FIELD_ID = "email"
+EMAIL_LABEL_ID = "email_label"
+SUBMIT_BUTTON_ID = "submit_button"
+INPUT_WRAPPER_ID = "input_wrapper"
+FORM_ID = "form_id"
+DEBOUNCED_INPUT_ID = "debounced_input"
+MEMOIZED_INPUT_ID = "memoized_input"
+
 
 def test_render_on_submit():
     """Test that on_submit event chain is rendered as a separate function."""
@@ -37,6 +46,56 @@ def test_render_no_on_submit():
     assert f.event_triggers["on_submit"].events[0] == prevent_default
 
 
+def test_form_submit_filters_null_ref_values():
+    """Only form-control refs with resolved values should be submitted."""
+
+    class FormState(rx.State):
+        @rx.event
+        def on_submit(self, form_data: dict):
+            pass
+
+    form = HTMLForm.create(
+        rx.box(
+            Input.create(id=EMAIL_FIELD_ID),
+            rx.text("Email", id=EMAIL_LABEL_ID),
+            rx.button("Submit", id=SUBMIT_BUTTON_ID),
+            id=INPUT_WRAPPER_ID,
+        ),
+        on_submit=FormState.on_submit,
+        id=FORM_ID,
+    )
+    submit_hook = form.add_hooks()[0]
+    assert "filter(([, value]) => value != null)" in submit_hook
+    assert f"ref_{EMAIL_FIELD_ID}" in submit_hook
+    assert f"ref_{EMAIL_LABEL_ID}" not in submit_hook
+    assert f"ref_{SUBMIT_BUTTON_ID}" not in submit_hook
+    assert f"ref_{INPUT_WRAPPER_ID}" not in submit_hook
+    assert f"ref_{FORM_ID}" not in submit_hook
+
+
+def test_form_refs_include_debounced_controls():
+    """ID-only debounced inputs remain available to submit handlers."""
+    form = HTMLForm.create(
+        DebounceInput.create(
+            Input.create(id=DEBOUNCED_INPUT_ID, on_change=rx.console_log)
+        )
+    )
+
+    assert f"ref_{DEBOUNCED_INPUT_ID}" in form.add_hooks()[0]
+
+
+def test_form_refs_include_memoized_controls(monkeypatch):
+    """Memo wrappers retain the form-control marker of their wrapped component."""
+
+    class MemoizedInput(Input):
+        _is_form_control = False
+
+    monkeypatch.setattr(MemoizedInput, "_wrapped_component_type", Input, raising=False)
+    form = HTMLForm.create(MemoizedInput.create(id=MEMOIZED_INPUT_ID))
+
+    assert f"ref_{MEMOIZED_INPUT_ID}" in form.add_hooks()[0]
+
+
 @pytest.mark.parametrize("form_factory", [HTMLForm.create, Form.create])
 def test_on_submit_accepts_typed_dict_form_data(form_factory):
     """TypedDict-annotated submit handlers should be accepted."""