Describe the bug
When a form contains a control that submits multiple values under the same name -- most
commonly rx.checkbox_group, but also any hand-built group of inputs sharing a name -- only the
last checked value reaches the on_submit handler's form_data. Every other checked value is
silently discarded, with no error.
The generated submit handler builds form_data with:
Object.fromEntries(new FormData($form).entries())
FormData.entries() yields one [key, value] pair per repeated name (so a checkbox group with
three checked boxes yields three pairs, all with the same key). Object.fromEntries keeps only the
last pair for any duplicate key, so the first two checked values are lost.
To Reproduce
import reflex as rx
class FormState(rx.State):
result: dict = {}
def handle_submit(self, form_data: dict):
self.result = form_data
def index() -> rx.Component:
return rx.form(
rx.checkbox_group(
rx.checkbox_group.item("Red", value="red"),
rx.checkbox_group.item("Green", value="green"),
rx.checkbox_group.item("Blue", value="blue"),
name="colors",
),
rx.button("Submit", type="submit"),
on_submit=FormState.handle_submit,
)
Check all three boxes and submit. FormState.result["colors"] is a single string (whichever
checkbox happens to be last in DOM order among the checked ones), not a list of all three checked
values.
Expected behavior
form_data["colors"] should contain all checked values, not just one.
Specifics
- Python Version: not version-specific -- reproduced via a pure-Python/JS-semantics unit test
- Reflex Version: main (current, post-0.9.12)
- OS: not OS-specific
- Browser (Optional): any -- this is a
FormData/Object.fromEntries JS semantics issue, not
browser-specific
Additional context
Verified directly in Node: Object.fromEntries(new FormData(...).entries()) really does collapse
a repeated key to its last value while leaving single-value keys (e.g. a plain text input) as
scalars, so this doesn't affect ordinary single-value fields -- only anything that legitimately
submits more than one value per name.
Describe the bug
When a form contains a control that submits multiple values under the same
name-- mostcommonly
rx.checkbox_group, but also any hand-built group of inputs sharing aname-- only thelast checked value reaches the
on_submithandler'sform_data. Every other checked value issilently discarded, with no error.
The generated submit handler builds
form_datawith:FormData.entries()yields one[key, value]pair per repeatedname(so a checkbox group withthree checked boxes yields three pairs, all with the same key).
Object.fromEntrieskeeps only thelast pair for any duplicate key, so the first two checked values are lost.
To Reproduce
Check all three boxes and submit.
FormState.result["colors"]is a single string (whichevercheckbox happens to be last in DOM order among the checked ones), not a list of all three checked
values.
Expected behavior
form_data["colors"]should contain all checked values, not just one.Specifics
FormData/Object.fromEntriesJS semantics issue, notbrowser-specific
Additional context
Verified directly in Node:
Object.fromEntries(new FormData(...).entries())really does collapsea repeated key to its last value while leaving single-value keys (e.g. a plain text input) as
scalars, so this doesn't affect ordinary single-value fields -- only anything that legitimately
submits more than one value per name.