Add id to ActionForm and MultiActionForm

fix: do not submit `<ActionForm>` on `formmethod="dialog"` submission (closes #2523)

.github/workflows/ci-semver.yml

@@ -15,7 +15,7 @@ jobs:
   test:
     needs: [get-leptos-changed]
     if: needs.get-leptos-changed.outputs.leptos_changed == 'true'
-    name: Run semver check (nightly-2024-03-31)
+    name: Run semver check (nightly-2024-04-14)
     runs-on: ubuntu-latest
 
     steps:
@@ -25,4 +25,4 @@ jobs:
       - name: Semver Checks
         uses: obi1kenobi/cargo-semver-checks-action@v2
         with:
-          rust-toolchain: nightly-2024-03-31
+          rust-toolchain: nightly-2024-04-14

.github/workflows/ci.yml

@@ -40,4 +40,4 @@ jobs:
     with:
       directory: ${{ matrix.directory }}
       cargo_make_task: "ci"
-      toolchain: nightly-2024-03-31
+      toolchain: nightly-2024-04-14

leptos/src/error_boundary.rs

@@ -48,6 +48,28 @@ use leptos_reactive::{provide_context, run_as_child, signal_prelude::*};
 ///       {move || {
 ///   /* etc. */
 /// ```
+///
+/// ## Beginner's Tip: ErrorBoundary Requires Your Error To Implement std::error::Error.
+/// `ErrorBoundary` requires your `Result<T,E>` to implement [IntoView](https://docs.rs/leptos/latest/leptos/trait.IntoView.html).
+/// `Result<T,E>` only implements `IntoView` if `E` implements [std::error::Error](https://doc.rust-lang.org/std/error/trait.Error.html).
+/// So, for instance, if you pass a `Result<T,String>` where `T` implements [IntoView](https://docs.rs/leptos/latest/leptos/trait.IntoView.html)
+/// and attempt to render the error for the purposes of `ErrorBoundary` you'll get a compiler error like this.
+///
+/// ```rust,ignore
+/// error[E0599]: the method `into_view` exists for enum `Result<ViewableLoginFlow, String>`, but its trait bounds were not satisfied
+///    --> src/login.rs:229:32
+///     |
+/// 229 |                     err => err.into_view(),
+///     |                                ^^^^^^^^^ method cannot be called on `Result<ViewableLoginFlow, String>` due to unsatisfied trait bounds
+///     |
+///     = note: the following trait bounds were not satisfied:
+///             `<&Result<ViewableLoginFlow, std::string::String> as FnOnce<()>>::Output = _`
+///             which is required by `&Result<ViewableLoginFlow, std::string::String>: leptos::IntoView`
+///    ... more notes here ...
+/// ```
+///
+/// For more information about how to easily implement `Error` see
+/// [thiserror](https://docs.rs/thiserror/latest/thiserror/)
 #[component]
 pub fn ErrorBoundary<F, IV>(
     /// The components inside the tag which will get rendered

leptos_macro/Makefile.toml

@@ -11,13 +11,13 @@ dependencies = [
 [tasks.test-leptos_macro-example]
 description = "Tests the leptos_macro/example to check if macro handles doc comments correctly"
 command = "cargo"
-args = ["+nightly-2024-03-31", "test", "--doc"]
+args = ["+nightly-2024-04-14", "test", "--doc"]
 cwd = "example"
 install_crate = false
 
 [tasks.doc-leptos_macro-example]
 description = "Docs the leptos_macro/example to check if macro handles doc comments correctly"
 command = "cargo"
-args = ["+nightly-2024-03-31", "doc"]
+args = ["+nightly-2024-04-14", "doc"]
 cwd = "example"
 install_crate = false

router/Cargo.toml

@@ -23,7 +23,7 @@ regex = { version = "1", optional = true }
 url = { version = "2", optional = true }
 percent-encoding = "2"
 thiserror = "1"
-serde_qs = "0.12"
+serde_qs = "0.13"
 serde = "1"
 tracing = "0.1"
 js-sys = { version = "0.3" }

router/src/components/form.rs

@@ -444,9 +444,13 @@ pub fn ActionForm<ServFn>(
         ServFn,
         Result<ServFn::Output, ServerFnError<ServFn::Error>>,
     >,
+    /// Sets the `id` attribute on the underlying `<form>` tag
+    #[prop(optional, into)]
+    id: Option<AttributeValue>,
     /// Sets the `class` attribute on the underlying `<form>` tag, making it easier to style.
     #[prop(optional, into)]
     class: Option<AttributeValue>,
+
     /// A [`NodeRef`] in which the `<form>` element should be stored.
     #[prop(optional)]
     node_ref: Option<NodeRef<html::Form>>,
@@ -481,6 +485,7 @@ where
     let value = action.value();
 
     let class = class.map(|bx| bx.into_attribute_boxed());
+    let id = id.map(|bx| bx.into_attribute_boxed());
 
     let on_submit = {
         move |ev: SubmitEvent| {
@@ -488,6 +493,17 @@ where
                 return;
             }
 
+            // <button formmethod="dialog"> should *not* dispatch the action, but should be allowed to
+            // just bubble up and close the <dialog> naturally
+            let is_dialog = ev
+                .submitter()
+                .and_then(|el| el.get_attribute("formmethod"))
+                .as_deref()
+                == Some("dialog");
+            if is_dialog {
+                return;
+            }
+
             ev.prevent_default();
 
             match ServFn::from_event(&ev) {
@@ -513,6 +529,7 @@ where
     let mut action_form = form()
         .attr("action", action_url)
         .attr("method", "post")
+        .attr("id", id)
         .attr("class", class)
         .on(ev::submit, on_submit)
         .child(children());
@@ -538,6 +555,9 @@ pub fn MultiActionForm<ServFn>(
     /// by default using [create_server_action](leptos_server::create_server_action) or added
     /// manually using [leptos_server::Action::using_server_fn].
     action: MultiAction<ServFn, Result<ServFn::Output, ServerFnError>>,
+    /// Sets the `id` attribute on the underlying `<form>` tag
+    #[prop(optional, into)]
+    id: Option<AttributeValue>,
     /// Sets the `class` attribute on the underlying `<form>` tag, making it easier to style.
     #[prop(optional, into)]
     class: Option<AttributeValue>,
@@ -599,9 +619,12 @@ where
     };
 
     let class = class.map(|bx| bx.into_attribute_boxed());
+
+    let id = id.map(|bx| bx.into_attribute_boxed());
     let mut action_form = form()
         .attr("action", action_url)
         .attr("method", "post")
+        .attr("id", id)
         .attr("class", class)
         .on(ev::submit, on_submit)
         .child(children());