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

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

* fix(forms): preserve control refs while filtering nulls

* fix(forms): exclude non-control ids from refs

* fix(forms): exclude non-control ids from submissions

* fix(forms): preserve control ids when filtering submissions

* docs(forms): document the DOM id mapping argument

* test(forms): satisfy typing for private form metadata helper

* test(forms): keep private helper checks type-safe

* fix(forms): preserve name-only controls in submissions

* fix(forms): keep ref filtering limited to static ids

* fix(forms): retain named controls in ref payloads

* fix(forms): fall back to normalized field identifiers

* fix(forms): preserve composite control ids

* style(forms): apply ruff formatting

* fix(forms): retain mapped composite controls

* fix(forms): filter unresolved ref values

* fix(forms): preserve empty ref values

* docs(changelog): note empty form values

* test(forms): cover empty named fields

* fix(forms): exclude non-control refs from submissions

* test(forms): rely on integration coverage for memo refs

* test(forms): name regression test identifiers

* test(forms): pass fixture IDs into AppHarness apps

* fix(forms): preserve control refs through memoization

* fix(forms): reuse existing form control marker

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

Author: harsh21234i

docs/library/forms/form.md

@@ -164,6 +164,8 @@ def form_example():
 When using the `name` attribute in form controls like `rx.switch`, `rx.radio_group`, and `rx.checkbox`, these controls will only be included in the form data if their values are set (e.g., if the checkbox is checked, the switch is toggled, or a radio option is selected).
 
 If you need these controls to be passed in the form data even when their values are not set, you can use the `id` attribute instead of name. The id attribute ensures that the control is always included in the submitted form data, regardless of whether its value is set or not.
+
+Custom native `input`, `select`, and `textarea` components with an `id` are included automatically. For other custom form controls, set `_is_form_control = True` on the component class to include its ID-based value in submissions.
 ```
 
 ```md video https://youtube.com/embed/ITOZkzjtjUA?start=5287&end=6040

news/7227.bugfix.md

@@ -0,0 +1 @@
+Preserve ID-based form controls through automatic memoization while excluding IDs on non-controls from submissions.

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

@@ -0,0 +1 @@
+Form submissions retain ID-backed controls with unset values while omitting IDs from non-controls.

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

@@ -1602,7 +1602,7 @@ export const mergeSlotProps = (injectedProps, ownProps, refProp) => {
  */
 export const getRefValue = (ref) => {
   if (!ref || !ref.current) {
-    return;
+    return null;
   }
   if (ref.current.type == "checkbox") {
     return ref.current.checked; // chakra
@@ -1617,10 +1617,10 @@ 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)
+        ref.current.querySelector(":checked")?.value) ??
+      null
     );
   }
 };

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

@@ -2169,6 +2169,7 @@ def passthrough(children: Var[Component]) -> Component:
         # reachable on the page-level wrapper via the plugin's
         # ``_get_all_refs`` delegation back to the source component.
         new_component.children = [hole_bare]
+        object.__setattr__(new_component, "_form_control_source", component)
         # Compile-time walkers that need the real subtree (notably
         # ``Form._get_form_refs`` collecting id-based input refs into the
         # generated ``handleSubmit`` JS) call ``self._get_all_refs()`` while

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

@@ -0,0 +1 @@
+Exclude IDs on forms and other non-controls from form submissions while preserving unset ID-backed controls and supporting custom controls marked with `_is_form_control`.

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

@@ -39,6 +39,7 @@
 from .base import BaseHTML, RawTextBaseHTML, VoidBaseHTML
 
 _DYNAMIC_FORM_FIELD = object()
+_NATIVE_FORM_CONTROL_TAGS = frozenset({"input", "select", "textarea"})
 
 
 def _handle_submit_js_template(
@@ -64,7 +65,10 @@ 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()),
+            ...{field_ref_mapping}
+        }};
 
         ({on_submit_event_chain}(ev));
 
@@ -98,6 +102,10 @@ def _iter_form_components(component: BaseComponent) -> Iterator[BaseComponent]:
     Yields:
         The component and its nested component descendants.
     """
+    form_control_source = getattr(component, "_form_control_source", None)
+    if isinstance(form_control_source, BaseComponent):
+        yield from _iter_form_components(form_control_source)
+        return
     yield component
     for child in component.children:
         if isinstance(child, BaseComponent):
@@ -135,6 +143,42 @@ 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.
+
+    Custom component classes can opt in with ``_is_form_control = True``.
+
+    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)
+    if getattr(wrapped_component_type, "_is_form_control", False):
+        return True
+    return getattr(component, "tag", None) in _NATIVE_FORM_CONTROL_TAGS
+
+
+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.
 
@@ -359,9 +403,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 = _get_form_control_refs(self)
         form_refs = {}
         for ref in 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 +434,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")

pyi_hashes.json

@@ -27,7 +27,7 @@
   "packages/reflex-components-core/src/reflex_components_core/el/element.pyi": "930b020d7c933ab0e29ba7971ba1abd2",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/__init__.pyi": "ded6fc0acc37c9260da5cfd5f4309079",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/base.pyi": "d075a1420b5a08cccd45aa58599ab3dc",
-  "packages/reflex-components-core/src/reflex_components_core/el/elements/forms.pyi": "42b0e8e04b79d7aa78d16b4f9ad39cef",
+  "packages/reflex-components-core/src/reflex_components_core/el/elements/forms.pyi": "c0ccd355f1e31a799069a1fb2207dac2",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/inline.pyi": "c4085b9ee43847b6765cbf775341bc0b",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/media.pyi": "c2515454828415b78799f0ee0fb7a6af",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/metadata.pyi": "2d8d722c68f5a3082c0d3fa4883bb5c0",

reflex/compiler/plugins/memoize.py

@@ -403,6 +403,8 @@ def _build_wrapper(
         # wrapped subtree. Delegate ref collection to the original component
         # so descendants inside the memo body remain reachable for ref lookup.
         object.__setattr__(wrapper, "_get_all_refs", comp._get_all_refs)
+        # Keep each ref's owning control available after replacing the subtree.
+        object.__setattr__(wrapper, "_form_control_source", comp)
         return wrapper