Fix #270: preserve multi-select form values across submission

The `django_form` component lost multi-select (MultipleChoiceField) values
after a successful submission because two separate issues prevented the
re-rendered form from restoring the selection on the client:

1. The `onSubmit` ReactPy event handler on the `<form>` element was
   redundant with the client-side `DjangoForm` submit listener (which already
   calls `preventDefault()` and forwards the submitted data). When a form was
   submitted a second time (after re-rendering validation errors), this extra
   handler caused the WebSocket to close and remount the component, dropping
   the submission before it reached the server. Removing the redundant
   `onSubmit` prop lets the client-side listener reliably deliver the data.

2. ReactPy's built-in `select_element_to_reactjs` transform strips the
   `selected` attribute from `<option>` elements and stores it as
   `defaultValue` on the parent `<select>`. Preact does not apply a `<select>`'s
   `defaultValue` prop to its `<option>` children, so the selection was lost on
   re-render. `set_value_prop_on_select_element` now also re-applies `selected`
   on the matching `<option>` elements, which Preact applies as the option's DOM
   `selected` property.

Also fixes the multi-select assertions in `test_form_basic` to read the
selected `<option>` values, since `input_value()` returns only the first
selection on a multi-select.

Author: User

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.reactjs import component_from_file
 
 from reactpy_django.forms.transforms import (
@@ -126,11 +125,9 @@ async def _on_change(_event):
     if not rendered_form:
         return None
 
-    form_props = {
+    form_props: dict[str, Any] = {
         "id": f"reactpy-{uuid}",
         "key": f"reactpy-{uuid}-{render_count}",
-        # Intercept the form submission to prevent the browser from navigating
-        "onSubmit": event(lambda _: None, prevent_default=True),
     }
     if on_change:
         form_props["onChange"] = _on_change

src/reactpy_django/forms/transforms.py

@@ -33,17 +33,32 @@ def convert_textarea_children_to_prop(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 the current tag is <select>, remove 'selected' prop from any <option> children and
-    # instead set the 'value' prop on the <select> tag.
+    """Set the correct selection props on a <select> and its <option> children.
+
+    ReactPy's built-in ``RequiredTransforms.select_element_to_reactjs`` (which runs during
+    ``string_to_reactpy``, before this transform) removes the ``selected`` attribute from
+    each ``<option>`` and records the selected value(s) as ``defaultValue`` on the parent
+    ``<select>`` element.  That works with React, but Preact does **not** apply a ``<select>``
+    element's ``defaultValue`` prop to its ``<option>`` children.  As a result the selection is
+    lost when a form remounts/``<option>`` nodes are re-created (e.g. after a submission).
+
+    To preserve selection for Preact, this transform reads the ``defaultValue`` already set on
+    the ``<select>`` and sets the ``selected`` prop directly on each matching ``<option>``
+    element, which Preact applies as the option's DOM ``selected`` property.
+    """
     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:
-            vdom_tree["attributes"]["defaultValue"] = selected_options[0]
-        if selected_options and multiple_choice:
-            vdom_tree["attributes"]["defaultValue"] = selected_options
+        attributes = vdom_tree["attributes"]
+        attributes["multiple"] = bool(attributes.get("multiple"))
+
+        # Preact ignores a <select>'s `defaultValue`, so propagate the selected value(s)
+        # (already stored on the <select> by reactpy's builtin transform) onto the
+        # matching <option> elements as `selected`.
+        selected_values = attributes.get("defaultValue")
+        if isinstance(selected_values, str):
+            selected_values = [selected_values]
+        if selected_values:
+            _set_selected_on_options(vdom_tree, set(selected_values))
 
     return vdom_tree
 
@@ -87,31 +102,25 @@ def infer_key_from_attributes(vdom_tree: VdomDict) -> VdomDict:
     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.
-    Returns a list of the 'value' prop of each selected <option>.
+def _set_selected_on_options(vdom_node: Any, selected_values: set[str]) -> None:
+    """Recursively mark the matching <option> elements as selected.
 
-    .. note::
-        We intentionally do **not** remove the ``selected`` prop from the ``<option>`` elements.
-        The ``defaultValue`` attribute is already set on the ``<select>`` element for initial
-        mount in React/Preact, but it is only applied once (on mount).  Keeping ``selected``
-        on the ``<option>`` elements ensures that selection state is correctly restored after
-        the form is re-rendered (e.g. after a form submission that does not trigger a full
-        Preact remount)."""
+    We set the ``selected`` prop on the <option> element.  Preact applies ``selected``
+    as a DOM property on ``HTMLOptionElement``, which updates the option's ``selected``
+    state on every re-render.  This is required because Preact does not apply a
+    <select>'s ``defaultValue`` prop to its <option> children, so selection is otherwise
+    lost when a form remounts (e.g. on submit).
+    """
     if not isinstance(vdom_node, dict):
-        return []
+        return
 
-    selected_options = []
     if vdom_node["tagName"] == "option" and "attributes" in vdom_node:
-        value = vdom_node["attributes"].setdefault("value", vdom_node["children"][0])
-
-        if "selected" in vdom_node["attributes"]:
-            selected_options.append(value)
+        value = vdom_node["attributes"].get("value")
+        if value in selected_values:
+            vdom_node["attributes"]["selected"] = True
 
     for child in vdom_node.get("children", []):
-        selected_options.extend(_find_selected_options(child))
-
-    return selected_options
+        _set_selected_on_options(child, selected_values)
 
 
 def _normalize_prop_name(prop_name: str) -> str:

tests/test_app/tests/test_components.py

@@ -812,11 +812,16 @@ def test_form_basic(self):
         # Verify multi-select field values survived the round-trip
         # After successful submission, the re-rendered form should have
         # the same options selected, proving the FormData duplicate-key fix worked.
-        assert self.page.locator("#id_multiple_choice_field").input_value() == ["2", "3"]
-        assert self.page.locator("#id_typed_multiple_choice_field").input_value() == ["1", "2"]
+        # NOTE: `input_value()` on a multi-select returns only the first selected
+        # value as a string, so we read the selected <option> values directly.
+        def _selected_values(selector: str) -> list[str]:
+            return self.page.locator(f"{selector} option:checked").evaluate_all("els => els.map(e => e.value)")
+
+        assert sorted(_selected_values("#id_multiple_choice_field")) == ["2", "3"]
+        assert sorted(_selected_values("#id_typed_multiple_choice_field")) == ["1", "2"]
 
         # Verify model multi-select field values survived the round-trip
-        model_choice_selected = self.page.locator("#id_model_multiple_choice_field").input_value()
+        model_choice_selected = _selected_values("#id_model_multiple_choice_field")
         assert sorted(model_choice_selected) == sorted([
             model_choice_field_values[1],
             model_choice_field_values[2],