How can I get the value of the currently selected <option> tag inside a <select> tag inside an ActionForm?

[PlGGS]

Hi, I'd like to get the value of the currently selected option in a select tag dropdown, but it doesn't seem to work when I set the select tag's name="series_name" and then try to get the series_name from a server function hooked up as the action for the ActionForm.

E.g.

{"Deserialization":"missing field `series_name`"}

How can I set the currently selected option tag within a select tag to 'selected'?

And then, how can I pass that value to a server function alongside other values from input tags in an ActionForm? (I don't see anything in the docs or anywhere else about using a select tag in an ActionForm)

Simplified example:

<select name="series_name">
    <option value=series.name.clone() name=series.name.clone() selected>{series.name} </option>
</select>

(I'm using a Transition which might be part of the problem idk)
(I had the Transition as its own component before, but I thought that might part of be the reason it wasn't working somehow)

My actual component:

/// Provides the user with input fields to make a new Post of their own
#[component]
pub fn NewPost(
    cx: Scope,
    user: crate::auth::User,
    post_action: Action<NewPostDraft, Result<(), ServerFnError>>,
    add_series_action: Action<NewSeries, Result<(), ServerFnError>>,
) -> impl IntoView {
    let allSeries = create_resource(
        cx,
        move || (),
        move |_| get_all_user_series(cx, user.id)
    );

    view! {
        cx,
        <h1>"New Post"</h1>
        <ActionForm action=post_action>
            <Transition fallback=move || view! {cx, {} }>
                <select name="series_name" class="auth-input">
                    {move || {
                        allSeries.read(cx)
                        .map(move |allSeries| match allSeries {
                            Err(e) => {
                                view! { cx, <pre class="error">"Server Error: " {e.to_string()}</pre>}.into_view(cx)
                            }
                            Ok(allSeries) => {
                                if allSeries.is_empty() {
                                    view! { cx, 
                                        {}
                                    }.into_view(cx)
                                } else {
                                    allSeries
                                        .into_iter()
                                        .map(move |series| {
                                            view! {
                                                cx, 
                                                <option value=series.name.clone() name=series.name.clone()>{series.name}</option>
                                            }
                                        })
                                        .collect_view(cx)
                                }
                            }
                        }).unwrap_or_default()
                    }}
                </select>
            </Transition>
            <br/>
            <label>
                "Title: "
                <input type="text" placeholder="Post title" maxlength="64" name="title" class="auth-input" />
            </label>
            <br/>
            <label>
                "Tagline: "
                <input type="text" placeholder="Catchy tagline" maxlength="256" name="tagline" class="auth-input" />
            </label>
            <br/>
            <label>
                "Content: "
                <input type="text" placeholder="Post content" maxlength="32" name="content" class="auth-input" />
            </label>
            <br/>
            <br/>
            <button type="submit" class="button">"Save Draft"</button>
        </ActionForm>
    }
}

Thank you!

[gbj]

I'm not really sure!

I'd think that the <form> should include the <select> automatically. Is it sent at all in the request? What happens if you turn WASM off in the browser, and it is just sent with a full page reload?

You may be right that the <Transition/> causes an issue here, I'm not sure how exactly a <form> decides which fields are affilialted with it. Does it work if you move the <Transition/> inside the <select>, i.e.,

<select name="series_name" class="auth-input">
  <Transition fallback=move || ()>

(FWIW move || () saves you a few characters and an unnecessary view invocation, so a bit better compile time)

If you test a version with no <Transition/> at all but just provide a few dummy rows, what happens?

etc.

[PlGGS]

It does work if the Transition is moved inside the select tags, but then the empty selection dropdown is still displayed even when there are no items to display inside it. I could add a dummy item though, or hide it with css as well. Thank you for looking into this! And thanks for the tip about moving move || ()