Added autofocus and clear name on sumbit

application/src/pages/add_participant.rs

@@ -49,15 +49,44 @@ async fn add_participant(name: String, group: String) -> Result<(), ServerFnErro
 /// Renders the home page of your application.
 #[component]
 pub fn AddParticipant() -> impl IntoView {
-    let form_submit = create_server_action::<AddParticipant>();
+    let name = create_rw_signal("".to_string());
+    let group = create_rw_signal("A1".to_string());
+
+    let name_input_ref: NodeRef<html::Input> = create_node_ref();
+
+    let form_submit_action = create_action(|input: &(String, String)| {
+        let input = input.to_owned();
+
+        async move { add_participant(input.0, input.1).await }
+    });
+
+    let form_submit = move |ev: ev::SubmitEvent| {
+        ev.prevent_default();
+
+        form_submit_action.dispatch((name.get(), group.get()));
+
+        name.set("".to_string());
+        let _ = name_input_ref.get().unwrap().focus();
+    };
 
     view! {
         <h2>"Deelnemer toevoegen"</h2>
-        <ActionForm action=form_submit>
+        <form on:submit=form_submit>
             <label>Naam</label>
-            <input type="text" name="name" autocomplete="off" />
+            <input
+                type="text"
+                autocomplete="off"
+                node_ref=name_input_ref
+                on:input=move |ev| {
+                    name.set(event_target_value(&ev));
+                }
+                prop:value=name
+            />
             <label>Groep</label>
-            <select name="group" autocomplete="off">
+            <select on:change=move |ev| {
+                let new_value = event_target_value(&ev);
+                group.set(new_value);
+            } autocomplete="off">
                 <option value="A1">A1</option>
                 <option value="A2">A2</option>
                 <option value="A3">A3</option>
@@ -94,6 +123,6 @@ pub fn AddParticipant() -> impl IntoView {
                 <option value="Z6">Z6</option>
             </select>
             <input type="submit" value="Deelnemer toevoegen" />
-        </ActionForm>
+        </form>
     }
 }